월 17,600원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
getServerSideProps의 context 관련 질문
안녕하세요 현영님! 서버사이드렌더링 준비하기 강의 내용을 실습하면서 getServerSideProps의 인자로 들어가는 context를 콘솔로 찍었을때 다음과 같았는데 context.store를 콘솔에 찍으면 undefined가 나옵니다. 그래서 강의 내용에 나왔던 코드들이 store가 undefined라고 오류가 발생합니다ㅠ context.store.dispatch({ type: LOAD_USER_PENDING }); context.store.dispatch({ type: LOAD_POSTS_PENDING }); context.store.dispatch(END); await context.store.sagaTask.toPromise();
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
nginx
안녕하세요. 프론트와 백에 https 모두 다 적용했는데 https://도메인/_next/static/chunks/~ 와 관련된 여러 요청들이 404 가 뜨는 것을 확인했습니다. 찾아보니 nginx location 에서 try_files 부분을 바꿔야 하는 것 같은데요. 이걸 바꿔도 다른 부분에서 왠지 더 문제가 생길 거 같아 질문드리는데 nginx/https 적용 후에도 http 에서 동작하는 것처럼 똑같이 하게 하려면(다른 페이지로 이동시 404뜨고 js 파일이 안불러와짐) 톰캣같은 다른 기술을 적용해야하는 건가요? 아니면 nginx 설정을 조정하면 해결가능한 건가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
사이트에 연결할 수 없음
안녕하세요 제로초님 pm2 사용하기 파트 후부터 페이지가 작동하다 연결할 수 없다고 뜨는데 terminal 창에는 정상적으로 작동하는 것 같은데 어떤게 문제일지 모르겠어서 질문드립니다. back에서의 package.json app.js npm start 실행시 결과
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
db 컬럼 에러 질문드립니다
안녕하세요 혹시 저 에러는 어디를 확인해야 할까요?? 깃헙 코드를 참고해도 왜 db에 컬럼이 없다고 나오는지 모르겠습니다..
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
mainPosts를 이용한 map 함수 관련 질문
mainPosts: [{ id: 1, User: { id: 1, nickname: '강태웅', }, content: '첫 번째 게시글 #해시태그 #익스프레스', Images: [{ src: 'https://img.kr.news.samsung.com/kr/wp-content/uploads/2017/07/170621_%EC%84%B8%EC%83%81%EC%9D%84%EC%9E%87IT%EB%8A%94%EC%9D%B4%EC%95%BC%EA%B8%B0_%EC%BD%94%EB%94%A9%EC%9D%98%EB%B3%B8%EC%A7%88%EA%B3%BC%EB%AF%B8%EB%9E%98%EC%9D%B4%EB%AF%B8%EC%A7%8009.jpg' }, { src: 'https://post-phinf.pstatic.net/MjAxODA1MjNfMjIg/MDAxNTI3MDU0MTI0Njk5.0leniJIhs4x6kX4gGubY_fQKoxgDR9w2ELHeNRqrXaYg.Y_e-WkJU10_Qe77AJiWb6-fiqSnt5UjwFz14jVU94Xcg.JPEG/shutterstock_571668544.jpg?type=w1200' }, { src: 'https://blog.kakaocdn.net/dn/zABhJ/btqBkOx3WrZ/urlKoNnI1ErlmT6bkZKLtk/img.jpg' }], Comments: [{ User: { nickname: 'ktw2378', }, content: '코딩 재밌겠다', }, { User: { nickname: 'xodndxnxn', }, content: '공부 열심히 합시다!', }] }] 안녕하세요! 수업에서 배웠다시피 mainPosts를 위와 같이 구성했습니다. 결과적으로 mainPosts: [{ }] 이런 꼴이 되는데요. {mainPosts.map((post) => <PostCard key={post.id} post={post} />)} 이를 이용해 위와 같이 pages/index.js에서 mainPosts를 map 함수를 이용해 반복문을 돌려줬는데 map 함수에 대해 궁금증이 생겼습니다. const a = [1, 2, 3, 4] 이런 식으로 돼있으면 a.map((v) => v);를 통해 1, 2, 3, 4 를 반환하게끔 할 수 있는걸로 아는데 위와 같이 mainPosts = [{ }] 이런 꼴로 돼있으면 map 함수를 돌릴 때 { }만 반환되는 것인가요? 그럼 굳이 map함수를 돌리지 않고 <PostCard post={mainPosts[0]}} />로 넘겨줘도 되는 것인가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
배포 관련해서 질문드립니다.
삭제된 글입니다
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
ssr 쿠키 , pm2 logs
안녕하세요. next 11 버전으로 올리고 올려주신 코드로 ssr 을 하는데 쿠키가 전달이 안되는 거 같습니다 ㅠㅠ ssr 말고 그냥 useEffect 에 dispatch 넣어서 전송해보니 로그인이 되는데 ssr 로 바꾸면 안되는 거 보니 쿠키 생성은 됐고 전달이 안되는 건 확실한 거 같은데요. export const getServerSideProps = wrapper.getServerSideProps((store) => async ({ req }) => { const cookie = req ? req.headers.cookie : ''; console.log(`req.headers.cookie : ${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();}); 그래서 console 로 req.headers.cookie 를 찍어보려하는데 pm2 logs 를 해서 모든 로그를 봐도 프론트 서버에 적어둔 console 은 터미널에서 보이지가 않아서 질문 드립니다. console.log(`req.headers.cookie : ${req.headers.cookie}`); 어떻게 확인할 수 있을까요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
formdata.append 질문
formdata.append 로 파일 두개를 한번에 서버로 전달은 불가능한가요? fileds로 서버에서 받으려는데 안받아지네요 ㅜ router.post( '/upload', uploadData.fields(['data1', 'data2']), (req, res) => { console.log(req.body); console.log(req.files); res.send('ok'); } ); uploadData는 aws s3로 파일 업로드하는거 따로 분리한 미들웨어 입니다. MulterError: Unexpected field 이런 애러가 뜨네요.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
7분 post.Retweet.UserId 질문입니다
삭제된 글입니다
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
리덕스 핫리로드
좋은 강의 따라서 열심히 하고 있습니다. 다만 이상하게 reducers, sagas폴더는 수정을 해도 핫리로드가 안먹히더라구요. 따로 설정해줘야 하는 부분이 있을까요? 서버를 계속 껏다켜야하니 불편하네요ㅜㅜ
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
push 시에 remote error 질문
remote: error: GH001: Large files detected. You may want to try Git Large File Storage - https://git-lfs.github.com. remote: error: Trace: 3132d2271d3841301d016bcad034727ad611334ac6c79a90d632587e8d4baf51 remote: error: See http://git.io/iEPt8g for more information. remote: error: File .next/cache/webpack/client-development/2.pack is 229.30 MB; this exceeds GitHub's file size limit of 100.00 MB remote: error: File .next/cache/webpack/client-development/11.pack is 331.46 MB; this exceeds GitHub's file size limit of 100.00 MB remote: error: File .next/cache/webpack/client-development/26.pack is 102.01 MB; this exceeds GitHub's file size limit of 100.00 MB remote: error: File .next/cache/webpack/client-development/56.pack is 134.46 MB; this exceeds GitHub's file size limit of 100.00 MB remote: error: File .next/cache/webpack/client-development/10.pack is 112.58 MB; this exceeds GitHub's file size limit of 100.00 MB remote: error: File .next/cache/webpack/client-development/39.pack is 112.78 MB; this exceeds GitHub's file size limit of 100.00 MB To https://github.com/youngnrichh/instagram-clone.git ! [remote rejected] main -> main (pre-receive hook declined) error: failed to push some refs to 'https://github.com/youngnrichh/instagram-clone.git' 보니까 .next 파일 메모리가 100mb넘어서 에러뜨는것같은데 .gitignore에 .next를 넣었는데도 불구하고 푸쉬할때마다 이런게 계속뜹니다. 구글링해서 여러가지 방법해보고 git rm -r --cached . 이거하고 커밋하고 푸쉬해봐도 안되네요... 어떻게 방법이 없을까요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
unshift 사용 시의 성능
unshift를 사용하면 모든 요소에 대해서 연산이 발생해서 성능적으로 문제가 생긴다는 내용을 본 기억이 있는데 성능에 문제가 없나요?성능상 문제가 있다면 실무에서는 어떤 식으로 사용하는 지 궁금합니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
certbot을 설치 할 때 404에러가 나옵니다
강의를 따라하고 있는 중 아래와 같은 오류가 나면서 certbot이 설치가 되지 않습니다. 404라는 에러코드는 페이지를 못찾는 걸로 알고 있는데, 혹시 이제는 저 페이지가 없어 진걸까요? nginx설정은 아래처럼 했습니다
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
axios base 설정 질문드립니다.
안녕하세요. 혹시 axios base 설정을 saga index 에서 설정하는 이유가 있을까요??
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
like/unlike 사가 오류 질문
안녕하세요 현영님! 좋아요 기능 구현 실습하면서 다음과 같은 오류가 발생했습니다. 오류 메시지를 통해서 사가쪽에서 발생하는 오류라는 것은 알 수 있었는데, 현영님 깃헙과 비교하면서 찾아봐도 어디서 잘못됐는지 확인할 수 없어서 질문드립니다ㅠ 사가 코드 import axios from "axios"; import { call, put, fork, takeLatest, all, throttle } from "redux-saga/effects"; import { ADD_POST_PENDING, ADD_POST_SUCCESS, ADD_POST_ERROR, ADD_COMMENT_PENDING, ADD_COMMENT_SUCCESS, ADD_COMMENT_ERROR, REMOVE_POST_PENDING, REMOVE_POST_SUCCESS, REMOVE_POST_ERROR, LOAD_POSTS_PENDING, LOAD_POSTS_ERROR, LOAD_POSTS_SUCCESS, LIKE_POST_PENDING, LIKE_POST_SUCCESS, LIKE_POST_ERROR, UNLIKE_POST_PENDING, UNLIKE_POST_SUCCESS, UNLIKE_POST_ERROR } from "../reducers/post"; import { ADD_POST_TO_ME, REMOVE_POST_OF_ME } from "../reducers/user"; //-------------------------------------------- function loadPostsAPI() { return axios.get("/posts"); } function* loadPosts(action) { try { const result = yield call(loadPostsAPI); yield put({ type: LOAD_POSTS_SUCCESS, data: result.data }); } catch (err) { yield put({ type: LOAD_POSTS_ERROR, data: err.response.data }); } } function* watchLoadPosts() { yield throttle(5000, LOAD_POSTS_PENDING, loadPosts); } function addPostAPI(data) { return axios.post(`/post`, { content: data }); } function* addPost(action) { try { console.log("addPost 함수 실행"); const result = yield call(addPostAPI, action.data); // const id = shortId.generate(); console.log("axios 통신을 마쳤습니다.", result); yield put({ type: ADD_POST_SUCCESS, data: result.data }); yield put({ type: ADD_POST_TO_ME, data: result.data.id }); } catch (err) { yield put({ type: ADD_POST_ERROR, data: err.response.data }); } } function* watchAddPost() { console.log("watchAddPost 실행"); yield takeLatest(ADD_POST_PENDING, addPost); } function removePostAPI(data) { return axios.delete(`/post/${data}`); } function* removePost(action) { try { console.log(action.data); const result = yield call(removePostAPI, action.data); yield put({ type: REMOVE_POST_SUCCESS, data: result.data // id }); yield put({ type: REMOVE_POST_OF_ME, data: action.data }); } catch (err) { yield put({ type: REMOVE_POST_ERROR, data: err.response.data }); } } function* watchRemovePost() { yield takeLatest(REMOVE_POST_PENDING, removePost); } //-------------------------------------------- function addCommentAPI(data) { return axios.post(`/post/${data.postId}/comment`, data); } function* addComment(action) { try { const result = yield call(addCommentAPI, action.data); yield put({ type: ADD_COMMENT_SUCCESS, data: result.data }); } catch (err) { console.error(err); yield put({ type: ADD_COMMENT_ERROR, data: err.response.data }); } } function* watchAddComment() { yield takeLatest(ADD_COMMENT_PENDING, addComment); } //-------------------------------------------- function likePostAPI(data) { axios.patch(`/post/${data}/like`); } function* likePost(action) { try { console.log("좋아요 사가 액션 데이터", action.data); const result = yield call(likePostAPI, action.data); console.log("좋아요 사가 result 데이터", result.data); yield put({ type: LIKE_POST_SUCCESS, data: result.data // {PostId, UserId} 11, 2 }); } catch (err) { console.error(err); yield put({ type: LIKE_POST_ERROR, data: err.response.data }); } } function* watchLikePost() { yield takeLatest(LIKE_POST_PENDING, likePost); } //-------------------------------------------- function unlikePostAPI(data) { axios.delete(`/post/${data}/like`); } function* unlikePost(action) { try { console.log("좋아요 취소 사가 액션 데이터", action.data); const result = yield call(unlikePostAPI, action.data); console.log("좋아요 취소 사가 result 데이터", result.data); yield put({ type: UNLIKE_POST_SUCCESS, data: result.data }); } catch (err) { console.error(err); yield put({ type: UNLIKE_POST_ERROR, data: err.response.data }); } } function* watchUnlikePost() { yield takeLatest(UNLIKE_POST_PENDING, unlikePost); } //-------------------------------------------- export default function* postSaga() { yield all([ fork(watchLikePost), fork(watchUnlikePost), fork(watchAddPost), fork(watchAddComment), fork(watchRemovePost), fork(watchLoadPosts) ]); } PS. 1. 서버쪽에서는 요청을 받아서 성공적으로 응답을 보내주고, DB에도 좋아요가 잘 추가가 됩니다. 터미널 로그 DB 좋아요 테이블 2. 브라우저에서는 위의 오류가 발생하고 새로고침하면 좋아요 기능이 적용되어 있습니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
도메인 연결하기
안녕하세요. 도메인 연결하려는데 제 프로젝트는 소셜 로그인이어서 쿠키도 제대로 받아와진 거 같고 백엔드에서도 다 200이 뜨는데 로그인 후 유저 정보를 못 불러오네요 .. 어디가 문제인지 감도 못 잡아서 ㅠㅠ 수업내용이랑 조금 벗어나지만 방향성만 조금 잡아주신다면 감사하겠습니다 어제 밤부터 오늘 하루종일 이거때문에 아무 것도 못하고 있어서요 http://3.36.91.158/my 아래는 back pm2 logs 입니다. 0|app | ::ffff:121.166.72.224 - - [01/Aug/2021:09:56:04 +0000] "GET /user/kakao HTTP/1.1" 302 0 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.107 Safari/537.36" 0|app | serializeUser 실행 0|app | ::ffff:121.166.72.224 - - [01/Aug/2021:09:56:05 +0000] "GET /user/kakao/callback?code=bxvohJ6Fe_4muKUAzZmMFK0epab4QpMjoOC_ZsukTUECLzOPcYwdVbFsqIXDorsFzUKiRQo9dZsAAAF7ASRbLQ HTTP/1.1" 302 86 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.107 Safari/537.36" 0|app | ::ffff:3.36.91.158 - - [01/Aug/2021:09:56:05 +0000] "GET /user HTTP/1.1" 200 4 "-" "axios/0.21.1" ## /user 이 부분이 유저 정보 불러오는 요청인데 200이면 성공 아닌가요..? 프론트에서 console.log(me) 를 하면 null 이에요ㅠ 0|app | ::ffff:121.166.72.224 - - [01/Aug/2021:09:56:05 +0000] "GET /kakao.png HTTP/1.1" 404 148 "http://3.36.91.158/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.107 Safari/537.36" 0|app | ::ffff:121.166.72.224 - - [01/Aug/2021:09:56:05 +0000] "GET /naver.png HTTP/1.1" 404 148 "http://3.36.91.158/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.107 Safari/537.36"
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
useState hook을 매 키마다 만들어주는 이유가 궁금합니다.
const [user, setUser] = useState({id: "", password: ""}) 이런 식으로 객체를 초기화하고 value에 user.id, user.password를 넣어주면 onChange도 여러 번 작성할 필요가 없을 것 같은데 그렇게 하지 않고 hooks를 key마다 일일이 만들어주는 이유가 있나요? 다른 분 코드를 봤는데 그분도 hooks를 일일이 만드셨길래 궁금해서 여쭤봅니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
파일명
안녕하세요. 강의 잘보고있는데요. 파일명을 지을때 대문자 시작과 소문자 시작이 정해진 관례가 있나요? 스프링개발자였다보니까 대문자파일명이 좀 낯설어서요.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 next-redux-wrapper가 왜 필요한지 궁금합니다.
이 강의를 보고 다른 프로젝트에 next redux wrapper를 적용하여 리덕스 스토어를 구성하였는데 꼭 필요한지 왜 필요한지 조금 궁금해져서 질문올립니다 답변 부탁드립니다 ㅠㅠ
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
질문 있습니다!
해당 강의에서는 사진을 s3에 업로드해서 s3에 저장하고 해당 저장 주소를 받아와서 주소를 db에 저장하는 방식인데 제가 구현하고자 하는 방식은 업로드 하지않고 s3에 데이터를 미리 저장해놓고, 해당 s3주소를 db에 미리 저장해두고 화면단에 데이터를 뿌리고 싶은데요 이러한 경우에는 어떤식으로 구현해야 할까요?? 그냥 s3에 특정 폴더를 생성하고 직접 업로드하고 배열을 돌리는 방식으로나 그런식으로 받아와서 db에 저장해야 하나요???