묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
프로젝트에 사용할 상태와 로직 관리 라이브러리 훅 사용 질문입니다.
로그인 및 인증,인가(세션,jwt둘다 사용), 게시판(이미지포함), 댓글, 소켓채팅 정도의 기능을 구현하여 테스트 코드와 docker로 띄워서 CI/CD까지 구현하려고 합니다.상태랑 로직 관리를 useReducer, React Context API, React Query, redux, graphql 정도로 생각하고 있는데 어떤걸로 하는게 좋을까요?!
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
프로젝트에 사용할 상태와 로직 관리 라이브러리 훅 사용 질문입니다.
로그인 및 인증,인가(세션,jwt둘다 사용), 게시판(이미지포함), 댓글, 소켓채팅 정도의 기능을 구현하여 테스트 코드와 docker로 띄워서 CI/CD까지 구현하려고 합니다.상태랑 로직 관리를 useReducer, React Context API, React Query, redux, graphql 정도로 생각하고 있는데 어떤걸로 하는게 좋을까요?!
-
미해결Slack 클론 코딩[백엔드 with NestJS + TypeORM]
npm run seed 실행해도 테이블의 기본값이 생성되지 않는 이유가 뭔가요..??
안녕하세요.npm run seed를 실행하면 아래와 같은 내용만 나오고 기본 값 생성이 되지 않습니다. 에러 메세지가 Unknown arguments: d, seed 이것뿐인 것 같은데.. 알 수 없는 인수.. d, seed가 무슨 말인지 모르겠습니다.a-nest@0.0.1 seed > ts-node ./node_modules/typeorm-extension/bin/cli.cjs seed -d ./dataSource.ts Usage: typeorm-extension <command> [options] Commands: typeorm-extension db:create Create database. typeorm-extension db:drop Drop database. typeorm-extension seed:run Populate the database with an initial data set or generated data by a factory. typeorm-extension seed:create Create a seeder file. Options: -h, --help Show help [boolean] -v, --version Show version number [boolean] Unknown arguments: d, seed dataSource.tsimport { DataSource } from 'typeorm'; import dotenv from 'dotenv'; import { ChannelChats } from './src/entities/ChannelChats'; import { ChannelMembers } from './src/entities/ChannelMembers'; import { Channels } from './src/entities/Channels'; import { DMs } from './src/entities/DMs'; import { Mentions } from './src/entities/Mentions'; import { Users } from './src/entities/Users'; import { WorkspaceMembers } from './src/entities/WorkspaceMembers'; import { Workspaces } from './src/entities/Workspaces'; dotenv.config(); const dataSource = new DataSource({ type: 'mysql', host: 'localhost', port: 3306, username: process.env.DB_USERNAME, password: process.env.DB_PASSWORD, database: process.env.DB_DATABASE, entities: [ ChannelChats, ChannelMembers, Channels, DMs, Mentions, Users, WorkspaceMembers, Workspaces, ], migrations: [__dirname + '/src/migrations/*.ts'], charset: 'utf8mb4_general_ci', synchronize: false, logging: true, }); export default dataSource; create-initial-data.tsimport { Seeder, SeederFactoryManager } from 'typeorm-extension'; import { DataSource } from 'typeorm'; import { Workspaces } from '../../entities/Workspaces'; import { Channels } from '../../entities/Channels'; export default class UserSeeder implements Seeder { public async run( dataSource: DataSource, factoryManager: SeederFactoryManager, ): Promise<any> { const workspacesRepository = dataSource.getRepository(Workspaces); await workspacesRepository.insert([ { id: 1, name: 'Sleact', url: 'sleact', }, ]); const channelsRepository = dataSource.getRepository(Channels); await channelsRepository.insert([ { id: 1, name: '일반', WorkspaceId: 1, private: false, }, ]); } } .envSECRET=제로초강의 PORT=3095 DB_USERNAME=root DB_PASSWORD=password DB_DATABASE=sleact package.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", "typeorm": "node --require ts-node/register ./node_modules/typeorm/cli.js", "db:create": "ts-node ./node_modules/typeorm-extension/bin/cli.cjs db:create -d ./dataSource.ts", "db:drop": "ts-node ./node_modules/typeorm-extension/bin/cli.cjs db:drop -d ./dataSource.ts", "seed": "ts-node ./node_modules/typeorm-extension/bin/cli.cjs seed -d ./dataSource.ts", "schema:drop": "ts-node ./node_modules/typeorm/cli.js schema:drop", "schema:sync": "ts-node ./node_modules/typeorm/cli.js schema:sync", "db:migrate": "npm run typeorm migration:run -- -d ./dataSource.ts", "db:migrate:revert": "npm run typeorm migration:revert -- -d ./dataSource.ts", "db:create-migration": "npm run typeorm migration:create -- ./src/migrations/", "db:generate-migration": "npm run typeorm migration:generate -- ./src/migrations -d ./dataSource.ts" }, "dependencies": { "@nestjs/common": "^10.0.0", "@nestjs/config": "^3.0.0", "@nestjs/core": "^10.0.0", "@nestjs/platform-express": "^10.0.0", "@nestjs/swagger": "^7.1.2", "@nestjs/typeorm": "^10.0.0", "bcrypt": "^5.1.0", "class-validator": "^0.14.0", "mysql2": "^3.6.0", "reflect-metadata": "^0.1.13", "rxjs": "^7.8.1", "swagger-ui-express": "^5.0.0", "typeorm-extension": "^3.0.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": "^5.59.11", "@typescript-eslint/parser": "^5.59.11", "eslint": "^8.42.0", "eslint-config-prettier": "^8.8.0", "eslint-plugin-prettier": "^4.2.1", "jest": "^29.5.0", "prettier": "^2.8.8", "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", "typeorm-model-generator": "^0.4.6", "typescript": "^5.1.3", "webpack": "^5.88.2", "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" } } 혹시 경로를 못찾는 건가 싶어서 데이터소스 파일쪽에 seeds의 경로를 넣어주려고 했으나 seeds에 오류가 발생해서 다시 원복 시켰었습니다.(src>database>seeds>create-initial-data.ts 파일은 제로초님 깃에서 복붙했습니다.)강의에서 듣기로는 dataSource > create-initial-data 로 넘어가면서 기본 값이 생성된다고 들었는데요 어디 부분을 확인해봐야 할까요??
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
DB 연결 시, password authentication failed for user 에러 해결 방법
version: "3.9" services: db: image: postgres:latest container_name: poster restart: always ports: - "5432:5432" environment: POSTGRES_USER: "${DB_USER_ID}" POSTGRES_PASSWORD: "${DB_USER_PW}" volumes: - commu:/var/lib/postgresql/data volumes: commu: {} 우선, docker compose down -v 명령어로 컨테이너를 삭제하고, data 폴더도 지워주세요.그리고 docker-compose.yml 파일에서 volumes를 저런 식으로 변경해주면 됩니다.변경 했으면 docker compose up 으로 컨테이너를 다시 생성해주면 정상적으로 연결됩니다.버전은 강의에서 나온대로 3으로 사용해도 상관 없습니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
의존성주입으로 발생하는 장점 설명 질문
발생하는 장점을 다음과 같이 설명해주셨는데요.1. new 한 번으로 모든 곳에서 재사용 가능2. 의존성 주입으로 몽땅 한꺼번에 변경 가능다음과 같은 예시를 들어주셨는데, ProductController의 constructor에서 this.cashService = new CashService()와 같은 사용을 하면 constructor에서 변경점을 가져가고 해당 클래스의 모든 함수에서는 this.cashService를 통해 사용할 수 있고요.class ProductController { cashService constructor() { this.cashService = new CashService() } }CashService 대신 CashService2로 변경하고 싶을때는 다음처럼 변경하면 2번 장점도 동일해지구요.class ProductController { cashService constructor() { //this.cashService = new CashService() this.cashService = new CashService2() } }의존성 주입을 통해 얻을 수 있는 이점은 위와 같은 재사용이나 변경에 대한 장점보다도 말 그래도 의존성을 없애는 것에 있다고 보는데요.의존성 주입을 통해 ProductController에서 구현체인 CashService에 대한 의존성을 없애고, 외부에서 CashService에 대한 의존성을 가져갈 수 있게 되니까요.CashService에 대한 코드의 변경으로 인한 ProductController의 코드 변경이 발생하지 않도록 하는 것이 의존성 주입의 핵심이라고 보는데, tight-coupling을 왜 loose-coupling으로 변경해주어야 하는지에 대한 설명은 없었던 거 같아서요. 이 부분에 대해 어떻게 생각하시는지 궁금합니다!
-
해결됨Slack 클론 코딩[백엔드 with NestJS + TypeORM]
DB 생성시 Error: Cannot find module './index.js 가 계속 뜨는데 뭐가 문제인가요??
강의를 듣던 도중 npm run db:create를 실행시켰는데 아래 에러 메세지가 나옵니다.> a-nest@0.0.1 db:create > ts-node ./node_modules/typeorm-extension/dist/cli/index.js db:create -d ./dataSource.ts node:internal/modules/cjs/loader:942 throw err; ^ Error: Cannot find module './index.js' Require stack: - C:\nestStudy\slack-clone-app\a-nest\node_modules\typeorm-extension\dist\cli\imaginaryUncacheableRequireResolveScript at Module._resolveFilename (node:internal/modules/cjs/loader:939:15) at Function.resolve (node:internal/modules/cjs/helpers:108:19) at requireResolveNonCached (C:\nestStudy\slack-clone-app\a-nest\node_modules\ts-node\dist\bin.js:549:16) at getProjectSearchDir (C:\nestStudy\slack-clone-app\a-nest\node_modules\ts-node\dist\bin.js:519:40) at phase3 (C:\nestStudy\slack-clone-app\a-nest\node_modules\ts-node\dist\bin.js:267:27) at bootstrap (C:\nestStudy\slack-clone-app\a-nest\node_modules\ts-node\dist\bin.js:47:30) at main (C:\nestStudy\slack-clone-app\a-nest\node_modules\ts-node\dist\bin.js:33:12) at Object.<anonymous> (C:\nestStudy\slack-clone-app\a-nest\node_modules\ts-node\dist\bin.js:579:5) at Module._compile (node:internal/modules/cjs/loader:1105:14) at Module._extensions..js (node:internal/modules/cjs/loader:1159:10) { code: 'MODULE_NOT_FOUND', requireStack: [ 'C:\\nestStudy\\slack-clone-app\\a-nest\\node_modules\\typeorm-extension\\dist\\cli\\imaginaryUncacheableRequireResolveScript' ] } Node.js v18.0.0 package.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", "typeorm": "node --require ts-node/register ./node_modules/typeorm/cli.js", "db:create": "ts-node ./node_modules/typeorm-extension/dist/cli/index.js db:create -d ./dataSource.ts", "db:drop": "ts-node ./node_modules/typeorm-extension/dist/cli/index.js db:drop -d ./dataSource.ts", "seed": "ts-node ./node_modules/typeorm-extension/dist/cli/index.js seed -d ./dataSource.ts", "schema:drop": "ts-node ./node_modules/typeorm/cli.js schema:drop", "schema:sync": "ts-node ./node_modules/typeorm/cli.js schema:sync", "db:migrate": "npm run typeorm migration:run -- -d ./dataSource.ts", "db:migrate:revert": "npm run typeorm migration:revert -- -d ./dataSource.ts", "db:create-migration": "npm run typeorm migration:create -- ./src/migrations/", "db:generate-migration": "npm run typeorm migration:generate -- ./src/migrations -d ./dataSource.ts" }, "dependencies": { "@nestjs/common": "^10.0.0", "@nestjs/config": "^3.0.0", "@nestjs/core": "^10.0.0", "@nestjs/platform-express": "^10.0.0", "@nestjs/swagger": "^7.1.2", "@nestjs/typeorm": "^10.0.0", "mysql2": "^3.6.0", "reflect-metadata": "^0.1.13", "rxjs": "^7.8.1", "swagger-ui-express": "^5.0.0", "typeorm-extension": "^3.0.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": "^5.59.11", "@typescript-eslint/parser": "^5.59.11", "eslint": "^8.42.0", "eslint-config-prettier": "^8.8.0", "eslint-plugin-prettier": "^4.2.1", "jest": "^29.5.0", "prettier": "^2.8.8", "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", "typeorm-model-generator": "^0.4.6", "typescript": "^5.1.3", "webpack": "^5.88.2", "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" } } index.js 를 못 찾는다는 에러같은데 어디 부분이 잘 못된건지 모르겠습니다ㅠ이 에러 때문에 테이블들도 생성되지 않았습니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
section 46 퀴즈 관련 질문입니다
퀴즈를 해결하려고 해당 코드를 작성했는데 로그인을 하려고 하면 Context creation failed: 토큰 만료라는 400 오류가 뜹니다. (새로 가입해서도 해봤는데 똑같은 오류가 떴습니다.)또한 useAuth를 사용했는데도 로그인 없이 성공페이지로 바로 접속됩니다. 뭐가 문제일까요?useAuth export const useAuth = ():void => { const router = useRouter() useEffect(()=>{ if(localStorage.getItem("accessToken")===null){ alert("로그인 ㄱ") void router.push("/z_quiz/section46/02") }},[]) }완료 코드 import { gql, useQuery } from "@apollo/client" import type { IQuery } from "../../../../src/commons/types/generated/types" import { useAuth } from "../../../../src/components/commons/hooks/useAuth" const FETCH_USER_LOGGED_IN = gql` query { fetchUserLoggedIn { email name } } ` export default function LoginSuccessPage():JSX.Element { const { data } = useQuery<Pick<IQuery,"fetchUserLoggedIn">>(FETCH_USER_LOGGED_IN) useAuth() return <>{data?.fetchUserLoggedIn.name}님 환영합니다.</> }로그인 코드/* eslint-disable @typescript-eslint/no-misused-promises */ import { gql, useMutation } from "@apollo/client" import { type ChangeEvent, useState } from "react" import type { IMutation, IMutationLoginUserArgs } from "../../../../src/commons/types/generated/types" import { useRecoilState } from "recoil" import { accessTokenState } from "../../../../src/commons/stores" import { useRouter } from "next/router" const LOGIN_USER =gql` mutation loginUser($email:String!, $password:String!){ loginUser(email:$email,password:$password){ accessToken } } ` export default function LoginPage():JSX.Element { const router = useRouter() const [email, setEmail] = useState('') const [password, setPassword] = useState('') const [loginUser] = useMutation<Pick<IMutation,"loginUser">,IMutationLoginUserArgs>(LOGIN_USER) const [, setAccessToken] = useRecoilState(accessTokenState) const onChangeEmail = (event: ChangeEvent<HTMLInputElement>):void => { setEmail(event.currentTarget.value) } const onChangePassword = (event: ChangeEvent<HTMLInputElement>):void => { setPassword(event.currentTarget.value) } const onClickLogin = async ():Promise<void> => { try { const result = await loginUser({variables: { email, password }}) const accessToken = result.data?.loginUser.accessToken if (accessToken=== undefined) { alert("로그인 실패") return ;} setAccessToken(accessToken) localStorage.setItem("accessToken", accessToken) void router.push("./success.tsx") } catch(error) { if (error instanceof Error ) alert(error.message) } } return ( <> 이메일: <input type="text" onChange={onChangeEmail} /> 비밀번호: <input type="password" onChange={onChangePassword} /> <button onClick={onClickLogin}>로그인</button> </> ) }
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
최적화 useMemo 적용하고 나서, 삭제 를 하였을 경우 나타나는 에러입니다.
기존에 잘 동작되었던 삭제 기능이었는데 useMemo 를 적용하고 나서 삭제버튼을 누르니 삭제가 되지 않고 에러가 뜹니다. ㅠ 개발자도구에서 위 소스가 잘못되었다고 하는것같은데 어느곳을 수정해야하는지 모르겠습니다. ㅠ똑같이 친거같은데 ... 이외에도 혹시 리액트 적용해서 에러가 났을경우, 이 에러만 가지고 어느 부분을 수정해야할지 너무 막막한데, 구글링해도 답도 안나오구요 . 어떤식으로 해결해야좋은지 팁도 부탁드립니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
포트폴리오 관련 질문
강의의 중고마켓 포트폴리오를 만들고 있는 수강생입니다해당 포트폴리오는 배포를 못한다고 알고 있는데, 배포링크 없는 프로젝트를 면접관이 안좋게 보지 않을지 걱정됩니다(git소스코드와 함께 readme에 gif, 기타 설명은 첨부하려고 합니다)그래서 다 수강한 후에 강의의 프로젝트와 함께, 배포까지 하는 새 프로젝트를 만들어볼까 생각중인데이경우 파이어베이스나 node.js를 활용해서, 제가 직접 기본적인 백엔드만 구축하려고 하는 새 프로젝트가 취업에 도움이 될지 궁금합니다.. 비효율적인가 싶기도 하고요아니면 다른 좋은 방법이 있을까요..?
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
onChange 작동 원리
좋은 강의 감사합니다.페이지 구현 - 홈 )/) 강의 중 23분에 onchange 설명해주신 것 관련해서 질문드립니다.DiaryList.js / 27번째 줄에 onChange로 setSortType을 전달했기 때문에 ControllMenu에서 onChange(e.target.value)의 값이 setSortType을 호출해서 sortType의 상태값이 변화하는 것으로 이해했습니다.즉 이렇게, onChange{setSortType("변화된 값")} 작동한걸로 이해했는데요. 27번째 줄에 onChange = {setSortType} 으로만 작성을 했는데 e.target.value라는 값이 전달된 것이 이해가 잘 안되어서 질문드립니다.만일 setSortType처럼 상태값을 받는 함수를 담고 있는 변수가 아닌const test = (a,b) => { console.log(a,b);}와 같은 매개변수를 2개를 받는 함수를 onchange로 호출한다고 하면 어떻게 넣을 수 있나요?
-
해결됨Slack 클론 코딩[백엔드 with NestJS + TypeORM]
spec.ts 파일이 자동으로 생기는데 왜 생기는 건가요??
안녕하세요. 강의를 따라하면서 파일을 생성할때 항상 아래 이미지처럼 spec.ts 파일이 자동으로 생성되는 이유가 뭔가요?? 강사님은 안 생기시는 것 같은데 저는 1개 파일당 1개씩 전부 생겨버려서 너무 많은 양의 파일들이 만들어집니다..
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
15섹션 http://backend-practice.codebootcamp.co.kr/graphql 연동 관련(CORS) 질문입니다.
ApolloClient를 이용해서 graphql 연동 시 다음과 같은 에러가 발생합니다.사용 환경이 localhost가 아니라 "Access-Control-Allow-Origin" 정보가 일치하지 않아 거부되고 있습니다. backend-practice graphql연동 시 localhost:3000 만 허용되는 것 같습니다.아래 에러 정보 공유합니다.Access to fetch at 'http://backend-practice.codebootcamp.co.kr/graphql' from origin 'http://10.10.9.109:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header has a value 'http://localhost:3000' that is not equal to the supplied origin. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. ApolloClient에서 no-cors로 설정시에는 서버 에러를 수신하게 되어 현재 연동이 어려운 상태입니다.어떻게 해야 할까요?
-
미해결탄탄한 백엔드 NestJS, 기초부터 심화까지
exception filter에 잡히질 않습니다
import { ExceptionFilter, Catch, ArgumentsHost, HttpException, } from '@nestjs/common'; import { Request, Response } from 'express'; @Catch(HttpException) export class HttpExceptionFilter implements ExceptionFilter { catch(exception: HttpException, host: ArgumentsHost) { const ctx = host.switchToHttp(); const response = ctx.getResponse<Response>(); const request = ctx.getRequest<Request>(); const status = exception.getStatus(); const error = exception.getResponse() as | string | { error: string; statusCode: number; message: string | string[] }; if (typeof error === 'string') { response.status(status).json({ statusCode: status, timestamp: new Date().toISOString(), path: request.url, message: error, }); } else { response.status(status).json({ statusCode: status, timestamp: new Date().toISOString(), path: request.url, message: error, }); } } }안녕하세요 ! 위와 같이 필터 작성이후main.ts 에서app.useGlobalFilter(new HttpExceptionFilter());를 통해 예외가 잘 잡히는것을 확인을 했었습니다.왜인지는 모르겠으나 cat의 모델 내부 필드중에 imgUrl 부분을 null 을 허용해주기 위해@IsOptional() 을 붙여주고난 뒤에 중복 회원가입을 진행하려 할 경우 예외에 잡히게끔 하려 HttpException 을 발생 시키게끔 했습니다.async signUp(body: CatRequestDTO): Promise<Cat> { const email = body.email; const checkExist = await this.catRepository.findOne({ where: { email } }); if (!checkExist) { const createdCat = this.catRepository.create(body); this.catRepository.save(createdCat); return createdCat; } else { throw new HttpException( 'Already exist Email in DB', HttpStatus.BAD_REQUEST, ); } }콘솔창에 에러 메세지와 함께 출력되는것은 확인되나Filter에서 exception @Catch 로 묶어준것에 잡히지를 않습니다. 도통 이유를 못찾겠어서 app.useGlobalFilter(...) 를 catController 쪽에 @UseFilters(new HttpExceptionFilter()) 로도 바꿔보고메서드에다가 직접적으로도 붙여보았으나 계속 똑같은 현상을 보이는데왜 인지를 못잡겠습니다. 조언을 좀 주시면 감사하겠습니다.
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
프로필 페이지 세로고침 에러
프로필페이지 에서 세로고침을 할때 로그인이 풀리면서 로그인 정보가 사라지면서 에러가 발생하는 현상이 있었습니다const Profile = () => { const { me } = useSelector((state) => state.user); const dispatch = useDispatch(); useEffect(() => { if (!(me && me.id)) { Router.push("/"); } }, [me && me.id]); useEffect(() => { dispatch(loadFollowers()); dispatch(loadFollowings()); }, []); return ( <> <Head> <title>프로필 | NodeBird</title> </Head> <AppLayout> <NicknameEditForm /> <FollowList header="팔로잉 목록" data={me?.Followings} /> <FollowList header="팔로워 목록" data={me?.Followers} /> </AppLayout> </> ); };그런데 이해가 안되는점은 Router.push로 me에 대한 정보가 없으면 루트 페이지로 넘어가게 만들어두었는데도 로그인 정보가 없다고 에러가 발생하고 그래서 로그인 정보를 가져오는 loadMyInfo를 사용해도 계속 에러가 발생한다는 점입니다.이부분이 일단 첫번째로 이해가 안되는 점이고아래 질문자님들이 질문하신 내용으로 me?.Foolowings로 일단 해결하고 넘어갔습니다그런데 또 프로필 페이지에서 세로고침을 해보니까 이번에도 me에 대한 정보가 없다고 나옵니다me에 대한 정보가 없어서 발생하는 에러인데 팔로워에 대한 정보를 불러오는 리듀서에서 에러가 발생합니다 하지만 사진에 state 정보를 보시면 me에 정보가 들어있습니다. 아마 me 정보를 갱신하기 이전에 발생한 action에 대한 에러인거 같은데 어떻게 해결하면 좋을까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
상품삭제 API 강의에서 소프트 삭제 관련 질문
TypeORM을 이용한 소프트 삭제에서 softRemove와 softDelete를 이용하는 방법 두가지가 있는데, 강의에서는 softDelete를 이용하는 경우에 대해 설명을 해주셨는데요.softRemove를 하는 경우에도 entity에 똑같이 @DeleteDateColumn 으로 deleteAt을 추가해주면 되나요?@RemoveDateColumn은 내장되어 있지 않은것 겉더라구요..그리고 softRemove 에서는 .affected 가 안되던데 true 나 false로 리턴받을 수 있는 방법이 있을까요?
-
미해결탄탄한 백엔드 NestJS, 기초부터 심화까지
npm run start:dev 에러
터미널에 npm run start:dev 를 입력하면 자꾸 Error: Cannot find module 라는 에러가 뜹니다;;npm를 지웠다 깔기도 하고, node module 폴더를 삭제하기도하고, lock.json 파일을 삭제해보기도 했는데 여전히 계속 에러가 뜨는데 왜 이런건가요?.....
-
해결됨[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
room계층 소켓 연결 후 소통 질문
서버쪽에선 socket.on("join", (data) => { socket.join(data); // 방 참가 socket.to(data).emit("join", { user: "system", chat: `${socket.request.session.color}님이 입장하셨습니다.`, }); });이렇게 room계층 소켓으로 연결했고, 해당 room으로 join이벤트를 보냈는데 브라우저 쪽에선const socket = io.connect("http://localhost:8005/chat", { path: "/socket.io", }); socket.emit("join", new URL(location).pathname.split("/").at(-1)); socket.on("join", function (data) {...}/chat 네임스페이스 계층 소켓으로 밖에 연결하지 못했는데 어떻게 해당 room계층으로 온 join이벤트인지 구별하는 게 가능한지 궁금합니다. room계층보다 상위인 네임스페이스 계층에 연결했으니 어느 room으로 오든 네임스페이스만 같으면 모든 이벤트를 다 감지하게 되는 것 아닌가요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
nestjs graphql API 요청 관련 질문
안녕하세요. express 에서 rest 방식에서는 API를 생성할 때, get이나 post 등의 메소드 방식을 정하고 주소를 지정하여 프론트엔드에서 fetch 나 axois 함수에 주소를 기입하여 API 요청을 했었습니다.graphQL 방식의 nestjs에서는 프론트엔드에서 API 요청을 보낼 때 어떤 방식으로 하나요? 따로 주소 같은 것을 지정해주지는 않는 것같은데..똑같이 fetch 나 axois 함수를 통해 요청을 하는 건가요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
완강하고 공부할거 질문입니다
완강하면 코테,CS 준비하면 되나요?근데 코테 언어는 어떤 걸로 준비해야 할까요
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
ReferenceError: boardId is not defined
안녕하세요 선생님! 전에 Bad request 400 문제로 글 올렸던 사람입니다답변 주신 부분은 잘 확인 했습니다.그런데 variables는 잘 작성했구 연결도 했습니다. 그런데 useEffect로 boardId가 유효하면 실행, 아니면 loading이라는 문구를 내보내게 작성한 후 확인을 해보니 아래와 같은 문제가 있었습니다console.log(router.query.boardId);에서 undefined가 떳길래useRouter가 작성됐는지 import했는지랑 확인했고, 문제 없었습니다. 또, ReferenceError: boardId is not defined 메시지가 떳습니다 . . ] 그래서 다른 방법으로 해결을 해보고자console.log(router.query.boardId);가 담긴 index에서 import를 선언하는 부분 최상위에 "use client"를 작성하고, import { useRouter } from 'next/router' 를 'next/navigation'으로 바꿨더니아래와 같이 오류가 확인 됐습니다.. .아래는 문제가 있는 컴포넌트입니다(useEffect 지움, next/router로 바꿈)"use client" import { useRouter } from "next/router"; import { gql, useQuery } from "@apollo/client"; import { Avatar, AvatarWrapper, Body, BottomWrapper, Button, CardWrapper, Contents, CreatedAt, Header, Info, Title, Wrapper, Writer } from "../../../styles/boardnewpage"; export const FETCH_BOARD = gql` query fetchBoard($boardId: ID!) { fetchBoard(boardId: $boardId) { _id writer title contents createdAt } } `; export default function BoardDetailPage() { const router = useRouter(); console.log(router.query.boardId); const { data } = useQuery(FETCH_BOARD, { variables: { boardId: router.query.boardId }, }); if (!data) { // boardId가 없는 경우에 대한 처리 (예: 로딩 스피너 표시 등) return <div>Loading...</div>; } return ( <Wrapper> <CardWrapper> <Header> <AvatarWrapper> <Avatar src="/images/ic_profile.png" /> <Info> <Writer>{data?.fetchBoard?.writer}</Writer> <CreatedAt> {data?.fetchBoard?.createdAt} </CreatedAt> </Info> </AvatarWrapper> </Header> <Body> <Title>{data?.fetchBoard?.title}</Title> <Contents>{data?.fetchBoard?.contents}</Contents> </Body> </CardWrapper> <BottomWrapper> <Button>목록으로</Button> <Button>수정하기</Button> <Button>삭제하기</Button> </BottomWrapper> </Wrapper> ); } 아래는 위 컴포넌트를 실행하고 나서 뜨는 화면 입니다if문을 지우고 나면 저번에 올렸던 질문 글 처럼 화면은 넘어가는데 varibales 데이터들만 안뜹니다...! + 로딩 뜬 화면의 개발자도구 화면 입니다!! 확인해주시고 답변 주시면 감사하겠습니다.!!!😂🥹