172만명의 커뮤니티!! 함께 토론해봐요.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
강의 코드를 작성하다가 중간에 잘못 작성한 부분이 있었는지 다음페이지를 눌렀을때 11 , 21, 31페이지로 넘어가지 않고 계속 1 ~ 10페이지만 작동을 해서 좀 이상하길래 재수정을 하고 재빌드를 했는데 코드의 이상이 없음에도 똑같이 작동하길래 .next 폴더를 삭제하고 재빌드를 했더니 정상작동 하는 것을 보았습니다. .next 폴더가 캐싱 정보를 가지고 있어서 그랬던 건가요? 만약에 .next 폴더를 건드리고 싶지 않다면 브라우저에서 캐시된 것들을 지우면 되는 건가요?
미해결
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요, 강사님 "댓글구현하기"편을 보던 중 기존 업무에서도 궁금했던 점이 생각나 질문 남깁니다. 예를들어 부모요소에서 하위요소에 post객체에 속한 id값 하나만 전달하고자 합니다. 그럴 때 <하위요소 post = {post}/> 와 <하위요소 postId = {post.id}/> 중에 어떤 방식을 선호하시나요? 단, 이때 자식요소에서 post의 id외에는 필요가 없습니다. 개인적으로는 다른 사람도 저의 코드를 보고 이해할때 '아! 이 자식 요소에서는 post의 id만 사용하는 구나' 딱 알수 있기 때문에 <하위요소 postId = {post.id}/> 가 더 좋을 것 같다 생각했습니다. 강사님의 의견 여쭤보고 싶습니다. 답변 기다리겠습니다. 감사합니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요. 멘토님. 강의를 듣다 보니 react 18이 아닌 17버전을 쓰는 이유가 궁금해져서 질문 드립니다. 18 버전을 사용하게 된다면 다른 라이브러리와 호환이 안되는 이슈가 생겨서 17버전을 쓰는 것일까요? 18버전을 쓸때 어떤 이슈가 생길 수 있는지 궁금해서 질문 드립니다..!
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
다음 수업 > 을 통해서 섹션8 | 데이터 통신 에 도달하였는데 아무 반응이 없네요. 해당 페이지에서 다음 수업 > geolocation 은 정상동작하네요.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
질문1:빨간색 부분에 width랑 background가 하얀글씨로 되어있는데 적용이 된건가요? 그리고 강의 중 이 부분에 예시가 없어서 레퍼런스 코드를 참고해버렸는데요 질문2: transition: 제일 앞에 선언할수 있는 속성이 무엇이 있는지 질문3: transition-property: 는 어떤식으로 사용하는지 궁금합니다
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
박스사이즈를 구하라는 문제에서 저는 div의 크기를 생각하고 24*3(폰트사이즈*3em) + 20(가로세로 padding 10+10) =92 생각했는데 93이라는 약간의 오차도 있고 정답은 폰트사이즈인 72네요 ㅠ 1.제가 문제를 잘못이해했는지 2.div크기 구하는데 오차가 발생하는 이유 위 두가지가 궁금합니다.
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
프론트 부분 회원가입한 후 router설정 까지 끝낸 후, 회원정보가 잘 들어갔는지 확인하기 위해 Workbench에서 Users테이블을 클릭 했는데,, 바로 예기치 않게 종료되었습니다. 가 떴습니다. 구글링 해본 결과 버전이 문제인데 싹 - 지우고 다운그레이 하라고 하더라구요. 지금 버전이 8.0.32 인데 몇으로 다운그레이 해야할까요 ? + 그 전까지는 잘 작동되던 워크벤치가 왜 갑자기 버전충돌이 일어난거죠 ?
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
https://github.com/ZeroCho/react-nodebird/tree/master/toolkit redux toolkit으로 바꾸면서 제로초님 강의를 듣고있는데 .addCase(addComment.fulfilled, (draft, action) => { const post = draft.mainPosts.find((v) => v.id === action.data.PostId); console.log('draft', draft, 'post', post, 'Comments', post.Coments); post.Comments.unshift(action.data); draft.addCommentLoading = false; draft.addCommentDone = true; }) 이런 코드를 보면 action.data이렇게 action에서 data를 가져오는데 제가 redux devtools에서 봤을 때 action안에 값들은 action.payload에 저장이 되어있는거 같습니다 혹시 값들을 action.data로 저장하는 방법이 있나요?
미해결
만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript)
안녕하세요. Vercel 배포 후 상세페이지 meta tag내 thumbnail 이미지가 생성되지 않는 이슈가 발생합니다. (500 에러 발생) 구글 참고하여 verce l내 runtime을 기존 Node 18에서 Node 14로 변경하고 빌드하여 해결하긴 했는데, 빌드 메세지가 아래처럼 발생합니다.(Error: Node.js version 14.x has reached End-of-Life. Deployments created on or after 2023-08-15 will fail to build. Please set Node.js Version to 18.x in your Project Settings to use Node.js 18.) Node 18로 빌드하고 난 후 vercel에서 runtime log를 확인해 보면 아래와 같은 에러가 발생하는데 구글링을 해봐도 14로 내리는 것 외엔 해결책을 찾을 수 없어 Node 18로 빌드하여 해결하신 분이 있는지 올려봅니다. [pid=22][err] /tmp/chromium: error while loading shared libraries: libnss3.so: cannot open shared object file: No such file or directory [pid=22] <process did exit: exitCode=127, signal=null> [pid=22] starting temporary directories cleanup
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요. 브라우저 재 접속 시 로그인 상태 유지를 하고 싶습니다. 로그인 후 어플리케이션의 쿠키에 refreshToken이 담긴 것을 확인하였습니다. 브라우저를 재접속하면 refreshToken이 사라져있는데 이것은 브라우저를 종료하면 쿠키가 휘발되는 성질로 인해 사라지는 것이 맞나요? 그렇다면 브라우저 재접속 시 로그인 상태 유지는 어떻게 구현할 수 있는지 궁금합니다. 감사합니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
강의중 clearfix div를 넣어주는데 제가 그게 왜들어가는지 들어가서 무슨작용을 하는지 원리가 무엇인지 아직 이해가 덜되서요.. 조금만 더 자세하게 설명해주실수 있나요? 못난 제자라 죄송합니당 ㅜㅜ html: <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>02-02-clear</title> <link rel="stylesheet" href="./index.css"> </head> <body> <div class="box1 box"> 첫번째 박스입니다.<br> float:left가 적용되어 있습니다. </div> <div class="box2 box"> 두번째 박스입니다.<br> float:right가 적용되어 있습니다. </div> <div class="clearfix"></div> <div class="box3"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris risus sapien, facilisis vitae feugiat ut, semper at ligula. Vivamus cursus lectus tincidunt tellus tincidunt pharetra. Donec pharetra dictum malesuada. Fusce non sapien egestas, maximus urna vel, pulvinar magna. Aenean ut dapibus lacus, in blandit ligula. Vestibulum sit amet efficitur tortor. Phasellus id viverra felis. Mauris magna est, luctus sit amet neque et, sagittis ultrices elit. Morbi odio eros, finibus non justo eget, sollicitudin dapibus ante. Nunc maximus eu nunc et finibus. Vivamus viverra feugiat pretium. Sed at tempus enim, et dignissim ante. Mauris vel nisi leo. Nullam vel nibh suscipit, lobortis ex eu, mollis nunc. Fusce in eros blandit, vehicula libero et, euismod enim. </div> </body> </html> css: *{ box-sizing: border-box; margin: 0; padding: 0; } .container { background-color: #eeeeee; display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 50px 0px; } .wrapper { width: 620px; padding: 40px 30px; background-color: white; border: 1px solid gray; border-radius: 10px; } .wrapper__head { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px dashed gray; } .wrapper__head__title { font-size: 32px; background-color: orange; color: white; text-align: center; padding: 5px; margin-bottom: 10px; } .wrapper__head__sub-title{ font-size: 18px; padding: 10px 0; } #point { color: orange; font-size: 22px; font-weight: bold; text-decoration: underline; display: block; margin-top: 15px; } .wrapper__body { border: 1px solid #dddddd; padding: 20px 30px; } .diary-title { font-size: 18px; font-weight: 600; background-color: #f4f4f4; margin-bottom: 20px; } .kimchi { color: red; font-weight: 600; } .egg { color: orange; font-weight: 600; } .highlight { font-size: 22px; color: blue; font-weight: 700; font-style: italic; } .diary-date { color: #919191; font-size: 14px; text-align: right; } .header { height: 80px; display: flex; justify-content: center; align-items: center; border: 1px solid gray; } .header-inner { width: 900px; height: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .logo { width: 100px; } .logo h1 a{ text-decoration: none; color: orange; } .menu__ul { display: flex; flex-direction: row; } .menu__ul li { list-style: none; } .menu__ul li a{ display: block; /* a 태그는 inline태그여서 상하적용이 안되기 떄문에 block요소를 적용시킴*/ padding: 10px 20px; /*상하에 굳이 시각적 차이 없는 10px을 주는 이유는 마우스 커서클릭 영역이 글자만 되는것 보다 영역을 늘려서 여유를 주기위해서*/ text-decoration: none; color: black; } .menu__ul li a:hover{ color: orange; } .user { width: 100px; }
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
다음과 같이 not found라 나옵니다
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
강사님 refreshToken 이해가 되지않아서 인데요. 제가 52강의 까지 보고 했는데요, 이사진은 기존토큰이 없을때 뜨는 restore try~ catch문에서 나오는 Error 입니다. 저는 refreshToken을 localStorage에 값이 있을때로 했거든여, 제가 구현하고 싶은거는 사용자가 해당 시간때가 끝나면 알아서 자동으로 해주는걸로 했는데 이렇게 해도 되는지 여쭤봅니다... 강의에서 볼때는 버튼을 누르고 새롭게 갱신하는걸로 해가지고요 뭔가 로그인, 로그아웃 새로고침 여기서 막히네여 ㅠ,
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
let origin = { name: "otter", age: 25, favoriteFood: { first: "sushi", second: "hamburger" } }; const copy = JSON.stringify(origin); const deepCopy = JSON.parse(copy); 강의에서 깊은 복사할 때 위 코드처럼 JSON.stringify(), JSON.parse()를 사용해서 복사를 해주셨는데 아래의 코드처럼 복사해주어도 문제가 없을까요? 물론 객체 안에 객체들이 많아진다면 JSON 명령어를 사용해서 복사해주는 것이 좋다고 생각합니다! 하지만 예시처럼 객체가 하나거나 적은 경우에 저는 개인적으로 아래처럼 해주는 게 편한 것 같아서 아래처럼 복사해줘도 괜찮은건지 질문드립니다! let origin = { name: "otter", age: 25, favoriteFood: { first: "sushi", second: "hamburger" } }; const myCopy = {...origin, favoriteFood: {...origin.favoriteFood}}
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
아폴로 캐시 데이터를 직접 수정하고 싶어서 질문 드립니다. 포인트 충전 시 변경된 포인트를 refetchQueries 사용하지 않고, 캐시를 수정해서 화면에 보여주려 하는데요. 두번째 사진에서 캐시에 저장된 fetchUserLoggedIn.userPoint.amount를 직접 수정하고 싶은데 어떻게 수정해야 할지 모르겠습니다. 강의에서 cache.modify를 이용해 배열에 아이템 목록을 추가하거나 삭제하는 예시만 알려주셔서요. 캐시 데이터를 직접 수정하는 방법이 있을지 여쭙고 싶습니다.
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
configureStore.js 파일을 강좌와 똑같이 진행하였는데 해당오류가 발생합니다. 강의를 계속 진행하면 해결될까요? configure.js _app.js package.json
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
제가 redux toolkit을 이용해서 제로초님 강의를 따라가고 있는데 dispatch로 데이터를 넘겨주는 과정중에 이해가 잘 안되는 부분이 있어서 질문드립니다 로그인을 하는 과정인데 LoginForm.js const onSubmitForm = useCallback(() => { console.log(email, password); dispatch( loginAction({ email, password, }) ); }, [email, password]); user.js export const loginAction = createAsyncThunk(LOG_IN, async (data) => { await wait(1000); return data; }); .... .addCase(loginAction.fulfilled, (state, action) => { state.logInLoading = false; state.logInDone = true; state.user = dummyUser; state.loginData = action.data; }) 이렇게 두부분의 코드로 아래의 action 과정이 일어나는데 LoginForm.js에서 dispatch로 email, password를 넘겨주었는데 딱히 user.js에서 이를 처리하는 코드는 보이지 않습니다 redux devtools에서는 payload에 email과 password를 받은것은 확인이 되는데 말입니다 그리고 저는 initialState에 email과 password를 설정하지 않았습니다 export const initialState = { logInLoading: false, // 로그인 시도중 logInError: null, // 로그인 에러 logInDone: false, // 로그인 상태 체크 logOutLoading: false, //로그아웃 시도중 logOutError: null, // 로그아웃 에러 signUpLoading: false, // 회원가입 시도중 signUpDone: false, // 회원가입 상태 체크 signUpError: null, // 회원가입 에러 user: null, signUpData: {}, loginData: {}, }; 이렇게 되면 payload에 들어있는 email과 password는 어디에 어떻게 저장이 되는걸로 생각을 해야하나요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
리액트 npx create-react-app [이름]으로 해서 프로젝트 생성해서 보면 index.html과 app.js를 같이 작성하는지 아니면 app.js만 하는지. 알고 싶습니다 src에 컴포넌트 폴더를 생성하면 파일 종류가 어떻게 되어 있는지 알고 싶습니다
미해결
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
도포자료 부록 버전 클릭하니까, https://drive.google.com/file/d/1uvbiIXHVC3QIYBD1XOFRdiHiDQL57-G8/view nextjs와 typescript 내용 한페이지만 있는데 부록 관련 도포자료 pdf가 어디 있나요~?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
yarn 설치가 안됩니다 npm 으로는 작동이 되는데 yarn 이면 아무것도 안되네요
