월 17,600원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
eslint의 extends쪽 질문이 있습니다.
안녕하세요 현영님. 에러는 해결을 한 상태인데 궁금한 점이 생겨 질문드립니다. const fs = require('fs'); 백쪽에 fs모듈을 쓰면서 부터 시작됐는데, 강의 마지막 부분에 와서 프론트 서버를 새로고침하니 저런 에러가 발생했습니다. 스택오버플로우를 찾아보니, https://github.com/vercel/next.js/issues/7755 프론트쪽에 next.config.js라는 폴더를 생성한 후 module.exports = { webpack: (config, { isServer }) => { // Fixes npm packages that depend on `fs` module if (!isServer) { config.node = { fs: 'empty' } } return config } }이런식으로 넣어주라는데, 프론트 서버에서는 fs모듈에 관련된 작업을 한 게 없어 여러가지 테스트를 하다가, 프론트 폴더의 .eslintrc파일에 extends를 airbnb가 아닌 주석처리된 부분으로 바꾸니 또 해결이 되었습니다.(다른 프론트나 백쪽의 코드는 수정이 없었습니다)1. 혹시 extends랑 상관이 있는건지? 아니면 그냥 일시적인 에러라고 생각을 하면 될까요?2. 관련이 없다고 하면 혹시나 알 수 없는 에러가 나올 경우 현영님의 경우 어떻게 대처를 하시나요? (에러가 생길 때마다 기록을 해두는 편인데 생각보다 찾기가 힘든? 에러들이 종종 나오더라고요.. 짬의 차인지..?)++ 어제 업데이트 하신 정보들 확인했습니다. 바로바로 업데이트 해주셔서 불편함이 없네요 감사합니다
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
ssr을 하면 안될 때가 있을까요?
일반적으로 마이페이지 같이 seo가 필요하지 않은 경우 굳이 ssr을 하지 않는 것 같습니다. 그런데 seo가 목적이 아니라 csr의 단점인 흰 화면이 깜박였다가 나오는게 싫어서 ssr을 하지는 않을까요? nextjs에서 seo, 캐싱과 같은 목적 없이, 단순히 사용자에게 더 나은 경험을 주고자 페이지마다 getServerSideProps 등으로 ssr을 했을 때 문제점이 있는지 궁금합니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요. git clone 했을시 작동이 궁금합니다.
front, back 인스턴스 2개이고 가져오는 repo 는 front, back 이 통합된 1개인데, repo 에서 가져올때, ubuntu 가 실행된 폴더기준으로, 그 폴더부터 clone 하는 것인가요? 예) front 에서 ssh 접속 -> 깃 clone -> 깃 repo 에 front 폴더 부터 하위 폴더까지 복사
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
reducer user -> post 데이터 수정하기
reducer(user, post) post 에서 이루어지는 dispatch에서user의 state 값을 변화시킬 수 있나요? 예를 들의 게시글의 길이를 다른 파일의(order) dispatch 이루어지면 post state의 postLength 길이를 변화주고 싶은데 다른 파일의 state여서 건들 수가 없나요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
pdf view 기능 구축
안녕하세요 제로초님, 기존 s3 연결 및 파일 업로드 알려주신 부분은 문제없이 잘 진행하였는데, 추가로 하고싶은 기능이 있어 질문드립니다. s3에 업로드시에 aws에서 제공하는 location 주소를 iframe tag에 연결하면 바로 다운로드가 되더라구요. 그래서 해결 방법을 찾았는데, aws meta 데이터 형식을 content-Type : 'application/json' 으로 수정하면 다운로드가 되지 않더라구요. 이 방법은 제가 수동으로 진행한것이고, 혹시 upload시에 저렇게 셋팅할수 있는 방법이 있을까요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
react-redux 버전 관련 질문입니다.
리덕스로 로그인을 구현한 후 로그인 되지않는 문제가 생겼었습니다. dispatch 함수가 실행되지만 rootReducer에서 LOG_IN 부분이 실행이 안됐습니다(console.log로 확인) 그래서 useDispatch를 불러온 부분이 문제라고 생각해, react-redux버전을 강의에 맞게 7로 바꾸니 문제가 해결됐습니다. 왜 이런 문제가 발생한건가요..? 추가로 이 강의를 다 들은 후, react-redux를 8버전으로 올리고 싶으면 어디서 변경내역을 확인해야 하나요..?
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
프론트, 백엔드 서로 다른 도메인 간 쿠키 공유
안녕하세요. 현재 프론트는 mysiteurl.site 라는 도메인으로 firebase 호스팅을 하고 있고 백엔드는 mysiteurl.shop 으로 다른 도메인으로 정할 예정인데요. 강의에선 프론트와 백엔드가 동일하게 nodebird.com 이 들어가 있고 route53에서 서로 다른 ip를 가르키게 했는데 제가 하려고 하는 방식에도 쿠키가 전달이 가능할까요? (nginx proxy_set_header 세팅은 동일하다는 가정)
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
getServerSideProps에서 jwt 토큰사용방법
로그인을 하고 나면 jwt 토큰을 받아 로컬스토리지에 저장합니다. 그리고 getServerSideProps에서 유저 정보 조회 api에 토큰을 담아 보내어 유효한 토큰인지 확인하고,맞다면 유저를 로그인 상태로 유지하려 하는데,getServerSideProps는 서버에서 실행되는 메서드라 브라우저 api를 사용 못하는 것으로 알고 있습니다. 그렇다면 로컬스토리지에 있는 jwt토큰을 가져오지 못할텐데 어떻게 jwt토큰이 유효한지 확인하고 로그인 상태를 유지할 수 있을까요? 굳이 getServerSideProps에서 확인하는 이유는 로그인 상태에 따라 GNB헤더 안에 있는 메뉴가 달라지는 경우도 있고,로그인 상태가 아니면 redirect 해주어야 하는 페이지가 있기 때문입니다.
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요.
안녕하세요. 강의 내용과는 무관하게 여쭤보고 싶은게 있어서 질문 드립니다. 아무래도 강의도 좋지만 강의 후에 혼자 토이 프로젝트를 해봐야 기억이 더 잘 남을거 같아 수강을 완료한 후에 한번 해보려고 합니다. 그런데 slack 강의도 한번 들어볼 생각인데 이 강의 까지 하고 그냥 바로 해보는게 나을까요? 아니면 슬랙 강의 후에 이것저것 해보는걸 추천해주시나요?? 저보다 많이 아셔서 좀 더 좋은 길을 볼수 있으실거 같아 질문드립니다. 감사합니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
_app 에서 getInitialProps 사용
강의에서 배운 것을 응용해서 토이 프로젝트를 하고 있습니다. 현재 인증은 jwt 토큰으로 하고 있고,유저의 로그인 상태를 유지하기 위해 매번 api로 내 정보를 가져와서 리덕스에 유저 상태를 반영하려 합니다. 이걸 react에서 했다면 App.tsx에서 했겠지만 nextjs에선 _app.tsx에서 하는 것이 맞다고 판단하여getInitialProps 안에서 관련 action을 dispatch 하였습니다. MyApp.getInitialProps = wrapper.getInitialAppProps((store) => async (context: AppContext) => { store.dispatch(checkUserStart()); store.dispatch(END); await (store as SagaStore).sagaTask?.toPromise(); //... return { pageProps }; }); 1. 이렇게 app에서 getInitialProps을 사용하면 nextjs의 특정 최적화 기술이 적용이 안되어 권장하지 않는다는 것을 보았는데,차라리 유저 상태를 조회하는 HOC, HOF를 만들어 모든 페이지에 감싸줄지 고민입니다.혹은 다른 좋은 방법이 있을지 궁금합니다. 2. 위 코드에서 getInitialProps 안에 있는 코드 그대로 다른 페이지의 getServerSideProps에서 사용하면 제대로 action을 dispatch하는데,_app의 getInitialProps안에서는 작동하지 않습니다. 혹시 관련 문제에 대해 여쭤봐도 될까요? 3. _app의 MyAPP 컴포넌트 안에서 useEffect를 써도 괜찮은지 궁금합니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
함수 종료 질문입니다.
1개의 함수에 2개의 dispatch 가 있고 첫 번째 dispatch 에서 api 통신에 오류가 나면 함수를 return과 같이 멈추게 하고 싶은데 어떻게 해야 하나요?
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
현영님 질문이 있습니다.
에러 발생시점: faker.js 사용 후입니다 에러 최대한 제 손으로 잡으려 했는데 이번 거는 찾기가 조금 힘들고 감이 안오네요.. 처음 npm run을 했을 때 화면에는 정상적으로 더미데이터가 들어오면서 에러도 같이 뜨는 상태입니다(에러를 끄면 컨텐츠와 댓글 등등의 기능 동작은 되네요) 간단하게 힌트만 주셔도 직접 해결 해보겠습니다 감사합니다 코드: import {faker} from '@faker-js/faker'; export const initialState = { mainPosts: [], imagePaths: [], addPostLoading: false, addPostDone: false, addPostFailure: null, removePostLoading: false, removePostDone: false, removePostFailure: null, addCommentLoading:false, addCommentDone: false, addCommentFailure: null } initialState.mainPosts = initialState.mainPosts.concat( Array(20).fill().map(() => ({ id: shortId.generate(), User:{ id:shortId.generate(), nickname: faker.company.companyName() }, content: faker.lorem.paragraph(), Images: [{ id: shortId.generate(), }], Comments:[{ User:{ id: shortId.generate(), nickname: faker.name.findName() }, content: faker.vehicle.vehicle() }] })) ) 에러: ++ 에러에 HYDRATE관련된 에러가 있어 우선은 리듀서폴더에 있는 index.js같이 첨부합니다 import { HYDRATE } from "next-redux-wrapper" import { combineReducers} from 'redux' import user from './user' import post from './post' 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 만들기
쿠키 공유 에러
안녕하세요. 어제부터 삽질중인데 이전 중복된 질문에서 말씀해주신 application에서 쿠키 삭제 후 다시 로그인도 해보고 saga, reducer, cookie 설정 부분, credential 다 살펴봤지만 해결이 되지 않아 질문드립니다ㅠㅠ 처음 로그인시 로그인 성공 후 새로고침을 하면 "로그인하지 않은 사용자만 접근이 가능합니다" alert 창과 함께 아래와 같은 에러메세지가 출력되는데 쿠키는 잘 받아와지고 있어서 어디서 오류가 난 건지 모르겠습니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
LoginForm 컴포넌트에서 props로 setIsLoggedIn을 받아올 때 질문입니다!
LoginForm 컴포넌트에서 AppLayout 컴포넌트의 props로 setIsLoggedIn을 받아올 때 밑에 빨간 줄이 뜨네요! 위 경고(?) 메시지가 떠서 구글 찾아보면서 propTypes 적용해봤는데setIsLoggedIn이 isLoggedIn의 상태를 바꾸는 함수라 생각하여 아래와 같이 작성해봤는데 맞는지 여쭤보고 싶습니다! 빠르게 보시라고 LoginForm 컴포넌트 내용 전체 올릴게요! import React, { useState, useCallback } from 'react'; import propTypes from 'prop-types'; import { Form, Input, Button } from 'antd'; import Link from 'next/link'; import styled from 'styled-components'; const ButtonWrapper = styled.div ` margin-top: 10px; `; // 백틱 안에는 CSS 적듯이 적으면 됨 // div 태그이면서 css가 적용된 ButtonWrapper 컴포넌트 사용 가능 const LoginForm = ({ setIsLoggedIn }) => { const [id, setId] = useState(''); const [password, setPassword] = useState(''); const onChangeId = useCallback((e) => { setId(e.target.value); }, []); const onChangePassword = useCallback((e) => { setPassword(e.target.value); }, []); // 배열 안에 id, password 작성하지 않으면 초기값을 기억하기 때문에 넣어줘야 함 const onSubmitForm = useCallback(() => { console.log(id, password); setIsLoggedIn(true); }, [id, password]); return ( <Form onFinish={onSubmitForm}> <div> <label htmlFor="user-id">아이디</label> <br /> <Input name="user-id" value={id} onChange={onChangeId} /> </div> <div> <label htmlFor="user-password">비밀번호</label> <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> </Form> ); }; LoginForm.propTypes = { setIsLoggedIn: propTypes.func.isRequired, }; LoginForm.defaultProps = { setIsLoggedIn: () => console.warn('setIsLoggedIn 값이 없습니다') }; export default LoginForm;
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
redux-devtools-extension 관련문제입니다.
안녕하세요 현영님. 다름이 아니라 이번 강의에서 리덕스 익스텐션을 설치한 후에 처음에 화면이 나오다가 갑자기 저렇게 아무런 화면이 뜨지않고 회색으로 되길래 뭐가 문젠인지 'redux-devtools-extension not working' 이런식으로 스택오버플로우에서 보고 여러가지 설정들을 건드렸는데 해결이 되지않아 질문 남깁니다. 설치는 다 했고 extension 관련 에러는 없어 이유를 모르겠네요. (생각보다 쉬운 문제인가요...ㅠ) 제 configureStore.js 입니다. import {createWrapper} from 'next-redux-wrapper' import {compose, createStore ,applyMiddleware} from 'redux'; import {composeWithDevTools} from 'redux-devtools-extension' import reducer from '../reducers' const configureStore = () => { const middleware = []; const enhancer = process.env.NODE_ENV === 'production' ? compose(applyMiddleware(...middleware)) : composeWithDevTools(applyMiddleware(...middleware)); const store = createStore(reducer, enhancer); store.dispatch({ type: 'CHANGE_NICKNAME', data: 'boogichi' }) return store; }; const wrapper = createWrapper(configureStore,{ debug: process.env.NODE_ENV === 'development' }) export default wrapper;
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
user.addFollowers 질문이요
router.patch("/:userId/follow", isLoggedIn, async (req, res, next) => { // PATCH /user/1/follow try { const user = await User.findOne({ where: { id: req.params.userId } }); if (!user) { res.status(403).send("없는 사람을 팔로우하려고 하시네요?"); } await user.addFollowers(req.user.id); res.status(200).json({ UserId: parseInt(req.params.userId, 10) }); } catch (error) { console.error(error); next(error); } }); user.addFollowers(req.user.id)에서 as가 Followers고 foreignKey가 FollowingId니깐FollowingId에는 req.user.id가 들어가고 FollowerId에는 userId가 들어갈 줄 알았는데 반대로 들어가 있더군요. 동작이 어떻게 되는 지 모르겠어요.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
user,post - comment 관계질문
제로초님 nodebird에서 comment 관계에서는 user.hasmany(comment) post.hasmany(comment) 이렇게 관계를 설정하였는데 이는 아무 유저가 comment 작성이 가능하게 하기위해 이렇게 하였고 상품구매 리뷰에서는 상품을 구매한 사람에 한해서만 comment를 작성해야만 하니 comment는 user, product의 belongsToMany로 관계 설정을 해줘야 한다고 판단했는데 맞을까요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
saga 비동기 처리에서 페이지 이동
saga에서 비동기 통신으로 성공 또는 실패로 나뉘는데 try_catch에서 통신이 성공하면 어디에서 페이지를 이동하는 코드를 작성해야 하나요? 1. component dispatch({ type: UPLOAD_REQUEST data: index }) // Router.push("/upload") 2. saga function* addItem(action) { try { const result = yield call(api) yield put({ type: UPLOAD_SUCCESS data: result.data }) // Router.push("/upload") } catch (err) { yield put({ type: UPLOAD_FAUILRE error : err.response.data }) } } API 통신에 경고문(alert) 창도 성공 또는 실패에 따라 유동적으로 달고 싶은데 조건을 어떻게 주고 어느 파일에 다는지 궁금합니다.
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
aws 콘솔 리전 변경 질문입니다.
배포한 사이트가 좀 느린것 같아서 아마존을 살펴보니 제가 aws 콘솔 리전을 캘리포니아로 해놓고 인스턴스를 생성한것 같더라구요... 이부분을 서울로 변경하려하는데 AMI 복사를 이용하여 서울로 변경하는 방법의 글을 발견해서 해당 블로그 글을 참고해서 수정하려고 합니다. https://ndb796.tistory.com/257 이렇게 수정해도 문제 없을지 궁금하여 여쭤봅니다. 그리고 콘솔 리전의 위치가 서울로 해야 조금 더 빠르다고 했는데, 그 속도가 미미한 정도인가요? 만약 크으으게 차이가 없으면 캘리포니아 그대로 둘까 싶기도 해서요..!
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
createStore대신 configureStore사용시 에러
안녕하세요! 강의듣는중 에러해결을 못하고 있어서 문의드립니다. 에러가 나서보니 createStore대신 configureStore를 사용하라고 되어있어서 구글링으로 문법을 찾아보고, configureStore로 바꾸어 주었습니다. configureStore는 '{reducer: rootReducer}' 이렇게 객체로 적어줘야 한다고 해서 객체로 바꿨는데 에러가 나고, `{reducer}`로 해봐도 에러가 납니다., 데브툴즈가 내장?되어있다고 해서 빼보기도 하고, 다시 넣어도 보고.. 어떻게 작성해도 계속 에러가 나네요.. 참고로 버전은 아래의 버전들을 사용중입니다. "@reduxjs/toolkit": "^1.8.1", "antd": "^4.19.5", "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": "^8.0.1", "redux": "^4.2.0", "redux-devtools-extension": "^2.13.9", configureStore.js 파일 코드 ( 주석속의 방법으로도 해봐도 에러 발생) configureStore.js 파일의 에러메세지 https://www.inflearn.com/questions/518406 위에 링크질문하신 분과 원인?이 `configureStore`를 사용한다는 점에서 유사한듯 한데, 에러 내용은 다르네요