개발 메모장 개발 메모장

next

• 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
• pnpm으로 갈아타기

  Tip 2024. 10. 25. 15:35

  프론트엔드 개발을 하다 보면 다양한 패키지 매니저를 접하게 되는데, npm, Yarn 외에도 요즘 각광받고 있는 또 다른 선택지가 있습니다. "Performant npm"의 약자인 pnpm은 설치 속도와 디스크 공간 활용 면에서 탁월한 성능을 자랑합니다.pnpm의 장점1. 빠른 설치 속도pnpm은 패키지를 중앙 캐시에서 관리하고, 하드 링크를 통해 설치하기 때문에 일반적인 npm이나 Yarn보다 훨씬 빠릅니다.하드 링크 : 파일 시스템에서 동일한 파일을 여러 경로에서 접근할 수 있게 해주는 방식으로, 실제 파일은 하나만 저장되며 여러 위치에서 공유됩니다. 이를 통해 중복 저장을 피하고 디스크 공간을 절약하면서도 빠르게 설치가 가능합니다.2. 디스크 사용 효율성동일한 패키지를 여러 프로젝트에서 사용할 때,..

  Read More
• TypeScript 유틸리티 타입 소개

  JS & TS 2024. 10. 11. 14:38

  TypeScript는 JavaScript에 정적 타입을 더하여 코드의 안정성을 높이는 역할을 합니다.특히 TypeScript에는 유용한 유틸리티 타입들이 있어, 코드를 작성할 때 매우 편리하게 활용할 수 있습니다.TypeScript에서 자주 사용되는 유틸리티 타입과 기능을 소개해 보겠습니다.1. PickPick은 특정 타입에서 원하는 프로퍼티만 선택하여 새 타입을 만드는 데 유용합니다.이 기능을 사용하면 큰 인터페이스나 객체 타입 중에서 필요한 부분만 사용하고 싶을 때 매우 편리합니다.언제 사용하나요?특정 객체에서 필요한 일부 속성만 타입으로 사용하고자 할 때사용 예시interface User { id: number; name: string; age: number; email: string;}//..

  Read More
• StyleX 소개하기(feat. Next.js)

  Tip 2024. 10. 4. 19:01

  최근 웹 개발에서 스타일링을 위한 기술은 빠르게 발전하고 있으며, 그중에서도 Meta(Facebook)가 개발한 StyleX는 성능 최적화와 유지보수를 쉽게 하기 위한 정적 컴파일 기반 스타일링을 제공하는 흥미로운 접근 방식을 보여주고 있습니다.CSS-in-JS vs StyleX: 차이점은 무엇일까?기존 CSS-in-JS 솔루션들은 컴포넌트별 스타일을 쉽게 관리하고 동적인 스타일링을 가능하게 해주는 장점을 가지고 있습니다.대표적인 예로는 styled-components, Emotion 등이 있으며, 각기 다른 방식으로 컴포넌트의 스타일을 JavaScript 코드에 통합해 편리함을 제공해 왔습니다.그러나 CSS-in-JS는 런타임에서 스타일을 생성하고 주입하는 과정에서 성능 저하나 FOUC(Flash of..

  Read More
• 마이크로 서비스 아키텍처(Microservice Architecture) 소개

  Tip 2024. 10. 2. 17:43

  Microservice Architecture는 현대 소프트웨어 개발에서 주목받는 아키텍처 스타일입니다.전통적인 Monolithic Architecture와 비교하여 MSA가 제공하는 여러 이점을 살펴보겠습니다.Microservice Architecture란?Microservice Architecture는 애플리케이션을 작은 독립적인 서비스들로 분해하여 개발하는 접근 방식입니다.각 서비스는 자체적인 비즈니스 기능을 수행하며, 가볍고 표준화된 인터페이스(예: RESTful API)를 통해 다른 서비스와 통신합니다.이는 서비스별로 독립적인 배포와 확장을 가능하게 합니다.Monolithic Architecture란?Monolithic Architecture는 애플리케이션의 모든 구성 요소가 하나의 코드베이스와..

  Read More