173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
let i = 0; while (i <10) { console.log(i) i = i +1 } 여기서 콘솔로 0 ~10 까지 찍히는데 왜 10까지 찍히는건가요?? 강의 마지막에 편집오류인지 짤려서 이유가 안나와요
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요 멘토님 매번 강의 잘 듣고 있습니다. 이번 강의를 마무리로 별도로 개인 토이프로젝트 개발을 시작하고 배포를 할 때가 오면 다시 배포 부분부터 수강할 예정인데 이 강의에서 이해가 좀 정확히 안되는 부분이 있어서 질문 글을 올렸습니다. API 모킹을 통해 가짜 게시글 생성 테스트 API를 보내서 result를 받는 부분 중, _id 값 부분이 이해가 잘 안됩니다. writer , title , contents 는 테스트 input 부분에 있던 내용들 그대로 result에 적어서 이 값들이 제대로 insert 되었는지 테스트를 하기 때문에 같은 값을 입력했다는 것은 이해를 했습니다. 그런데 _id 부분은 왜 백엔드에서-받은-게시글ID 이라고 임의로 입력을 했는지 부분을 이해 못했습니다. id, _id 와 같은 값은 랜덤으로 생성되기에 뭘로 받아올지 모르기 때문에 테스팅 라이브러리에서 임의의 값으로 지정하도록 설정이 가능해서일까요? 그렇다면 아폴로에서 캐싱할 때도 _id, id 라는 명을 인식해서 캐싱이 더 잘되듯이, 테스팅 라이브러리도 _id, id 명에 한정해서 개발자가 임의의 값을 입력해도 되도록 만들어 둔 것인지도 궁금합니다. // 가짜 mutation 만들기 (요청, 응답 모두) const mocks = [ { request: { query: CREATE_BOARD, variables: { createBoardInput: { writer: "철수", title: "안녕하세요", contents: "반갑습니다", password: "1234", }, }, }, result: { data: { createBoard: { _id: "백엔드에서-받은-게시글ID", writer: "철수", title: "안녕하세요", contents: "반갑습니다", }, }, }, }, ];
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
section 19 refresh Token을 공부하면서 새로고침시 토큰을 유지하는 방법에 대해 다음과 같이 알려주셨는데요 const [accessToken, setAccessToken] = useRecoilState(accessTokenState); useEffect(() => { // 1. 기존방식(refreshToken 이전) // console.log("지금은 브라우저다!!!!!"); // const result = localStorage.getItem("accessToken"); // console.log(result); // if (result) setAccessToken(result); // 2. 새로운방식(refreshToken 이후) - 새로고침 이후에도 토큰 유지할 수 있도록 void getAccessToken().then((newAccessToken) => { setAccessToken(newAccessToken); }); }, []); 이게 withAuth가 아닐시의 방법이고 withAuth 일때는 나중에 리뷰해주신다고 했는데, 강의 자료를 살펴보니 따로 적힌 방법이 없어서요. withAuth가 아닐때는 토큰 유지를 어떻게 하나요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
import NewBoard from "../../../../src/components/units/write/BoardWrite.container" import { useQuery, gql } from "@apollo/client" import { useRouter } from "next/router" const FETCH_BOARD = gql` query fetchBoard($boardId: ID!){ fetchBoard (boardId: $boardId) _id writer title contents } ` export default function editPage(props) { const router = useRouter() console.log("-------------------") console.log(router.query.detail) console.log("-------------------") const {data} = useQuery(FETCH_BOARD, { variables: { boardId : Number(router.query.detail) } }) console.log("++++++++++++++++++") console.log(data) console.log("++++++++++++++++++") console.log("###################################") return( <> <NewBoard isEdit={true} queryData = {data?.data?.fetchBoard}/> </> ) } 수정 페이지에서 라우터 안에 있는 보드 아이디로 쿼리 요청을 보내려 했는데 처음에는 router.query.detail이 undefined 상태로 있어서 그런지 오류가 나왔습니다 ㅜㅜ 어떤 부분이 잘못된 걸까요..
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
제 깃헙 아이디를 만들어서 푸시를 해야 이 섹션 진행 할 수 있는건가요? vscode와 git 연결을 해야하는건지 답변 부탁드립니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
이 수업에 대한 질문은 아니지만, next.js의 버전이 올라갔는데 가르쳐주시는 버전으로 배워도 취업하는데에 문제가 없을까요??
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요. 이 강의에 질문을 달았는데 해결이 안되서 다시 질문드립니다.ㅠ 우선 로드밸런서에서는 아래의 동적페이지가 잘 작동되는것으로 확인됩니다. cloudFrond에서 연결도 잘 해줬구요. 그런데...제 도메인에서 부터 시작되는 부분은 자꾸 오류가 납니다. 아래처럼요ㅠ 아래 _buildManifest.js 네트워크창을 확인해보면 보드아이디도 잘 먹혀있는걸 확인할 수 있습니다. 그런데 오류가 난 빨간부분에서는 뭔가 이상합니다. x-cache 부분을 보면 클라우드 프론트에 에러가 났다고 하는데 이유를 당최 모르겠습니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
FE 서버 기동시(yarn start) 사전에 정의한 설정 정보를 읽어서 사용하는 방법이 있을까요? 예를 들어, 아래 apollo의 uploadLink 생성 코드의 경우, 만약 graphql 서버 주소가 바뀌었다면 uri 부분을 변경해서 다시 빌드를 해야 되는데요. 빌드없이 yarn start 시에 FE 서버 로컬 설정파일에서 uri를 읽어와서 적용하는 방식으로 하고 싶은데 어떤식으로 하면 좋을지요? .env 파일은 빌드 이후에 변경은 반영되지 않는것 같고.. SSR 같은 방법으로 해야 할까요? 아니면, 기동시에 accessToken 처럼 backend에 uri 정보를 조회해서 적용해야 할까요? const uploadLink = createUploadLink({ uri: "https://backendonline.codebootcamp.co.kr/graphql", headers: { Authorization: `Bearer ${accessToken}` }, credentials: "include", });
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
const nowDate = new Date (); const dayDate = new Date ("2023-4-15") const count = (dayDate - nowDate) / 1000 ; const countDate = Math.floor(count / 3600 / 24); const countHours = Math.floor(count / 3600) % 24 ; const countMinutes = Math.floor(count / 60) % 60; const countSec = Math.floor(count) % 60; 수업 시간 작성한 코드는 이해가 갑니다. d day 카운터 관련 구글링중 const dDay = new Date('2023-4-15'); const today = new Date(); const difference = dDay.getTime() - today.getTime(), // Ms 단위로 변환 secInMs = Math.floor(difference / 1000), minInMs = Math.floor(secInMs / 60), hourInMs = Math.floor(minInMs / 60), days = Math.floor(hourInMs / 24), // 남은 시간 계산 seconds = secInMs % 60, minutes = minInMs % 60, hours = minutes % 24; 위의 코드를 보면 hours = minutes % 24 이부분이 이해가 가지 않습니다. minutes 은 나머지 값인데 왜 작동이 잘될까요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
이렇게 코드를 작성하였는데 계속 오류가 나네요 이유가 뭔지 알 수 있을까요 ?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
다른 폴더에서 연습하다가 다시 강의할때 만든 폴더를 로컬 서버에 연결하려고 하니 안되네요 npm start하면next build 하라고 나오고 그대로 하면 또 다른 에러가 떠서 에러 동굴로 들어가는 느낌이에요 다른 폴더는 또 로컬서버 3000으로는 들어가지는데 코드 변경한게 저장해도 반영이 안되고 예전 모습 그대로만 나와요 구글링 해보면 도커를 설치해서 설정 추가하라고 나오는데 이렇게 따라해볼까요?? 구글에서 하라는대로 하다가 모두 엉망진창이 될까봐 두려워요
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요. Section10 함수형 컴포넌트의 생명주기에서 궁금한 점이 있어 질문 드립니다. component가 unmount 되는 상황을 만들기 위해 router.push로 페이지를 이동하잖아요? 그런데 router.push 로 이동할 때는 return()=>{...} 의 내용이 제대로 실행되는데, 주소창에 직접 이동할 주소를 써서 이동했을 때 에는 같은 동작이 실행되지 않더라구요. 둘다 현재 컴포넌트가 제거되고 새로운 컴포넌트가 화면에 나타나는 것아닌가요? 다르게 동작하는데 이유가 있는지, 아니면 제가 코드를 잘못 쓴건지 피드백 부탁드립니다. 감사합니다! 작성코드 useEffect(() => { console.log('컴포넌트가 마운트됐습니다~'); return () => { alert('컴포넌트가 제거됩니다~'); }; }, []); useEffect(() => { console.log('컴포넌트가 변경됐습니다~'); }); const onClickButton = () => { setCount((prev) => prev + 1); }; const onClickMove = () => { router.push('/'); };
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요 강사님, 강의 잘 듣고 있습니다. 혹시 다음과 같은 에러가 발생하는데 뭘 잘못한지 모르겠어서 문의 남깁니다. 아래 사진 파일들은 순서대로 _app.tsx .eslintrc.js .eslintrc.json package.json 입니다. 감사합니다!
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요 멘토님. 항상 강의 잘 보고 있습니다. 예전부터 문의드리려다가 자꾸 잊어먹던게 있었는데 이제서야 질문드립니다. export default function aaa() { const bbb = () => { ... } ... } 위와 같이 강의를 들을 때 마다 왜 컴포넌트 부분의 최초 함수 선언 부분만 화살표 함수가 아닌 일반 함수 선언 방식으로 하시는지, 특별한 이유가 있는 것인지 궁금합니다. 감사합니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요 멘토님, 항상 틈틈히 강의 잘 보고 있습니다. 질문부터 말씀드리자면, OAuth로 로그인 기능을 만들면 백엔드에서 별도로 JWT관련 인증, 발급, 재발급 등의 로직을 개발해주지 않아도 되는지 궁금해서 질문을 드리게 되었습니다. 제 상황을 말씀드리자면 토이프로젝트 개발을 슬슬 시작하려는데요, 시작하기에 앞서 백엔드 서버부터 먼저 만들고 있었습니다. 해당 강의에서 제공해주는 백엔드 서버의 중고마켓이나 게시판 API를 활용한 것이 아닌, 다른 주제로 개인 토이프로젝트를 새로 프론트부터 백엔드단까지 직접 만들어보려고 합니다. 기존 웹 개발 경력이 조금 있어서인지 자바나 노드 백엔드 구축 등을 배워서 API를 개발하는 것은 할만했습니다. 하지만 백엔드에서 딱 하나, JWT 관련 로직을 추가하는 부분이 제 기준으로 너무 어렵고 벽이더라구요. (현업에서도 JWT 경험이 없습니다) 그래서 시간이 너무 걸려서 보류해두었다가 다시 강의를 듣고 있었는데 이번 강의에서 OAuth 관련 내용을 보게 되었습니다. 더 찾아보니까 인증, 발급과 같은 각종 로그인 관련 기능들을 해당 OAuth 서버에서 제공해준다고 되어있더라구요. 그래서 해당 부분들을 활용하면 기존의 JWT 발급이나 인증 관련 로직을 백엔드에서 직접 구축해야하는 부분을 스킵하고 진행할 수 있지 않을까 궁금해져서 질문 글을 올리게 되었습니다. 강의 내용의 OAuth 부분을 보고 궁금해져서 질문을 올려야 겠다고 생각했는데 어쩌다 보니 백엔드 느낌의 질문 글이 되어 죄송합니다. 하지만 멘토님이 백엔드쪽 강의도 하시는걸로 알고 있어 혹시나 질문을 드려봅니다. 감사합니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
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에서 대댓글 기능 구현에 대한 언급은 따로 없는거같아서요. 제가 못찾는건가요?
