월 17,600원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
deserializeUser 파라미터에 기존의 function 문을 사용하면 await 사용이 문법적으로 불가한가요?
deserializeUser 파라미터에 기존의 function 문을 사용하면 await 사용이 문법적으로 불가한가요?위에 서처럼 밑이 줄이 쳐지면서 vscode 에서 에러가 나오네요.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
2가지 질문 드려요
01.children이 무엇인지 알려주시거나 알 수 있는 링크를 전달해 주실 수 있으신지요?AppLayout.propTypes = { children: PropTypes.node.isRequired,}; 02.위와 같이 쓸 때 마침표(.)가 무엇을 의미하는지, 마침표 다음에 오는 PropTypes나 node나 isRequired이 무엇을 의미하는지 알 수 있을까요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
antd적용 후 새로고침 or 서버 재시작시 에러가 납니다.
서버 켜져있는 상태에서 antd.css 임포트 시키고, 태그들도 <Menu.Item>으로 묶어주었습니다. 저장하면 css가 잘 적용되어 나오는데 그 후, 새로고침이나서버 재시작하면 아래와 같이 에러가 표기됩니다.react 버전이 문제인지 잘 모르겠습니다.. useContext ... 현재 hooks 사용한 부분은 없는데 왜 이런 문구가 나오는지 모르겠습니다 ㅠㅠ 혹시몰라 작성한 모든 코드들은 맨 아래에 첨부합니다.현재 사용하고 있는 버전은 아래와 같습니다.[브라우저에 표시되는 에러]Server ErrorTypeError: Cannot read properties of null (reading 'useContext')This error happened while generating the page. Any console logs will be displayed in the terminal window.Call StackObject.useContextfile:///Users/jeondaewon/WebstormProjects/react-nodebird/node_modules/react/cjs/react.development.js (1618:21)<unknown>file:///Users/jeondaewon/WebstormProjects/react-nodebird/node_modules/antd/lib/menu/index.js (43:24)renderWithHooksfile:///Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5658:16)renderForwardReffile:///Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5842:18)renderElementfile:///Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6005:11).... [터미널 에러 로그] Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:1. You might have mismatching versions of React and the renderer (such as React DOM)2. You might be breaking the Rules of Hooks3. You might have more than one copy of React in the same appSee https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.error - TypeError: Cannot read properties of null (reading 'useContext') at Object.useContext (/Users/jeondaewon/WebstormProjects/react-nodebird/node_modules/react/cjs/react.development.js:1618:21) at /Users/jeondaewon/WebstormProjects/react-nodebird/node_modules/antd/lib/menu/index.js:43:24 at renderWithHooks (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16) at renderForwardRef (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5842:18) at renderElement (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6005:11) at renderNodeDestructiveImpl (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11) at renderNodeDestructive (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14) at renderContextConsumer (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5906:3) at renderElement (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6023:11) at renderNodeDestructiveImpl (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11) at renderNodeDestructive (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14) at finishClassComponent (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5688:3) at renderClassComponent (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5696:3) at renderElement (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5943:7) at renderNodeDestructiveImpl (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11) at renderNodeDestructive (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14) at renderNode (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12) at renderChildrenArray (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6211:7) at renderNodeDestructiveImpl (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6141:7) at renderNodeDestructive (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14) at renderNode (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12) at renderHostElement (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5642:3) at renderElement (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5952:5) at renderNodeDestructiveImpl (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11) at renderNodeDestructive (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14) at renderIndeterminateComponent (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5785:7) at renderElement (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7) at renderNodeDestructiveImpl (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11) at renderNodeDestructive (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14) at renderIndeterminateComponent (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5785:7) at renderElement (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7) at renderNodeDestructiveImpl (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11) at renderNodeDestructive (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14) at renderIndeterminateComponent (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5785:7) at renderElement (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7) at renderNodeDestructiveImpl (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11) at renderNodeDestructive (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14) at renderIndeterminateComponent (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5785:7) at renderElement (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7) at renderNodeDestructiveImpl (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11) at renderNodeDestructive (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14) at renderNode (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12) at renderChildrenArray (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6211:7) at renderNodeDestructiveImpl (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6141:7) at renderNodeDestructive (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14) at renderElement (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5971:9) at renderNodeDestructiveImpl (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11) at renderNodeDestructive (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14) at renderNode (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12) at renderChildrenArray (/Users/jeondaewon/WebstormProjects/react-nodebird/prepare/front/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6211:7) { page: '/'} [소스코드]
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
서버 오류일까요..?
계속 서버를 껏다 켯다 합니다. 그러면 적용된게 보입니다.조그만 코드가 달라져도 적용이 안되어서 껏다 켯다 반복해야하는데.. ctrl+c 로 끄고 npm run dev 매번 이렇게 해야하나요ㅜㅜ
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
try catch 의 console.error 는 배포시에는 삭제하나요?
try catch 의 console.error 는 배포시에는 삭제하나요?console.error 로 찍은 것들은 pm2 에 log 에 남게 되는 건가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
npm init 대신에
node js 깔고, 터미널에 'npx create-next-app@latest' 설치한 다음에 pasge 폴더에 있는 거 다 지우고 index.js 파일 새로 생성해서 코드 짜넣어도 npm run dev가 동작하는데 상관 없나요?
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
`cors({ origin: true })` 가 이점이 있나요?
cors({ origin: true }) 했을시에는Access-Control-Allow-Origin 이 '*' 이 아닌 http://localhost:3001 이렇게 요청보낸 곳의 url 로 나오는데, 특별한 이점이 있나요? 단순히 사용자에게 cors({ origin: '*' })이 아니다 라고 알려주는게 목적인가요?
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
reducers/ 는 리덕스에 넣을 데이터 처리, sagas/ 는 리덕스 파이프라인으로 생각하면 될까요?
reducers/ 는 리덕스에 넣을 데이터 처리, sagas/ 는 리덕스 파이프라인으로 생각하면 될까요?
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
useEffect 디벤던시에 [hasMorePost] 를 사용한 이유는 무엇인가요?
useEffect(() => { const onScroll = () => { /* * window.scrollY, // 스크롤된 양 * document.documentElement.clientHeight, // 유저가 보는 문서의 높이 * document.documentElement.scrollHeight // 전체 문서 높이 */ if ( hasMorePost && window.scrollY + document.documentElement.clientHeight + 300 > document.documentElement.scrollHeight ) { console.log('✅ 인피니티 스크롤'); dispatch(loadPostAction(5)); } }; window.addEventListener('scroll', onScroll); // 컴포넌트 언마운트시 이벤트 제거 return () => { window.removeEventListener('scroll', onScroll); }; }, [hasMorePost]); useEffect 디벤던시에 [hasMorePost] 를 사용한 이유는 무엇인가요?hasMorePost 의 상태가 변화(로딩요청 -> 로딩완료)하면 계속적으로 useEffect 가 실행되어 성능에 더욱 안좋을 것 같습니다.
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
onScroll 함수를 arrow function 을 사용하지 않으신 이유가 있나요?
onScroll 함수를 arrow function 을 사용하지 않으신 이유가 있나요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
singlePost에 데이터 담는 관련 질문
안녕하세요 선생님. 단일 게시글 불러오기를 하고 있는데 이해되지 않는 부분이 있어 질문 드립니다. 리덕스로 요청 보내고 콘솔창을 보면 이런 식으로 데이터를 받아온것을 확인할 수 있는데, 저는 이 데이터를 아래 리듀서에서 case LOAD_POST_SUCCESS: draft.loadPostLoading = false; draft.loadPostDone = true; draft.singlePost = action.data; <- 여기서 singlePost에 데이터를 담았다고 생각했거든요 break;근데 제 예상하곤 다르게 프론트에서 useSelector로 const {singlePost} = useSelector((state) => state.post);이렇게 singlePost를 가져와서 콘솔을 찍어보면 브라우저 콘솔 창에 null이 뜨는데...어디서 잘못한 건지 알 수 있을까요..?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
useSelector 두번(중복)실행해도 괜찮은가요?
const id = useSelector((state) => state.user.user?.id); const { addCommentDone } = useSelector( (state) => state.post );위에 코드처럼 state 단계에서 갈리게되면 2번 실행하게되는데 성능엔 문제 없나요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
next-redux-wrapper에 대해 질문드립니다.
터미널에 나오는 거 지우고 싶은데 어떻게 하면 될까요?
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
takeLatest()를 사용함으로써 백엔드와 프론트의 처리 간극이 생기는 경우는 없나요?
takeLatest()를 사용함으로써 백엔드와 프론트의 처리 간극이 생기는 경우는 없나요?프론트: takeLatest 를 사용 해서 2개의 요청을 보내더라도 2번째 응답만 처리,백엔드: 중복적으로 2개이 요청이 들어오면 후에 들어온 요청을 무시 1번째 요청만 처리
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
loggerMiddleware 에서 console.log(action) 시 개발자 도구에서 [object Object] 라고 나오는데 이유가 무엇일까요?
loggerMiddleware 에서 console.log(action) 시 개발자 도구에서 [object Object] 라고 나오는데 이유가 무엇일까요?
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
state 에 현재 슬라이드 index 를 저장하는 이유는 무엇인가요?
state 에 현재 슬라이드 index 를 저장하는 이유는 무엇인가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
JWT Reflesh 토큰에 관한 질문
제로초님께 여쭤보고싶은 질문이 있습니다.. (수업외)JWT Refresh 토큰이란걸 배웠는데그럼 refresh 토큰은DB나 저장소에서 관리를 해야 의미가 있는 아이인가요?그저 refresh토큰은 access토큰을 유지해주는 애라고 알고있는데...프론트한테 주느냐 백한테 주느냐에 따라 용도가 달라지는걸까요?
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
`<List header={header}` 에서 header 같은 String 타입들도 useMemo 처리를 해주는 것이 좋은가요?
<List header={header} 에서 header 같은 String 타입들도 useMemo 처리를 해주는 것이 좋은가요?
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
그리드( <Col>, <Row>) 는 전체 레이아웃 잡을때만 사용하나요?
그리드( <Col>, <Row>) 는 전체 레이아웃 잡을때만 사용하나요?로그인폼을 생성할때는 <Col> 을 사용하지 않고 <div> 를 사용하셔서,그리드( <Col>, <Row>)를 사용하는 기준을 알고 싶습니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
데이터 수정에 대해 질문드립니다.
User 테이블이 아래와 같고,Post 테이블이 아래와 같을 때,DB의 내용은 바꾸지 않고, 제가 사용할 코드 상에서만 홍길동을 김민수로 바꾸고 싶습니다.이 때, 복사를 사용해야 할 지가 고민입니다.1.const post = await Post.findOne({ where: {id: 1}, include: [{ model:User }] }); const copyPost = {...post}; copyPost.name = "김민수"; 2.const post = await Post.findOne({ where: {id: 1}, include: [{ model:User }] }); post.name = "김민수"; 1번처럼 복사를 사용할까요 아니면2번처럼 post 식별자를 그냥 쓰되 post.save를 안하는 걸로 사용할까요? 만약 1번이 더 나은 해결책이라면 1번처럼 얕은 복사를 해야 하나요 아니면 깊은 복사를 해야 하나요? 조언 부탁드립니다.