jhphon0730

Nodejs PostgreSQL 연동

필요한 패키지 설치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..

PostgreSQL과 pgAdmin을 위한 Docker Compose 설정

기본적인 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: ..

JWT, Bcrypt 예제

로그인 기능을 구현하기 위한 주요 단계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 =..

Typescript & Express 제너릭을 사용한 응답 처리 방식

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

Nodejs 개발환경 셋팅

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..

Client와 Server 컴포넌트의 상태 관리

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 프로젝트 구조 및 아키텍처 설계

이 글에서는 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..