묻고 답해요
131만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
전역상태관리에 추가적으로 특정페이지별로 상태관리가 필요할때에 대해 질문드립니다
안녕하세요 선생님,전역상태관리에 추가적으로 특정페이지별로 상태관리가 필요할때에 대해 질문드립니다, 아토믹패턴을 구현할려다보니 props drilling이 너무 많이 일어나서 recoil로 상태관리를 시도했는데 전역에 필요한 상태들말고 특정페이지에서만 쓰이는 상태들까지 포함이 되니 파일이 너무 지저분해져서요, 특정페이지 상태관리는 context api, 전역은 recoil, 이런 조합으로 써도 될까요?아니면 다른 더 좋은 방법이 있을까요? 감사합니다
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
싸이월드 만들기 똑같이 했는데 예제랑 다릅니다 ㅠㅠ
코드는 이렇게 작성했는데아래 있는 wrapper__left__body 가 너무 작게 나오는데 이유가 뭘까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
33-01-jest 실습 도중 에러가 발생합니다.
콘솔 메시지jest.config.jspackage.json라이브러리들을 전부 설치하고 버전도 맞춰 보았는데 "Cannot use import statement outside a module"이 에러가 뜨면서 테스트가 진행이 되지 않습니다.무슨 문제인지 모르겠습니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
코드지갑 저장할 떄 오류가 나요
오류가 생기는 이유는 무엇인가요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
CSS 첫번째 과제 관련 질문입니다!
htmlcss안녕하세요! 얼마 전부터 강의 결제해서 보고 있는 코린이입니다.언제나 도움 많이 받고 있습니다. css 첫번째 과제로 웹페이지 구현하던 중 질문이 생겼는데요,전화번호 사이에 들어가는 '-' 부호는 어떻게 코드를 작성하면 될지 알 수 있을까요?픽셀 크기가 지정되어있어 뭔가 코드를 쓰는 것 같기는 한데 감이 안 오더라구요ㅠㅠ그리고 지금까지 구현한 내용도 이 김에 검토 받고 싶습니다! 확인해주시면 감사하겠습니다 :)
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
types.ts 파일 생성이 안됩니다.
설치 항목을 전부 설치하고 다시 설치하고 주소도 바꿔서 해봤는데 types.ts 파일이 생성되지 않는 이유를 알려주세요 ㅠㅠ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
typscript 설치과정중 질문드립니다.
안녕하세요 typescript 설치과정에서 말씀주신대로 다 따라했는데 안되네요 ㅜㅜ제가 따라한 부분은 일단 node_modules 지우고, yarn.lock 파일 지우고 말씀주신대로 17.0.2 버전으로 변경다했습니다.그리고 난후에 tsconfig.json 빈파일로 만들고 yarn install 후yarn dev 하면 다음과 같이 yarn add --dev @types/react 명령어 입력하라고 나오는데 어떻게 해야할지 모르겠네요.. ㅜㅜpackage.json.lcok 파일도 지워봤는데 똑같습니다tsconfig.json파일을 지우면 괜찮은데 tsconfig.json만 빈파일로 만들면 에러가 나오네요
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
별점 수정 초기화를 막고 싶습니다.
수정 버튼을 클릭하면 기존 값의 작성자와 내용이 작성되어 있는데 별점도 똑같이 유지 시키고 싶어서 다음과 같이 작성 했습니다.<S.Star onChange={props.setStar} value={props.star !== 0 ? props.star : props.el?.rating ?? 0} />별점을 선택하고 댓글 등록하기 클릭하면 함수를 통해 setStar(0) 초기화도 해주었고수정 아이콘을 클릭했을 때 기존 등록한 별점도 유지되게 했는데 수정하기 버튼을 클릭하면 별점이 0으로 수정이 됩니다.여기서 어느 부분을 건들어야 할지 모르겠어요.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
삭제하기 기능 구현 레퍼런스 코드는 없을까요
게시글 상세 화면에서 삭제하기 기능을 구현해주세요.이부분에 대한 레퍼런스 코드가 깃허브에 등록된 내용에는 나오지 않는데 알고 싶습니다
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
css in js 관련 질문드립니다!
안녕하세요! 현재 리액트 초반부 강의 수강중에 있습니다.포트폴리오 코딩중에 있는데 css in js 에서 일반적인 css에서 처럼 전체선택자 *를 사용하여box-sizing: border-box; 로 하고싶은데 검색하봐도 방법이 나오지 않습니다.. css in js 에서 전체선택자는 어떤식으로 사용할 수 있을까요?MDN 처럼 css in js 관련 아카이브가 따로 있을까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
section27 퀴즈 질문입니다.
등록 시 화면 페이지는 바뀌는데 바뀌자마자 위와 같은 오류가 떠서 계속 찾아보는데 혼자는 해결하기 어려워 여쭤봅니다 ㅠㅠ 어디가 틀린 걸까요? mutation은 제대로 된 걸 확인했는데 fetch가 안 되네요.폴더 구조는05/boards/new index.js05/boards/products/[productId] index.jsimport { useState } from "react"; import { useMutation, gql } from "@apollo/client"; import { useRouter } from "next/router"; const CREATE_PRODUCT = gql` mutation createProduct( $seller: String $createProductInput: CreateProductInput! ) { createProduct(seller: $seller, createProductInput: $createProductInput) { _id number message } } `; export default function ProductRegPage() { const router = useRouter(); const [seller, setSeller] = useState(); const [name, setName] = useState(); const [detail, setDetail] = useState(); const [price, setPrice] = useState(); const [createProduct] = useMutation(CREATE_PRODUCT); const onClickRegister = async () => { try { const result = await createProduct({ variables: { seller, createProductInput: { name, detail, price, }, }, }); console.log(result); router.push(`/05/boards/products/${result.data.createProduct._id}`); } catch (error) { alert(error.message); } }; const onChangeSeller = (event) => { setSeller(event.target.value); }; const onChangeName = (event) => { setName(event.target.value); }; const onChangeDetail = (event) => { setDetail(event.target.value); }; const onChangePrice = (event) => { setPrice(parseInt(event.target.value)); }; return ( <div> 판매자: <input type="text" onChange={onChangeSeller} /> 상품명: <input type="text" onChange={onChangeName} /> 상품내용: <input type="text" onChange={onChangeDetail} /> 상품가격: <input type="text" onChange={onChangePrice} /> <button onClick={onClickRegister}>상품 등록</button> </div> ); } import { useQuery, gql } from "@apollo/client"; import { useRouter } from "next/router"; const FETCH_PRODUCT = gql` query fetchProduct($productId: ID) { fetchProduct(productId: $productId) { seller name detail price } } `; export default function ProductDetailPage() { const router = useRouter(); console.log(router); const { data } = useQuery(FETCH_PRODUCT, { variables: { productId: router.query.productId }, }); console.log(data); return ( <div> <div>판매자:{data ? fetchProduct?.seller : "loading..."}</div> <div>상품명:{data ? fetchProduct?.name : "loading..."}</div> <div>상품내용:{data ? fetchProduct?.detail : "loading..."}</div> <div>상품가격:{data ? fetchProduct?.price : "loading..."}</div> </div> ); }
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
.eslintrc.js module 키워드에 빨간밑줄
위와 같은 에러가 생기는데 규칙을 검사하는 건 문제가 없긴합니다. 에러 내용을 번역해서 봤는데도 무슨 말인지 잘 모르겠고 어떻게 해결해야하는지 감도 안옵니다..
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
27:25초에 나의그래프큐엘셋팅 파일로 이동하는방법
27:25초에 나의그래프큐엘셋팅 파일로 바로 이동해지는데 어떻게 하는걸까요
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
포트폴리오 31-1 과제 중 오류, password is not defined
포트폴리오 과제 중, 게시물을 등록하고 수정할 때 비밀번호를 똑같이 입력했는데 저런 오류가 뜹니다 ....ㅠ 해결방법을 잘 모르겠습니다!
-
미해결[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
newAccessToken 이 바로 적용되지 않습니다
const errorLink = onError(({ graphQLErrors, operation, forward }) => { //1. 에러 캐치 if (typeof graphQLErrors !== "undefined") { for (const err of graphQLErrors) { //1-2. 해당 에러가 토큰만료 에러인지 체크 if (err.extensions.code === "UNAUTHENTICATED") { return fromPromise( //2. refreshtoken으로 accessToken을 재발급 받기 getAccessToken().then((newAccessToken) => { setAccessToken(newAccessToken ?? ""); //3. 재발급 받은 accesstoken 으로 방금 실패한 쿼리 실행하기 operation.setContext({ header: { ...operation.getContext().headers, //기존의 authorization: Bearer '만료된 토큰' Authorization: `Bearer ${newAccessToken}`, //3-2 authorization 만 바꿔치기 }, }); }) ).flatMap(() => forward(operation)); //3-3 방금 수정한 쿼리 재요청하기 } } } });수업이랑 동일하게 코드를 작성하였으나 버튼을 눌러도 재발급된 accessToken 이 들어가지 않아 error 가 발생하고 2번이상 눌러야지만 accesstoken 이 제대로 수정되서 정상적으로 실행됩니다. 어디가 문제일까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
리액트 깃허프
리액트 작업을 컴퓨터 이동하면서 하고싶은데 usb론 너무오래걸려서 깃헙으로 하고싶은데 깃헙에 빌드해서 올리면 다시 받을때 어떻게 받아서 작업해야할까요
-
미해결[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
스터디 관련 질문
안녕하세요! 해당 강의를 통해 프론트엔드 기술을 학습 중인 취준생입니다. 본 학습 자료의 저작권은 코드캠프에 있어 무단 도용, 배포, 복제를 금지한다고 적혀있는데 그럼 혹시 개인 블로그에 내용을 공부한 내용을 정리하는 것이 문제가 되는 사항인지 여쭤봅니다!
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
Server Cannot be Reached
vscode에서 계속 오류 떠서 playground에서 보내보았는데 server cannot be reached가 계속 뜨면서docs도 무한 로딩중이에요 ㅠ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
data에 utility type으로 명시할 때 문제
섹션 8 강의 1:02:21 부분에서 문제가 발생했습니다 ㅠ utility type을 배우기 전 이렇게 해놨을 때는 문제가 없었습니다. 근데 강의처럼 바꾸어주니까 문제가 발생했고 IBoardWriteUIProps의 data 뒤에 물음표 때문인가해서 물음표를 주니까 container는 괜찮아 졌는데 presenter에서는 아직 defaultValue에 문제가 있다고 표시가됩니다.. data?.fetchBoard.writer -> data?.fetchBoard?.writer 이런식으로 바꿔줘도 defaultValue에 문제 발생... 분명 이렇게 타입명시를 잘 해줬는데 왜 강의처럼 안되는 건지 모르겠습니다..
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
"한줄씩 디버깅하는 법" 질문있습니다.
안녕하세요. 기존에는(강의 듣기전) visual studio 2019 버전 C++로 코드를 작성하고 F10, F5 등으로 한줄씩 디버깅을 진행했던 경험이 있습니다.그런데 프론트엔드쪽에 관심을 가지면서 해당 강의를 수강하고 있는데, visual studio code를 통해 html, css와 javascript 역시 F10과 F5를 활용하면 한줄씩 디버깅하면서 해당 변수에 어떠한 값이 할당되는지 알 수 있을까요?예를 들면 싸이월드 만들기 4탄에서 javascript를 통해 끝말잇기 게임을 만들었는데 해당 javascript의 동작 과정을 한줄씩 디버깅 해보고 싶습니다.