묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
function 컴포넌트 생명주기 관련해서 질문있습니다.
안녕하세요. 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 import 에러
안녕하세요 강사님, 강의 잘 듣고 있습니다.혹시 다음과 같은 에러가 발생하는데 뭘 잘못한지 모르겠어서 문의 남깁니다.아래 사진 파일들은 순서대로_app.tsx.eslintrc.js.eslintrc.jsonpackage.json입니다.감사합니다!
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
강의를 듣다가 export default function () 관련 궁금점이 있습니다.
안녕하세요 멘토님.항상 강의 잘 보고 있습니다. 예전부터 문의드리려다가 자꾸 잊어먹던게 있었는데 이제서야 질문드립니다.export default function aaa() { const bbb = () => { ... } ... }위와 같이 강의를 들을 때 마다 왜 컴포넌트 부분의 최초 함수 선언 부분만 화살표 함수가 아닌 일반 함수 선언 방식으로 하시는지, 특별한 이유가 있는 것인지 궁금합니다. 감사합니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
OAuth 관련 질문이 있습니다.
안녕하세요 멘토님,항상 틈틈히 강의 잘 보고 있습니다.질문부터 말씀드리자면,OAuth로 로그인 기능을 만들면 백엔드에서 별도로 JWT관련 인증, 발급, 재발급 등의 로직을 개발해주지 않아도 되는지 궁금해서 질문을 드리게 되었습니다.제 상황을 말씀드리자면 토이프로젝트 개발을 슬슬 시작하려는데요, 시작하기에 앞서 백엔드 서버부터 먼저 만들고 있었습니다.해당 강의에서 제공해주는 백엔드 서버의 중고마켓이나 게시판 API를 활용한 것이 아닌,다른 주제로 개인 토이프로젝트를 새로 프론트부터 백엔드단까지 직접 만들어보려고 합니다.기존 웹 개발 경력이 조금 있어서인지 자바나 노드 백엔드 구축 등을 배워서 API를 개발하는 것은 할만했습니다.하지만 백엔드에서 딱 하나, JWT 관련 로직을 추가하는 부분이 제 기준으로 너무 어렵고 벽이더라구요. (현업에서도 JWT 경험이 없습니다)그래서 시간이 너무 걸려서 보류해두었다가 다시 강의를 듣고 있었는데 이번 강의에서 OAuth 관련 내용을 보게 되었습니다.더 찾아보니까 인증, 발급과 같은 각종 로그인 관련 기능들을 해당 OAuth 서버에서 제공해준다고 되어있더라구요.그래서 해당 부분들을 활용하면 기존의 JWT 발급이나 인증 관련 로직을 백엔드에서 직접 구축해야하는 부분을 스킵하고 진행할 수 있지 않을까 궁금해져서 질문 글을 올리게 되었습니다.강의 내용의 OAuth 부분을 보고 궁금해져서 질문을 올려야 겠다고 생각했는데 어쩌다 보니 백엔드 느낌의 질문 글이 되어 죄송합니다.하지만 멘토님이 백엔드쪽 강의도 하시는걸로 알고 있어 혹시나 질문을 드려봅니다.감사합니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
prevState를 사용하여 리팩토링
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를 사용하는 것이 암묵적인 원칙인가요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
graphql의 DOCS가 강의와 다른 것 같아요.
섹션 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
qql에서 백틱 다음에 저는 문자열로 모든게 표현되는데, 강의 화면에서는 다르게 나오던데 어떤 익스텐션을 추가해야 되나요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
cloudFront에 원본 프로토콜
원본 도메인을 적는 칸에 강의와는 다른 프로토콜 칸이 생겼습니다.해당 부분은 어떻게 진행하는 것인가요?++ 우선 뷰어 일치로 진행하였는데, 받은 주소가 자꾸 에러가 나네요.자물쇠는 걸렸지만 아래처럼 나옵니다!
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
.git 파일
초기 세팅부분에서 ls -al 했을때 .git 파일이 나오면 어떻게 삭제를 해야하죠? 그리고 이전 수업에서는 .git 파일을 따로 삭제하진 않았던것같은데 혹시 했었다면 어떤 강의에서 했는지 알 수 있을까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
도메인
도메인 주소를 만드려고 하는데요선생님께서는 어떤 웹호스팅 업체를 사용하셨는지 여쭤봐도 될까요????
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
폰트어썸 아이콘이 안나와요
아예 적용이 안된거 같은데 킷코드도 헤드부분에 넣었고말씀하신데로 아이콘도 바디 부분에 넣었는데 아예 안나오는데 이걸 어떻게 해야 할지 ㅠㅠ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
포트폴리오 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 } } `; 이부분입니다,,,ㅠ