전체 글
주니어 프론트엔드 개발자의 함께 자라기 - 신뢰는 실력보다 먼저 와야 한다
주니어 프론트엔드 개발자의 함께 자라기 - 신뢰는 실력보다 먼저 와야 한다
2025.06.01안녕하세요. 정말 오랜만에 블로그 글을 남기네요. 저는 그동안 취업을 해서 프론트엔드 개발자로 커리어를 이어가고 있습니다. 벌써 일을 시작한 지 5개월 정도가 되어가는데요, 오늘은 제가 현업에서 일하면서 느낀 가장 중요한 가치인 ‘신뢰’에 대해 이야기해보려 합니다. 주니어 개발자라면 누구나 ‘성장’에 대한 갈증이 있을 거라 생각하는데요. 저는 성장을 단순화해보면 ‘기회 → 피드백 → 개선’의 반복이라고 생각합니다. 즉, 주니어가 성장한다는 건 결국 어떤 일에 도전하고, 그 결과에 대한 피드백을 받고, 그걸 통해 다음엔 더 잘하게 되는 과정을 반복하는 것이죠. 그런데 이 기회도, 피드백도 신뢰가 없는 환경에서는 자라기 어렵습니다. 아무리 열정과 실력이 있어도 신뢰가 없다면 중요한 일을 맡기기 어렵고, 피드..
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`는 코드베이스를 최신 안정 버전이나 사..
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 테스트..
프론트엔드에서 로깅은 왜 필요할까?(ft. 의존성 주입과 선언형 프로그래밍)
프론트엔드에서 로깅은 왜 필요할까?(ft. 의존성 주입과 선언형 프로그래밍)
2024.06.04모든 소프트웨어는 비즈니스를 위해 존재한다. 특히, 프론트엔드는 사용자와 가장 밀접하게 연결되어 있으므로, 비즈니스 로직 외에도 비즈니스 관련 요구사항을 처리해야 하는 경우가 많다. 이 중에서 대표적인 것이 바로 로깅이다. 로깅이 필요한 이유는 간단하다. 더 나은 비즈니스 결정을 내리기 위함이다. 비즈니스를 구체화하면서, 추상적인 개념들이 구체화되어 특정 기준을 정해야 하는 경우가 많다. 초기에는 사람의 감각에 의존할 수밖에 없지만, 비즈니스가 계속되면서 감각에만 의존하는 것은 위험성이 매우 크다. 따라서, 의사결정에 도움이 될 데이터를 수집하기 위해 로깅이 필요한 것이다. 따라서 로깅은 직접적인 비즈니스 로직은 아닐지라도, 비즈니스 성공과 직결된 매우 중요한 요소이다. 로깅에는 다양한 종류가 있지만, ..