월 17,600원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
새로고침 시 hydrate 상태 초기화 문제 질문 있습니다.
import { END } from 'redux-saga'; import axios from 'axios'; import { wrapper } from '../store/configureStore'; . . (중간 코드 생략) . . export const getServerSideProps = wrapper.getServerSideProps((store) => async ({ req }) => { console.log('getServerSideProps req: ', req); const cookie = req ? req.headers.cookie : ''; axios.defaults.headers.Cookie = ''; if (req && cookie) { axios.defaults.headers.Cookie = cookie; } store.dispatch({ type: LOAD_MY_INFO_REQUEST, }); store.dispatch(END); await store.sagaTask.toPromise(); }); 처음에 로그인 시 cookie 도 잘 받아오며 SSR도 잘 동작합니다. @@INIT state는 초기값이고 hydrate를 통해 이후 state를 보면 로그인 정보도 잘 담겨 있습니다. 그런데 새로고침 시 hydrate 을 보면 state가 초기화가 되어있고 me 의 정보에 로그인된 user의 정보가 담겨있지 않습니다. cookie는 잘 가지고 있다고 나와 있는데 무엇이 문제인지 ㅍ파악이 되지 않습니다. 흐름을 봐도 문제가 없는 것 같은데.. 해결을 위해 힌트를 얻을 수 있는 방법이 있을까요?제가 확인해봐야 할 것이 무엇인지 알고 싶습니다. 1. 로그인 전 2. 로그인 후 3. 로그인 후 새로고침 시 4. cookie 보유 여부 (브라우저 localhost: 3000)
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
getServerSideProps 사용관련 질문 있습니다.
먼저 현재 배포는 하지 않았고 npm run dev를 통해 개발을 진행하고 있습니다. 브라우저의 도매인은 현재 localhost 3000 이고, server의 도메인은 localhost: 3065입니다. ! 질문: next.js에 Server Side Rendering을 적용하기 위해선 api 서버가 배포가 되어있어야 하나요? 그게 아니라면 아래의 방식에서 발생하는 에러의 원인을 찾아봤지만 파악하기가 어렵습니다... 조언 부탁드립니다. reducer에 index.js 수정 뒤 pages/index.js에서 사용법을 참고하여 하단에 아래의 코드를 추가했습니다. import { END } from 'redux-saga'; export const getServerSideProps = wrapper.getServerSideProps((store) => async ({ req }) => { console.log('getServerSideProps req: ', req); store.dispatch({ type: LOAD_MY_INFO_REQUEST, }); store.dispatch(END); await store.sagaTask.toPromise(); 그런데 아래와 같은 에러가 발생합니다. TypeError: Cannot read properties of undefined (reading 'getServerSideProps') 개발자 console network
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
rootReducer 질문 있습니다.
reducer를 확장 가능하게 구조를 바꾸셨는데 이 방법에 대해 뭐라고 구글링을 해야 상세하게 볼 수 있는지 궁금합니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
문자열 배열 출력하기
제로초님 다운로드 a href={} 를 누르면 이미지가 다운로드 되도록 만들어 보았습니다. 이런 식으로 되어 있습니다. 지금은 a 태그 링크를 누르면 동시에 모두 다 다운로드 되는 방법을 몰라서 [0] 이런 식으로 코드를 작성하고 첫 번쨰 배열에 있는 링크 주소에 이미지 값만 다운로드 하고 있습니다. 다운로드 버튼을 누르면 모두 다 다운로드 동시에 되고 싶은데 몇 시간동안 삽질 해 봤는데 어떻게 잡고 가야 할 지 모르겠습니다. 동시에 다운로드 하는 게 불가능할까요? 배열만큼 [0] [1] 버튼을 생성 해 놓고 각 값에 따라 다운로드 되도록 만들어야 할까요? <button><a href={(value.imageUrl || '').split(',')[0]</button> value.imageUrl[0] 0: "https://www.zeroch.com/images/1" 1: "https://www.zeroch.com/images/23" 2: "" value.imageUrl[1] 0: "https://www.zeroch.com/images/5" 1: "" value.imageUrl[2] 0: "https://www.zeroch.com/images/24" 1: ""
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
이미지 슬라이드 구현 하기 또 다른 방법
안녕하세요 이미지가 1~2장일때와 그 이상일때로 나누어서 1장: 기본 출력 2장 : 기본 출력에 버튼으로 이동 3장 이상 : 4분할 기본 출력 + 모달 + 이미지 슬라이드 이렇게 구현해 보았습니다. http://skilnote-for-react.co.kr/wm/myshortcut/react-nodebird/28
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
서버에서 build 질문
리눅스 환경 즉 서버에서 npm run build를 할때 대문자를 소문자로 바꿔야하는 이슈가 있다면 처음 개발할때부터 소문자로 파일명을 지어서 프로젝트를 만들면 되는걸까요? 아니면 npm run build를 해놓고 서버에서 git pull만 한다면 상관은 없을 거같은데 빌드 커밋을 해줘야 하는 문제가 있는것 같고 제로초님은 현업에서 1. 파일명을 소문자로 지어서 개발한다, 2. build된 결과물을 push하고 pull 받는다. 어떠한 방식으로 하시는지 궁금합니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
Unhandled Runtime Error 질문입니다
아래는 에러 문구입니다.'REACT_APP_SC_ATTR'로 검색시 확인되지 않습니다1. package.json을 지우고 npm install을 다시 하는게 최선일까요?2. 제 폴더 내에서는 검색되지 않는 내용인데, 왜 이런 에러가 나는지도 궁금합니다. Unhandled Runtime Error TypeError: Cannot read properties of undefined (reading 'REACT_APP_SC_ATTR') Call Stack eval node_modules\styled-components\dist\styled-components.browser.esm.js (1:1130) Module../node_modules/styled-components/dist/styled-components.browser.esm.js file:///D:/2021/NodeBirdSNS/front/.next/static/chunks/pages/index.js (9943:1) Module.options.factory /_next/static/chunks/webpack.js (633:31) __webpack_require__ file:///D:/2021/NodeBirdSNS/front/.next/static/chunks/webpack.js (37:33) fn /_next/static/chunks/webpack.js (302:21) eval webpack-internal:///./components/AppLayout.js (13:75) Module../components/AppLayout.js file:///D:/2021/NodeBirdSNS/front/.next/static/chunks/pages/index.js (1568:1) Module.options.factory /_next/static/chunks/webpack.js (633:31) __webpack_require__ file:///D:/2021/NodeBirdSNS/front/.next/static/chunks/webpack.js (37:33) fn /_next/static/chunks/webpack.js (302:21) eval webpack-internal:///./pages/index.js (4:79) Module../pages/index.js file:///D:/2021/NodeBirdSNS/front/.next/static/chunks/pages/index.js (1623:1) Module.options.factory /_next/static/chunks/webpack.js (633:31) __webpack_require__ file:///D:/2021/NodeBirdSNS/front/.next/static/chunks/webpack.js (37:33) fn /_next/static/chunks/webpack.js (302:21) eval node_modules\next\dist\build\webpack\loaders\next-client-pages-loader.js?page=%2F&absolutePagePath=D%3A%5C2021%5CNodeBirdSNS%5Cfront%5Cpages%5Cindex.js! (5:15) eval node_modules\next\dist\client\route-loader.js (236:50)
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
마이그레이션 관련 질문입니다~
안녕하세요~ 배포 후에 DB변경을 위해 마이그레이션을 사용해야 할 것 같아서 질문드립니다~ 공부해본 바로는 table 추가와 column 추가는 마이그레이션으로 진행하고 일대다, 다대다 관계 등은 직접 model폴더내 파일에서 변경해야 하는 걸로 알고 있는데 맞나 싶어서요~ 그리고 개발모드에서 back 서버에서 마이그레이션을 진행하고 배포한 서버에서 실행하려면 ec2 서버에 접속하여 mysql root 접속 후에 마이그레이션을 별도로 실행(npx sequelize-cli db:migrate)해야 하는지 궁금함니다~ 감사합니다~^^
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
테이블 관련
해당 강의 여러번 돌려봤지만 npx sequelize db:create 과 관련된 부분이 나오지 않습니다. 그래서 config.json 설정후 npx sequelize db:create 해봤는데 mysql workbench 에 노드버드 테이블 부분에 아무것도 뜨지 않습니다.. 원래 이런건지 아직 안만들어서 그런건지 잘 모르겠습니다..
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
saga 사이드이펙트 질문
1. 예를 들어 로그인이나 로그아웃을하고 로컬스토리지를 삭제하는 로직을 리듀서는 무조건 순수함수여야 하니 saga에서 yield call로 작성하면 될까요? 2. 로컬스토리지로 jwt 토큰을 저장하였을 때 만료기한을 설정할수 없다고 알고있는데 그렇다면 토큰의 만료기한 정보만을 가지고 지우는 등의 제어를 하는건가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
테이블 구조 설정 질문 있습니다.
강좌에서는 hashtag 테이블이 따로 있는데 제가 현재 진행중인 프로젝트에는 게시글을 작성(create)할때 카테고리 설정을 따로 해주어 게시글을 설정하려 합니다. 이후 게시글 목록을 불러올 때는 title 제목 앞에 카테고리가 붙고상단 바에서 카테고리를 클릭하면 해당 카테고리 글들만 불러올수 있게 하려합니다. 그러면 여기서 카테고리 테이블(model)을 따로 만들어야 할지 아니면 게시글 table(model)에 담아야 할지 고민입니다. 조언 주실수 있을까요? [질문 정리] 1. 게시글 작성 시 제목, 카테고리, 글작성 목록이 있음- 각각 title, category, content 테이블을 따로 만들어야 하나요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
로그인을 눌러도 프로필창으로 넘어가지 않아 질문드립니다.
AppLayout.js LoginForm.js 의도대로 잘 작성된 것 같은데 로그인버튼을 클릭해도 프로필로 넘어가지 않아서 뭐가 문제인지 감도 잡히지 않아 질문 올려봅니다..
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
swr... 저장소...
안녕하세요 제로초님 swr이 redux를 대체할수 있다는 것은 swr로 상태관리를 할수 있다는 것인가요? swr이 redux와같이 중앙저장소가 있어서 상태값을 따로 저장해두는 건지... 궁금합니다.useSWR(key, fetcher); 에서 key값이 같을때 같은 데이터를 불러오는 부분이 이해가 안가는데key값은 api url 주소가 될것이고 a 컴포넌트와 b 컴포넌트가 같은 key(url)로 useSWR를 사용한다 하였을 때 결국 a와 b 컴포넌트는 각각 api call을 해주는것 같고 이렇게되면 매번 서버와 통신을 하게되면서 낭비일거같은데 문제가 되지 않는지.. 상태를 저장한다는 개념 보다는 그때 그때 api 통신한다로 이해하면 될까요? 2. redux의 dispatch와 같이 useSWR로 api 콜 시점을 정할수도 있을까요 ? 3. 실무에서 next.js가 아닌 react.js로 프로젝트를 진행한다면 redux(saga), swr, react-query 중에 제로초님이라면 어느것을 선택하시나요?redux를 사용하는것보다 react-query를 사용하는게 요즘 트렌드일까요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
Post 정보에서 태그 정보를 같이 받아오려고 합니다..
안녕하세요 제로초님 노드버드 강좌를 보면서 열심히 공부 중이며 노드버드에서 배운 부분을 조금씩 응용해보려고 하는 중에 질문이 있어서 이렇게 글을 쓰게 되었습니다. 우선 수업과 동일하게 Post table, Tag table이 M:N 다대다 관계를 설정하여 PostTag 라는 테이블이 생성되었습니다. 이것을 이용해서 게시글(Post) 정보를 한번에 불러올때 각 게시글마다 존재하는 태그들도 같이 받아오고 싶습니다. 제가 시도한 방법으로는 findAll 에서 include를 이용해서 받아오려고 했지만 실패했습니다. 제가 설정한 관계와는 맞지 않는 코드의 형태로 에러 메세지가 나오는 것 같습니다. sql 쿼리문의 조인에 대해 지식이 부족하다고 생각하여 조인 부분을 찾아보고 공부를 해도 sequelize 로 어떤식으로 풀어가야 할 지 모르겠습니다 ㅠㅠ 먼저 테이블 정보 입니다. 제가 작성한 코드 부분입니다. 마지막으로 에러메세지 입니다
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
고차함수와 loadFollowers 관련 질문 드립니당
제가 이해한게 맞나 싶어서 질문 드립니다 여기 onCancel 에서 고차함수를 쓴 이유가, 고차함수를 쓰지 않고서 바로 id 를 인자로 넣어주면,<Card onClick={() => onCancel(item.id)} >처럼 되어서 최적화가 안 되어서 그런 건가요? 두 번째 질문은,만일 인스타처럼 다른 사용자의 팔로잉과 팔로워를 보려고 한다면, 해당 사용자의 id를 axios.get() 요청을 보낼 때 params 로 넣어서 조회하는 방법으로도 하면 되는 걸까요? 지금 방법으로는 로그인한 본인의 팔로잉과 팔로워만 불러오는 것만 가능한 것 같아서 여쭤봅니다!
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
백엔드 다중 DB 연결 질문입니다.
쇼핑몰 클론 코딩중에 다중 데이터베이스 연결 방법이 궁금해 질문 드립니다. 하나의 데이터베이스는 Customer용 데이터베이스, 다른 하나의 데이터베이스는 Seller용 데이터 베이스를 나눠서 관리를 해보려 하는데, 실무에서는 위와같이 데이터베이스를 분리해서 사용을 하는지, 아니면 하나의 데이터베이스에서 모두 작동하게 하는지 궁금합니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
게시글 리스트 클릭 시 해당 게시글 불러오기 질문
해당 게시글 리스트 중 하나를 클릭 할 때 정보를 가져와 읽을 수 있는 페이지를 하나 만들었습니다 그런데 여기서 클릭 시 읽기 페이지로 가려면 다이나믹 라우팅을 적용해야 할 지 아니면 다른 방법이 있는건지 조금 헷갈립니다. 현재 백엔드는 구성이 되어 있지않고 더미 데이터만 있는 상황입니다. 그래도 다이나믹 라우팅을 구현할 수 있나요...? 만일 두개다 가능하다면 구글링을 어떻게하고 참고해야 할지 조언 주실수 있나요... <PostWrapper> {mainPosts.length === 0 && <h3>존재하는 게시글이 없습니다.</h3>} {mainPosts.map((data, index) => { return ( <> <Link href="/postFrom"> <div> <ul> <li> <Num>{index + 1}</Num> <Title> <span>[{data.category}]</span> <p>{data.title}</p> </Title> <Count>조회수: {data.count}</Count> <Id>작성자: {data.User.nickname}</Id> </li> </ul> </div> </Link> </> ); })} </PostWrapper> 현재 게시글 리스트 코드입니다..
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
mainPosts in reducer 질문 있습니다
// reducer export const initialState = { mainPosts: [], // 메인 게시글들 imagePaths: [], // 이미지 url hasMorePosts: true, // 가져오려는 시도 loadPostsLoading: false, loadPostsDone: false, loadPostsError: null, addPostLoading: false, addPostDone: false, addPostError: null, }; case LOAD_POSTS_SUCCESS: return { ...state, loadPostsLoading: false, loadPostsDone: true, mainPosts: state.mainPosts.concat(action.data), hasMorePosts: state.mainPosts.length < 50 ? true : false, }; function loadPostsAPI(data) { return axios.get(`http://localhost:3000/posts`, data); } // saga function* loadPosts(action) { try { // const result = yield call(loadPostsAPI, action.data); // console.log('result', result); yield delay(1000); yield put({ type: LOAD_POSTS_SUCCESS, data: action.data, }); } catch (err) { yield put({ type: LOAD_POSTS_FAILURE, data: err.response.data, }); } } LoadPostRequest 시 전체 게시글을 불러오는데 생성된 글이 없습니다. 그럼 mainPost: []가 빈 배열이어야 하는데 ...console.log에 찍힌 결과로는 아래와 같이 undefined가 찍혀 나옵니다. LOAD_POSTS_REQUEST_MainPosts: [undefined] 떄문에 배열에 값이 들어있는 것으로 인식되어 이렇게 에러가 나옵니다. loadPosts 시 데이터가 없을 땐 빈배열로 하고싶은데 도무지 파악이 되질 않습니다. 일부러 immer를 도입하지 않고 불변성을 지키려하는데 혹시 제가 불변성 관련하여 잘 못하고 있는것인지 조언 부탁드립니다.. PS. 게시글을 추가 시 ... mainPosts: dummyPost(action.data).concat(state.mainPosts), ADD_POST_REQUEST 부분은 불변성을 잘 지킨 것인지도 궁금합니다. 질문이 서툴러 죄송합니다. 좀 더 학습해서 질문 수준도 올릴수 있도록 하겠습니다... 참고 github 링크: https://github.com/ko7452/e-Library
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
post 작성하고 백엔드에서 res.status(201).json(fullPost) 하면 프론트로 데이터가 안옵니다.
안녕하세요 선생님. 제가 지금 post를 작성해서 데이터를 백엔드에 보내고 다시 만들어진 데이터를 res.status(201).json(fullPost) 통해서 프론트로 데이터를 받아올려고 하는데 데이터가 받아오질 않습니다. 에러 지금 에러가 아마도 result 값이 'undefined' 여서 45번째줄 result.data 하면 data 라는 프로퍼티 가 없기 때문에 발생한 에러 같습니다. 하지만 백엔드에서는 모든게 정상적으로 처리가 되는걸 확인을 했습니다. 데이터베이스에서 post 데이터가 잘 생성되는것도 확인되고 fullPost 콘솔찍어보면 값도 잘 나오는것을 확인했습니다 . 근데 res.status(201).json(fullPost) 이렇게 프런트로 데이터를 보내도 fullPost가 보내지질 않습니다. ㅜㅜ 몇시간째 헤메고 있습니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 제로초님 _app.js에서 설정 도중 알 수 없는 에러가 떠서 질문드립니다
구글링도 해보고 찾아보는 중에 있는데 이러한 에러가 떠서 더이상 진행이 되고있지 않습니다 ㅜㅜ Antd/dist/antd.css 임포트 했을때부터 발생한 문제입니다 무슨문제 일까요 ㅜ Browserslist: caniuse-lite is outdated. Please run: npx browserslist@latest --update-db ready - started server on http://localhost:3000 Unknown error from PostCSS plugin. Your current PostCSS version is 7.0.27, but autoprefixer uses 6.0.23. Perhaps this is the source of the error below. error - ./node_modules/antd/dist/antd.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-5-1!./node_modules/next/dist/compiled/postcss-loader??__nextjs_postcss!./node_modules/antd/dist/antd.css) BrowserslistError: Unknown browser query `dead` at Array.reduce (<anonymous>) event - build page: /next/dist/pages/_error wait - compiling... Unknown error from PostCSS plugin. Your current PostCSS version is 7.0.27, but autoprefixer uses 6.0.23. Perhaps this is the source of the error below. error - ./node_modules/antd/dist/antd.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-5-1!./node_modules/next/dist/compiled/postcss-loader??__nextjs_postcss!./node_modules/antd/dist/antd.css) BrowserslistError: Unknown browser query `dead` at Array.reduce (<anonymous>) Error: Cannot find module 'C:\Users\moonj\OneDrive\문서\test-project\practice\react-nodebird\front\.next\build-manifest.json' Require stack: - C:\Users\moonj\OneDrive\문서\test-project\practice\react-nodebird\front\node_modules\next\dist\next-server\server\load-components.js - C:\Users\moonj\OneDrive\문서\test-project\practice\react-nodebird\front\node_modules\next\dist\next-server\server\api-utils.js - C:\Users\moonj\OneDrive\문서\test-project\practice\react-nodebird\front\node_modules\next\dist\next-server\server\next-server.js - C:\Users\moonj\OneDrive\문서\test-project\practice\react-nodebird\front\node_modules\next\dist\server\next.js - C:\Users\moonj\OneDrive\문서\test-project\practice\react-nodebird\front\node_modules\next\dist\server\lib\start-server.js - C:\Users\moonj\OneDrive\문서\test-project\practice\react-nodebird\front\node_modules\next\dist\cli\next-dev.js - C:\Users\moonj\OneDrive\문서\test-project\practice\react-nodebird\front\node_modules\next\dist\bin\next at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15) at Function.Module._load (internal/modules/cjs/loader.js:725:27) at Module.require (internal/modules/cjs/loader.js:952:19) at require (internal/modules/cjs/helpers.js:88:18) at loadComponents (C:\Users\moonj\OneDrive\문서\test-project\practice\react-nodebird\front\node_modules\next\dist\next-server\server\load-components.js:1:886) at DevServer.findPageComponents (C:\Users\moonj\OneDrive\문서\test-project\practice\react-nodebird\front\node_modules\next\dist\next-server\server\next-server.js:57:296) at DevServer.renderErrorToHTML (C:\Users\moonj\OneDrive\문서\test-project\practice\react-nodebird\front\node_modules\next\dist\next-server\server\next-server.js:108:120) at DevServer.renderErrorToHTML (C:\Users\moonj\OneDrive\문서\test-project\practice\react-nodebird\front\node_modules\next\dist\server\next-dev-server.js:34:974) at processTicksAndRejections (internal/process/task_queues.js:93:5) at async DevServer.render (C:\Users\moonj\OneDrive\문서\test-project\practice\react-nodebird\front\node_modules\next\dist\next-server\server\next-server.js:55:236) { code: 'MODULE_NOT_FOUND', requireStack: [ 'C:\\Users\\moonj\\OneDrive\\문서\\test-project\\practice\\react-nodebird\\front\\node_modules\\next\\dist\\next-server\\server\\load-components.js', 'C:\\Users\\moonj\\OneDrive\\문서\\test-project\\practice\\react-nodebird\\front\\node_modules\\next\\dist\\next-server\\server\\api-utils.js', 'C:\\Users\\moonj\\OneDrive\\문서\\test-project\\practice\\react-nodebird\\front\\node_modules\\next\\dist\\next-server\\server\\next-server.js', 'C:\\Users\\moonj\\OneDrive\\문서\\test-project\\practice\\react-nodebird\\front\\node_modules\\next\\dist\\server\\next.js', 'C:\\Users\\moonj\\OneDrive\\문서\\test-project\\practice\\react-nodebird\\front\\node_modules\\next\\dist\\server\\lib\\start-server.js', 'C:\\Users\\moonj\\OneDrive\\문서\\test-project\\practice\\react-nodebird\\front\\node_modules\\next\\dist\\cli\\next-dev.js', 'C:\\Users\\moonj\\OneDrive\\문서\\test-project\\practice\\react-nodebird\\front\\node_modules\\next\\dist\\bin\\next' ] } Unknown error from PostCSS plugin. Your current PostCSS version is 7.0.27, but autoprefixer uses 6.0.23. Perhaps this is the source of the error below. error - ./node_modules/antd/dist/antd.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-5-1!./node_modules/next/dist/compiled/postcss-loader??__nextjs_postcss!./node_modules/antd/dist/antd.css) BrowserslistError: Unknown browser query `dead` at Array.reduce (<anonymous>)