묻고 답해요
130만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
[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; }생긴건 비슷하게 만들었는데 가입하기가 안 눌리는 것 같아요ㅠㅠ 이메일,이름 등 인풋도 밑줄에 맞게 써지지도 않습니다 ㅠㅠ
-
해결됨풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
프로젝트 배포
내용 정리해서 프로젝트로 사용하고 싶어서요로컬에서만 돌릴 수 있고 따로 배포하거나 할 수는 없나요??
-
미해결[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
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을 넣어주는 거지?라는 생각이 들어서 혼란스럽습니다.. 이 부분에 대해서 제가 잘못 이해하고 있거나 이렇게 해주는 이유에 대해서 알려주신다면 감사드리겠습니다!
-
미해결[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
중고마켓 찜하기 토글 기능 데이터 값 저장법
안녕하세요.현재 찜하기 기능을 추가하는 작업을 진행중입니다.전체적으로 설명드리면 찜하기 Hook을 만들고 ProductDetail 컴포넌트에 Hook의 리턴 값을 보내어 작업하였습니다. 찜하기 API의 결과 값으로 off시 0, on 시 1을 출력하여 그 값을 state에 저장하여 상품디테일 컴포넌트로 리턴하여 작업하는 중입니다. 그런데 state의 초기값을 토글의 결과값을 가져와서 넣어주어야 하는데 어떻게 해야할지 잘 모르겠습니다. 제가 생각해본 방법으론 상품 컴포넌트에서 state를 새로 만들어 가져온 pick의 변수를 set에 담았더니 랜더링이 많아진다면서 오류가 떴습니다.혹시 제가 작업하는 방향이 틀린 것인지 궁금하고, 어떻게 문제를 해결해야할지 잘 몰라 질문 드립니다!
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
portfolio review 코드 말고 수업 예제 코드는 없을까요?
컴퓨터를 교체해서 앞에 수업했던 파일들이 다 날아갔는데 강의 뒷부분에서 재활용 되는 경우가 있더라구요.. 깃허브에는 포폴용 과제만 샘플 코드가 제공되는 것 같아서 혹시 수업 파일도 올려주실 수 있으실까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
피그마 코드가 안보여서 실습하기가 너무힘들어요
개발자도구도 안켜지고 입문자용 강의인데 눈대중으로 만들어보라는것도 좀.. 노션에라도 따로 어떤식으로 진행해야한다고 적어주셨으면 하네요 그래도 돈을 몇십만원 주고 진행하는 강의인데..
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
피그마에서 코드가 안보임
해당 강의 내용에서 피그마 사이트에 입장하면, 코드가 보이지 않습니다. 혼자 스스로 코드를 짜보려고 하는데, 아직은 도움이 필요하여 찾아보니 유료 버전을 구입해야 보인다고 하는데..이럼 학습 진도는 어떻게 나가나요...? 속상합니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
새로운 강의버전은 언제 나오나요 ?
새소식에 올라온 솔로트립을 기반으로 한 새로운 강의는 언제쯤 올라오나요?
-
미해결[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
Slider은(는) JSX 구성요소로 사용할 수 없습니다. 오류가 발생해요ㅠㅠ
이 문제가 해결이 안돼서 진도를 못나가고 있습니다ㅜㅜ구글링하니 버전이 달라서 그렇다고 해서 package.json파일도 삭제하고 다시 설치하고 이것저것 다 해봤는데도 도저히 해결이 안되네요.. 살려주세요ㅠㅠㅠ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
이미지 업로드 질문
ex) pages/section19/19-04-image-with-board/index.tsx// ... export default function ImageUploadPage(): JSX.Element { // ... const onChangeFile = async ( e: ChangeEvent<HTMLInputElement>, ): Promise<void> => { const file = e.target.files?.[0]; console.log(file); const isValid = checkValidationFile(file); if (!isValid) return; const result = await uploadFile({ variables: { file, }, }); console.log(result.data?.uploadFile.url); setImgUrl(result.data?.uploadFile.url ?? ""); }; // ... }이렇게 이미지를 선택하기만 해도 uploadFile 함수로 인해 storage에 이미지파일이 저장되어 주소를 받아오 것으로 이해하고 있는데 이 상태에서 새로고침을 하거나 사이트 꺼버리면 storage에 이미지파일은 그대로 저장된 채로 유기되어 용량이 낭비되는 것이 아닌가 하는 의문이 들었습니다. 그렇지 않다면 상관없지만 이렇게 선택만하고 중단할 경우 이미 storage에 저장된 이미지가 자동으로 삭제되지는 않을 것 같고 useEffect의 return 안에 입력정보가 DB에 저장되지 않은 채로 사이트가 꺼지거나 새로고침되면 storage에 선택만 했던 이미지를 지우도록 조건문으로 코드를 작성해주면 storage의 용량이 낭비되는 문제를 해결할 수 있지 않을까요?? 혹은 더 옳바른 방법이 있는지, 제가 잘못 이해하고 있는지, 그리고 제가 말한 방법대로 또는 강사님이 생각하시는 더 옳바른 방법으로 코드를 작성하게 됐을 때의 예시 코드를 보여주시면 감사드리겠습니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
animation sample 질문드립니다!
샘플자료에서 보면fontawesome에서 가져온 아이콘들을.heart svg { width: 42px; height: 42px; color: rgb(224, 0, 52);}이런식으로 크기 색상을 변경해줬는데제가 svg를 적용하려니 안됩니다.<div class="heart"> <i class="fa-solid fa-heart"></i></div> 뒤에 fa-nx를 붙여 크기지정하는 방법말고 px로 크기를 조절하려면 어떻게 해야하나요??
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
import할 때 export default로 되있는 페이지들은 중괄호 없이 import하여야 에러가 안납니다.
이걸 몰라서 오류 메시지를 계속 보고 있었네요. 같이 학습하시는분들 참고하셔용.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
피그마 데브모드
피그마 로그인하고, 데브모드로 변경되지 않아 CSS 속성을 확인할 수 없어요