176만명의 커뮤니티!! 함께 토론해봐요.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
강사님 안녕하세요, 혹시 밑에 질문했는데 제가 잘못 말을 전달한것 같아서요 비로그인일때는 피그마에서 작성자, 비밀번호를 입력하게 나타나는데 로그인일때는 작성자, 비밀번호를 입력 못하게 나타나더라고여 근데 playground 가보면 파라미터를 받는곳을 보면 user 정보를 받는 파라미터가 없더라구요 그래서 fetchBoard를 들어가서 user정보를 가져와도 null값이 나옵니다. 그럼 피그마에 있는 저거는 로그인유저도 비로그인유저 화면으로 만들어야하나요?
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
제가 이번에 loadPosts를 createAsyncThunk로 구현하면서 createAsyncThunk의 진행 순서가 궁금해서 질문 드립니 index.js useEffect(() => { console.log("dipathch hi"); dispatch(loadPosts(10)); }, [dispatch]); reducers/post.js export const loadPosts = createAsyncThunk(LOAD_POST, async (data) => { trottle(); return data; }); const trottle = () => listenerMiddleware.startListening({ type: LOAD_POST, effect: async (action, listenerApi) => { listenerApi.unsubscribe(); console.log("Original state ", listenerApi.getOriginalState()); await listenerApi.delay(5000); console.log("Current state ", listenerApi.getState()); listenerApi.subscribe(); }, }); const postSlice = createSlice({ name: "post", initialState, extraReducers: (builder) => builder .addCase([HYDRATE], (state, action) => ({ ...state, ...action.payload.post, })) // loadPosts .addCase(loadPosts.pending, (state, action) => { state.loadPostsLoading = true; state.loadPostsDone = false; }) .addCase(loadPosts.fulfilled, (state, action) => { action.payload = generateDummpyPost(action.payload); state.mainPosts = action.payload.concat(state.mainPosts); state.hasMorePost = state.mainPosts.length < 50; state.loadPostsLoading = false; state.loadPostsDone = true; }) .addCase(loadPosts.rejected, (state, action) => { state.loadPostsLoading = false; state.loadPostsError = action.error; }) .addDefaultCase((state) => state), }); 제가 하나하나 console.log를 찍어서 확인한 진행 순서를 얘기해 드리겠습니다 일단 화면을 처음 랜더링할때 index.js에서 dispatch가 제일 먼저 실행됩니다 그리고 post.js로 넘어와서 loadPost.pending -> loadPosts.fulfilled ->loadPosts = createAsyncThunk(LOAD_POST) 이 순서대로 진행이 됩니다 그래서 loadPosts.fulfilled에 generateDummpyPost()함수를 작성한 것입니다 그래서 마지막에 createAsyncThunk가 실행이 되니 return이 필요없지 않나? 라는 생각에 return을 지워봤더니 post가 하나만 작성되고 그 이후는 작성되지 않았습니다 제가 궁금한 부분은 세개입니다 createAsyncThunk의 정확한 진행순서가 궁금합니다 generateDummpyPost()함수를 저렇게 작성하는게 맞는지 궁금합니다 https://blog.logrocket.com/redux-toolkits-new-listener-middleware-vs-redux-saga/ 에서 Throttling 관련 얘기가 있어서 똑같이 따라 해봤는데 쓰로틀링을 createAsyncThunk에 장착하는 방법을 잘 모르겠습니다 쓰로틀링이 없어도 윈도우 이밴트로 요청이 한번에 많이 오는 현상은 없지만 그래도 궁금해서 질문 드립니다
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
4분 15초경부터 25초까지 잡음이 들려서 강의 소리가 잘 안들리네요 참고하시면 좋을 것 같습니다.
해결됨
Next.js 시작하기(feat. 지도 서비스 개발)
안녕하세요! 강의 잘보고있습니다 :) next.js 13 버전으로 create-next-app 으로 설치하여 강의를 듣고있는데요, 섹션1 > getStaticProps 강의내용대로 동일코드를 입력했지만 props로 넘긴 값을 받아오질 못하더라구요.. console.log를 찍어봐도 안넘어와서 문의드립니다ㅠㅠ 아래와같이 입력했고 /app/section1/page.tsx로 만들었습니다. 관련 깃헙소소는 : https://github.com/simjieun/next13 여기에 있습니다! 한번 확인부탁드리겠습니다ㅠㅠ import { NextPage } from "next"; interface Props { second: number; } const Example: NextPage<Props> = ({ second }) => { return ( <main> <h1>getStaticProps Page</h1> <p>{second}</p> </main> ); }; export default Example; export async function getStaticProps() { const delayInSecond = 2; const second = await new Promise((resolve) => { setTimeout(() => { resolve(Math.random()); }, delayInSecond * 1000); }); return { props: { second, }, }; }
미해결
[리뉴얼] React로 NodeBird SNS 만들기
아래 질문(reduxjs/toolkit 에서 loadPost 한번만 가게하기)에서 비슷한 내용의 질문이 올라왔는데 delay란 함수를 어떻게 설정하는지 잘 이해가 안되서 질문드립니다
미해결
[리뉴얼] React로 NodeBird SNS 만들기
useEffect(() => { function onScroll() { console.log( window.scrollY, document.documentElement.clientHeight, document.documentElement.scrollHeight ); if ( window.scrollY + document.documentElement.clientHeight === document.documentElement.scrollHeight ) if (hasMorePost) { const dummypost = generateDummpyPost(10); dispatch(loadPost({ dummypost })); } } window.addEventListener("scroll", onScroll); return () => { window.removeEventListener("scroll", onScroll); }; }, [hasMorePost]); useEffect를 이런 식으로 작성하면 hasMorePost의 값이 변경되기 전까지 useEffect는 처음 단한번만 실행된후 그후에는실행되지 않아야 하는데 왜 계속 console.log가 실행되는건가요?
미해결
[리뉴얼] React로 NodeBird SNS 만들기
댓글 구현하기 수강 중에 제로초님께서 antd의 <Comment />를 import 하여 적용하는데 안 되시는 분들은 List.Item과 List.Item.Meta를 이용해서 만들어보세요. 제 경우 antd를 최신버전으로 사용하고 있는데 공식문서를 보니 Comment는 없습니다. 대신 List 컴포넌트에 List.Item과 List.Item.Meta가 있는데 이걸 이용해 댓글 컴포넌트를 만들 수 있습니다. {commentFormOpened && ( <div> <CommentForm post={post} /> <List header={`${post.Comments.length}개의 댓글`} itemLayout="horizontal" dataSource={post.Comments} renderItem={(item) => ( // 강의에서는 <li></li>로 사용하고 있습니다. <List.Item> {/* 강의에서는 <Comment />로 사용하고 있습니다. */} <List.Item.Meta // author => title로, content => description으로 적용하면 강의에서 보는 UI와 똑같아요. title={item.User.nickname} avatar={<Avatar>{item.User.nickname[0]}</Avatar>} description={item.content} /> </List.Item> )} /> </div> )}
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
강사님 안녕하세요, 혹시 로그인 유저가 자유게시판 작성하기 할때 작성자, 비밀번호등... 필요하잖아요 근데 비밀번호는 로그인 유저가 한 비밀번호를 가져와야 하는데 이걸 localStorage, session에 해버리면 보안상 문제가 생기지않나요? 지금은 그냥 localStroage, session 이런곳에 유저 비밀번호를 저장해놓을까요?
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
레인지피커의 값을 받아오려는데 e.target .value를 하면 Cannot read properties of undefined (reading 'value') 이런 오류가 떠요 구글링도 해봤는데 어떻게 알수 있는 방법 없을까요? 레인지피커는 파란색 박스에요
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
로그인 된 상태가 아닐 때 (로그인하면 안뜸) alert창 : {"response":{"errors":[{"message":"","locations":[{"line":2,"column":3}],"path":["restoreAccessToken"],"extensions":{"code":"INTERNAL_SERVER_ERROR","exception":{"stacktrace":["Error"," at RestoreAccessTokenService.createAccessToken (/codecamp_backend_api/dist/api/token/services/mutation/restoreAccessToken.service.js:45:19)"," at runMicrotasks (<anonymous>)"," at processTicksAndRejections (internal/process/task_queues.js:93:5)"," at async target (/codecamp_backend_api/node_modules/@nestjs/core/helpers/external-context-creator.js:76:28)"," at async /codecamp_backend_api/node_modules/@nestjs/core/helpers/external-proxy.js:9:24"]}}}],"data":null,"status":200,"headers":{"map":{"content-length":"654","content-type":"application/json; charset=utf-8"}}},"request":{"query":"mutation restoreAccessToken {\n restoreAccessToken {\n accessToken\n }\n}"}} 이런 문구가 뜨는데 다른 분 질문에서 프론트딴에서는 무시해도 된다고 하셨는데 화면딴에서 이게 안뜨게는 못하는걸까요? 할 수 있다면 어떻게 해야하나요?
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 제로초님 강의 잘 듣고 있습니다 . 제가 댓글 구현하기까지 잘 진행하던중 Comment 가 antd에서 지원을 안해준다는 error가 발생하여 antd 버전을 강의와 맞게 다운그레이드 (npm i antd@4.16.1) 했습니다. 근데 그 때 이후로 화면에 antd가 제대로 적용이 되지않은 상태가 되었습니다 . 다시 원래버전을 설치해도 같은 결과입니다 . Comment문제보단 화면에 antd가 다시 제대로 적용됬으면 합니다 . 혹시 해결방안이 있을까요? 화면이 이런형식으로 바뀌였습니다. 코드는 지금까지 강의와 똑같이 진행하였습니다 package.json
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
강사님이 예시로 보여줄땐 보이는데 왜 제가 하면 payload 탭이 안보일까요ㅠ
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
강좌에서 알려주신대로 페이지의 getServerSideProps로 초기로드를 SSR하는 방식을 제 프로젝트에서도 적용을 했는데요. 모든 페이지에 SSR을 진행하다보니 막상 배포해서 돌려보면 첫페이지 로드를 빨리 보여주는 장점보다, 서버에서 렌더링을 기다려야하는 단점이 눈에 띄게 보였습니다. 사실 모든 페이지에서 SSR을 적용하면 기존의 전통적인 웹과 다를바가 없지않나라는 생각들 들고, SEO vs SPA 둘 중의 하나의 고민으로 오게되는데 제로초님은 이런경우에 어떤 기준으로 판단을 하시나요? getStaticProps() 가 SSG(static site generation)에 해당하고 getServerSideProps() 가 SSR(server side rendering)에 해당하는것이 맞나요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요 선생님 맨 처음 설치 과정에서 막히는 부분이 있어 질문 남깁니다! class 폴더를 만들고, apollo, emotion등 것들을 분명 설치를 했는데 package.json에는 확인되지 않는 이유가 뭘까요?
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
제가 redux toolkit으로 제로초님 강의를 따라가고 있는데 제로초님이 올려주신 toolkit 깃허브 코드에는 addPostToMe에 대해 reducers로 선언만 다른 코드에서 사용하는건 안보이는데 그래서 제가 강의내용과 비슷하게 수정을 했습니다 user.js const userSlice = createSlice({ name: "user", initialState, reducers: { addPostToMe(draft, action) { draft.me.Posts.unshift({ id: action.payload }); }, removePostOfMe(draft, action) { draft.me.Posts = draft.me.Posts.filter((v) => v.id !== action.payload); }, }, }) export const { addPostToMe, removePostOfMe } = userSlice.actions; PostForm.js import { addPostToMe } from "../reducers/user"; const onSubmit = useCallback(() => { const id = shortId.generate(); dispatch(addPost({ id, text })); dispatch(addPostToMe()); }, [text]); 이렇게 코드를 수정했는데 혹시 제로초님은 다른 방식으로 addPostToMe를 사용했는데 제가 발견을 못한걸까요? 아니면 제가 작성한 코드에 뭔가 다른 문제가 생길 수도 있나요?
해결됨
Next.js 시작하기(feat. 지도 서비스 개발)
안녕하세요. 최근 강의를 수강을 시작하였는데요. nextjs가 13버전으로 바뀜에 따라 강의 에 맞게 소스 코드를 받아서 진행하려고 합니다. git checkout 으로 0-2 branch로 이동하고 여기서 부터 이어하려고 했으나, error: Your local changes to the following files would be overwritten by checkout: pages/section1/clientSideRendering.tsx pages/section1/getServerSideProps.tsx Please commit your changes or stash them before you switch branches. Aborting 변경점이 있는것 같아 해당 branch로 이동이 안되는것 같습니다! $ git stash && git pull origin master && git stash pop 임시 저장소로 옮기고 pull을 하려고 했으나 git@github.com : Permission denied (publickey). fatal: Could not read from remote repository. Please make sure you have the correct access rights and the repository exists. 키가 없어서 안되는것 같습니다! 혹시 이런경우에 어떻게 해결해야 할지 알 수 있을까요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
강의 코드를 작성하다가 중간에 잘못 작성한 부분이 있었는지 다음페이지를 눌렀을때 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 은 정상동작하네요.
