전체 글
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시간 자기 계발에 투자하자"는 다짐을 단 하루도 어기지 않았다는 점에 스스로 높은 점수를 주고 싶다. 물론 힘들지 않았다고 말하면 거짓말일 것이다. 나는 정..
Polymorphic Component를 만들어보자(ft.타입스크립트)
Polymorphic Component를 만들어보자(ft.타입스크립트)
2024.08.04이번 글부터 많은 분들이 주신 피드백을 반영하여 글의 스타일을 변경해 보았습니다. 앞으로도 더 나은 방식으로 도움이 되는 내용을 전달하기 위해 노력하겠습니다. 감사합니다.안녕하세요. 최근에 헤드리스 컴포넌트를 개발하면서, 비즈니스 도메인과 상관없이 재사용 가능하고 유연하게 확장할 수 있는 UI 컴포넌트에 대해 많은 고민을 하고 있는데요. Polymorphic Components(다형성 구성요소)는 호출하는 쪽에서 해당 컴포넌트의 시맨틱 요소를 결정할 수 있게 하는 React 패턴으로, UI 컴포넌트의 재사용성을 높이는 데 매우 유용한 기술이기 때문에 소개해드리고자 합니다. 특히 타입스크립트와 함께 사용하면 안전하고 쉽게 Polymorphic Components를 구축할 수 있어서, 재사용과 확장성이 용이..
복잡한 애플리케이션을 위한 프론트엔드 아키텍처
복잡한 애플리케이션을 위한 프론트엔드 아키텍처
2024.07.20프론트엔드가 점점 복잡해지면서 프론트엔드 코드베이스를 아키텍처 수준에서 구조화하고 관리하는 것의 중요성이 점점 높아지고 있다. 필자도 이 주제에 대해 굉장히 오랫동안 고민해 왔는데, 특히 백엔드와 달리 프론트엔드에는 3-계층 아키텍처나 클린 아키텍처와 같은 정형화된 아키텍처가 없었기 때문이다. 물론 프론트엔드와 백엔드는 소프트웨어의 본질적인 내용을 공유하기 때문에, 여러 아키텍처의 핵심 논리를 프론트엔드에도 충분히 적용할 수 있다. 하지만 프론트엔드의 특수성 때문에 백엔드 아키텍처를 그대로 적용하기는 어려울 뿐더러, 비효율적이다. 따라서 핵심 논리를 기반으로 프론트엔드만의, 그리고 해당 프로젝트의 복잡성을 고려한 아키텍처를 구축하는 것이 가장 현실적이고 효율적인 방법일 것이다. 이번 포스팅에서는 필자가 ..
UT(사용성 테스트)로 고객과 가까워지기
UT(사용성 테스트)로 고객과 가까워지기
2024.07.15얼마 전 과거에 진행했던 사이드 프로젝트를 크게 개선할 기회가 생겼다. 그 프로젝트는 말 그대로 사이드 프로젝트였기 때문에 순수 JavaScript로 React와 비슷한 UI 라이브러리를 직접 만들어 웹사이트를 구축하는 취지로 진행했다. 당시에는 꽤 잘 만들었다는 평가도 받았지만… 현대 웹 라이브러리와 프레임워크들이 얼마나 뛰어난지를 체감할 수 있는 소중한 기회가 되었다. 문제는 그 사이드 프로젝트가 꽤나 사용자가 있어서 늘어나 유지보수가 필요해졌다는 점이었다. 그래서 이전처럼 순수 JavaScript 형태로는 더 이상 운영이 어렵다고 판단했고, 이번 기회에 Next.js 14로 마이그레이션 하기로 결정을 내렸다. 그러다 위기는 곧 기회라고, 이번에 새롭게 개편하면서 기술뿐만 아니라 사용자 경험 측면에서..
프론트엔드 렌더링 패러다임의 변화와 의미(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 명세를 만드는 데에도..
처음으로 사용자의 지갑을 열다(ft. 서비스 출시 후기)
처음으로 사용자의 지갑을 열다(ft. 서비스 출시 후기)
2024.06.22얼마 전 진행 중인 프로젝트에 대해 펀딩 사이트 '텀블벅'에서 펀딩을 진행했고, 6월 20일에 성공적으로 펀딩을 마무리하고 펀딩 참여자들에게 베타 버전 서비스를 전달하는 데 성공했다! 총 62명이 펀딩에 참여해 주었고, 총모금액은 609,234원에 달했다. 노력해준 모든 팀원들에게 정말 감사하다는 말을 전하고 싶다. 사실, 실제 사용자 경험을 바탕으로 소프트웨어를 만드는 것은 이전에도 여러 번 있었고, 그때가 오히려 더 많은 이용자를 기록했다. 하지만 이번 경험이 특별한 이유는 처음으로 내가 만든 소프트웨어를 돈을 받고 판매한 것이기 때문이다! 모두가 알겠지만, 사용자가 지갑을 연다는 것은 정말 어려운 일이다. 좋은 제품, 기획, 마케팅이 모두 집중되어 사용자를 설득해야만 가능한 일이다. 나는 개발 팀장..
나는 왜 개발자가 되었는가?(2) - 뛰어난 집념과 끈기로 문제를 해결하는 개발자가 되다
나는 왜 개발자가 되었는가?(2) - 뛰어난 집념과 끈기로 문제를 해결하는 개발자가 되다
2024.06.21어떻게 이렇게 지금 이 글을 쓰게 되었는지 잘 모르겠다. 오늘도 평소와 다를 것 없는 일상적인 하루였기 때문이다. 오늘도 진행 중인 프로젝트를 계속하고, 늦은 새벽 꾸준히 실천하고 있는 '매일 배포'를 완료한 후 잠시 기지개를 켜고 있었던 중이었다. 그러다 문득 지금 내가 느끼고 있는 감정을 돌아보게 되었고 '내가 이 일을 좋아하고 있구나'라는 생각이 들었다. 몸은 확실히 피로했지만, 분명 나는 즐기고 있었고 만족감과 보람을 느꼈다. 서비스 출시를 앞두고 잦은 밤샘과 강한 스트레스를 받고 있는 상황을 고려하면, 이는 비정상적인 일이었다. 어떻게 된 일일까? 대학교에 입학하여 프로그래밍을 접한 후, 대학교를 4년 동안 졸업하고 군 전역을 앞두고 있으니 이 일을 시작한 지 약 6~7년이 지났다. 누군가 보기..
나는 왜 개발자가 되었는가?(1) - 직업의 의미와 성장에 대한 열망
나는 왜 개발자가 되었는가?(1) - 직업의 의미와 성장에 대한 열망
2024.06.21어떻게 이렇게 지금 이 글을 쓰게 되었는지 잘 모르겠다. 오늘도 평소와 다를 것 없는 일상적인 하루였기 때문이다. 오늘도 진행 중인 프로젝트를 계속하고, 늦은 새벽 꾸준히 실천하고 있는 '매일 배포'를 완료한 후 잠시 기지개를 켜고 있었던 중이었다. 그러다 문득 지금 내가 느끼고 있는 감정을 돌아보게 되었고 '내가 이 일을 좋아하고 있구나'라는 생각이 들었다. 몸은 확실히 피로했지만, 분명 나는 즐기고 있었고 만족감과 보람을 느꼈다. 서비스 출시를 앞두고 잦은 밤샘과 강한 스트레스를 받고 있는 상황을 고려하면, 이는 비정상적인 일이었다. 어떻게 된 일일까? 대학교에 입학하여 프로그래밍을 접한 후, 대학교를 4년 동안 졸업하고 군 전역을 앞두고 있으니 이 일을 시작한 지 약 6~7년이 지났다. 누군가 보기..
지속 가능하고 효율적인 코드 리뷰를 하는 방법
지속 가능하고 효율적인 코드 리뷰를 하는 방법
2024.06.17아마도 팀 단위의 프로젝트를 경험해본 개발자라면 코드 리뷰를 해본 경험이 있을 것이다. 코드 리뷰는 개발자가 작성한 코드를 다른 동료 개발자들이 검토하는 과정이다. 코드 리뷰는 잘 이루어진다면 코드의 품질을 향상시키고, 예기치 않은 에러를 방지하며, 팀원 간 지식 공유를 활성화하는 아주 유용한 문화가 될 수 있다. 그러나 코드 리뷰 문화를 잘 유지하는 것은 생각보다 쉽지 않다. 코드 리뷰는 시간과 자원이 많이 들 뿐만 아니라, 막상 어떤 부분을 리뷰해야 할지 막연할 수 있기 때문이다. 이런 상황이 계속된다면, 코드 리뷰는 서로 "수고하셨습니다"라는 댓글만 남기는 아무런 의미 없는 피상적인 행동으로 남게 된다. 이번 포스팅에서는 효율적이고 유용한 코드 리뷰 문화를 유지하기 위한 리뷰어와 리뷰이의 역할에 대..