월 17,600원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
analyze 브라우저가 자동으로 안뜨는 문제 질문입니다.
안녕하세요 제로초님. next.config.js 를 생성하고 bundle-analyzer 도 설정을 해주고 package.json 에서 실행코드도 입력해주었는데 제로초님 처럼 자동!으로 브라우저가 뜨질 않습니다... 아예 빌드가 안된건 아니고 터미널에 html 주소가 뜬걸 입력하면 화면이 보이는데 제로초님 처럼 자동으로 브라우저가 띄워지는게 아니라 터미널에 뜬 주소로 직접 이동을해야 보여서, 제가 혹시 뭔가 잘못한건지 궁금해서 질문 남깁니다!! bulid 를 했을때 이렇게 analyze true, env production 으로 잘 빌드되는거 같고 마지막까지 에러없이 빌드도 완료했는데 왜 자동으로 브라우저가 띄워지지 않을까요?? 앞서 말씀드린대로 터미널에 적힌 주소로 이동하면 analyzer 빌드된 화면이 잘 보이긴 합니다... 제로초님처럼 자동으로 브라우저가 안띄워지는 현상에 큰 문제가 있는지 궁금합니다... 제 환경이 맥이라 맥에선 자동으로 안띄워지는건가 생각도 들구요...음...큰 문제는 아닐까요..?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
실무에서도 styled component를 해당 컴포넌트에 다 작성하나요?
antd같은 ui 컴포넌트를 사용안하면 한 컴포넌트 안에서 styled component가 차지하는 코드량이 상당히 많을 것 같은데 실무에서도 styled component의 코드길이에 상관없이 해당 컴포넌트에 다 적는지 아니면 따로 폴더에 분리해서 import하는지 궁금합니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
session secret질문이요
session 옵션중에서 secret이 있는데 이 secret이랑 login할때 서버에서 보내주는 세션에 대한 cookie랑 조합해서 더 안전한 cookie를 브라우저에 보내주는건가요? 어떤 방식으로 동작하는 지를 모르겠습니다. ㅠㅠ
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
질문이 있습니다.
다름이아니라 node 질문입니다. 이 강좌랑은 상관이 없는 질문이긴한데... 너무 궁금해서 질문드립니다. 다름이아니라 제가 woker_threads 모듈을 공부하는 도중 궁금한게 있어 남깁니다. 제가 다른언어로 멀티쓰레드를 코드적으로 구현해본적이 없어서..뭔가 비교대상은 못 찾겠는데 왜 node로 woker_threads모듈을 굳이 쓰지말고 cpu hard 한 작업을 할 일이 있다면 그 부분은 다른언어로 해서 api로 붙여야한다라고 생각하는 사람들이 많은것 같아서요 제로초님도 그러신 것같고 이유가 뭔가요? worker_threads로 코드적으로 구현하기가 다른 타 언어보다 불편한가요? 형태가 다른가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
글쓰고 완료버튼 누르면 화면에 적용이 안돼요ㅠ
redux에 action에는 분명 데이터가 있는데 state로 보면 없고 어디가 문제일까요.. 도와주세요
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 route 쪽 주소 질문입니다!
안녕하세요 강의를 보면서 한가지 궁금한 점이 생겼습니다. 저는 강의를 진행하다가 GET /user/2/posts?lastId=0 200 38.841 ms - 3117 GET /user/2 500 16.997 ms - 2228 라는 에러를 직면했는데요, 게시글은 가져오지만 작성자의 정보는 가져오지 못하더라구요..! 해당 에러는 ssr 처리를 위해 작성했던 동적 주소를 router.get('/:userId', async (req, res, next) => {}) // 위에서 아래로 변경했습니다. router.get('/:id', async (req, res, next) => {}) 로 변경을 하니까 해결이 됐습니다. 그런데 해당 에러가 뜬 이유가 혹시 이 강의에서 특정 유저의 게시글을 불러오는 주소에 :userId 를 적어주었기 때문인가요?? 같은 라우터에서 같은 동적 주소가 사용되면 문제가 생기나요? 제 코드는 router.get('/:userId/posts', async (req, res, next) => {}) 이 강의에서 작업한 유저의 포스트를 불러오는 라우터가 상단에, router.get('/:userId', async (req, res, next) => {}) SSR 을 위한 유저 정보를 가져오는 라우터가 맨 하단에 위치해 있었습니다! 제 생각으로는 /:userId 가 겹쳐서 하단에 라우터가 500에러가 뜬거라는 생각이 드는데... 제 생각이 맞을까요? 맞다면 같은 라우터에 같은 동적 주소를 사용하면 안되는건가요?? (하나의 라우팅 주소, 노드 라우팅 주소 규칙 등.. 구글링 해봤지만 잘 찾지 못하겠어서 질문드립니다 ㅠㅠ)
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
이미지와 함께 게시글 업로드 시 오류
안녕하세요 제로초님 강의 듣다 막바지에 막히는 부분이 있어 찾다찾다 해결이 되지않아 질문 드립니다 SequelizeDatabaseError: Data too long for column 'src' at row 1 at Query.formatError (C:\Users\moonj\OneDrive\문서\test-project\practice\react-nodebird\REACT.SNS\back\node_modules\sequelize\lib\dialects\mysql\query.js:247:16) at Query.handler [as onResult] (C:\Users\moonj\OneDrive\문서\test-project\practice\react-nodebird\REACT.SNS\back\node_modules\sequelize\lib\dialects\mysql\query.js:68:23) at Query.execute (C:\Users\moonj\OneDrive\문서\test-project\practice\react-nodebird\REACT.SNS\back\node_modules\mysql2\lib\commands\command.js:36:14) at Connection.handlePacket (C:\Users\moonj\OneDrive\문서\test-project\practice\react-nodebird\REACT.SNS\back\node_modules\mysql2\lib\connection.js:456:32) at PacketParser.onPacket (C:\Users\moonj\OneDrive\문서\test-project\practice\react-nodebird\REACT.SNS\back\node_modules\mysql2\lib\connection.js:85:12) at PacketParser.executeStart (C:\Users\moonj\OneDrive\문서\test-project\practice\react-nodebird\REACT.SNS\back\node_modules\mysql2\lib\packet_parser.js:75:16) at Socket.<anonymous> (C:\Users\moonj\OneDrive\문서\test-project\practice\react-nodebird\REACT.SNS\back\node_modules\mysql2\lib\connection.js:92:25) at Socket.emit (events.js:315:20) at addChunk (internal/streams/readable.js:309:12) at readableAddChunk (internal/streams/readable.js:284:9) at Socket.Readable.push (internal/streams/readable.js:223:10) at TCP.onStreamRead (internal/stream_base_commons.js:188:23) POST /post 500 23.702 ms - 1784 해당 오류가 나타나면서 게시글과 이미지가 업로드 되지 않는데 무슨 문제인지 여쭤볼 수 있을까요?ㅜ
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
응답할때 send,json 차이 질문이요
19:27초에 응답을 res.json(user)로 보내주셨는데 제가 res.send(user)로도 바꿔서 해보니깐 둘이 다른게 없더군요. 둘의 차이점이 뭔지 궁금해요 json대신 send로 보내도 상관 없는건가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
next auto refresh 대해서
코드를 변경하면 next 에서 자동적으로 hot loader 실행돼서 웹 사이트에서 변경이 되어야 하는데 웹 사이트에서 변경이 되지 않습니다. 그래서 현재 수동으로 새로고침으로 하고 있는데요 왜 안되는걸까요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요
안녕하세요 강의 다 마무리하고 추가 기능 추가하면서 해결안되는게 있어 질문드립니다. 모달로그인 기능을 추가하였습니다. (로그인 두곳에서 가능 =>일반, 모달)여기서 로그인실패 message 상태값을 사용하는 component들이 다 호출되는데 이걸 어떻게 해결 해야될지 잘모르겠습니다. (설명하기가 좀 어렵네요) 모달or 일반 로그인 실패 msg => const { loginErr} = useSelector((state) => state.user) loginErr 사용되는 곳은 모달로그인 컴퍼넌트와 일반 로그인 컴퍼넌트 ... 로그인 실패시 const { loginErr, } = useSelector((state) => state.user) useEffect(() => { if (!mounted.current) { mounted.current = true } else { if (loginErr) { console.log(loginErr) alert(loginErr) // } } }, [loginErr]) 위 코드가 모달로그인과 일반 로그인 똑같이 되어있는데 둘 중하나로 로그인하여 실패시 alert 창이 두번 실행됩니다. 이걸 해결할수 있는 방법 없을까요? 버튼 클릭시 모달내부 코드들이 실행될줄 알고 했는데 생각 처럼 잘 안죕니다. 왜 그런지는 알겠는데 해결방법을 잘 모르겠습니다. 사이트는 tweeter.ga 입니다. 항상 감사합니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
질문이 있습니다.
다름이아니라 질문이 있습니다. 제가 그 AWS말고 개인적으로 포트포워딩해서 핸드폰으로 접속하면서 테스트를 해보고있는데 (내부ip로컬서버환경도 동일) 외부접속이 아닌 로컬로 할때도 그렇고 그 프론트에서 백엔드 포트쪽으로 요청을 보낼때 응답이 오기까지의 딜레이가 랜덤인 것 같아요... 다시 프론트 응답로딩까지 오래 걸리는 것같은느낌? 그럴때마다 백엔트 포트 실행시킨 터미널쪽에서 엔터키를 누르면 바로 터미널 로그에 시퀄라이즈 쿼리문이 찍히면서 응답이 오는데 왜 그런건가요? 이유를 알고 싶네요 질문 1. 프론트에서 백엔드로 요청을보낼떄 응답하는 속도가 랜덤인 것 같다(어쩔땐 빠르고 어쩔땐 느린...) 질문2. 그럴때마다 백엔드 터미널에서 엔터키를 치는데 프론트에서 백으로 요청보내고 바로 엔터키를 치면 바로 요청->응답 페이지 로딩 되는데 이부분 관련해서 왜 엔터키를 치면 바로 요청 된 값이 응답이 되는가에 대해 궁금하네요 질문3 아 그리고 제가 외부ip 내부 ip로 로그인 관련 테스트 해본결과 같은 아이디로 로그인 되더라구요 이 부분 관련해서 코딩을 안해줘서 당연하지만 예상을 해보면 여기에서 다루는 전략은 세션에서 아이디 값을 가지고있는게 아니라 프론트에서 쿠키로 가지고 있잖아요? 그럼 쿠키에 같은 값이 왔을때 뭐 어떻게 처리해줘야할 것같은데 AWS 배포 강의 부분을 아직 다 보지 못했는데 거기 설명해주시면서 알려주시나요? 만약 그 내용이 없다면 구글에 키워드를 뭐라고 치면 나올까요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
useCallback 배열 질문
안녕하세요 제로초님, useinput과 export default (initialValue = null) => { const [value, setValue] = useState(initialValue) const handler = useCallback((e) => { setValue(e.target.value); }, [여기]); return [value, handler]; } 이번 강의에서 사용하신 useCallback 함수 const onChangeText = useCallback((e) => { setText(e.target.value) }, [여기]); 내부에 있는 배열에 useinput에는 value, onChangeText에는 text를 넣지 않아도 되는건가요? 사용자가 입력할 때 마다 어차피 컴포넌트가 리렌더링 되니까 넣어도 안넣어도 똑같기 때문에 굳이 넣지 않는 것인가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
로그인 에러, 500 Internal Server Error
안녕하세요. 회원가입기능은 잘되는데 로그인이 안됩니당. 회원가입해서 DB에 email, 비번 저장되는거 확인하였습니다 그걸로 이제 로그인하려니깐 아래 그림처럼 에러가 뜹니다. 사진1] Network 스크린샷 아래와 같이 "500 internal Server Error"라고 써져있습니다. [사진2] Network>Headers 사진3] Network>Response
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
"더미데이터와 포스트폼 만들기" 강의순서 관련 코드 작성 뒤, 로그인에서 게시판으로 넘어가지 않는 문제로 질문 드립니다!
안녕하세요. 제로초님의 강의에 큰 도움을 받고 있음에 감사의 말씀을 드립니다. 여러 검색결과도, 질문답변도, 해당강의 반복재생으로 찾아보았으나 해결치 못한 부분이 있어 이렇게 직접 질문을 하게 됐네요! [ 마주한 문제점 & 상황 ] 은 다음과 같습니다. 1. (이전상황) 로그인폼(Id, Pwd)에 텍스트를 입력해 "로그인" 버튼을 누르면 정상적으로 로그인이 됐고, Redux 역시 정상작동해 개발자도구에서 확인이 가능했습니다. 2. (현재상황) 섹션3(Redux) "더미데이터와 포스트폼 만들기" 강의를 들으며 문제에 마주했습니다. 3. (더미데이터와 포스트폼 만들기 강의 후) 잘 넘어가던 로그인 화면에서 데이터는 넘어가 콘솔에 찍히지만, 화면 페이지는 게시판으로 넘어가지 않는 상황에 직면했습니다. [ 콘솔에 찍히는 Error ] 는 다음과 같습니다. [정상적으로 넘어가는 로그인 데이터] -> 그러나 로그인이 되지 않고 화면이 넘어가질 않습니다! [ 소스코드 ] 1. package.json { "name": "react-nodebird-front", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "next -p 3060", "build": "next build" }, "author": "jj", "license": "ISC", "dependencies": { "@ant-design/icons": "^4.7.0", "antd": "^4.19.0", "next": "^9.5.5", "next-redux-wrapper": "^6.0.2", "prop-types": "^15.8.1", "react": "^16.14.0", "react-dom": "^16.14.0", "react-redux": "^7.2.8", "redux": "^4.1.2", "redux-devtools-extension": "^2.13.9", "styled-components": "^5.3.3" }, "devDependencies": { "eslint": "^8.10.0", "eslint-plugin-hooks": "^0.4.2", "eslint-plugin-import": "^2.25.4", "eslint-plugin-react": "^7.29.3" } } 2. LoginForm.js 파일 import React, { useState, useCallback, useMemo } from 'react'; import { Form, Input, Button } from 'antd'; import Link from 'next/link'; import styled from 'styled-components'; import { useDispatch, useSelector } from 'react-redux'; import useInput from "../hooks/useInput"; import { loginAction } from '../reducers/user'; const ButtonWrapper = styled.div ` margin-top: 10px; `; const FormWrapper = styled(Form) ` padding: 10px; `; const LoginForm = ({ setIsLoggedIn }) => { const dispatch = useDispatch(); const [id, onChangeId] = useInput(''); const [password, onChangePassword] = useInput(''); const onSubmitForm = useCallback(() => { console.log(id, password); dispatch(loginAction({id, password})); }, [id, password]); return ( <FormWrapper onFinish={onSubmitForm}> <div> <label htmlFor="user-id">아이디</label> <br /> <Input name="user-id" value={id} onChange={onChangeId} required /> </div> <div> <label htmlFor="user-password">비밀번호</label> <br /> <Input name="user-password" type="password" value={password} onChange={onChangePassword} required /> </div> <ButtonWrapper> <Button type="primary" htmlType="submit" loading={false}>로그인</Button> <Link href="/signup"><a><Button>회원가입</Button></a></Link> </ButtonWrapper> </FormWrapper> ); } export default LoginForm; 3. index.js import React from 'react'; import { useSelector } from "react-redux"; import AppLayout from "../components/AppLayout"; import PostForm from '../components/PostForm'; import PostCard from '../components/PostCard'; const Home = () => { const { isLoggedIn } = useSelector((state) => state.user); const { mainPosts } = useSelector((state) => state.post); return ( <AppLayout> {isLoggedIn && <PostForm /> } {mainPosts.map((post) => <PostCard key={post.id} post={post} />)} </AppLayout> ); } export default Home; 4. configureStore.js import { createWrapper } from 'next-redux-wrapper'; import { applyMiddleware, compose, createStore } from 'redux'; import { composeWithDevTools } from 'redux-devtools-extension'; import reducer from '../reducers'; const configureStore = () => { const middlewares = []; const enhancer = process.env.NODE_ENV === 'production' ? compose(applyMiddleware(...middlewares)) : composeWithDevTools(applyMiddleware(...middlewares)); const store = createStore(reducer, enhancer); return store; }; const wrapper = createWrapper(configureStore, { debug: process.env.NODE_ENV === 'development', }); export default wrapper; 5. post.js // [ initialState ] export const initialState = { mainPosts: [{ id: 1, User: { id: 1, nickname: 'jj', }, content: '첫 번째 게시글 #해시태그 #익스프레스', Images: [{ src: 'https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAxNjExMjFfMjM2%2FMDAxNDc5NjY5MjEyOTEz.13R8uiaA0T8rJnLPJICAib4oVtrAzA424jbDMC9a3ckg.m0QoHt-5MdR0MH501npcL8aJof3Eu1h_9Zp0ceNm8e4g.PNG.guri4you%2F%25BB%25F6%25B1%25F2_%25BD%25C9%25B8%25AE%25C5%25D7%25BD%25BA%25C6%25AE1.png&type=sc960_832', }, { src: 'https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAxNjExMjFfMjM2%2FMDAxNDc5NjY5MjEyOTEz.13R8uiaA0T8rJnLPJICAib4oVtrAzA424jbDMC9a3ckg.m0QoHt-5MdR0MH501npcL8aJof3Eu1h_9Zp0ceNm8e4g.PNG.guri4you%2F%25BB%25F6%25B1%25F2_%25BD%25C9%25B8%25AE%25C5%25D7%25BD%25BA%25C6%25AE1.png&type=sc960_832', }, { src: 'https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAxNjExMjFfMjM2%2FMDAxNDc5NjY5MjEyOTEz.13R8uiaA0T8rJnLPJICAib4oVtrAzA424jbDMC9a3ckg.m0QoHt-5MdR0MH501npcL8aJof3Eu1h_9Zp0ceNm8e4g.PNG.guri4you%2F%25BB%25F6%25B1%25F2_%25BD%25C9%25B8%25AE%25C5%25D7%25BD%25BA%25C6%25AE1.png&type=sc960_832', }], Comments: [{ User: { nickname: 'jj4', }, content: 'redux를 학습 중입니다.', }, { User: { nickname: 'jj3', }, content: '다음은 sage를 학습 예정임.', }] }], imagePaths: [], postAdded: false, } const ADD_POST = 'ADD_POST'; export const addPost = { type: ADD_POST, } const dummyPost = { id: 2, content: '더미데이터입니다.', User: { id: 1, nickname: 'jj1', }, Images: [], Comments: [], }; const reducer = (state = initialState, action) => { switch (action.type) { case ADD_POST: return { ...state, mainPosts: [dummyPost, ...state.mainPosts], postAdded: true, }; default: return state; } }; export default reducer; 6. PostForm.js import React, { useCallback, useState, useRef } from 'react'; import { Form, Input, Button } from 'antd'; import { useSelector, useDispatch } from 'react-redux'; import { addPost } from '../reducers/post'; const PostForm = () => { const { imagePaths } = useSelector((state) => state.post); const dispatch = useDispatch(); const imageInput = useRef(); const [text, setText] = useState(''); const onChangeText = useCallback((e) => { setText(e.target.value); }, []); const onSubmit = useCallback(() => { dispatch(addPost); setText(''); }, []); const onClickImageUpload = useCallback(() => { imageInput.current.click(); }, [imageInput.current]); return ( <Form style={{ margin: '10px 0 20px' }} encType="multipart/form-data" onFinish={onSubmit}> <Input.TextArea value={text} onChange={onChangeText} maxLength={140} placeholder="어떤 신기한 일이 있었나요?" /> <div> <input type="file" multiple hidden ref={imageInput}/> <Button onClick={onClickImageUpload}>이미지 업로드</Button> <Button type="primary" style={{ float: 'right' }} htmlFor="submit">짹짹</Button> </div> <div> {imagePaths.map((v) => ( <div key={v} style={{ display: 'inline-block'}}> <img src={v} style={{ width: '200px' }} alt={v} /> <div> <Button>제거</Button> </div> </div> ))} </div> </Form> ) }; export default PostForm; 7. PostCard.js import React from 'react'; const PostCard = () => { return ( <div> PostCard </div> ); }; export default PostCard; 8. user.js import { HYDRATE } from 'next-redux-wrapper'; // initialState 부분 const initialState = { user: { isLoggedIn: false, user: null, signUpData: {}, loginData: {}, }, post: { mainPosts: [], } }; // [로그인] action creator export const loginAction = (data) => { return { type: 'LOG_IN', data, } }; // [로그아웃] action creator export const logoutAction = (data) => { return { type: 'LOG_OUT', } }; // reducer const rootReducer = (state = initialState, action) => { switch (action.type) { case HYDRATE: console.log('HYDRATE', action); return { ...state, ...action.payload }; case 'LOG_IN': return { ...state, user: { ...state.user, isLoggedIn: true, user: action.data, }, }; case 'LOG_OUT': return { ...state, user: { ...state.user, isLoggedIn: false, user: null, }, }; default: return state; } }; export default rootReducer; 다소 많은 양의 글 내용이지만, 시간이 허락되실 때 답변 주시면, 참 감사할 것 같습니다! 오늘 하루도 고생많으셨고, 이번 한 주도 파이팅입니다! 늘 양질의 강의 감사합니다 ^^
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
TypeError: Cannot read properties of undefined (reading 'belongsToMany')
안녕하세요, 제로초님 강의와 동일하게 코드를 적고 실행을 했습니다. 질문이 두 가지 있습니다. Q1> 깃허브에는 클래스로 되어있던데, 영상에서 다루신 함수로 되어있는 코드는 없나요? Q2> 강의 3분43초에 Hashtag에다가 through : 'PostHashtag' 넣는것도 진행했는데 node app을 실행하니 아래와 같은 에러가 발생했습니다. 도움부탁드립니다! 에러메시지 hashtag.js index.js post.js 감사합니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
질문드립니다
react에Rcode splitting 을 적용하면 첫로드시에 필요한 페이지 데이터만 받아오고, 페이지 이동시에 추가적으로 데이터를 받아오고 2번이상 페이지 접속시 csr처럼 동작하는것으로 알고 있는데요. nextjs에서 ssr동작이 위와 차이점을 못느껴서 질문드립니다. react에서 code splitting적용한것과 nextjs에서 ssr동작하는것에 차이점이 있나요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
Likers가 정의되지 않는것 같습니다 ㅜ
안녕하세요 제로초님 강의 듣다 해결이 되지 않는 부분이 있어 질문 남깁니다. 강의 마지막까지 듣고, 서버연결하여 새로고침하여 localhost사이트에 들어가는데, 이러한 에러가 떠서 질문드려요 ㅜ Likers는 분명히 fullPost 넘길때 넘겼는데 const fullPost = await Post.findOne({ where: { id: post.id }, include: [{ model: Image }, { model: Comment, include: [{ model: User, //댓글 작성자 attributes: ['id', 'nickname'] }] }, { model: User, // 게시글 작성자 attributes: ['id', 'nickname'] }, { model: User, //좋아요 누른사람 as: 'Likers', attributes: ['id'] }] }) 물론 게시글 불러오는 posts에서도 Likers를 불러오도록 설정 해놨습니다 const posts = await Post.findAll({ limit: 10, order: [ ['createdAt', 'DESC'], [Comment, 'createdAt', 'DESC'] ], include: [{ model: User, attributes: ['id', 'nickname'] }, { model: Image }, { model: Comment, include: [{ model: User, attributes: ['id', 'nickname'], }] }, { model: User, as: 'Likers', attributes: ['id'] }] }) 이렇게요 현재 터미널에서는 이러한 에러가 뜨며 진행이 되지 않고 있습니다. 구글링도 해보고 다양한 루트로 찾아보고있는데 해결이 되지 않아 질문드립니다 ㅜㅜ
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 제로초님! 어디서 잘못되었는지 찾고 있습니다.
안녕하십니까!! 현재 글 등록이 안되서 질문드립니다. 더미데이터를 이용하지 않고 글 등록을 하는 도중, 500 에러가 발생해서 질문드립니다. 백엔드쪽 어디선가 제가 실수를 하거나 잘못된 부분이 있는 것같은데 몇시간 째 발견을 못해서 질문드립니다 현재 백엔드 서버와 프론트엔드 서버를 실행 시키고 글을 등록하면 에러는 위와 같습니다. 백엔드 app.js 입니다. 크게 다른거라곤 제가 서버를 따로 지정을 안해서 origin을 true한 것 말고는 없는 것 같습니다. 백엔드 라우터 post입니다 ..! 혹시 보게 되신다면 도움을 주시면 감사하겠습니다 .!!
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
제로초님 질문 있습니다.
제가 시퀄라이즈를 잘 몰라서 그러는데 팔로우 하기에서 backend 시퀄라이즈부분에서 awaait user.addFollowers(req.user.id) <- 에 user.id는 제 자신의 아이디 잖아요 이 코드로 인해서 테이블의 followerId에 - 제 자신의 userid 가 insert 되는거 맞나요? 그렇다면 followeingId <- req.params.user.id 팔로잉 id는 어디서 insert 되는건가요 ?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
상태 관리에 대해 질문드립니다 !
항상 좋은 강의 감사드립니다. 현재 nodebird 프로젝트를 redux 대신 react-query과 recoil을 사용하여 리팩토링 해보았습니다. 제로초님의 경우 react-query와 redux-toolkit으로 나눠 client state와 server state를 분리하셨다고 들었습니다. 질문1. 저는 유저정보의 경우 상위 컴포넌트에서 server state 에서 받아온 후 client state의 넣어놓고 계속 사용하는 방식으로 진행해보았습니다. 유저정보(server state)를 처음 호출할 때 redux(저는 recoil 사용하였습니다)를 통하여 비동기로 받아와서 사용하는 것과 react-query로 server state(react-query)를 받아온 후 client state(recoil)에 넣어주는 것 어떤것이 맞는걸까요? server state는 모두 react-query에 맡긴다고 생각하면 후자가 맞다고 생각하여 이렇게 진행하였는데 비효율적인 것 같다는 생각이 들었습니다... 질문2. server state와 client state를 나누시는 이유는 위에 상황처럼 사용하기 위해서 인가요? 아니면 다른 이유가 있으신가요? 저는 컴포넌트에서 user 정보가 필요할 때마다 react-query로 호출하면 낭비가 일어나는 것 같아서 client state 용 recoil을 사용하였는데 이렇게 사용하는 것이 맞는지 의문이 들어서 질문드립니다 ! 감사합니다 !