후라이의 꿈

RecordTypeScript에서 Record는 유틸리티 타입 중 하나로, 객체 타입을 간편하게 정의할 수 있게 해주는 도구이다.특히 "특정 key 집합과 그에 대응하는 값 타입"을 정의할 때 유용해요.Record Keys : 객체의 key로 사용할 수 있는 타입(보통 문자열 리터럴 union)Type : 해당 key가 가지는 value의 타입이걸 통해 정해진 키만을 가지며, 그 값은 모두 동일한 타입인 객체를 만들 수 있다. 🔍 왜 쓰는가? 객체의 key/value 구조를 타입으로 선언할 때 반복 없이 간결하게 표현할 수 있음특정 key에만 제한을 두고, 그 값들은 같은 타입으로 통일할 수 있음 🎯 언제 쓰면 좋을까?정해진 key 목록이 있고, 모두 같은 타입의 값을 가지게 하고 싶을 때객체의 ..

CSS-in-JS는 "스타일을 JavaScript 안에서 직접 작성하고, 컴포넌트에 함께 붙이는 방식" CSS-in-JS는 JavaScript안에 CSS를 작성하는 방식이다.전통적으로는 .css파일에 스타일을 작성해서 HTML이나 React 컴포넌트에서 className으로 불러썼지만,CSS-in-JS 스타일을 JS 코드 안에 넣어서 함께 관리할 수 있게 해준다. 왜 쓰는가? 컴포넌트 기반 스타일링→ 특정 컴포넌트에만 적용되는 스타일을 함께 묶을 수 있어→ 스타일 충돌 걱정 ↓동적 스타일 적용→ props나 상태(state)에 따라 동적으로 스타일 바꾸기 쉬움JavaScript 로직과 스타일을 한 파일에서 관리→ 유지보수성 ↑, 협업에 유리 🧰 주요 라이브러리라이브러리설명styled-compon..

React에서는 HTML 태그에 class를 줄 때 다음과 같이 쓰는 Tailwind나 CSS 쓸 때는 className에 여러 클래스를 써야되는데,조건부로 특정 클래스만 적용하고 싶을 때가 많다. 예시로 에러가 있을 때만 빨간색으로 만들고 싶다면, 이렇게 삼항연산자나 + 연산자를 막 쓰게되면코드가 지저분하고 복잡해진다.중첩되면 가독성이 떨어진다. 그래서 등장한게 className 유틸 함수이다!clsx, classnames 같은 애들인데이것들은 조건에 따라 클래스를 깔끔하게 조합해주는 함수다. 1. clsx 설치npm install clsx 사용 예제import { clsx } from "clsx";const buttonClass = clsx( "text-sm", ..

Next.js의 App Router 구조에서는 기존의 react-i18next보다 next-intl을 사용하는 것이 훨씬 간단하고 강력하다.이 글에서는 Next.js 13~15 (App Router 기반) 프로젝트에 next-intl을 적용하는 전체 과정을 정리한다. 📦 1. 설치npm install next-intl 📁 2. 폴더 구조 설정.├── app/│ ├── [locale]/│ │ ├── page.tsx│ │ └── layout.tsx│ └── layout.tsx├── messages/│ ├── ko.json│ └── en.json 3. 메시지 파일 생성messages/ko.json{ "home.title": "홈페이지에 오신 걸 환영합니다"} messag..

프론트엔드 개발을 하다 보면 i18n이라는 용어를 자주 보게 된다.i18n은 국제화(Internationalization)를 의미하며, 글로벌 서비스를 개발할 때 꼭 필요한 기능이다.이 글에서는 i18n의 의미부터 실무에서 왜 필요한지, 어떤 식으로 적용하는지까지 정리해본다. 📌 i18n 뜻i18n은 internationalization의 약자이다.단어의 첫 글자 i와 마지막 글자 n 사이에 18개의 문자가 있어서i18n = i + 18글자 + n비슷한 방식으로 l10n은 **localization(지역화)**의 약자다. 💡 i18n이 왜 필요할까?서비스를 한국뿐 아니라 전 세계 사용자에게 제공하려면,언어, 날짜, 숫자, 화폐, 지역 포맷 등이 그 나라에 맞게 표시돼야 한다.예를 들어,항목한국어영..

React나 Next.js 프로젝트를 하다 보면 아래의 두가지 형태의 컴포넌트 선언 방식을 자주 마주하게 된다.// 방식 1 - 함수 선언식export default function Page() { return ;}// 방식 2 - 함수 표현식const Page = () => { return ;};export default Page; 겉보기엔 똑같이 작성하지만, 자바스크립트 문법적으로는 엄연히 차이가 존재한다. 이 두방식의 차이점과 실제 어떤 상황에서 어떤 걸 쓰는게 좋은지 정리해보려고 한다. 1. 함수 선언식(function Page())export default function Page() { return ;}특징호이스팅(hoisting)이 적용된다.함수 선언이 코드 상단으로 끌어올려져서 선..

JavaScript에서 서버와 데이터를 주고 받거나, localStorage에 값을 저장할 때 자주 등장하는 두 함수에 대해 정리해보려고 한다.JSON.stringfy() JSON.parse() JavaScript 객체란, 자바스크립트에서 데이터를 키(Key)와 값(value)로 저장하는 방식을 말한다.JSON문자열이란, 자바스크립트 객체처럼 생긴 문자열(단순한 텍스트)이다. ✅ JSON.stringify JavaScript객체 -> JSON 문자열로 변환 const user = { name: "me", age: 28,};const json = JSON.stringify(user);console.log(json); // 👉 '{"name":"me","age":28}' 이걸 왜 쓸까?-> 문자열..

TypeScript를 사용하는 프론트엔드 개발자라면 꼭 알고 있어야 할 기본 개념 중 하나가 바로 type과 interface의 차이이다.

이벤트 전파 단계(Evnet Propagation Phases)Dom에서 이벤트는 총 3단계를 거쳐서 전파된다.1. 캡처링 단계(Caturing Phase)2. 타겟 단계(Target Phase)3. 버블링 단계(Bubbing Phase) 1. 캡처링 단계(Caturing Phase)이벤트가 Window -> document -> html -> body -> 자식 요소까지 내려감addEventListener(..., { capture: true }) 설정한 핸들러만 이 단계에서 실행됨 2. 타겟 단계(Target ) 이벤트가 실제로 발생한 요소에 도착해당 요소에 등록된 핸들러들이 실행됨이때 capture: true와 false 둘 다 실행될 수 있음 (순서: capture → bubble) 3. 버..

React 앱에서 서버 상태를 효율적으로 관리하고, 비동기 로직을 쉽게 다루게 다룰 수 있게 해주고데이터 패칭 및 상태 관리 라이브러리로 서버에서 데이터를 가져오고 동기화하는 과정이 크게 단순화 된다. 📦설치 하기먼저 React Query와 Devtools를 설치한다.npm install @tanstack/react-querynpm install @tanstack/react-query-devtools 또는 yarn 사용 시,yarn add @tanstack/react-queryyarn add @tanstack/react-query-devtools 📝 기본 사용법 1. App.tsx를 QueryClientProvider로 감싸기import { QueryClient, QueryClientProvide..