월 59,400원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
.git 파일
초기 세팅부분에서 ls -al 했을때 .git 파일이 나오면 어떻게 삭제를 해야하죠? 그리고 이전 수업에서는 .git 파일을 따로 삭제하진 않았던것같은데 혹시 했었다면 어떤 강의에서 했는지 알 수 있을까요?
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
[CSS-in-js] Emotion styled components 관련 질문입니다.
const Wrapper = styled.div` @media (max-width: 767px) { width: 760px; & > div { width: 700px; } }; width: 1200px; padding: 30px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; margin: 0 auto; & > div { width: 1000px; } `1) 위의 내용과 같이 CSS-in-js 코드 작성하고 화면 너비를 767px 이하로 조정하였음에도 Wrapper 자손 div 선택자들의 너비가 width: 700px로 조정되지 않습니다. 아래 그림과 같이 @mobile 밖의 코드인 1000px로 계속 강제적용이 되는것으로 보입니다. 왜 이런 것인지 알 수 있을까요?2) 논외로 위의 코드와 같이 & > div 를 이용하여 자손 div 태그들에 너비를 정해준 후, 따로 const 이용하여 자손 div 중 하나를 상수 지정하여 너비를 설정해주면, Wrapper에서 &>div를 이용해서 지정한 너비로 또 계속 강제적용되는 것으로 보입니다. & > div가 가장 우선적인 설정인가요? 답변 부탁드리겠습니다ㅠ
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
도메인
도메인 주소를 만드려고 하는데요선생님께서는 어떤 웹호스팅 업체를 사용하셨는지 여쭤봐도 될까요????
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
폰트어썸 아이콘이 안나와요
아예 적용이 안된거 같은데 킷코드도 헤드부분에 넣었고말씀하신데로 아이콘도 바디 부분에 넣었는데 아예 안나오는데 이걸 어떻게 해야 할지 ㅠㅠ
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
포트폴리오 SECTION8 댓글 수정 기능 누락
여기서 reference Code를 다운 받아 제가 작성한 코드와 비교해보려고 하는데,댓글 수정 기능은 구현이 되어 있지 않다는 것을 알게 되었습니다.일부러 댓글 수정 기능은 빼놓은 건가요?
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
테스트 안됨
안녕하세요!테스트 강좌 들으면서 다 똑같이 한것같은데 이런 오류가 뜨네요.__test__ 파일 따로 뺏고 config파일 생성했고package.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를 넣어봐도 잘 안되네요포인트를 충전하고, 그 데이터들로 어떤 뮤테이션을 보내고, 어떤 쿼리를 받아야하는거죠..?
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
게시글 등록 레퍼런스 코드 질문
레퍼런스 코드 파일 실행시켜봤는데 컴포넌트 정렬이 안맞습니다.무슨 이유인지를 못찾겠습니다..
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
TypeScript로 변환하는 과정에서
이런 에러가 뜹니다...
- 해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
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도 필요하다 하는데 어떻게 써야되는건가요?감사합니다