묻고 답해요
130만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
타입스크립트 작동 안됨
안녕하세요! 강의 잘 듣고 있습니다. 10-TS 기초 강의를 듣고 TS 설치를 완료했는데, 저는 componemt의 타입을 지정하라는 등의 오류가 실행되지 않습니다. 콘솔 창에서는 별다른 에러 없이 잘 설치되었는데도요. yarn dev를 막 끝내고 _app.js를 tsx로 변경하니터미널 콘솔에는 이렇게 뜹니다. PS C:\Users\Yun\Desktop\frontEnd\class> yarn devyarn run v1.22.21$ next devready - started server on 0.0.0.0:3000, url: http://localhost:3000We detected TypeScript in your project and created a tsconfig.json file for you.event - compiled client and server successfully in 4.7s (388 modules)wait - compiling...event - compiled client and server successfully in 321 ms (388 modules)wait - compiling...error - ./pages/_app.tsxError: error: Unexpected token ,. Expected yield, an identifier, [ or { |3 | export default function App({ Component : , pageProps }) {| ^Caused by:0: failed to process js file1: Syntax Errorwait - compiling...event - compiled client and server successfully in 5.7s (388 modules)wait - compiling...error - ./pages/_app.tsxError: error: Expected ',', got '}' |3 | export default function App({ Component}, pageProps }) {| ^ 뭐가 문제일까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
강의 업데이트 질문이요~
올해는 강의 업데이트 계획이 없나요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
React 설치, 다운 오류 질문 드립니다 !!
리액트 설치 후 강의 수강 중인데 저렇게 자꾸 "antd"를 찾을 수 없다고 오류가 생겨서, 문제점과 해결법을 알고 싶습니다ㅜ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
boards 수정 1편에서 useState() 초기값
이렇게 초기값을 설정 해주지 않았을 때, 하나의 항목만 수정하고 수정하기 버튼을 누르면 다른 항목들은 그 전 내용 그대로 띄워졌는데 그 이유가 궁금해요 !굳이 boards 수정 2편에서 한 방법이 아니더라도 이렇게 하면 문제가 되는 걸까요 ? 초기값을 설정 안해주면 안되는 이유가 있나요 ㅜㅜ강사님께서 그냥 여기 초기값을 "" 빈문자열로 바꾸고 다시 실행하시기만 하셔서 왜 이 방법을 쓰면 안되는지, boards 수정 2편의 방법과는 무슨 차이가 있는지 잘 모르겠습니다 ..!
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
"@ant-design/icons": "^5.0.1" 다운그레이드 하고서 error
package.json "dependencies": { "@ant-design/icons": "^5.0.1",위와 같이 수정 후 yarn.lock, node_modules 삭제 - yarn install 하여 재 설치 하여도 아래와 같이 err 문구는 사라지지 않았으며 yarn dev를 통해 웹페이지 확인 하면 정상적으로 icon은 출력됩니다.icon = 정상 출력 되나 코드상 error 문구는 삭제되지 않습니다.VS code 를 재시작 하여도code_modules 등 삭제 후 재설치 3~4번 하여도 동일합니다. yarn.lock 첨부합니다."@ant-design/icons-svg@^4.3.0": version "4.3.2" resolved "https://registry.yarnpkg.com/@ant-design/icons-svg/-/icons-svg-4.3.2.tgz#ab2e082991877fdc85b2b32f0b68628b716bad23" integrity sha512-s9WV19cXTC/Tux/XpDru/rCfPZQhGaho36B+9RrN1v5YsaKmE6dJ+fq6LQnXVBVYjzkqykEEK+1XG+SYiottTQ== "@ant-design/icons@^4.8.1": version "4.8.1" resolved "https://registry.yarnpkg.com/@ant-design/icons/-/icons-4.8.1.tgz#44f6c81f609811d68d48a123eb5dcc477f8fbcb7" integrity sha512-JRAuiqllnMsiZIO8OvBOeFconprC3cnMpJ9MvXrHh+H5co9rlg8/aSHQfLf5jKKe18lUgRaIwC2pz8YxH9VuCA== dependencies: "@ant-design/colors" "^6.0.0" "@ant-design/icons-svg" "^4.3.0" "@babel/runtime" "^7.11.2" classnames "^2.2.6" lodash "^4.17.15" rc-util "^5.9.4" "@ant-design/icons@^5.0.1": version "5.2.6" resolved "https://registry.yarnpkg.com/@ant-design/icons/-/icons-5.2.6.tgz#2d4a9a37f531eb2a20cebec01d6fb69cf593900d" integrity sha512-4wn0WShF43TrggskBJPRqCD0fcHbzTYjnaoskdiJrVHg86yxoZ8ZUqsXvyn4WUqehRiFKnaclOhqk9w4Ui2KVw== dependencies: "@ant-design/colors" "^7.0.0" "@ant-design/icons-svg" "^4.3.0" "@babel/runtime" "^7.11.2" classnames "^2.2.6" rc-util "^5.31.1"
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
SyntaxError: Cannot use import statement outside a module 오류
SyntaxError: Cannot use import statement outside a module 오류가 발생하는데 boards에서 수정하기, 상세페이지를 들어갈 때는 문제가 없다가 수정하기, 상세페이지 안에서 f5를 누르면 위와 같은 오류가 발생했습니다. 어떤게 문제인지 알려주시면 감사하겠습니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
SyntaxError: Cannot use import statement outside a module
AntDesign만 사용하면 SyntaxError: Cannot use import statement outside a module 에러가 나옵니다.구글링 해서 package.json에 "type":"module"을 작성하면 된다고 하는데 작성하면 ReferenceError: module is not defined in ES module scope 에러가 나옵니다어떻게 해결하면 좋을까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
에러 질문있습니다
이 부분 에러 어떻게 고치나요?export const firebaseApp = initializeApp(firebaseConfig, "appname") 하니까 위에 오류는 안뜨는데 이 방법이 맞나요?저 방법으로 수정하면이 오류가 뜹니다 ㅠ
-
미해결[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
같은 API 두 번 요청을 합니다.
크롬 개발자 도구에서 페이로드 확인을 하면 fetchBoards가 두번 요청을 합니다.시작점을 확인을 해보면 createUploadLink.js에서 빈 값으로 요청을 하고두 번째 요청에서는 제대로 index.tsx에서 값을 넣고 refetch를 진행을 합니다.fetchBoards가 1,3번 이고 fetchBoardsCount가 2번 입니다. 사용하는데 있어 아무런 문제 없이 사용이 가능한데 왜 이런 현상이 있는지 해결을 하고 싶습니다. 첫 마운트가 되거나 API요청을 하면 불필요한 fetchBoards, fetchBoardsCount가 createUploadLink.js에서 요청이 가는데ApolloClient Setting 부분에서 요청이 가는 걸 확인 했습니다.const uploadLink = createUploadLink({ uri: "http://backend-practice.codebootcamp.co.kr/graphql", }); const client = new ApolloClient({ link: ApolloLink.from([uploadLink]), cache: new InMemoryCache(), }); refetch하는 전체 코드입니다.// test - refetch 문제 export default function Hom(): JSX.Element { const { data, refetch } = useQueryFetchBoards(); const { data: dataBoardsCount, refetch: refetchBoardsCount } = useQueryFetchBoardsCount(); const router = useRouter(); const render = useRef(false); useEffect(() => { // 첫 마운트 실행 막음 if (!render.current) { render.current = true; console.log("처음 실행됨"); return; } const search = String(router.query.search); const page = Number(router.query.page) || 1; if (search === "undefined") { void refetch({ page }); console.log("검색X"); } else { void refetch({ page, search }); void refetchBoardsCount({ search }); console.log("검색O"); } console.log("Hom Search: ", search); }, [router.query]); return ( <> <SearchBar /> {data?.fetchBoards.map((el, index) => ( <div key={index}>{el.title}</div> ))} <Pagination count={dataBoardsCount?.fetchBoardsCount} /> </> ); }여기서 <SearchBar /> , <Pagination />는 router.push에서 query로 ?search= , ?page= 쿼리스트링 만드는 역할만 하고 있고 전체 부모 컴포넌트에서 useEffetch로 refetch하고 있습니다."next": "13", "react": "^18.2.0","apollo-upload-client": "^17.0.0", 입니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
보일러 플레이트 확인
안녕하세요! 제가 설치도구들을 다운 받고 강의를 이어 듣는데, 제 플레이터와 선생님이 보여주신 초기 화면이 달라서 어느 부분이 잘못되었는지 확인 받고 싶습니다!
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
수업 영상 수강 순서
안녕하세요 수업 시작하기 전에 궁금한 점이 있어서요.앞쪽은 html, css , js 수업영상들이 있고 뒤쪽부터 리액트 시작이던데, 혹시 리액트 수업 영상 부터 시작을 하면 세팅이라던가 수업하면서 앞쪽을 수강하지 않아서 생기는 차이가 있을까요? 그리고 에디터는 vscode 말고 다른거를 써도 문제가 없을까요?또, 저는 웹스톰을 쓰고 있는데 웹스톰에서는 plugins를 따로 설치 않해도 될까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
createUploadLink가 확인이 안됩니다.
모듈을 찾을 수 없다고 나옵니다.node_modules안에 파일이 있는거 확인했고 pakage.json안에 설치 잘 되어있는 것도 확인했습니다.어떤게 문제인지 알려주시면 감사하겠습니다!
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
Apollo Error
graphql-mutation-args 강의를 보면서 따라하던 도중 아래와 같은 에러가 발생해서 문의 드립니다. 하드코딩으로 graphql 코드를 생성해서 요청을 해도 위와 같은 에러가 발생합니다. 아래는 index.js 에 작성한 코드와 개발자도구의 네트워크 탭 캡처 사진 입니다. 찾아보니 아폴로서버와 graphql 버전이 맞지 않아서 그런 것 같다는 의견이 있던데, 어떻게 해결해야 할지 잘 모르겠습니다.
-
해결됨풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
장바구니 담기 버튼 누르면 404에러가 뜹니다
강의 여러번 돌려보고 커뮤니티 질문에도 찾아보고 구글링도 해봤는데 어디서 뭐가 잘못된 건지도 모르겠어서 질문 올립니다! 대체 어디서 잘못 된 걸까요,,,queryClient.tsimport request, { RequestDocument } from "graphql-request"; import { useQuery, useMutation, useQueryClient, QueryClient, QueryClientProvider, } from "react-query"; // any 타입 미리 만들어줌 type AnyOBJ = { [key: string]: any }; // Create a client export const getClient = (() => { let client: QueryClient | null = null; return () => { if (!client) client = new QueryClient({ defaultOptions: { queries: { // 캐시타임 : 이 시간 안에는 다시 상세페이지 들어가도 요청 안 함 cacheTime: 1000 * 60 * 60 * 24, staleTime: 1000 * 60, refetchOnMount: false, refetchOnReconnect: false, refetchOnWindowFocus: false, }, }, }); return client; }; })(); // 기본 url const BASE_URL = "/"; // restFetcher async로 요청 export const restFetcher = async ({ method, path, body, params, }: { // 메소드 타입 정의 method: "GET" | "POST" | "PUT" | "DELETE" | "PATCH"; // url대신 path를 받음 path: string; // post나 put의 경우엔 body가 필요하므로 body?: AnyOBJ; // 파라미터 params?: AnyOBJ; }) => { try { // 기본 url + path let url = `${BASE_URL}${path}`; // RequestInit은 node에 기본적으로 정의되어 있음 const fetchOptions: RequestInit = { method, headers: { "Content-Type": "application/json", "Access-Control-Allow-Origin": BASE_URL, }, }; // param이 오면 if (params) { const searchParams = new URLSearchParams(params); url += "?" + searchParams.toString(); } // body가 오면 if (body) fetchOptions.body = JSON.stringify(body); // url와 옵션들 요청 // 메서드와 path를 받아서 완성 const res = await fetch(url, fetchOptions); // 받은 것을 json으로 바꾸기 const json = await res.json(); return json; // 에러 출력 } catch (err) { console.error(err); } }; // graphqlFetcher export const graphqlFetcher = <T>(query: RequestDocument, variables = {}) => request<T>(BASE_URL, query, variables); // 쿼리 키 만들기 export const QueryKeys = { PRODUCTS: "PRODUCTS", CART: "CART", }; product/item.tsx 컴포넌트import { Link } from "react-router-dom"; import { Product } from "../../../graphql/products"; import { useMutation } from "react-query"; import { graphqlFetcher } from "../../../queryClient"; import { ADD_CART, Cart } from "../../../graphql/cart"; const ProductItem = ({ imageUrl, price, title, id }: Product) => { const { mutate: addCart } = useMutation(({ id }: { id: string }) => graphqlFetcher(ADD_CART, { id }) ); return ( <li className="products-item"> <Link to={`/products/${id}`}> <p className="products-item__title">{title}</p> <img className="products-item__image" src={imageUrl} /> <span className="products-item__price">${price}</span> </Link> <button className="product-item__add-cart" onClick={() => { addCart({ id }); }} > 장바구니 담기 </button> </li> ); }; export default ProductItem; 콘솔에 뜨는 오류나는 파일 올려드립니다..
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
날짜 함수 타입 질문
안녕하세요. 선생님.코드젠이 업데이트 되면서 보드의 날짜 타입이 에러가 아래의 사진처럼 오류가 나는 것 같습니다그래서 선생님께서 올려주시는 포폴 예시 파일에 있는 버전의 타입으로 해도 동일하게 eslint에서 에러가 잡히는 것 같아요.createAt 값이 들어가는 곳마다 저렇게 에러가 잡히는데 어떻게 해결해야할까요??
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
addEventListner 강의 const 변수 설정 질문 !!
위 코드 첫 줄에서 todoInput 값을 const로서 정의해줬는데, 함수 내에서 마지막에 이것을 다시 ' '로 초기화해주는 단계가 있습니다. 근데 const는 정의된 후 값이 변하지 않는 상수와 같은 걸로 알고 있는데 이런 식으로 값이 변해도(?) 되나요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
aws 로 실행했을때 자유게시판에 안뜹니다
build해서 yarn start 했을때 제컴퓨터론 잘되는데 AWS해서 페이지를 열경우 게시판 리스트가 안뜹니다 불러오기가 안되는거같은데 이유가 이유가 뭘까요
-
미해결[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
무한스크롤 구현 오류
안녕하세요. 선생님 무한스크롤이 계속 만들어져서 질문드려요위 사진에는 댓글이 2개 달린 상태입니다. 그런데스크롤을 내리면서 2개였던게 계속 복사되어 만들어지는 상태입니다. 이런식으로 초기 댓글 갯수가 반복해서 늘어나는 것 같아요. 코드를 보고도 오류를 찾기 힘들어 질문 드려요!참고로, 이전에 비슷한 질문에 확인 해야 할 사항이 있어서 체크해보았습니다. nextconfig.json에서 reactStrictmode를 false로 바꿔보시고 서버를 껐다 다시 켜주세요!>> 바꾸고 해도 되지 않는 것 같습니다. 무한스크롤을 제거한 후 댓글을 작성해 보고 정상적으로 작성이 되는지 알려주세요.>> 무한스크롤 컴포넌트 삭제 시 다른 부분들은 원활하게 작동합니다.또 다른 자료가 필요하시면 말씀해주세요! 긴 질문 읽어주셔서 감사합니다!!
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
수업에서 알려주신 url로 접근했는데 ..페이지가 안나와요 ㅠㅠ
http://storage.goolgeapis.com/codecamp-file-storage/2024/1/10/IMG_9473.jpeg위에 주소 맞지 않나요? ㅠㅠ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
[section04] cd class 이후 react 버전 변경시 오류
cd class 이후 react 버전 변경 시 아래와 같은 오류가 진행됩니다. 어떻게 해결해야할까요..ㅠㅠUsage Error: The nearest package directory (C:\Users\user\Desktop\CodeCamp_Frontend_j\class) doesn't seem to be part of the project declared in C:\Users\user.- If C:\Users\user isn't intended to be a project, remove any yarn.lock and/or package.json file there.- If C:\Users\user is intended to be a project, it might be that you forgot to list Desktop/CodeCamp_Frontend_j/class in its workspace configuration.- Finally, if C:\Users\user is fine and you intend Desktop/CodeCamp_Frontend_j/class to be treated as a completely separate project (not e