React + Vite 프로젝트를 개발하던 중, 다음과 같이 이미지 경로를 설정했다.

// ChuViewer.tsx (초기 코드)
const chuImagePath = `/src/assets/images/chu/happy/${mainChu.lang}.png`;
const backgroundImagePath = `/src/assets/images/backgrounds/${mainChu.background}.png`;

• 개발 서버(localhost)에서는 이미지가 정상 표시됐다.
• 프로덕션 빌드(배포)에서는 이미지가 표시되지 않고 404가 발생했다.

로컬에서는 됐지만, 배포 환경에서 경로가 깨지는 현상이 있었다.

2. 원인 분석

Vite 개발 서버는 /src/... 경로를 파일 시스템 기준으로 직접 매핑해줬다. 그래서 개발 중에는 위 코드가 동작했다. 그러나 빌드 시 Vite는 src/assets의 파일을 dist/assets로 복사하면서 해시 파일명으로 변환했다.

예시:

happy/en.png → happy/en.4a6c21ef.png

코드에 남아 있던 /src/... 경로는 빌드 후 실제 파일 위치와 일치하지 않았고, 그 결과 배포 환경에서 자산을 찾지 못했다.

3. 올바른 해결 방법 – new URL(..., import.meta.url)

동적으로 구성되는 자산 경로에는 Vite가 빌드 타임에 추적·치환할 수 있는 문법을 사용했다. new URL(path, import.meta.url).href를 사용하니 빌드 시 해시가 반영된 실제 경로로 자동 변환됐다.

// 수정된 ChuViewer.tsx
const chuImagePath = new URL(
  `../../assets/images/chu/happy/${mainChu.lang}.png`,
  import.meta.url
).href;

const backgroundImagePath = new URL(
  `../../assets/images/backgrounds/${mainChu.background}.png`,
  import.meta.url
).href;

이렇게 수정하니:

• 개발 서버에서는 원본 경로로 정상 표시됐다.
• 프로덕션 빌드에서는 해시가 포함된 파일 경로로 자동 치환되어 문제없이 표시됐다.

4. 또 다른 방법 – import.meta.glob로 폴더 일괄 매핑

여러 개의 이미지를 조건에 따라 불러와야 하는 경우, import.meta.glob를 사용하면 폴더 전체를 객체 형태로 매핑할 수 있었다. 이 방법은 반복적인 new URL 작성 없이도 모든 이미지를 한 번에 불러올 수 있었다.

// chu 폴더 내 모든 이미지 매핑
const chuImages = import.meta.glob('../../assets/images/chu/happy/*.png', {
  eager: true,
  import: 'default',
});

// backgrounds 폴더 내 모든 이미지 매핑
const backgroundImages = import.meta.glob('../../assets/images/backgrounds/*.png', {
  eager: true,
  import: 'default',
});

// 사용 예시
const chuImagePath =
  chuImages[`../../assets/images/chu/happy/${mainChu.lang}.png`];
const backgroundImagePath =
  backgroundImages[`../../assets/images/backgrounds/${mainChu.background}.png`];

• eager: true로 즉시 로드되도록 했다.
• import: 'default'로 URL 문자열만 가져오도록 했다.
• 빌드 시 해시가 반영된 실제 경로로 자동 치환되어, 로컬과 배포 환경 모두에서 안전하게 동작했다.

5. 선택 가이드 – new URL vs import.meta.glob

권장 기준

• 파일 수가 적고, 경로가 간단히 결정된다면 → new URL이 가장 직관적이다.
• 스킨/로케일/테마처럼 “목록에서 선택”하는 패턴이라면 → import.meta.glob가 깔끔하다.
• 번들 크기/초기 로드 최적화가 중요하다면 → import.meta.glob에서 eager: false로 코드 스플리팅을 활용한다.

// 지연 로드(코드 스플리팅) 예시
const chuImages = import.meta.glob('../../assets/images/chu/happy/*.png'); // eager 미사용

async function getChuImage(lang: string) {
  const loader = chuImages[`../../assets/images/chu/happy/${lang}.png`];
  if (!loader) return null;
  const mod = await loader();           // 동적 import
  return mod.default as string;         // 해시 반영된 URL
}

마무리

• /src/... 직접 경로 표기는 개발 서버에서만 우연히 동작했다.
• 빌드 후에는 자산 파일명이 해시로 변경되므로, 빌드 타임에 치환 가능한 방식이 필요했다.
• 동적 이미지 경로 → new URL(..., import.meta.url).href
• 여러 이미지 일괄 로드 → import.meta.glob
• 지연 로드/코드 스플리팅이 필요하면 import.meta.glob에서 eager를 생략해 동적 import로 처리했다.

이 글에서는 {}와 Record<string, never>의 차이점을 정리하고, 정확하게 빈 객체를 표현하고자 할 때 어떤 방식이 더 적절한지를 설명한다.

1. {}는 모든 객체를 허용한다

const obj: {} = { a: 123 }; // 허용됨

TypeScript에서 {}는 모든 non-nullish 객체 타입을 허용하는 타입이다.

const a: {} = { foo: 'bar' }; // 허용
const b: {} = [];             // 허용
const c: {} = () => {};       // 허용
const d: {} = null;           // 오류
const e: {} = undefined;      // 오류

즉, {}는 빈 객체를 의미하지 않는다. 배열, 함수, 키가 존재하는 객체까지 모두 허용한다.

따라서 "빈 객체만 허용하고 싶다"는 의도를 전달하기에는 부족하다.

2. Record<string, never>가 진짜 빈 객체를 표현한다

type EmptyObject = Record<string, never>;

이 타입은 모든 문자열 키에 대해 값이 존재할 수 없는 객체를 뜻한다. 즉, 아무 키도 가질 수 없는 객체만 허용된다.

const a: Record<string, never> = {};         // 허용
const b: Record<string, never> = { foo: 1 }; // 오류

왜 never인가?

• Record<K, V>는 "K 키에 대해 V 값을 가지는 객체"를 의미한다.
• never는 절대로 존재할 수 없는 타입이다.
• 따라서 Record<string, never>는 "어떤 키도 존재할 수 없음"을 의미하며, 완전히 비어 있는 객체만 통과시킨다.

3. 어떤 상황에서 사용하나?

1) 빈 객체를 명확히 제한할 때

function acceptsOnlyEmpty(obj: Record<string, never>) {
  // 어떤 키도 존재해서는 안 된다
}

acceptsOnlyEmpty({});           // 허용
acceptsOnlyEmpty({ foo: 'bar' }); // 오류

2) 조건부 타입에서 "남는 필드가 없음"을 표현할 때

type FilterString<T> = {
  [K in keyof T as T[K] extends string ? K : never]: T[K];
};

type A = { name: string; age: number };
type B = FilterString<A>; // { name: string }

type C = { id: number };
type D = FilterString<C>; // {} ≡ Record<string, never>

4. {}와 Record<string, never> 비교

5. Record<string, unknown>과 Record<string, any>의 차이

이 두 타입은 키가 존재해도 되며, 값의 타입 해석 방식이 다르다.

type A = Record<string, unknown>; // 값 타입은 unknown → 사용 전 검사 필요
type B = Record<string, any>;     // 값 타입은 any → 검사 없이 통과

6. 구조적 타입 호환: {}는 왜 Record<string, never>에 할당 가능한가?

type Result = {} extends Record<string, never> ? true : false;
// 결과는 true

이는 TypeScript의 구조적 타입 시스템 때문이며, 빈 객체는 "어떤 키도 없는 객체"로 간주되므로 Record<string, never>와 호환된다.

즉, {}는 타입으로는 느슨하지만, 값으로는 실제로 빈 객체일 경우 Record<string, never>와 호환된다.

7. 실전 예시

상태 초기화에서 사용

interface StringMap extends Record<string, string> {}

const cleared: Record<string, never> = {}; // 모든 키 제거 후 상태 초기화

API 응답에서 빈 객체 검사

type ApiResponse<T> = { data: T; error?: string };

function isEmpty<T>(res: ApiResponse<T>): res is ApiResponse<Record<string, never>> {
  return Object.keys(res.data).length === 0;
}

8. 정리

마무리

TypeScript에서 빈 객체를 정확히 표현하고자 할 때는 {} 대신 Record<string, never>를 사용하는 것이 가장 안전한 방법이다.

• {}는 실제로는 빈 객체가 아니며, 의도를 정확히 전달하지 못한다.
• Record<string, never>는 타입 수준에서 "정말 아무 키도 없어야 한다"는 것을 보장한다.
• 조건부 타입, 상태 초기화, API 응답 등 다양한 실전 상황에서 활용할 수 있다.

이 글에서는 혼동하기 쉬운 TypeScript의 핵심 선언문들을 코드 예시와 실제 동작 결과를 중심으로 비교하고, 각각의 선언이 가지는 실용적인 의미를 깊이 있게 분석한다.

1. interface vs type

interface와 type은 객체의 형태를 정의할 때 가장 많이 사용되는 문법이다. 둘은 많은 경우에 비슷하게 동작하지만, 몇 가지 결정적인 차이점을 가지고 있다.

코드 예시 1: 확장과 병합

// 인터페이스 확장 (extends)
interface Animal {
  name: string;
}
interface Dog extends Animal {
  breed: string;
}
// 최종 Dog 타입: { name: string; breed: string }

// 타입 별칭 확장 (&)
type AnimalT = { name: string };
type DogT = AnimalT & { breed: string };
// 최종 DogT 타입: { name: string; breed: string }

두 방식 모두 객체를 확장하는 데 사용되지만, interface의 가장 강력한 기능은 선언 병합(Declaration Merging)이다. 동일한 이름의 interface를 여러 번 선언하면 TypeScript가 이를 하나로 합쳐준다.

// 선언 병합 예시
interface Config {
  url: string;
}
interface Config {
  timeout: number;
}
// 최종 Config 타입: { url: string; timeout: number }
// -> 이 기능은 라이브러리에서 타입 확장을 위해 유용하게 사용된다.

type ConfigT = { url: string };
// type ConfigT = { timeout: number }; // 오류 발생: 중복 선언 불가

코드 예시 2: 다양한 표현력 type은 인터페이스로 표현하기 어려운 복합적인 타입들을 조합할 수 있다는 장점이 있다.

// 유니언 타입
type Theme = 'light' | 'dark';

// 튜플 타입
type Coords = [number, number];

// 제네릭과 조건부 타입
type FilteredArray<T> = T extends (infer U)[] ? U : T;
type StringArray = FilteredArray<string[]>; // string

2. import vs import type

이 둘의 가장 큰 차이점은 컴파일 이후 JavaScript 코드에 남는지 여부이다. import는 값과 타입을 모두 가져올 수 있어 런타임에 필요한 모듈을 불러올 때 사용하며, import type은 순수하게 타입 정보만 불러오기 때문에 컴파일 시점에 완전히 제거된다.

코드 예시

// types.ts
export type User = { name: string; age: number; };

// utils.ts
export function getUser(name: string) {
  return { name, age: 30 };
}

// main.ts
import { getUser } from "./utils"; // 런타임에 필요한 '값'
import type { User } from "./types"; // 런타임에 필요 없는 '타입'

const user: User = getUser("Alice");
console.log(user);

결과 분석 getUser 함수는 실제로 코드를 실행하는 데 필요한 값(value)이다. 따라서 import { getUser } 문은 컴파일된 JavaScript 결과물에 그대로 남아 있게 된다.

반면, User는 단순히 user 변수의 타입을 정의하기 위한 타입(type) 정보일 뿐이다. TypeScript는 타입 체크를 마친 후 이 정보를 더 이상 필요로 하지 않기 때문에, import type { User } 문은 컴파일 시점에 완전히 사라진다.

// 컴파일된 JS 결과 (main.js)
import { getUser } from "./utils"; // getUser는 그대로 남음
const user = getUser("Alice"); // User 타입 정보는 사라짐
console.log(user);

import type을 사용하면 런타임에 불필요한 코드를 제거하여 번들 크기를 최적화하고, 타입 전용 모듈을 명확히 구분해 코드 가독성을 높일 수 있다.

3. export vs export type

이 두 선언 역시 import와 마찬가지로 컴파일 이후 JS 결과물에 남는지 여부가 다르다. export는 값 또는 타입을 내보내며, export type은 오직 타입만 내보낸다.

코드 예시

// types.ts
export type User = { name: string };
export const VERSION = "1.0.0";

// main.ts
import type { User } from "./types";
import { VERSION } from "./types";

결과 분석 위 코드를 컴파일하면 VERSION은 JavaScript 코드에 남아있지만, User 타입은 완전히 사라진다.

// 컴파일된 JS 결과 (main.js)
import { VERSION } from "./types";

export type은 특히 타입만 내보내는 라이브러리나 모듈에서 불필요한 번들링을 막고, 의존성 관계를 깔끔하게 유지하는 데 효과적이다.

4. enum vs const enum vs as const

상수를 정의할 때 가장 많이 혼동되는 3가지 방식이다. 핵심은 런타임에 객체가 생성되는지와 타입 리터럴로 고정되는지이다.

코드 예시 + 결과

// enum.ts
export enum Status {
  LOADING = "loading",
  DONE = "done",
}

export const enum FastStatus { // const enum은 런타임 객체 미생성
  LOADING = "loading",
  DONE = "done",
}

export const statusArray = ["loading", "done"] as const; // 타입 리터럴로 고정
export type StatusLiteral = typeof statusArray[number]; // "loading" | "done"

위 코드를 컴파일하면, enum Status는 런타임에 사용할 수 있도록 객체 코드가 생성된다.

// 컴파일된 JS 결과 (enum.js)
var Status;
(function (Status) {
  Status["LOADING"] = "loading";
  Status["DONE"] = "done";
})(Status || (Status = {}));

반면, const enum과 as const는 런타임에 아무것도 남기지 않는다. 사용되는 지점에 해당 값만 그대로 삽입(inline)된다.

// 사용 예시
console.log(Status.LOADING);
console.log(FastStatus.DONE); // const enum은 값만 삽입됨
const myStatus: StatusLiteral = "loading";

const enum은 성능 최적화에 유리하며, as const는 값 자체를 타입으로 고정시켜 더욱 엄격한 타입 체크를 가능하게 한다.

5. declare 키워드

declare는 TypeScript에게 "이런 형태의 모듈/변수가 어딘가에 존재하니, 타입만 믿고 사용해도 돼"라고 알려주는 역할을 한다. 실제 구현 코드가 아니기 때문에 JavaScript로 컴파일되지 않는다.

주로 타입스크립트가 기본적으로 인식하지 못하는 모듈이나 전역 변수에 대한 타입을 정의할 때 사용된다.

예시: CSS 모듈 / SVG 임포트 React 프로젝트에서 CSS 모듈이나 SVG 파일을 import 할 때 타입 오류가 발생하는 경우가 많다. 이때 declare를 사용해 해당 파일의 타입을 선언해 주면 된다.

// global.d.ts
declare module "*.module.css" {
  const classes: { [key: string]: string };
  export default classes;
}

declare module "*.svg" {
  const content: string;
  export default content;
}

사용 예시

// Button.module.css
.button {
  background-color: blue;
}

// Button.tsx
import styles from "./Button.module.css";
import Icon from "./icon.svg";

// 이제 .css와 .svg 파일을 import해도 타입 오류가 발생하지 않는다.
// styles는 string key를 가진 객체로, Icon은 string으로 인식된다.
console.log(styles.button); // 예: "_button_xyz123"
console.log(Icon);          // 예: "/static/media/icon.svg"

declare 덕분에 TypeScript는 .css나 .svg 파일의 존재와 타입을 인식하고, 개발자는 자동완성 같은 편의 기능을 온전히 누릴 수 있게 된다.

6. 실용적인 선택 기준 가이드

지금까지 살펴본 내용을 바탕으로, 실제 프로젝트에서 어떤 선언을 선택해야 할지 고민될 때 참고할 수 있는 가이드를 제시한다.

언제 interface를 쓰고 언제 type을 쓸까?

• interface:
  • 객체 구조를 정의할 때
  • 컴포넌트의 Props 타입을 정의할 때 (가독성 좋음)
  • 확장이 자주 필요한 경우 (e.g., extends를 통한 상속)
  • 선언 병합 기능이 필요한 경우 (라이브러리 타입 선언 등)
• type:
  • interface로 표현하기 어려운 복합 타입 (유니언, 튜플 등)을 만들 때
  • 간단한 타입 별칭을 만들 때
  • as const를 통해 타입 리터럴을 정의할 때

import vs import type

• 가져올 대상이 타입만이라면 import type을 명시적으로 사용한다.
• 번들 최적화가 중요하거나, 순환 참조 우려가 있는 경우에도 import type을 권장한다.

export vs export type

• 값과 타입을 모두 외부에 공개해야 할 때는 export를 사용한다.
• 타입 정보만 외부에 공개하고 싶을 때는 export type을 사용한다.
• 라이브러리를 제작할 때 이 둘을 명확히 구분하면 의존성 관리가 훨씬 수월해진다.

마무리

이번 글에서 다룬 TypeScript의 선언문들은 겉으로 보기엔 유사하지만, 실제 동작 방식과 목적에 있어 큰 차이를 보인다. 각 선언이 가지는 고유한 특성을 명확히 이해하고 적재적소에 활용한다면, 코드의 가독성은 물론 성능과 유지보수성까지 크게 향상시킬 수 있을 것이다. 이 내용이 여러분의 TypeScript 여정에 실질적인 도움이 되기를 바란다.

1. 로그인 버튼 클릭 → GitHub으로 이동

const handleGitHubLogin = () => {
  window.location.href = "https://www.comitchu.shop/oauth2/authorization/github";
};

• 버튼 클릭 시 백엔드가 미리 설정한 GitHub 인증 주소로 이동한다.
• 이 URL은 Spring Security가 자동으로 생성한 OAuth 인증 엔드포인트다.

2. GitHub 인증 완료 → 백엔드로 code 전달

GitHub에서 로그인과 권한 허용을 완료하면 아래 URL로 리다이렉트된다.

https://www.comitchu.shop/login/oauth2/code/github?code=abcdef123

• 이때 전달되는 code는 백엔드가 access token으로 교환할 임시 인증 코드다.

3. Spring Security가 인증 자동 처리

Spring Security는 아래 과정을 자동으로 처리한다:

1. URL에서 code 값을 추출한다.
2. application.yml에 설정된 client_id, client_secret과 함께 GitHub에 access token을 요청한다.
3. 받은 access token으로 사용자 정보를 요청한다.
4. GitHub 사용자 정보를 기반으로 OAuth2User 객체를 생성한다.
5. 설정한 OAuthSuccessHandler로 전달해 후처리를 진행한다.

.oauth2Login(oauth -> 
    oauth.successHandler(oAuthSuccessHandler)
)

4. OAuthSuccessHandler에서 JWT 발급 및 리다이렉트

response.addCookie(jwtCookie);
response.sendRedirect("https://www.comitchu.shop");

• OAuthSuccessHandler.java에서 JWT를 생성하고, HttpOnly 쿠키로 브라우저에 전달한다.
• 이후 사용자는 프론트엔드의 ComitChu 랜딩페이지로 리다이렉트된다.
• JWT는 JavaScript에서 접근할 수 없도록 설정되어 있어 보안성이 높다.

5. 프론트엔드는 로그인 상태를 어떻게 유지하는가?

GitHub 로그인 후, 백엔드는 JWT를 HttpOnly 쿠키로 발급하고, 사용자를 comitchu 페이지로 리다이렉트시킨다. 이때 프론트엔드는 JWT를 직접 다루지 않고, 상태를 확인하기 위한 API 호출을 통해 로그인 여부를 판단한다.

아래는 프론트엔드 상태 관리를 담당하는 코드 구성이다.

5-1. Axios 클라이언트 설정

import axios from "axios";

const apiClient = axios.create({
  baseURL: "/api", // 백엔드 프록시 경로
  withCredentials: true, // 쿠키 포함 필수 설정
});

export default apiClient;

• withCredentials: true 설정은 백엔드에서 발급한 HttpOnly 쿠키를 포함한 요청을 보낼 때 반드시 필요하다.
• 이 설정이 없으면 브라우저가 쿠키를 백엔드에 포함하지 않는다 → 인증 실패

5-2. Zustand를 활용한 사용자 상태 관리

import { create } from "zustand";
import apiClient from "../api";

interface User {
  userName: string;
  avatarUrl: string;
  pet?: Pet;
}


interface UserState {
  user: User | null;
  isLoggedIn: boolean;
  fetchUser: () => Promise<void>;
  logout: () => Promise<void>;
}

const useUserStore = create<UserState>((set) => ({
  user: null,
  isLoggedIn: false,
  fetchUser: async () => {
    try {
      const response = await apiClient.get("/user/me");
      if (response.data.success) {
        const { userName, avatarUrl } = response.data.data;
        set({ user: { userName, avatarUrl }, isLoggedIn: true });
      } else {
        set({ user: null, isLoggedIn: false });
      }
    } catch (error) {
      // 대충 에러 처리
    }
  },
  logout: async () => {
    try {
      await apiClient.post("/user/logout");
      set({ user: null, isLoggedIn: false });
    } catch (error) {
      // 대충 에러 처리
    }
  },
}));

• fetchUser 함수는 /api/user/me 엔드포인트를 호출해 현재 로그인된 사용자 정보를 불러온다.
• 백엔드는 HttpOnly 쿠키를 통해 사용자를 식별하며, 성공 시 사용자 객체를 반환한다.
• 응답 결과에 따라 user, isLoggedIn 상태를 전역에서 관리할 수 있다.
• logout 역시 쿠키 기반 인증 구조를 유지하며 로그아웃 처리 후 상태를 초기화한다.

5-3. 최초 진입 시 사용자 정보 조회

// src/App.tsx
function App() {
  const { fetchUser } = useUserStore();

  useEffect(() => {
    fetchUser();
  }, [fetchUser]);

• App 컴포넌트 마운트 시 fetchUser()를 호출한다.
• 이 시점에서 쿠키가 브라우저에 존재한다면 자동으로 전송되어 인증이 완료되고, 사용자 정보가 상태에 저장된다.
• 즉, 앱 전체가 시작될 때 로그인 여부를 판별하고 초기화한다.

5-4. 로그인 여부에 따라 라우팅 분기

<Routes>
  <Route path="/" element={<Landing />} />
  <Route element={<ProtectedRoute />}>
    <Route path="/dashboard" element={<Dashboard />} />
    <Route path="/setting" element={<Setting />} />
  </Route>
  <Route path="*" element={<Error />} />
</Routes>

• /dashboard, /setting과 같은 민감한 경로는 ProtectedRoute로 감싼다.
• ProtectedRoute에서는 userStore의 isLoggedIn 값을 확인해 인증되지 않은 사용자는 접근을 차단한다.

5-5. 실제 흐름 요약

1. 사용자가 GitHub 로그인 → 백엔드가 JWT를 HttpOnly 쿠키에 저장 후 comitchu 사이트로 리다이렉트
2. App이 로드되며 fetchUser() 호출 → /api/user/me 요청으로 사용자 정보 확인
3. 상태 저장 → isLoggedIn: true일 경우 대시보드 진입 허용
4. 로그아웃 시 쿠키 삭제 및 상태 초기화 → 자동 로그아웃

이렇게 ComitChu 프로젝트는 로그인 후 상태를 직접 다루지 않고, JWT 기반 쿠키 인증과 API 응답 결과만으로 로그인 여부를 관리하는 구조다. 상태 관리 라이브러리(Zustand), axios 설정, 초기 렌더링 타이밍, 라우팅 보호까지 모두 자연스럽게 연결되어 있어 유지보수가 쉬운 구조다.

6. 이 구조를 선택한 이유

1. 보안성 확보

   • client_secret을 프론트에 노출하지 않음
   • JWT를 HttpOnly 쿠키에 저장하여 XSS에 안전

2. 구현 간소화

   • Spring Security의 자동 인증 처리 기능을 활용

3. SPA에 적합한 흐름

   • 인증 후 프론트로 리다이렉트하여 SPA 환경을 유지

7. 다른 방식과 비교

8. 마무리

ComitChu 프로젝트는 GitHub 로그인을 React 기반 SPA 구조에서 보안성과 유지보수성을 모두 고려해 구현했다. 프론트는 로그인 요청만 보내고, 인증의 핵심 로직은 전적으로 백엔드(Spring Security)가 담당한다. 특히 이번 구현 방식은 기존에 경험했던 다른 소셜 로그인 방식들과 확연히 달랐다. 지금까지는 프론트에서 session이나 localStorage에 access token과 refresh token을 저장하거나, OAuth 인증 후 code를 프론트에서 받아 다시 백엔드로 전달하는 구조를 사용해왔다. 하지만 이번에는 redirect URI부터 access token 요청, 사용자 정보 조회, JWT 발급까지 모든 과정을 백엔드가 직접 처리하는 구조를 선택했다. 이번 기회에 이 방식을 적용해보니 무척이나 편했다. 그리고 무엇보다, 이런 구조를 함께 고민하고 구현한 멋진 팀원들과 협업하는 일은 역시 좋은 일이다.

웹 개발을 하다 보면, 다음과 같은 에러를 종종 마주친다. 프론트에선 API 호출도 했고, 백엔드에서도 응답을 보내줬는데…

“아니, 응답은 있는데 왜 못 쓰게 하는 건데?” 처음엔 너무 억울하다. 그래서 이번 글에서는 프론트엔드 입장에서 CORS가 왜 발생하는지, 어떻게 해결해야 하는지를 정리한다.

1. CORS란?

CORS (Cross-Origin Resource Sharing): 브라우저가 출처(origin)가 다른 리소스에 접근할 때 허용 여부를 판단하는 보안 정책이다.

• 1.1 출처(origin)이란 프로토콜 + 도메인 + 포트 번호 세 가지를 조합한 것이다. 예를 들어:

  • http://localhost:3000 → 프론트 서버
  • http://localhost:8080 → 백엔드 서버 는 서로 다른 출처다.

2. 브라우저가 CORS를 강제하는 이유

• 2.1 보안상의 이유 악성 스크립트가 다른 도메인의 API에 함부로 요청을 보내는 것을 막기 위해

• 브라우저가 먼저 요청을 '차단'*하는 구조다.

• 2.2 브라우저만 강제 Postman이나 curl 같은 툴에선 아무런 문제가 없다.

3. 프론트엔드 개발할 때 겪는 흔한 상황

3.1 상황 예시

// React에서 fetch로 API 호출
fetch("http://localhost:8080/api/data")
  .then((res) => res.json())
  .then((data) => console.log(data));

3.2 결과

백엔드에서 응답도 잘 오는데... 에러가 발생한다!

Access to fetch at 'http://localhost:8080/api/data' from origin 'http://localhost:3000' has been blocked by CORS policy

4. 어떻게 해결할 수 있을까?

4.1 백엔드에서 CORS 허용 설정하기 (정석)

백엔드가 클라이언트의 출처를 허용한다고 명시해줘야 한다.

4.1.1 Spring Boot 예시

@CrossOrigin(origins = "http://localhost:3000")
@GetMapping("/api/data")
public Data getData() {
    return new Data();
}

4.1.2 Node.js (Express) 예시

app.use(
  cors({
    origin: "http://localhost:3000",
  })
);

4.2 프론트에서 프록시 설정하기 (개발 환경에서 자주 사용)

CRA (React Create App)에서는 package.json에 프록시 설정 가능

"proxy": "http://localhost:8080"

• 4.2.1 프론트 서버가 먼저 받고 백엔드로 전달하기 때문에 CORS를 우회할 수 있다.

• 4.2.2 주의: 이 방식은 개발 환경 전용이다. 배포 시엔 사용할 수 없다.

5. Preflight 요청이란?

• 5.1 Content-Type: application/json 같이 민감한 헤더가 포함되면 브라우저는 본 요청 전에 **OPTIONS 메서드로 사전 검사 요청(Preflight)**을 보낸다.

OPTIONS /api/data HTTP/1.1
Origin: http://localhost:3000
Access-Control-Request-Method: POST

• 5.2 백엔드는 이 요청에 제대로 응답해줘야 한다. 안 해주면 역시나 CORS 에러 발생!

6. 마무리하며

CORS는 막는 게 목적이 아니라, 허용을 명시하라는 시스템이다. 프론트 입장에서는 “막혀서 짜증나”지만, 브라우저가 사용자를 지켜주는 장치라는 걸 이해하고, 백엔드와 협의해서 CORS 설정을 조율해나가는 게 현실적인 접근이다.

리팩토링이 필요한 이유

초기 코드베이스에는 다음과 같은 문제가 있었다:

• 버튼, 인풋 등의 기본 요소에 대한 전역 스타일이 index.css에 혼재
• 여러 컴포넌트에서 중복된 UI 정의
• 특정 버튼 색상 하나 바꾸기 위해 여러 CSS 파일에 흩어진 코드 수정이 필요함

디자인 일관성과 유지보수성을 위해 공통 UI 컴포넌트 정리 및 원자화 작업이 필요했다.

원자적 디자인(Atomic Design) 접근

UI 컴포넌트를 설계하면서 Brad Frost의 Atomic Design 개념을 도입했다. 이 방법론은 UI를 구성하는 요소들을 화학 구조처럼 작은 단위부터 큰 단위로 계층화하여 조직적으로 설계할 수 있도록 돕는다.

Atomic Design 계층 및 ComitChu의 실제 예시

Atoms 단계에서 만든 Button과 Input 컴포넌트는 이후 Molecule과 Organism 단계의 기반이 되며, 전체 UI의 일관성을 지키는 핵심 요소다.

1. Button 컴포넌트 구조

📁 구조

src/
└─ components/
   └─ common/
      ├─ Button.tsx
      └─ Button.module.css

✅ 핵심 변경 사항

• variant prop을 통해 스타일 분기 처리 (예: primary, danger)
• 공통 스타일은 Button.module.css에 모듈화
• 기존의 <button> 태그를 전부 Button 컴포넌트로 교체

✅ Button.tsx 코드

import styles from "./Button.module.css";

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  children: React.ReactNode;
  variant?: 'primary' | 'danger';
}

const Button: React.FC<ButtonProps> = ({
  children,
  variant = 'primary',
  className,
  ...props
}) => {
  const buttonClassName = `${styles.button} ${styles[variant]} ${className || ''}`;
  return (
    <button className={buttonClassName} {...props}>
      {children}
    </button>
  );
};

export default Button;

✅ 스타일 예시 (Button.module.css)

.button {
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-weight: 600;
  border: none;
  cursor: pointer;
}

.primary {
  background-color: #4a90e2;
  color: white;
}

.danger {
  background-color: #e74c3c;
}
.danger:hover {
  background-color: #c0392b;
}

✅ 사용 예시

<Button>저장</Button>
<Button variant="danger">삭제</Button>

2. Input 컴포넌트 구조

📁 구조

src/
└─ components/
   └─ common/
      ├─ Input.tsx
      └─ Input.module.css

✅ 핵심 변경 사항

• input 태그를 감싼 Input 컴포넌트 생성
• 필요한 경우 label, error 처리 등 확장 가능하도록 설계

✅ Input.tsx 코드

import styles from "./Input.module.css";

const Input = ({ className = "", ...props }: React.InputHTMLAttributes<HTMLInputElement>) => {
  return <input className={`${styles.input} ${className}`} {...props} />;
};

export default Input;

✅ 스타일 예시

.input {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}

3. 로그아웃 버튼 커스터마이징 사례

Header.tsx에 있던 로그아웃 버튼에 variant="danger"를 적용하여 스타일을 분리했다. 이로써 색상 커스터마이징이 단순해졌고, 로직과 스타일 간 결합도 낮아졌다.

<Button onClick={handleLogout} variant="danger">
  Logout
</Button>

개선 효과 요약

마무리

UI의 기초 단위를 공통 컴포넌트로 정리하면서, 구조적 일관성과 유지보수성이 크게 향상되었다. 단순한 스타일링 분리처럼 보일 수 있지만, 실제로는 전체 프론트엔드 아키텍처의 기반을 정리하는 핵심 작업이었다. 프로젝트가 커질수록 이런 구조는 점점 더 큰 힘을 발휘하게 된다.

이번 2부에서는 복사한 SVG 아이콘을 실전에서 재사용 가능하게 컴포넌트화하고, props로 제어 가능한 구조로 관리하는 방법까지 정리한다.

1. 왜 아이콘을 컴포넌트로 만들까?

처음엔 <svg>를 그냥 복사해 쓰는 게 편하다. 하지만 아래와 같은 문제가 생긴다.

• 같은 아이콘이 여러 곳에 중복
• 크기나 색상 변경 시 일일이 수정
• 프로젝트가 커질수록 관리 어려움

SVG를 컴포넌트화 + props 기반으로 제어하면 이 문제를 해결할 수 있다.

2. 기본 패턴: SVG를 컴포넌트로 만들기

// components/icons/HomeIcon.jsx
const HomeIcon = ({ size = 20, color = "#000" }) => (
  <svg
    width={size}
    height={size}
    viewBox="0 0 1024 1024"
    fill={color}
    xmlns="http://www.w3.org/2000/svg"
  >
    <path d="M946.5 505L534.6 93.4a31.93 31.93 0 0 0-45.2 0L77.5 505..." />
  </svg>
);

export default HomeIcon;

// 사용 예시
<HomeIcon size={24} color="#333" />

3. 실전 예시: 정렬 아이콘 (asc/desc)

direction props로 상태 제어

정렬 방향에 따라 아이콘을 달리 보여주는 UI라면, direction이라는 props로 제어하면 깔끔하다.

컴포넌트 예시

// components/icons/SortIcon.jsx
const SortIcon = ({ direction = "asc", size = 20, color = "#000" }) => {
  if (direction === "desc") {
    return (
      <svg
        width={size}
        height={size}
        viewBox="0 0 512 512"
        fill={color}
        xmlns="http://www.w3.org/2000/svg"
      >
        <path d="M304 416h-64a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM16 160h48v304a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16V160h48c14.21 0 21.38-17.24 11.31-27.31l-80-96a16 16 0 0 0-22.62 0l-80 96C-5.35 142.74 1.77 160 16 160zm416 0H240a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h192a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm-64 128H240a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM496 32H240a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h256a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16z" />
      </svg>
    );
  }

  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 512 512"
      fill={color}
      xmlns="http://www.w3.org/2000/svg"
    >
      <path d="M304 416h-64a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm-128-64h-48V48a16 16 0 0 0-16-16H80a16 16 0 0 0-16 16v304H16c-14.19 0-21.37 17.24-11.29 27.31l80 96a16 16 0 0 0 22.62 0l80-96C197.35 369.26 190.22 352 176 352zm256-192H240a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h192a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm-64 128H240a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM496 32H240a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h256a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16z" />
    </svg>
  );
};

export default SortIcon;

사용 예시

import SortIcon from "@/components/icons/SortIcon";

<SortIcon direction="asc" />
<SortIcon direction="desc" />

4. 간단한 정렬 버튼 컴포넌트

단순히 아이콘만 사용하는 것이 아니라, 보통은 아래와 같은 형태로 쓰이게 된다.

import { useState } from "react";
import { SortIcon } from "@/components/icons";

const SortButton = () => {
  const [direction, setDirection] = useState("asc");

  const toggleDirection = () => {
    setDirection((prev) => (prev === "asc" ? "desc" : "asc"));
  };

  return (
    <button onClick={toggleDirection}>
      {direction === "asc" ? "오름차순" : "내림차순"}
      <SortIcon direction={direction} />
    </button>
  );
};

export default SortButton;

5. 아이콘 폴더 구조와 통합 관리

src/
└── components/
    └── icons/
        ├── HomeIcon.jsx
        ├── SortIcon.jsx
        └── index.js

// icons/index.js
export { default as HomeIcon } from './HomeIcon';
export { default as SortIcon } from './SortIcon';

// 사용
import { SortIcon } from "@/components/icons";

<SortIcon direction="desc" />

마무리

• SVG도 결국 하나의 컴포넌트다.
• 복붙하는 방식에서 벗어나, props로 상태를 제어하고 관리 가능한 구조로 만들어야 유지보수가 편하다.
• 실무에서는 direction, active, variant 같은 props 분기로 동적 표현이 가능한 아이콘이 필요하다.

복사한 SVG를 그대로 쓰지 말고, 명확한 구조와 확장성을 갖춘 컴포넌트로 다뤄보자.

이 글에서는 React에서 아이콘을 사용하는 주요 방법 4가지를 소개하며, 특히 react-icons 사이트를 활용해 라이브러리를 설치하지 않고 SVG를 직접 복사해 사용하는 팁도 함께 다룬다.

이번 글은 2부로 이어지며, SVG를 재사용 가능한 컴포넌트로 구성하는 방법은 다음 글에서 자세히 설명할 예정이다.

1. SVG 코드 직접 삽입

가장 기본적인 방식으로, SVG 코드를 JSX 내부에 직접 작성하여 사용하는 방법이다.

const CheckIcon = () => (
  <svg
    width="20"
    height="20"
    viewBox="0 0 24 24"
    fill="none"
    stroke="green"
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
  >
    <path d="M5 13l4 4L19 7" />
  </svg>
);

✔ 장점

• 외부 라이브러리에 의존하지 않는다.
• 크기, 색상 등을 자유롭게 커스터마이징할 수 있다.
• 빌드 용량이 매우 작다.

❌ 단점

• 아이콘이 많아질수록 코드가 중복되고 복잡해진다.
• 컴포넌트 재사용을 고려하지 않으면 유지보수가 어렵다.

2. SVG 파일을 import 해서 사용

SVG 파일을 컴포넌트처럼 import하여 사용하는 방식이다. Create React App에서는 기본적으로 지원하며, Vite 등의 환경에서는 설정이 필요할 수 있다.

// CheckIcon.svg
// <svg viewBox="0 0 24 24"><path d="..." /></svg>

import { ReactComponent as CheckIcon } from './CheckIcon.svg';

const Button = () => (
  <button>
    <CheckIcon width="16" height="16" /> 저장
  </button>
);

✔ 장점

• 컴포넌트처럼 재사용할 수 있다.
• props로 크기나 색상 등을 제어할 수 있다.

❌ 단점

• SVG 파일을 별도로 관리해야 한다.
• 빌드 환경에 따라 import 방식이 다를 수 있다.

3. 아이콘 라이브러리 사용 (react-icons)

가장 널리 사용되는 방식으로, 다양한 아이콘 세트를 하나의 라이브러리로 통합한 react-icons를 설치하여 사용하는 방법이다.

npm install react-icons

import { FiSearch } from 'react-icons/fi';

const SearchBar = () => (
  <div>
    <FiSearch size={18} color="#555" />
    <input type="text" placeholder="검색" />
  </div>
);

✔ 장점

• Feather, FontAwesome, Material 등 다양한 아이콘을 지원한다.
• props로 크기와 색상 등을 손쉽게 제어할 수 있다.
• 필요한 아이콘만 import하면 트리쉐이킹이 가능하다.

❌ 단점

• 외부 패키지를 설치해야 하므로 번들 크기가 증가할 수 있다.
• 단순한 아이콘 몇 개만 사용할 경우 과할 수 있다.

4. react-icons 사이트에서 SVG 복사해서 사용

react-icons 공식 사이트(react-icons.github.io)에서는 다양한 아이콘을 미리 확인할 수 있으며, 원하는 아이콘을 개발자 도구를 통해 SVG 코드만 복사해서 사용하는 방식도 가능하다. 이 방법은 패키지를 설치하지 않고도 다양한 아이콘을 활용할 수 있다는 장점이 있다.

복사 방법 (간단 튜토리얼)

1. react-icons.github.io에 접속한다.
2. 원하는 아이콘을 클릭한 뒤, 아이콘 위에서 마우스 오른쪽 클릭 → **“검사(Inspect)”**를 누른다.
3. <svg>...</svg> 코드를 복사한다.
4. JSX에 붙여넣고 HTML 속성을 JSX에 맞게 변환한다.

JSX 변환 시 주의할 점

예시

const HomeIcon = () => (
  <svg
    width="20"
    height="20"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
  >
    <path d="M3 9l9-7 9 7" />
    <path d="M9 22V12h6v10" />
  </svg>
);

✔ 장점

• 라이브러리를 설치하지 않고도 다양한 아이콘을 사용할 수 있다.
• 매우 가볍고 유연하다.
• 필요한 아이콘만 선택하여 사용할 수 있다.

❌ 단점

• JSX 문법에 맞게 속성을 수동으로 변환해야 한다.
• 동일한 SVG를 여러 곳에서 사용할 경우 중복 코드가 발생할 수 있다.

react-icons 사이트에서 원하는 아이콘을 개발자 도구로 복사해 <svg> 형태로 직접 사용하는 방식은, 라이브러리 설치 없이도 아이콘을 유연하게 활용할 수 있는 좋은 방법이다. 특히 단일 아이콘만 필요한 경우나, 프로젝트 용량을 최소화하고 싶을 때 매우 유용하다. JSX 문법 변환만 잘 처리하면 문제없이 사용할 수 있다.

다음 글 예고: SVG 아이콘 컴포넌트화

이번 글에서는 SVG 아이콘을 사용하는 주요 방식들을 소개했다. 다음 글에서는 SVG를 재사용 가능한 React 컴포넌트로 만들고, props로 크기·색상 등을 제어하는 방법, 여러 아이콘을 하나의 폴더에서 관리하는 전략까지 자세히 다룰 예정이다.

React 프로젝트에 i18n 적용하기 (react-i18next)

다국어를 지원하는 웹 서비스를 만들기 위해 i18n을 적용했다. React 기반 프로젝트에서 react-i18next를 이용해 간단하게 다국어 지원을 설정할 수 있다. 이번 글에서는 국제화(i18n)의 개념부터 적용 과정까지 차근차근 정리한다.

0. i18n이란?

i18n은 Internationalization의 약어다. 영어 단어 Internationalization에서 i로 시작해 n으로 끝나는 사이에 18개의 문자가 들어있기 때문에 i18n이라고 부른다.

웹 서비스에서 i18n은 사용자의 언어, 국가, 지역 환경에 맞게 텍스트나 날짜, 숫자 포맷 등을 다국어로 지원하는 기능을 말한다.

예를 들어,

• "환영합니다" → 한국어
• "Welcome" → 영어
• "欢迎" → 중국어 이런 식으로 텍스트를 사용자 언어에 맞게 바꿔주는 것이다.

1. 왜 react-i18next를 선택했는가?

i18n을 React에서 적용할 수 있는 라이브러리는 몇 가지가 있다. 그 중 react-i18next를 선택한 이유는 다음과 같다:

특히, 기존 React 프로젝트에 부담 없이 적용할 수 있고 컴포넌트 단위로 번역 키를 관리할 수 있어서 개발 및 유지보수가 용이하다.

2. 패키지 설치

npm install i18next react-i18next i18next-browser-languagedetector

3. i18n 설정 파일 만들기

src/i18n.js 파일을 생성하고 다음처럼 설정을 작성한다.

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';

import translationEN from './locales/en/translation.json';
import translationKO from './locales/ko/translation.json';

const resources = {
  en: { translation: translationEN },
  ko: { translation: translationKO },
};

i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    resources,
    fallbackLng: 'ko',
    interpolation: {
      escapeValue: false,
    },
  });

export default i18n;

4. main 파일에 i18n 연결

main.jsx 또는 index.js에서 i18n을 import해 초기화되도록 한다.

import './i18n';

5. 번역 리소스 생성

src/
├── locales/
│   ├── en/
│   │   └── translation.json
│   └── ko/
│       └── translation.json

locales/ko/translation.json

{
  "welcome": "환영합니다!",
  "subtitle": "이건 한글이에요"
}

locales/en/translation.json

{
  "welcome": "Welcome!",
  "subtitle": "This is English"
}

6. 컴포넌트에서 사용하기

import { useTranslation } from 'react-i18next';

const Home = () => {
  const { t } = useTranslation();

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('subtitle')}</p>
    </div>
  );
};

7. 자주 사용하는 번역 키 작성 팁

i18n을 적용하다 보면 번역 키를 어떻게 구성하고 유지할지에 대한 고민이 생긴다. 특히 프로젝트 규모가 커질수록 번역 키 관리가 중요해진다.

1. 기능/화면 단위로 네임스페이스 분리하거나 접두사 사용하기

예: landing.title, dashboard.subtitle, profile.editButton

{
  "landing": {
    "title": "여기에 오신 것을 환영합니다!"
  },
  "dashboard": {
    "greeting": "안녕하세요, {{username}}님"
  }
}

2. 컴포넌트와 1:1 대응되는 구조

각 컴포넌트별로 필요한 텍스트만 독립적으로 관리할 수 있어서 유지보수가 편하다.

예: BadgePreview.empty, CommitChart.tooltip, LanguageToggle.label

3. 공통 키는 따로 빼기

프로젝트 전반에서 반복되는 텍스트(버튼, 상태 메시지 등)는 공통으로 분리해서 관리하는 것이 좋다.

{
  "button": {
    "ok": "확인",
    "cancel": "취소"
  },
  "common": {
    "loading": "로딩 중..."
  }
}

4. 변수를 포함한 메시지도 지원

i18next는 {{ }} 구문으로 변수를 받을 수 있다.

{
  "dashboard.greeting": "안녕하세요, {{username}}님"
}

t('dashboard.greeting', { username: '민승용' });

5. 언어 전환 버튼 만들기

사용자가 직접 언어를 바꿀 수 있도록 전환 버튼을 제공할 수 있다.

import { useTranslation } from 'react-i18next';

const LanguageToggle = () => {
  const { i18n, t } = useTranslation();

  const toggleLanguage = () => {
    const nextLang = i18n.language === 'ko' ? 'en' : 'ko';
    i18n.changeLanguage(nextLang);
  };

  return (
    <button onClick={toggleLanguage}>
      {t('button.changeLanguage')} ({i18n.language})
    </button>
  );
};

결론

• 키는 의미 중심, 계층적 구조로 작성한다.
• 공통 키와 화면별 키를 분리해 관리한다.
• 번역 키 작성 습관이 나중에 협업과 유지보수 효율성에 큰 영향을 준다.

더 많은 언어가 추가되거나 서버와 연동해야 하는 상황이라면 namespace 분리, lazy loading 등 고급 설정도 고려할 수 있다. 기초적인 구조를 처음에 잘 잡아두는 게 중요하다.

마무리

react-i18next를 사용하면 React 프로젝트에서 간단한 설정만으로 국제화를 적용할 수 있다. 전역 설정, 컴포넌트 단위 사용, 언어 전환까지 한 번에 구성할 수 있고, 이후 lazy loading이나 서버 연동 등도 쉽게 확장 가능하다.

TypeScript에서 CSS Modules 사용할 때 .d.ts 파일이 필요한 이유

"분명 CSS는 적용됐는데 빨간 줄이 계속 뜬다… 왜 그럴까?"

React 프로젝트를 TypeScript로 개발하다 보면, CSS Modules를 사용할 때 이런 경험을 한 번쯤 하게 된다. 스타일은 잘 적용되는데, VSCode에서는 계속 빨간 밑줄이 생기고 빌드 시 타입 오류가 발생하는 현상이다.

이 글에서는 이 문제의 원인과 해결 방법, 그리고 .d.ts 파일이 필요한 이유를 정리한다.

문제 상황

예를 들어, 다음과 같이 CSS Modules를 사용하는 코드가 있다고 가정한다.

import styles from './MyComponent.module.css'

const MyComponent = () => {
  return <div className={styles.container}>Hello</div>
}

이 코드는 실제로 스타일이 잘 적용되고 화면에도 정상적으로 나타난다. 하지만 TypeScript는 아래와 같은 오류를 발생시킨다.

Cannot find module './MyComponent.module.css' or its corresponding type declarations.

CSS 파일을 import했지만, TypeScript는 이 파일의 타입이 어떤 것인지 알 수 없기 때문에 오류가 발생하는 것이다.

TypeScript는 CSS 타입을 알지 못한다

TypeScript는 기본적으로 .css 파일의 구조를 이해하지 못한다. 자바스크립트에서는 넘어가는 부분이지만, TypeScript는 **"이 파일이 어떤 값을 export하는지"**를 명확하게 알아야 한다.

해결 방법: .d.ts 타입 선언 추가

해결 방법은 간단하다. 프로젝트에 아래와 같은 타입 선언 파일을 하나 추가하면 된다.

src/
└── types/
    └── index.d.ts

// src/types/index.d.ts
declare module '*.module.css' {
  const classes: { [key: string]: string }
  export default classes
}

이렇게 선언해주면 TypeScript는 .module.css 파일을 import할 때 styles.someClass 형태로 사용할 수 있다는 것을 알게 된다.

꼭 필요한가?

정리

• CSS Modules를 TypeScript와 함께 사용할 때는 .d.ts 타입 선언이 필요하다.
• 실행에는 영향이 없지만, 타입 오류를 방지하고 개발 효율을 높이기 위해 반드시 추가하는 것이 좋다.
• 선언 파일의 위치는 src/global.d.ts, src/types/index.d.ts 등으로 자유롭게 구성할 수 있다.

마무리

TypeScript는 엄격한 타입 시스템을 통해 안정적인 개발을 지원하지만, 이렇게 명시적인 설정이 필요한 경우도 존재한다. 한 줄의 타입 선언으로 코드 품질을 높일 수 있다면, 굳이 마다할 이유는 없다.

팀 프로젝트라면, 이 설정이 누락된 상태에서 전 팀원이 모두 동일한 타입 오류를 마주할 수도 있다.

React 애플리케이션을 만들다 보면, 여러 컴포넌트에서 비슷한 로직이 반복되는 경우가 많다. 예를 들어 입력 값 제어, 타이머 관리, 로컬 스토리지 접근, API 상태 관리 등은 다양한 컴포넌트에서 공유되는 공통된 패턴이다.

React는 이러한 로직을 커스텀 Hook(Custom Hook)으로 추상화할 수 있도록 지원한다. 이번 글에서는 커스텀 Hook의 개념부터 작성법, 실전 예제까지 알아본다.

커스텀 Hook이란?

커스텀 Hook은 React의 기본 Hook(useState, useEffect, 등)을 사용해 만든, 재사용 가능한 함수다. 이 함수는 반드시 use로 시작하는 이름을 가지며, 내부에서 하나 이상의 Hook을 사용할 수 있다.

function useCustomFeature() {
  const [value, setValue] = useState(0);
  // 기타 로직 ...
  return [value, setValue];
}

커스텀 Hook은 UI가 아닌 로직만을 담당하며, 함수형 컴포넌트처럼 동작하지만 JSX를 반환하지 않는다.

커스텀 Hook을 사용하는 이유

• 로직의 재사용성 향상
• 컴포넌트 코드 분리와 가독성 향상
• 팀원 간 기능 추상화 및 일관성 유지
• Hook의 조합을 통해 더 복잡한 기능도 단순화 가능

기본 예제: 입력 값 관리 훅 만들기

여러 입력 필드에서 useState를 반복하는 대신, 커스텀 훅으로 추상화할 수 있다.

// useInput.js
import { useState } from 'react';

function useInput(initialValue = "") {
  const [value, setValue] = useState(initialValue);
  const onChange = (e) => setValue(e.target.value);
  const reset = () => setValue("");
  return { value, onChange, reset };
}

export default useInput;

사용 예시:

import useInput from './useInput';

function LoginForm() {
  const username = useInput();
  const password = useInput();

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log("입력값:", username.value, password.value);
    username.reset();
    password.reset();
  };

  return (
    <form onSubmit={handleSubmit}>
      <input {...username} placeholder="아이디" />
      <input {...password} type="password" placeholder="비밀번호" />
      <button>로그인</button>
    </form>
  );
}

커스텀 Hook 작성 원칙

이름은 use로 시작해야 한다

→ React는 이 네이밍 규칙을 기반으로 Hook을 식별하고 동작 순서를 관리한다.

다른 Hook과 마찬가지로 최상위 레벨에서만 호출해야 한다

→ 조건문, 루프, 중첩 함수 내에서 호출하면 안 된다.

JSX를 반환하지 않는다

→ 커스텀 Hook은 로직만 담당하는 함수이며, UI는 일반 컴포넌트에서 처리한다.

실무 예제

API 상태 관리 Hook

import { useEffect, useState } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let ignore = false;
    setLoading(true);
    fetch(url)
      .then((res) => res.json())
      .then((result) => {
        if (!ignore) {
          setData(result);
          setLoading(false);
        }
      });

    return () => {
      ignore = true;
    };
  }, [url]);

  return { data, loading };
}

사용 예시:

function PostList() {
  const { data: posts, loading } = useFetch("https://jsonplaceholder.typicode.com/posts");

  if (loading) return <p>로딩 중...</p>;

  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

로컬 스토리지 Hook

import { useState, useEffect } from 'react';

function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    const stored = localStorage.getItem(key);
    return stored ? JSON.parse(stored) : initialValue;
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
}

사용 예시:

function ThemeToggle() {
  const [darkMode, setDarkMode] = useLocalStorage("darkMode", false);

  return (
    <button onClick={() => setDarkMode(!darkMode)}>
      {darkMode ? "라이트 모드" : "다크 모드"}
    </button>
  );
}

핵심 정리

1. 커스텀 Hook은 Hook 기반 로직을 재사용 가능한 함수로 추상화한 것이다.
2. 이름은 use로 시작해야 하며, JSX를 반환하지 않는다.
3. 여러 Hook들을 조합하여 복잡한 동작을 하나의 커스텀 Hook으로 묶을 수 있다.
4. 반복적인 상태 관리, API 처리, 이벤트 등록 등 비즈니스 로직을 재사용성 있게 구성할 수 있다.
5. 커스텀 Hook은 로직의 분리와 컴포넌트 단순화에 핵심적인 역할을 한다.

마무리

React에서 커스텀 Hook은 로직을 모듈화하고 팀 개발 효율을 높이기 위한 가장 강력한 도구 중 하나다. 복잡한 컴포넌트일수록 로직을 커스텀 Hook으로 분리하면 코드가 훨씬 읽기 쉬워지고, 유지보수성이 향상된다. 앞으로는 하나의 기능을 구현할 때마다 "이걸 커스텀 Hook으로 만들 수 있을까?"를 고민해보자. 작은 반복도 훅으로 추상화하는 습관이 점점 더 탄탄한 리액트 실력을 만들어줄 것이다.

참고 자료

• React 공식 문서: 로직 재사용을 위한 커스텀 Hook
• React 레거시 문서: 커스텀 Hook 만들기
• [React 완벽 가이드 2025 with React Router & Redux -Udemy] (https://www.udemy.com/course/best-react)

이번 글에서는 useRef의 기본 개념부터, 실무에서 활용할 수 있는 심화 패턴까지 정리해보았다.

useRef란?

useRef는 다음 두 가지 역할을 수행하는 Hook이다.

1. 렌더링과 상관없이 값을 저장하는 변수처럼 사용
2. DOM 요소를 직접 참조하기 위한 수단

const ref = useRef(initialValue);

• ref.current에 저장한 값은 컴포넌트가 리렌더링돼도 유지된다.
• ref.current를 변경해도 컴포넌트는 리렌더링되지 않는다.

기본 사용법

DOM 참조 예제: input 포커스 제어

import { useRef } from 'react';

function FocusInput() {
  const inputRef = useRef(null);

  const handleClick = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} placeholder="클릭 시 포커스됨" />
      <button onClick={handleClick}>포커스</button>
    </div>
  );
}

값 추적 예제: 렌더링 횟수 카운팅

import { useRef, useState } from 'react';

function RenderCounter() {
  const renderCount = useRef(1);
  const [value, setValue] = useState("");

  renderCount.current += 1;

  return (
    <div>
      <input value={value} onChange={(e) => setValue(e.target.value)} />
      <p>렌더링 횟수: {renderCount.current}</p>
    </div>
  );
}

이전 값 기억하기

import { useEffect, useRef, useState } from 'react';

function PreviousValueTracker() {
  const [count, setCount] = useState(0);
  const prevCountRef = useRef(count);

  useEffect(() => {
    prevCountRef.current = count;
  }, [count]);

  return (
    <div>
      <p>현재 값: {count}</p>
      <p>이전 값: {prevCountRef.current}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

useRef vs useState 차이

실무 활용 예제 (심화)

스크롤 위치 추적

import { useEffect, useRef, useState } from 'react';

function ScrollTracker() {
  const scrollY = useRef(0);
  const [message, setMessage] = useState("");

  useEffect(() => {
    const handleScroll = () => {
      scrollY.current = window.scrollY;
      if (scrollY.current > 300) {
        setMessage("스크롤이 300px 이상입니다!");
      } else {
        setMessage("");
      }
    };

    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  return <p>{message}</p>;
}

디바운싱 타이머 제어

import { useRef, useState } from 'react';

function DebouncedInput() {
  const [text, setText] = useState("");
  const timerRef = useRef(null);

  const handleChange = (e) => {
    const value = e.target.value;
    clearTimeout(timerRef.current);
    timerRef.current = setTimeout(() => {
      console.log("서버 전송: ", value);
    }, 500);
    setText(value);
  };

  return (
    <input value={text} onChange={handleChange} placeholder="입력 후 잠시 멈춰보세요" />
  );
}

IntersectionObserver 활용

import { useEffect, useRef, useState } from 'react';

function LazyBox() {
  const boxRef = useRef(null);
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver(([entry]) => {
      setVisible(entry.isIntersecting);
    });

    if (boxRef.current) {
      observer.observe(boxRef.current);
    }

    return () => observer.disconnect();
  }, []);

  return (
    <div
      ref={boxRef}
      style={{
        marginTop: "500px",
        height: "200px",
        background: visible ? "skyblue" : "gray",
        transition: "background 0.3s",
      }}
    >
      {visible ? "보이고 있어요!" : "아직 안 보여요"}
    </div>
  );
}

핵심 정리

1. useRef()는 렌더링과 무관한 값을 저장할 수 있다.
2. .current 값을 변경해도 리렌더링은 발생하지 않는다.
3. DOM 요소에 접근하거나 이전 값을 추적하는 데 매우 유용하다.
4. 디바운싱, IntersectionObserver, 외부 API 타이머 등을 다룰 때 필수 도구다.
5. 화면에 표시할 값은 useState, 내부에서만 추적할 값은 useRef로 구분해서 사용한다.

마무리

useRef는 React 함수형 컴포넌트에서 렌더링 없이 값을 보존하거나, DOM 요소를 직접 조작해야 할 때 유용한 도구다. UI 상태는 useState, 내부 로직이나 참조 추적은 useRef로 구분하면 컴포넌트를 더 명확하고 효율적으로 관리할 수 있다.

참고 자료

• React 공식 문서: useRef
• [React 완벽 가이드 2025 with React Router & Redux -Udemy] (https://www.udemy.com/course/best-react)

useEffect란?

useEffect는 컴포넌트가 렌더링된 이후에 부수 효과 를 수행할 수 있게 해주는 Hook이다. React는 렌더링 과정에서 DOM을 그리는 데 집중하고, 외부 작업(API 호출, 로깅 등)은 useEffect에 맡긴다.

useEffect(() => {
  // 이곳에 실행할 부수 효과 로직을 작성한다
}, [dependencies]);

• 첫 번째 인자: Effect 함수 – 부수 효과를 실행하는 함수
• 두 번째 인자: 의존성 배열 (dependency array) – 언제 Effect를 다시 실행할지 결정

언제 쓰나?

• 데이터 요청 (fetch API, axios)
• 이벤트 리스너 등록 및 해제
• 타이머 설정 (setTimeout, setInterval)
• 콘솔 로깅, 문서 제목 변경 등 외부 변경 작업

기본 예제: 마운트 시 API 호출

import { useEffect, useState } from 'react';

function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(res => res.json())
      .then(data => setUsers(data));
  }, []); // 빈 배열: 컴포넌트가 처음 마운트될 때 한 번만 실행

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

• 의존성 배열이 []이기 때문에 마운트 시점에만 한 번 실행된다.
• setUsers로 상태를 업데이트하면, 컴포넌트는 재렌더링된다.

의존성 배열에 따른 실행 시점

// 의존성 배열이 없는 경우: 매 렌더링마다 실행됨
useEffect(() => {
  console.log("렌더링마다 실행됨");
});

// 특정 상태에 의존하는 경우
useEffect(() => {
  console.log("count가 변경될 때만 실행됨");
}, [count]);

정리(clean-up)이 필요한 경우: 언마운트 처리

useEffect는 컴포넌트가 언마운트되거나, 다음 Effect가 실행되기 전 정리 작업을 할 수 있도록 함수를 반환할 수 있다.

useEffect(() => {
  const id = setInterval(() => {
    console.log("타이머 실행 중...");
  }, 1000);

  return () => {
    clearInterval(id); // 컴포넌트가 사라질 때 타이머 해제
    console.log("타이머 정리됨");
  };
}, []);

정리(clean-up)는 메모리 누수나 이벤트 중복을 방지하는 데 중요하다.

의존성 배열 누락에 주의

의존성 배열을 잘못 작성하면 다음과 같은 문제가 생길 수 있다:

1. 의존성이 빠진 경우: 최신 상태를 참조하지 못함
2. 불필요한 재실행: 바뀌지 않는 값까지 포함하면 성능 낭비

React 공식 문서는 ESLint 규칙(react-hooks/exhaustive-deps)을 사용하여 자동으로 경고를 주도록 권장한다.

useEffect(() => {
  doSomething(value); // value는 의존성 배열에 포함되어야 함
}, []); // ❌ value 누락

핵심 정리

1. useEffect는 렌더링 이후 부수 효과(사이드 이펙트) 를 실행하는 Hook이다.
2. 두 번째 인자인 의존성 배열을 통해 실행 조건을 제어할 수 있다.
3. return 문을 통해 정리(clean-up) 작업을 정의할 수 있다.
4. 상태나 props가 변경될 때 해당 값들을 의존성 배열에 명시해야 한다.
5. 과도한 useEffect 사용은 오히려 코드를 복잡하게 만들 수 있으므로, 정확한 시점에만 효과를 적용하는 게 핵심이다.

마무리

React에서 useEffect는 상태 변화에 따른 외부 작업을 다루기 위한 사이드 이펙트 전용 영역이다. 함수형 컴포넌트에서는 필수적인 개념이며, 상태와 동기화되는 동작(API 요청, 타이머, 구독 등)을 처리할 때 유용하게 사용된다.

참고 자료

• React 공식 문서 - useEffect

이 글에서는 공식 문서의 내용을 바탕으로, useState의 기본적인 사용법과 동작 원리를 정리해보았다.

Hook이란?

Hook은 함수형 컴포넌트에서 상태 값 관리 및 생명주기 처리 같은 React 고유 기능을 사용할 수 있도록 도와주는 함수이다. Hook 이전에는 상태 관리나 라이프사이클 처리를 위해 클래스형 컴포넌트를 사용해야 했지만, Hook을 통해 더 간결하고 선언적인 코드 작성이 가능해졌다.

Hook 사용 규칙

공식 문서에 따르면, Hook은 다음과 같은 두 가지 규칙을 반드시 따라야 한다.

1. 항상 컴포넌트 함수의 최상단에서 호출해야 한다

Hook은 컴포넌트가 렌더링될 때 호출 순서를 기준으로 상태를 연결하므로, 조건문이나 반복문, 중첩 함수 내부에서는 사용할 수 없다.

// ❌ 잘못된 예시
function MyComponent() {
  if (someCondition) {
    const [value, setValue] = useState(0); // 조건문 내부 호출 ❌
  }
}

// ✅ 올바른 예시
function MyComponent() {
  const [value, setValue] = useState(0); // 항상 최상단에서 호출
}

2. 오직 React 함수형 컴포넌트 또는 커스텀 Hook에서만 사용해야 한다

Hook은 일반 함수나 클래스 컴포넌트에서는 사용할 수 없다. React의 렌더링 흐름과 상태 관리 시스템은 함수형 컴포넌트 기반으로 동작하기 때문에, 다음과 같은 코드에서는 오류가 발생한다.

// ❌ 잘못된 예시 1: 일반 함수에서 Hook 사용 (에러 발생)
function notAComponent() {
  const [value, setValue] = useState(0); // 오류: 일반 함수에서는 Hook 사용 불가
  return value;
}

// ❌ 잘못된 예시 2: 클래스 컴포넌트에서 Hook 사용 (에러 발생)
class MyComponent extends React.Component {
  render() {
    const [count, setCount] = useState(0); // 오류: 클래스에서는 Hook 사용 불가
    return <div>{count}</div>;
  }
}

// ✅ 올바른 예시 1: 함수형 컴포넌트에서 Hook 사용
function FunctionalComponent() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

// ✅ 올바른 예시 2: 커스텀 Hook 내부에서 사용
function useCounter(initialValue) {
  const [count, setCount] = useState(initialValue);
  return [count, setCount];
}

function CustomHookComponent() {
  const [count, setCount] = useCounter(0);
  return (
    <div>
      <p>커스텀 훅 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

useState란?

useState는 컴포넌트에 상태를 선언하고 해당 값을 변경할 수 있는 가장 기본적인 Hook이다. 호출 시에는 배열을 반환하며, 구조 분해 할당으로 상태값과 상태를 갱신하는 함수를 각각 받아 사용할 수 있다.

const [state, setState] = useState(initialValue);

• state: 현재 상태 값
• setState: 상태를 변경하는 함수
• initialValue: 상태의 초기값

기본 예제

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // 초기값 0

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

설명

• useState(0)은 초기값을 0으로 설정하며, count는 현재 상태 값을, setCount는 그 값을 갱신하는 함수이다.
• 버튼 클릭 시 setCount(count + 1)을 호출하면, React는 컴포넌트를 다시 렌더링하며 count의 변경된 값을 반영한다.

상태 변경은 비동기적이다

setState 함수는 즉시 상태를 바꾸는 것이 아니라, React가 다음 렌더링에서 새로운 값을 반영하도록 예약하는 구조로 동작한다.

setCount(count + 1);
console.log(count); // 여전히 이전 값일 수 있다!

따라서 이전 상태를 기반으로 새로운 상태를 계산할 때는 다음과 같이 함수형 업데이트를 사용하는 것이 안전하다.

setCount(prevCount => prevCount + 1);

상태는 어떤 타입이든 가능하다

초기값으로는 숫자뿐 아니라 문자열, 배열, 객체 등 모든 JavaScript 값을 사용할 수 있다.

const [name, setName] = useState("Alice");
const [todos, setTodos] = useState(["공부하기", "운동하기"]);
const [user, setUser] = useState({ name: "민수", age: 26 });

객체나 배열은 불변성을 유지한 채로 업데이트하는 것이 좋다:

setUser(prev => ({ ...prev, age: prev.age + 1 }));

계산 비용이 큰 초기값은 함수로 전달하자

const [data, setData] = useState(() => heavyComputation());

이렇게 함수로 전달하면, heavyComputation()은 처음 렌더링 시에만 실행된다. 매 렌더링마다 호출되는 것을 방지할 수 있다.

좋습니다! 글의 마무리 부분에 들어갈 수 있는 useState 핵심 개념 요약을 아래와 같이 정리해드릴게요. 시리즈형 블로그의 흐름을 유지하면서, 독자가 다시 한 번 중요한 내용을 짚고 넘어갈 수 있도록 구성했습니다.

핵심 정리

useState를 제대로 이해하기 위해 기억해야 할 핵심 포인트는 다음과 같다:

1. 컴포넌트 내부 상태를 선언할 수 있게 해주는 Hook이다. → 상태 값과 상태 변경 함수를 [state, setState] 형태로 제공한다.

2. 초기값은 숫자, 문자열, 배열, 객체 등 모든 JS 값이 가능하다. → 계산 비용이 클 경우 함수로 전달하여 최초 1회만 실행할 수도 있다.

3. 상태 변경은 비동기적이다. → setState 이후 바로 값을 읽으면 이전 값일 수 있다. → 이전 상태 기반 업데이트는 함수형으로 처리하는 것이 안전하다.

   setCount(prev => prev + 1);

4. Hook은 컴포넌트 최상단에서만 사용해야 하며, 조건문이나 반복문, 일반 함수 내부에서는 사용할 수 없다.

5. Hook은 함수형 컴포넌트 또는 커스텀 Hook에서만 사용할 수 있다. → 클래스 컴포넌트나 일반 함수에서 사용 시 오류가 발생한다.

마무리

useState는 가장 단순하지만 가장 널리 사용되는 Hook으로, 상태 기반 UI를 구현하는 데 있어 출발점이 되는 개념이다. Hook의 규칙과 useState의 작동 방식을 정확히 이해하는 것이, 이후 다룰 useEffect, useRef 등 더 복잡한 Hook들을 배우는 데 튼튼한 기반이 된다.

참고 자료

• React 공식 문서 - useState
• [React 완벽 가이드 2025 with React Router & Redux -Udemy] (https://www.udemy.com/course/best-react)

Next.js 루트 구조 완벽 정리 (App Router 기준)

Next.js를 처음 접하거나, 최신 버전(App Router)을 사용하려고 할 때 프로젝트 루트 구조를 이해하는 건 정말 중요합니다.
이번 글에서는 Next.js 기본 디렉터리 구조를 App Router 기준으로 체계적으로 설명합니다.

1. 최상단 구조

Next.js 프로젝트를 생성하면 기본적으로 다음과 같은 루트 구조를 갖습니다.

my-next-app/
├── app/
├── public/
├── node_modules/
├── .next/
├── package.json
├── next.config.js
├── tsconfig.json / jsconfig.json
└── README.md

주요 폴더와 파일 설명

2. app/ 폴더 - 새로운 App Router의 핵심

Next.js 13부터 새롭게 추가된 app/ 폴더는 파일 기반 라우팅의 중심입니다.
이 안에 페이지, 레이아웃, 템플릿 등을 구성합니다.

예시:

app/
├── layout.tsx
├── page.tsx
├── globals.css
├── about/
│   ├── page.tsx
│   └── layout.tsx
├── blog/
│   ├── [slug]/
│   │   └── page.tsx
│   └── page.tsx
└── api/
    └── hello/
        └── route.ts

app/ 폴더 주요 규칙

3. public/ 폴더

• 이 폴더 안에 넣은 파일은 / 경로 기준으로 접근할 수 있습니다.
• 예: /public/images/logo.png → https://yourdomain.com/images/logo.png

주의: next/image처럼 최적화된 이미지 컴포넌트를 사용할 경우에는 import 방식으로 가져와야 하고,
정적 파일만 public/에 두어야 합니다.

4. 프로젝트 설정 파일

5. 빌드 및 런타임 폴더

TIP: .next/와 node_modules/는 직접 수정하지 않습니다. (Git에도 보통 제외합니다.)

6. 추가로 알면 좋은 것

• middleware.ts : 요청(Request) 가로채기 및 처리 (예: 인증 리다이렉트)
• env 파일 : .env.local, .env.production 등으로 환경변수 관리
• components/ 폴더 : UI 컴포넌트 모듈화
• lib/, hooks/, utils/ 폴더 : 재사용 가능한 함수 및 로직 정리

Pages Router vs App Router

Next.js 13부터 App Router가 등장했지만, 기존 Pages Router도 여전히 사용 가능합니다.
둘의 차이를 간단히 비교해봅니다.

✅ 정리:

• 빠르게 MVP를 만들거나 익숙한 구조를 원하면 Pages Router
• 서버 컴포넌트, 고성능 최적화를 활용하고 싶다면 App Router

마치며

Next.js의 루트 구조를 정확히 이해하면,
대규모 프로젝트도 깔끔하게 관리할 수 있습니다.

특히 App Router를 쓴다면, "페이지 중심" 이 아닌 "레이아웃 중심" 설계에 익숙해지는 게 정말 중요합니다.
지금부터 천천히 구조를 잡아가보세요!

포트폴리오가 중요한 이유

프론트엔드 개발자는 사용자가 직접 접하는 UI/UX를 구현하는 역할을 담당한다. 따라서 기술 역량뿐만 아니라 디자인 감각, 사용자 중심의 사고, 최신 트렌드 반영 능력 등을 증명하는 것이 중요하다. 이를 효과적으로 보여줄 수 있는 것이 바로 포트폴리오다.

포트폴리오 웹사이트의 필수 항목

1. 사이트명 웹사이트 제목은 보통 본인의 이름이나 닉네임을 사용한다. 이는 웹사이트 URL 자체가 개인의 브랜드를 드러낼 수 있는 중요한 요소이기 때문이다.

2. 자기소개 자신이 다룰 수 있는 기술과 경험 수준을 간결하게 정리한다. 타이포그래피나 간단한 캐릭터 디자인을 활용하면 더욱 인상적인 소개가 될 수 있다.

3. 프로젝트 프로젝트를 소개할 때는 목표, 기간, 주요 기능을 구체적으로 작성해야 한다. 프로젝트 흐름도나 회고를 추가하면 전문성이 더욱 돋보인다.

3-1. 프로젝트 소개 프로젝트의 목적, 주요 내용, 진행 기간을 상세히 기록한다. 주요 기능은 간결하면서도 핵심을 전달할 수 있도록 정리한다.

3-2. 기술 스택 프로젝트에서 사용한 기술 스택을 단순히 나열하는 것이 아니라, 해당 기술을 선택한 이유와 적용 방법까지 설명하는 것이 중요하다.

3-3. 기여도 프로젝트에서 본인의 기여도를 퍼센트나 그래프로 시각적으로 표현하면 이해하기 쉽다. 코딩뿐만 아니라 버그 수정, 기능 개선, 디자인 조율 등 다양한 기여 내용을 포함하는 것이 좋다.

포트폴리오 웹사이트 작성 팁

1. 성장 가능성을 어필한다 프론트엔드 개발자의 역할은 데이터 가공, 캐싱, 라우터 관리 등으로 확장되고 있다. 따라서 원하는 직무와 커리어 방향을 고민하고, 이를 포트폴리오에 반영해야 한다.

2. 개발에 대한 열정을 보여준다 자신이 관심 있는 주제로 서비스를 만들어 보고, 그 과정을 포트폴리오에 기록하는 것이 좋다. 과거에 만든 프로젝트를 리팩터링하여 개선하는 것도 하나의 방법이다.

3. 성능 최적화 경험 프론트엔드 개발자로서 웹사이트 성능을 최적화한 경험을 추가하면 좋다. 예를 들어, 이미지 최적화, 코드 스플리팅, 지연 로딩 등의 기법을 적용한 사례를 설명하면 경쟁력을 높일 수 있다. 포트폴리오는 단순한 프로젝트 나열이 아니라, 개발자로서의 강점과 성장 가능성을 보여주는 중요한 도구다. 차별화된 포트폴리오를 만들어 취업 시장에서 경쟁력을 갖추도록 하자.

4. 고민의 흔적을 남긴다 좋은 코드를 만들기 위해 거친 과정을 보여주는 것이 중요하다. 문제를 해결하기 위해 어떤 방법을 시도했는지, 코드의 개선 과정을 어떻게 진행했는지를 기록하면 채용 담당자에게 긍정적인 인상을 줄 수 있다.

5. 커뮤니케이션 능력을 강조한다 포트폴리오는 채용 담당자의 시선을 사로잡아야 한다. 다양한 경로로 공유하고 피드백을 반영하면 점점 더 완성도를 높일 수 있다. 또한, 협업 경험과 소통 능력을 강조하면 프론트엔드 개발자로서의 강점을 더욱 부각할 수 있다.

포트폴리오 웹사이트 작성 시 유의할 점

1. 깔끔하고 직관적인 디자인을 유지한다 메인 페이지는 첫인상을 좌우하는 핵심 요소다. 불필요한 애니메이션을 자제하고, 핵심 정보를 직관적으로 배치해야 한다.

2. 반응형 디자인 구현 여부 포트폴리오 웹사이트는 다양한 기기에서 최적화되어야 한다. 반응형 디자인을 적용하고 이를 강조하면 가산점이 될 수 있다.

3. 접근성(A11Y) 고려

웹 접근성을 준수한 개발 경험을 강조하면 더욱 전문성이 돋보인다. 예를 들어, WAI-ARIA 속성을 활용하거나 키보드 네비게이션을 지원한 사례를 포함하면 좋다.

4. 무료 서브도메인 사용을 피한다 무료 도메인은 신뢰도가 낮고, 악성코드에 노출될 가능성이 크며, 도메인이 회수될 위험도 있다. 따라서 커스텀 도메인을 구매해 연결하는 것이 좋다.

5. 라이브 프로젝트 링크를 추가한다 프로젝트의 실체를 보여줄 수 있는 라이브 링크를 반드시 포함해야 한다. 화면으로 보여줄 수 없는 프로젝트라면 깃허브에 코드를 업로드하고 README 파일을 꼼꼼하게 작성하는 것도 좋은 방법이다.

개요

프로젝트 진행중에 중복클릭이 가능하여 같은 폼을 여러번 보내는 문제가 발생했다. 개발자도구에서 network throttling을 3g로 걸어주니 서버에 호출을 받기까지 시간이 2초정도 걸리더라... 이렇게 개발자가 의도하지 않은 동작을 막기위해 isLoading 메서드를 사용했다.

isLoading의 문제

const [isLoading, setIsLoading] = useState(false);

const handleConfirmSubmit = async () => {
    if (isLoading) {
      return;
    }

    setIsLoading(true);
    try {
      const sushiData = {
        title,
        content,
        maxAnswers,
        category,
        sushiType,
      };
      console.log("등록된 내용:", sushiData);
      const response = await dispatch(createSushi(sushiData));
      const { success, data, error } = response.payload;
      const { token } = data;
      const shareUrl = `share/${token}`;
      setShareUrl(shareUrl);
      console.log("공유 URL:", shareUrl);
      setShowModal(false);
      setShowCompleteModal(true);
    } finally {
      setIsLoading(false);
    }
  };

이런식으로 isLoading 메서드를 useState를 통해 걸어줄 수 있다. 이런 방식은 다음과 같은 문제점을 가지고 있다.

1. 경쟁 상태(Race Condition): 여러 요청이 동시에 발생할 경우, isLoading 상태가 정확하게 반영되지 않을 수 있다.
2. 상태 업데이트 지연: React의 상태 업데이트는 비동기적이므로, isLoading 상태가 변경되기 전에 여러 번의 클릭이 발생할 수 있다.
3. 컴포넌트 언마운트 문제: 요청 중에 컴포넌트가 언마운트되면 isLoading 상태가 적절히 초기화되지 않을 수 있습니다.

이러한 문제들을 방지하기 위해 useRef를 사용하는 것이 권장된다.

useRef를 사용하는 코드

const dispatch = useDispatch();
const isSubmittingRef = useRef(false);
const reRender = useCallback(() => {}, []);

const handleConfirmSubmit = async () => {
  if (isSubmittingRef.current) {
    return;
  }

  isSubmittingRef.current = true;
  reRender();

  try {
    const sushiData = {
      title,
      content,
      maxAnswers,
      category,
      sushiType,
    };
    const response = await dispatch(createSushi(sushiData));
    const { success, data, error } = response.payload;
    const { token } = data;
    const shareUrl = `share/${token}`;
    setShareUrl(shareUrl);
    setShowModal(false);
    setShowCompleteModal(true);
  } finally {
    isSubmittingRef.current = false;
    reRender();
  }
};

useRef를 사용하는 방식의 장점

1. 즉각적인 값 업데이트: ref는 동기적으로 업데이트되어 경쟁 상태를 방지한다.
2. 리렌더링 독립성: ref 값의 변경은 리렌더링을 트리거하지 않아 성능상 이점이 있다.
3. 컴포넌트 생명주기 독립성: 컴포넌트가 언마운트되어도 ref 값이 유지된다.

결론

Claude와의 대화를 통해 useState를 통해 중복클릭 방지를 하는 방안을 적용했다. 그러다가 혹시 다른 문제가 발생하지 않을까? 하고 구글링을 시작했다. 그러다가 https://happysisyphe.tistory.com/72 사이트를 발견하고 useRef를 사용하는 방법을 적용했다. 또한 더욱 안정적인 방법 두가지 또한 알게 되었다. AI에게만 의존하지말고 구글링도 계속해서 더 실력있는 개발자가 되자!

Portal이란?

React의 Portal은 특정 컴포넌트를 부모 컴포넌트의 DOM 계층 구조가 아니라, 지정된 DOM 노드에 렌더링할 수 있도록 도와주는 기능이다. 기본적으로 React는 컴포넌트 트리 구조를 따라 렌더링되지만, Portal을 사용하면 부모 컴포넌트의 DOM 구조를 벗어나 원하는 위치에 컴포넌트를 마운트할 수 있다.

Portals를 사용하는 이유

1. DOM 계층 구조를 벗어나 렌더링

• React의 컴포넌트 트리와 관계없이 특정한 DOM 요소에 렌더링할 수 있다.
• 예를 들어, 모달, 드롭다운, 툴팁 같은 UI 요소를 body 태그 바로 아래에 렌더링하여 스타일과 동작을 안정적으로 유지할 수 있다.

2. CSS z-index 문제 해결

• 부모 요소의 overflow: hidden 또는 z-index 속성으로 인해 모달이나 드롭다운이 잘리는 문제를 방지할 수 있다.

3. 이벤트 버블링의 개선

• Portal을 사용해도 이벤트는 React의 이벤트 시스템을 그대로 따르지만, 부모 컴포넌트와 겹치는 이벤트(예: onClick 이벤트로 모달이 닫히는 문제)를 효과적으로 관리할 수 있다.

Portal이 권장되는 상황

1. 모달(Modal)

• 모달이 부모 컴포넌트 내에서 렌더링되면 overflow: hidden 같은 스타일에 의해 가려질 수 있다.
• Portal을 사용하여 document.body 아래에 렌더링하면 문제를 방지할 수 있다.

2. 드롭다운 메뉴 (Dropdown Menu)

• 부모 요소의 overflow: hidden 때문에 드롭다운이 잘리는 문제를 해결할 수 있다.

3. 툴팁 (Tooltip)

• 특정 요소에 툴팁을 표시할 때 부모 요소의 overflow 속성에 영향을 받지 않도록 별도의 DOM 요소에 렌더링한다.

-> Portal은 특정 UI 요소를 부모 컴포넌트의 DOM 구조를 벗어나 별도의 DOM 요소에 렌더링하고 싶을 때 유용하다. 때문에 모달, 드롭다운, 툴팁과 같이 부모 요소의 스타일이나 z-index 속성의 영향을 받지 않아야 하는 UI 컴포넌트에 권장된다.

Portal 사용법

우선 완성된 코드를 먼저 봐보자!

Modal.jsx

import React from "react";
import { createPortal } from "react-dom";

const Modal = ({ isOpen, onClose, children }) => {
  if (!isOpen) return null; // 모달이 닫혀 있으면 렌더링하지 않음

  return createPortal(
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        {children}
        <button onClick={onClose}>닫기</button>
      </div>
    </div>,
    document.getElementById("modal-root") // 특정 DOM 요소에 렌더링
  );
};

export default Modal;

App.jsx

import React, { useState } from "react";
import Modal from "./Modal";

const App = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);

  return (
    <div>
      <h1>React Portal 모달 예제</h1>
      <button onClick={() => setIsModalOpen(true)}>모달 열기</button>

      <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
        <h2>안녕하세요!</h2>
        <p>이것은 Portal을 사용한 모달입니다.</p>
      </Modal>
    </div>
  );
};

export default App;

index.html

<body>
  <div id="root"></div>
  <div id="modal-root"></div> <!-- Portal을 위한 추가적인 DOM 노드 -->
</body>

Modal.jsx - Portal을 통한 모달 렌더링

1. 우선 react-dom에서 createPortal을 import한다.

   import React from "react";
   import { createPortal } from "react-dom";

   createPortal의 역할은 이 컴포넌트에 렌더링이 될 HTML 코드를 DOM내에 다른곳으로 옮기는 것이다.

2. 그렇게 하기 위해 전체 코드를 감싸주고 createPortal을 이용하여 보내준다. createPortal은 두가지 인수를 받는데 첫번째 인수는 JSX코드이며, 두번째 인수는 HTML요소이다.

   return createPortal(
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        {children}
        <button onClick={onClose}>닫기</button>
      </div>
    </div>
   );

3. 두번째 인수는 기본 브라우저 API로 선택해야한다. document.getElementById를 사용하면 된다.

   return createPortal(
   <div className="modal-overlay" onClick={onClose}>
     <div className="modal-content" onClick={(e) => e.stopPropagation()}>
       {children}
       <button onClick={onClose}>닫기</button>
     </div>
   </div>,
   document.getElementById("modal-root") // 특정 DOM 요소에 렌더링
   );

   위 코드는 메인파일이나 인덱스 파일에서 보던것과 비슷하다!

main.jsx

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.jsx";
createRoot(document.getElementById("root")).render(
  <StrictMode>
    <App />
  </StrictMode>
);

여기에 createRoot 메소드가 있는데 이것 또한 HTML파일의 요소가 필요하며, 여기에 리액트 앱이 렌더링된다. 이와 같이 createPortal을 사용함으로써 똑같은 리액트 앱의 출력 위치를 다르게 설정한다.

index.html - Portal을 위한 DOM 요소 추가

4. Portal을 위한 추가적인 DOM 노드를 추가하자.

   <body>
   <div id="root"></div>
   <div id="modal-root"></div> <!-- Portal을 위한 추가적인 DOM 노드 -->
   </body>

App.js - 모달 상태 관리

5. useState를 사용하여 모달 열림/닫힘 상태를 관리한다.

   const [isModalOpen, setIsModalOpen] = useState(false);

6. 버튼을 클릭하면 isModalOpen을 true로 설정하여 모달을 연다.

   <button onClick={() => setIsModalOpen(true)}>모달 열기</button>
   

7. isOpen props를 통해 모달을 열지 결정하고, 
onClose를 호출하면 setIsModalOpen(false)가 실행되어 모달이 닫힌다.
```jsx
<Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>

프로젝트 진행중에 모달을 여러개 사용해야 할 일이 있었다. 구현과정에서 조금씩 복잡해지고 css적용에 문제가 생겼다... 그러다가 검색을 통해 Portal을 알게 되었다! 아니 이런 대단한 녀석이 있을줄이야.... 이미 만들어놓은 컴포넌트에 Portal을 나중에 적용하려니까 일이 두배가 되어버렸어! 이래서 지식이 중요하구나 싶었다... 열심히해서 두번 일하지 않는 chill한 개발자가 되어보자! (이런.. chill chill치 못하게 두 번 일해버렸네요....)

function App(){

  let [글제목, b] = useState('남자 코트 추천');
  let posts = '강남 우동 맛집';
  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 blog</div>
      </div>
      <div className="list">
        <h4>{ 글제목 }</h4>
        <p>2월 17일 발행</p>
      </div>
    </div>
  )
}

위 코드에서 useState를 통해 데이터를 받아와서 '글제목'에 값을 넣는다. 이런 식으로 변수를 사용하지 않고 state를 사용해서 자료를 저장할 수 있다.

let [글제목, b] = useState('남자 코트 추천')에서 b가 뭐지?? useState()를 쓰면 그 자리에 [데이터1, 데이터2] 이렇게 생긴 이상한 array가 남는다. 데이터1 자리엔 '남자 코트 추천'같은 자료가 들어있고, 데이터2 자리엔 state변경을 도와주는 함수가 들어있다. 그 데이터들을 각각 변수로 빼고 싶으면 let [글제목, b] = useState('남자 코트 추천')이러면 된다.

변수가 아니라 state에 데이터를 저장해서 쓰는이유는 뭘까? 변수와는 다르게 state는 변동사항이 생기면 state쓰는 html도 자동으로 리렌더링 해준다. 또한 UI 기능 개발이 매우 편리해지고, 사이트가 부드럽게 작동하도록 도와준다.

하지만 로고나 잘 변화하지 않는 데이터들은 state로 만들어서 데이터바인딩을 할 필요가 없다. state는 상품명, 글제목, 가격 이런것 처럼 자주 변할 것 같은 데이터들을 저장하는 것이 좋다.

2. onClick을 사용해서 이벤트 만들기

버튼을 누르면 좋아요 갯수가 1씩 증가하는 기능을 만들자.

1. 먼저 state를 만들어 데이터바인딩하자.

   function App(){
   
   let [따봉] = useState(0);
   return (
     <h4> { 글제목[0] } <span>👍</span> { 따봉 }</h4>
   )
   }

2. onClick={ } 함수를 이용해서 이벤트를 발생 시키자.

   function App(){
   
   function testFunction(){
    console.log(1)
   }
   return (
    // JSX에서 onClick 사용시 유의점
    // 1. Click이 대문자이다.
    // 2. {} 중괄호 사용한다.
    // 3. 그냥 코드가 아니라 함수를 넣어야 잘 동작한다.
    <div onClick={testFunction}> 안녕하세요 </div>
   )
   }

   function을 따로 빼서 사용하기 싫다면 onClick안에 함수를 넣을 수도 있다.

   <div onClick={ function(){ 실행할코드 } }> 
   <div onClick={ () => { 실행할코드 } }>

⭐ 3. state 변경하기

state 변경함수를 사용해서 state를 변경해야 한다.

function App(){

  let [ 따봉 ] = useState(0);
  return (
    <h4> { 글제목[0] } <span onClick={ ()=>{ 따봉 = 따봉 + 1 } } >👍</span> { 따봉 }</h4>
  )
}

위와 같이 { 따봉 = 따봉 + 1 }은 사용 불가!

state 변경함수

let [ state, setState ] = useState(0); 

위 코드에서 setState부분이 state 변경함수 이다. setState(1)을 작성하면 state는 1이 되고, setState(100)을 작성하면 state는 100이 된다.

4. array/object 자료에서 state 수정

function App(){

  let [글제목, 글제목변경] = useState( ['남자코트 추천', '강남 우동맛집', '파이썬 독학'] );  

  return (
    <button onClick={ ()=>{ 
      글제목변경(['여자코트 추천', '강남 우동맛집', '파이썬 독학'])
    } }> 수정버튼 </button>
  )
}

위와 같은 코드로 작성해도 작동은한다. 하지만 확장성이 떨어진다. 때문에 아래와 같은 코드가 추천된다.

function App(){

  let [글제목, 글제목변경] = useState( ['남자코트 추천', '강남 우동맛집', '파이썬 독학'] );  

  return (
    <button onClick={ ()=>{ 
        let copy = [...글제목];
        copy[0] = "여자코트 추천";
        글제목변경(copy);
    } }> 수정버튼 </button>
  )
}

5. state 변경함수 동작원리

state 변경함수를 쓸 때 기존 '기존state === 신규state' 와 같이 먼저 검사해보자. 만약 같다면 state 변경을 해주지 않는다. 'let copy = state' 도 마찬가지로 copy와 state가 같아서 변경을 안해준 것이다. copy와 state안의 자료가 다른데 왜 같다고 하는것일까? 그 이유는 다음과 같다. 자바스크립트로 arr를 하나 만들어 보자. [1, 2, 3]은 ram에 저장이되고 arr에는 그 자료가 어디에 있는지를 알 수 있는 경로만 가지고 있다. 때문에 aray/object 자료를 복사를 하면 문제가 생긴다.

let data1 = [1,2,3];
let data2 = data1;

위 코드에서 문제를 확인할 수 있다. data1과 data2는 [1,2,3]값을 저장하는게 아니라, 경로를 가지고 있을 뿐이다. 때문에 data1과 data2는 같은 값을 공유하게 된다. 이러한 이유로 data1을 변경하면 data2도 자동으로 변경된다. 때문에 array/object 자료를 복사하려면 [...state] 같은 방식을 사용해야 한다.

let copy = [...글제목];
copy[0] = '여자코트 추천';
글제목변경(copy)

... 이 뭘까? spread operator라고 하는 문법으로 array/object 자료형 왼쪽에 붙일 수 있고, 괄호를 벗겨주세요 라는 뜻이다. ...[1,2,3]은 1,2,3와 같다. 때문에 ...[]을 사용하면 괄호를 벗기고 다시 array를 만들어주세요 라는 말이 된다. 이렇게 복사를 하면 다른 경로를 가리키는 완전히 독립적인 array 복사본을 생성해 줄 수 있다

6. HTML코드에서의 유의점

return(
  <div></div>
  <div></div>
)

위 코드처럼 return ()안에 두개의 html 태그를 나란히 적을수 없고 하나의 태그로 시작해서 하나의 태그로 끝나야한다.

return(
  <div>
    <div></div>
    <div></div>
  </div>
)

다음과 같이 하나의 div로 감싸야 한다. 의미없는 div를 쓰기 싫다면 fragment 문법인 <></>로 감싸도 된다.

return(
  <>
    <div></div>
    <div></div>
  </>
)

7. 복잡한 html을 한 단어로 치환할 수 있는 Component 문법

React는 긴 HTML을 한 단어로 깔끔하게 치환해서 넣을 수 있는 문법을 제공한다. 이를 Component라고 한다.

function App (){
  return (
    <div>
      (생략)
      <Modal></Modal>
    </div>
  )
}

function Modal(){
  return (
    <div className="modal">
      <h4>제목</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

위와 같이 HTML을 한 단어로 줄일 수 있다. 줄이는 방법은 다음과 같다.

1. function을 이용해서 함수를 하나 만들어주고 작명한다.
2. 그 함수 안에 return () 안에 축약을 원하는 HTML을 담으면 된다.
3. 그럼 원하는 곳에서 <함수명></함수명> 사용하면 아까 축약한 HTML이 등장한다.

Component 만들 때 주의점

1. component 작명할 땐 영어대문자로 보통 작명한다.
2. return () 안엔 html 태그들이 평행하게 여러개 들어갈 수 없습니다.
3. function App(){} 내부에서 만들면 안된다. component 안에 component 를 만들진 않는다.
4. <컴포넌트></컴포넌트> 이렇게 써도 되고 <컴포넌트/> 이렇게 써도 된다.

어떤 HTML들을 Component 만드는게 좋을까? 관습적으로 컴포넌트화 하는 경우는 다음과 같다.

• 사이트에 반복해서 출현하는 HTML 덩어리들은 Component로 만들면 좋다.
• 내용이 매우 자주 변경될 것 같은 HTML 부분을 잘라서 Component로 만들면 좋다.
• 다른 페이지를 만들고 싶다면 그 페이지의 HTML 내용을 하나의 Component로 만드는게 좋다.
• 또는 다른 팀원과 협업할 때 웹페이지를 Component 단위로 나눠서 작업을 분배하기도 한다.

8. 동적인 UI 만드는 step

1. html css로 미리 UI 디자인을 마치기
2. UI의 현재 상태를 state로 저장해두기
3. state에 따라서 UI가 어떻게 보일지 조건문 등으로 작성하기

모달창 기능을 만들면서 실습해보자!

1. html css로 미리 디자인

.modal {
  margin-top: 20px;
  padding: 20px;
  background: #eee;
  text-align: left;
}

2. UI의 현재 상태를 state로 저장

let [modal, setModal] = useState(false);

모달창은 열림/닫힘 두개의 상태밖에 없기 때문에 boolean 타입으로 작성을 해보겠다.

3. state에 따라서 UI가 어떻게 보일지 작성

function App (){

  let [modal, setModal] = useState(false);
  return (
    <div className="app">
      (생략)
      {
        modal == true ? <Modal/> : null
      }
    </div>
  )
}

9. 많은 div들을 반복문으로 줄이고 싶을때 map을 사용

html이 반복적으로 출현하면 반복문을 이용해서 똑같은 html을 생성할 수 있다. for반복문은 JSX 중괄호 안에서 사용할 수 없어서 map()을 대신 사용한다. 모드 array자료 우측에 map() 함수를 붙일 수 있다.

1. array에 들어있는 자료 갯수만큼 그 안에 있는 코드를 반복 실행한다.

var arr = [2,3,4];
arr.map(function(){
  console.log(1)
});

위 코드에서 arr의 자료 갯수가 세개 이므로 console.log(1)을 세번 실행한다.

2. 콜백함수에 파라미터를 아무렇게나 작명하면 그 파라미터는 array안에 있던 모든 자료를 하나씩 출력해준다.

콜백함수란? 다른 함수의 인자로써 넘겨진 후 특정 이벤트에 의해 호출되는 함수이다.

var arr = [2,3,4];
arr.map(function(a){
  console.log(a)
});

위 코드에서는 arr의 자료인 [2, 3, 4]가 'a'로 들어가서 세번 실행된다. 실체로 콘솔창에서 2,3,4가 출력된다.

3. return에 값을 적으면 array로 담아주고, map() 쓴 자리에 넘겨준다.

var arr = [2,3,4];
var newArray = arr.map(function(a){
  return a * 10
});
console.log(newArray)

'a'에 arr의 자료인 [2, 3, 4]가 들어가고, return을 통해 newArray에 [20, 30, 40]이 들어가게 된다.

단순하게 반복문처럼 map() 을 사용할 수도 있다.

function App (){
  return (
    <div>
      { 
        [1,2,3].map(function(){
          return ( <div>안녕</div> )
        }) 
      }
    </div>
  )
}

위 코드는 세번 반복되어서 '안녕'이라는 글이 세번 출력된다.

10. props의 활용

자식 컴포넌트가 부모 컴포넌트의 state를 사용하고 싶을 때는 props를 활용한다. modal 내부에 title state를 넣어보자.

function App (){
  let [title, setTitle] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']);
  return (
    <div>
      <Modal></Modal>
    </div>
  )
}

function Modal(){
  return (
    <div className="modal">
      <h4>{ title[0] }</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

위와 같은 코드는 실행되지 않는다. title 변수가 function App()에 있기 때문이다. 위 그림과 같이 부모 컴포넌트 state를 자식 컴포넌트로 전송해 줄 수 있다. 그리고 이렇게 전송할 때 props라는 문법을 사용한다. 전송하는 방법은 다음과 같다.

1. 자식컴포넌트를 불러오는 곳에서 <자식컴포넌트 작명={state이름}/> 작성
2. 자식컴포넌트 만드는 function으로 가서 props라는 파라미터 등록 후 props라는 파라미터 등록 후 props. 작명 사용 위와 같은 절차에 따라 코드를 작성한 예시는 다음과 같다.

   function App (){
   let [title, setTitle] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']);
   return (
    <div>
      <Modal title={title}></Modal>
    </div>
   )
   }
   

function Modal(props){ return (

1. HTML의 class사용

다음과 같이 스타일을 주기 위한 class명을 넣을 때 className을 사용해야한다. 왜냐하면 jsx파일에서 class는 선언으로 쓰이기 때문이다.

2. 변수를 HTML에 넣기

다음과 같이 중괄호{}를 통해 변수를 넣어줄 수 있다. href, id, className, src등 여러가지 html 속성들에도 가능하다. 실제로 id와 h4태그 안에 post값이 제대로 들어가 있는 모습을 확인 할 수 있다. 이러한 작업을 데이터바인딩이라고 한다.

3. HTML에 style속성 넣기

JSX 상에서는 style속성을 넣을때 style=""가 아니라 style={}로 넣어야한다. 또한 font-size처럼 속성명에 -기호를 쓸 수 없다. 때문에 camelCase방식으로 작성해야한다.