미리보기

기본 정보

이름

서유덕

직업

프론트엔드 개발자

간단 소개

기획부터 개발, 배포, 운영까지 실제 서비스를 구축하고 개선해본 경험이 있습니다. • React와 Next.js, TypeScript를 활용해 다수의 토이 프로젝트를 개발한 경험이 있습니다. • AWS S3, CloudFront(CDN), Lambda 를 활용한 정적 및 동적 리소스 배포 경험이 있습니다. • 사용자 피드백을 기반으로 지속적인 개선 작업을 진행하며, 서비스를 최적화하고 있습니다.

기술 스택

React, Next.js, TypeScript, JavaScript, redux-toolkit, react-query, zustand, styled-components, AWS

자기소개

다양한 프로젝트를 진행하며 겪은 기술적 어려움과 해결 경험을 개인 블로그에 자세히 기록하여 정리하고 있습니다.

이를 통해 배운 내용을 체계적으로 정리하여, 다른 개발자들과 공유할 수 있도록 노력하고 있습니다.

개인 블로그

프로젝트

프로젝트명

잇핏

소속/기관명

개인

프로젝트 기간

2024.09. ~ 진행 중

프로젝트 내용

매일 식단과 운동을 기록하며 맞춤형 체중 관리를 도와주는 애플리케이션 개발

깃허브 : https://github.com/uudeok/eat-fit
배포URL : https://eat-fit.net

Frontend: Next.js, TypeScript, Tanstack Query, Zustand
Backend: Supabase
Deployment: AWS S3, CloudFront, Route53, Lambda, API Gateway, ACM

Next.js 서버리스 배포 및 CI/CD 구현 (AWS Next.js 도식화 첨부)

S3, CloudFront, Lambda 를 활용해 서버리스 아키텍처 구현
GitHub 코드 푸시 이벤트 발생 시 CodePipeline이 자동으로 빌드 및 배포 프로세스를 자동화
수동 배포에서 자동화 배포로 전환하여 안정적이고 일관된 배포 환경을 구축
관련 블로그 상세 기록

개발 생산성 향상을 위한 테스트 도구 제작

특정 단계를 테스트하거나 디버깅할 때의 비효율성을 해결하기 위한 도구 개발
Mermaid.js 를 활용해 단계별 흐름을 시각적으로 나타내고 각 단계를 클릭으로 이동할 수 있도록 하여 직관적이고 빠른 테스트와 디버깅 가능
개발 모드에서 테스트 및 탐색 과정을 단축시켜 개발 생산성을 크게 향상
관련 블로그 상세 기록

브라우저 저장소(로컬,세션, 쿠키) 통합 인터페이스 설계

로컬스토리지, 세션스토리지, 쿠키 등 저장소마다 각기 다른 방식으로 데이터를 관리해야 하는 어려움
공통 로직을 추상화하고, 세부 구현은 내부에서 처리하도록 통합된 인터페이스 설계
팩토리 패턴을 사용해 저장소 객체를 중앙에서 관리, useCache 훅을 도입하여 데이터 호출을 간편하게 처리
관련 블로그 상세 기록

Fetch API 커스터마이징을 통한 반복 작업 최소화

Next.js 의 캐싱 기능을 활용하기 위해 Fetch API 를 사용하여 네트워크 요청 수행
매번 URL, 헤더 설정 및 에러 처리 등의 반복 작업이 동반돼 코드 중복과 관리의 어려움 발생
Fetch API를 인스턴스화하여 공통 설정을 사전 정의하고, 요청/응답 인터셉터를 구현하여 공통 로직 처리 및 에러 핸들링을 중앙에서 관리
커스터마이징된 Fetch 도입 후 중복 코드를 약 40% 감소시켜 코드의 가독성과 유지보수성 향상
관련 블로그 상세 기록

서버-클라이언트 결합도를 줄이기 위한 데이터 처리 구조 개선

Supabase를 이용한 백엔드 작업 중, Supabase 호출 로직이 클라이언트에 작성되어 서버-클라이언트 간 높은 결합도가 문제로 발견됨
Next.js Route Handler 로 서버 호출 로직을 서버측으로 이동시켜, 클라이언트 코드와 서버 변경 간 영향을 최소화하도록 구조를 개선
서버 응답 데이터를 클라이언트 요구 사항에 맞게 변환하는 계층을 도입해 클라이언트가 독립적인 데이터 구조를 확보하고 UI 로직과 서버 구조의 변경 간 영향을 최소화
관련 블로그 상세 기록