월 17,600원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
이미지 리사이징 403 forbidden
안녕하세요 제로초 선생님..! 보너스 강좌를 제외한 모든 강좌를 듣고 S3 이미지 리사이징을 적용했는데 위와 같이 계속해서 오류가 발생합니다. 403 Forbidden 이면 권한 상에 문제가 있다는 것 같은데, cors와 유사한 문제이려나요. 여러가지 시도해봤지만 계속해서 오류가 발생해 질문드립니다!
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
이미지 캐루셀 react slick 관련 오류입니다
안녕하세요 제로초님. 다름이 아니라 3장 마지막 부분 캐루셀 구현하기를 들으면서 적용을 해봤더니 위와같이 슬라이더창이 생깁니다. 전체화면이 채워지는게 아니라 레이아웃이 있던 만큼의 화면에만 사진이 꽉찹니다. 에러메세지가 뜨는것도 아니라 초심자 입장에서는 디버깅을 하기가 조금 어렵습니다. 혹시 의심가시는 부분이 있으실까요? 혹시나 답변하시는데 조금 편해지실까 싶어 제가 지금까지 작성한 코드 깃헙 링크도 같이 첨부하겠습니다..
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
Aws에 S3 세팅하고 이미지를 업로드 했을때 404에러 질문
안녕하세요 제로초님 질문드립니다.Aws에 S3 세팅다하고 front , back 코드 모두 수정후 이미지를 올렸을때 아래 사진과같이 에러가발생합니다. 그런데 아에 front서버 모니터링에는 아무런 문제 안뜨는데 백쪽에서 이런식으로 모니터링에 오류가잡힙니다 CredentialsError: Missing credentials in config, if using AWS_CONFIG_FILE, set AWS_SDK_LOAD_CONFIG=1 app > at IncomingMessage.<anonymous> (/home/ubuntu/Twitter-next.js-node.js/back/node_modules/aws-sdk/lib/util.js:904:34) app > at IncomingMessage.emit (events.js:412:35) app > at IncomingMessage.emit (domain.js:470:12) app > at processTicksAndRejections (internal/process/task_queues.js:82:21) 혹시 이러한경우 어떤문제가 있는걸까요 ex) 프론트 코드 / 백 코드
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
profile 페이지 (로그인 했을때 vs 로그인 안했을 때)
제로초님 제가 redux이용해서 로그인 로그아웃 기능 구현하다가 profile페이지에서 자꾸 에러가 생겨서 질문드립니다. 제가 원하는 것은 profile페이지에 접속했을 때, login된 상태 (redux의 state중 isLoggedin이 true)면 profile페이지가 잘 나오고, logout된 상태(redux의 state중 isLoggedin이 false)면 profile페이지가 다른화면을 그리는 것을 원합니다. 처음 로그아웃된상태에서 /profile에 접속하면 로그아웃됐을때 profile화면이 잘 나오고,로그인상태에서 /profile에 접속하면 로그인됐을때 profile화면이 잘나옵니다. 허나, 로그인된상태에서 profile페이지에 접속해 있을 때, <Applayout>에 있는 로그아웃을 버튼을 클릭하면, 아래의 에러메세지가 나옵니다. Unhandled Runtime Error Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement. 검색해본 결과 해당 에러는 hooks의 위치가 잘못되었을 때, 나타나는 에러인데, 제가 볼 땐, 현재 제 코드의 hooks위치에 문제가 없는 것으로 파악됩니다. 한번 봐주시면 감사하겠습니다. ( 첫 로드일때는 화면이 잘 나오는데, profile페이지에서 state값이 바뀌니까 에러메세지가 뜹니다...)
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
EADDRINUSE: address already in use 0.0.0.0:3060
안녕하세요, 강의 잘 듣고 있습니다. 프론트 서버를 ec2에 배포하고, pm2 설치한 후에 $sudo npx pm2 start npm -- start 를 하였더니 3060포트가 이미 사용중이라는 에러가 나옵니다. $sudo lsof -i tcp:3060 으로 나오는 pid -> $sudo kill -9 (pid) 를 해도 계속 다른 pid로 생성이 되어서 $sudo npx pm2 kill $pm2 kill $root> sudo kill -9 pid 우분투계정, 루트 계정 모두 pm2 kill, pid kill을 해봤는데 어디서 자꾸 다시 생성이 되는지 감을 잡기 어려워서 질문드립니다. 어떻게 해야 할까요??
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
redux = configureStore ?
Redux 의 원리에 대한 설명을 듣고 이 강좌를 듣고 정리하는 과정에서 좀 찝찝하게 정리가 되서 질문드립니다 store 폴더에 configureStore.js 파일이 중앙 저장 장치 즉 , Redux 를 말하는거고 Redux 내에서 action 과 action 에 대한 처리하는 부분이 reducers 폴더에 index.js 인건가요 ?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
npm i 로 라이브러리 설치시 취약점 경고 메시지
+ next-redux-wrapper@7.0.2 added 1 package from 1 contributor and audited 945 packages in 12.631s 74 packages are looking for funding run `npm fund` for details found 24 vulnerabilities (2 low, 21 moderate, 1 high) run `npm audit fix` to fix them, or `npm audit` for details ---------------------------- 어떤 라이브러리를 npm i 를 통해 설치하여도 설치는 항상 잘 되는데 마지막에 취약점이 발견되고 위의 메세지처럼 똑같이 뜨는데요 npm audit 쪽을 보라는거같은데 구글링 결과 audit 옵션을 쓰지않겟다는 npm i --no-audit 를 설정을 주면된다고하는데 - 굳이 필요하지않으므로 위와같은 명령어로 꺼도되는지 - 위와같은 옵션설정을 안하더라도 24개의 취약점이 발견되는게 문제 인건지 .. ps . node 버전은 14.17.5 / npm 버전은 6.14.14 입니다
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
next build시 에러가 발생합니다.
next build로 빌드를 하는 과정에서 다음과 같은 에러가 발생하였습니다. TypeError: Converting circular structure to JSON --> starting at object with constructor 'Node' | property 'local' -> object with constructor 'Node' --- property 'parent' closes the circle at stringify (<anonymous>) at writeChannelMessage (node:internal/child_process/serialization:120:20) at process.target._send (node:internal/child_process:822:17) at process.target.send (node:internal/child_process:722:19) at reportError (/Users/hongjunhyeok/Desktop/Github/Hlog/client/node_modules/jest-worker/build/workers/processChild.js:87:11) at reportClientError (/Users/hongjunhyeok/Desktop/Github/Hlog/client/node_modules/jest-worker/build/workers/processChild.js:71:10) node:internal/child_process/serialization:120 const string = JSONStringify(message) + '\n'; ^ TypeError: Converting circular structure to JSON --> starting at object with constructor 'Node' | property 'local' -> object with constructor 'Node' --- property 'parent' closes the circle at stringify (<anonymous>) at writeChannelMessage (node:internal/child_process/serialization:120:20) at process.target._send (node:internal/child_process:822:17) at process.target.send (node:internal/child_process:722:19) at reportError (/Users/hongjunhyeok/Desktop/Github/Hlog/client/node_modules/jest-worker/build/workers/processChild.js:87:11) at reportClientError (/Users/hongjunhyeok/Desktop/Github/Hlog/client/node_modules/jest-worker/build/workers/processChild.js:71:10) > Build error occurred Error: Call retries were exceeded at ChildProcessWorker.initialize (/Users/hongjunhyeok/Desktop/Github/Hlog/client/node_modules/jest-worker/build/workers/ChildProcessWorker.js:193:21) at ChildProcessWorker._onExit (/Users/hongjunhyeok/Desktop/Github/Hlog/client/node_modules/jest-worker/build/workers/ChildProcessWorker.js:275:12) at ChildProcess.emit (node:events:369:20) at Process.ChildProcess._handle.onexit (node:internal/child_process:290:12) { type: 'WorkerError' } { "scripts": { "dev": "next -p 3060", "build": "next build" }, "dependencies": { "@emotion/core": "^11.0.0", "@emotion/react": "^11.4.0", "@emotion/styled": "^11.3.0", "@types/uuid": "^8.3.1", "autosize": "^5.0.1", "axios": "^0.21.1", "babel-eslint": "^10.1.0", "date-fns": "^2.23.0", "emotion-reset": "^3.0.1", "eslint-config-prettier": "^8.3.0", "immer": "^9.0.5", "marked": "^2.1.3", "next": "^11.0.1", "next-cookies": "^2.0.3", "next-redux-wrapper": "^7.0.2", "react": "^17.0.2", "react-cookies": "^0.1.1", "react-dom": "^17.0.2", "react-icons": "^4.2.0", "react-redux": "^7.2.4", "react-toastify": "^7.0.4", "redux": "^4.1.1", "redux-saga": "^1.1.3", "shortid": "^2.2.16", "typesafe-actions": "^5.1.0", "uuid": "^8.3.2" }, "devDependencies": { "@types/autosize": "^4.0.0", "@types/faker": "^5.5.7", "@types/marked": "^2.0.4", "@types/react-cookies": "^0.1.0", "@types/react-dom": "^17.0.9", "@types/shortid": "^0.0.29", "@typescript-eslint/eslint-plugin": "^4.29.2", "@typescript-eslint/parser": "^4.29.2", "eslint": "^7.32.0", "eslint-config-airbnb": "^18.2.1", "eslint-config-next": "^11.1.0", "eslint-plugin-prettier": "^3.4.1", "faker": "^5.5.3", "redux-devtools-extension": "^2.13.9", "typescript": "^4.3.5" } } 오류를 해결할려고 하는데 어디서 이런 오류가 발생하는지도 모르겠어서 어떻게 해야할지 모르겠네요 ㅠㅠ 혹시 버전문제 같은건가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
도메인연결완료 후 도메인으로 접속시 에러로 접속안됨 질문
안녕하세요 제로초님 도메인 연결을 완료하고 도메인네임으로 접속하면 오류가납니다. <아래는 서버 도메인으로 접속했을때 화면입니다.> < 아래는 프론트 도메인으로 접속했을때 화면입니다. >프론트 도메인으로 접속했을때 500에러가 나는데 이게 서버에서 잘못된건지 프론트쪽에서 잘못된건지, 어떤부분이 잘못된건지 모르겠습니다 ㅠ 우분투 프른트 쪽에서 sudo npx pm2 monit 하면 이렇게 에러가 잡힙니다. 많은 시험끝에 의문점 : 그냥 로컬 front에서 yarn dev or yarn build && yarn start 둘다 로컬에서 back을 실행안시키고 aws에 back 서버를 띄우고 했을때 잘됩니다. 그래서 aws에 띄운 front도메인에서 500 (Internal Server Error)가 나는게 의문입니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
swr을 쓰면 컴포넌트 랜더링 플로우가 어떻게 되나요?
일단 프로필 컴포넌트 안에서 콘솔 로그 찍어봤는데 followersData, followingsData를 마치 await해서 받은 다음 한 번에 랜더링 되더라고요. 근데 강의 내용중에 { data, error }가 둘 다 없으면 로딩중이라 하셨는데 그럼 순서가 swr get request -> render -> swr get success -> render 이렇게 작동된다는 건가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
fill() 오류
안녕하세요 제로초님 강의 잘 듣고있습니다~!자스강의를 타입스크립트로 변경해서 작성하던 도중 강의에서는 나지 않는 오류가 있어서요! 인수를 가져오지 못해서 나는 오류 인것 같은데찾아보니 사용하지 좋지 않다는 말만 있고 뚜렷한 대답을 찾기가 힘드네요 ㅠㅠ 혹시 해결법이 있는지 질문 드립니다! It is bad to use .fill() in typescript without providing any arguments. It will result in an undefined value and hence leads to other errors.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
와 그러면 넥스트는 사가 미들웨어에 완전 종속된 겁니까?
9버전부터 그렇게 된 건가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
Cannot read property 'dispatch' of undefined
export const getServerSideProps = wrapper.getServerSideProps(async (context) => { context.store.dispatch({ type: LOAD_USER_REQUEST, }) context.sotre.dispatch({ type: LOAD_POSTS_REQUEST, }) context.store.dispatch(END) await context.sotre.sagaTask.toPromise() }) 위 코드를 실행했을 때 dispatch of undefined라는 오류가 뜹니다. configureStore.js 에서 store와 dispatch의 log를 찍어보면 잘 나오는데 왜 저런 오류가 뜨는걸까요? redux의 전은 6이에요.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
해쉬태그 등록 오류
이번 강의에 해쉬 태그 등록을 위한 코드들 const hashtags = ~~~ 부분과 if(hashtags) { } 요거를 추가하면은 500에러가 떠요. 왜 이럴까요? const express = require('express') const multer = require('multer') const path = require('path') const fs = require('fs') const { Post, Image, Comment, User, Hashtag } = require('../models') const { isLoggedIn } = require('./middlewares') const router = express.Router() try { fs.accessSync('uploads') } catch(error) { console.log('uploads 폴더가 없으므로 생성합니다.') fs.mkdirSync('uploads') } // multer 셋팅 const upload = multer({ storage: multer.diskStorage({ destination(req, file, done) { done(null, 'uploads') }, filename(req, file, done) { const ext = path.extname(file.originalname) // 확장자 추출(.png) const basename = path.basename(file.originalname, ext) // 이름 추출(제로초) done(null, basename + '_' + new Date().getTime() + ext) // 이름_1518123131.png }, }), limits: { fileSize: 20 * 1024 * 1024 }, // 20MB }) // 게시글 작성 router.post('/', isLoggedIn, upload.none(), async (req, res, next) => { try { // const hashtags = req.body.content.math(/#[^\s#]+/g) const post = await Post.create({ content: req.body.content, UserId: req.user.id, }) // if(hashtags) { // const result = await Promise.all(hashtags.map((tag) => Hashtag.findOrCreate({ // where: { name: tag.slice(1).toLowerCase() }, // }))); // 결과 [[노드, true], [리액트, true]] // await post.addHashtags(result.map((v) => v[0])); // } if(req.body.image) { if(Array.isArray(req.body.image)) { // 이미지 여러개면 image: [경로.png, 경로.png] const images = await Promise.all(req.body.image.map((image) => Image.create({ src: image }))) await post.addImages(images) } else { // 이미지 하나만 올리면 image: 경로.png const image = await Image.create({ src: req.body.image }) await post.addImages(image) } } const fullPost = await Post.findOne({ where: { id: post.id }, include: [{ model: Image, }, { model: Comment, include: [{ model: User, // 댓글 작성자 attributes: ['id', 'nickname'], }] }, { model: User, // 게시글 작성자 attributes: ['id', 'nickname'], }, { model: User, // 좋아요 누른 사람 as: 'Likers', attributes: ['id'], }] }) res.status(201).json(fullPost) } catch(error) { console.error(error) next(error) } }) router.post('/:postId/comment', isLoggedIn, async (req, res, next) => { try { const post = await Post.findOne({ where: { id: req.params.postId } }) if(!post) { // 게시글 존재하는지 확인 return res.status(403).send('존재하지 않는 게시글입니다.') } const comment = await Comment.create({ content: req.body.content, PostId: parseInt(req.params.postId), UserId: req.user.id, }) const fullComment = await Comment.findOne({ where: { id: comment.id }, include: [{ model: User, attributes: ['id', 'nickname'] }] }) res.status(201).json(fullComment) } catch(error) { console.error(error) next(error) } }) // 좋아요 누르기 router.patch('/:postId/like', isLoggedIn, async (req, res, next) => { // PATCH /post/1/like try { const post = await Post.findOne({ where: { id: req.params.postId }}) if(!post) { return res.status(403).send('게시글이 존재하지 않습니다.') } await post.addLikers(req.user.id) res.json({ PostId: post.id, UserId: req.user.id }) } catch(error) { console.error(error) next(error) } }) // 좋아요 취소 router.delete('/:postId/like', isLoggedIn, async (req, res, next) => { // DELETE /post/1/like try { const post = await Post.findOne({ where: { id: req.params.postId }}) if(!post) { return res.status(403).send('게시글이 존재하지 않습니다.') } await post.removeLikers(req.user.id) res.json({ PostId: post.id, UserId: req.user.id }) } catch(error) { console.error(error) next(error) } }) // 게시글 삭제 router.delete('/:postId', isLoggedIn, async (req, res, next) => { // DELETE /post/10 try { await Post.destroy({ where: { id: req.params.postId, UserId: req.user.id, }, }) res.status(200).json({ PostId: parseInt(req.params.postId, 10) }) } catch(error) { console.error(error) next(error) } }) // 이미지 업로드 router.post('/images', isLoggedIn, upload.array('image'), (req, res, next) => { console.log(req.files) res.json(req.files.map((v) => v.filename)) }) module.exports = router
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
getFollowers랑 getFollowings는 users.js로 라우팅 분리 안하는 이유?
저도 제로초님 따라서 복수, 단수 철저하게 구분해서 코딩하는 습관 기르려고 하는데 이 글의 제목처럼 따로 분리를 안하시는 이유가 있을까요? 포스트를 가져올 때 posts.js로 분리하셨던 거처럼요. 그리고 제가 지금까지 다닌 회사는 리액트를 쓰지 않는 회사였어서 디비 부하랑 네트워크 비용 줄이려고 getFollowers랑 getFollowings같은 요청을 하나로 묶어서 처리했었거든요. const sql = `SELECT followingId, followerId FROM follow WHERE followingId = ${myId} OR followerId = ${myId}`; const users = await sequelize.query(sql); const followersFollowings = users.reduce((m, v) => { const name= v.followingId === myId ? 'followers' : 'followings'; m[name].push(v); return m; }, { followers: [], followings: [] }); res.status(200).json(followersFollowings); 이런식으로요. 근데 리액트를 쓰는 곳은 디비랑 네트워크 비용을 감수하고 따로따로 api를 만들고 요청하나요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
raw query 한번 해보고 싶은데 궁금한점이 있습니다!
회원 가입부분을 한번 해보고 싶은데 id 부분이랑 createdAt,updatedAt 설정을 어떻게 해야할지 문의 드립니다. await sequelize.query(` INSERT INTO users (id, userName, email, password, phoneNumber, memberClassification, membershipGrade, memberRole, createdAt, updateAt) values (?,?,?,?,?,?,?) `, { replacements: [ id부분 어떻게 써야하나요? req.body.userName, req.body.email, req.body.password, "0", req.body.memberClass, "0", "0", createdAt 부분을 now()로 하고 싶은데 어떻게 써야하나요? updateAt 부분을 now()로 하고 싶은데 어떻게 써야하나요? ], type: QueryTypes.INSERT, } );
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
당연한거지만 하나 질문드리겠습니다.
post 작성시 user에 id 정보 넘기는 부분 관련해서 ADD_POST_TO_ME action 호출 함수를 추가하였는데... 이렇게 해도 되는거 아닌가해서 질문드립니다. 강의상 내용은 ~ 6:01초 까지의 내용입니다. 실제 post 관련 action이 전부 일어난 후에 dispatch로 새로 액션을 만들어서 id값 넘겨주는 방법은 별로일까요 ? 말그대로 compontents에서 dispatch를 두번 호출하는 겁니다... 애초에 동작상으로 효율성 없는 코드이긴한데.. 실제로 이렇게 써야하는 상황이 있다던지 아니면 거의 불필요한 작업이라 봐도 무방한지 궁금하네요 좀 엉뚱한 질문이긴한데 궁금해서 질문드립니다..
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
게시글 삭제 후 리렌더링 문제
게시글 삭제 직후 db에서는 바로 삭제가 되는데 브라우저에서 redux devtools로 state를 보면 mainPosts에 반영이 안되어있어요. 새로고침을 해야만 게시글이 사라져요. 어디에 문제가 있는건지 감이 안오네요
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
라이브러리 배포에 관해서
안녕하세요 제로초님! 제가 antd와 같은 디자인시스템을 만들고 싶어서 연구중인데요. 컴포넌트를 여러개 만들고 배포를 하는데 ejs 와 cjs 로 빌드를 떠서 배포를 하는데 antd의 경우 package.json에 module: ejs/index.js 를 지정해주고 main: lib/index.js 이런식으로 지정을 해두었더라구요. 그래서 생긴 궁금증은 작업중인 프로젝트의 상황에 맞춰 만약 작업중인 프로젝트가 ejs로 동작하면 해당 모듈을 임포트 할때 해당 모듈의 ejs를 참조해서 가져오고 만약 현재 작업중인 프로젝트가 commonJS로 동작하면 필요한 모듈의 cjs를 참조하는건가요? 이처럼 자동으로 감지해서 가져오는지 궁금합니다. 추가로 궁금한것은 제가 ejs로만 배포를 해서 CRA 프로젝트와 CRN 프로젝트 모두에서 임포트시켜서 사용하려니깐 CRA에서는 문제가 없었는데 CRN으로 생성한 프로젝트에서는 Unexpected token 'export' 에러와 Cannot use import statement outside a module 에러가 발생했습니다. 무엇이 원인일까요??
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
사가와 리듀서 순서
사가와 리듀서 순서가 저는 사가가 더 먼저 콘솔에 찍히는데 이상 없이 동작하면 괜찮은거 맞나요??