묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
reaxt router npm 설치
안녕하세요~섹션6 페이지 라우팅1-React Router기본 편 듣고 있는데강의에 나오는 React Router 사이트에 들어가면 Installation 이라는 카테고리가아에 없는데.. 혹시 2023년 3월8일 기준으로 방법이 있나요?ㅠㅠ 홈페이지 다 눌러봐도안보이네요ㅠㅠㅠ
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
오류 질문이요!
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 터미널과콘솔에 이렇게 오류가 뜨는데 원인을 모르겠습니다ㅜㅜ
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
/usr/local/etc/mongod.conf 파일이 없음
맥에서 vim /usr/local/etc/mongod.conf 를 입력했는데 기존 파일이 없어서 새로 작성되고, :wq!로도 저장이 안됩니다.그리고 애초에 /usr/local 밑에 etc 폴더가 없습니다. 어떻게 해결해야 하나요?위의 과정 없이 mongo admin -u를 진행하니 에러가 뜹니다.
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
npm run dev시 localhost가 자꾸 3000으로 연결됩니다
이렇게 찾을 수 없다는 에러가 뜨는데 어떻게 해야되나요? 다른 분이 질문하신거 보고 package.json에 proxy도 추가해봤는데 안됩니다.
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
passport로 로그인하기에서 passport로그인 이라는게 무슨 말인가요??
router.post('/login', (req, res, next) => { passport.authenticate('local', (err, user, info) => { // done에서 넣은값들이 순서대로 전달되는곳 if (err) { console.error(err); next(err); } if (info) { return res.status(401).send(info.reason); } })(req, res, next); // middleware 확장하는 express의 기법 // (req, res, next)를 붙히면 그냥 함수를 전달하는것과 똑같은 기능을 하게 된다. return req.login(user, async (loginErr) => { // 서비스 로그인이 다 끝나면 passport 로그인을 한번 더 하는데 에러발생시 핸들 if (loginErr) { console.error(loginErr); return next(loginErr); } return res.json(); }); });return req.login(user, async (loginErr) => {여기서 우리 서비스 로그인이 다 끝나면 passport 로그인을 한번 더 한다고 하셧는데 이게 무슨 의미 인가요?? 우리 서비스에서 로그인을 하면 끝 아닌가요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
Graphql fetBoard 재질문
import {Bigframe, ResultWrapper, UserBox, UserInfo, Boundary } from "@/styles/emotion"; import { gql,useQuery } from "@apollo/client" import { useRouter } from "next/router" import{useState} from 'react' const FETCH_PRODUCT = gql` query fetchBoard($boardId: ID!){ fetchBoard(boardId:$boardId){ writer title contents createdAt } } ` export default function BulletinBoardFetch() { const router = useRouter() const[writer,setWriter]=useState("") const[creatDt,setCreatDt]=useState("") const{data}=useQuery(FETCH_PRODUCT,{ variables:{ boardId: router.query.qqq } }) console.log(data?.fetchBoard?.createdAt) setCreatDt(data?.fetchBoard?.createdAt) setWriter(data?.fetchBoard?.writer) return( <div> <Bigframe> <div> banner1 </div> <div> banner2 </div> <ResultWrapper> <UserBox> <img src="../../../public/userpic.png" alt=""/> <UserInfo> {/* <Writer>{writer}</Writer> <CreateDate>{createDt}</CreateDate> */} </UserInfo> <img src="../../../public/clip.png" alt=""/> <img src="../../../public/location.png" alt=""/> <Boundary></Boundary> </UserBox> </ResultWrapper> </Bigframe> </div> ) }너무 많이 루프했다고 뜹니다 ㅠㅠ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
graphql query가 안돼요
import {Bigframe, ResultWrapper, UserBox, UserInfo, Boundary } from "@/styles/emotion"; import { gql,useQuery } from "@apollo/client" import { useRouter } from "next/router" import{useState} from 'react' const FETCH_PRODUCT = gql` query fetchBoard($boardId: ID!){ fetchBoard(boardId:$boardId){ writer title contents createdAt } } ` export default function BulletinBoardFetch() { const router = useRouter() const[writer,setWriter]=useState("") const[creatDt,setCreatDt]=useState("") console.log(router.query.qqq) const{data}=useQuery(FETCH_PRODUCT,{ variables:{ boardId: `${router.query.qqq}` } }) console.log(data) setCreatDt(data.fetchBoard.createdAt) setWriter(data.fetchBoard.writer) return( <div> <Bigframe> <div> banner1 </div> <div> banner2 </div> <ResultWrapper> <UserBox> <img src="../../../public/userpic.png" alt=""/> <UserInfo> <Writer>{writer}</Writer> <CreateDate>{createDt}</CreateDate> </UserInfo> <img src="../../../public/clip.png" alt=""/> <img src="../../../public/location.png" alt=""/> <Boundary></Boundary> </UserBox> </ResultWrapper> </Bigframe> </div> ) }뭐가 문제인걸까요...ㅠㅠ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
노션페이지에 예전에 있었던 section 1,2,3이 없네요
일부러 삭제하신 건가요?오랜만에 복습하러 왔는데 안보이네요
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
타입에러 해결에 도움이 필요합니다.
필요한 정보를 넣어주고 회원가입 버튼을 누르면 saga 의 user.js 에서 signUp 에서 에러가 발생하는데 이유를 모르겠습니다.
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
조언 부탁드립니다.
안녕하세요. 혼자서는 결론을 내리지 못해 더 많은 경험과 고민을 한 제로초님께 조언을 구하고 싶습니다.제가 기존 코드에 Menu가 있었습니다. 그리고 이번에 타입스크립트로 마이그레이션 했는데 네이밍 컨벤션에 고민이 있습니다. 이 이름을 쓰는 곳은 총 4곳 입니다.menu - 데이터로 불러오는 menuMenu - 타입으로서 MenuMenu - 페이지(메뉴 상세 페이지)Menu - 메뉴 아이템(메뉴 리스트 안에 각각 뿌려지는 메뉴 아이템)사실 타입이 없을 때는 아래 2개의 파스칼 케이스의 Menu가 이름으로 겹칠 일이 없었습니다. 그러다가 타입을 도입 했는데, 타입인 Menu 같은 경우 제로초님이 요즘은 앞에 헝가리안 표기법으로 타입인지 인터페이스인지를 표기 안하는 추세라고 하시기도 했고, 프로그래밍에서 가장 중요한게 데이터라 생각해서 그 데이터의 타입은 그대로 쓰는게 좋다고 생각했습니다. 페이지 같은 경우에는 파일 명과 반드시 같은 필요가 없다 해서 라우팅할때 menu.tsx를 쓰더라도 파일 내부에서는 MenuPage로 명명했습니다.그리고 남은 컴포넌트가 문제인데 다른 강의를 봐도 MenuComponent 같은 이름 보단 다른 강의에서 List를 붙이시는거 보고 MenuItem으로 컴포넌트 명을 지으려고 하는데 괜찮을까요??감사합니다!!
-
미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
mode=production 빌드 시 문제 발생
안녕하세요, 원인을 도저히 모르겠어서 질문 남깁니다.mode를 production으로 했을 때만 아래 사진처럼 에러가 나는데요, 코드상에 문제가 있는지 한번 봐주실 수 있을까요?mode=development에서는 보시다시피 잘 나옵니다.아래는 소스코드입니다.package.json{ "name": "lecture-frontend-dev-env", "version": "1.0.0", "description": "\"프론트엔드 개발 환경의 이해\" 강의 자료입니다.", "main": ".eslintrc.js", "devDependencies": { "@babel/cli": "^7.21.0", "@babel/core": "^7.21.0", "@babel/preset-env": "^7.20.2", "babel-loader": "^9.1.2", "css-loader": "^6.7.3", "html-webpack-plugin": "^5.5.0", "mini-css-extract-plugin": "^2.7.2", "sass": "^1.58.3", "sass-loader": "^13.2.0", "style-loader": "^3.3.1", "webpack": "^5.75.0", "webpack-cli": "^5.0.1" }, "scripts": { "dev": "webpack --mode=development --config webpack.config.js", "build": "webpack --mode=production --config webpack.config.js" }, "repository": { "type": "git", "url": "git+https://github.com/jeonghwan-kim/lecture-frontend-dev-env.git" }, "keywords": [], "author": "", "license": "ISC", "bugs": { "url": "https://github.com/jeonghwan-kim/lecture-frontend-dev-env/issues" }, "homepage": "https://github.com/jeonghwan-kim/lecture-frontend-dev-env#readme", "dependencies": { "core-js": "^3.29.0" } }webpack.config.jsconst path = require("path"); const webpack = require("webpack"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); module.exports = (env, argv) => { const title = argv.mode === "development" ? "(개발용)" : ""; return { entry: { main: "./src/app.js", }, output: { filename: "[name].js", path: path.resolve(__dirname, "dist"), clean: true, }, module: { rules: [ { test: /\.s[ac]ss$/i, use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"], }, { test: /\.(png|svg|jpg|jpeg|gif)$/i, type: "asset", parser: { dataUrlCondition: { maxSize: 20 * 1024, // 20kb }, }, generator: { publicPath: "../dist/", }, }, { test: /\.js$/i, exclude: /node_modules/, use: { loader: "babel-loader", options: { configFile: path.resolve(__dirname, "babel.config.js") }, }, }, ], }, plugins: [ new webpack.BannerPlugin({ banner: `빌드 날짜: ${new Date().toLocaleString()}`, }), new HtmlWebpackPlugin({ template: "./src/index.html", templateParameters: { env: title }, }), new MiniCssExtractPlugin(), ], }; };babel.config.jsmodule.exports = { presets: [ [ "@babel/preset-env", { targets: { ie: 11 }, useBuiltIns: "usage", corejs: 3, }, ], ], };다른 폴더 및 파일은 건드리지 않았습니다.
-
해결됨[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
passport.authenticate('local/kakao') 관련 질문
안녕하세요routes/auth.js에서 passport.authenticate('local' / 'kakao')로 로그인전략을 실행할 때auth.js에서는 local(), kakao()가 있는 passport/index.js를 require 한 적이 없는데도 실행되는 걸 보고 질문드립니다.passport 모듈 내에 passport폴더를 자동으로 인식하는 기능이 있는건가요?
-
미해결MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
이미지 수정이 안되고 이전 이미지 경로가 안떠요 ㅜㅜ
(사진)
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
서버 터진건가요..
http://practice.codebootcamp.co.kr/graphql요청 보내면 502 에러 뜨네요ㅜㅜ확인 한번만 해주시면 감사하겠습니다...
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
비회원 장바구니 구현 리뷰
노션에 비회원 장바구니 구현 리뷰 코드 그대로 복붙해서 실행하면 에러400에 화면이 안뜹니다!
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
pgadmin4 질문입니다
현재 올려주신 pgadmin4 설정과 동일하게 값을 넣어도Undable to connect to server localhostfailed: 치명적오류: 사용자 "postgres"의 password인증을 실패했습니다라는 에러가 떠서 register server에서 방법을인터넷을 보고 제 ip주소도 넣어보고, pg_hba.conf에서 서버 확인하고 locahost, 127.0.0.1 두가지 모두 입력이 먹히지 않네요
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
Duplicate entry '2-349' for key 'posthashtag.PRIMARY'
음 .. 게시글 하나에 중복으로 된 해시태그를 2개 등록시 ex) #노드#노드 #익스프레스 DB Posts 테이블에는 데이터가 잘 등록되지만 해시태그 아래와 같은 에러가 발생됩니다. Hashtags 테이블에는 등록되지 않습니다.primary key 가 중복이라고 오류 나는 것 같은데 .. findOrCreate 는 DB상에 중복이 안되는거고 .. 생각나는 방법은 Set, filter, split, match, ... 등으로 중복 제거인데 .. findOrCreate 전에 중복제거 해줘야하는 부분일까요? Error at Query.run (/Users/jeondaewon/WebstormProjects/nodebird/prepare/back/node_modules/sequelize/lib/dialects/mysql/query.js:52:25) at /Users/jeondaewon/WebstormProjects/nodebird/prepare/back/node_modules/sequelize/lib/sequelize.js:314:28 at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async MySQLQueryInterface.bulkInsert (/Users/jeondaewon/WebstormProjects/nodebird/prepare/back/node_modules/sequelize/lib/dialects/abstract/query-interface.js:346:21) at async recursiveBulkCreate (/Users/jeondaewon/WebstormProjects/nodebird/prepare/back/node_modules/sequelize/lib/model.js:1663:25) at async PostHashtag.bulkCreate (/Users/jeondaewon/WebstormProjects/nodebird/prepare/back/node_modules/sequelize/lib/model.js:1752:12) at async Promise.all (index 0) at async BelongsToMany.add (/Users/jeondaewon/WebstormProjects/nodebird/prepare/back/node_modules/sequelize/lib/associations/belongs-to-many.js:516:30) at async /Users/jeondaewon/WebstormProjects/nodebird/prepare/back/routes/post.js:40:13 { name: 'SequelizeUniqueConstraintError', errors: [ ValidationErrorItem { message: 'PRIMARY must be unique', type: 'unique violation', path: 'PRIMARY', value: '2-358', origin: 'DB', instance: null, validatorKey: 'not_unique', validatorName: null, validatorArgs: [] } ], parent: Error: Duplicate entry '2-358' for key 'posthashtag.PRIMARY' at Packet.asError (/Users/jeondaewon/WebstormProjects/nodebird/prepare/back/node_modules/mysql2/lib/packets/packet.js:728:17) at Query.execute (/Users/jeondaewon/WebstormProjects/nodebird/prepare/back/node_modules/mysql2/lib/commands/command.js:29:26) at Connection.handlePacket (/Users/jeondaewon/WebstormProjects/nodebird/prepare/back/node_modules/mysql2/lib/connection.js:488:32) at PacketParser.onPacket (/Users/jeondaewon/WebstormProjects/nodebird/prepare/back/node_modules/mysql2/lib/connection.js:94:12) at PacketParser.executeStart (/Users/jeondaewon/WebstormProjects/nodebird/prepare/back/node_modules/mysql2/lib/packet_parser.js:75:16) at Socket.<anonymous> (/Users/jeondaewon/WebstormProjects/nodebird/prepare/back/node_modules/mysql2/lib/connection.js:101:25) at Socket.emit (node:events:513:28) at addChunk (node:internal/streams/readable:324:12) at readableAddChunk (node:internal/streams/readable:297:9) at Readable.push (node:internal/streams/readable:234:10) { code: 'ER_DUP_ENTRY', errno: 1062, sqlState: '23000', sqlMessage: "Duplicate entry '2-358' for key 'posthashtag.PRIMARY'", sql: "INSERT INTO `PostHashtag` (`createdAt`,`updatedAt`,`HashtagId`,`PostId`) VALUES ('2023-03-07 05:57:36','2023-03-07 05:57:36',3,358),('2023-03-07 05:57:36','2023-03-07 05:57:36',2,358),('2023-03-07 05:57:36','2023-03-07 05:57:36',2,358);", parameters: undefined }, original: Error: Duplicate entry '2-358' for key 'posthashtag.PRIMARY' at Packet.asError (/Users/jeondaewon/WebstormProjects/nodebird/prepare/back/node_modules/mysql2/lib/packets/packet.js:728:17) at Query.execute (/Users/jeondaewon/WebstormProjects/nodebird/prepare/back/node_modules/mysql2/lib/commands/command.js:29:26) at Connection.handlePacket (/Users/jeondaewon/WebstormProjects/nodebird/prepare/back/node_modules/mysql2/lib/connection.js:488:32) at PacketParser.onPacket (/Users/jeondaewon/WebstormProjects/nodebird/prepare/back/node_modules/mysql2/lib/connection.js:94:12) at PacketParser.executeStart (/Users/jeondaewon/WebstormProjects/nodebird/prepare/back/node_modules/mysql2/lib/packet_parser.js:75:16) at Socket.<anonymous> (/Users/jeondaewon/WebstormProjects/nodebird/prepare/back/node_modules/mysql2/lib/connection.js:101:25) at Socket.emit (node:events:513:28) at addChunk (node:internal/streams/readable:324:12) at readableAddChunk (node:internal/streams/readable:297:9) at Readable.push (node:internal/streams/readable:234:10) { code: 'ER_DUP_ENTRY', errno: 1062, sqlState: '23000', sqlMessage: "Duplicate entry '2-358' for key 'posthashtag.PRIMARY'", sql: "INSERT INTO `PostHashtag` (`createdAt`,`updatedAt`,`HashtagId`,`PostId`) VALUES ('2023-03-07 05:57:36','2023-03-07 05:57:36',3,358),('2023-03-07 05:57:36','2023-03-07 05:57:36',2,358),('2023-03-07 05:57:36','2023-03-07 05:57:36',2,358);", parameters: undefined }, fields: { PRIMARY: '2-358' }, sql: "INSERT INTO `PostHashtag` (`createdAt`,`updatedAt`,`HashtagId`,`PostId`) VALUES ('2023-03-07 05:57:36','2023-03-07 05:57:36',3,358),('2023-03-07 05:57:36','2023-03-07 05:57:36',2,358),('2023-03-07 05:57:36','2023-03-07 05:57:36',2,358);" } Error at Query.run (/Users/jeondaewon/WebstormProjects/nodebird/prepare/back/node_modules/sequelize/lib/dialects/mysql/query.js:52:25) at /Users/jeondaewon/WebstormProjects/nodebird/prepare/back/node_modules/sequelize/lib/sequelize.js:314:28 at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async MySQLQueryInterface.bulkInsert (/Users/jeondaewon/WebstormProjects/nodebird/prepare/back/node_modules/sequelize/lib/dialects/abstract/query-interface.js:346:21) at async recursiveBulkCreate (/Users/jeondaewon/WebstormProjects/nodebird/prepare/back/node_modules/sequelize/lib/model.js:1663:25) at async PostHashtag.bulkCreate (/Users/jeondaewon/WebstormProjects/nodebird/prepare/back/node_modules/sequelize/lib/model.js:1752:12) at async Promise.all (index 0) at async BelongsToMany.add (/Users/jeondaewon/WebstormProjects/nodebird/prepare/back/node_modules/sequelize/lib/associations/belongs-to-many.js:516:30) at async /Users/jeondaewon/WebstormProjects/nodebird/prepare/back/routes/post.js:40:13 POST /post 500 40.883 ms - 1306
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
수정등록페이지
Unhandled Runtime ErrorApolloError: Failed to fetch수정등록페이지 들어가면서 갑자기 이게 뜨는데 코드는 봐도 다 똑같은거 같은데 아니면 혹시 수업내용 코드만 따로 깃 이나 확인할 수 있나요?http://practice.codebootcamp.co.kr/graphql해당주소로 들어가니 Error: Server ErrorThe server encountered a temporary error and could not complete your request.Please try again in 30 seconds.라고 뜨고 있습니다.
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
formData 대신 객체로 보낼때
백엔드에 게시글 등록시 const upload = multer({...}) router 에서 upload.none() 를 사용하였습니다. 작성된 코드에서는 이미지 업로드 버튼을 누르고 이미지 선택 확인 누르는 순간 로컬에 저장되고 반환되어 프론트에서 imagePaths 에 담겨있습니다. 그 후 강의에선 imagePaths를 FormData에 담아서 보내고있는데 imagePaths는 텍스트만 들어있어서 객체로 보내보려고합니다.배열을 그대로 담으면 될 것 같아 dispatch({ type: ADD_POST_REQUEST, data: { imagePaths, content: text }, });이렇게 작성하여 보냈는데 Network에서도 성공이고 프론트에서도 오류나는것 없이 다 SUCCESS입니다. 게시글에는 사진이 나타나지 않습니다. 경로가 잘못된 것 같지는 않고 .. 어떤 문제가 있는걸까요? [등록 전][등록 후]
-
미해결테스트주도개발(TDD)로 만드는 NodeJS API 서버
슈퍼 테스트2 강의 질문입니다
describe('GET /users는', () => { it('user리스트를 limit만큼 가져왔다', (done) => { request(app) .get('/users') .end((err, res) => { console.log(res.body) done() // 우리가 만든 API서버는 비동기로 동작한다. 그래서 비동기에 대한 처리로 콜백함수를 호출해야 한다?? }) }) }) 강사님께서 콜백함수 done()을 호출하는 부분에서 다음과 같이 말하셨습니다..."우리가 만든 API서버는 비동기로 동작한다. 그래서 비동기에 대한 처리를 해야한다"그런데 done()이라는 콜백함수를 호출하는 것이 어떤의미에서 비동기에 대한 처린인지 이해가 가지않아 질문을 남깁니다.