묻고 답해요
131만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
포트폴리오 깃허브
포트폴리오를 깃허브에 올리려고 하는데 git허브강좌 보면서 따라하고 있었는데 git add . 후 git status 하면은 해당 오류가 떠요 .. admin@DESKTOP-8KF9PK5 MINGW64 ~/Desktop/portfolio (master)$ git add .admin@DESKTOP-8KF9PK5 MINGW64 ~/Desktop/portfolio (master)$ git statusOn branch masterNo commits yetChanges to be committed:(use "git rm --cached <file>..." to unstage)new file: freeboard_frontendChanges not staged for commit:(use "git add <file>..." to update what will be committed)(use "git restore <file>..." to discard changes in working directory)(commit or discard the untracked or modified content in submodules)modified: freeboard_frontend (modified content, untracked content) 해당 폴더 구조는 이렇습니다 보니까 .git이 이중으로 설치되어 있는데 어디 부분을 어떤 명령어로 삭제해야하는지 알려주시면 감사하겠습니다..!
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
콘솔로그가 2번 찍히는데 이유를 잘 모르겠습니다.
05-05-dynamic-routing-board-mutation강의에 있는 내용을 구현했습니다이상은 없게 정상 작동하는데콘솔로그가 2번 찍히는데 이해가 가지 않습니다===========================================폴더구조================================================05-05-dynamic-routing-board-mutation/index.jsimport {gql, useMutation} from "@apollo/client"; import {useRouter} from "next/router"; const 나의그래프큐엘세팅 = gql` mutation createBoard($writer: String, $title: String, $contents: String){ createBoard(writer: $writer, title: $title, contents: $contents){ _id number message } } ` export default function GraphqlMutationPage() { const router = useRouter() const [나의함수] = useMutation(나의그래프큐엘세팅) const onClickSubmit = async () => { try{ // try에 있는 내용을 시도하다가 실패하면, 다음에 있는 모든 줄들을 모두 무시하고, catch에 있는 내용이 실행됨. const result = await 나의함수({ variables: { writer: "호날두", title: "모두다 외쳐", contents: "Siuuuu~~~~~~" } }) //console.log("result 값은 다음과 같습니다", result) //console.log("동적라우팅 주소는 number라고 지칭했고 다음과 같아요", result.data.createBoard.number) // router.push('/section05/05-05-dynamic-routing-board-mutation-moved' + result.data.createBoard.number) router.push(`/section05/05-05-dynamic-routing-board-mutation-moved/${result.data.createBoard.number}`) }catch (error){ alert(error.message) } } return <button onClick={onClickSubmit}>GRAPHQL-API 요청하기</button> // 한줄일 때는 괄호 ( ) 가 필요없다. }===========================================================05-05-dynamic-routing-board-mutation-moved/[number]/index.jsimport {gql, useQuery} from "@apollo/client"; import {useRouter} from 'next/router' const FETCH_BOARD = gql` query fetchBoard($number: Int){ fetchBoard(number:$number){ # 1번 게시글 내용에 생략된 내용이 많아서 19047을 1번 게시글로 가정 number writer title contents } } ` export default function StaticRoutingMovedPage(){ const router = useRouter() console.log("라우터에 뭐가 들어있는지 알아보기",router) const { data } = useQuery(FETCH_BOARD, { variables: { number: Number(router.query.number) } }) console.log("데이터에 뭐가 들어있는지 알아보기",data) return( <> <div>{router.query.number}번 게시글 이동이 완료됐어요!!😀😀</div> <div>작성자: {data && data.fetchBoard?.writer}</div> <div>제목: {data?.fetchBoard?.title}</div> <div>내용: {data? data.fetchBoard?.contents : "로딩중입니다."}</div> </> ) }==================================================================브라우저 콘솔창-> 여기서 GraphQL요청 후 콘솔 찍어놓은게 2번 반복됩니다.위의 내용 확대 ==================================================================네트워크 탭여기에 GraphQl 요청이 두번 나간 것 같은데 그것 때문에 그런 건가요?아니면 data 내용을 콘솔 찍었을때 한번 undefined 처리가 되어서 데이터를 받아오는 과정에서 한번 더콘솔이 찍힌건가요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
로그 결과값 표기 이상
안녕하세요, 수업 도중에 콘솔에 찍힌 결과가 이해가 되지 않아 문의 남깁니다.persons에 "철수"부터 "영수"까지 for문에 결과가 총 6번 나와야 하는데 4개 값 밖에 안나와 해당 이유. 궁금합니다,
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
04-05-graphql-mutation-product
마지막 createProduct 불러오는 부분에서 createProductInput 부분에 제공되는 값이 없다고 뜨는 것 같습니다.오타나 변수를 확인해봐도 제 눈에는 안보여서.. 이 부분에서 오류가 나는건 맞는 것 같은데 서버에서 못받아오는걸까요? 어떤게 문제일까요?ㅠㅠ 작성코드도 같이 첨부합니다..!
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
안녕하세요 리액트에서 fetchUser를 이용해 로그인이 되어있는지 검증하려고 합니다
리액트에서 fetchUser를 이용해 로그인이 되어있는지 검증하려고 하는데 로그인api를 호출 후 fetchUser를 호출하면 Unauthorized에러가 납니다 헤더에 토큰이 저장되지 않아서 그런걸까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
섹션 22부터 새로 개정된 강의라고 하는데, 어떻게 들어야 할까요?
안녕하세요, 금일 (10월 28일) 강의를 시작한 학생입니다.어떻게 강의를 들어야 하는지 헷갈려서 문의드려요.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
섹션 31 댓글 기능 구현 과제 관련 질문
안녕하세요 섹션 31 댓글 기능 구현 과제 중 궁금한 점이 있어 질문 남깁니다 댓글 리스트의 수정 아이콘 클릭 시 사진과 같은 화면이 나오도록 했고, 댓글 등록하기 presenter component를 재사용 했습니다댓글 리스트 presenter 파일입니다export default function CommentListUI(props) { return ( <S.Wrapper> {props.data?.fetchBoardComments.map((item) => ( <S.CommentListWrapper key={item._id}> {props.isEdit && props.commentId === item._id ? ( <CommentWriteUI></CommentWriteUI> ) : ( <S.Comment_Container> <S.profile_icon src="/02/profile_icon.png"></S.profile_icon> <S.Content_container> <S.Name_Star_container> <S.Text style={{ fontWeight: "600" }}>{item.writer}</S.Text> <S.ReviewStar_container style={{ marginLeft: "16px" }}> <S.StarDiv></S.StarDiv> <S.StarDiv></S.StarDiv> <S.StarDiv></S.StarDiv> <S.StarDiv></S.StarDiv> <S.StarDiv></S.StarDiv> </S.ReviewStar_container> </S.Name_Star_container> <S.Text style={{ marginTop: "-15px", fontWeight: "500" }}> {item.contents} </S.Text> <S.Text style={{ fontSize: "12px", fontWeight: "400", color: "#BDBDBD", }} > {getDate(item.createdAt)} </S.Text> </S.Content_container> <S.Icon_container> <S.Icon style={{ backgroundImage: `url("/createComment.png")` }} onClick={() => props.onClickTEST(item._id)} ></S.Icon> <S.Icon style={{ backgroundImage: `url("/clear.png")` }} onClick={() => props.onClickDelete(item._id)} ></S.Icon> </S.Icon_container> </S.Comment_Container> )} </S.CommentListWrapper> ))} </S.Wrapper> ); } 삼항연산자를 사용해 나오는 화면을 다르게 했습니다isEdit 변수는 수정하기 아이콘 클릭 시 true로 바뀌고, 삼항연산자 조건에 isEdit 변수만 사용하니 수정 아이콘을 클릭하지 않은 다른 댓글 리스트가 사라지면서 재사용한 댓글 등록 presenter 파일만 화면에 나와서 조건은 위와 같이 작성했습니다 여기서 문제는 수정 아이콘을 클릭해 나오는 댓글 등록 창은 container 파일에 작성한 함수가 작동하지 않는 것입니다 댓글 리스트 container 파일입니다export default function CommentList() { const { data } = useQuery(FETCH_COMMENTS); const [deleteBoardComment] = useMutation(DELETE_COMMENTS); const onClickDelete = async (item) => { const pw = prompt("비밀번호를 입력해주세요."); try { await deleteBoardComment({ variables: { pw: pw, boardCommentId: item, }, refetchQueries: [{ query: FETCH_COMMENTS }], }); alert("삭제되었습니다."); } catch (error) { alert(error.message); } }; // 수정하기 아이콘 클릭 시 화면 변화 const [isEdit, setIsEdit] = useState(false); const [commentId, setCommentId] = useState(); const onClickTEST = (item) => { setIsEdit(true); setCommentId(item); }; // console.log(commentId); return ( <CommentListUI data={data} onClickDelete={onClickDelete} onClickTEST={onClickTEST} isEdit={isEdit} commentId={commentId} ></CommentListUI> ); } 댓글 등록 container 파일입니다 const [updateBoardComment] = useMutation(UPDATE_BOARD_COMMENT); const onClickUpdate = () => { // updateBoardComment({ // variables: { // updateBoardCommentInput: { // contents: contents, // rating: 0 // }, // password: pw, // boardCommentId: // } // }) console.log("Test"); }; return ( <> <CommentWriteUI onChangeWriter={onChangeWriter} onChangePw={onChangePw} onChangeContents={onChangeContents} onClickUpdate={onClickUpdate} ></CommentWriteUI> </> ); } onClickUpdate 함수는 댓글 작성 presenter 파일의 등록하기 버튼에 연결되어 있습니다상세 페이지 로딩 시 나오는 댓글 등록창은 버튼 클릭 시 콘솔이 제대로 나오는데댓글 리스트 수정 아이콘을 눌러 나오는 댓글 등록창에서는 버튼을 눌러도 콘솔 자체가 나오지 않습니다 댓글 과제 가이드를 확인해서 어떻게 수정하면 좋을지는 알았지만, 궁금한 점이 해소되지 않네요궁금한 점은삼항연산자, map 등 기능의 속성을 제대로 알지 못한 채 사용한 문제인지코드 자체를 잘못 작성한 것인지 추가로 rating(별점) 데이터 활용법에 대한 힌트를 얻고 싶습니다rating 값 1 = 별 1개 인가요? rating 숫자 데이터가 별과 어떻게 연결되는지 잘 모르겠습니다 부족한 점이 많아 질문이 너무 길어졌네요 항상 감사합니다
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
MyIcon 에러
다음과 같이 에러가 나는데 이유가 뭔가요 'rev' 속성이 '{}' 형식에 없지만 'Pick<AntdIconProps, "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "start" | "hidden" | "color" 에서 필수입니다 라고 나옵니다
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
Cannot find module 'msw/node' from 'src/commons/mocks/index.js'
안녕하세요. test를 하던 중 오류가 발생하여 문의드립니다.지금 현재 코드를import { setupServer } from "msw/node"; import { apis } from "./apis"; export const server = setupServer(...apis); 위에처럼 입력해 놓은 상태입니다. 하지만 테스트 실행 시아래와 같이 발생합니다. Cannot find module 'msw/node' from 'src/commons/mocks/index.js' Require stack: src/commons/mocks/index.js jest.setup.js > 1 | import { setupServer } from "msw/node"; | ^ 2 | import { apis } from "./apis";추가적으로 지금 jest관련 페이지에서Parsing error: ESLint was configured to run on `<tsconfigRootDir>/src\commons\mocks\index.js` using `parserOptions.project`: <tsconfigRootDir>/tsconfig.json However, that TSConfig does not include this file. Either: - Change ESLint's list of included files to not include this file - Change that TSConfig to include this file - Create a new TSConfig that includes this file and include it in your parserOptions.project See the typescript-eslint docs for more info: https://typescript-eslint.io/linting/troubleshooting#i-get-errors-telling-me-eslint-was-configured-to-run--위와 같은 오류가 발생합니다. 해결 부탁드립니다!
-
미해결[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
eslint 설치시 노드 버전 오류때문에 설치가 안되는거 같습니다.
노드 버전때문에 eslint가 설치되다가 중간에 오류가 났습니다. 그래서 오류 내용이 노드 16버전이나 18버전 이상을 써라고 하는거 같더라고 지금 17.3.1버전이고요, 그래서 nvm use 명령을 사용해서 18.15버전을 사용해서 설치 했더니 그때부터 parser 오류가 계속 나더라고요..ㅠㅠ parser 오류를 없애려고 하니, eslint가 작동을 안하는거 같고 도와주세요 아래에 tsconfig.json, eslintrc.js, package.json, 그리고 경로 사진을 첨부하여 드립니다. 어떻게든 구글 검색으로 할려고 했으나... 도대체 어느버전이 호환이 안되는건지 모르겠네요 ㅠㅠeslint 설치시 오류난 상황 캡처 사진입니다.파일 경로 캡처입니다.tsconfig 캡처입니다.package.json 캡처입니다.eslintrc.js 캡처입니다.
-
미해결[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
린터 Parsing error
안녕하세요.린터와 포멧터 강의 따라하면서 모든 설치와 적용을 끝냈는데요. 하던 중에 .eslintrc.js에서 다음과 같은 에러가 뜨기 시작하더라구요.해결방법 서치하다가 아래 코드를 추가했더니 위 에러는 사라지긴 했는데 맞는 해결방법인지 모르겠네요.ignorePatterns: [".eslintrc.js"]그리고 이 코드를 넣든 안 넣든 class 내에 있는 모든 js 파일들에서 import 부분에 Parsing error가 나네요...(ts, tsx 파일들은 제대로 lint가 작동하는 것 같아 전부 고칠 수 있었습니다)이런 오류가 아마 모든 js 파일에서 뜨네요yarn lint하면 이렇게 도배가 되구요... 어떻게 해결해야 하나요?참고로 .eslintrc.jsmodule.exports = { env: { browser: true, es2021: true, }, extends: ["standard-with-typescript", "plugin:react/recommended", "prettier"], overrides: [ { env: { node: true, }, files: [".eslintrc.{js,cjs}"], parserOptions: { sourceType: "script", }, }, ], parserOptions: { project: "**/tsconfig.json", ecmaVersion: "latest", sourceType: "module", }, plugins: ["react"], rules: { "react/react-in-jsx-scope": "off", "@typescript-eslint/no-misused-promises": "off", "@typescript-eslint/no-unused-vars": "off", }, ignorePatterns: [".eslintrc.js"], }; tsconfig.json{ "compilerOptions": { "target": "es5", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "strict": true, "forceConsistentCasingInFileNames": true, "noEmit": true, "incremental": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve" }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], "exclude": ["node_modules"] } 폴더 구조입니다!
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
yarn run start가 안돼요
package.jsonnode_modules, yarn.lock 지우고 다시 깔아보고 라이브러리 버전 맞춘거 같은데 yarn run start가 안돼요 tsconfig.jsoneslintrc.jstsconfig.json, eslintrc.js 느낌상 이쪽 문제 같은데 어딘지 모르겠습니다여기 폴더 인터넷 찾아보고 조금 수정했는데 모르겠어요어느순간부터 오류 놓쳤는데 어딘지 모르겠어요
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
이 호출과 일치하는 오버로드가 없습니다. 오류
무한스크롤 Section16-02-infinite-scroller 강의를 듣고 있을 때 발생한 오류입니다.실행은 정상적으로 되는데 해결방법 알 수 있을까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
52분 47초 문제점 2가지 설명 중 2번째 문제점 관련 질문
안녕하세요 차근차근 강의 들으며 공부하고 있는 수강생입니다 현재 강의에서 알려주신 방법에 따라 페이지를 구현할 경우 2가지 문제점에 대해 말씀해 주셨는데요2번째 문제점은 내가 수정하고 싶은 요소만 수정했을 때, 기존에 입력했던 다른 요소가 삭제된다는 것이었습니다 그런데 container 파일 작성 요소 중 const [writer, setWriter] = useState(); const [title, setTitle] = useState(); const [contents, setContents] = useState();useState() 소괄호가 비어 있을 땐 기존에 입력했던 다른 요소가 삭제되지 않은 채 수정한 요소가 반영되었습니다 여기서 궁금한 점은useState() 소괄호가 비어 있을 때와 소괄호 안에 빈 문자열("")을 넣어주었을 때 결과가 달라지는 이유useState() 소괄호가 비어 있는 상태로 코드 작성을 끝내지 않는 이유입니다 감사합니다
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
import 경로 오류질문입니다
BoardWriter 컴포넌트를 자동완성으로 쓸 경우 import 경로 자동완성이 @으로 시작되면 경로 오류가 뜨고 위처럼 ../ 로 바꿀경우 오류가 안뜨는데 자동완성으로 하면 안되나요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
그래프큐엘 질문입니다
여기서 만들때 writer 이랑 password에 string 느낌표 안붙여있는건 오류인가요? 원래는 느낌표가 있어서 필수 입력인거죠?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
section 26 포트폴리오 리뷰 강의
그래프큐엘로 작성자 비밀번호 제목 내용 이렇게 넘기고 조회해보려는데 패스워드는 안되더라고요 패스워드 넘긴거는 그냥 넘긴건가요 아님 따로 조회할수있나요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
Warning: React has detected a change in the order of Hooks called by BoardDetail. This will lead to bugs and errors if not fixed. For more information
위에 코드 대로 하면 제목에 오류가 뜨고 if문을 지우고 varables에 boardId : String(router.query.boardId)로 하면 제목에 오류가 안뜨는데 어떻게 해결하면 좋을까요
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
이미지 업로드 최적화에 대해 고민이 있습니다.
안녕하세요! 이미지 업로드 최적화에 대해서 질문이 있습니다. (수정하기 부분) 최적화 진행전에는 상품 수정페이지에서 useEffect를 사용해서 이미지 주소를 가져온다음 state에 저장한 후 props로 전달하여 작성했던 이미지를 보여주고 있었습니다 .하지만 최적화에서는 미리보기 주소를 사용해서 보여주고 있어서 미리보기 주소를 넘기고 싶은데 fetchUseditem에서는 images를 File[]이 아니라 String[]으로 받아오고 있어서 미리보기 주소를 어떻게 만들어서 전달해야 할지 고민입니다... 수정하기 페이지 접속시 state값이 초기화되어서 이 값을 어떻게 유지해야할지 모르겠습니다. 현재 이미지 버튼 컴포넌트에서는 onChangeFileUrls함수에 file과 미리보기 주소 , 해당 인덱스를 전달하고 있습니다.onChangeFileUrls함수에서 state에 저장후 uploadFile를 하여 받은 결과를 사용해서 상품을 작성하고 있습니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
게시글 디테일 페이지에 댓글부분 레퍼런스코드
게시글 디테일 페이지에 댓글부분 레퍼런스코드는 따로 없을까요 31-2 레퍼런스 코드에는 나와있지 않아서요