묻고 답해요
150만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
순위 정보를
불러오고 있어요
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요 section04 게시글 등록 과제를 하다가 모르는 부분이 있어 질문 드립니다.
자꾸 저 부분이 빠져나가서 도대체 이유를 모르겠습니다. 강사 님 코드를 똑같이 붙여넣기 해도 똑같은 결과가 나옵니다참 이상 한 거는 InputWrapper안에 Address를 하나를 지우면 올바르게 가운데 출력이 됩니다. 코드는 강사님꺼랑 완전 똑같은데 결과가 왜 이렇게 나오는지 궁금합니다. 아무리 생각해도 똑같이 InputWrapper안에 있으면 잘 나와야 하는데 이유를 모르겠습니다. 아래는 <Address />를 하나 지웠을 경우 입니다. 또한 위에 정렬이 안된 부분도 WriterWrapper 안에 width = 100%를 지우면 정렬이 됩니다. 도대체 왜 이 두 요소만 다르게 출력 되는지 도저히 모르겠습니다.
-
미해결[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
회원가입 과제 완료용
안녕하세요!!과제 완료해서 피드백 부탁드리고자 올렸습니다!앞으로 잘 부탁 드립니당~<html><!DOCTYPE html> <html lang="ko"> <head> <title>회원가입</title> <link rel="stylesheet" href="./02-signup.css"> </head> <body> <div class="signUpContent"> <h2> 회원 가입을 위해<br> 정보를 입력해주세요 </h2> <label for="email" class="label text">* 이메일</label> <input id="email" class="input_text" type="text"> <label for="name" class="label text">* 이름</label> <input id="name" class="input_text" type="text"> <label for="password" class="label text">* 비밀번호</label> <input id="password" class="input_text" type="password"> <label for="password_chk" class="label text">* 비밀번호 확인</label> <input id="password_chk" class="input_text" type="password"> <div class="signUpChk"> <input id="gender_w" class="input_radio" type="radio" name="gender"> <label for="gender_w" class="label gender">여성</label> <input id="gender_m" class="input_radio" type="radio" name="gender"> <label for="gender_m" class="label gender">남성</label> </div> <div class="agreeChk"> <input type="checkbox" id="input_chk"> <span class="agree_text"> 이용약관 개인정보 수집 및 이용, 마케팅 활용 선택에 모두 동의합니다. </span> </div> <div class="out-line"> <div class="line"></div> </div> <button> <span>가입하기</span> </button> </di> </body> </html><css>* { box-sizing: border-box; } h2 { font-size: 32px; color: #0068FF; font-weight: 700; line-height: 47px; } .out-line{ padding: 30px 0px; } .line { border-bottom: 1px solid #E6E6E6; } .label{ font-size: 16px; font-weight: 400; line-height: 24px; } .signUpContent{ width: 670px; height: 960px; border: 1px solid #AACDFF; border-radius: 20px; box-shadow: 7px 7px 39px rgba(0, 104, 255, .25) ; display: flex; flex-direction: column; padding: 72px 100px 70px 100px; } .label.text{ padding: 20px 20px 0 0; color: #797979; } .input_text{ border-style: none; border-bottom: 1px solid #CFCFCF; height: 60px; } .signUpChk{ display:flex; justify-content: center; align-items: center; padding: 50px 0; } .input_radio{ margin: 0 5px 0 0; width: 20px; height: 20px; } .label.gender{ padding-right: 30px; } .agreeChk{ display: flex; justify-content: center; align-items: center; } .agree_text{ height: 22px; font-size: 14px; font-weight: 400; line-height: 20px; } button{ width: 470px; height: 75px; background-color: #FFF; border: 1px solid #0068FF; border-radius: 10px; } button > span { font-size: 18px; font-weight: 400; color: #0068FF; }
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
graphQL 강의중
플레이 그라운드에서 스크랩 해오면 코드에서 인식이 안돼는것 같은데 원인을 못찾겠습니다 ㅠ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
수업자료 질문입니다.
안녕하세요 오늘 이 프론트엔드 부트캠프 수업을 결제해서 시작했는데 노션 수업자료를 준다라고 알고 있는데 이 노션 수업자료는 어디서 받아보면 되나요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
react Dom 설치 에러
안녕하세요. 추가 질문 달았는데 답변이 안 달려서 따로 올립니다.섹션 7 학습 중 React dom 설치하고 로컬 서버 열었더니 이런 오류 메시지가 뜹니다.대강 버전이 안 맞는다는 것 같은데 해결 방법을 모르겠습니다.이거 답변 기다리느라 일주일 넘게 진도를 나가지 못하고 있습니다. 조속한 해결 부탁 드립니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
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창에서 실습 중인데 무엇이 문제일까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
[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; }생긴건 비슷하게 만들었는데 가입하기가 안 눌리는 것 같아요ㅠㅠ 이메일,이름 등 인풋도 밑줄에 맞게 써지지도 않습니다 ㅠㅠ
-
미해결[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
react-infinite-scroller에 overflow style 사용하기
안녕하세요. 중고마켓 리스트를 무한스크롤로 구현 중에 있는데요.부모 요소를 감싸서 overflow로 스크롤을 주면 height값이 먹혀서 데이터를 20개 가져오고 나서는 더이상 스크롤을 내릴 수가 없네요. 이건 ListWrap인 스크롤 컴포넌트의 부모요소를 없앨때 이구요. 이건 ListWrap을 넣었을 때 저렇게 값이 나옵니다. 어떻게 해야할까요? 아니면 무한스크롤은 아래처럼 overflowscroll을 넣고 구현이 안되는건가요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
자바스크립트 배열 email split 콘솔 내용 복사 후 주석처리
안녕하세요 자바스크립트 배열 중에 email split 따라하면서 콘솔에 있는 내용 복사해서 vb Code에 붙혀 넣고 주석처리 했습니다.근데 주석 뒤에 "codecamp": Unknown word. 라고 나타납니다. 이건 왜 그런가요?
주간 인기글
순위 정보를
불러오고 있어요
