묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결Slack 클론 코딩[백엔드 with NestJS + TypeORM]
passport 관련해서 여쭙니다.
프론트쪽에서 워크스페이스 유저 초대를 하면서버쪽에서는 해당 기능을 요청한 유저가 워크스페이스 오너인지 체크하려고 합니다..AuthGuard를 확장한 OwnerAuthGuard에서 워크스페이스 레포지터리를 임포트해 db조회해서요청자가 owner인지 아닌 지 체크하려고 하는 데 passport의 패턴에 어긋나거나 성능상의 문제가 있을까요?공식문서나 구글링을 해보면 전부 jwt나 아이디, 비밀번호 체크하는 것만 있어서 확실치 않아 질문 드립니다.@Injectable() export class OwnerAuthGuard extends AuthGuard('owner') { async canActivate(context: ExecutionContext): Promise<boolean> { const can = await super.canActivate(context); console.log('LocalAuthGuard can:' + can); if (can) { const request = context.switchToHttp().getRequest(); //여기서 세션에 저장된 id로 workspace테이블을 조회 } return true; } }
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
테이블 관계
안녕하세요예를 들어 MockUserRepository를 만들고 그 안에 mydb라는 데이터가 있습니다.만약 기존 User 테이블이 Post 테이블과 관계가 맺어져 있다면 Post까지 mydb에 담아야 하나요?mydb = [{ id= '', name:='', password= '' }] 이렇게 해야 하는 건지아니면 mydb = [{ id: '', name:'', password: '', post: { id: '', title: ''}] 이렇게 작성해야 하는 건지 궁금합니다!! 그리고 userService에서 postService를 사용하는 로직이 있는데 userService 테스트시 MockPost 테이블까지 같이 구현해야 하는 건지..아니면 다른 방법이 있는 건지ㅜㅜ 궁금하네요 하나만 더 여쭤보자면.. ㅜㅜ 제가 이해가 잘 안가서 그러는데 controller.ts를 테스트할 때는 service를 mock하고, service.ts를 테스트할 때는 데이터베이스를 mock해서 사용하는 건가요??
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
모바일의 경우 리디렉션에 대해 궁금증이 있습니다.
포트원 개발자 센터를 보면, 모바일의 경우 리디렉션을 하면서 쿼리스트링으로 imp_uid 등등의 데이터를 붙여서 보내주는걸로 보입니다. 해당 경우 리코일데이터를 비롯한 모든 데이터가 초기화 되지 않나요? 그렇다면, 로그인 정보를 비롯한 이런저런 데이터들은 어떻게 유지하고 있나요?로컬스토리지나 세션스토리지에 있는 엑세스토큰등을 이용해 아예 새롭게 데이터를 불러와야 하는걸까요?
-
미해결Slack 클론 코딩[백엔드 with NestJS + TypeORM]
.env 파일 추가 후 빈 화면이 뜹니다.
ConfigModule 사용하기(dotenv 진화판) 부분에서 4분 쯤에 .env 추가하셔서 설정하시는 부분에서 막혔습니다. @nestjs/config모듈은 설치된 상태입니다.import { Module } from '@nestjs/common'; import { ConfigModule } from '@nestjs/config'; import { AppController } from './app.controller'; import { AppService } from './app.service'; @Module({ imports: [ConfigModule.forRoot()], controllers: [AppController], providers: [AppService], }) export class AppModule {} app.controller.tsimport { Controller, Get } from '@nestjs/common'; import { AppService } from './app.service'; @Controller() export class AppController { constructor(private readonly appService: AppService) {} @Get() getHello() { return this.appService.getHello(); } } .envSECRET=안녕하세요packge.json{ "name": "a-nest", "version": "0.0.1", "description": "", "author": "", "private": true, "license": "UNLICENSED", "scripts": { "build": "nest build", "format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"", "start": "nest start", "start:dev-backup": "nest start --watch", "start:dev": "nest build --webpack --webpackPath webpack-hmr.config.js --watch", "start:debug": "nest start --debug --watch", "start:prod": "node dist/main", "lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix", "test": "jest", "test:watch": "jest --watch", "test:cov": "jest --coverage", "test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand", "test:e2e": "jest --config ./test/jest-e2e.json" }, "dependencies": { "@nestjs/common": "^10.0.0", "@nestjs/config": "^3.1.1", "@nestjs/core": "^10.0.0", "@nestjs/platform-express": "^10.0.0", "reflect-metadata": "^0.1.13", "rxjs": "^7.8.1" }, "devDependencies": { "@nestjs/cli": "^10.0.0", "@nestjs/schematics": "^10.0.0", "@nestjs/testing": "^10.0.0", "@types/express": "^4.17.17", "@types/jest": "^29.5.2", "@types/node": "^20.3.1", "@types/supertest": "^2.0.12", "@typescript-eslint/eslint-plugin": "^6.0.0", "@typescript-eslint/parser": "^6.0.0", "dotenv": "^16.3.1", "eslint": "^8.42.0", "eslint-config-prettier": "^9.0.0", "eslint-plugin-prettier": "^5.0.0", "jest": "^29.5.0", "prettier": "^3.0.0", "run-script-webpack-plugin": "^0.2.0", "source-map-support": "^0.5.21", "supertest": "^6.3.3", "ts-jest": "^29.1.0", "ts-loader": "^9.4.3", "ts-node": "^10.9.1", "tsconfig-paths": "^4.2.0", "typescript": "^5.1.3", "webpack": "^5.89.0", "webpack-node-externals": "^3.0.0" }, "jest": { "moduleFileExtensions": [ "js", "json", "ts" ], "rootDir": "src", "testRegex": ".*\\.spec\\.ts$", "transform": { "^.+\\.(t|j)s$": "ts-jest" }, "collectCoverageFrom": [ "**/*.(t|j)s" ], "coverageDirectory": "../coverage", "testEnvironment": "node" } } 코드 작성 후 서버를 재실행 시켰고, 빈 하얀 화면이 출력되는 상태입니다. 제가 놓친 부분이 있을까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
yarn start:dev 실행시 에러
포스트맨에서 요청하려는데 어느 부분이 문제여서 에러가 난걸까요?일단 어느부분을 보셔야 해결해주실 수 있으실지 모르겠어서 캡처를 2개 했습니다.
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
로그인 실패 에러 (500 Internal Server Error)
회원가입 시 MySQL 테이블에 이메일, 비밀번호 저장되는 것을 확인하고 로그인을 시도했는데 계속 실패해서 질문드립니다 MySQL 워크벤치로 확인한 user 테이블을 보면 회원가입은 잘 되었는데 id: 2 의 메일, 비밀번호로 로그인이 안 됩니다 console.log로 확인해보니까 패스포트 로그인 시도에서 에러가 나는 것 같기는 한데 정확한 원인을 못 찾겠습니다.. 터미널에 뜨는 메시지입니다개발자도구_네트워크 화면입니다개발자도구_콘솔 화면입니다 의심스러운 코드입니다!routes/user.js 코드const express = require('express'); const bcrypt = require('bcrypt'); const passport = require('passport'); const { User } = require('../models'); const router = express.Router(); router.post('/login', (req, res, next) => { passport.authenticate('local', (err, user, info) => { if (err) { //서버쪽 에러 console.error(err); console.log('routes/user_server err') return next(err); } if (info) { //클라이언트쪽 에러 return res.status(401).send(info.reason); } return req.login(user, async (loginErr) => { if (loginErr) { //패스포트 로그인 에러 console.error(loginErr); console.log('routes/user_loginErr') return next(loginErr); } // res.setHeader('Cookie', 'cxlhy..랜덤토큰') return res.status(200).json(user); }); })(req, res, next); }); router.post('/', async (req, res, next) => { // POST /user try { const exUser = await User.findOne({ where: { email: req.body.email, } }); if (exUser) { return res.status(403).send('이미 가입된 메일입니다.'); } const hashedPassword = await bcrypt.hash(req.body.password, 10); //10~13 await User.create({ email: req.body.email, nickname: req.body.nickname, password: hashedPassword, }); res.status(201).send('OK'); } catch (error) { console.error(error); next(error); //next로 에러 처리 (한방에), status 500 } }); module.exports = router; app.js 코드const express = require('express'); const cors = require('cors'); const session = require('express-session'); const cookieParser = require('cookie-parser'); const passport = require('passport'); const dotenv = require('dotenv'); const postRouter = require('./routes/post'); const userRouter = require('./routes/user'); const db = require('./models'); const passportConfig = require('./passport'); dotenv.config(); const app = express(); db.sequelize.sync() .then(() => { console.log('db 연결 성공'); }) .catch(console.error); passportConfig(); app.use(cors({ origin: 'http://localhost:3000', credentials: false, })); app.use(express.json()); app.use(express.urlencoded({ extended: true })); app.use(cookieParser(process.env.COOKIE_SECRET)); app.use(session({ saveUninitialized: false, resave: false, secret: process.env.COOKIE_SECRET, })); app.use(passport.initialize()); app.use(passport.session()); ~이하생략~ passport/index.js 코드const passport = require('passport'); const local = require('./local'); const { User } = require('../models'); module.exports = () => { passport.serializeUser((user, done) => { done(null, user.id); }); passport.deserializeUser(async (id, done) => { try { const user = await User.findOne({ where: { id } }); done(null, user); //req.user } catch (error) { console.error(error); done(error); } }); local(); }; passport/local.js 코드const passport = require('passport'); const { Strategy: LocalStrategy } = require('passport-local'); const bcrypt = require('bcrypt'); const { User } = require('../models'); module.exports = () => { passport.use(new LocalStrategy({ usernameField: 'email', //id칸 passwordField: 'password', //비밀번호칸 }, async (email, password, done) => { //done으로 결과 판단 try { const user = await User.findOne({ //가입된 이메일이 있는지 검사 where: { email } }); if (!user) { return done(null, false, { reason: '존재하지 않는 이메일입니다.' }); } const result = await bcrypt.compare(password, user.password) if (result) { return done(null, user); } return done(null, false, { reason: '비밀번호가 일치하지 않습니다.' }); } catch (error) { console.error(error); return done(error); } })); };
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
setStatus, 콜백함수, 변수 스코프에 대해 질문드립니다.
강사님 안녕하세요항상 상세한 답변을 주시는 점 감사드립니다.아래의 코드를 보고 질문을 받아주시면 감사하겠습니다.import './App.css'; import Counter from './Counter'; import Container from './Container'; import {useEffect, useState} from "react"; import MyHeader from './MyHeader.js' export default function App() { const [state, setState] = useState({ a: 0, b: 0 }); const onClick = () => { const c=10; setState(c=>({ a: c + 1 })); }; return ( <div className="App"> <div>a : {state.a}</div> <button onClick={onClick}>증가</button> </div> ); }1번째 경우원래는 아래의 코드처럼 setState의 콜백함수의 인자에 state를 넣는 게 맞습니다.const c=10; setState(state=>({ a: c + 1 // 이 줄의 c는 1번째 줄의 c를 가리키므로 a: 10 + 1 과 같습니다. }));이때는 a:c+1에서의 c가 함수 밖에 선언된 맨위의 const c= 10의 c를 가리킵니다. 2번째 경우 일부러 setState의 콜백함수의 인자를 state가 아닌 c로 적어봤습니다.const c=10; setState(c=>({ //이 부분 변경 state 를 지우고 c로 a: c + 1 // 이 줄에서의 c는 1번째 줄의 c를 가리키지 않습니다. }));그러자 a: c + 1 에서의 c는 1번째 줄의 c가 아닌, 콜백함수 인자로 들어간 2번째 줄의 c를 가리킵니다.그래서 변수의 스코프를 공부하고 싶어서 조언을 구하고 싶습니다. 1번째 질문을 드립니다.변수가 const, let, var 인지에 따라서 스코프가 다른 것으로 아는데콜백함수의 인자로 들어간 변수는 const인지 let인지, var 인지 질문드리고 싶습니다. 2번째 질문을 드립니다.이 부분에 대해 학습하면 좋을 자료 링크를 추천해주시면 감사하겠습니다.저도 현재 변수 스코프에 대해 다시 공부하는 중입니다.3번째 질문을 드립니다.const c=10; setState(c=>({ //이 부분 변경 state 를 지우고 c로 a: c + 1 // 이 줄에서의 c는 1번째 줄의 c를 가리키지 않습니다. })); 에서2번째 줄의 콜백함수 인자의 c는 1번째 줄의 c를 가리키지 못하는 이유에 대해 질문드리고 싶습니다.4번째 질문을 드립니다.const c=10; setState(state=>({ //이 부분 변경 state 를 지우고 c로 a: c + 1 // 이 줄에서의 c는 1번째 줄의 c를 가리키지 않습니다. }));3번째 줄의 c는 1번째 줄의 c를 가리킬 수 있는 이유에 대해 질문드리고 싶습니다감사합니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
newaccessToken 질문드립니다
만약에 지금 발급된 accessToken 이 만료되지 않은 상황이라면 해당 강의에서의 aaa.toPromise().then((newAccessToekn) =>{}) 함수 실행시에 newAccessToken 이 발급되지 않는 걸까요?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 챗봇 사이트 만들기
dialogflow 줄바꿈
dialogflow에서 작성한 text reaponse에서 줄바꿈은 shift+enter로 무사히 되어있고, postman으로 확인했을 때도 되어있는데요노드리액트로 만든 localhost페이지에서는 자꾸 줄바꿈이 안되고 통째로 떠요,,왜 이럴까요ㅠ
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
npm run dev 동작에러납니다...
PS C:\Users\Desktop\boilerplate-mern-stack> yarn dev yarn run v1.22.19 $ concurrently "npm run backend" "npm run start --prefix client" [1] [1] > client@0.1.0 start [1] > react-scripts start [1] [0] [0] > react-boiler-plate@1.0.0 backend [0] > nodemon server/index.js [0] [0] [nodemon] 1.19.4 [0] [nodemon] to restart at any time, enter `rs` [0] [nodemon] watching dir(s): *.* [0] [nodemon] watching extensions: js,mjs,json [0] [nodemon] starting `node server/index.js` [0] Server Listening on 5000 [0] MongooseError: The `uri` parameter to `openUri()` must be a string, got "undefined". Make sure the first parameter to `mongoose.connect()` or `mongoose.createConnection()` is a string. [0] at Connection.openUri (C:\Users\Desktop\boilerplate-mern-stack\node_modules\mongoose\lib\connection.js:694:11) [0] at C:\Users\Desktop\boilerplate-mern-stack\node_modules\mongoose\lib\index.js:351:10 [0] at C:\Users\Desktop\boilerplate-mern-stack\node_modules\mongoose\lib\helpers\promiseOrCallback.js:32:5 [0] at new Promise (<anonymous>) [0] at promiseOrCallback (C:\Users\Desktop\boilerplate-mern-stack\node_modules\mongoose\lib\helpers\promiseOrCallback.js:31:10) [0] at Mongoose._promiseOrCallback (C:\Users\Desktop\boilerplate-mern-stack\node_modules\mongoose\lib\index.js:1149:10) [0] at Mongoose.connect (C:\Users\Desktop\boilerplate-mern-stack\node_modules\mongoose\lib\index.js:350:20) [0] at Object.<anonymous> (C:\Users\Desktop\boilerplate-mern-stack\server\index.js:19:4) [0] at Module._compile (node:internal/modules/cjs/loader:1233:14) [0] at Module._extensions..js (node:internal/modules/cjs/loader:1287:10) [0] at Module.load (node:internal/modules/cjs/loader:1091:32) [0] at Module._load (node:internal/modules/cjs/loader:938:12) [0] at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:83:12) [0] at node:internal/main/run_main_module:23:47 [1] [HPM] Proxy created: / -> http://localhost:5000 [1] i 「wds」: Project is running at http://192.999.111.116/ [1] i 「wds」: webpack output is served from [1] i 「wds」: Content not from webpack is served from C:\Users\Desktop\boilerplate-mern-stack\client\public [1] i 「wds」: 404s will fallback to / [1] Starting the development server... [1] [1] Error: error:0308010C:digital envelope routines::unsupported [1] at new Hash (node:internal/crypto/hash:69:19) [1] at Object.createHash (node:crypto:138:10) [1] at module.exports (C:\Users\Desktop\boilerplate-mern-stack\client\node_modules\webpack\lib\util\createHash.js:135:53) [1] at NormalModule._initBuildHash (C:\Users\Desktop\boilerplate-mern-stack\client\node_modules\webpack\lib\NormalModule.js:417:16) [1] at handleParseError (C:\Users\Desktop\boilerplate-mern-stack\client\node_modules\webpack\lib\NormalModule.js:471:10) [1] at C:\Users\Desktop\boilerplate-mern-stack\client\node_modules\webpack\lib\NormalModule.js:503:5 [1] at C:\Users\Desktop\boilerplate-mern-stack\client\node_modules\webpack\lib\NormalModule.js:358:12 [1] at C:\Users\Desktop\boilerplate-mern-stack\client\node_modules\loader-runner\lib\LoaderRunner.js:373:3 [1] at iterateNormalLoaders (C:\Users\Desktop\boilerplate-mern-stack\client\node_modules\loader-runner\lib\LoaderRunner.js:214:10) [1] at iterateNormalLoaders (C:\Users\Desktop\boilerplate-mern-stack\client\node_modules\loader-runner\lib\LoaderRunner.js:221:10) [1] C:\Users\Desktop\boilerplate-mern-stack\client\node_modules\react-scripts\scripts\start.js:19 [1] throw err; [1] ^ [1] [1] Error: error:0308010C:digital envelope routines::unsupported [1] at new Hash (node:internal/crypto/hash:69:19) [1] at Object.createHash (node:crypto:138:10) [1] at module.exports (C:\Users\Desktop\boilerplate-mern-stack\client\node_modules\webpack\lib\util\createHash.js:135:53) [1] at NormalModule._initBuildHash (C:\Users\Desktop\boilerplate-mern-stack\client\node_modules\webpack\lib\NormalModule.js:417:16) [1] at C:\Users\Desktop\boilerplate-mern-stack\client\node_modules\webpack\lib\NormalModule.js:452:10 [1] at C:\Users\Desktop\boilerplate-mern-stack\client\node_modules\webpack\lib\NormalModule.js:323:13 [1] at C:\Users\Desktop\boilerplate-mern-stack\client\node_modules\loader-runner\lib\LoaderRunner.js:367:11 [1] at C:\Users\Desktop\boilerplate-mern-stack\client\node_modules\loader-runner\lib\LoaderRunner.js:233:18 [1] at context.callback (C:\Users\Desktop\boilerplate-mern-stack\client\node_modules\loader-runner\lib\LoaderRunner.js:111:13) [1] at C:\Users\Desktop\boilerplate-mern-stack\client\node_modules\react-scripts\node_modules\babel-loader\lib\index.js:59:103 { [1] opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ], [1] library: 'digital envelope routines', [1] reason: 'unsupported', [1] code: 'ERR_OSSL_EVP_UNSUPPORTED' [1] } [1] [1] Node.js v20.5.1 [1] npm run start --prefix client exited with code 1반나절 넘게 이 오류만 붙잡고 있었는데 해결이 안되네요...사이트에 연결할 수 없음연결이 재설정되었습니다.다음 방법을 시도해 보세요.연결 확인프록시 및 방화벽 확인Windows 네트워크 진단 프로그램 실행브라우저에서 위와 같이 뜨는데 이유가 뭘까요....
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
수업 정답코드좀 알려주세요
이부분 이거 말고도 소과제 있는 부분 전부 다 정답코드 어디에 있나요? 아무리 찾아도 안나와요 자세한 경로좀 알려주세요
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
페이지구현 - 일기수정(Edit) 수정 에러 질문
정환님 안녕하세요.질문이 있습니다.DiaryEditor 컴포넌트로 onCreate, onEdit 함수를 전달하여일기를 생성, 수정 하는데요.이때, 일기 생성 후, 일기를 수정 하면 수정된 일기 + 수정된 일기가 1개 더 추가 생성이 되는 에러가 발생하여서요.어떤 부분이 문제인지 짐작이 안갑니다. ㅠㅠ아래 코드 캡쳐본 첨부드립니다.답변주시면 감사하겠습니다.그리고 강의 잘 듣고있습니다. 좋은 강의 감사합니다 :) App 컴포넌트Edit 컴포넌트DiaryEditor 컴포넌트
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
섹션 13 대댓글 과제 관련 질문
안녕하세요 과제로 받은 자유게시판 대댓글 기능 구현과 관련한 질문이 있어 글 남깁니다 우선 포트폴리오 과제를 진행할 때 사용하는 플레이그라운드 주소는https://backend-practice.codebootcamp.co.kr/graphql다음과 같습니다 플레이그라운드를 확인해보니 대댓글과 관련된 쿼리와 뮤테이션은UseditemQuestions, UseditemQuestionAnswers 인 것 같은데요대댓글과 관련된 다른 질문들을 통해 댓글=질문, 대댓글=질문에 대한 답변으로 생각하면 된다는 답변을 보았습니다 현재 자유게시판 댓글과 관련된 과제를 진행할 때 사용한 쿼리와 뮤테이션은BoardComments 인데요그러면 BoardComment 쿼리와 뮤테이션을 사용해 구현한 댓글 기능을 UseditemQuestion으로 변경해야 대댓글 기능을 구현할 수 있는 건가요?
-
미해결[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
댓글 삭제 시 애니메이션 추가하고싶습니다.
안녕하세요. 현재 댓글 수정, 삭제 구현중에 있습니다.강의 과정에는 없지만 추가적으로 궁금한 부분이 있어 질문 드립니다. 댓글을 삭제하는 경우, 바로 반영되어 댓글이 삭제되기는 하나애니메이션을 적용시켜 천천히 사라지며 삭제되는 코드를 짜고싶습니다.현재 TransitionGroup, CSSTransition, keyframes 컴포넌트를 사용해애니메이션은 적용이 되고 있으나, 삭제시 삭제되는 해상 댓글에만 적용하기는 너무 어렵네요생각하기로는, 해당 댓글의 id 값을 스타일시트로 받아와서 스타일시트에서 해당 _id의 댓글만 애니메이션을 적용하면 될 것 같은데 생각대로 되지 않는 것 같습니다.어떻게 하면 좋을지 힌트라도 얻을 수 있을까요? import { getDateTime } from '../../../../commons/libraries/utils'; import * as S from './BoardCommentDetail.styles'; import { TransitionGroup, CSSTransition } from 'react-transition-group'; import { useEffect } from 'react'; export default function BoardCommentDetailUI(props) { useEffect(() => { // 댓글이 변경될 때 추가적인 정리 또는 부작용을 수행할 수 있습니다. }, [props.data?.fetchBoardComments]); return ( <div> <TransitionGroup> {props.data?.fetchBoardComments.map((el) => ( <CSSTransition> <S.CommentWrapper> <S.Comment> <S.ProfileImg> <img src={`/img/profileIcon.svg`} width={48} height={48} /> </S.ProfileImg> <S.CommentContentsArea> <S.CommentContentsWriter> <S.ContentsWriter>{el.writer}</S.ContentsWriter> <S.ContentsRate value={el.rating} disabled /> </S.CommentContentsWriter> <S.CommentContents>{el.contents}</S.CommentContents> <S.CommentDate>{getDateTime(el.createdAt)}</S.CommentDate> </S.CommentContentsArea> <S.WriterIconWrapper> <img src={`/img/mode-24px.svg`} /> </S.WriterIconWrapper> <S.WriterIconWrapper id={el._id} onClick={() => props.onClickDeleteComment(el._id)} > <img src={`/img/clear-24px.svg`} /> </S.WriterIconWrapper> </S.Comment> </S.CommentWrapper> </CSSTransition> ))} </TransitionGroup> </div> ); }import { useMutation, useQuery } from '@apollo/client'; import { FETCH_BOARD_COMMENTS, DELETE_BOARD_COMMENT, } from './BoardCommentDetail.queries'; import { useRouter } from 'next/router'; import BoardCommentDetailUI from './BoardCommentDetail.presenter'; import { useState } from 'react'; export default function BoardCommentDetail() { const router = useRouter(); const [commentIdToDelete, setCommentIdToDelete] = useState(null); const { data, refetch } = useQuery(FETCH_BOARD_COMMENTS, { variables: { boardId: router.query.boardId }, }); const [deleteBoardComment] = useMutation(DELETE_BOARD_COMMENT); const onClickDeleteComment = async (commentId) => { setCommentIdToDelete(commentId); const isConfirmed = window.confirm('댓글을 삭제하시겠습니까?'); if (isConfirmed) { try { const passwordConfirmation = prompt('비밀번호를 입력하세요'); await deleteBoardComment({ variables: { boardCommentId: commentId, password: passwordConfirmation, }, }); alert('댓글이 삭제되었습니다.'); refetch(); } catch (error) { console.error('댓글 삭제 중 오류 발생', error); } } }; return ( <BoardCommentDetailUI data={data} onClickDeleteComment={onClickDeleteComment} /> ); }
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
15:24 초에 createBoard 값으로 받은 result 값
15:24 초에 createBoard 값으로 받은 result 값을콘솔에 찍어보면data.createBoard 값에 저장된 값이_typename , _id 값 두개만 보이는데백엔드 API 설계 당시에 뮤테이션의 리턴값으로 저 2개의 ㄱ값만 리턴하도록 설정되어 있는 건가요? 아님 요약 정보만 추려서 보여주는 건가요?
-
미해결Slack 클론 코딩[백엔드 with NestJS + TypeORM]
절대경로 사용시 문제점 질문
직접 생성한 모듈 파일을 불러올 때 절대 경로를 사용한다면 node_modules에서 찾기 때문에 유효하지 않다고 했는데, 이게 제스트로 실행할 때만 문제가 되고, 노드로 그냥 실행시킬 때에는 문제가 되지 않는 이유는 뭔가요? 노드로 그냥 실행시킬 때에도 node_modules에서 해당 모듈 파일을 찾아서 에러가 발생해야 하는 것이 아닌가요?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
무한 루프 에러 질문드립니다.!
import React, { useState, useEffect, useContext, useRef } from "react"; import { useNavigate } from "react-router-dom"; import axios from "axios"; import { BbsSettingContext } from "../common/Board"; import ToastEditor from "../component/ToastEditor"; import MyButton from "../common/ComButton"; const BoardView = ({ postId }) => { const titleInputRef = useRef(); const contentsAreaRef = useRef(); const toastEditorRef = useRef(); // ToastEditor의 ref const [post, setPost] = useState({ nttSj: "", nttCn: "", regDate: "", }); const [boardSetting, setBoardSetting] = useState(null); const boardSetData = useContext(BbsSettingContext); const Navigate = useNavigate(); const formatDate = (timestamp) => { const date = new Date(timestamp); const options = { year: "numeric", month: "long", day: "numeric" }; return date.toLocaleDateString("ko-KR", options); }; useEffect(() => { if (boardSetData) { setBoardSetting(boardSetData); axios .get(`http://localhost:8080/board/${boardSetData.bbsId}/post/${postId}`) .then((response) => { setPost({ nttSj: response.data.post.nttSj, nttCn: response.data.post.nttCn, regDate: response.data.post.regDate, }); }) .catch((error) => console.log(error)); } }, [post]); return ( <div className="BoardView"> <div className="upInfoArea"> <div type="text" name="boardTitle" className="titleDiv"> {post.nttCn} </div> <div type="text" name="regId" className="regIdDIv"> {formatDate(post.regDate)} </div> </div> <div className="contentArea"> <div className="contentsText">{post.nttCn}</div> </div> <section> <div className="btnArea"> <MyButton text={"리스트이동"} onClick={() => Navigate(-1)} /> <MyButton text={"수정하기"} type="positive" /> </div> </section> </div> ); }; export default BoardView; 질문이 있는데 useEffect에서 [post]로 하면 무한 루프가 돌고 저런식으로 [boardSetData,post.postId,post.nttSj,post.nttCn] 으로 놓으면 무한루프가 돌지 않는데 이유를 알수 있을까요 ...postId는 글번호 nttSj 제목 , nttCn 제목이며 const boardSetData = useContext(BbsSettingContext);여기서 boardSetData는 게시판 셋팅 데이터 입니다 .왜 무한 루프가 도는지 알수있을까요 .게시판 셋팅 , 글제목, 글번호 글내용이 바뀌면 useEffect의 axios가 전송 되어야 하게 할려고 합니다 근데 무한 루프가 도네요 ...
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
서버 실패시, 패스포트 로그인 실패시 통합테스트 방법
exports.login = (req, res, next) => { passport.authenticate('local', (authError, user, info) => { // 1. 서버 실패 부분 if (authError) { console.error(authError); return next(authError); } if (!user) { return res.redirect(`/?error=${info.message}`); } return req.login(user, (loginError) => { //2. 패스포트 로그인 실패 if (loginError) { console.error(loginError); return next(loginError); } return res.redirect('/'); }); })(req, res, next); }; --------------------- 1번과 2번은 통합테스트 코드로 어떻게 테스트 코드를 작성해야 하는지 여쭤봐도 될까요? 1번은 try - catch 로 어떻게 해보려해도 생각이 안나용 2번은 아애 생각이 안납니다 ㅜㅜ controllers를 자체를 단위테스트를 하는 것이 아니라 분기마다 test를 작성하라고 하신 말씀에 이 부분은 통합테스트로 코드를 짤 수 있나 의문이 들어서요! 감사합니다
-
미해결Slack 클론 코딩[백엔드 with NestJS + TypeORM]
유저 컨트롤러 코드 질문
깃허브 코드를 보면 @ApiOperation({ summary: '회원가입' }) @UseGuards(NotLoggedInGuard) @Post() async join(@Body() data: JoinRequestDto) { const user = this.usersService.findByEmail(data.email); if (!user) { throw new NotFoundException(); } const result = await this.usersService.join( data.email, data.nickname, data.password, ); if (result) { return 'ok'; } else { throw new ForbiddenException(); } } 이런데 여기서 user가 없는데 왜 NotFoundException()을 날리는 건가요? user가 없으면 그대로 join하여 사용자 등록을 해야 하는 것이 아닌가요?
-
해결됨Slack 클론 코딩[백엔드 with NestJS + TypeORM]
package.json / "scripts" / schema:drop, schma:sync에 `-d ./dataSource.ts` 옵션을 넣지 않으신 이유가 있으신가요?
테이블 삭제도 시도해보고 싶어서 터미널에$ npm run schema:drop 을 입력하였더니 아래와 같은 내용이 나왔습니다.Drops all tables in the database on your default dataSource. To drop table of a concrete connection's database use -c option. 옵션: -h, --help 도움말 표시 [불리언] -d, --dataSource Path to the file where your DataSource instance is defined. [필수] -v, --version 버전 표시 [불리언] 필수 인수가 주어지지 않았습니다: dataSource dataSource가 주어지지 않았다고 해서 살펴보다package.json/scripts/schema에 다른 명령어들과는 다르게 경로가 지정되어 있지 않는것 같아아래와 같이 수정했고, { "scripts": { "seed": "ts-node ./node_modules/typeorm-extension/bin/cli.cjs seed:run -d ./dataSource.ts", "schema:drop": "ts-node ./node_modules/typeorm/cli.js schema:drop -d ./dataSource.ts", "schema:sync": "ts-node ./node_modules/typeorm/cli.js schema:sync", } } 테이블 삭제에 성공했습니다.$ npm run schema:drop > a-nest@0.0.1 schema:drop > ts-node ./node_modules/typeorm/cli.js schema:drop -d ./dataSource.ts query: SELECT VERSION() AS `version` query: SELECT * FROM `INFORMATION_SCHEMA`.`SCHEMATA` WHERE `SCHEMA_NAME` = '00_nestjs_typeorm' query: START TRANSACTION query: SELECT concat('DROP VIEW IF EXISTS `', table_schema, '`.`', table_name, '`') AS `query` FROM `INFORMATION_SCHEMA`.`VIEWS` WHERE `TABLE_SCHEMA` = '00_nestjs_typeorm' query: SELECT concat('DROP TABLE IF EXISTS `', table_schema, '`.`', table_name, '`') AS `query` FROM ` `INFORMATION_SCHEMA`.`TABLES` WHERE `TABLE_SCHEMA` = '00_nestjs_typeorm' INFORMATION_SCHEMA`.`TABLES` WHERE `TABLE_SCHEMA` = '00_nestjs_typeorm' query: DROP TABLE IF EXISTS `00_nestjs_typeorm`.`channelchats` query: DROP TABLE IF EXISTS `00_nestjs_typeorm`.`channelmembers` query: DROP TABLE IF EXISTS `00_nestjs_typeorm`.`channels` query: DROP TABLE IF EXISTS `00_nestjs_typeorm`.`dms` query: DROP TABLE IF EXISTS `00_nestjs_typeorm`.`mentions` query: DROP TABLE IF EXISTS `00_nestjs_typeorm`.`migrations` query: DROP TABLE IF EXISTS `00_nestjs_typeorm`.`users` query: DROP TABLE IF EXISTS `00_nestjs_typeorm`.`workspacemembers` query: DROP TABLE IF EXISTS `00_nestjs_typeorm`.`workspaces` query: SET FOREIGN_KEY_CHECKS = 1; query: COMMIT Database schema has been successfully dropped. 혹시 schema:drop, schema:sync 명령어에 경로를 지정하지 않으신 이유가 있으신지,경로를 빼놓은 상태로 유지하다가, 정말 필요할 때에만 경로 지정하고 명령어를 사용하는게 좋은지가 궁금합니다. 실수로 입력해서 데이터 손실이 발생하는 것을 막기 위해서일까요?