jhphon0730

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

디시인사이드 같은 커뮤니티 사이트에 Next.js의 서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR)을 설계 1. 서버 사이드 렌더링(SSR) - 인기글/갤러리 메인 페이지서버 사이드 렌더링은 페이지를 서버에서 미리 렌더링해서 완성된 HTML을 보내주는 방식이에요.비유 대상: 디시인사이드의 인기글 목록, 갤러리 메인 페이지이유: 인기글은 많은 사람이 동시에 방문하는 페이지입니다. 빠르게 로딩되어야 하며 검색 엔진 최적화(SEO)도 중요SSR을 사용하면 서버가 데이터를 미리 가져와 렌더링해서, 페이지를 로드하는 즉시 내용이 보이는 장점이 있습니다.2. 클라이언트 사이드 렌더링(CSR) - 개별 게시글 상세 페이지클라이언트 사이드 렌더링은 페이지를 먼저 불러온 후, 클라이언트(브라우저)가 Ja..

기본 방식기본적으로 서버 사이드 방식과 클라이언트 사이드 방식을 모두 지원하는 하이브리드 프레임워크입니다. 즉, 어떤 방식으로 페이지를 렌더링할지는 개발자가 설정에 따라 선택할 수 있습니다. 기본적으로 Next.js는 SSG(Static Site Generation)와 SSR(Server-Side Rendering) 방식을 모두 제공하며, 클라이언트 사이드의 동적 기능도 지원요약기본적으로 서버 사이드 방식: Next.js는 서버 사이드에서의 페이지 렌더링을 기본적으로 제공하며, SSG와 SSR을 지원클라이언트 사이드 지원: Next.js는 또한 클라이언트 사이드 기능도 지원하며, 동적 임포트, 클라이언트 사이드 라우팅, API Routes 등 다양한 클라이언트 사이드 기술을 제공데이터 패칭 방식1. SS..

개발 버전 Docker Compose를 작성한 이유개발 환경에서 Docker Compose를 사용하면 소스 코드 변경 시 애플리케이션을 다시 빌드하거나 재실행할 필요가 없고, 그만큼 더 간편하고 효율적인 개발이 가능합니다. 개발 버전의 Docker Compose를 작성하는 이유는 바로 개발 중인 애플리케이션의 소스 코드 변경을 즉시 반영할 수 있기 때문입니다.1. 소스 코드 변경 시 재실행 불필요보통 개발 중에는 애플리케이션을 수정하고, 그 변경 사항을 반영하기 위해 매번 서버를 재시작하거나 빌드를 다시 해야 하는 번거로움이 있습니다. 그러나 Docker Compose를 활용한 개발 환경에서는 소스 코드와 컨테이너를 동기화해두기 때문에, 소스 코드만 수정하고 저장하면 자동으로 변경 사항이 컨테이너에 반영..

Docker Compose와 Dockerfile을 활용한 프론트엔드 & 백엔드 컨테이너 구성하기개발 환경을 구축하다 보면 프론트엔드와 백엔드가 서로 다른 환경에서 동작해야 할 때가 많습니다. 수동으로 설정을 반복하다 보면 시간 낭비는 물론 설정의 일관성도 무너질 수 있죠. 이를 해결하기 위해 Docker와 Docker Compose를 활용했습니다. 이번 포스팅에서는 React 기반의 프론트엔드와 Django 기반의 백엔드를 컨테이너화한 경험을 공유하겠습니다. 1. 개발 환경의 일관성 유지문제: 개발자마다 로컬 환경이 다를 경우, 환경 설정에 문제가 생기거나 의존성 오류가 발생할 수 있습니다.해결: Docker Compose는 프론트엔드(React), 백엔드(Django)를 각각 독립된 컨테이너로 실행하며..

Coc 지우기-- 플러그인 설정require('packer').startup(function(use) -- Packer 자체 use 'wbthomason/packer.nvim' -- Theme use 'zaldih/themery.nvim' use "EdenEast/nightfox.nvim" -- Packer -- multiple-cursors 다중 커서 플러그인 use 'terryma/vim-multiple-cursors' -- LSP Config use 'neovim/nvim-lspconfig' use 'jose-elias-alvarez/null-ls.nvim' use 'williamboman/mason.nvim' use 'williamboman/mason-lspconfig.nvim' --..