월 79,200원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
Graphql-codegen 설치중에 에러
Graphql-codegen 설치중에 에러가 계속 나서 node-module 과 yarn.lock 을 삭제 한후 다시 yarn install 실행 후 yarn add --dev typescript @graphql-codegen/cli 에러가 났습니다 내친구 쳇에게 물어봤더니 제가 한거처럼 하라고 하네요 매번 환경설정시 긴장의 연속!!! 왜이러는 걸까요?? 혹시 yarn add -D typescript ts-node @graphql-codegen/cli @graphql-codegen/client-preset @parcel/watcher 요걸 해줘야되는지 ??:~/codecamp/class$ yarn add --dev typescript @graphql-codegen/cliyarn add v1.22.22[1/4] Resolving packages...error AggregateError at internalConnectMultiple (node:net:1102:18) at internalConnectMultiple (node:net:1160:5) at internalConnectMultiple (node:net:1160:5) at internalConnectMultiple (node:net:1160:5) at internalConnectMultiple (node:net:1160:5) at internalConnectMultiple (node:net:1160:5) at internalConnectMultiple (node:net:1160:5) at internalConnectMultiple (node:net:1160:5) at internalConnectMultiple (node:net:1160:5)info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
- 미해결[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
Apollo-Client 설치 에러
안녕하세요, 섹션 7 듣고 있습니다.Apollo-Client를 설치하고 yarn dev 실행하니 저렇게 뜨네요.해당 파일을 지우거나 해도 이번엔 그 파일이 없다는 이유로 에러가 뜹니다.Node.modules랑 package.lock.json 삭제 후 재설치해도 똑같고요.조속한 해결 부탁 드리겠습니다.
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
404에러
//section05/05-05-dynamic-routing-board-mutaton import { 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 [myFunction] = useMutation(나의그래프큐엘셋팅); const onClickSubmit = async () => { try { // 코드 시도하다 실패하면 catch로 넘어감 const result = await myFunction({ variables: { //variables === $ 역할을 함. 그렇다고 여기선 $를 쓰면 안됨 writer: "훈이", title: "안녕하세요", contents: "반갑습니다.", }, }); console.log(result); console.log(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> </> ); } //section05/05-05-dynamic-routing-board-mutation-moved/[number] import { useQuery, gql } from "@apollo/client"; import { useRouter } from "next/router"; // 폴더 [qqq] 대괄호로 감 싸놓으면 폴더가 변수가됨 const FETCH_BOARD = gql` query fetchBoard($number: Int) { fetchBoard(number: $number) { 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) }, //graphql fetchBoard에 자료가 없거나 null이면 오류가 뜸 }); console.log(data); return ( <> <div> {router.query.number}번 게시글 </div> <div>작성자 : {data?.fetchBoard?.writer}</div> <div>제목 : {data?.fetchBoard?.title}</div> <div>내용 : {data?.fetchBoard?.contents}</div> {/* 자료가 없거나 null이 뜨면 fetchBoard에 옵셔널체이닝('?' 자료가 오면 다시 리 렌더링 해줌) 붙이기 */} </> ); } 게시물을 정상적으로 잘 등록이 됩니다 플레이그라운드에서 fetchboard 조회를 해봐도 잘 나옵니다.네트워크 탭에 들어가도 아무것도 안나오고 콘솔에는 그저on-demand-entries-client.js:86 GET http://localhost:3000/section05/05-05-dynamic-routing-board-mutation-moved/23131 404 (Not Found) 뭐가 문제일까요?
- 미해결[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
타입스크립트 설치 강의를 듣고 있는데 자꾸 에러가 납니다.
해당 영역 을 17.0.2로 바꾸는데도 "@types/node": "^17.0.2", "@types/react": "^17.0.02",이렇게 뜨더니 18.2.79로 바뀌고 에러가 뜹니다
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
강의 중간중간에 1일차 2일차 몇교시 알려주시는거
지켜보고 싶습니다 제가 분량조절이 잘 안될것같아서요혹시 일정표같은게 있을까요?
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
localstorage.setItem 위치 질문
수업에서는 '카운트다운 시작' 버튼 눌러서 Starter 함수가 실행되면 로컬 스토리지가 setInterval 함수로 인해 비워지기 때문에, CounterMaker 함수 내에 if문을 작성하여 해결하고 있습니다.저는 이 방법 말고 사진처럼 starter 함수 내부에서 setInterval 함수(clearTimer라고 작성한..) 호출 위치를 조정하여 해결하였는데, 이 방법에 문제가 있을지 궁금합니다!
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
404 오류 관련 질문
05-05-dynamic-routing-board-mutation05-05-dynamic-routing-board-mutation-moved 계속해서 대조해보지만 게시글 등록하기를 누르고 moved 페이지로 넘어갈 때 404 오류가 뜹니다. catch에서 잡히지 않는걸로 보아 데이터 전송에서 문제가 있는건 아니지 않을까 싶은데, 아무리 봐도 해결책이 보이지 않아 질문 남깁니다.
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
백틱 적용이 안 돼요..
위 화면과 같이 백틱으로 감싸서 사용할 때, 적용이 안 되는데, 서칭을 해보면 Browser 호환 문제라는 말들이 있습니다. 영상에서와 같은 Chrome을 통한 Console창에서 실습 중인데 무엇이 문제일까요?
- 미해결[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
VSC에서 yarn dev가 작동하지 않습니다 (섹션 4)
안녕하세요. Node.js 챕터 수강 중인 학생입니다.과제를 만들기에 앞서 freeboard_frontend 폴더에서 yarn dev 명령어 실행하려는데,사이트 접속할 때마다 에러라고 뜹니다. ls 명령어로 확인도 하는데 왜 이러는지 모르겠네요.. 검색해도 뾰족한 대안이 안 나오고해결 부탁 드리겠습니다 ㅠㅠ
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
[section07] 포트폴리오 리뷰
안녕하세요 포트폴리오 리뷰 하다보니까 문제가 생겨서 올립니다. 주석 처리가 안된 부분이 코드캠프에서 제공해주신 코드이고, 주석처리한 부분이 제가 직접 짠 코드입니다. 코드캠프에서 제공해주신 코드대로 입력하면 아래와 같은 에러가 발생합니다. 어떻게 해결해야할까요?? grqphql 링크는 https://backendonline.codebootcamp.co.kr/graphql여기 사용했습니다.
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
[React] section5. 에서 질문있습니다.
안녕하세요.학생을 생각해서 너무나 세심하고 친절히 알려주심에 매번 감동받고 감사합니다.섹션5> 05-05-dynamic-routing-board-mutation 에서 에러를 해결 못해서 문의드립니다.route.push 로 페이지 이동을 하는 이 라인에서 자꾸 에러가 발생합니다. (404. not found 에러입니다) 이것저것 다 시도해도 에러가 안 없어지네요 ㅠ코딩은 강의에 나온 대로 그대로 저는 타이핑 한 거 같은데요.어떻게 해야지 정상적으로 dynamic 페이지 이동이 가능할까요?답변 부탁드립니다 ^^
- 미해결[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
useMoveToPage 안에 onClickMoveToPage 함수를 따로 만드는 이유
ex1) useMyMoveToPage1.tsximport { useRouter } from "next/router"; export const useMyMoveToPage1 = (path: string) => () => { const router = useRouter(); // error void router.push(path); };ex2) useMyMoveToPage2.tsx, 강의내용import { useRouter } from "next/router"; interface IUseMyMoveToPage2Return { onClickMoveToPage: (path: string) => () => void } export const useMyMoveToPage2 = (): IUseMyMoveToPage2Return => { const router = useRouter(); const onClickMoveToPage = (path: string) => () => { void router.push(path); }; return { onClickMoveToPage }; };ex3) /test/index.tsximport { useMyMoveToPage1 } from "../../src/components/commons/hooks/useMyMoveToPage1"; import { useMyMoveToPage2 } from "../../src/components/commons/hooks/useMyMoveToPage2"; export default function TestPage() { const { onClickMoveToPage } = useMyMoveToPage2(); return ( <> <button onClick={useMyMoveToPage1("/test/01")}> useMyMoveToPage: Move To Test01 Page </button> <button onClick={onClickMoveToPage("/test/01")}> useMyMoveToPage2: Move To Test01 Page </button> </> ); }[useMyMoveToPage1 error 내용]useMoveToPage 만들기를 실습하다가 더 짧게 리팩토링할 수 있을 것 같다는 생각에 맨위에 ex1 처럼 해봤는데 const router = useRouter() 부분에 문제가 있다고 하더라구요. 에러 내용을 번역해서 봐도 "잘못된 hook 호출이고 함수 컴포넌트 내부에서만 호출될 수 있다"라고 하는데 무슨 말인지도 사실 잘 모르겠습니다.. 강의내용처럼 useRouter를 밖에 두고 onClickMoveToPage라는 hof 함수를 따로 만들어 return 해줘야 문제가 없다는 것은 알겠지만 음... 이해가 되지 않아서 더 자세한 원리와 error가 나는 이유에 대해서 알려주시면 감사드리겠습니다. 잘 알려주시는 것에 비해 제 부족한 학습능력이 살짝 부끄럽네요 ㅠㅠ
- 미해결[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
refreshToken useAuth에 적용했을 때 문제점
안녕하세요. 리프레쉬 토큰을 사용하여 useAuth에 적용을 했는데요. 로그인을 하여 리프레쉬 토큰이 발급 되어도 조건에 만족하지 못하고 있습니다.확인해보니 restoreAccessToken을 가져오지 못하여 발생하는 이벤트 였습니다.하지만 새로고침을 하면리프레시 토큰을 찾아서 인증이 됩니다.무슨 이유 때문인지 잘 모르겠습니다.리프레시 토큰 코드도 첨부하도록 하겠습니다.추가적으로 로그인 인증시getAccessToken을 직접 불러오면 문제가 없지만리코일로더블로 이용하면 이런 문제가 생깁니다.!!
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
프리캠프 회원가입
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./css/index.css"> </head> <body> <div class="wrapper"> <div class="main"> <div class="detail"> <div class="detail1">회원가입을 위해<br> 정보를 입력해주세요</div> <div class="detail2"> <input type="text" class="box" placeholder="* 이메일"> </div> <div class="detail3"> <input type="text" class="box" placeholder="* 이름"> </div> <div class="detail4"> <input type="password" class="box" placeholder="* 비밀번호"> </div> <div class="detail5"> <input type="password" class="box" placeholder="* 비밀번호 확인"> </div> <div class="gender"> <div> <input type="radio" name="gender">여성 </div> <div> <input type="radio" name="gender">남성 </div> </div> <div class="checkbox"> <input type="checkbox">이용약관 개인정보 수집 및, 마케팅 활용 선택에 모두 동의합니다. </div> <div class="line"></div> <div class="join"> <button>가입하기</button> </div> </div> </div> </div> </div> </body> </html> * { box-sizing: border-box; margin: 0px; } html,body { width: 100%; height: 100%; } .wrapper { width: 1920px; height: 1080px; display: flex; flex-direction: row; align-items: center; justify-content: center; } .main { width: 670px; height: 960px; border-radius: 20px; border: 1px solid #AACDFF; display: flex; flex-direction: row; align-items: center; justify-content: center; box-shadow: 7px 7px 39px 0px #0068FF40; } .detail { width: 470px; height: 818px; display: flex; flex-direction: column; align-items: center; } .detail1 { width: 466px; height: 94px; font: 700; font-size: 32px; color: #0068FF; } .detail2 { width: 466px; height: 80px; color: #797979; border-bottom: 1px solid #0068FF; } .detail3 { width: 466px; height: 80px; color: #797979; border-bottom: 1px solid #797979; } .detail4 { width: 466px; height: 80px; color: #797979; border-bottom: 1px solid #797979; } .detail5 { width: 466px; height: 80px; color: #797979; border-bottom: 1px solid #797979; margin-bottom: 20px; } .box { border: none; padding-top: 30px; } .gender { width: 140px; height: 23.94px; border: none; display: flex; flex-direction: row; justify-content: space-between; margin: 20px; } .checkbox { width: 454px; height: 21.06px; display: flex; flex-direction: row; justify-content: center;; font-size: 15px; margin: 30px; } .line { width: 470px; height: 1px; color: #E6E6E6; border: 1px solid #E6E6E6; margin: 20px; } .join { width: 470px; height: 75px; border: 1px solid #0068FF; border-radius: 10px; display: flex; justify-content: center; margin: 20px; } button { border: none; background-color: white; color: #0068FF; }생긴건 비슷하게 만들었는데 가입하기가 안 눌리는 것 같아요ㅠㅠ 이메일,이름 등 인풋도 밑줄에 맞게 써지지도 않습니다 ㅠㅠ
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
컴포넌트 props 질문
자잘하게 궁금한게 있으면 여러방식으로 직접해보고는 하는데요 아래의 코드처럼 {...["a", "b", "c"]} 이렇게 props를 전달했을 때 console에는 {0: "a", 1: "b", 2: "c"} 이렇게 없던 배열값의 키값이 생겼습니다. 짐작하기로는 index 위치가 key값이 된 것 같기는 한데 왜 이렇게 되는지 궁금합니다.ex) parent/index.tsximport Child from "./child/index.tsx"; export default function Parent(): JSX.Element { return <Child {...["a", "b", "c"]} />; }ex) parent/child/index.tsxexport default function Child(props: any): JSX.Element { console.log(props); // {0: "a", 1: "b", 2: "c"} return <></>; }
- 미해결[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
react-infinite-scroller에 overflow style 사용하기
안녕하세요. 중고마켓 리스트를 무한스크롤로 구현 중에 있는데요.부모 요소를 감싸서 overflow로 스크롤을 주면 height값이 먹혀서 데이터를 20개 가져오고 나서는 더이상 스크롤을 내릴 수가 없네요. 이건 ListWrap인 스크롤 컴포넌트의 부모요소를 없앨때 이구요. 이건 ListWrap을 넣었을 때 저렇게 값이 나옵니다. 어떻게 해야할까요? 아니면 무한스크롤은 아래처럼 overflowscroll을 넣고 구현이 안되는건가요?
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
자바스크립트 배열 email split 콘솔 내용 복사 후 주석처리
안녕하세요 자바스크립트 배열 중에 email split 따라하면서 콘솔에 있는 내용 복사해서 vb Code에 붙혀 넣고 주석처리 했습니다.근데 주석 뒤에 "codecamp": Unknown word. 라고 나타납니다. 이건 왜 그런가요?
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
05-03-static-routing-board-query
데이터가 사라진건가요 .. null 떠서 강의을 맞춰 가기가 힘들어요 ㅠㅠ
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
그래프QL의 _id값을 반환받을수가 없습니다.
import { gql } from "@apollo/client"; export const FETCH_BOARDS = gql` query fetchBoards { fetchBoards { _id writer title createdAt } } `;import { useQuery } from "@apollo/client"; import { useRouter } from "next/router"; import BoardListUI from "./BoardList.presenter"; import { FETCH_BOARDS } from "./BoardList.queries"; export default function BoardList() { const { data } = useQuery(FETCH_BOARDS); //쿼리문을 실행하면 데이터에 값 넣어주기 return ( <BoardListUI data = {data} /> ); } 강사님 하고 똑같이 했는데 제것만 에러가 나네요 강사님껄로 하면 실행이 됩니다 _id 받질 못해서 안되는데 왜이럴까요 ㅠㅠ { "errors": [ { "message": "Cannot query field \"_id\" on type \"BoardReturn\".", "locations": [ { "line": 3, "column": 5 }
- 미해결[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
accessToken을 createUploadLink에 넣어주는 이유?
ex) src/components/commons/apollo/index.tsx// ... const uploadLink = createUploadLink({ uri: "...", headers: { Authorization: `Bearer ${accessToken}` }, }); const client = new ApolloClient({ link: ApolloLink.from([uploadLink]), cache: GLOBAL_STATE, }); // ...이전 강의에서 createUploadLink 함수를 이미지같은 파일을 업로드 설정을 위해 불러왔었는데 이 안에 accessToken을 넣어주는 게 이해가 가지 않았습니다. 지금 제 머릿속에는 자동으로 headers에 accessToken을 담아서 인가를 해주는 설정을 왜 이미지업로드를 위한 설정함수에 accessToken을 넣어주는 거지?라는 생각이 들어서 혼란스럽습니다.. 이 부분에 대해서 제가 잘못 이해하고 있거나 이렇게 해주는 이유에 대해서 알려주신다면 감사드리겠습니다!