월 17,600원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
profile.js 에서 loadUser 라우터 에러...
profile.js 로 수업이 시작되길래 시험삼아 강의전 한번 프로필 페이지로 이동했는데 저렇게 정보가 안뜨고 에러가 나서 확인해봤습니다. 그런데 저 에러문구는 분명 이전 강의에서 다른 사용자의 정보를 불러오는 수업때 작성한 loadUser(GET/user/1) 라우터의 에러문구인데 왜 뜬금없이 GET/user/follower 혹은 GET/user/followings 요청을 했을 때 저 에러가 나오는 건지 모르겠네요 ㅠ profile.js 에서 LOAD_USER_REQUEST 를 디스패치 하지도 않았고 네트워크로 확인해봐도 follower, followings 만 요청했다고 나와있네요 GET/user/1 라우터까지 같이 실행된것같은 모양새로 Followings 와 Followers 의 id 만 불러오길래 그 라우터 자체를 지웠더니 그제서야 제대로 작동하네요 이유가 뭘까요 (GET/user/1 라우터 지우기 전) // profile.js // 프로필 페이지에 접근할 때마다 렌더되어 다음이 실행 const Profile = () => { const dispatch = useDispatch(); const { me } = useSelector((state) => state.user); // 프로필 페이지 profile.js useEffect(() => { // 메인페이지가 아닌 다른 페이지에서도 새로고침 할 때 로그인 정보를 가져와야 로그인인 상태의 프로필이 유지된다. dispatch({ type: LOAD_FOLLOWERS_REQUEST, }) dispatch({ type: LOAD_FOLLOWINGS_REQUEST, }) }, []) // 사용자(userInfo) 정보 (Jinny2) 가져오기: GET /user/1 => LOAD_USER router.get('/:userId', async (req, res, next) => { ... // 코드 간추림 { model: User, as: 'Followings', attributes: ['id'], }, { model: User, as: 'Followers', attributes: ['id'], }, ... else { res.status(404).json('존재하지 않는 사용자입니다.'); } (GET/user/1 라우터 지운 후)
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
댓글 작성이 안됩니다, 어디를 확인하면 좋을까요?
버튼을 눌러서 댓글 제출을 했는데 ADD_POST_REQUESET 가 뜨네요, 어디 코드가 잘못된걸까요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
VScode에서 prettier, eslint 설정시 에러
강의 대로 따라가다라 에러가나서 구글링해서 제가 임의로 수정하였습니다. eslint 사용해본 경험이 없어 제가 임의로 한 설정에 의구심이 드네요 eslint-config-prettier, eslint-plugin-prettier 설치하고 .eslintrc { "parser": "@babel/eslint-parser", "parserOptions" :{ "ecmaVersion" : 2020, "sourceType" : "module", "ecmaFeatures" : { "jsx" : true } }, "env": { "browser" : true, "node" : true, "es6" : true }, "extends" : [ "airbnb", "plugin:prettier/recommended" ], "plugins" : [ "import", "react-hooks" ], "rules": { "jsx-a11y/label-has-associated-control": "off", "jsx-a11y/anchor-is-valid": "off", "no-console": "off", "no-underscore-dangle": "off", "react/forbid-prop-types": "off", "react/jsx-filename-extension": "off", "react/jsx-one-expression-per-line": "off", "react/jsx-wrap-multilines": "off", "react/no-array-index-key": "off", "object-curly-newline": "off", "linebreak-style": "off", "arrow-body-style": "off", "comma-dangle": "off", "consistent-return": "off", "operator-linebreak": "off", "react/function-component-definition" : "off", "jsx-a11y/no-noninteractive-element-interactions" : "off", "jsx-a11y/click-events-have-key-events" : "off" } } PostImages.js 에서 img 태그에 onClick={onZoom} 하는 부분에서 jsx-a11y 에러가 나서 그냥 off 했는데 상관없는지, eslintrc 설정은 문제없는지 봐주시면 감사하겠습니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
liked 부분 조건문
아래처럼 liked는 id부분과 다르게 { } 중괄호를 쓰면 에러가 나는 건가요? liked ? <HeartTwoTone twoToneColor="red" key="heart" onClick={onToggleLike}/> : <HeartOutlined key="heart" onClick={onToggleLike}/>, <MessageOutlined key="dm"/>, <Popover key="more" content={( <Button.Group> {id && post.User.id === id ? <> <Button>수정</Button> <Button type="danger">삭제</Button> </> : <Button>신고</Button>} </Button.Group> )}>
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
next.js dynamic import 질문
안녕햐세요 제로초님 현재 상황이 storage 관련 유틸함수를 따로 파일로 만들어 utils/storage에 모듈화를 해놧습니다. 허나 import를 하게 되면 window.is not defined 또는 localStorage is not defined라고 에러가 뜨는데 제가 하고싶은건 해당 import를 csr일때 호출시키고싶은데 검색해보니 dynamic import라는게 있는데 이건 컴포넌트 파일만 해당되는것같더라구요 const storage = dynamic(() => import("@utils/storage"), { ssr: false, }); 위와같이 사용을 해보았지만 아래와 같은 에러가 뜨고 있습니다.(ts 사용중입니다.)형식의 인수는 'DynamicOptions<{}> | Loader<{}>' 형식의 매개 변수에 할당될 수 없습니다. 형식에 없지만 '{ default: ComponentType<{}>; }' 형식에서 필수입니다.ts(2345) 현재 useEffect에서 const storage = require('@utils/storage)" 이렇게 불러오는 코드를 짜서 에러를 해결하긴 했지만 올바른 방법은 아닌거같아 질문드립니다. 컴포넌트가 아닌 모듈을 CSR일때 import 할수 있는 방법이 있는지 궁금합니다!
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
[#타입스크립트-노드버드] 해당 강좌를 타입스크립트 버전으로 작성하려고 하는데, 강의영상이랑 코드내용이 많이 차이 있을까요?
안녕하세요! 리액트-노드버드를 타입스크립트 버전으로 해보려고 하는데요, 타입스크립트로 진행하는데 강좌의 코드화면을 참고하는데 어려움이 있을까요,, 타입스크립트 버전의 넥스트 설치방법을 보니 npx create-next-app@latest --ts 라고 하는데요. @latest 부분을 @9라고 하면 될까요? 타입스크립트로 진행하는데 해당 강좌를 어떻게 활용하면 좋을지 의견을 듣고 싶습니다!
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
경고메세지 질문있습니다.
처음 게시글을 작성하면 사진과 같은 경고 메세지가 나옵니다. postCard.js에 있는 propTypes에는 id가 number로 되어있는데 왜 이런 메세지가 나오는지 궁금합니다.
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
seo를 위한 google search console 질문이 있습니다.
안녕하세요 제로초님 리액트 노드 버드 강의를 통해 배운 내용을 통해 응용하여 개인 프로젝트를 진행해서 알려주신 배포 방법으로 배포까지 진행하였습니다. seo 최적화를 위해 이것저것 알아보다가 google search console을 알게 되었는데 혹시 제로초님께서 사용해보셨을까 해서 질문을 작성하게 되었습니다. 제 사이트를 등록하려고 2번 방법인 meta 태그를 통해 소유권을 확인하려고 _app.tsx에서 next의 Head를 이용해서 그 안에 주어진 meta 태그를 추가하였습니다. 하지만 아래와 같이 계속 실패가 나와서 혹시 방법을 아시나요? ㅠㅠ 제가 의심가는 부분은 next의 Head를 이용해 meta태그를 추가하면 실제 페이지 개발자 도구에서는 html의 head 태그가 아닌 body태그 안에 script NEXT_DATA라는 부분 안에 meta 태그가 들어있어서 그런건가 싶긴 합니다 ㅠ
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
리덕스 실제 구현시 에러발생
<../reducers/index.js> [const initialState = { user: { isLoggedIn: false, user: null, signUpData: {}, loginData: {}, }, post: { mainPosts: [], }, }; export const loginAction = (data) => { return { type: 'LOG_IN', data, }; }; export const logoutAction = (data) => { return { type: 'LOG_OUT', }; }; //action creator 함수 -> 데이터값을 액션하는 함수 //액션 자체는 객체라서 값을 수정못하니 모든케이스마다 객체를 만들어줘야하니 함수로 만들어서 //그때 그때 만드는 것으로한다!! // const CHANGE_NICKNAME = (data) => { // return { // type: 'CHANGE_NICKNAME', // data, // }; // }; // CHANGE_NICKNAME('boogicho'); // store.dispatch(changeNickname('mighty tak')); //이전상태와 액션을 실행했을 떄, 다음상태 두가지를 다 실행하는 함수! const rootReducer = (state = initialState, action) => { switch (action.type) { 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, }, }; } }; export default rootReducer; <..store/configureStore.js> import { createWrapper } from 'next-redux-wrapper'; import { createStore } from 'redux'; import reducer from '../reducers'; const configureStore = () => { const store = createStore(reducer); return store; }; const wrapper = createWrapper(configureStore, { debug: process.env.NODE_ENV === 'development', }); export default wrapper; <터미널 에러 표시> ❯ npm run dev > react-nodebird-front@1.0.0 dev > next Browserslist: caniuse-lite is outdated. Please run: npx browserslist@latest --update-db ready - started server on http://localhost:3000 error - ./store/configureStore.js Attempted import error: 'createWrapper' is not exported from 'next-redux-wrapper'. 처음엔 단순히 리덕스버전 문제인줄 알앗는데, 구글에서도 검색해도 잘 나오지 않고, 문제 이해가 어려워서 질문올립니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
json() 에 시퀄라이즈 데이터..?
제가 제대로 이해를 못했는지, 질문이 이상할 수 있습니다 json 에 대해 빠삭하지 않아서.. 시퀄라이즈에서 보내는 데이터는 json 이 아니라고 하셨는데요, 그럼 이전부터 res.json(fullUserWithoutPassword) 한 이유를 모르겠어요 구글링 해보니 json() 은 “json 데이터”를 자바스크립트 객체로 변환해준다고 되어있는데 “fullUserWithoutPassword” 는 시퀄라이즈에서 보내는 데이터 아니었나요? json()이 시퀄라이즈 데이터도 js 객체로 변환시켜주나요? 헷갈리네요 ㅠ
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
질문이있습니다.!!
안녕하세요 강의 잘 보고 있습니다. 다름이아니라 질문이 두개 있습니다. 1.쿠키관련 2. 게시물 제거 실무 관련 예를 들어 댓글쓸때 댓글 info에 들어갈 내 nickname 을 가지고 오기 위해 comment user 간 join을 하는데 user.id 값을 쿠키에 저장해놓는거 처럼 nickname도 쿠키에 저장해서 join안하고 그냥 가지고와서 쓰는 형식은 어떤가요? 강의에선 쿠키에 데이터를 저장했을떄 사용자의 비율에 따른 과부하가 걸린다고 하셨는데 보통 쿠키 값으로 몇개까지 괜찮을까요? 동시 접속자 비율 and 프로젝트에 따라 다르겠지만 대게 어떤 값들을 쿠키에 저장하는지 궁금합니다. 또 궁금한게 게시물 같은거 지울때 실무에서는 게시물(메인글) 테이블, 댓글 테이블, 이미지 테이블가 있다고 하면 보통은 테이블 설계할때 삭제시 DB에서 바로 날리는게 아니라 예를 들어 글, 댓글, 이미지 에 각각 삭제여부의 칼럼하나 만들어서 Y==있음, N ==삭제됨 생성시 Y 제거시 글, 제거된 post.id 와 같은 comment, image 의 삭제여부를 N 글 조회시 where = Y면 select 또한 이 부분은 프로젝트의 정책의 따라 다르겠지만 예를들어 삭제여부가 N인 데이터들은 100일동안 N의 형태인경우 DB에서 날리는 쿼리 보통 이런 느낌이나요? 실무에서는
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
쿠키가 전달이 안돼요
공지사항에 올려주신 next-redux-wrapper 7버전으로 작성했습니다, 근데 쿠키가 백엔드로 전달이 안되네요 로그아웃으로 인식되는건 여전하고 cookie 가 아닌 cookies 에 담겨있는데 무슨의미일까요 export const getServerSideProps = wrapper.getServerSideProps( // 서버쪽에서 실행되면 context.req 라는 것이 존재한다. (store) => async ({ req }) => { const cookie = req ? req.headers.cookie : ''; axios.defaults.headers.Cookie = ''; if (req && cookie) { axios.defaults.headers.Cookies = cookie; } store.dispatch({ type: LOAD_MY_INFO_REQUEST, }); store.dispatch({ type: LOAD_POSTS_REQUEST, }); // REQUEST 가 saga 에서 SUCCESS 될 때까지 기다려준다 store.dispatch(END); await store.sagaTask.toPromise(); // configureStore.js 의 store.sagaTask } );
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
TypeError: Cannot read properties of undefined (reading 'dispatch')
질문 없이 알아서 찾고싶은데 생각처럼 진짜 안되네요... 현재 강의 6분30초에서 멈춰있습니다. 에러에 dispatch 가 안된다 하여 또 보니 store 가 undefined 라고 뜹니다. 밑에 저와 똑같은 에러가 발생한 분은 오타셨고 저도 열씸히 오타인지 찾아봤지만 제대로 작성한것 같습니다 configureStore 도 잘 import 했는데 뭐가 문제일까요 서버도 다 재시작해봤는데 안돼용 // index.js import React, { useEffect } from "react"; import { useDispatch, useSelector } from "react-redux"; import AppLayout from "../components/AppLayout"; import PostForm from "../components/PostForm"; import PostCard from "../components/PostCard"; import { LOAD_POSTS_REQUEST } from "../reducers/post"; import { LOAD_USER_REQUEST } from "../reducers/user"; import wrapper from "../store/configureStore"; const Home = () => { const dispatch = useDispatch(); const { me } = useSelector((state) => state.user); const { mainPosts, hasMorePosts, loadPostsLoading, retweetError } = useSelector((state) => state.post); // 자신의 게시글을 리트윗하려 할 때 useEffect(() => { if(retweetError) { alert(retweetError); } }, [retweetError]); useEffect(() => { // 현재 어느 스크롤 위치에 있는지 판단 function onScroll() { if ( window.scrollY + document.documentElement.clientHeight > document.documentElement.scrollHeight - 300 ) { if (hasMorePosts && !loadPostsLoading) { // 로딩이 되고 있을 동안 loadPostsLoading 은 true 이므로 해당 코드 실행되지 x // 로딩이 끝나고 나서 loadPostsLoading 가 false 가 되면 그때 실행 const lastId = mainPosts[mainPosts.length - 1]?.id // 마지막 게시글 id // && 대신 optional chaining 활용 // => 게시물이 하나도 없을 경우 undefined.id 에러가 발생할 수 있으므로 ?. 로 방지 dispatch({ type: LOAD_POSTS_REQUEST, // 스크롤 다 내리면 다음 더미데이터 로딩해라 lastId, // 마지막 게시글 id }) } } } window.addEventListener("scroll", onScroll); return () => { window.removeEventListener("scroll", onScroll); }; }, [hasMorePosts, loadPostsLoading, mainPosts]); return ( <AppLayout> {me && <PostForm />} {/* 로그인이 된 상태에서만 포스트를 작성할 수 있음 */} {mainPosts.map((post) => ( <PostCard key={post.id} post={post} /> ))} </AppLayout> ); }; export const getServerSideProps = wrapper.getServerSideProps((context) => { context.store.dispatch({ type: LOAD_USER_REQUEST, }); context.store.dispatch({ type: LOAD_POSTS_REQUEST, }); // console.log(context); }); export default Home; // configureStore.js import { createWrapper } from "next-redux-wrapper"; import { applyMiddleware, compose, createStore } from "redux"; import { composeWithDevTools } from 'redux-devtools-extension'; import createSagaMiddleware from 'redux-saga'; import reducer from "../reducers"; import rootSaga from '../sagas'; const loggerMiddleware = ({ dispatch, getState }) => (next) => (action) => { console.log(action) // action 을 실행하기 전에 console.log() 를 한번 실행해주는 미들웨어 return next(action); } const configureStore = () => { const sagaMiddleware = createSagaMiddleware() // const middlewares = [sagaMiddleware]; const middlewares = [sagaMiddleware, loggerMiddleware]; // enhancer: 리덕스의 기능이 확장된 것 const enhancer = process.env.NODE_ENV === 'production' ? compose(applyMiddleware(...middlewares)) // 배포용 : composeWithDevTools(applyMiddleware(...middlewares)) // 개발용 const store = createStore(reducer, enhancer); store.sagaTask = sagaMiddleware.run(rootSaga); return store; // state , reducer 를 포함한 것 }; // next-redux-wrapper 로 만듦 const wrapper = createWrapper(configureStore, { debug: process.env.NODE_ENV === "development", }); export default wrapper;
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
where 넣은 이유
where 을 안넣었더니 처음 10개의 게시글들만 계속 반복되서 생기는데, 그 이유가 뭔지 궁금해요 // routers > posts.js const posts = await Post.findAll({ where,
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
addImages 를 넣은 이유
post.addImages(images) 를 한 이유를 정확히 모르겠어요, Image 테이블에 create() 으로 이미지를 넣고 그걸 이미 post 테이블에서 Image 테이블을 include 하고 있는거 아닌가요?? 다른 예로 댓글 라우터에서는 post.addComments() 를 따로 하지 않았어서.. 쓰고 쓰지않고의 차이를 잘 모르겠네요
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
소셜 로그인과 관련하여 passport.js 질문입니다.
우선 강의 정말 잘 듣고 있습니다 ! 로그인과 관련하여 소셜 로그인 연동을 도전해보라고 하셔서 Google과 Kakao의 경우에는 성공하였습니다. Naver의 경우 로그인 정보를 받는 과정에서 필수 입력 사항임에도 불구하고 누락하여 등록이 가능하도록 설계가 되어있어 passport.authenticate에서 failureRedirect로 처리하였습니다. router.get('/naver/callback', passport.authenticate('naver', { // GET /user/naver/callback failureRedirect: `https://nid.naver.com/oauth2.0/authorize?response_type=code&client_id=${process.env.NAVER_CLIENT_ID}&state=STATE_STRING&redirect_uri=http://localhost:3065/user/naver/callback&auth_type=reprompt`, failureMessage: '필수 제공 항목을 반드시 입력하셔야합니다.' }), async (req, res, next) => { return res.status(200).redirect('http://localhost:3060'); }); 문제는 정보 입력 시 취소 버튼을 누를 때에도 같은 failureRedirect로 처리되어버립니다. (취소버튼 클릭시에는 메인 화면으로 보내고자 합니다.) 여기서 질문을 드리자면 failureRedirect를 각각 다른 url로 보낼 수 있는 방법이 있나요? 없다면 passport.authenticate를 custom 해야할 것 같은데 구글링을 통한 custom을 보고 이런식으로 만들어봤는데 작동하지 않아서 질문드립니다 ㅠㅠ router.get('/naver/callback', function(req, res, next) {passport.authenticate('naver', (err, user, info) => { if (err) { return console.log('err', req) }; req.login(user, () => { return res.redirect('http://localhost:3060') })(req, res, next); })}); 에러는 GET /user/naver/callback?error=access_denied&error_description=Canceled+By+User&state=STATE_STRING - - ms - - 이렇게 나오는데 console에 찍히지는 않습니다. callback 으로 넘어오는 값을 받는 방법이 혹시 있을까요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
TypeError : Cannot read property type of undefined
reducer 파일에서 swtich(action.type) 부분에 property가 정의되어 있지 않다는 에러가 자꾸 뜹니다... ----------------------------------------------------------------------------------------------------------------------------- 혹시나 action객체가 비어있나 싶어서 위에 이미지 처럼 rootReducer 안에다가 로그 찍어보니까 아래처럼 나오더라고요. 분명 action객체 안에 type이 정의되어있는데 왜 undefined가 나오는지 의문입니다. 에러가 발생한 reducers/index.js의 코드는 아래와 같습니다. import { HYDRATE } from 'next-redux-wrapper'; import { combineReducers } from 'redux'; import user from './user'; import post from './post'; // 1. state를 바꾸고 싶을 때마다 action을 만들고, // 3. aync action creater // // 2. 매번 state값을 바꿔줄 수도 있는 부분은 // 함수로 뽑아내서 동적데이터 집어넣어서 처리할 수 있음! // (이전상태, 액션) => 다음 상태 const rootReducer = combineReducers({ index: (state = {}, action) => { switch (action.type) { case HYDRATE: console.log('HYDRATE', action); return { ...state, ...action.payload }; default: return state; } }, user, post, }); export default rootReducer;
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
500 Internal Server Error
500 에러와 함께 Internal Server Error 가 뜹니다. 해당 경고도 뜨는데 단순 코드에러 일까요? Internal Server Error 라 콘솔도 못봐서 어디가 문제일지 질문드립니다...
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
nodebird 강의 redux 대신 mobx 써서해보고있는데
이런 경고가뜨는데 왜 뜨는걸까요? RootStoreProvider 쪽에서 문제가 되는것같아서 찾아봤는데 RootStoreProvider에서 경고가 뜨는데 저게 찾아보니 스택오버플로에 hooks 쓸때 16버전 부터는 useEffect() 로 감싸라는것같은데 서버사이드렌더링은 클라이언트에서 화면그리기전에 먼저 store 세팅하는거라 어떻게 해야될까요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 질문이 있습니다.
다름이 아니라 질문이 있습니다. 쳅터5 백엔드 게시글 부분 하고있는데 console 창에 @@redux-saga/SAGA_ACTION << 에 대한 console 정보 확인하는 설정? 구축 강의 어디부분쯤에 나와있을까요? 제가 놓친건가요 ? 강의 어디부분에 나온다는거 찝기 힘드시면 키워드 알려주시면 제가 그 부분만 구글링해서 적용하겠습니다.