묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
빌드 에러 질문입니다.
npm run build하면 이런 에러가뜨는데 도통ㅇ 머가문젠지 모르겠습니다..ㅠㅠ stringify 를 쓰면 나는 에러같은데 저는 안쓰고있는데 이러네요..
-
미해결[리뉴얼] 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이에요.
-
해결됨Slack 클론 코딩[백엔드 with NestJS + TypeORM]
async await 질문 있습니다.
강의 잘 보고 있습니다! 보다가 궁금한 점이 생겼는 데 async 함수에서 return 할 때 await 을 안붙이시던데 이유가 있을까요?
-
미해결[리뉴얼] 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 만들기
게시글 삭제 후 리렌더링 문제
게시글 삭제 직후 db에서는 바로 삭제가 되는데 브라우저에서 redux devtools로 state를 보면 mainPosts에 반영이 안되어있어요. 새로고침을 해야만 게시글이 사라져요. 어디에 문제가 있는건지 감이 안오네요
-
해결됨Slack 클론 코딩[백엔드 with NestJS + TypeORM]
1분 18초 자바스크립트 어떤건 힙에 저장되고 어떤건 스택에 저장되고...
1분 18초 자바스크립트 어떤건 힙에 저장되고 어떤건 스택에 저장되고... 에 대해 말씀하셨는데, 혹시 그런거에 관해 좀 더 알기 위해 공부해보고 싶은데, 공부 자료 추천해주실 수 있나요? (신기... 제로초님은 어떤 자료를 통해 그러한 내용들을 알게되셨나요?
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
mySQL workbench
db는 생성했는데 영상에 나오는 것처럼 mySQL workbench에서 생성된 데이터베이스를 어떻게 띄우는지 모르겠어요 ㅜ
-
해결됨따라하며 배우는 TDD 개발 [2023.11 업데이트]
mysql import 에러
mysql을 사용하여 진행 중인 프로젝트가 있는데 tdd를 적용해보려고 합니다. controllers/subscription.js const db = require('../routes/database.js'); exports.subscribeCalendar=()=>{}; 컨트롤러 코드는 위와 같고 test/unit/subscription.test.js const subscriptionController=require("../../controllers/subscription") describe("캘린더 구독",()=>{ test("subscribeCalendar 함수가 있을 겁니다.",()=>{ // subscriptionController.subscribeCalendar의 타입은 함수다. expect(typeof subscriptionController.subscribeCalendar).toBe("function") }) }) 테스트 코드는 위와 같은데 컨트롤러에서 db를 임포트 하기 전에는 에러가 안 떴는데 임포트 한 후에 테스트는 통과하지만 아래와 같은 에러 메시지가 뜹니다. 검색해보니 단위테스트 할 때는 db 관련 코드는 넣지 말라고 하는데 그 원인일까요? ReferenceError: You are trying to `import` a file after the Jest environment has been torn down. 이미 mysql로 진행 중이라 몽구스로 변경하기가 어려운데 에러메시지 무시하면 될까요..?
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
post
post 형식의 body인데 어떻게 name부터 imgUrl까지 destructuring할 수 있나요??정보가 입력되기 전인데 왜 그런지 궁금합니다..그리고 create({name:name,description:description..})이게 무슨 뜻인지 모르겠어요 key가 name,value가 name이런거를 만들라는건데 잘 이해가 가지 않습니다..ㅜ app.post("/products", (req, res) => { const body = req.body; const { name, description, price, seller, imageUrl } = body; models.Product.create({ name, description, price, seller, imageUrl, }) .then((result) => { console.log("상품 생성 결과 : ", result); res.send({ result, }); })
-
해결됨탄탄한 백엔드 NestJS, 기초부터 심화까지
프론트 코드는 어디서 받나요?
https://github.com/amamov/teaching-nestjs-a-to-z 에 있는 frontend 디렉토리가 프론트코드인가요?
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
analyze 질문이여
저는 antd이게 이만한데 왜케크죠???ㅋㅋ.. 혹시 이거 정상인가여? 아님 제가뭐 잘못한건가요??
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
[MAC] create-react-app에서 permission 에러 해결책
질문은 아니구요. 같은 문제로 고생하시는 분들이 많아 제 방법을 공유합니다 1) root 비밀번호 설정 2) 관리자 권한으로 설치 아래는 제가 찾은 링크이니 참고하세요 root 비밀번호 설정 https://heeestorys.tistory.com/877 관리자 권한으로 설치 https://online.codingapple.com/unit/react1-install-create-react-app-npx/
-
미해결탄탄한 백엔드 NestJS, 기초부터 심화까지
Filter도 결국 middleware에서 처리할 수 있을거 같은데 나누는 이유가 있을까요?
Filter도 결국 middleware에서 처리할 수 있을거 같은데 나누는 이유가 있을까요?
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
노드 모듈스 파일 질문입니다.
저번 강의까진 노드 모듈스 파일이 없었고 갑자기 생겨서 저도 다운받으려고 create-react-app .을 했는데 사진처럼 뜹니다. web이란 폴더 안에 market_web, marker_server 두개의 폴더가 있고 market_web에 깔려있다고 다른 파일인 marker_server에 깔 수 없는건가요?
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
프로필 페이지에서 새로고침 시 오류
안녕하세요, 처음에 로그인하고 프로필로 들어가면 에러가 안나는데, 프로필페이지에서 새로고침을하면 이런 에러가뜹니다. 팔로워 팔로잉 없을때 오류인줄알고 한명씩 넣어봐도 똑같이 뜨네요,, 그래서 제로초님 코드 복붙해봐도 그대로인거 보면 코드오류는 아닌거같은데 혹시 프로필페이지 에서 새로고침시 오류뜨는거 이거 왜그럴까요..??
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
next.js에서 swr 서버사이드 렌더링 질문드립니다.
next.js에 swr, typescript를 이용해 노드버드 실습을 해보다가 서버사이드 렌더링에 대해 궁금한 게 생겼습니다. 사용자가 만약 로그인을 한 상태일 때, 서버사이드 렌더링을 해서 컴포넌트에 사용자 정보를 넣어준 상태로 페이지가 보여지도록 하고 싶은데요. 강의에서는 pages/index.js에서 리덕스를 이용하여 LOAD_MY_REQUEST 액션을 dispatch 한 뒤, components/AppLayout.js 에서 useSelector로 me 값을 가져 오면 사용자 정보가 담겨진 채로 AppLayout.js 컴포넌트가 랜더링 됩니다. swr을 적용해서 동일하게 구현해보려고 하는데요. swr에서는 page/index.js에서 서버사이드에서 로그인한 사용자 정보롤 가지고 오더라도, components/AppLayout.js에서 useSWR을 사용하면 처음 [로그아웃] 상태일 때의 화면이 잠깐 나오고, [로그인]상태일 때의 모습으로 변합니다. 혹시 swr을 이용해서 pages/index.js에서 서버사이드 렌더링으로 가지고 왔던 값을 components/AppLayout.js에도 페이지 렌더링 초기에 값을 함께 전달해주는 방법은 없을까요? 제가swr을 이용해 아래처럼 적용해봤는데, 다른 방법이 있을까요? pages/index.tsx export const getServerSideProps: GetServerSideProps = async function({ req }) { const cookie: string = req ? req.headers.cookie : ''; if (cookie) { const data = await fetcher.get('/user', { cookie }); if (data) { return { props: { userProps: data }, }; } } return { props: { userProps: null }, }; }; function Index({ userProps }: InferGetServerSidePropsType<typeof getServerSideProps>) { const { data: user } = useSWR<IUser>('/user', fetcher.get, { initialData: userProps }); return <AppLayout>{user ? user.nickname : '로그인해주세요'}</AppLayout>; } components/AppLayout.tsx function AppLayout() { const { data: user } = useSWR<IUser>('/user', fetcher.get); return ( <div css={userNavStyle}> {user ? ( <> <Profile image={user.profile} size='40px' /> </> ) : ( <Link href='/login'> <a href='' className='login'> 로그인 </a> </Link> )} </div> ); }
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
그대로 따라한것 같은데 에러가 뜨는데 확인 부탁드립니다.
Windows PowerShell Copyright (C) Microsoft Corporation. All rights reserved. PS D:\learn-all-with-javascript\grab-market-web> npm install -g create-react-app C:\Users\motiongrapher\AppData\Roaming\npm\create-react-app -> C:\Users\motiongrapher\AppData\Roaming\npm\node_modules\create-react-app\index.js + create-react-app@4.0.3 added 67 packages from 25 contributors in 5.659s PS D:\learn-all-with-javascript\grab-market-web> create -react-app . 경로가 포함된 경우 경로가 올바른지 검증한 다음 다시 시도하십시오. 위치 줄:1 문자:1 + create -react-app . + ~~~~~~ + CategoryInfo : ObjectNotFound: (create:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException create-react-app : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\motiongrapher\AppData\Roaming\npm\create-react-app.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오. 위치 줄:1 문자:1 + create-react-app + ~~~~~~~~~~~~~~~~ + CategoryInfo : 보안 오류: (:) [], PSSecurityException + FullyQualifiedErrorId : UnauthorizedAccess PS D:\learn-all-with-javascript\grab-market-web> create-react-app . 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오. 위치 줄:1 문자:1 + create-react-app . + ~~~~~~~~~~~~~~~~ + CategoryInfo : 보안 오류: (:) [], PSSecurityException + FullyQualifiedErrorId : UnauthorizedAccess PS D:\learn-all-with-javascript\grab-market-web> create-react-app. 름이 정확한지 확인하고 경로가 포함된 경우 경로가 올바른지 검증한 다음 다시 시도하십시오. 위치 줄:1 문자:1 + create-react-app. + ~~~~~~~~~~~~~~~~~ + CategoryInfo : ObjectNotFound: (create-react-app.:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException PS D:\learn-all-with-javascript\grab-market-web> create-react-app . create-react-app : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\motiongrapher\AppData\Roaming\npm\create-react-app.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오. 위치 줄:1 문자:1 + create-react-app . + ~~~~~~~~~~~~~~~~ + CategoryInfo : 보안 오류: (:) [], PSSecurityException + FullyQualifiedErrorId : UnauthorizedAccess PS D:\learn-all-with-javascript\grab-market-web> npm create-react-app. Usage: npm <command> where <command> is one of: access, adduser, audit, bin, bugs, c, cache, ci, cit, clean-install, clean-install-test, completion, config, create, ddp, dedupe, deprecate, dist-tag, docs, doctor, edit, explore, fund, get, help, help-search, hook, i, init, install, install-ci-test, install-test, it, link, list, ln, login, logout, ls, org, outdated, owner, pack, ping, prefix, profile, prune, publish, rb, rebuild, repo, restart, root, run, run-script, s, se, search, set, shrinkwrap, star, uninstall, unpublish, unstar, up, update, v, version, view, whoami npm <command> -h quick help on <command> npm -l display full usage info npm help <term> search for help on <term> npm help npm involved overview Specify configs in the ini-formatted file: C:\Users\motiongrapher\.npmrc or on the command line via: npm <command> --key value Config info can be viewed via: npm help config npm@6.14.13 C:\Program Files\nodejs\node_modules\npm PS D:\learn-all-with-javascript\grab-market-web> create-react-app. create-react-app. : 'create-react-app.' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. 이 름이 정확한지 확인하고 경로가 포함된 경우 경로가 올바른지 검증한 다음 다시 시도하십시오. 위치 줄:1 문자:1 + create-react-app. + ~~~~~~~~~~~~~~~~~ + CategoryInfo : ObjectNotFound: (create-react-app.:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException PS D:\learn-all-with-javascript\grab-market-web>
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
상품 세부설명페이지에서 데이터 값 통신이 안되네요
main 컴포먼트에서는 잘나오는데 상품 세부 페이지 가명 아무것도 안뜨네요 포스트맨으로 http://localhost:8080/products/id 으로 값으로 똑같은 주소를 넣으면 response값은 잘 나오는데 react에서 만 이러네요
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
https적용 후 로그인이 되지 않습니다
안녕하세요 제로초님! 질문있습니다ㅠㅠ 프론트와 백서버 둘 다 https 적용 후, 로그인을 시도하면 저런 식으로 주소에 이메일과 비밀번호가 생기면서 로그인이 되지 않습니다. 무엇을 잘 못 한 건지 예상이 가지 않아서 어디서부터 확인해야 할지 몰라 글을 남깁니다ㅠㅠ 기를 이용해주세요.
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
조현영님
현영님 vue, react 프레임워크를 사용하지 않고 바닐라 자바스크립트로 Nodebird 를 만드는 강좌 같은 건 안나오나요!?