25%
66,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
리덕스 미들웨어로 비동기 관리 질문
안녕하세요 제로초님 전역상태 관련해서 궁금한점이 생겨 질문드립니다.1. 예를들어 게시글 생성페이지와 게시글수정페이지가 {title: '' content: ''} 와같이 같은 폼양식이면 같은 전역상태를 사용하는 것인가요? 그렇다면 제로초라는 게시물 수정페이지에 들어가면 게시글아이디를 통해 비동기로 서버로부터 게시물 데이터를 받고 전역상태에 값을 셋팅해준다음 화면에 뿌려주고페이지를 벗어난다면 게시글이라는 전역상태를 모두 빈값으로 초기화를 하여 게시글 생성페이지에 진입시 모두 빈값으로 화면에 뿌려주는 방식인건가요?? 헷갈립니다..2. 다른 질문이긴하지만 컴포넌트 파일에서 컴포넌트 바깥에 데이터를 두게된다면(ex: 상태의 초기값이나 상수) 성능에 안좋은건가요??
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
await user.addFollowers(req.user.id)에서 궁금한점이 있습니다.
user.addFollowers(req.user.id)를 했을경우 데이터 베이스를 보니깐 followedId에는req.user.id가 , followingId에는 userId가 들어가 있는걸 확인했는데요. 저희가 데이터베이스 구조를 짤때 as를 Followers 해주고 foreignkey를 FollowingId로 해줬잖아요? 그러면 user.addFollowers(req.user.id)를 했을경우 as: Followers 의 foreignkey가 FollowingId니깐 req.user.id가 FollowingId에 들어가는게 맞는거 아닌가요?? 왜 반대로 됬는지 이해가 안됩니다 ㅠㅠ
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
CredentialsError: Missing credentials in config 질문 있습니다
sudo su 관리자 모드에서 vim .env 통해 S3_ACCESS_KEY_ID와 S3_SECRET_ACCESS_KEY를 추가하고 wq를 통해 저장까지 했습니다. 그런데 CredentialsError: Missing credentials in config 에러가 생깁니다. 그래서 제가 확인해본 것이 pakage.json과 .env를 다시 봤는데 문제가 없습니다.. 뭐가 문제인지 조언 부탁드립니다.. 질문이 많아서 죄송합니다..(계속해서 헤매는데 못 찾겠습니다..)
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
게시글 업로드 문제(401) But.. 로그인 되었음(cookie 보유 확인)
알려주신대로 npm start 통해 로그인 문제는 해결이 되었습니다. 로그인은 되어 있습니다 그런데 게시글 업로드 시 401 에러(로그인이 필요하다)가 생깁니다. <확인결과> network - post - Cookie 탭에 connenct.sid(Cookie) 보유 확인 Aplication/Cookies에 connect.sid 확인 ---------------------------------------------- 무엇이 문제인지 파악이 되지 않습니다 . 혹시나 문제는 없었지만 getServerSideProps 문제인건가요? /front/pages/index.js export const getServerSideProps = wrapper.getServerSideProps((store) => async ({ req }) => { const cookie = req ? req.headers.cookie : ''; // req가 있다면 cookie에 요청에 담겨진 cookie를 할당한다. axios.defaults.headers.Cookie = ''; // 요청이 들어올 때마다 초기화 시켜주는 것이다. 여기는 클라이언트 서버에서 실행되므로 이전 요청이 남아있을 수 있기 때문이다 if (req && cookie) { axios.defaults.headers.Cookie = cookie; // 서버일때랑 cookie를 써서 요청을 보낼 때만 headers에 cookie를 넣어준다 } store.dispatch({ type: LOAD_MY_INFO_REQUEST, // user }); store.dispatch({ type: LOAD_POSTS_REQUEST, // post }); store.dispatch(END); await store.sagaTask.toPromise(); // store/configureStore.js > store.sagaTask }); // 이 부분이 Home 보다 먼저 실행됨
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
getServerSideProps 문제 질문있습니다.
cookie가 있는걸로 봐서는 프론트에서 인식을 못하고 있는것 같다고 하셔서 살펴보는데 찾지를 못하겠습니다.. 일단 pages/index,js의 getServerSideProps 는 문제가 없어 보입니다. ```javascript export const getServerSideProps = wrapper.getServerSideProps((store) => async ({ req }) => { const cookie = req ? req.headers.cookie : ''; // req가 있다면 cookie에 요청에 담겨진 cookie를 할당한다. axios.defaults.headers.Cookie = ''; // 요청이 들어올 때마다 초기화 시켜주는 것이다. 여기는 클라이언트 서버에서 실행되므로 이전 요청이 남아있을 수 있기 때문이다 if (req && cookie) { axios.defaults.headers.Cookie = cookie; // 서버일때랑 cookie를 써서 요청을 보낼 때만 headers에 cookie를 넣어준다 } store.dispatch({ type: LOAD_MY_INFO_REQUEST, // user }); store.dispatch({ type: LOAD_POSTS_REQUEST, // post }); store.dispatch(END); await store.sagaTask.toPromise(); // store/configureStore.js > store.sagaTask }); // 이 부분이 Home 보다 먼저 실행됨 ``` 그리고 reducer 또한 문제가 없어 보입니다. case LOAD_MY_INFO_REQUEST: draft.loadMyInfoLoading = true; draft.loadMyInfoDone = false; draft.loadMyInfoError = null; break; case LOAD_MY_INFO_SUCCESS: draft.loadMyInfoLoading = false; draft.me = action.data; draft.loadMyInfoDone = true; break; case LOAD_MY_INFO_FAILURE: draft.loadMyInfoLoading = false; draft.loadMyInfoError = action.error; break; 이어서 saga user 입니다. function loadMyInfoAPI() { return axios.get('/user'); // GET(Browser) } function* loadMyInfo() { try { const result = yield call(loadMyInfoAPI); console.log(result); yield put({ type: LOAD_MY_INFO_SUCCESS, data: result.data, }); } catch (err) { console.error(err); yield put({ type: LOAD_MY_INFO_FAILURE, error: err.response.data, }); } } routes/user 입니다. router.get('/:userId', async (req, res, next) => { try { const fullUserWithoutPassword = await User.findOne({ where: { id: req.params.userId }, attributes: { exclude: ['password'], // 원하는 정보만 가져오거나 가져오지 않겠다 / 현재: pw 빼고 다 가져오겠다 }, include: [ { model: Post, attributes: ['id'], }, { model: User, as: 'Followers', attributes: ['id'], }, { model: User, as: 'Followings', attributes: ['id'], }, ], // 가져올 정보중 뺄 것들 }); if (fullUserWithoutPassword) { const data = fullUserWithoutPassword.toJSON(); data.Posts = data.Posts.length; // 개인정보 침해 예방 data.Followers = data.Followers.length; data.Followings = data.Followings.length; res.status(200).json(data); } else { res.status(404).send('존재하지 않는 사용자입니다.'); } } catch (err) { console.error(err); next(err); } }); 추가로 middleware 입니다. exports.isLoggedIn = (req, res, next) => { if (req.isAuthenticated()) { next(); // 비어있으면 다음 미들웨어로 간다 } else { res.status(401).send('로그인이 필요합니다.'); } }; exports.isNotLoggedIn = (req, res, next) => { if (!req.isAuthenticated()) { next(); // 비어있으면 다음 미들웨어로 간다 } else { res.status(401).send('로그인하지 않은 사용자만 접근이 가능합니다.'); } }; 살펴본 결과 로직은 문제가 없어보이는데 혹시 front에서 getServerSideProps 문법이 강의와 다른데 라이브러리 사이트를 보고 적용했던겁니다. 제가 너무 헤매고 있어서 보시고 조언 주신다면 감사하겠습니다... network 401
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
context.req에 대해서 질문이 있습니다.
안녕하세요. 이번 강의에서 설명하신게 이해가 잘 되지 않아서 질문드립니다. 위 코드가 강의에서 설명하신 코드인데요(콘솔로그 부분 제외) 1. getServerSideProps가 프론트 서버에서 실행되는 코드라고 하셨는데, 이는 back 디렉토리에 백엔드 서버 코드의 (req,res,next)=>{ ... return res.status(200).send('ok') } 처럼 프론트 서버의 특정 라우터로 요청이 갔을 때 실행되는 부분이라고 이해했는데 맞나요..? 2. 그래서 이것을 확인해보기 위해서 req.url과 req.method를 콘솔로 찍어봤는데 첫 새로고침 때는 위와 같이 나와서 생각한게 맞구나 싶었는데, 다른 페이지를 갔다가 오면 위처럼 req.url이 다르더라고요.. 무슨 차이가 있는건지 궁금합니다... 3. getServerSideProps 안에 작성된 코드가 프론트 서버에서 실행되는 코드라면 context.req 는 항상 true가 아닌가요..? 요청이 왔을 때만 서버가 실행된다고 생각했고, const {cookie} = context.req.headers; axios.defaults.headers.Cookie = ""; if (cookie) { axios.defaults.headers.Cookie = cookie; } 이렇게 코드를 작성해도 되는게 아닌가 싶어서 질문드립니다. 혹시 context.req 가 true가 아닐 경우가 있으면 간단한 예를 들어주실 수 있을까요?? 4. 마지막으로 프론트 서버는 어디서 온건가요...? .next - server 에 있는게 프론트 서버인가요??? 해당 서버는 pages의 파일들을 수정하면 알아서 설정되는 것인지도 궁금합니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
로그인 질문(로그인하지 않은 사용자만 접근이 가능합니다)
위와 같이 로그인을 하지 않은 상태입니다. 그런데 로그인을 하면 저렇게 401 에러가 뜹니다. 뭐가 잘못됬는지 감이안와서 헤매고 있는데 조언좀 주세요 ㅠ 401 에러 이외엔 에러 메세지가 따로 없습니다. ```javascript // routes/middlewares.js exports.isLoggedIn = (req, res, next) => { if (req.isAuthenticated()) { next(); // 비어있으면 다음 미들웨어로 간다 } else { res.status(401).send('로그인이 필요합니다.'); } }; exports.isNotLoggedIn = (req, res, next) => { if (!req.isAuthenticated()) { next(); // 비어있으면 다음 미들웨어로 간다 } else { res.status(401).send('로그인하지 않은 사용자만 접근이 가능합니다.'); } }; ``` ```javascript routes/user.js router.post('/login', isNotLoggedIn, (req, res, next) => { passport.authenticate('local', (err, user, info) => { if (err) { console.error(err); next(err); } if (info) { return res.status(401).send(info.reason); // client로 응답을 보내줌, 401: 허가되지 않음, 403: 금지 } return req.login(user, async (loginErr) => { if (loginErr) { console.error(loginErr); return next(loginErr); } const fullUserWithoutPassword = await User.findOne({ where: { id: user.id }, attributes: { exclude: ['password'], // 원하는 정보만 가져오거나 가져오지 않겠다 / 현재: pw 빼고 다 가져오겠다 }, include: [ { model: Post, }, { model: User, as: 'Followers', }, { model: User, as: 'Followings', }, ], // 가져올 정보중 뺄 것들 }); return res.status(200).json(fullUserWithoutPassword); }); })(req, res, next); }); // 로그인 전략 실행 ``` ```javascript // front/components/AppLayout.js <LoggedFixed>{me ? <UserProfile /> : <LoginForm />}</LoggedFixed> ```
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
어제까지 잘되다가 갑자기 mysql에서 에러가 터지네요 ㅜㅜ
아무리 찾아봐도 모르겠어서 올립니다 ㅜㅜ 서버실행중 ConnectionRefusedError [SequelizeConnectionRefusedError]: connect ECONNREFUSED 127.0.0.1:3306 해당 에러떠서 mysql이 start안됬나싶어 터미널에서 mysql.server start해봤는데 ERROR! The server quit without updating PID file (/opt/homebrew/var/mysql/LeeJaeHoonui-MacBookAir.local.pid). 위와 같은 에러가 뜹니다. 또한 mysql -uroot했을 시 ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2)가 뜹니다. 어제까지 잘되다가 갑자기 왜이러는 걸까요 ㅜㅜ mac m1입니다 해결방법 알 수 있을까요?
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
댓글작성 도중 해결안되는 에러가 있어 여쭤봅니다...
댓글 등록하고 버튼 눌렀을때 User 값이 안들어오는 것처럼 에러가 뜨는데 그 상태에서 바로 새로고침하면 값이 들어가있네요 분명 통신과정에서 올바르게 include한 전체 값을 들고오는게 맞는데 뭐가 문제인걸까요....?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
route 53 질문있습니다.
위와 같이 도메인 이름을 하면 제로초님걸로 들어가지는데 따로 제가 이름을 다르게 만들어야되나요? 아래는 현재 레코드 입니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
db 관련 질문입니다
안녕하세요 제로초님 Product를 Cart에 추가할 때 Cart에 기존 아이템 존재시 product의 totalPrice와 quantity만 증가시켜주고 아닐시 새로운 product를 만들도록 해보았습니다. ㄴ 우선 Cart에 처음으로 product를 추가하고 이후 Cart에 기존 아이템 존재시 product의 totalPrice와 quantity만 증가시켜주는 것 까지는 정상적으로 db에 저장하는 것 까지는 되었습니다. 에러 문제는 그 해당하는 상품의 다른 사이즈를 추가할 때부터 발생했습니다. 한 테이블에 ProductId와 UserId 가 같은 값을 가진 상태로 또 추가가 되니 발생하는 오류인 것 같았습니다. 찾아본해결 https://github.com/sequelize/sequelize/issues/3220 에 따라서 unique: false 를 추가해서 다시 db에 저장해보니 정상적으로 추가가 되긴 했습니다. 다만 기존 Product의 같은 사이즈를 또 추가할 때 기존 데이터에서 quantity와 totalPrice가 증가되어 저장하는게 아니라 새로운 데이터가 만들어지면서 추가되어버립니다 이럴 때 ProductId와 UserId를 한 테이블에 여러 번 쓰면서 quantity와 totalPrice만 증가시켜서 저장할 수는 없는지 궁긍합니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
회원가입 시 서버 에러와 mysql DB 관련 에러
회원가입 시 서버쪽에서 에러가 납니다. database_production이 존재하지 않는다해서 database_production을 생성했더니 이번엔 파라미터가 undefind 입니다. database_production이 어디서 나온건지 당황스럽고;; react-nodebird DB를 쓰고 싶은데 어찌해야될지 모르겠습니다. 강의를 보다보니 저도 같은 에러가 생겨서 DROP DATABASE `react-nodebiird`를 했고 이후 다시 npx sequelize db:create를 했습니다. 그런데 아래와 같이 보니 table이 없습니다.. 조언좀 주세요 ㅠ
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
팔로잉 목록과 팔로워 목록을 가져올 때 궁금한게 있습니다.
안녕하세요. 로그인 시 include로 팔로잉 목록과 팔로우 목록을 가져올 때 attributes로 id만을 가져오도록 했음에도 위처럼 가장 아랫줄에 있는 Follow 도 같이 가져와지는데, N:M 관계에서 설정하면서 생긴 모델(테이블)을 통째로 항상 같이 가져오게 되는건가요...?? 해당 정보가 필요한 상황이 아님에도 가져오게 되는건 데이터 낭비가 아닌가라고 생각이 들어서요... 이번 강의에서 프로필 페이지에서 별도로 팔로워 유저와 팔로잉 유저를 요청한 것도 데이터의 낭비를 막기위함이라고 생각했어서요.. 혹시 Follow 데이터를 가져오지 않을 수 있으면 알려주시면 감사하겠습니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
인스턴스 연결 에러
ssh -i "nodebird-access-key.pem" ubuntu@ec2-3-38-96-64.ap-northeast-2.compute.amazonaws.com 해당 명령어를 그대로 복사 뒤 access-key가 있는 위치에서 실행했지만 ``` Warning: Identity file nodebird-access-key.pem not accessible: No such file or directory. ubuntu@ec2-3-38-96-64.ap-northeast-2.compute.amazonaws.com: Permission denied (publickey). ``` 위와 같은 에러가 생깁니다. 구글링을 해봐도 해당 에러에 관한 설명은 많으나 봐도 제가 이해를 못해 해결을 못하고 있습니다
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
세션-쿠키 로직에 대한 궁금증..
안녕하세요 강의 잘봤습니다. 최근 리덕스를 리액트쿼리로 바꾸신거 보고 저도 따라서 작업해보고 있습니다. 덕분에 타입스크립트도 이참에 해보게되네요. 지금 user부분 로그인 로직쪽 하고 있는데.. 클라이언트에서 logInAPI로 post 요청을 보내면 백에서 라우터에서 passport로 넘겨주고 passport에서 로그인처리하고 passport.session 통해서 세션을 백서버에 저장하고 클라이언트에 그 쿠키를 돌려주는건 알겠는데.. (cookieParser는 역으로 클라이언트의 쿠키를 서버에서 해석해주는 부분이겠죠..?) 클라이언트 부분에서 쿠키를 받아서 어떻게 처리하겠다라는 부분이 없어서 어떤식으로 브라우저에 쿠키를 저장하는지 궁금합니다. withCredentials를 써서 cors문제도 해결하고 브라우저에 쿠키를 저장하는것도 마법처럼 가능하게 되는건가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
passport로 로그인 시 서버에서 set cookie 하는 부분이 어디인지 궁금합니다.
사용자 로그인 후에 브라우저의 개발자 도구에서 set-cookie헤더가 없는데요, 서버에서 어느 지점에서 쿠키 설정을 해주는 것인가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
saga에서 무한 api요청의 원인을 알 수 있을까요..?
안녕하세요 제로초님 완강 후 덕분에 3군데에서 면접을 보게되어서 복습겸해서 작게나마 오픈api 활용해 영화정보 보여주는 프로젝트를 진행중 입니다. redux 셋팅을 마치고 메인 페이지에서 아래처럼 dispatch를 하고있는데 여기는 사가입니다. 이렇게요.. 어느부분이 문제인지 찾기 위해 dispatch를 하지 않고 그냥 메인페이지에서 axios호출을 하면 정상작동을 합니다. effect 콘솔도 한번만 찍히구요.. 그렇게 4시간정도 찾아보면서 수정을하다가 그럼 결론은 saga의 문제구나를 깨닫긴했는데 도대체 어디가 문제인지 알 수가 없네용 강의 프로젝트가 아니긴 하지만 한번만 확인해 주실 수 있을까용?? 전체코드가 필요할 수 도 있을 것 같아서 깃헙주소도 남겨 놓겠습니다! 바쁘실테지만,, 미리 감사합니다! 취업후기도 꼭 남길게요😄 https://github.com/psw0962/movie-reviews
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
비동기로직 리덕스 관련 질문
비동기 관련 로직을 리덕스나 모빅스 같은 라이브러리로 관리를 해서 관심사를 분리시켜야 한다는 말씀을 듣고 궁금한것이 있어 질문드립니다. 그렇다면 모든 비동기처리(서버데이터를 받는 로직)를 리덕스 미들웨어(썽크나 사가)를 통해 관리를 해야한다는 것이고 그렇다면 그 비동기 데이터들은 모두 전역상태로 관리를 해야한다는 것이 맞는거네요?? 제가 이해한바로는 '비동기처리를 미들웨어를 통해 관리한다는 것은 각각 비동기요청, 성공, 실패 액션을 만들고 axios 같은것을 사용하여 통신하고 성공과 실패로직들을 각 액션에 매핑하는것이다'인데 그렇다면 비동기 에러핸들링처리는 axios를 사용하여 서버에 요청하는 코드에서 해주는것인지 실패액션쪽 코드에서 해주는것인지 헷갈립니다.그리고컴포넌트파일에서는 useDispatch와 비동기요청 액션함수를 사용하여 비동기 호출하고 useSelector로 해당 데이터 상태값을 사용하는 것이다가 맞을까요??
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
질문있습니다
npm build는 운영서버를 위해 build하는거지만 next의 export는 정적 페이지를 위한것이라고 알고 있는데 만약 배포를 진행한다면, build와 export 두개 다 같이 해줘야하는걸까요 ? next export명령어가 next build 후 그 빌드된 파일을 바라보고 out 디렉터리를 만드는건가요 ? !
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
쿠키
배포한 이후에 백엔드에서 cors 옵션에 credentials: true, 해주고 프론트쪽에서 axios.defaults.withCredentials = true; 를 해주어도 로그인 성공시 쿠키를 못받아오네요.이때는 어떻게 접근을 해야할 지 모르겠습니다. 로그인 시도 후 성공하고 응답으로 비밀번호를 제외한 유저 정보를 받아온 후에다음페이지에서 로그인 유지를 위한 ssr 시 백에서 요청을 받았을때 쿠키가 없어서 미들웨어에서 걸립니다.(로그인 필요 401) 크롬쪽에서 따로 sameSite 관려 오류는 안뜨고요.