묻고 답해요
130만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결실무에 바로 적용하는 스토리북과 UI 테스트
스토리북 실행이 잘 안됩니다. ㅠㅠ
강의 초반, 스토리북 설치를 하는데 npx storybook@latest init 명령어를 치면 스토리북이 열리긴 하는데 로딩이 멈추질 않습니다. ㅠㅠ오류 메시지는 아래와 같이 나옵니다.열심히 구글링도 해봤지만 해결책을 찾지 못했습니다.
-
해결됨차세대 Node.js 백엔드 서버 개발(Fastify & Prisma & Typescript와 함께하는)
TypeError 관련하여 문의드립니다.
안녕하세요. TypeError 관련하여 문의드립니다.강의 회차는 Fastify 기본 설정입니다.먼저 아래는 제가 실습하는 환경입니다.Mac OS Ventura Node Version : v18.19.1 NPM Version : 10.2.4 아래는 오류에 대한 내용입니다.TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for /Users/jiyong/Desktop/Stater-Kit/src/main.ts at new NodeError (node:internal/errors:405:5) at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:136:11) at defaultGetFormat (node:internal/modules/esm/get_format:182:36) at defaultLoad (node:internal/modules/esm/load:101:20) at nextLoad (node:internal/modules/esm/hooks:864:28) at load (/Users/jiyong/Desktop/Stater-Kit/node_modules/ts-node/dist/child/child-loader.js:19:122) at nextLoad (node:internal/modules/esm/hooks:864:28) at Hooks.load (node:internal/modules/esm/hooks:447:26) at MessagePort.handleMessage (node:internal/modules/esm/worker:196:24) at [nodejs.internal.kHybridDispatch] (node:internal/event_target:786:20) { code: 'ERR_UNKNOWN_FILE_EXTENSION' } [nodemon] app crashed - waiting for file changes before starting...이미 커뮤니티에 해당 오류와 관련하여 질문이 있길레 강사님이 답변하신 부분을 보고 체크해봤지만 제 코드상 잘못된 부분을 못찾겠더라구요그래서 Google Drive에 올려놓으신 fastify-init.zip을 통하여 진행해보았지만 같은 오류가 뜹니다.해결 방법을 알 수 있을까요 ?
-
미해결따라하며 배우는 리액트 A-Z
마이너스버튼 테스트
test("Prevent the -,+ button from being pressed when the on/off button is clicked",()=>{ render(<App />); const onOffButtonElement = screen.getByTestId("on/off-button"); // click onOffButtonElement button fireEvent.click(onOffButtonElement); const plusButtonElement = screen.getByTestId("plus-button"); expect(plusButtonElement).toBeDisabled(); })on/off버튼을 통해 플러스와 마이너스 버튼의 클릭시 disable속성을 추가하는 과정에서 app.test.js에 테스트항목에 마이너스에 대한 내용을 안적어도 무관한가요?플러스가 잘작동하면 마이너스도 잘 작동할 것이기 때문인가요?
-
미해결Slack 클론 코딩[실시간 채팅 with React]
npm i typescript 설치 중 에러
디펜던시 호환문제같은데 다른 게시글에서 본https://www.npmjs.com/package/react-custom-scrollbars-2여기 들어가서 npm i react-custom-scrollbars-2 설치하려고 해봐도 같은 에러가 뜹니다ㅠ
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
data 폴더가 생성되지 않아요.
위에 코드로 docker-compose up을 해도 data 폴더가 생성되지 않아요. 다른 질문 참가해서 volumes: data:를 넣어봐도 생성되지 않습니다. 밑에 코드는 docker-compose up을 실행했을 때 뜨는 코드 입니다.PostgreSQL Database directory appears to contain a database; Skipping initialization2024-03-15 02:14:21.650 UTC [1] LOG: starting PostgreSQL 16.2 (Debian 16.2-1.pgdg120+2) on x86_64-pc-linux-gnu, compiled by gcc (Debian 12.2.0-14) 12.2.0, 64-bit2024-03-15 02:14:21.650 UTC [1] LOG: listening on IPv4 address "0.0.0.0", port 54322024-03-15 02:14:21.650 UTC [1] LOG: listening on IPv6 address "::", port 54322024-03-15 02:14:21.665 UTC [1] LOG: listening on Unix socket "/var/run/postgresql/.s.PGSQL.5432"2024-03-15 02:14:21.683 UTC [30] LOG: database system was shut down at 2024-03-15 02:13:06 UTC2024-03-15 02:14:21.697 UTC [1] LOG: database system is ready to accept connections 어떻게 해야할까요?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
docker-compose up 오류
docker-compose up을 사용하면 initdb: error: directory "/var/lib/postgresql/data" exists but is not emptyinitdb: hint: If you want to create a new database system, either remove or empty the directory "/var/lib/postgresql/data" or run initdb with an argument other than "/var/lib/postgresql/data". 라는 오류가 자꾸 발생합니다. 삭제하고 다시 해도 해결이 안되서 질문남깁니다. 어떻게 해결해야하나요.
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - Part 1 NestJS Core
refresh token 관련
안녕하세요 강의 잘듣고 있습니다!refresh token의 재발급 로직에서 궁금한 점이 생겼는데요,accessToken과 refreshToken이 모두 만료돼었을때 (오랫만에 앱을 들어간 경우) 만료된 refreshToken을 통해서 다시 refreshToken을 재발급 받는게 맞을까요?^ 위의 Guard가 들어가 있고 ^ Guard안에는 verifyToken이 들어 있어 accessToken을 발급받기위한 만료되지 않은 refreshToken이 들어있을땐 문제가 없지만 만료된 refreshToken이 들어가면 에러가 발생합니다.혹시 제가 강의중 놓친것이 있다면 알려주시면 감사하겠습니다!
-
해결됨[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - Part 1 NestJS Core
docker-compose 실행시 volume 연결 문제
[질문]postgres-data 연결이 안됩니다. 검색과 질문들을 통해 바인드 마운트라는 걸 알게되었습니다.현재 상황입니다.이전에 postgreSQL 설치를 했었던 적이 있어서, 완전 삭제 하고, 포트번호 변경, 절대경로, 폴더권한(윈도우라서 살짝만..), 재설치, 검색 등을 해보았지만, 주변지식을 얻을 수 있었지만, 해결책을 찾지는 못했습니다.강사님 help me~ 윈도우 11 homevscodenodejs 20docker desktop 4.28 (wsl 2) docker-compose.yaml 실행 로그nestjs 실행 로그폴더
-
해결됨[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - Part 1 NestJS Core
debug
강의중 debug 내용이 너무 좋아보여서실행하려고 하는데, 첫 step 부터 문제가 생겼습니다.말씀하신 대로에서 create a launch.json file 을 클릭했는데위 이미지 처럼 nodejs 가 나오지 않습니다. 몇시간 동안 검색을 했지만, 추가하는 방법을 찾지 못해 질문드립니다.혹시 수강생 중에 비슷한 상황을 겪어 보신 분..해결방법을 아시는 분 도움을 부탁드립니다.^^ [1] node -vv20.11.0v18.19.0 모두 테스트 해봤습니다.[2] 혹시나 해서 vscode 새로 설치도 해봤습니다.
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - Part 1 NestJS Core
다음 nest강의는 prisma는 사용안하실까요?
현업에서 typeorm 만큼이나 prisma를 많이 사용한다고 하는데 이쪽은 자료때문에 공부하기가 좀 힘들어서요
-
미해결[손에 익는 Next.js] Part 1 - 공식 문서 훑어보기
import 절대경로 설정 방법 질문 드립니다!
조은님 안녕하세요 🙂 강의 잘 보았습니다!강의를 보다가 문득 궁금한 점이 있는데요! import 문 통해서 절대경로로 파일을 불러올 때, 전역에 있는 tsconfig.json 내에서 파일별로 일일이 수동 설정을 해주어야하는 걸로 아는데 조은님께서는 자동으로 @가 붙여진 형태로 불러와지는 거 같아서요! 혹시 따로 설정 어떻게 하셨는지 여쭤봐도 괜찮을까요?
-
해결됨[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - Part 1 NestJS Core
where과 order가 적용안되는
내림차순을 확인하려고 param에 DESC를 넣었는데 내림차순 적용 되지 않길래 디버깅하다 문제에 직면했습니다.* eslint-disable prettier/prettier */ /* eslint-disable @typescript-eslint/no-unused-vars */ import { BadRequestException, Injectable } from '@nestjs/common'; import { BasePaginationDto } from './dto/base-pagination.dto'; import { FindManyOptions, FindOptionsOrder, FindOptionsWhere, Repository, } from 'typeorm'; import { BaseModel } from './entity/base.entity'; import { FILTER_MAPPER } from './const/filter-mapper.const'; import { HOST, PROTOCOL } from './const/env.const'; @Injectable() export class CommonService { paginate<T extends BaseModel>( dto: BasePaginationDto, repository: Repository<T>, overrideFindOptions: FindManyOptions<T> = {}, path: string, // api path의 일반화를 위해 ) { if (dto.page) { return this.pagePaginate(dto, repository, overrideFindOptions); } else { return this.cursorPaginate(dto, repository, overrideFindOptions, path); } } // page기반과 cursor기반 페이지네이션 2가지 만들기 /**page기반 CommonService paginate*/ private async pagePaginate<T extends BaseModel>( dto: BasePaginationDto, repository: Repository<T>, overrideFindOptions: FindManyOptions<T> = {}, ) {} /**cursor기반 CommonService paginate*/ private async cursorPaginate<T extends BaseModel>( dto: BasePaginationDto, repository: Repository<T>, overrideFindOptions: FindManyOptions<T> = {}, path: string, ) { /** * where__likeCount__more_than * * where__title__ilike */ const findOptions = this.composeFindOptions<T>(dto); const results = await repository.find({ ...findOptions, ...overrideFindOptions, }); const lastItem = results.length > 0 && results.length === dto.take ? results[results.length - 1] : null; // 새로운 URL을 생성할 때 새로운 쿼리값을 추가하는 방법 const nextUrl = lastItem && new URL(`${PROTOCOL}://${HOST}/posts`); if (nextUrl) { // dto의 키값들을 loop /** * dto의 키값들을 루핑하면서 * 키값에 해당되는 밸류가 존재하면 * param에 그대로 붙여넣는다. * * 단, where__id_more_than 값만 lastItem의 마지막 값으로 넣어준다. */ for (const key of Object.keys(dto)) { if (dto[key]) { if ( key !== 'where__id__more_than' && key !== 'where__id__less_than' ) { nextUrl.searchParams.append(key, dto[key]); // 나머지는 변경되지 마지막 아이템과 연관없이 동일하니까 } } } // 오름차순인지 내림차순인지 체크 let key = null; if (dto.order__createdAt === 'ASC') { key = 'where__id__more_than'; } else { key = 'where__id__less_than'; } // URL에 추가하니까 string으로 nextUrl.searchParams.append(key, lastItem.id.toString()); } return { data: results, cursor: { after: lastItem?.id ?? null, }, count: results.length, next: nextUrl?.toString() ?? null, }; } private composeFindOptions<T extends BaseModel>( dto: BasePaginationDto, ): FindManyOptions<T> { /** * where, * order, * take, * skip -> page 일때만 */ /** * DTO의 현재 생긴 구조는 아래와 같다 * { * where__id__more_than: 1, * order__createdAt: 'ASC' * } * * 현재는 where__id에 해당되는 where 필터만 사용중이지만 * 나중에 likeCount에 해당되는 추가 필터를 넣고싶으면 * 모든 where 필터들을 자동으로 파싱할 수 있을만한 기능을 제작 * * 1) where로 시작한다면 필터 로직을 적용한다. * 2) order로 시작한다면 정렬 로직을 적용한다. * 3) 필터 로직을 적용한다면 '__' 기준으로 split 했을 때 * 3개의 값으로 나뉘는지 2개의 값으로 나뉘는지 확인한다. * 3-1) 3개의 값으로 나뉜다면 FILTER_MAPPER에서 해당되는 operator 함수를 찾아서 적용한다. * 3-2) 2개의 값으로 나뉜다면 정확한 값을 필터하는 것이기 때문에 operator 없이 적용한다. * 4) order의 경우 3-2와 같이 적용한다. */ let where: FindOptionsWhere<T> = {}; let order: FindOptionsOrder<T> = {}; for (const [key, value] of Object.entries(dto)) { if (key.startsWith('where__')) { where = { ...where, ...this.parseWhereFilter(key, value), }; } else if (key.startsWith('order__')) { order = { ...order, ...this.parseWhereFilter(key, value), }; } } return { where, order, take: dto.take, skip: dto.page ? dto.take * (dto.page - 1) : null, }; } private parseWhereFilter<T extends BaseModel>( key: string, value: any, ): FindOptionsWhere<T> | FindOptionsOrder<T> { const options: FindOptionsWhere<T> | FindOptionsOrder<T> = {}; /** * 예를들어 where__id__more_than * __를 기준으로 나눴을때 * * ['where', 'id', 'more_than']으로 나눌 수 있다. */ const split = key.split('__'); if (split.length !== 2 && split.length !== 3) { throw new BadRequestException( `where 필터는 '__'로 split 했을때 길이가 2 또는 3이어야합니다 - 문제되는 키값 ${key}`, ); } /** * 길이가 2일 경우는 * where__id = 3 * * FindOptionsWhere로 풀어보면 * 아래와 같다 * * { * where: { * id: 3, * } * } */ if (split.length === 2) { // [where, id] const [_, field] = split; // field => id // value => 3 /** * { * id: 3 * } */ options[field] = value; } else { /** * 길이가 3일 경우에는 Typeorm 유틸리티 적용이 필요한 경우 * * where__id_more_than의 경우 * where는 버려도 되고 두번째 값은 필터할 키값이 되고 * 세번째 값은 typeorm 유틸리티가 된다. * * FILTER_MAPPER에 미리 정의해둔 값들로 * field 값에 FILTER_MAPPER에서 해당되는 utility를 가져온 후 * 값에 적용 해준다. * */ // ['where', 'id', 'more_than'] const [_, field, operator] = split; // where__id__between = 3, 4 // 만약에 split대상 문자가 존재하지 않으면 길이가 무조건 1이다. // const values = value.toString().split(','); // field -> id // operator -> more_than // FILTER_MAPPER -> MoreThan 함수 // if (operator === 'between') { // options[field] = FILTER_MAPPER[operator](values[0], values[1]); // } else { // options[field] = FILTER_MAPPER[operator](value); // } options[field] = FILTER_MAPPER[operator](value); return options; } } } 디버깅으로 중단점 눌러가며 확인해봤는데 parseWhereFilter 메서드에서 options은 올바르게 key, value를 생성하고 반환하는데composeFindOptions 메서드에서 밑의 코드를 중단점 확인했을 때 let where: FindOptionsWhere<T> = {}; let order: FindOptionsOrder<T> = {}; for (const [key, value] of Object.entries(dto)) { if (key.startsWith('where__')) { where = { ...where, ...this.parseWhereFilter(key, value), }; } else if (key.startsWith('order__')) { order = { ...order, ...this.parseWhereFilter(key, value), }; } } return { where, order, take: dto.take, skip: dto.page ? dto.take * (dto.page - 1) : null, };order와 where가 빈 객체로 반환되는 것을 확인했는데 어떻게 고쳐야 할까요
-
해결됨[코드팩토리] [초급] 8시간만에 끝내는 코드팩토리의 Typescript 완전정복 풀코스
object intersection에서 유니언으로 타입 질문
type CompanyOrPet = PersonType | (CompanyType|PetType); type CompanyOrPet2 = PersonType | CompanyType | PetType; const companyOrPet: CompanyOrPet2 = { // PersonType name: 'DD', age: 27, // CompanyType company:'GK', companyRegistrationNumber:'asfasfasfasf', //PetType petName:'Ori', petAge:4, }강의에서는 CompanyOrPet 타입으로 PersonType, CompanyType, PetType을 포함할 수 있는 타입으로 만들어서 객체를 만들셔서 어느 하나의 타입만 충족되더라고 에러없이 객체가 생성되도록 하셨는데 CompanyOrPet과 CompanyOrPet2의 차이점이 있나요?
-
해결됨[손에 익는 Next.js] Part 1 - 공식 문서 훑어보기
VSCode 확장프로그램은 어떤 것을 사용하셨나요?
안녕하세요 강의 잘 들었습니다. 혹시 VSCode에 어떤 확장프로그램들을 사용하셨는지궁금합니다.강의 듣다보면, 자동완성 되는 부분들이 있는데,제 환경에서는 그런 VSCode UI가 안뜨더라구요. 감사합니다.
-
해결됨[손에 익는 Next.js] Part 1 - 공식 문서 훑어보기
환경변수 오류
환경변수 설정해서 입력하면 오류가 나타납니다
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
회원 가입 페이지 기능 생성(3) 중 에러
회원가입 버튼을 눌렀을 시, 해당 오류가 발생합니다.
-
해결됨따라하며 배우는 리액트 A-Z
리액트 서버 실행 오류
리액트 설치 npx create-react-app ./ 이후리액트 최초 시작 시 npm run start가 작동하지 않습니다.위와 같은 오류가 발생하여, 아래와 같은 해결 방법들을 실행해보았습니다. 하지만, 위의 코드를 모두 실행했음에도 동일한 오류가 계속해서 발생합니다. node.js와 npm의 버전은 이러합니다. 폴더는 현재 강의자료 코드 폴더 내에 study라는 새로운 폴더를 만들어, 그 안에 리액트를 설치했습니다.프로젝트를 3번 정도 삭제하고 다시 설치했음에도 동일한 오류가 발생합니다. 어떻게 하면 좋을까요? 🥲 VSCode를 재시작하니 서버가 실행되었는데, App.js의 수정사항이 반영되지 않아 다시 VSCode를 재시작했더니 또 동일한 오류가 납니다...
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - Part 1 NestJS Core
모든 Route 기본 Private로 만들고 IsPublic Annotation 작업하기 강의부분 질문드립니다
안녕하세요 너무 잘듣고있습니다 '모든 Route 기본 Private로 만들고 IsPublic Annotation 작업하기' 수업듣는 중 질문이있어 글남깁니다.POSTMAN에서 DELETE기능을 눌렀을때 에러가 발생합니다 ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ[터미널에 나온 에러 내용][REQ] GET /posts?order__createdAt=DESC&take=5 2024. 3. 6. 오후 7:44:07[REQ] DELETE /posts/122 2024. 3. 6. 오후 7:44:32[Nest] 9576 - 2024. 03. 06. 오후 7:44:32 ERROR [ExceptionsHandler] update or delete on table "posts_model" violates foreign key constraint "FK_40cd89c6655ec7b102842feacab" on table "image_model"QueryFailedError: update or delete on table "posts_model" violates foreign key constraint "FK_40cd89c6655ec7b102842feacab" on table "image_model"at PostgresQueryRunner.query (C:\Users\manjin han\OneDrive\바탕 화면\flutter 폴더 및 파일\cf_sns\src\driver\postgres\PostgresQueryRunner.ts:331:19)at processTicksAndRejections (node:internal/process/task_queues:95:5)at DeleteQueryBuilder.execute (C:\Users\manjin han\OneDrive\바탕 화면\flutter 폴더 및 파일\cf_sns\src\query-builder\DeleteQueryBuilder.ts:77:33)at PostsService.deletePost (C:\Users\manjin han\OneDrive\바탕 화면\flutter 폴더 및 파일\cf_sns\src\posts\posts.service.ts:332:7) [postman 에러 내용]{ "statusCode": 500, "message": "Internal server error" } ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ강의상terminal창에, 이렇게 화면이 나와야하는데해당화면처럼 에러가 나오네요몇일 고민해도 안되서 질문 드립니다
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - Part 1 NestJS Core
영상 음성이 끊겨서 진짜 듣기 힘드네요 ㅠㅠ
여러분들은 음성이 안끊기나요??ㅠㅠ섹션25process 객체를 이용해서 환경변수 불러오기12~20초 사이 한 3번은 끊기네요 ㅜㅜ그런데 저런 일이 전체 영상의 거의 배부분 저래요 ㅜㅜ(브라우져 하드웨어가속 기능 꺼져있어요 ㅠ) 강의 내용은 참 좋은데 말이 끊기니까 진짜 듣기 힘드네요 ㅠㅠ
-
해결됨[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - Part 1 NestJS Core
@Column update 프로퍼티
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.코드팩토리 통합 링크https://links.codefactory.aiFlutter 강의를 구매하시면 코드팩토리 디스코드 서버 플러터 프리미엄 채널에 들어오실 수 있습니다! 디스코드 서버에 들어오시고 저에게 메세지로 강의를 구매하신 이메일을 보내주시면 프리미엄 채널에 등록해드려요! 프리미엄 채널에 들어오시면 모든 질의응답 최우선으로 답변해드립니다! -- 질문강사님은 update 프로퍼티를 false로 설정하고 patch 요청을 보내면 500 에러가 발생하였는데 저는 다시 해봐도 업데이트는 실제로 안되었지만.. 500에러는 발생이 안되네요. 설정을 잘못한것일까요?.