NodeJS (12) 썸네일형 리스트형 풀스택 틱톡 클론 따라하기 - 5. 예외 처리 필터 https://youtu.be/Xy15S0nQxBQ 1:49:13 ~ 2:01:44 예외 처리 필터 // src/filters/custom-exception.filter.ts import { ApolloError } from 'apollo-server-express'; import { ArgumentsHost, Injectable } from '@nestjs/common'; import { Catch } from '@nestjs/common'; import { BadRequestException } from '@nestjs/common'; import { ValidationPipe } from '@nestjs/common'; import { GqlExceptionFilter } from '@nestjs/.. 풀스택 틱톡 클론 따라하기 - 4. AuthModal - Register https://youtu.be/Xy15S0nQxBQ 1:28:07 ~ 1:49:13 AuthModal - Register // src/components/Login.tsx import React from "react"; function Login() { return Login; } export default Login; // // src/components/Register.tsx import React from "react"; function Register() { return Register; } export default Register; npm i react-icons // src/components/AuthModal.tsx import { useState } from "react"; import .. 풀스택 틱톡 클론 따라하기 - 3. Resolver, ProtectedRoutes https://youtu.be/Xy15S0nQxBQ 1:12:00 ~ 1:28:07 백엔드 목차. 모듈 프로바이더 설정 리졸버 뮤테이션 및 쿼리 작성 프론트엔드 목차. ProtectedRoutes 모듈 프로바이더 설정 [Nest] 9400 - 2023. 11. 06. 오후 8:45:17 ERROR [ExceptionHandler] Nest can't resolve dependencies of the AuthService (?, PrismaService, ConfigService). Please make sure that the argument JwtService at index [0] is available in the AuthModule context. Potential solutions: Is Aut.. 풀스택 틱톡 클론 따라하기 - 2. 프론트엔드 셋업 https://youtu.be/Xy15S0nQxBQ 영상의 40분 30초부터 1시간 12분까지의 내용을 다룬다. 목차. TailwindCSS 셋업 react-router-dom 셋업 상태관리 Zustand GraphQL, Apollo 셋업 graphql 코드 제너레이터 셋업 TailwindCSS 셋업 vite로 생성한 프로젝트는 node_modules이 없으므로 npm install을 먼저 해주어야한다. App.css 삭제, index.css 내용 비우기. https://tailwindcss.com/docs/guides/vite Vite에서 Tailwind CSS 사용하기. npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p /.. 풀스택 틱톡 클론 따라하기 - 1. 백엔드 셋업 목차. 풀스택 틱톡 클론 따라하기 tiktok_clone_fullstack 폴더 생성 프론트엔드 프로젝트 폴더 생성 Postgres는 docker로 준비 Prisma 셋업 GraphQL 셋업하기 AppModule 설정 NestJS의 웹 앱 초기화 및 구성 NestJS CLI를 사용하여 모듈과 서비스 생성 NestJS와 GraphQL을 사용하여 데이터 모델 정의 DTO 클래스 정의 인증과 사용자 관리 서비스 정의 풀스택 틱톡 클론 따라하기 https://youtu.be/Xy15S0nQxBQ NestJS를 배우기 위한 목적으로 찾은 강의. 풀스택 틱톡 클론: NestJS, GraphQL, Prisma, Postgres, React, Apollo Client, Zustand & Tailwind 이 글은 영상의.. 타입스크립트 시작하기 https://aerocode.net/303 vscode에서 타입스크립트 프로젝트 생성하기 https://www.samsungsds.com/kr/insights/TypeScript.html 타입스크립트 특징, vscode 설정, 기본 문법 https://typescript-kr.github.io/ 타입스크립트 공식 웹사이트의 한글 번역 https://darrengwon.tistory.com/116 tsc-watch 사용하기 https://geonlee.tistory.com/214 tsconfig.json 컴파일 옵션 정리 npm i -g typescript npm으로 타입스크립트 전역 설치 vscode 마켓플레이스에서 typescript extension pack 설치 작업할 프로젝트 폴더에서 npm i.. 타입스크립트에서 세션에 커스텀 속성 사용하기 https://stackoverflow.com/questions/38900537/typescript-extend-express-session-interface-with-own-class express-session을 인스톨하고 컨트롤러에서 로그인 작업 후 세션에 로그인 유무와 유저 데이터를 속성을 만들어서 저장하려할때, 타입스크립트에선 해당 속성이 없다는 에러가 뜬다 해결법이 여러가지 있었는데, 그 중에 제일 간단하고 맘에 드는게 있었다 express 서버가 실행되는 파일(index.ts 또는 server.ts 또는 app.ts)에 아래 코드를 추가하면 된다 declare module "express-session" { interface SessionData { user: object; loggedIn:.. next.js에서 Router를 통해 props 기능 구현 https://velog.io/@sbinha/next.js-Router를-통해-props-기능-구현 리액트에서 useHistory로 데이터를 보내고 useLocation으로 데이터를 받는 방법을 next.js에서 next/router로 가능하다 회원가입시 입력한 아이디와 비밀번호를 입력하고 서브밋하면 로그인창으로 이동 후, 로그인 입력폼에 전달되어, 사용자가 다시 아이디와 비밀번호를 입력할 필요가 없는 용도로 썼다 import Router from "next/router"; ... const query = { userId: String(userId), password: String(password), queryMsg: "Account created. Please log in." }; Router.push.. 이전 1 2 다음
