jin's Blog

1. Express.js 개요Express.js는 Node.js 환경에서 실행되는 경량 웹 애플리케이션 프레임워크로, 서버 개발을 쉽고 빠르게 할 수 있도록 도와주는 라이브러리이다.Node.js의 표준 웹 프레임워크로 널리 사용된다.RESTful API 및 웹 애플리케이션 구축에 적합하다.미들웨어를 활용한 요청 및 응답 처리가 용이하다.2. Express.js의 특징1) 간결한 코드Express.js는 코드의 복잡성을 줄이고 간결한 방식으로 서버를 구축할 수 있도록 설계되었다.2) 미들웨어 지원미들웨어를 활용하여 요청과 응답을 쉽게 가공할 수 있다. 예를 들어, 요청을 로깅하거나, 인증 및 권한 부여를 수행할 수 있다.3) RESTful API 설계Express.js는 REST API를 빠르게 개발할 수..

1. Node.js의 Program Lifecycle (프로그램 생명주기)Node.js 애플리케이션은 다음과 같은 단계로 동작한다.초기화 단계:필요한 모듈을 로드 (require 또는 import 사용).서버, 데이터베이스 연결을 설정한다.이벤트 루프 실행 단계:비동기 I/O 작업, 네트워크 요청, 타이머 등이 실행된다.작업이 완료되면 콜백 함수가 이벤트 루프에서 처리된다.종료 단계:특정 종료 조건(예: process.exit())이 발생하면 종료된다.SIGINT(Ctrl + C) 같은 시그널이 감지되면 종료 이벤트가 발생한다.2. 이벤트 루프(Event Loop) 원리Node.js는 단일 스레드(single-threaded) 기반의 비동기 이벤트 루프 모델을 사용하여 많은 동시 요청을 효율적으로 처리할..

자체 기능으로 FormData를 전송할 수 있는데next.js는 위 상단에 'use client' 와 'use server'를 설정하여 쓸 수 있으나 두개가 한번에 사용은 불가능하다. 그래서 useState 같은 거나 eventHandel 을 사용할때는 use client를 사용하게 될텐데그럴경우에는 use server를 따로 컴포넌트를 분리해서 가져다가 써야한다. 아래와 같은 방법을 사용할 수 있을 거 같다."use server";export async function shareMeal(formData) { const meal = { name: formData.get("name"), email: formData.get("email"), title: formData.get("title"..

Next.js에서도 상태와 API 관리를 위한 도구로 다양한 옵션을 선택할 수 있다. Next.js는 React 기반의 프레임워크이기 때문에 React에서 사용하는 도구들을 대부분 그대로 사용할 수 있다. 하지만 Next.js의 **서버 사이드 렌더링(SSR)**과 정적 사이트 생성(SSG) 같은 특화된 기능 때문에 몇 가지 다른 패턴이나 도구가 선호되기도 한다.1. Next.js에서 상태와 API 관리에 사용할 수 있는 도구A. React Query (TanStack Query)Next.js에서 가장 많이 사용하는 서버 상태 관리 도구 중 하나가 React Query다. 특히 데이터 패칭, 캐싱, 리패칭이 필요한 API 관리에서 강력하다.특징SSR과 SSG에서 데이터를 사전 패칭 가능클라이언트 사이드에..

Next.js 소개Next.js는 React를 기반으로 한 프레임워크로, 서버사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 기본적으로 지원하며, React 프로젝트의 효율성을 높이고 SEO 최적화를 가능하게 합니다. React와 다른 점을 포함해 Next.js의 특징과 설정 방법에 대해 알아보겠습니다.React와 Next.js의 주요 차이점항목 React Next.js렌더링 방식클라이언트 사이드 렌더링(CSR)서버사이드 렌더링(SSR) 및 정적 사이트 생성(SSG)파일 기반 라우팅개발자가 직접 라우팅 구현 필요pages/ 폴더를 기반으로 자동 라우팅SEOCSR로 인해 초기 로딩 시 SEO에 제약SSR/SSG 지원으로 SEO에 유리빌드 도구Vite, CRA(Create React App) 등 사용N..

React와 TypeScript로 컴포넌트 타입 설정 및 Context 사용하기React와 TypeScript를 함께 사용하면 컴포넌트와 상태를 더 안전하고 명확하게 관리할 수 있다. 이번 포스팅에서는 타입 모델 설정, React.FC 사용법, 컴포넌트에서 props를 전달하고 사용하는 방법, 그리고 useContext와 TypeScript를 조합하는 방법을 알아본다.1. 타입 모델 설정TypeScript를 사용할 때 가장 먼저 해야 할 작업은 데이터 구조에 대한 타입을 정의하는 것이다. 이는 컴포넌트의 props나 상태 관리에 큰 도움이 된다.타입 정의 예제type User = { id: number; name: string; email: string;};type Product = { id: n..

타입스크립트의 기본 타입 알아보기타입스크립트는 정적 타입 시스템을 기반으로 하는 언어로, 다양한 타입을 제공한다. 이를 통해 코드의 안정성과 가독성을 높일 수 있다. 이번 포스팅에서는 타입스크립트에서 가장 기본적으로 사용되는 타입들을 살펴보자.1. 기본적인 타입A. 숫자(Number)number 타입은 정수와 소수를 모두 포함한다.let age: number = 25;let price: number = 99.99;B. 문자열(String)string 타입은 텍스트 데이터를 다룰 때 사용된다. 작은따옴표, 큰따옴표, 템플릿 리터럴을 지원한다.let name: string = "John";let message: string = `Hello, ${name}!`;C. 불리언(Boolean)boolean 타입은 ..

타입스크립트를 알아보자!프로그래밍 언어 중 하나인 TypeScript(타입스크립트)는 JavaScript의 상위 집합(Superset)으로, JavaScript가 가지고 있는 기능에 더해 타입 시스템과 몇 가지 추가적인 기능을 제공한다. 최근 프론트엔드와 백엔드 개발 모두에서 인기를 끌며 점점 더 많은 개발자들이 타입스크립트를 사용하고 있다. 그렇다면 타입스크립트가 무엇인지, JavaScript와 어떻게 다른지 알아보자.1. 타입스크립트란?타입스크립트는 Microsoft에서 개발한 오픈소스 프로그래밍 언어로, JavaScript를 확장한 언어다. JavaScript의 모든 기능을 포함하고 있으며, 타입을 명시적으로 정의할 수 있는 기능을 추가로 제공한다.주요 특징정적 타입 지원 (Static Typing..

React Query의 Query Key: 설정과 활용Query Key는 React Query에서 데이터를 구분하고 관리하기 위한 고유한 식별자다. 캐싱, 무효화, 리패칭 등의 모든 작업은 이 Query Key를 기준으로 이루어진다. 어떻게 설정하고 활용해야 하는지 아래에서 자세히 살펴보자.1. Query Key의 기본 구조Query Key는 보통 배열로 작성되며, 단순 문자열도 가능하다.배열 형태를 사용하는 이유는 데이터를 더 세부적으로 분류하고 관리할 수 있기 때문이다.기본 예제useQuery({ queryKey: ["events"], // 단순한 데이터 키 queryFn: fetchEvents,});구조화된 Key배열로 작성하면 데이터를 계층적으로 관리할 수 있다.useQuery({ query..

React Query는 서버 상태 관리를 위한 강력한 라이브러리로, 효율적인 데이터 패칭, 캐싱, 그리고 동기화 기능을 제공한다. 이번 포스팅에서는 React Query의 주요 개념과 고급 기능을 정리하고, React Router Data API(이하 RRD의 loader)와의 콤비네이션 활용법도 함께 소개한다.1. Query Key에 대한 이해React Query의 queryKey는 데이터를 식별하는 고유한 키다. 데이터 캐싱, 무효화, 갱신 등의 작업은 모두 queryKey를 기준으로 이루어진다.구조화된 Query Key: queryKey는 배열 형태로 작성하며, 데이터를 체계적으로 관리할 수 있다.const { data } = useQuery({ queryKey: ["events", userId]..