💻 개발/Frontend5 Next.js 에서 알아보는 4가지의 렌더링 방식 (CSR, SSG, ISR, SSR) Next.js는 리액트 기반의 웹 프레임워크로, 다양한 렌더링 방식을 제공한다.오늘은 Next.js 14 버전부터 등장한 App Router를 기반으로 CSR, SSG, ISR, SSR를 적용하는 방법에 대해 알아볼 것이다. 초기 설정앞으로의 예시에서 실제 데이터환경을 구성하여 렌더링 방식이 어떻게 동작하는지 확인할 것 이다.json-server를 사용하여 간단한 API 서버를 구축하고, 이를 통해 Next.js의 다양한 렌더링 방식에서 데이터를 가져오는 과정을 살펴볼 것이다. 1. Next.js 프로젝트 생성$ npx create-next-app@15.2.1 [project_name]설정 옵션으로는 app router를 사용하였고, 이 외에는 자유롭게 선택해도 된다. 2. json-server 설치 .. 2025. 3. 7. 유틸리티 타입을 활용하여 깔끔하게 타입 관리하기 오늘은 타입스크립트의 유틸리티 타입을 깊이 살펴보면서, 그동안 내가 타입을 관리하며 마주했던 문제점들과 이를 개선할 수 있는 방법에 대해 이야기해보려고 한다. 타입스크립트를 사용하다 보면 타입 정의가 반복되거나 복잡해지는 경우가 많았는데, 유틸리티 타입을 제대로 활용하면 이런 문제를 해결할 수 있다는 것을 알게 되었다. 실제 프로젝트에서 경험한 사례를 바탕으로, 수정된 타입 관리 방법에 대해 살펴보자! 유틸리티 타입이란?타입스크립트에서 제공하는 내장 타입 변환 도구들이다.데이터를 이용해 간단한 계산을 하는 함수들을 유틸리티 함수라고 부르는 것처럼 타입을 통해 간단한 계산을 수행해 주는 타입을 유틸리티 타입이라고 한다. Pick 타입 T에서 특정 프로퍼티 K만 선택한다. type Todo = { id.. 2025. 3. 6. React 프로젝트에서 코드 컨벤션 소프트웨어 개발에서 코드 일관성은 프로젝트의 성공을 좌우하는 핵심 요소이다. 특히 여러 개발자가 협업하는 환경에서는 더욱 중요하다.오늘은 여러 단체/개인 프로젝트를 진행하면서 만들게 된 나만의 코드 컨벤션에 대해 말해보겠다! 코드 컨벤션이란?프로젝트에서 일관되게 따르는 코드 작성 규칙/ 스타일 가이드 프로젝트를 시작할 때 가장 먼저하는 일은 기획일 것이다.그리고 기획 이후 실제 개발 단계로 넘어가면, 코드를 개발하기 전에 코드 컨벤션을 정해야 한다.명확한 켄변선 없이 프로젝트를 진행하면 코드의 일관성 저하, 코드 리뷰 어려움, 새로운 팀원의 온보딩 시간 증가 등의 문제가 발생할 것이다.이 글에서는 간단하게 디렉토리 구조부터 디렉토리/파일 네이밍 규칙, 함수 및 컴포넌트의 접두사 및 접미사 규칙 등에 대한.. 2025. 2. 12. 프론트엔드 프로젝트 구조를 위한 디자인 패턴 알아보기 (Atomic Design Pattern, Feature-Sliced Design) 프론트엔드 프로젝트를 진행할 때, 가장 먼저 고민해야할 것 중 하나는 "어떤 폴더 구조를 사용할 것인가?" 이다.프로젝트 구조를 잘 설계하면 유지보수성과 확장성이 높아지며, 개발 생산성에도 큰 영향을 미친다.이번 글에서는 2 가지 프론트엔드 아키택처 패턴을 살펴보며, 각 방식이 언제 적합한지 알아보겠다! 1. Atomic Design PatternAtomic Design은 화학의 원자(Atom) 개념에서 영감을 받은 디자인 시스템이다.쪼개지지 않는 최소 단위인 원자부터, 원자가 모여 만들어지는 분자, 분자가 결합되어 유기체가 생성된고, 유기체들이 모여서 하나의 템플릿을 구성하게 되며, 이 템플릿에 데이터가 결합되면서 페이지가 완성되는 흐름을 가진다. 원자 (Atoms) : 더 이상 분해할 수 없는 최소.. 2025. 2. 5. [JS] 디바운싱과 쓰로틀링: 성능 최적화를 위한 필수 기술 구글 크롬, 유튜브, 네이버와 같은 다양한 사이트의 검색 창을 보면, 사용자가 입력에 대해 관련 제안이 표시되는 기능을 볼 수 있다.이러한 기능은 사용자 경험을 향상시키는데 유용하다. 하지만 매 입력마다 제안을 생성한다면 어떤 일이 발생할까? 모든 입력에 대해 실시간으로 제안을 제공하는 것이 이상적으로 보일 수 있다.하지만, 타자가 빠른 사용자라면 제안이 출력되기 전에 새로운 입력이 들어오는 상황이 발생할 수 있다.이는 불필요한 API 요청이 발생하는 것으로 시스템 리소스의 낭비로 이어질 수 있다. 이런 문제를 해결하고 효율성을 높이기 위해 쓰로틀링(Throttling)과 디바운싱(Debouncing) 기법이 사용된다.이번 글에서는 두 기법의 개념과 차이점, 그리고 구현 방법에 대해 살펴보겠다! 디바.. 2025. 1. 15. 이전 1 다음
