jhphon0730

[Service]// 사용자 로그인 함수interface SignInProps { email: string; password: string;}export const signIn = async (signInProps: SignInProps): Promise => { try { const findUser = await userRepository.findOne({ where: { email: signInProps.email } }); if (!findUser) { throw new Error('User not found'); } // compare password if (!comparePassword({password: signInProps.passwor..

테이블 정의 및 데이터베이스 설계## 사용자 관리 테이블 설정- [x] **사용자 테이블 (Users)**: 사용자의 기본 정보와 계정 관리를 위한 테이블을 생성합니다. - `id`, `email`, `password`, `username`, `profile`, `bio`, `role`, `created_at`, `updated_at` 필드 추가import { Entity, PrimaryGeneratedColumn, Column, CreateDateColumn, UpdateDateColumn } from 'typeorm';export interface UserModel { id: number; username: string; email: string; password: string; bio: ..

마이그레이션 이유TypeORM은 TypeScript와 완벽하게 호환되어, TypeScript의 장점을 온전히 누릴 수 있다고 공식 문서에 적혀있다...  개발자가 데이터베이스와의 연결을 관리하는 데 필요한 노력을 줄여주는데 SQL 쿼리를 작성하는 대신, TypeORM의 메서드를 사용하면 데이터베이스를 조작할 수 있다. 또한, TypeORM은 자동으로 SQL을 생성하므로, 복잡한 쿼리 작성의 부담을 덜어주며, 개발 속도를 크게 향상 시켜주기 때문에 TypeORM을 적용하려고 하고 있다.TypeORM을 기존 코드에 적용하려면 데이터베이스 연결 설정 및 엔티티 정의를 추가해야 합니다.# 패키지 설치npm install typeorm reflect-metadata pgTypeORM 설정TypeORM의 데이터 소..

필요한 패키지 설치npm install pgnpm install @types/pg --save-dev폴더 구조 설계src├── controllers│ └── authController.ts├── db│ └── index.ts // PostgreSQL 연결 설정│ └── userModel.ts // 사용자 관련 데이터베이스 쿼리 ( Model )├── middlewares│ └── authMiddleware.ts├── utils│ └── bcryptConfig.ts│ └── jwtConfig.ts├── app.ts└── .envPostgreSQL 연결 설정# db/index.tsimport dotenv from 'dotenv';dotenv.config();im..

기본적인 Docker & Docker-Compoes 설치 생략Docker Compose 기본 설정 version: '3.8'services: postgres: image: postgres:15 container_name: postgres restart: always environment: POSTGRES_USER: postgres POSTGRES_PASSWORD: postgres ports: - "5432:5432" volumes: - postgres-data:/var/lib/postgresql/data pgadmin: image: dpage/pgadmin4 container_name: pgadmin restart: ..

로그인 기능을 구현하기 위한 주요 단계npm install express jsonwebtoken bcryptjs body-parsernpm install @types/express @types/jsonwebtoken @types/bcryptjs @types/body-parser --save-dev 로그인 기능 구현 시에 필요한 라이브러리 / 패키지 설치 CORS & bodyParser 설명 생략 ... .토큰 생성 및 토큰 검증// jwtConfig.tsimport jwt from 'jsonwebtoken';const JWT_SECRET = process.env.JWT_SECRET || 'your-secret-key'; // 비밀 키// JWT 생성 함수export const generateToken =..

웹 개발에서 API를 만들 때, 클라이언트에게 일관되고 구조화된 응답을 전달하는 것이 중요합니다. API 응답을 처리하는 제너릭(Generic)을 어떻게 사용할 수 있는지, 그리고 이를 통해 얻을 수 있는 장점과 단점을 소개하겠습니다.  1. 제너릭(Generic)이란?TypeScript에서 제너릭은 함수, 클래스, 인터페이스에서 타입을 동적으로 정의할 수 있게 해주는 기능입니다. 제너릭을 사용하면, 함수나 클래스의 타입을 호출 시점에 지정할 수 있어, 다양한 데이터 타입을 다룰 때 유용합니다.간단히 말하면, 제너릭은 "어떤 타입을 사용할지 미리 정해놓지 않고, 나중에 그 타입을 정의하겠다"는 의미입니다.2. responseSuccess 함수에 제너릭 사용하기API 응답에서 데이터의 형식을 유연하게 처리..

Neovim에서 Node.js 개발에 필요한 Mason typescript-language-server: TypeScript LSP 서버로, Neovim에서 TypeScript 코드 완성, 오류 검사 등을 지원합니다.eslint: 코드 품질과 일관성을 위해 사용하는 JavaScript/TypeScript 린터입니다.prettier: 코드 포매터로, 코드 스타일을 일관되게 유지할 수 있습니다.vscode-eslint: ESLint 확장 기능을 위한 도구로, Neovim에서도 지원됩니다.:MasonInstall typescript-language-server eslint prettier TypeScript + Node.js (Express)로 백엔드를 구축1. 프로젝트 초기화 및 설정mkdir my-proj..

1. 클라이언트 컴포넌트의 상태 관리클라이언트 컴포넌트란?클라이언트 컴포넌트는 브라우저에서 렌더링되며, 사용자와의 상호작용 및 상태 관리를 담당합니다. 클라이언트 컴포넌트는 use client 지시문을 통해 명시적으로 선언'use client';import { useState } from 'react';export default function Counter() { const [count, setCount] = useState(0); return ( setCount(count + 1)}> Count: {count} );}클라이언트 상태 관리 방법클라이언트 컴포넌트는 React의 기본 상태 관리 도구와 외부 상태 관리 라이브러리를 활용할 수 있습니다.1. React의 내장 상태..

이 글에서는 Next.js 14를 기준으로 프로젝트 구조와 아키텍처 설계의 핵심 개념과 고급 기능들을 심층적으로 탐구하려고 함  파일 기반 라우팅 구조파일 기반 라우팅 시스템을 통해 프로젝트의 구조를 직관적이고 체계적으로 관리App Router의 기본 구조자동 경로 매핑: app/ 디렉토리 내 파일은 URL 경로와 자동으로 매핑됩니다.예: app/blog/page.tsx → /blog계층적 경로 관리: 폴더 구조를 활용하여 계층적 URL을 손쉽게 생성할 수 있습니다.예: app/blog/post/page.tsx → /blog/post라우팅의 고급 기능병렬 라우트(Parallel Routes): 여러 경로를 병렬로 렌더링하여 복잡한 UI를 효율적으로 처리합니다.인터셉팅 라우트(Intercepting Rou..