개발 메모장 개발 메모장

분류 전체보기

• TypeScript interface vs type 비교 2편

  JS & TS 2025. 3. 17. 20:19

  2025.03.16 - [JS & TS] - TypeScript interface vs type 비교 1편 이전 편에 이어 이번 편에서는 조금 더 개발자 관점으로 비교해 보겠습니다.유지보수성 (코드 가독성 및 유지보수 난이도)가독성과 개발자 경험interface와 type 중 어떤 것이 더 읽기 좋은지는 상황에 따라 다를 수 있고, 팀의 스타일 가이드에 따라 달라지기도 합니다.몇 가지 비교점을 살펴보겠습니다.코드 구조 표현: interface는 선언적 구조를 제공해 객체 형태를 명확히 표현합니다. 반면, type은 간단한 타입 정의는 명료하지만, 복잡한 유니온·인터섹션 조합에서는 한눈에 파악하기 어려울 수 있습니다.IDE 미리 보기: VS Code에서는 type 정의는 마우스 오버 시 바로 구조가 보이는..

  Read More
• TypeScript interface vs type 비교 1편

  JS & TS 2025. 3. 16. 19:00

  TypeScript에서는 interface와 type을 사용해 타입을 정의할 수 있습니다.이 둘은 비슷한 목적을 가지고 있지만 미묘한 차이가 있으며, 상황에 따라 더 적합한 선택이 있습니다.interface와 type의 기본적인 차이점정의 방식과 표현 범위interface는 객체 형태(shape)를 정의하는 데 주로 사용되며, 선언 시 interface InterfaceName { ... } 형태를 사용합니다.한편, type은 타입 별칭을 만드는 키워드로 type AliasName = ... 형태로 정의합니다.프리미티브와 복합 타입: type은 문자열, 숫자 등의 원시 타입에도 별칭을 붙일 수 있지만, interface는 객체 형태에만 사용할 수 있습니다. 예를 들어 type MyString = stri..

  Read More
• Next.js에서 On-Demand ISR 활용하기(Feat. API, Webhook, Serverless)

  Next.js 2025. 3. 2. 20:24

  On-Demand ISR(Incremental Static Regeneration)은 Next.js에서 제공하는 정적 페이지 재생성 기능으로, 특정 시간 간격이 아니라 콘텐츠 변경 시점에 즉시 업데이트할 수 있도록 해줍니다.이를 활용하면 서버 부하를 줄이면서도 최신 데이터를 사용자에게 제공할 수 있습니다.1. 온디맨드 ISR 도입 배경과 기존 렌더링 방식 비교1.1 온디맨드 ISR 도입 배경Next.js는 초기부터 다양한 렌더링 방식을 지원하여 개발자들이 프로젝트의 특성에 맞게 선택할 수 있도록 했습니다.그러나 각 방식에는 고유한 장단점이 존재하며, 특히 정적 사이트 생성(SSG)의 경우 콘텐츠 업데이트 시 전체 사이트를 다시 빌드해야 하는 비효율성이 있었습니다. 이러한 문제를 해결하고자 ISR(Incr..

  Read More
• 왜 useBack 커스텀 hook을 만들었는가?

  Next.js 2025. 2. 15. 18:58

  내비게이션 경험은 사용자 만족도를 결정짓는 핵심 요소입니다.특히 모바일 환경이나 복잡한 내비게이션 구조를 가진 웹 애플리케이션에서는 router.back()이 예상대로 동작하지 않는 경우가 많습니다.이 문제를 해결하고자 useBack이라는 커스텀 hook을 개발하였습니다.기존 router.back()의 한계1. 히스토리 스택 부족 문제router.back()은 브라우저 히스토리를 기반으로 작동하지만, 사용자 흐름에 따라 예상치 못한 동작을 유발할 수 있습니다.사용자가 외부 링크를 통해 유입되었거나 페이지를 새로고침한 경우, 히스토리 스택이 충분하지 않아 router.back()이 동작하지 않을 수 있습니다.이 경우 사용자가 "뒤로 가기" 버튼을 눌러도 이전 페이지로 이동하지 못하고 빈 화면 혹은 예기치 ..

  Read More
• 스키마 유효성 검사 라이브러리 비교(feat. Zod vs Yup vs Joi)

  Tip 2025. 1. 5. 18:38

  클라이언트와 서버 간 데이터 교환이 빈번해지면서, 데이터의 일관성과 정확성을 보장하는 것이 중요한 과제가 되었습니다.이는 단순히 버그를 줄이는 것을 넘어, 개발 생산성과 시스템의 안정성에 직접적인 영향을 미치는 문제입니다.오늘은 기존에 자주 사용했던 Yup과 Joi 그리고 최근에 자주 사용되는 Zod에 대해 소개해 보겠습니다.1. 왜 스키마 유효성 검사가 필요한가?1.1 데이터 무결성과 유지보수서비스를 운영한다면 기능이 늘어나고 서비스 구조가 복잡해지기 쉽습니다.API 요청, 응답, DB 저장 구조가 점점 복잡해지면, 예상치 못한 형태의 데이터가 들어와 서비스 전체가 흔들릴 수 있습니다.스키마 유효성 검사를 통해 입력 데이터의 무결성을 보장하면, 추후 에러가 발생해도 디버깅 지점이 뚜렷해지고 유지보수가 ..

  Read More
• C4 Model for Visualizing Frontend Architecture (Feat. FSD)

  Tip 2024. 12. 29. 18:34

  1. C4 Model for Visualizing Frontend Architecture먼저, C4 모델은 소프트웨어 아키텍처를 네 가지 수준으로 시각화합니다. (Context, Container, Component, Code)이 접근법은 시스템을 직관적이고 명확하게 이해할 수 있도록 돕습니다.그러나 전통적인 C4 모델은 백엔드 중심의 시스템에 적합하며, 프런트엔드의 특수성을 담기엔 한계가 있습니다.Visualizing Frontend Architecture는 이러한 한계를 극복하기 위해 설계되었습니다.이 방법론은 프런트엔드의 도메인 특화된 요구사항과 기술 스택을 시각적으로 표현할 수 있게 합니다.크게 아래와 같이 구성될 수 있습니다. FE 앱을 Context(전체 시스템에서의 FE의 역할) → Cont..

  Read More
• Next.js App Router의 인터셉트 라우트(Intercept Route)와 병렬 라우트(Parallel Route) 알아보기

  Next.js 2024. 12. 15. 19:43

  Next.js 13 이후 도입된 App 디렉터리 기반의 라우팅 시스템은 기존 pages 디렉터리 방식에 비해 유연하고 모듈화 된 라우팅 구성 방식을 제공합니다. 특히 app 디렉터리 내에서 Layout, Server Components, 그리고 클라이언트 컴포넌트 개념을 통한 세밀한 구조 관리가 가능해졌습니다.그중 인터셉트 라우트(Intercept Route)와 병렬 라우트(Parallel Route)는 기존에는 구현하기 까다롭던 UX 패턴을 손쉽게 구현할 수 있는 좋은 기능이었습니다.1. 인터셉트 라우트(Intercept Route) : 요청을 가로채는 새로운 방식인터셉트 라우트는 특정한 요청이 들어올 때 기존의 라우트 흐름을 가로채어(인터셉트) 원하는 UI나 플로우를 제공하는 기능입니다. 예를 들어,..

  Read More
• HTTP 클라이언트 라이브러리의 변화 Axios에서 Got, Ky로

  Tip 2024. 12. 8. 19:39

  프런트엔드와 백엔드 개발 모두에서 HTTP 통신은 필수적이다.REST API 호출, 마이크로서비스 간 통신, 외부 서비스 연동 등 다양한 시나리오에서 단순한 HTTP 요청/응답을 넘어 훨씬 복잡해진 요구사항이 있다.많은 개발자들이 이제 막 웹 생태계에 입문할 때는 fetch나 Node.js의 기본 http 모듈로 시작한다.하지만 일정 수준 이상의 프로젝트 규모나 복잡도, 유지보수성을 요구하는 상황이 되면 fetch 단독 사용은 점차 비효율적으로 느껴지며, 보다 강력한 기능을 제공하는 HTTP 클라이언트 라이브러리로 옮겨가게 된다.이 글에서는 프런트엔드 생태계에서 흔히 사용되는 Axios, 그리고 최근 들어 각광받고 있는 Got(Node.js 환경)과 Ky(브라우저 환경)에 대해 살펴보고, 왜 단순한 fe..

  Read More