jin's Blog

Node.js란 무엇인가?Node.js는 Chrome의 V8 JavaScript 엔진으로 빌드된 JavaScript 런타임이다. 일반적으로 JavaScript는 브라우저에서만 실행되는 언어로 인식되지만, Node.js는 이를 서버 환경에서도 사용할 수 있도록 확장했다. 따라서 JavaScript를 이용해 서버 측 애플리케이션을 개발할 수 있다.Node.js를 사용하는 이유Node.js는 현대 애플리케이션 개발에서 주목받는 이유가 명확하다. 빠른 실행 속도, 높은 확장성, 그리고 일관된 JavaScript 사용 덕분에 많은 개발자들이 선택하고 있다. 아래는 Node.js를 사용해야 하는 주요 이유를 정리한 내용이다:1. JavaScript로 풀스택 개발 가능Node.js는 서버 측에서 JavaScript를..

나의 새로운 프로젝트, 부업의 이름은 LUB로 지었다.LUB, Let us Build라는 뜻으로 컴퓨터나 코딩과 거리가 먼 사람들을 위해서 대신해서 빠르게그들이 원하는 웹사이트를 빌드해주는, 마치 미용사로 일하고 계신나의 어머니 같은 분들을 위한? 뭐 물론 한국은 네이버라는 큰 플랫폼이 있지만그래도 그들 개인의 웹사이트가 있다는 건 멋진 일이니깐. 또 다행히도 주변에 웹디자이너와 백엔드 개발자가 있고그분들도 포트폴리오 겸 함께 하는 것에 대해서 긍정적인 반응이다. 그래서 지금은 빠르게 회사 페이지를 빌드하는 중이다.다행히도 Gpt 덕분에 하루만에 mvp는 나온 거 같고많은 부분이 완성된 거 같다. 간단하게 프론트 단으로 vercel로 배포하였고나는 돈이 없기 때문에 도메인은 구매하지 않았다... 아래는 ..

새로운 프로젝트를 시작하기 위해Typescript 와 vite 그리고 Tailwind css 를 이용하여 빌드하였다.확실히 이 조합이 혼자서 무언가를 빌드할때 빠르게 빌드할 수 있는 거 같다.새로운 프로젝트를 시작하며 느낀건 ai의 무서운 발전으로 인해서과거에는 불가능했던 속도로 개발이 가능하다.. 나의 새로운 프로젝트 겸 비지니스가 어떻게 흘러갈지는 전혀 모르겠지만재미있을 거 같다. vite를 통해 ts와 tailwind로 빌드할때 까먹지 말아야 할 것이 있는데바로 postcss.config.js 파일이다. 왜인지 모르겠지만 npm으로 빌드하면 해당 파일이 자꾸 생략이 되고tailwind가 적용되질 않는다.export default { plugins: { tailwindcss: {}, au..

자체 기능으로 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..