묻고 답해요
130만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
우분투에 몽고디비 설치 후 실행이 안됩니다.
제가 사용중인 우분투 버젼입니다.몽고 디비 설치를 노션 자료에 있는대로도 설치를 해보고, 삭제하고 공식문서에 있는대로도 설치를 해봤는데(노션에는 공개키가 server-5.0 으로 되어있고 공식 문서는 server-6.0 으로 되어있더라구요)설치 후에 실행을 해보면 [fail] 이 뜨면서 실행이 되지 않네요.구글링해서 여러가지 방법 따라해봐도 계속 fail 이어서 질문글 올립니다.추가로 이상한 점은 mongod --version 이라고 치면버전이 나오는게 아니라 Illegal instruction 라고 나옵니다.++구글에 mongod --version Illegal instruction 라는 키워드로 검색을 해서 https://info-orgs.blogspot.com/2021/10/how-to-install-mongodb-v44-mongodb.html이 글을 보고 몽고 디비 4.4 버전을 설치해봤는데mongod --version 이라고 치면 이제 버전이 나오긴 하는데 여전히 실행은 실패하네요.$ service mongod start * Starting database mongod /etc/init.d/mongod: 136: ulimit: error setting limit (Operation not permitted) /etc/init.d/mongod: 142: ulimit: error setting limit (Operation not permitted) start-stop-daemon: start-stop-daemon: unable to open pidfile '/var/run/mongod.pid' for writingunable to set gid to 121 (Permission denied) (Operation not permitted) start-stop-daemon: child returned error exit status 2
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
Saga vs Thunk
Redux Toolkit을 써보고 싶은데 고민이 생겼습니다.제로초 님이 실무에서 리덕스 할 떄 Saga를 더 잘 쓰셨다고 말씀하셨던 거 같습니다. 근데 Redux Toolkit을 쓰려면 Thunk를 쓰는 게 더 편할 거 같은데 어떻게 생각하시나요?? 그리고 이미 Saga를 열심히 배워놨고 익숙해 졌는데 Toolkit를 쓰려고 Thunk로 다시 돌아가야 된다는 게 조금 배웠던 시간이 아깝기도 하고 고민중입니다. 물론 둘 다 동일한 비동기 요청을 하는 기능을 하는 것이지만 배우고 있는 입장에서는 고민이네요.제로초 님은 Redux Toolkit 쓸 때에도 Saga를 같이 쓰시는 편인가요?+인피니트 스크롤링을 구현할때의 경우도 생각을 해봐야 될 거 같은데, 이부분은 강의를 끝까지 안 들어봐서 어떤 결정이 나을지 모르겠네요
-
미해결탄탄한 백엔드 NestJS, 기초부터 심화까지
[SOLVED] NestJS 프로젝트 생성 실패
KT망을 사용 중일 경우 ts-jest가 설치되지 않는 문제가 있습니다.해당 문제는 npm의 registry를 미러 서버로 설정한 뒤 nest new~를 통해 프로젝트를 생성하고, 다시 원 서버로 복구하시면 됩니다.npm config set registry https://registry.npmjs.cf/ nest new project npm config set registry https://registry.npmjs.org/ 안녕하세요 4번째 섹션의 첫 강의 NestJS 개발 환경 셋팅을 보고 NestJS를 통한 Project를 생성하려 합니다.사용중인 컴퓨터 환경은 다음과 같습니다.Apple Silicon M1 Max MacOS Ventura 13.2 Node: 16.16.0 Npm: 8.11.0그런데 nest 문서에 나와있는 방법대로 프로젝트를 생성하면 에러가 발생합니다.> nest new project ⚡ We will scaffold your app in a few seconds.. ? Which package manager would you ❤️ to use? npm CREATE project/.eslintrc.js (663 bytes) CREATE project/.prettierrc (51 bytes) CREATE project/README.md (3340 bytes) CREATE project/nest-cli.json (171 bytes) CREATE project/package.json (1938 bytes) CREATE project/tsconfig.build.json (97 bytes) CREATE project/tsconfig.json (546 bytes) CREATE project/src/app.controller.spec.ts (617 bytes) CREATE project/src/app.controller.ts (274 bytes) CREATE project/src/app.module.ts (249 bytes) CREATE project/src/app.service.ts (142 bytes) CREATE project/src/main.ts (208 bytes) CREATE project/test/app.e2e-spec.ts (630 bytes) CREATE project/test/jest-e2e.json (183 bytes) ▹▹▹▹▸ Installation in progress... ☕ Failed to execute command: npm install --silent ✖ Installation in progress... ☕ 🙀 Packages installation failed! In case you don't see any errors above, consider manually running the failed command npm install to see more details on why it errored out. Thanks for installing Nest 🙏 Please consider donating to our open collective to help us maintain this package. 🍷 Donate: https://opencollective.com/nest 그래서 생성된 project 폴더로 이동하여 npm install --verbose를 통해 어디서 실패하는지 확인해 보았더니 다음과 같은 내용을 얻을 수 있었습니다. 로그가 너무 길어서, Error 부분만 넣겠습니다.npm timing idealTree:node_modules/windows-release/node_modules/execa Completed in 32ms npm http fetch GET 200 https://registry.npmjs.org/end-of-stream 28ms (cache revalidated) npm timing idealTree:node_modules/windows-release/node_modules/get-stream Completed in 28ms npm timing idealTree:node_modules/pump Completed in 1ms npm timing idealTree:node_modules/end-of-stream Completed in 0ms npm timing idealTree:node_modules/windows-release/node_modules/human-signals Completed in 0ms npm timing idealTree:node_modules/send/node_modules/debug/node_modules/ms Completed in 0ms npm timing idealTree:buildDeps Completed in 314816ms npm timing idealTree:fixDepFlags Completed in 3ms npm timing idealTree Completed in 314826ms npm timing command:install Completed in 314831ms npm verb type system npm verb stack FetchError: Invalid response body while trying to fetch https://registry.npmjs.org/ts-jest: aborted npm verb stack at ~/.nvm/versions/node/v16.16.0/lib/node_modules/npm/node_modules/minipass-fetch/lib/body.js:168:15 npm verb stack at runMicrotasks (<anonymous>) npm verb stack at processTicksAndRejections (node:internal/process/task_queues:96:5) npm verb stack at async RegistryFetcher.packument (~/.nvm/versions/node/v16.16.0/lib/node_modules/npm/node_modules/pacote/lib/registry.js:99:25) npm verb stack at async RegistryFetcher.manifest (~/.nvm/versions/node/v16.16.0/lib/node_modules/npm/node_modules/pacote/lib/registry.js:124:23) npm verb stack at async Arborist.[nodeFromEdge] (~/.nvm/versions/node/v16.16.0/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:1108:19) npm verb stack at async Arborist.[buildDepStep] (~/.nvm/versions/node/v16.16.0/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:976:11) npm verb stack at async Arborist.buildIdealTree (~/.nvm/versions/node/v16.16.0/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:218:7) npm verb stack at async Promise.all (index 1) npm verb stack at async Arborist.reify (~/.nvm/versions/node/v16.16.0/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/reify.js:153:5) npm verb cwd ~/Playground/nodejs/inflearn/nestjs/section4/project npm verb Darwin 22.3.0 npm verb node v16.16.0 npm verb npm v8.11.0 npm ERR! code ECONNRESET npm ERR! errno ECONNRESET npm ERR! network Invalid response body while trying to fetch https://registry.npmjs.org/ts-jest: aborted npm ERR! network This is a problem related to network connectivity. npm ERR! network In most cases you are behind a proxy or have bad network settings. npm ERR! network npm ERR! network If you are behind a proxy, please make sure that the npm ERR! network 'proxy' config is set properly. See: 'npm help config' npm verb exit 1 npm timing npm Completed in 314906ms npm verb unfinished npm timer reify 1676004665919 npm verb unfinished npm timer reify:loadTrees 1676004665923 npm verb code 1 npm ERR! A complete log of this run can be found in: npm ERR! ~/.npm/_logs/2023-02-10T04_51_05_846Z-debug-0.logNestJS에서 supertest 설치를 위해 jest 패키지를 설치하는 것 같은데, jest 패키지들이 정상적으로 (로그에 의하면 ts-jest) 설치되지 않습니다.같은 에러를 겪은적 있으시거나, 해결법 아시는 분 도움 부탁드립니다.감사합니다.
-
미해결[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
npm i vs npm add
현재 Swagger를 활용한 API-Docs 생성 수강중 입니다.21분 36초에 npm add 로 설치하는데 npm i 와 npm add 의 차이를 앞부분에서 설명해 주셨을까요? 기억이 왜 안날까요?
-
미해결Slack 클론 코딩[백엔드 with NestJS + TypeORM]
logger.middleware.ts 가 app.module에 적용이 되질않아서 질문드립니다.
제목과 동일한 내용으로 logger middleware를 작성하고 app module에 적용하였습니다. 그리고 재시작을 하여 적용 여부를 확인하려 했으나 적용이 되지않은것을 확인했습니다. 어떤부분을 놓치고 있는지 알고싶습니다. package.json { "name": "a-nest", "version": "0.0.1", "description": "", "author": "", "private": true, "license": "UNLICENSED", "scripts": { "prebuild": "rimraf dist", "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": "^9.0.0", "@nestjs/config": "^2.3.0", "@nestjs/core": "^9.0.0", "@nestjs/platform-express": "^9.0.0", "axios": "^1.3.2", "reflect-metadata": "^0.1.13", "rimraf": "^3.0.2", "rxjs": "^7.2.0" }, "devDependencies": { "@nestjs/cli": "^9.0.0", "@nestjs/schematics": "^9.0.0", "@nestjs/testing": "^9.0.0", "@types/express": "^4.17.13", "@types/jest": "28.1.8", "@types/node": "^16.0.0", "@types/supertest": "^2.0.11", "@typescript-eslint/eslint-plugin": "^5.0.0", "@typescript-eslint/parser": "^5.0.0", "eslint": "^8.0.1", "eslint-config-prettier": "^8.3.0", "eslint-plugin-prettier": "^4.0.0", "jest": "28.1.3", "prettier": "^2.3.2", "run-script-webpack-plugin": "^0.1.1", "source-map-support": "^0.5.20", "supertest": "^6.1.3", "ts-jest": "28.0.8", "ts-loader": "^9.2.3", "ts-node": "^10.0.0", "tsconfig-paths": "4.1.0", "typescript": "^4.7.4", "webpack": "^5.75.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" } } logger.middleware.ts import { Injectable, Logger, NestMiddleware } from '@nestjs/common'; import { NextFunction, Request, Response, response } from 'express'; @Injectable() export class LoggerMiddleware implements NestMiddleware { private logger = new Logger('HTTP'); use(req: Request, res: Response, next: NextFunction): void { const { ip, method, originalUrl } = req; const userAgent = req.get('user-agent') || ''; response.on('finish', () => { const { statusCode } = res; const contentLength = res.get('content-type'); this.logger.log( `${method} ${originalUrl} ${statusCode} ${contentLength} - ${userAgent} ${ip}`, ); }); next(); } } app.module.ts import { MiddlewareConsumer, Module, NestModule, RequestMethod, } from '@nestjs/common'; import { AppController } from './app.controller'; import { AppService } from './app.service'; import { ConfigModule, ConfigService } from '@nestjs/config'; import axios from 'axios'; import { LoggerMiddleware } from './middleware/logger.middleware'; const getEnv = async () => { // const response = await axios.get('비밀키를 요청하는 url'); // return response.data; }; const mode = process.env.NODE_ENV || 'development'; @Module({ imports: [ ConfigModule.forRoot({ isGlobal: true, load: [getEnv], envFilePath: `.env.${mode}`, }), ], controllers: [AppController], providers: [AppService, ConfigService], }) export class AppModule implements NestModule { configure(consumer: MiddlewareConsumer): any { consumer .apply(LoggerMiddleware) .forRoutes({ path: '*', method: RequestMethod.ALL }); } } nestjs log Info Webpack is building your sources... Entrypoint main 47.9 KiB = main.js 46.1 KiB 0.5051cca5f9ad96919687.hot-update.js 1.81 KiB webpack 5.75.0 compiled successfully in 63 ms [Nest] 36670 - 02/07/2023, 7:47:49 AM LOG [NestFactory] Starting Nest application... +6659ms [HMR] Updated modules: [HMR] - 10 [HMR] - 5 [HMR] - 3 [HMR] Update applied. [Nest] 36670 - 02/07/2023, 7:47:49 AM LOG [InstanceLoader] ConfigHostModule dependencies initialized +4ms [Nest] 36670 - 02/07/2023, 7:47:49 AM LOG [InstanceLoader] ConfigModule dependencies initialized +0ms [Nest] 36670 - 02/07/2023, 7:47:49 AM LOG [InstanceLoader] AppModule dependencies initialized +0ms [Nest] 36670 - 02/07/2023, 7:47:49 AM LOG [RoutesResolver] AppController {/}: +0ms [Nest] 36670 - 02/07/2023, 7:47:49 AM LOG [RouterExplorer] Mapped {/, GET} route +1ms [Nest] 36670 - 02/07/2023, 7:47:49 AM LOG [NestApplication] Nest application successfully started +0ms적용이 되지않아 생기는 질문이라 에러코드는 없어서 따로 첨부하지 않았습니다.
-
해결됨탄탄한 백엔드 NestJS, 기초부터 심화까지
워크벤치 포트번호
워크벤치에, 전에 테스트해 보던게 있었습니다.포트번호를 겹치지 않게 하려고 다르게 작성하니OpenConnection 할 때워크벤치가 그냥 꺼지는데요 포트번호는 항상 같아야 하는 건가요??
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
시퀄라이즈 관계메소드를 두번 사용하는 경우
const images = await Promise.all( req.body.image.map((image) => Image.create({ src: image })) ); await post.addImages(images); 이런식으로 Image.create() 를 적용한 다음다시 post.addImages() 하는 이유가 뭔가요? 중복된 실행이라고 생각했는데 실행해봤을때는 중복된 튜플이 생성되지는 않네요..
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
백엔드 질문
1.사용자가 웹에 접속을 할 때, 브라우저 -> 프론트서버 로 요청을 보내게 되고프론트 -> 브라우저 로 html css js 파일을 보내서 뷰를 표시하게 되는데그러면 특정 기능을 사용할 때, 예를 들어 로그인 버튼을 누른다고 하면그 요청은 브라우저 -> 백엔드 인가요 프론트 -> 백엔드 인가요?만약 브라우저 -> 백엔드 이면백엔드 cors 설정에서는 프론트서버 도메인만 허용하도록 해놓는데 어떻게 브라우저에서백엔드로 접근이 가능한건가요? 2.강좌에서는 me값으로 로그인 유지를 위한 로직을 작성했고모든 페이지 접속 때마다 백엔드로 요청을 보내서 세션인증을 하는방식으로 로직을 작성했는데제가 알기로 세션인증방식은 세션id를 프론트에 보내서 쿠키에 있는 세션id를 이용해 로그인 유지를 하는것으로 알고있습니다. 제가 알고 있는 방식과 강좌에서의 세션인증이 좀 다른것 같은데 어떻게 이해해야 하나요?강좌는 ssr 적용 전 백엔드 부분까지만 들은 상태입니다.
-
해결됨습관부터 바꿔주는 Node.js & Express 기초
github 권한
안녕하세요 수업듣다가 github권한에 대해서 문의드립니다.저번에 질문남겨주셨을때도 들어간 링크가 404로 떠서private 레포로 되어있는것 같은데, 권한 요청을 드려야하나요?다른 수업자료들도 전부 private으로 되어있는것 같아요!이렇게 1개의 레포만 확인할 수 있습니다..!
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
8:24분경 코드 오류나서 수정하셨는데!
8분 20초경 오류나서 코드를 수정하셨는데,case ADD_POST_TO_ME: return { ...state, me: { ...state.me, // 이부분 왜 추가한건가요? Posts: [{ id: action.data }, ...state.me.Posts], }, };코드 주석부분 왜 추가하신건가요..?const dummyUser = (data) => ({ ...data, nickname: "wewewe", id: 1, Posts: [{ id: 1 }], Followings: [{ nickname: "we1" }, { nickname: "we2" }, { nickname: "we3" }], Followers: [{ nickname: "we1" }, { nickname: "we2" }, { nickname: "we3" }], });dummy데이터 구조를 보면Posts를 제외한 nickname, id, Followings 등 변하지 않는 데이터들의 불변성을 유지하기 위해서 추가한것이 맞는건가요?!
-
미해결탄탄한 백엔드 NestJS, 기초부터 심화까지
populate 문제(cats schema 오류) 해결법
강의대로 따라 했으나, 아래와같은 오류 나는경우 해결법 입니다.ERROR [ExceptionsHandler] Schema hasn't been registered for model "comments".Use mongoose.model(name, schema)다른 문의글 보면 답변으로 버전 문제라고 버전을 내리라고 하시는데 , 좀 이상한 답변이라는 생각에진짜 몇시간동안 헤매다가 해결했습니다. 현재기준 최신버전"@nestjs/common": "^9.0.0", "@nestjs/mongoose": "^9.2.1", "mongoose": "^6.9.0",에서 아래와 같이 해결 했습니다. 주석참조.export class CatsRepository { constructor( @InjectModel(Cat.name) private readonly catModel: Model<Cat>, // 해당 라인 추가, 참고로 강의에선 Comments 인데 저는 Cat과 같이 단수형으로 만들어서 Comment 입니다. @InjectModel(Comment.name) private readonly commentModel: Model<Comment>, ) {} async findAll() { const result = await this.catModel .find() // populate 파라미터 변경 .populate({ path: 'comments', model: this.commentModel }); return result; } ... }다른 누군가에게 도움이 되기를
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
Delete 'CR' eslint 표시 없애기 공유(windows사용자)
windows에서 vscode에서 typescript를 사용하시다 보면아래와 같이 delete 'cr'이라고 계속 빨간 글씨가 떠서눈에 거슬리는 경우가 있습니다.해결책 : eslintrc.js파일에 가셔서 아래와 같이rules에 추가한 후 저장해 주시면 됩니다.긁어서 eslintrc.js파일의 하단의 rules에 추가해 주세요 'prettier/prettier': [ 'error', { endOfLine: 'auto', }, ],
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
혹시 테스트 결제 잘 되나요??
여러 방면으로 시도 중인데,error_code: "NOT_READY"error_msg: "등록된 사용자가 아니거나, 아임포트 관리자 페이지에 설정된 PG정보가 없습니다."해당 에러가 뜨면서 계속 실패하네요;;혹시 하신 분들은 어떻게 성공하셨는지 궁금합니다.일단 제가 예상한 것으로는 강의 화면이랑 제 구 관리자콘솔의 시스템 관리 탭이 다른 점에 눈이 가는데, 이걸 어떻게 처리해야되는지 어디를 찾아봐도 안나오네요...강의에서는 여러 탭이 있는데 저는 두 개의 탭 밖에 보이지 않습니다. 해결 방법을 찾고 싶어도 어디서 찾아야 되는 지 감이 안잡히네요
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
M:N 등록/조회 API 작성에서 Typescript 문제 질문드립니다.
안녕하세요. 제가 찾고 기다리던 내용의 강의라 매우 만족하며 수강하고 있는 수강생입니다! ㅎproducts.service.ts 파일에서 create와 update 메서드 작성할 때 typescript 에러에 대해 질문드립니다.products.service.ts 파일 create 메서드에서 productTags를 등록하는 과정에const result2 = [] 부분을 const result2: string[]로 작성하면 await productRepository.save(...) 에서 No overload matches this call이 뜨고update 메서드에서 updateProductInput에 UpdateProductInput로 타입을 지정하면 위와 마찬가지로 await productRepository.save(newProduct)에서 No overload matches this call이 뜹니다.두 경우 모두 Type 'string' is not assignable to type 'ProductTag' 문제로 product.entity.ts에서는 productTag를 아래와 같이 등록하고 @Field(() => [ProductTag]) @JoinTable() @ManyToMany(() => ProductTag, (productTags) => productTags.products) productTags: ProductTag[]; createProduct.input.ts에서는 CreateProductInput에서 productTag를 아래와 같이 등록해서 발생하는 문제라고 추측했습니다.@Field(() => [String]) productTags: string[];두 경우 모두 타입을 지정하지 않고 any로 두면 문제는 사라지긴 합니다. any로 두고 사용할 수밖에 없는 것인지 아니면 타입 지정을 해서 사용하는 방법이 있는지 궁금합니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
mysql 데이터베이스 연결 안되는 문제 Unable to connect to the database
yarn start:dev 실행 하고 나면 아래와 같이 나오면서 에러가 뜨고 있어요 ERROR [TypeOrmModule] Unable to connect to the database. Retrying (1)...아래 코드도 정상적으로 기입 했는데, 계속 접속 오류로 연결이 되지가 않습니다.import { ApolloDriver, ApolloDriverConfig } from '@nestjs/apollo' import { Module } from '@nestjs/common' import { GraphQLModule } from '@nestjs/graphql' import { TypeOrmModule } from '@nestjs/typeorm' import { BoardsModule } from './apis/boards/boards.module' import { Board } from './apis/boards/entities/board.entity' @Module({ imports: [ BoardsModule, GraphQLModule.forRoot<ApolloDriverConfig>({ driver: ApolloDriver, autoSchemaFile: 'src/commons/graphql/schema.gql', }), TypeOrmModule.forRoot({ type: 'mysql', host: 'localhost', port: 3306, username: 'root', password: 'test1234', database: 'myproject03', entities: [Board], synchronize: true, logging: true, }), ], // controllers: [AppController], // providers: [AppService], }) export class AppModule {} 현재 brew 확인시 Mysql 서버도 정상적으로 켜져 있는것을 확인 할 수 있어요 디비버에서도myproject03 이라고 정확하게 만들었습니다.선생님의 강의하고 다른부분을 못 찾았는데,데이터 베이스가 연결이 안될 때는 어느부분을 더 점검 해 봐야 할지요?
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
length 오류
콘솔 결과와 error가 같이 출력됩니다!
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
react-router-dom link클릭시 이동이 안되는 오류
안녕하세요 강사님해당 상품을 클릭했을때 url은 바뀌지만 상품상세페이지로 화면은 바뀌지 않는 오류가 발생했습니다(새로고침하면 화면이 바뀌긴 합니다)다른 수강생들의 비슷한 질문답변을 참고하여 <React.StrictMode>를 지워도보고 react-router-dom 버전도 5.2.0이고 Route path도 "/products/:id"라고 적었는데 여전히 오류가 해결되지 않습니다https://github.com/kanghanju/grab-market-client/commit/01c0657f4f64398b47493c1b2c3b44836bf1a785#여기는 Link태그 해당 수업코드 파일입니다!
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
DB 연결 성공 후 테이블 까지 만들었습니다.
그런데 테이블을 선택해서 코드를 보려면 자꾸 workbench가 팅겨서 꺼집니다 ㅠㅠ코드를 깃허브에 있는 class형 함수를 긁어서 사용해서 문제가 되는걸까요..?ㅠㅠ 아래는 오류창입니다..
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
사가 모든 설정 후 로그인시 오류
강사님 모든 코드를 수정한 후 로그인하려고 하는데아이디, 비밀번호 입력 후 누르면 로그인이 되지 않습니다.콘솔창에 에러도 나타나지 않아서 어디가 틀렸는지 모르겠네요.몇개파일의 코드 같이 올려드립니다.아래는 로그인 안되는 화면캡처본입니다.LoginForm.jsimport React, { useCallback, useMemo } from "react"; import Link from "next/link"; import { Form, Input, Button } from "antd"; import styled from "styled-components"; import useInput from "../hooks/useInput"; import { useDispatch, useSelector } from "react-redux"; import { loginRequestAction } from "../reducers/user"; const FormWrapper = styled(Form)` padding: 15px; `; const LoginForm = () => { const dispatch = useDispatch(); const { isLoggingIn } = useSelector((state) => state.user); const [id, onChangeId] = useInput(""); const [password, onChangePassword] = useInput(""); const style = useMemo(() => ({ marginTop: 10 }), []); const onSubmitForm = useCallback(() => { console.log(id, password); dispatch(loginRequestAction({ id, password })); }, [id, password]); return ( <FormWrapper onFinish={onSubmitForm}> <div> <label htmlFor="user-id">아이디</label> <Input name="user-id" value={id} onChange={onChangeId} required></Input> </div> <div> <label htmlFor="user-password">비밀번호</label> <Input name="user-password" value={password} onChange={onChangePassword} required ></Input> </div> <div style={style}> <Button type="primary" htmlType="submit" loading={isLoggingIn}> 로그인 </Button> <Link href="/signup"> <a>회원가입</a> </Link> </div> </FormWrapper> ); }; export default LoginForm; reducers-user.jsexport const initailState = { isLoggingIn: false, // 로그인 시도중 - 로딩창을 띄우기위해 isLoggedIn: false, isLoggingOut: false, // 로그아웃 시도중 me: null, signUpDate: {}, loginData: {}, }; // 로그인 액션 create export const loginRequestAction = (data) => { return { type: "LOG_IN", data, }; }; export const logoutRequestAction = () => { return { type: "LOG_OUT", }; }; const reducer = (state = initailState, action) => { switch (action.type) { case "LOG_IN_REQUEST": console.log("reducers login"); return { ...state, isLoggingIn: true, }; case "LOG_IN_SUCCESS": return { ...state, isLoggingIn: false, isLoggedIn: true, me: { ...action.data, nickname: "가나다" }, }; case "LOG_IN_FAILURE": return { ...state, isLoggingIn: false, isLoggedIn: false, }; case "LOG_OUT_REQUEST": return { ...state, isLoggingOut: true, }; case "LOG_OUT_SUCCESS": return { ...state, isLoggingOut: false, isLoggedIn: false, me: null, }; case "LOG_OUT_FAILURE": return { ...state, isLoggingOut: false, }; default: return state; } }; export default reducer; sagas-user.jsimport { all, fork, delay, put, takeLatest } from "redux-saga/effects"; import axios from "axios"; function loginAPI(data) { return axios.post("/api/login", data); // 서버에 요청 } function* login(action) { try { console.log("saga login"); yield delay(1000); // 비동기 요청 대신수행 // const result = yield call(loginAPI, action.data); yield put({ type: "LOG_IN_SUCCESS", data: action.data, }); } catch (err) { yield put({ type: "LOG_IN_FAILURE", data: err.response.data, }); } } function logoutAPI() { return axios.post("/api/logout"); // 서버에 요청 } function* logout() { try { yield delay(1000); // const result = yield call(logoutAPI); yield put({ type: "LOG_OUT_SUCCESS", }); } catch (err) { yield put({ type: "LOG_OUT_FAILURE", data: err.response.data, }); } } function* watchLogIn() { yield takeLatest("LOG_IN_REQUEST", login); } function* watchLogOut() { yield takeLatest("LOG_OUT_REQUEST", logout); } export default function* userSaga() { yield all([fork(watchLogIn), fork(watchLogOut)]); } configureStore.jsimport { applyMiddleware, createStore, compose } from "redux"; import createSagaMiddleware from "redux-saga"; import { createWrapper } from "next-redux-wrapper"; import { composeWithDevTools } from "redux-devtools-extension"; import reducer from "../reducers"; import rootSaga from "../sagas/index"; const configureStore = () => { const sagaMiddleware = createSagaMiddleware(); const middlewares = [sagaMiddleware]; const enhancer = process.env.NODE_ENV === "production" ? compose(applyMiddleware(...middlewares)) : composeWithDevTools(applyMiddleware(...middlewares)); const store = createStore(reducer, enhancer); store.sagaTask = sagaMiddleware.run(rootSaga); return store; }; const wrapper = createWrapper(configureStore, { debug: process.env.NODE_ENV === "development", }); export default wrapper;
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
건의사항
제가 잘못 본건지는 모르겠지만,Node.js API구현 중 퍼사드 패턴 47:31초에서function getToken() { const myconunt =6 if(mycount === undefined){ console.log("에러발생!!! 갯수를 제대로 입력해주세요!!!") return ~~~}좌측 인강화면을 보시면 01-04-token-count-api-facade 폴더에 들어있는index.js파일에서 function getToken() 함수에서 매개변수를 지우고, const mycount = 6 으로 대체하였습니다. 하지만, 우측 노션에 학습자료 퍼사드 패턴에서는 function getToken(count) { ~~} 라고 해서 count매개 변수가 존재합니다.count를 여전히 매개변수로 사용하고 있습니다. 즉 "노션에 있는 자료가 수정되어야 한다고 생각합니다."노션 자료 중 호출하는 부분에서 createTokenOfPhone('01012345678', 6);매개변수 6도 삭제되어야 합니다. "REST-API 실습 강의"에서 postman으로 학습시 "휴대폰 번호 전송"이 안되서 순간적으로 당황했습니다.확인하시고, 답글 달아주시면 감사하겠습니다.해당강의는 Node.js API구현 중 퍼사드 패턴 47:31초입니다. 노션은 학습 자료 / 퍼사드 패턴 입니다.