묻고 답해요
138만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
도메인
도메인 주소를 만드려고 하는데요선생님께서는 어떤 웹호스팅 업체를 사용하셨는지 여쭤봐도 될까요????
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
폰트어썸 아이콘이 안나와요
아예 적용이 안된거 같은데 킷코드도 헤드부분에 넣었고말씀하신데로 아이콘도 바디 부분에 넣었는데 아예 안나오는데 이걸 어떻게 해야 할지 ㅠㅠ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
포트폴리오 SECTION8 댓글 수정 기능 누락
여기서 reference Code를 다운 받아 제가 작성한 코드와 비교해보려고 하는데,댓글 수정 기능은 구현이 되어 있지 않다는 것을 알게 되었습니다.일부러 댓글 수정 기능은 빼놓은 건가요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
테스트 안됨
안녕하세요!테스트 강좌 들으면서 다 똑같이 한것같은데 이런 오류가 뜨네요.__test__ 파일 따로 뺏고 config파일 생성했고package.json 파일 수정했는데왜 오류가 나는지 모르겠습니다.ㅜ
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
Google api 매장 데이터
안녕하세요 현재 네이버맵 대신 구글맵 api를 사용중인데 아무리 찾아봐도 선생님 stores.json 값처럼 json데이터를 찾을수가없네요 ㅠㅠ 일단 현재 그냥 stores.json 선생님이 가지고있는데이터 사용중이긴한데 다른질문 답변보니 크롤링하셔서 데이터를 만드신거같은데 혹시 저의경우에는 방법이있을까요??
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
백엔드를 만드려면 backend course부분 수강해야 하나요?
백엔드를 만드는 부분은 backend course를 들어야 가능한가요? 중고마켓 부분 포트폴리오를 만드려고 하는데 playground 부분을 직접 설계하고 싶다는 생각이 들었습니다. 프론트 강의에 그 부분이 포함되어 있나요? 저는 간단한 중고마켓을 만들고 싶은데 백엔드 분량이 너무 많아서 프론트 강의에 백엔드 부분 있길래 백엔드 강의(백엔드 부트캠프)는 나중에 들을려고 결제를 미뤘습니다. 일단 포트폴리오 만드는데에는 프론트 강의만으로 충분한가요? 저만의 웹페이지를 만들려면 강의 api보다는 직접 api를 만들어서 하는게 좋다고 생각해서 강의를 구매했습니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
이미지업로드 graphql
안녕하세요! 이미지 업로드부분 강의 듣고있는데class 폴더에서 진행하고있고 진행하는 서버에는 파일업로드 mutation이 없어요포폴 서버에는 있는데 강의는 그냥 눈으로 보기만하고 포폴만들때 실습을 해야되는건가요?검색기능 강의도 마찬가지인것 같아요,,, 그뒤 강의는 아직 안들어서 모르겠어요,,,const UPLOAD_FILE = gql` mutation uploadFile($file: Upload!) { uploadFile(file: $file) { url } } `; 이부분입니다,,,ㅠ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
prefetch 디바운싱
강의 끝부분에 퀴즈로 디바운싱 퀴즈가 나와서 코드를 짰긴했는데,, 레퍼런스가 없어서 제가 짠 코드가 맞는지 알고싶습니다..!아래는 강의 후 추가한 코드입니다. const getDebounce = _.debounce(async (boardId) => { await client.query({ query: FETCH_BOARD, variables: { boardId }, }); }, 500); const prefetchBoard = (boardId: string) => async () => { // await getDebounce(boardId); };개발자 도구에서 네트워크 확인결과 0.5초 뒤에 패치를 하는걸로 확인이 되긴 합니다만..제가 올바르게 짠건가요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
[section09] Quiz Ant-design DatePicker library
안녕하세요 section09 퀴즈에서 Ant-design Date picker 를 사용하는 과정에서 질문이 생겨 여쭤봅니다. import { DatePicker} from 'antd'; import type { DatePickerProps } from 'antd'; import { useState } from 'react'; export default function AndDesignPage() { const [date, setDate] = useState(''); const [month, setMonth] = useState(''); const onChange: DatePickerProps['onChange'] = (date, dateString) => { console.log(date); setDate(dateString); setMonth(date?.$M + 1);👈👈👈 1️⃣ }; return ( <> <h1>Q2. DatePicker</h1> <span> <DatePicker onChange={onChange} />👈👈👈 2️⃣ </span> {month && ( <> <p>선택날짜 : {date}</p> <p>{month}월을 선택하셨습니다.</p> </> )} </> ); } 전체 코드는 위와 같고 1️⃣,2️⃣번에 빨간 줄이 쳐졌습니다. 1️⃣번은 아래와 같은 메세지가 뜹니다.console.log(date)를 했을 때 아래와 같이 콘솔이 나와서 $M을 활용했는데 작동도 잘 되고 콘솔메세지에도 따로 에러가 뜨지는 않습니다. 2️⃣번은 아래와 같은 문제입니다에러메세지 전문은 다음과 같습니다.(alias) const DatePicker: PickerComponentClass<PickerProps<Dayjs> & { status?: "" | "warning" | "error" | undefined; hashId?: string | undefined; popupClassName?: string | undefined; rootClassName?: string | undefined; }, unknown> & { WeekPicker: import("./generatePicker/interface").PickerComponentClass<Omit<PickerProps<Dayjs> & { status?: "" | "warning" | "error" | undefined; hashId?: string | undefined; popupClassName?: string | undefined; rootClassName?: string | undefined; }, "picker">, unknown>; MonthPicker: import("./generatePicker/interface").PickerComponentClass<Omit<PickerProps<Dayjs> & { status?: "" | "warning" | "error" | undefined; hashId?: string | undefined; popupClassName?: string | undefined; rootClassName?: string | undefined; }, "picker">, unknown>; YearPicker: import("./generatePicker/interface").PickerComponentClass<Omit<PickerProps<Dayjs> & { status?: "" | "warning" | "error" | undefined; hashId?: string | undefined; popupClassName?: string | undefined; rootClassName?: string | undefined; }, "picker">, unknown>; RangePicker: import("./generatePicker/interface").PickerComponentClass<BaseRangePickerProps<Dayjs> & { dropdownClassName?: string | undefined; popupClassName?: string | undefined; }, unknown>; TimePicker: import("./generatePicker/interface").PickerComponentClass<Omit<Omit<import("rc-picker/lib/Picker").PickerTimeProps<Dayjs>, "locale" | "generateConfig" | "hideHeader" | "components" | "hourStep"> & { locale ... import DatePicker 'DatePicker' cannot be used as a JSX component. Its instance type 'Component<PickerProps<Dayjs> & { status?: "" | "warning" | "error" | undefined; hashId?: string | undefined; popupClassName?: string | undefined; rootClassName?: string | undefined; }, unknown, any> & CommonPickerMethods' is not a valid JSX element. The types returned by 'render()' are incompatible between these types. Type 'React.ReactNode' is not assignable to type 'import("/Users/bible/Bible_Highting/codecamp-frontend-bible/class_quiz/node_modules/@types/react-transition-group/node_modules/@types/react/index").ReactNode'. Type '{}' is not assignable to type 'ReactNode'.ts(2786) 1️⃣,2️⃣번 모두 작동에는 이상이 없으나 빨간줄의 원인과 해결방법을 알고싶어 질문드립니다. 감사합니다!
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
따로 분리한 getAccessToken() 함수 result의 타입
강의를 보고 똑같이 따라했지만 저는 result에 타입이 unknown이라고 뜨네요. 이때문인지는 모르겠지만 로그인 후 넘어간 페이지에서 버튼 누르는 과정에서 오류가 뜹니다.ㅜ아래는 아폴로 세팅입니다. 문제가 무엇일까요?import { ApolloClient, ApolloLink, ApolloProvider, fromPromise, InMemoryCache, } from "@apollo/client"; import { onError } from "@apollo/client/link/error"; import { createUploadLink } from "apollo-upload-client"; import { useEffect } from "react"; import { useRecoilState } from "recoil"; import { getAccessToken } from "../../../commons/libraries/getAccessToken"; import { accessTokenState } from "../../../commons/store"; const GLOBAL_STATE = new InMemoryCache(); interface IApolloSettingProps { children: JSX.Element; } export default function ApolloSetting(props: IApolloSettingProps) { const [accessToken, setAccessToken] = useRecoilState(accessTokenState); // 3. 프리랜더링 무시 - useEffect useEffect(() => { console.log("지금은 브라우저다"); const result = localStorage.getItem("accessToken"); console.log(result); if (result) setAccessToken(result); }, []); // 에러를 캐치하고 캐치한 에러가 토큰만료면 재발급 받은 후, 기존의 쿼리를 포워드해서 다시 날려준다. const errorLink = onError(({ graphQLErrors, operation, forward }) => { // 1-1. 에러를 캐치 if (graphQLErrors) { for (const err of graphQLErrors) { // 1-2. 해당 에러가 토큰만료 에러인지 체크(UNAUTHENTICATED) if (err.extensions.code === "UNAUTHENTICATED") { return fromPromise( // 2-1. refreshToken으로 accessToken을 재발급 getAccessToken().then((newAccessToken) => { // 2-2. 재발급 받은 accessToken 저장하기 setAccessToken(newAccessToken); // 3-1. 재발급 받은 accessToken으로 방금 실패한 쿼리의 정보 수정하기 if (typeof newAccessToken !== "string") return; operation.setContext({ headers: { ...operation.getContext().headers, // 만료된 토큰이 추가되어 있는 상태 Authorization: `Bearer ${newAccessToken}`, // 토큰만 새것으로 바꿔치기 }, }); }) ).flatMap(() => forward(operation)); // 3-2. 방금 수정한 쿼리 재요청하기 } } } }); const uploadLink = createUploadLink({ uri: "https://backendonline.codebootcamp.co.kr/graphql", // https 로 변경(토큰 정보를 쿠키에 담을 수 있게) headers: { Authorization: `Bearer ${accessToken}` }, credentials: "include", // https 변경으로 추가된 조건 }); const client = new ApolloClient({ link: ApolloLink.from([errorLink, uploadLink as unknown as ApolloLink]), // cache: new InMemoryCache(), cache: GLOBAL_STATE, }); // prettier-ignore // 주석으로 prettier-ignore 해주면 한줄로 바뀌는걸 막아준다 return <ApolloProvider client={client}> {props.children} </ApolloProvider>; }혹시 이부분때문일까요??link: ApolloLink.from([errorLink, uploadLink as unknown as ApolloLink])
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
컴포넌트 재사용하는 부분에서 궁금한게
여기서 isEdit는 변수인건가요..? vscode에서는 속성이라고 뜨는데 뭔지 헷갈려요..
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
타입스크립트의 generic 강의 마지막 요약해주시는 부분에서
안녕하세요 멘토님항상 강의 잘 듣고 있습니다.좀 사소한 질문일 수도 있으나, 알고 싶은 부분이라 질문 글을 쓰게 되었습니다.타입스크립트의 generic 강의 1:06:10 쯤 섹션 수업 내용 요약해주실 때 container를 가급적 최소한 사용하라고 말씀하신 부분에서 궁금한게 있습니다.예를 들어보자면, 게시글 작성 컴포넌트 폴더에서만약 기존에는 container-persenter 방식으로 만들어놨다가BoardWrite.container.tsxBoardWrite.presenter.tsxBoardWRite.queries.ts...이렇게 리스트가 있는 상태에서React-hook-form 이나 custom-hook을 사용하여 리팩토링을 하고나서 container의 내용이 거의 확 줄게되면 container 파일의 코드를 presenter랑 합치고 container 파일은 삭제하는게 좋다 라는 말씀이실까요?그렇다면 리팩토링후 container 파일을 삭제하고 presenter에 합쳤다고 가정할 경우BoardWrite.presenter.tsxBoardWRite.queries.ts...이렇게 남게 되는데요 그러면 BoardWrite.presenter.tsx 라는 파일 명을 presenter로 그대로 둬도 상관없는지, 현업에서도 container가 따로 없어도 presenter라는 파일 명으로 보편적으로 놔두는지 궁금합니다.그리고 container와 presenter를 보편적으로 합치는 기준이 둘을 합쳐도 70~80줄 이내일 경우에 합치는 것인지도 궁금합니다. 감사합니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
포트폴리오 중고마켓 유저 포인트에 관한 뮤테이션/쿼리에 관해서
안녕하세요. 수업 잘 듣고 있습니다. 중고마켓 포토폴리오 과정에서 질문이 있습니다. 캐시를 충전하고 받은 rsp 인자로 받은 데이터들을 활용해서 createPointTransactionOfLoading 뮤테이션을 만드는게 맞나요? 받은 데이터들 사용해서 impUid를 넣어봐도 잘 안되네요포인트를 충전하고, 그 데이터들로 어떤 뮤테이션을 보내고, 어떤 쿼리를 받아야하는거죠..?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
게시글 등록 레퍼런스 코드 질문
레퍼런스 코드 파일 실행시켜봤는데 컴포넌트 정렬이 안맞습니다.무슨 이유인지를 못찾겠습니다..
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
nextjs에서 cra처럼 사용 질문입니다
CRA 환경에서는 클라이언트 사이드로 렌더링 되는건데요NEXTJS에서 서버사이드렌더링 없이 CRA처럼 CRS만으로도 구현할수 있나요?이럴 경우에는 getStaticPros, getServerSideRedering 을 사용안하면 무조건 CRS가 되는건가요?seo 적용안하고 CRS로 하고 싶을 경우 강의에서 말씀하신 [_app] 에 next-seo를 추가하지 않고 getStaticPros, getServerSideRedering 없이 그냥 작업하면 모든 페이지가 CRS가 되는거죠 ?그런데 루트에 [_app], [_document] 이 파일은 무조건 실행이 되더라구요이것의 정체는 무엇인지 궁금합니다 CRS인데 NEXT를 사용하려는 이유가 첫번째, 사이트를 만들때 사용자페이지, 관리자페이지 구분을 두고 사용자페이지는 SSR , 관리자페이지는 CSR을 적용하려고 하고 두번째, 코드스프리팅이 지정해줄 필요없이 자동적으로 모두 되어 있어서 NEXTJS를 사용하려고 합니다
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
baskets.push할때
안녕하세요. 강의를 진행하는데 서버가 죽은것같아 직접 배열을 만들어서 예제를 진행중입니다.그런데 자꾸 문제가 생기네요,,첫번째 클릭에서는 객체가 localStorage에 저장이 되는데 그 이후부터 진행이 안됩니다. 이유가 무엇일까요,,이모션 부분은 제외하고 전달드립니다ㅜ import styled from "@emotion/styled"; import { Modal } from "antd"; interface IBasketsProps { id: number; writer: string; product: string; price: number; } const myBasket = [ { id: 100, writer: "짱구", product: "액션가면 인형", price: 30000 }, { id: 200, writer: "철수", product: "과외", price: 40000 }, { id: 300, writer: "훈이", product: "도시락", price: 50000 }, { id: 400, writer: "맹구", product: "시냇물 돌", price: 2000000 }, ]; export default function BasketHomework() { const onClickBtn = (basket: IBasketsProps) => () => { const baskets: IBasketsProps[] = JSON.parse( localStorage.getItem("baskets") ?? "[]" ); console.log(baskets); const alreadyIn = baskets.filter((el) => el.id === basket.id); if (alreadyIn.length === 1) { Modal.warning({ content: "이미 찜한 상품입니다." }); return; } baskets.push(basket); localStorage.setItem("baskets", JSON.stringify(basket)); }; return ( <> <CardWrapper> {myBasket.map((el, index) => ( <Card key={index}> <Product>{el.product}</Product> <Writer>{el.writer}</Writer> <Price>{el.price}</Price> <button onClick={onClickBtn(el)}>장바구니 담기</button> </Card> ))} </CardWrapper> </> ); }
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
포트폴리오 리뷰 - container/presenter 파일 분리 레이아웃 깨짐 문제
포트폴리오 리뷰 - container/presenter 파일 분리레퍼런스 코드를 클론후 빌드했을때http://localhost:3000/boards 페이지 접근시우측 날짜 시간쪽이 겹쳐서 나오는 것 같습니다.단순 CSS 문제라고 보면 되나요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
파이어베이스 vs AWS
배포에서 대표적인 클라우드 서비스로 AWS, GCP, Azure 를 알려주셨는데요혹시 파이어베이스도 같은 묶음으로 봐도 될까요?? 파이어베이스는 AWS처럼 사용할 수 없나요??파이어베이스는 DB, 서버 용으로만 배우는게 좋을까요??
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
CreateBoardComment
안녕하세요 createBoardComment 만들려고 mutation CreateBoardCommet doc을 보고 하고 있는데createBoardCommentInput과 boardId:ID! 를 두개다 써야되는데 어떻게 해야 되는지 알수 있을까요? 또한 밑에 createBoardComment도 필요하다 하는데 어떻게 써야되는건가요?감사합니다
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
HOC 강의 시청 후 응용? 질문
안녕하세요 멘토님.항상 좋은 강의 잘 보고 있습니다. HOC와 권한분기 실습 까지 수강을 마치고 궁금한 점이 생겨 질문 드립니다.페이지로 이동 시 HOC를 먼저 실행하여 로그인을 체크하는 방식은 이해했습니다.그런데, 간혹 어떤 특정 게시판 사이트에 비로그인 상태에서 댓글 작성을 한다고 가정할 때인풋창이나 등록 버튼을 누르면 '로그인 후 이용해주세요' 라는 알럿을 띄워주는 경우가 있습니다. (페이지 이동이 아닌 단순 엘리먼트 클릭)이러한 경우에는 그냥 단순히 인풋이나 등록 버튼 등 엘리먼트를 클릭 했을 때 토큰이 있는지 if 검증을 하는 로직만 넣으면 되는 것인지 궁금합니다.그리고 댓글 리스트 수정과 같은 상황에서 댓글 리스트에서 댓글 하나를 수정 버튼 눌렀을 때, 비로그인 유저를 감지하여 알럿을 띄워주고 싶은 경우도 궁금합니다. 이런 경우는 보통 이전 수업 때 배웠듯이 map을 사용하여 댓글 수정 컴포넌트를 반복문으로 뿌려주는 형태로 사용을 합니다. 그렇다면 이 댓글 수정 컴포넌트를 export 하는 과정에서 HOC를 씌워주는게 맞는 것인지, 아니면 그냥 또 단순히 수정 버튼 클릭 시 if 검증을 통해 토큰 존재 여부만 파악하면 되는지 궁금합니다. 감사합니다.