묻고 답해요
131만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨한 입 크기로 잘라먹는 타입스크립트(TypeScript)
PromiseUnpack<Promise<number>> 코드 질문드립니다.
type PromiseUnpack<T> = T extends Promise<infer R> ? R : never; type PromiseA = PromiseUnpack<Promise<number>>; // number타입 type PromiseB = PromiseUnpack<Promise<string>>; // string타입안녕하세요 선생님. 8:40~부터 나오는 실습코드입니다.타입스크립트의 타입 정의에 관해 헷갈리는 개념이 있습니다.PromiseUnpack<Promise<number>>에서 Promise는 정의해주지 않았는데 갑자기 나오는 이유가 궁금합니다.type Promise = 블라블라이게 없어서 궁금합니다. Promise라는 타입을 정의해준 적은 없지만 '그런 타입이 존재하는구나' 라고 타입스크립트에서 추론이 되어 Promise의 타입 정의 없이 예시로 코드를 작성하신 것일까요??
-
해결됨Slack 클론 코딩[실시간 채팅 with React]
중첩 라우팅 관련
안녕하세요. v6 업데이트 후 중첩 라우터 문제가 있어 질문 드립니다.로그인 성공 시, http://localhost:3090/workspace/channel 로 이동하게 하였는데 workspace 컴포넌트에서 channel 컴포넌트를 호출하도록 중첩 라우팅 처리한 부분이 동작하지 않습니다. Workspace/index.tsximport fetcher from '@utils/fetcher'; import React, { FC, useCallback } from 'react'; import useSWR from 'swr'; import axios from 'axios'; import { Redirect, Switch } from 'react-router'; import { BrowserRouter, Routes, Route, useNavigate, Navigate, Outlet } from 'react-router-dom'; import { Header, RightMenu, ProfileImg, ProfileModal, LogOutButton, WorkspaceWrapper, Chats } from '@layouts/Workspace/styles'; import gravatar from 'gravatar'; import loadable from '@loadable/component'; const Channel = loadable(() => import('@pages/Channel')); const DirectMessage = loadable(() => import('@pages/DirectMessage')); const Workspace : FC = ({children}) => { const { data, error, mutate } = useSWR('http://localhost:3095/api/users', fetcher); // 전역 const onLogout = useCallback(() => { axios .post('http://localhost:3095/api/users/logout', null, { withCredentials: true, }) .then(() => { mutate(false); }); }, []); if (!data) { console.log('data', data); return <Navigate to="/login" replace />; } console.log("workspace page rendering"); return ( <Chats> <div>테스트</div> <Routes> <Route path="/channel/:channel" element={<Channel />} /> <Route path="/dm/:id" element={<DirectMessage />} /> </Routes> </Chats> ); } export default Workspace; pages/index.tsximport React from 'react'; import { Container, Header } from './styles'; const Channel = () => { console.log("channel page rendering"); return ( <div>채널!</div> ); } export default Channel; App/index.tsx import React from 'react'; import loadable from '@loadable/component'; import { Redirect } from 'react-router'; import { Routes, Route, Navigate, BrowserRouter } from 'react-router-dom'; const LogIn = loadable(() => import('@pages/LogIn')); const SignUp = loadable(() => import('@pages/SignUp')); const Workspace = loadable(() => import('@layouts/Workspace')); const App = () => { return ( <Routes> <Route path="/" element={<Navigate replace to="/login" />} /> <Route path="/login" element={<LogIn />} /> <Route path="/signup" element={<SignUp />} /> <Route path="/workspace/:workspace/*" element={<Workspace />} /> </Routes> ); }; export default App; http://localhost:3090/workspace/channel로그인에 성공하여 위의 주소로 이동 시, 테스트 라는 글씨만 표시되고 채널! 이라는 글씨가 표시되지 않습니다.코드는 공지사항에 있는 링크와 동일하게 작성을 하였는데 잘못 처리한 부분이 있을까요? 바쁘실텐데 확인 한번 해주시면 감사하겠습니다.
-
미해결따라하며 배우는 리액트 A-Z
중첩 라우트
그럼 중첩 라우트는 인클루드 개념 인거겠네요?
-
해결됨Next.js 풀스택 Github Issue 서비스 만들기
vercel 배포후 메인페이지 데이터 연동이 안됩니다
질문 제출 안내 제목: vercel 배포후 메인페이지 데이터 연동이 안됩니다설명: 오늘 완강했습니다 재밌었어요 ㅎㅎ 제가 놓친 부분이 있는지 모르겠네요.글 수정삭제는 잘됩니다. 그런데 메인페이지에 있는 최신글이랑 차트는 재배포를 해야 적용이 되는군요 ㅠㅠ
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - Part 1 NestJS Core
웹에서 포스트 맨 사용하면 파일업로드가 불가능합니다.
아무리 찾아봐도 웹에서 해결하는 것이 불가능해서 postman desktop 까는 것을 추천드립니다 ㅎㅎ
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - Part 1 NestJS Core
gateway level에서 filter도 잘 작동합니다!
@UsePipes( new ValidationPipe({ transform: true, transformOptions: { enableImplicitConversion: true, }, whitelist: true, forbidNonWhitelisted: true, }), ) @UseFilters(SocketCatchHttpExceptionFilter) @WebSocketGateway({ // ws://localhost:3000/chats namespace: 'chats', }) export class ChatsGateway implements OnGatewayConnection { constructor( private readonly chatsService: ChatsService, private readonly messagesService: ChatsMessagesService, ) {} ... }각각의 메소드마다 넣어주는것보다 나은것 같아서 공유 해보아요!
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - Part 1 NestJS Core
ValidationPipe를 좀 더 편하게 쓸 수 없을까해서 찾아보니 controller에서 사용 할 수 있더라고요
https://docs.nestjs.com/faq/request-lifecycle공식 문서에 보니까 controller level에서 사용 할 수 있는것 같아서controller와 gateway가 비슷하니까 사용 가능하지 않을까 해서 테스트 해보니까@UsePipes( new ValidationPipe({ transform: true, transformOptions: { enableImplicitConversion: true, }, whitelist: true, forbidNonWhitelisted: true, }), ) @WebSocketGateway({ // ws://localhost:3000/chats namespace: 'chats', }) export class ChatsGateway implements OnGatewayConnection { ... }해당 gateway에서 usePipes를 설정 할 수 있더라고요!차선책으로 이것도 괜찮은것 같아서 공유 해봅니다!
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - Part 1 NestJS Core
19:55초정도에 3명의 사용자중 메세지를 보낼려는 사용자가 "enter_room"에 메세지를 보내는데
아마 강사님 실수인듯합니다.User 1이 enter_room에 2번 채팅방에 참여 한다고 메세지를 보내는데 "enter_chat"이 맞습니다! 제가 실험 해보니까 결국 enter_chat을 제대로 하지 않은 경우에 다른 사용자가 보낸 message를 제대로 리시브 받지 못하더라고요.
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - Part 1 NestJS Core
쿼리러너관련질문
안녕하세요쿼리러너 관련 질문드립니다 코멘트 생성시 Pid 에 일부러 엉뚱한 값을 넣는 경우QueryRunner를 쓰고 안쓰고에 차이가 있더라구요. 예를들어this.commentService.ceateComment(dto, pId, user, qr);qr repository 를 일부러 사용하지 않게 조작하면 pid 에 이상한 값을 넣어도 valitation 없이 create 가 되었는데Qr 을 넘겨주는 순간 아래와 같이 유효하지 않은 pk 에 대해 조작하려고 한다는 validation 을 해주더라구요. { "path": "/posts/{엉뚱한 값}/comments", "statusCode": 500, "message": "insert or update on table \"comment\" violates foreign key constraint \"FK_94a85bb16d24033a2afdd5df060\"", "timestamp": "1/21/2024, 4:06:08 PM"} 이런 차이는 어디서 나는것일지, 이런것들도 Query Runner 의 역할인지도 궁금합니다.
-
해결됨한 입 크기로 잘라먹는 타입스크립트(TypeScript)
강의중 오류가 나왔습니다
해당강의 따라하던중compilerOptions 에서 target 을 ES5로 했을때는 아무오류 없이 js 파일도 잘 나오는데요, ESNext로 하고 컴파일하면 오류가 나와요. 하지만 동일하게 js파일은 생성이 되요.node_modules/@types/node/globals.d.ts:396:25 - error TS2792: Cannot find module 'undici-types'. Did you mean to set the 'moduleResolution' option to 'nodenext', or to add aliases to the 'paths' option?396 : typeof import("undici-types").FormData; 제가 뭘 따로 설치하거나 하진 않고 강의만 따라했다고 생각했는데 한번만 봐주세요!
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - Part 1 NestJS Core
length에서 min값만 설정하고 싶을 때 max 없이 validationOptions을 어떻게 전달할 수 있나요..?
length에서 max값을 전달 안해주고 min만 설정하고 싶을때if(args.constraints.length===2){} else}{ }여기서 else 가 실행되어야 하는데 max 값 없이 validationOptions만을 전달하면 validationOptions가 두번째 인자로 전달되는 것 아닌가요..? 이렇게 하면 에러 나는데.. max 값에 undefined나 null을 넣어도 안되는 것 같습니다. 어떻게 max 값 없이 validationOptions를 실행할 수 있나요..?
-
해결됨Next.js 필수 개발 가이드 3시간 완성!
SSR CSR
질문이 있습니다.page 같은 경우는 최대한 SSR로 하고 page 하위에 사용되는 컴포넌트 같은 경우는 브라우저 API 사용한다면 CSR로 하는게 맞나요? ( 하이브리드 렌더링 방식 ) app/page.tsx 파일 상단에 "use client" 선언하면 페이지 전체가 CSR로 된다고 생각하는데 네트워크 창에 localhost에 preview를 보면 빈 페이지가 아닌 렌더링된 내용이 보이는데 왜 그런걸까요?
-
해결됨Next.js 풀스택 Github Issue 서비스 만들기
Prisma.issue.findMany라우터 가 아닌 페이지에서 사용 ( in 60. 이슈 필터링 기능 구현 )
안녕하세요?꾸준히 학습을 하여 60강을 지나고 있는데요, 페이지.tsx 에서도 프리즈마를 활용해서 데이터를 서버로 요청하는것은 처음 보았습니다. 이렇게 되면 라우트를 거치지 않고 바로 데이터요청을 하는 것인데.. Fetch 를 통한 route.tsx 를 거치지 않고 바로 요청하는 이유가 있는지요?현업에서도 이렇게 하는 경우가 자주 있는지요?
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - Part 1 NestJS Core
모델명을 복수로 하는 이유가 따로 있을까요?
안녕하세요.강의내용과는 상관없는 뜬금 질문인데,모델의 엔티티파일, api path 명 등등에 단어들을 대부분 복수로 표기하시는 이유가 따로 있는지 궁금합니다.MessageModels vs MessagesModel ?/users/:id vs user/:id ?
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - Part 1 NestJS Core
docker-compose up 이후 shut down 로그가 나오며 postgres-data에 데이터가 생성되지 않습니다.
안녕하세요.강의 보면서 docker-compose 파일 만들고 실행하다가 막히는 부분이 있어 질문드립니다.osubuntu 20.04docker versionDocker version 24.0.2, build cb74dfc docker-compose fileservices: postgres: image: postgres:15 restart: always volumes: - ./postgres-data:/var/lib/postgresql/data ports: - '5432:5432' environment: POSTGRES_USER: postgres POSTGRES_PASSWORD: postgres POSTGRES_DB: postgres terminal log[+] Running 1/0 ✔ Container nestjs_sns_server-postgres-1 Created 0.0s Attaching to nestjs_sns_server-postgres-1 nestjs_sns_server-postgres-1 | The files belonging to this database system will be owned by user "postgres". nestjs_sns_server-postgres-1 | This user must also own the server process. nestjs_sns_server-postgres-1 | nestjs_sns_server-postgres-1 | The database cluster will be initialized with locale "en_US.utf8". nestjs_sns_server-postgres-1 | The default database encoding has accordingly been set to "UTF8". nestjs_sns_server-postgres-1 | The default text search configuration will be set to "english". nestjs_sns_server-postgres-1 | nestjs_sns_server-postgres-1 | Data page checksums are disabled. nestjs_sns_server-postgres-1 | nestjs_sns_server-postgres-1 | fixing permissions on existing directory /var/lib/postgresql/data ... ok nestjs_sns_server-postgres-1 | creating subdirectories ... ok nestjs_sns_server-postgres-1 | selecting dynamic shared memory implementation ... posix nestjs_sns_server-postgres-1 | selecting default max_connections ... 100 nestjs_sns_server-postgres-1 | selecting default shared_buffers ... 128MB nestjs_sns_server-postgres-1 | selecting default time zone ... Etc/UTC nestjs_sns_server-postgres-1 | creating configuration files ... ok nestjs_sns_server-postgres-1 | running bootstrap script ... ok nestjs_sns_server-postgres-1 | performing post-bootstrap initialization ... ok nestjs_sns_server-postgres-1 | syncing data to disk ... ok nestjs_sns_server-postgres-1 | nestjs_sns_server-postgres-1 | nestjs_sns_server-postgres-1 | Success. You can now start the database server using: nestjs_sns_server-postgres-1 | nestjs_sns_server-postgres-1 | pg_ctl -D /var/lib/postgresql/data -l logfile start nestjs_sns_server-postgres-1 | nestjs_sns_server-postgres-1 | initdb: warning: enabling "trust" authentication for local connections nestjs_sns_server-postgres-1 | initdb: hint: You can change this by editing pg_hba.conf or using the option -A, or --auth-local and --auth-host, the next time you run initdb. nestjs_sns_server-postgres-1 | waiting for server to start....2024-01-17 13:05:30.755 UTC [49] LOG: starting PostgreSQL 15.5 (Debian 15.5-1.pgdg120+1) on x86_64-pc-linux-gnu, compiled by gcc (Debian 12.2.0-14) 12.2.0, 64-bit nestjs_sns_server-postgres-1 | 2024-01-17 13:05:30.760 UTC [49] LOG: listening on Unix socket "/var/run/postgresql/.s.PGSQL.5432" nestjs_sns_server-postgres-1 | 2024-01-17 13:05:30.777 UTC [52] LOG: database system was shut down at 2024-01-17 13:05:30 UTC nestjs_sns_server-postgres-1 | 2024-01-17 13:05:30.786 UTC [49] LOG: database system is ready to accept connections nestjs_sns_server-postgres-1 | done nestjs_sns_server-postgres-1 | server started ... nestjs_sns_server-postgres-1 | nestjs_sns_server-postgres-1 | 2024-01-17 13:30:30.440 UTC [1] LOG: starting PostgreSQL 15.5 (Debian 15.5-1.pgdg120+1) on x86_64-pc-linux-gnu, compiled by gcc (Debian 12.2.0-14) 12.2.0, 64-bit nestjs_sns_server-postgres-1 | 2024-01-17 13:30:30.440 UTC [1] LOG: listening on IPv4 address "0.0.0.0", port 5432 nestjs_sns_server-postgres-1 | 2024-01-17 13:30:30.440 UTC [1] LOG: listening on IPv6 address "::", port 5432 nestjs_sns_server-postgres-1 | 2024-01-17 13:30:30.450 UTC [1] LOG: listening on Unix socket "/var/run/postgresql/.s.PGSQL.5432" nestjs_sns_server-postgres-1 | 2024-01-17 13:30:30.463 UTC [29] LOG: database system was shut down at 2024-01-17 13:30:21 UTC nestjs_sns_server-postgres-1 | 2024-01-17 13:30:30.473 UTC [1] LOG: database system is ready to accept connections nestjs_sns_server-postgres-1 | 2024-01-17 13:30:33.019 UTC [1] LOG: received fast shutdown request nestjs_sns_server-postgres-1 | 2024-01-17 13:30:33.024 UTC [1] LOG: aborting any active transactions nestjs_sns_server-postgres-1 | 2024-01-17 13:30:33.025 UTC [1] LOG: background worker "logical replication launcher" (PID 32) exited with exit code 1 nestjs_sns_server-postgres-1 | 2024-01-17 13:30:33.025 UTC [27] LOG: shutting down nestjs_sns_server-postgres-1 | 2024-01-17 13:30:33.030 UTC [27] LOG: checkpoint starting: shutdown immediate nestjs_sns_server-postgres-1 | 2024-01-17 13:30:33.063 UTC [27] LOG: checkpoint complete: wrote 3 buffers (0.0%); 0 WAL file(s) added, 0 removed, 0 recycled; write=0.011 s, sync=0.005 s, total=0.038 s; sync files=2, longest=0.003 s, average=0.003 s; distance=0 kB, estimate=0 kB nestjs_sns_server-postgres-1 | 2024-01-17 13:30:33.069 UTC [1] LOG: database system is shut down (1만자 이하로 작성해야 해서 로그는 중간 생략하였습니다.)docker-comopse 파일이 정상적으로 실행이 되고 있는 상황인데 Postgresql 데이터 베이스 연결하면서 문제가 발생하고 있는것 같습니다. 프로젝트 폴더의 postgres-data폴더에도 postgresql 데이터가 생성되지 않았구요.혹시 제가 잘못하고 있는 부분이 있을까요..?
-
미해결
onSnapshot 함수 unsubscribe 에 대해서 질문이 있습니다
제가 궁금한건 다른 페이지에 있을 때에도 스냅샷 함수를 가동시켜 비용이 계속해서 발생하는 것을 막기위해 온스냅샷 함수를 unsubscribe, 구독취소하는 코드인데요어째서 제가 읽기에는 unsubscribe = ~ 온스냅샷함수 ~...return () => unsubscribe함수 실행useEffect cleanup기능으로 언마운트시 온스냅샷함수를 정지하려는데 다시 온스냅샷함수를 실행? 제가 어떻게 잘못 이해하는건지 모르겠어요 .. ㅠㅠexport default function Timeline() { const [tweets, setTweet] = useState<ITweet[]>([]); let unsubscribe: Unsubscribe | null = null; const fetchTweets = async () => { const tweetsQuery = query( collection(db, "tweets"), orderBy("createdAt", "desc"), limit(25) ); unsubscribe = await onSnapshot(tweetsQuery, (snapshot) => { const tweets = snapshot.docs.map((doc) => { const { tweet, createdAt, userId, username, photo } = doc.data(); return { tweet, createdAt, userId, username, photo, id: doc.id, }; }); setTweet(tweets); }); }; useEffect(() => { fetchTweets(); return () => { unsubscribe && unsubscribe(); }; }, []); }
-
해결됨Next.js 풀스택 Github Issue 서비스 만들기
서버 사이드 렌더링이 발생하는 이유
클라이언트 컴포넌트로 지정했는데도 서버사이드 렌더링으로 동작하는 이유가 뭔가요?
-
해결됨[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
미들웨어 확장 패턴 적용 이후 api 제한이 안되는 이슈가 있습니다
미들웨어 확장 패턴 적용 이전에는 api호출 횟수를 넘어서면 handler()함수에 적어넣은 부분이 잘 동작합니다하지만 적용 이후에는 왜 인지 동작하지 않습니다.어떤 이유일까요?
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - Part 1 NestJS Core
오류 메시지는 어디서 작성하는 것이 좋을까요?
사용자에게 (프로그램을 사용하는 고객) 오류 메시지를 보낸다고 할 때는 백엔드에서 메시지를 만들어 보내는 것이 좋을까요? 아니면 프론트엔드에서 메시지를 만들어서 보이는 것이 좋을까요?
-
해결됨한 입 크기로 잘라먹는 타입스크립트(TypeScript)
JS로 작업한 프로젝트 -> TS로 마이그레이션 문의
안녕하세요 js -> ts 마이그레이션 문의드립니다!거의 다 작업된 js문법으로 만들어진 개인 프로젝트가 있습니다.이 강의로 ts 공부하면서 차근차근 적용해보려고 하는데 코드 양이 꽤 되어서 시간이 오래 걸릴 것 같아 여러 방법중에 고민이 있습니다.여러 방법을 생각해봤는데 한번 봐주시면 감사하겠습니다! 기존 main브랜치에서 계속 커밋하면서 파일 한개 한개씩 차근차근 ts로 바꾸기 -> ts마이그레이션과 함께 구직활동을 병행하려고 하는데, 회사 입장에서는 지원자의 코드가 어떤 파일은 ts이고, 어떤 파일은 js이고 뒤죽박죽이라 마이너스가 될까봐 걱정입니다. 마이그레이션 하다가 꼬일까봐 걱정되어 ts전용 브랜치를 따로 파서 작업 -> 만약 마이그레이션 작업 외에 기능이 추가되거나 버그를 수정하는 코드가 추가된다면, ts브랜치로만 진행 (추후에 ts브랜치가 문제없이 완성된다면 ts브랜치가 main브랜치가 됌)기타 의견이미 몇달동안 만든 프로젝트를 ts로 바꾸려니 고민이 많아서 선생님의 의견이 궁금합니다! 제가 적어놓은 방법이 맞는지도 잘 모르겠습니다.. 도움 주시면 감사하겠습니다.