전체 글
Next.js 15 주요 변화 살펴보기
Next.js 15 주요 변화 살펴보기
2024.11.24안녕하세요. Next.js 팀은 최근 약 1년 주기로 메이저 업데이트를 진행하고 있는데요. 최근에도 Next.js 14가 출시된 지 1년 만인 2023년 10월 21일에 Next.js 15가 발표 되었습니다. Next.js 14는 App Router의 안정성에 중점을 두어 큰 변경사항이 없었던 반면, Next.js 15는 주목할 만한 변화가 많이 포함되어 있습니다. 따라서 오늘은 Next.js 15의 주요 변경사항 5가지를 살펴보려고 합니다. Next.js 15의 전체 업데이트 내용은 해당 링크에서 확인하실 수 있습니다. 1. `@next/codemod` CLI가장 먼저 주목할 만한 변화는 `@next/codemod` CLI의 도입입니다. `@next/codemod`는 코드베이스를 최신 안정 버전이나 사..
Polymorphic Component를 만들어보자(ft.타입스크립트)
Polymorphic Component를 만들어보자(ft.타입스크립트)
2024.11.19안녕하세요. 최근에 헤드리스 컴포넌트를 개발하면서, 비즈니스 도메인과 상관없이 재사용 가능하고 유연하게 확장할 수 있는 UI 컴포넌트에 대해 많은 고민을 하고 있는데요. Polymorphic Components(다형성 구성요소)는 호출하는 쪽에서 해당 컴포넌트의 시맨틱 요소를 결정할 수 있게 하는 React 패턴으로, UI 컴포넌트의 재사용성을 높이는 데 매우 유용한 기술이기 때문에 소개해드리고자 합니다. 특히 타입스크립트와 함께 사용하면 안전하고 쉽게 Polymorphic Components를 구축할 수 있어서, 재사용과 확장성이 용이한 UI 컴포넌트를 개발하고 싶으신 분들은 참고하시면 많은 도움이 될 것 같습니다. Why Polymorphic Components?먼저 Polymorphic Compo..
React에서 우아한 닫기 애니메이션 구현하기 - useExitAnimation 훅 만들기
React에서 우아한 닫기 애니메이션 구현하기 - useExitAnimation 훅 만들기
2024.08.24React에서 팝오버나 모달 같은 컴포넌트를 만들 때, 사용자 경험을 향상시키기 위해 부드러운 열고 닫는 애니메이션을 적용하는 경우가 많습니다. 하지만 열고 닫음을 상태(state)로 관리할 때 닫기(Exit)에 애니메이션을 적용하는 것은 생각보다 까다로울 수 있습니다.이는 컴포넌트의 존재 여부를 상태로 관리할 때 발생하는 문제인데요. 상태가 "닫힘"으로 변경되면 컴포넌트가 즉시 언마운트되어, 애니메이션을 적용할 시간이 없기 때문입니다.function PopoverContent() { const { isOpen, ... } = usePopoverContext(); // 컴포넌트가 바로 사라져 애니메이션이 적용되지 않는다. return ( {isOpen && ( ..
1년 8개월의 군 생활을 돌아보며 - 군대를 앞두고 걱정하고 있는 모든 이들에게
1년 8개월의 군 생활을 돌아보며 - 군대를 앞두고 걱정하고 있는 모든 이들에게
2024.08.232024년 8월 18일, 1년 8개월간의 길고도 긴 군생활을 마치고 전역하게 되었다. 너무 오랫동안 군인으로 살았기 때문일까? 전역한 지 4~5일이 지났지만 아직 실감이 나지 않는다. 마치 아직도 부대로 복귀해야 할 것 같은 느낌이 든다. 그래도 점차 사회에서의 일상에 적응해가고 있음을 느끼고 있다. 나의 군생활을 돌아보고 스스로 평가해 본다면 90점 정도를 줄 수 있을 것 같다. 역시 후회는 없다. 물론 크고 작은 많은 실수를 했지만, 나는 할 수 있는 최선을 다했고 어떤 상황에서도 책임을 회피하지 않았다. 무엇보다 나와의 약속이었던 "매일 최소 3시간 자기 계발에 투자하자"는 다짐을 단 하루도 어기지 않았다는 점에 스스로 높은 점수를 주고 싶다. 물론 힘들지 않았다고 말하면 거짓말일 것이다. 나는 정..
서비스 이탈률 개선기 - Fingoo 팀의 성장 이야기
서비스 이탈률 개선기 - Fingoo 팀의 성장 이야기
2024.08.04안녕하세요. 오늘은 제가 진행한 Fingoo 프로젝트의 베타테스트 과정에서 겪었던 문제와 저희 팀이 서비스 이탈률을 개선한 경험을 공유하고자 합니다. 단순히 지표를 개선한 것을 넘어서, 그 과정에서 여러 복잡한 문제와 이해관계가 얽혀 있었고. 이를 해결해 나가면서 많은 것을 배울 수 있었습니다. 비록 복잡하고 특수한 상황이었지만, 그 과정에서 한 고민들은 많은 분들이 공감할 수 있는 부분이라고 생각해 글을 작성하게 되었습니다. 먼저 Fingoo는 '나만의 투자분석 친구’로 초보자도 쉽게 금융 투자를 할 수 있도록 개발한 서비스입니다. 베타테스트의 목적은 서비스의 가설을 검증하고 고객 데이터를 수집하여 기능을 개선하는 것이었는데요. 이를 위해 투자동아리 세미나와 마케팅을 통해 200명, 클라우드 펀딩으로 ..
복잡한 애플리케이션을 위한 프론트엔드 아키텍처
복잡한 애플리케이션을 위한 프론트엔드 아키텍처
2024.07.20프론트엔드가 점점 복잡해지면서 프론트엔드 코드베이스를 아키텍처 수준에서 구조화하고 관리하는 것의 중요성이 점점 높아지고 있다. 필자도 이 주제에 대해 굉장히 오랫동안 고민해 왔는데, 특히 백엔드와 달리 프론트엔드에는 3-계층 아키텍처나 클린 아키텍처와 같은 정형화된 아키텍처가 없었기 때문이다. 물론 프론트엔드와 백엔드는 소프트웨어의 본질적인 내용을 공유하기 때문에, 여러 아키텍처의 핵심 논리를 프론트엔드에도 충분히 적용할 수 있다. 하지만 프론트엔드의 특수성 때문에 백엔드 아키텍처를 그대로 적용하기는 어려울 뿐더러, 비효율적이다. 따라서 핵심 논리를 기반으로 프론트엔드만의, 그리고 해당 프로젝트의 복잡성을 고려한 아키텍처를 구축하는 것이 가장 현실적이고 효율적인 방법일 것이다. 이번 포스팅에서는 필자가 ..
UT(사용성 테스트)로 고객과 가까워지기
UT(사용성 테스트)로 고객과 가까워지기
2024.07.15서비스를 지속적으로 개선하기 위해서는 가설을 세우고, 이를 빠르게 검증하며, 피드백을 바탕으로 개선하는 과정을 반복하는 것이 중요하다. 가장 효과적인 방법은 정량적 데이터를 기반으로 가설을 세우고 빠르게 개발한 후, 다시 데이터를 통해 의사결정을 하는 것이다. 이 방법은 피드백 루프가 가장 빠르기 때문에 효과적이다. 하지만 정량적 데이터 기반의 의사결정을 위해서는 충분한 트래픽, 인프라, 데이터 분석 역량이 필요하다. 특히 사이드 프로젝트의 경우 이러한 환경이 갖춰져 있지 않은 경우가 많다. 이러한 맥락에서 이번에 진행한 사용성 테스트(UT)를 소개하고자 한다. UT는 UXR의 한 기법으로, 개선이 필요한 부분에 대한 가설을 세우거나 개선 후 효과를 확인하는 데 유용하다. UT는 정성적 데이터의 특성상 ..
프론트엔드 렌더링 패러다임의 변화와 의미(ft. RSC, Streaming SSR, PPR)
프론트엔드 렌더링 패러다임의 변화와 의미(ft. RSC, Streaming SSR, PPR)
2024.07.09렌더링 패턴은 DOM을 언제, 어디서 생성할지를 결정하며, 선택된 전략에 따라 사용자 경험에 직접적인 영향을 미치기 때문에 프론트엔드 개발에서 매우 중요한 요소이다. React와 같은 현대 웹 라이브러리의 등장으로, 프론트엔드의 렌더링 방식은 많은 발전을 이루었다. 최근 렌더링 패턴의 발전을 지켜보며 가장 크게 느낀 점은, 렌더링 단위가 페이지 수준에서, 컴포넌트 수준으로 변화하고 있다는 것이다. 사실 프론트엔드 개발이 페이지 단위에서 컴포넌트 단위로 전환된 지는 꽤 오래되었다. 우리는 더 이상 페이지 단위가 아닌 컴포넌트 단위로 작업한다. 그러나 렌더링 패턴은 오랫동안 페이지 단위에 머물러 있었다. React 18에 등장한 RSC와 Suspense의 조합으로 스트리밍 SSR 아키텍처를 구축하거나, Ne..
프론트엔드, 서버로부터 독립을 선포하다(2) - 뷰 모델로 데이터 모델 의존성 줄이기
프론트엔드, 서버로부터 독립을 선포하다(2) - 뷰 모델로 데이터 모델 의존성 줄이기
2024.06.30프론트엔드는 애플리케이션에서 클라이언트 단에 위치하며 비즈니스 로직을 포함한 코드 영역을 말하며, 백엔드는 서버 단에 위치한 코드 영역을 의미한다. 이 두 요소는 각각 독립적으로 변경되고 발전하므로, 대다수의 애플리케이션 개발에서는 물리적으로 분리된 각기 다른 코드베이스를 가지는 경우가 많다. 그러나, 많은 애플리케이션들이 서버에서 데이터를 저장하고 클라이언트에서는 데이터를 캐시 하는 구조를 가지고 있기 때문에, 프론트엔드는 애플리케이션의 목표를 달성하기 위해 필연적으로 서버에 의존적일 수밖에 없다. 그리고 이런 의존성은 프론트엔드 개발과 테스트를 어렵게 하며, 변경에 취약하게 만든다. API 명세는 이러한 의존성을 약하게 만드는 방법이다. 하지만 그 자체로는 충분하지 않다. API 명세를 만드는 데에도..
프론트엔드, 서버로부터 독립을 선포하다(1) - MSW로 개발 및 테스트 의존성 줄이기
프론트엔드, 서버로부터 독립을 선포하다(1) - MSW로 개발 및 테스트 의존성 줄이기
2024.06.26프론트엔드는 애플리케이션에서 클라이언트 단에 위치하며 비즈니스 로직을 포함한 코드 영역을 말하며, 백엔드는 서버 단에 위치한 코드 영역을 의미한다. 이 두 요소는 각각 독립적으로 변경되고 발전하므로, 대다수의 애플리케이션 개발에서는 물리적으로 분리된 각기 다른 코드베이스를 가지는 경우가 많다. 그러나, 많은 애플리케이션들이 서버에서 데이터를 저장하고 클라이언트에서는 데이터를 캐시 하는 구조를 가지고 있기 때문에, 프론트엔드는 애플리케이션의 목표를 달성하기 위해 필연적으로 서버에 의존적일 수밖에 없다. 그리고 이런 의존성은 프론트엔드 개발과 테스트를 어렵게 하며, 변경에 취약하게 만든다. API 명세는 이러한 의존성을 약하게 만드는 방법이다. 하지만 그 자체로는 충분하지 않다. API 명세를 만드는 데에도..
지속 가능하고 효율적인 코드 리뷰를 하는 방법
지속 가능하고 효율적인 코드 리뷰를 하는 방법
2024.06.17아마도 팀 단위의 프로젝트를 경험해본 개발자라면 코드 리뷰를 해본 경험이 있을 것이다. 코드 리뷰는 개발자가 작성한 코드를 다른 동료 개발자들이 검토하는 과정이다. 코드 리뷰는 잘 이루어진다면 코드의 품질을 향상시키고, 예기치 않은 에러를 방지하며, 팀원 간 지식 공유를 활성화하는 아주 유용한 문화가 될 수 있다. 그러나 코드 리뷰 문화를 잘 유지하는 것은 생각보다 쉽지 않다. 코드 리뷰는 시간과 자원이 많이 들 뿐만 아니라, 막상 어떤 부분을 리뷰해야 할지 막연할 수 있기 때문이다. 이런 상황이 계속된다면, 코드 리뷰는 서로 "수고하셨습니다"라는 댓글만 남기는 아무런 의미 없는 피상적인 행동으로 남게 된다. 이번 포스팅에서는 효율적이고 유용한 코드 리뷰 문화를 유지하기 위한 리뷰어와 리뷰이의 역할에 대..
Cypress로 E2E 테스트 작성하기(ft. App action vs Page object model)
Cypress로 E2E 테스트 작성하기(ft. App action vs Page object model)
2024.06.12저번 포스트인 프론트엔드는 무엇을 테스트해야 하는가?에서는 프론트엔드에서의 유닛 테스트와 통합 테스트에 대해 집중적으로 다루었다. 이번 포스트에서는 프론트엔드의 또 다른 테스트 유형인 E2E 테스트에 대해 알아보고, E2E 테스트 도구인 Cypress를 활용하여 필자가 실제 진행 중인 사이드 프로젝트에서 E2E 테스트를 작성해 봄으로써, 이를 통해 E2E 테스트 작성 방법까지 다루어 보려고 한다. 1. 왜 E2E 테스트를 해야 하는가?E2E(End-to-End) 테스트는 애플리케이션의 흐름을 처음부터 끝까지 검증하는 것으로, 앞서 언급한 유닛 테스트와 통합 테스트와는 또 다른 의미를 가진다. 유닛 테스트와 통합 테스트가 개발자 관점에서 개발한 모듈이 정상적으로 작동하는지를 검증하는 반면, E2E 테스트..