728x90
반응형
source-code
- 지속 가능한 프론트엔드 단위 테스트 작성법 1. 프론트엔드는 테스트가 필요 없다?!프론트엔드 단위 테스트는 항상 논쟁의 중심에 있습니다. 프론트엔드 애플리케이션의 복잡성과 중요성이 증가하면서 단위 테스트의 필요성을 주장하는 목소리가 점점 늘어나고 있습니다. 하지만 자주 변경되는 UI와 그로 인해 쉽게 깨져버리는 테스트 코드들을 보며 프론트엔드에서의 단위 테스트가 불필요하고 비효율적이라는 비판도 여전히 거셉니다. 저는 여러 프론트엔드 프로젝트 경험을 바탕으로 단위 테스트는 반드시 필요하다는 결론에 도달했습니다. 단위 테스트는 코드를 안전하게 리팩토링하고, 코드 품질을 유지하며, 오류를 사전에 예방할 수 있는 중요한 수단입니다. 코드베이스가 커지고 협업 인원이 늘어날수록 단위 테스트를 통해 코드 수정 시 발생할 수 있는 문제를 사전에 방지해야만 하며.. 2024.10.09
- next.js에 FSD 폴더 구조 패턴 적용하기 Backgrounds최근 Next.js 프로젝트에 Feature-Sliced Design(FSD) 패턴을 도입하게 되었습니다. FSD는 프론트엔드 프로젝트에서 모듈들의 레이어(layer)를 명확히 구분하고, 상위 레이어와 하위 레이어 간의 의존성 방향을 명확히 하여 모듈 간 결합도를 낮추고 변경 사항이 어디까지 영향을 미칠지 예측 가능하게 만들어줍니다. 이를 통해 유지 보수성이 크게 향상된다는 장점이 있습니다.(자세한 설명은 이전 글을 참고해주세요) 하지만 Next.js와 FSD 패턴을 함께 사용하다 보니, 일부 컨벤션에서 충돌이 발생하게 되었고, 그 과정에서 몇 가지 문제점과 해결책을 찾아야 했습니다. 이번 글에서는 제가 겪었던 문제들과 이를 해결한 방법을 공유하려 합니다. 1. app 폴더 네이밍 충.. 2024.09.24
- FrontEnd 개발자가 가장 빠르게 서비스를 구축하는 방법 Introduction웹 애플리케이션을 구축하는 것은 복잡한 작업이 될 수 있지만, 최근 몇 년간 등장한 기술 스택 덕분에 개발 속도를 크게 향상할 수 있는 방법들이 많아졌습니다. 프론트엔드 개발자들은 주로 JavaScript 또는 TypeScript에 익숙한데, 최근에는 서버와 클라이언트 모두 JavaScript로 통합할 수 있는 환경이 마련되면서 프론트엔드 개발자가 웹 전체를 빠르게 구축할 수 있는 강점을 갖추게 되었습니다. 실제로 얼마 전, 저는 부산 지역의 사설 도서관들의 도서 관리 서비스를 구축해야 했습니다. 각 사용자 별 계정을 생성하고, 해당 계정이 속한 도서관에 접근해 도서를 추가하고 삭제할 수 있어야 했으며, 사용자들이 저장된 도서 정보들을 검색할 수 있어야 했죠. 즉 웹 애플리케이션의 .. 2024.09.08
- VCP를 통해 Next.js ↔ AWS RDS 안전하게 연결하기 BackgroundsNext.js를 사용하여 애플리케이션을 개발한 후, AWS Amplify를 통해 배포하는 과정을 진행했습니다. 이 과정에서 RDS(Relational Database Service)를 사용하여 데이터베이스를 설정하고, Next.js의 서버 컴포넌트에서 데이터를 조회하고 생성하는 기능을 구현했습니다. import React from 'react'; import { Pool } from 'pg'; const pool = new Pool({ user: process.env.DB_USER, host: process.env.DB_HOST, database: process.env.DB_DATABASE, password: process.env.DB_PASSWORD, port: process.env.. 2024.08.25
lean
- 24.10.06~24.10.13 업무 공유통계 조회 기능 개발실행한 가이드의 통계를 보고 싶다는 요구사항이 생겼다.이전 기업과의 POC 과정에서 로그 수집 기능을 추가한 덕에, 로그 데이터 자체는 이미 존재하는 상황.따라서 관리자 페이지에서 수집된 로그를 보여주기만 하면 되었다. 필요한 정보는 1) 어떤 가이드의 2) 어떤 스텝이 3) 몇 번 실행되었는지 정도.크게 복잡한 데이터도 아니고, 이를 차트 형태로 풀어내기에는 스텝의 이름을 한눈에 알아보지 못해 오히려 불편하단 생각이 들었다.그래서 일단 테이블 형태로 노출 수와 이탈률을 보여주자는 결론을 냈고, 이를 구현했다. 통계 테이블 자체는 크게 어려움이 없었다.특정 버전에 대한 스텝 노출 수가 매핑된 데이터를 BE에서 반환하면이를 FE에서 버전 내 스텝에 연결 짓고, 노출 수 / 이..
- 24.09.29~24.10.06 업무 공유허브 기능 개발고객사에서 생성한 가이드들을 통합 관리하는 허브 기능을 개발했다.정확히는 허브 내에 들어갈 가이드 버전을 제어하고, 선택하는 기능!제법 복잡한 데이터 상태를 관리해야 했는데, 각 도메인 feature별 util 함수로 이를 제어했다.즉, 각 상태를 제어하는 사용처에서 도메인 논리를 구현하는 것이 아닌해당 feature내에 업데이트 함수들을 작성하고(순수함수 형태), 이를 사용처에서 불러와 작성하는 형태. 이때 util 함수들은 외부에 대한 의존성이 존재하지 않는 순수함수 형태로, 오직 도메인 정책(비즈니스 로직)만 구현한 형태였는데단위 테스트를 작성하기도 좋고, 사용처에서 사용하기도 쉽고 간단해 좋았다. 버전 덮어씌우기 오류 수정신규 고객사에서 각 가이드 별로 수집된 통계를 빠르고..
- 24.09.08~24.09.29 업무 공유버전 관리 기능 개발여느 Saas와 마찬가지로, 우리 서비스의 고객사들 역시 실제 프로덕션 환경에서의 안정성을 무엇보다 중시했다.대부분 제품 도입 전 자신들의 개발 환경에서 테스트(QA)를 진행하고 싶어 했는데...도입 전에는 필요가 없지만, 한번 우리 서비스를 도입한 이후 변경사항이 발생한 경우에는, 이 변경사항이 프로덕션 환경에는 반영되지 않아야만 했다. 이전 script 형태로 제공하던 버전에서는 이러한 환경 별 구분을 위해 "실행 환경"이라는 개념을 추가했었다.관리자 페이지에서 각 고객사 별로 자신들의 실행 환경을 추가하고, 해당 실행 환경 별로 변경 사항을 차례차례 적용할 수 있는 구조. 하지만 가이드 구조 개선과 함께, 제공 방식을 SDK로만 우선적으로 제한하면서 기존의 실행 환경 개..
728x90
반응형