import { useState } from "react"; import { Modal } from "antd"; import { Address } from "react-daum-postcode/lib/loadPostcode"; import DaumPostcodeEmbed from "react-daum-postcode"; const ModalCustomPage = () => { const [isModalOpen, setIsModalOpen] = useState(false); const onToggleModal = () => { setIsModalOpen((prev) => !prev); }; const handleComplete = (address: Address) => { console.log("실행되었습니다."); console.log(address); onToggleModal(); }; return ( <> {isModalOpen && ( <Modal title="모달 제목" open={true} onOk={onToggleModal} onCancel={onToggleModal} > <DaumPostcodeEmbed onComplete={handleComplete} /> </Modal> )} </> ); }; export default ModalCustomPage; 안녕하세요, 한 가지 궁금증이 들어 질문합니다.onToggleModal 함수를 보면 prevState를 사용해서 isOpenModal 값을 바꾸는데 굳이 그럴 필요가 있을까? 라는 생각이 들어서요. const onToggleModal = () => { setIsModalOpen((!isModalOpen); };onToggleModal 안에서 여러개의 setIsModalOpen이 실행되는 것이 아니기 때문에 그냥 이렇게 코드를 작성해도 함수가 끝나면 isOpenModal 값이 바뀌고 리렌더링되어 버그 없이 잘 실행될 것 같은데 혹시 다른 이유가 있나요?아님 setState 사용할때 prevState를 사용하는 것이 암묵적인 원칙인가요? 

섹션 6 포트폴리오 리뷰 영상 보면서 따라하고 있는데 아무래도 createBoard의 파라미터랑 리턴값이 강의와 다른 것 같아서 오류가 발생하는 것 같은데 어떻게 해야 같은 API를 사용할 수 있을까요?

안녕하세요. 강의 진행 중 빌드 아이디가 적용이 안되어 문의 드립니다. 우선 next.config.js파일에generateBuildId: () => "codecamp_deploy",라는 명령을 통하여 빌드 아이디를 일치시키고 빌드하였습니다. 그런데 ec2에서는 빌드아이디가 계속 이전 것으로 유지됩니다. 원인이 무엇일까요? 아래는 제가 진행한 과정입니다. 1. 빌드 후 aws S3에 다시 올림, 퍼블릭 설정완료  2. git push 완료 ec2에서 git pull 완료 4-1 .next 변경사항 확인 결과는 안됨혹시 제가 놓친 부분이 있을까요?

댓글 삭제가 잘 진행이 되다가 .. 다음과 같은 에러창이 뜨면 더이상 삭제가 진행되지 않습니다.  

 대댓글 기능을 구현하라고 했는데, graphql을 보면대댓글 기능을 구현할 수 있는 query가 보이지 않아요.fetchBoardcomments는 있는데, 이건 그냥 댓글 리스트를 가져오는 query고 대댓글 리스트를 가져오는 query는 안보여요.혹시나 해서 포트폴리오 리뷰를 참고했지만 SECTION9-1에서 대댓글 기능 구현에 대한 언급은 따로 없는거같아서요. 제가 못찾는건가요?

안녕하세요 취업을 위해 강의를 구매하고 듣고 있습니다혹시 이강의 만으로 취업이 가능할까요?보통 국비학원이나 오프라인 코드캠프 과정에 비해 내용이 좀 적은 편인가요?난이도가 입문이라고 되어 있어서 더 따로 공부해야 취업을 위한 실력이 가능한 건지 궁금합니다혹시 부족하다면 어떤 부분을 따로 공부하는게 좋나요?그리고 또 알고리즘같은 것도 여기서 다루나요? 따로 공부해야 하나요? 

 qql에서 백틱 다음에 저는 문자열로 모든게 표현되는데, 강의 화면에서는 다르게 나오던데 어떤 익스텐션을 추가해야 되나요?

 원본 도메인을 적는 칸에 강의와는 다른 프로토콜 칸이 생겼습니다.해당 부분은 어떻게 진행하는 것인가요?++ 우선 뷰어 일치로 진행하였는데, 받은 주소가 자꾸 에러가 나네요.자물쇠는 걸렸지만 아래처럼 나옵니다!

초기 세팅부분에서 ls -al 했을때 .git 파일이 나오면 어떻게 삭제를 해야하죠? 그리고 이전 수업에서는 .git 파일을 따로 삭제하진 않았던것같은데 혹시 했었다면 어떤 강의에서 했는지 알 수 있을까요?

 도메인 주소를 만드려고 하는데요선생님께서는 어떤 웹호스팅 업체를 사용하셨는지 여쭤봐도 될까요????

 아예 적용이 안된거 같은데 킷코드도 헤드부분에 넣었고말씀하신데로 아이콘도 바디 부분에 넣었는데 아예 안나오는데 이걸 어떻게 해야 할지 ㅠㅠ

여기서 reference Code를 다운 받아 제가 작성한 코드와 비교해보려고 하는데,댓글 수정 기능은 구현이 되어 있지 않다는 것을 알게 되었습니다.일부러 댓글 수정 기능은 빼놓은 건가요?

 안녕하세요!테스트 강좌 들으면서 다 똑같이 한것같은데 이런 오류가 뜨네요.__test__ 파일 따로 뺏고 config파일 생성했고package.json 파일 수정했는데왜 오류가 나는지 모르겠습니다.ㅜ

안녕하세요 현재 네이버맵 대신 구글맵 api를 사용중인데 아무리 찾아봐도 선생님 stores.json 값처럼 json데이터를 찾을수가없네요 ㅠㅠ 일단 현재 그냥 stores.json 선생님이 가지고있는데이터 사용중이긴한데 다른질문 답변보니 크롤링하셔서 데이터를 만드신거같은데 혹시 저의경우에는 방법이있을까요??

백엔드를 만드는 부분은 backend course를 들어야 가능한가요? 중고마켓 부분 포트폴리오를 만드려고 하는데 playground 부분을 직접 설계하고 싶다는 생각이 들었습니다. 프론트 강의에 그 부분이 포함되어 있나요? 저는 간단한 중고마켓을 만들고 싶은데 백엔드 분량이 너무 많아서 프론트 강의에 백엔드 부분 있길래 백엔드 강의(백엔드 부트캠프)는 나중에 들을려고 결제를 미뤘습니다. 일단 포트폴리오 만드는데에는 프론트 강의만으로 충분한가요? 저만의 웹페이지를 만들려면 강의 api보다는 직접 api를 만들어서 하는게 좋다고 생각해서 강의를 구매했습니다.

안녕하세요! 이미지 업로드부분 강의 듣고있는데class 폴더에서 진행하고있고 진행하는 서버에는 파일업로드 mutation이 없어요포폴 서버에는 있는데 강의는 그냥 눈으로 보기만하고 포폴만들때 실습을 해야되는건가요?검색기능 강의도 마찬가지인것 같아요,,, 그뒤 강의는 아직 안들어서 모르겠어요,,,const UPLOAD_FILE = gql` mutation uploadFile($file: Upload!) { uploadFile(file: $file) { url } } `; 이부분입니다,,,ㅠ   

 강의 끝부분에 퀴즈로 디바운싱 퀴즈가 나와서 코드를 짰긴했는데,, 레퍼런스가 없어서 제가 짠 코드가 맞는지 알고싶습니다..!아래는 강의 후 추가한 코드입니다. 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 퀴즈에서 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️⃣번 모두 작동에는 이상이 없으나 빨간줄의 원인과 해결방법을 알고싶어 질문드립니다. 감사합니다!

강의를 보고 똑같이 따라했지만 저는 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에서는 속성이라고 뜨는데 뭔지 헷갈려요..