미리보기

대학생을 위한 일정관리 자사서비스인 캘박과 외주프로젝트의 프론트구축을 하고있습니다.

주로 React와 Next.js를 활용해 웹사이트를 구축하며, 퍼블리셔로서의 경험을 바탕으로 세심한 UI 구현에 집중하고있습니다. 특히, 다양한 인터랙션과 애니메이션을 통해 사용자 경험을 풍부하게 하고, 생동감 있는 웹사이트를 만드는 데 기여하고있습니다.

카페24 플랫폼을 활용해 이커머스 사이트를 제작하였으며, 클라이언트의 요구사항을 반영하기 위해 긴밀하게 소통하며 필요한 기능을 개발했습니다. 초기 멤버로서 기획과 디자인 단계부터 프로젝트에 참여해 개발까지 전 과정을 함께하며, 서비스의 방향성과 완성도에 책임감을 갖고 기여했습니다.

1. 커뮤니티 페이지 개발

• 좋아요 기능 및 무한 스크롤 구현:

  • 낙관적 업데이트를 통해 좋아요 클릭 시 즉각적인 UI 반영을 구현, 사용자가 버튼을 클릭한 후 서버 응답을 기다리지 않고 빠른 피드백 제공했습니다

  • 무한 스크롤 구현 시, Intersection Observer를 활용하여 새로운 콘텐츠 로딩을 사용자의 스크롤 위치에 맞춰 효율적으로 관리했습니다.

  • 페이지 로딩 시간과 서버 요청을 줄이기 위해 스켈레톤 로딩을 적용하여 로딩 상태를 직관적으로 표현, 사용자 경험을 향상시켰습니다

• API 최적화:

  • stale time 설정을 통해 불필요한 API 호출을 줄이고, 캐시된 데이터를 일정 시간 동안 재사용하여 서버 부하를 감소.

  • 서버 요청 시, 데이터 업데이트를 최소화하고, 사용자 대기 시간을 단축시켜, 클라이언트 성능 최적화하였습니다.

• 사용자 경험 개선:

  • 빠른 로딩과 에러메세지, 로딩스피너와 같은 직관적인 피드백을 통해 사용자 만족도를 높였으며, 서버 요청 비용을 절감했습니다.

  • 무한 스크롤 및 좋아요 기능을 통해 동적 콘텐츠 처리와 실시간 상호작용을 개선하여 사이트의 반응성과 안정성을 높였습니다.

이와 같은 경험을 통해 효율적인 데이터 처리와 사용자 경험 최적화에 대한 깊은 이해를 얻었으며, 실제 프로젝트에서 실용적인 해결책을 구현할 수 있었습니다.

2. 친구추천 이벤트 개발

• 포트원 본인인증 API를 활용하여 실시간 본인 인증 처리 및 에러 핸들링 구현했습니다

• 딥링크를 사용해 추천인 코드 자동 인식 및 이벤트 참여 페이지로 리다이렉트시켰습니다.

• REST API를 통해 추천인 코드 및 이벤트 참여 데이터를 서버와 클라이언트 간 빠르게 동기화하여, 사용자 입력에 즉각 반영되는 UI를 구현하였습니다

React 기반 JavaScript 프로젝트를 TypeScript로 점진적으로 마이그레이션하여 유지보수성과 타입 안정성을 크게 향상시킨 경험이 있습니다.
마이그레이션 과정에서 다양한 타입 오류를 해결하며 TypeScript의 타입 시스템, 제네릭, 유틸리티 타입에 대한 실전 감각을 키웠습니다.

외부 라이브러리의 타입 정의가 누락된 경우 @types 패키지를 직접 설치하거나, declare module 을 활용해 타입을 수동 정의하였고,
복잡한 Props 구조는 공통 타입 유틸을 정의하고 interface 또는 type 을 별도 파일로 분리하여 일관된 타입 관리를 적용하였습니다.

외주프로젝트인 딥마인드 플랫폼의 홈페이지와 어드민을 개발하였습니다.

특히 Next.js의 Incremental Static Regeneration (ISR)을 활용하여 유튜브 API 요청 비용을 절감하는 전략을 구현했습니다.
유튜브 API는 일정 횟수를 초과하면 비용이 부과되는 구조로, ISR을 사용하여 서버에서 데이터를 일정 주기로만 요청하도록 하여 12시간마다 데이터를 재검증하고 이를 캐시로 제공함으로써 불필요한 API 호출을 최소화했습니다.
이를 통해 API 비용을 절감하고, 페이지 로딩 속도를 개선하며, 서버 부하를 줄이는 성과를 얻었습니다.

• 화려한 인터렉션과 애니메이션을 활용해 사이트 구축 ( 홈페이지 )

• Nodemailer를 활용하여 SMTP 기반 메일 전송 로직을 구성

  • 외부 메일 서버와의 통신을 위해 SMTP 프로토콜의 동작 흐름을 이해하고, 이에 따라 transport 객체를 생성해 인증 정보를 포함한 SMTP 설정을 적용했습니다. 또한 메일 전송 성공 여부를 명확하게 확인하고, 실패 시에는 에러 메시지를 로깅 및 대응하도록 처리하였습니다.

• 그외 패밀리사이트 (에이비엠랩 채용 / 디자인랩 )

그로우핏(GrowFit) 그로우핏은 소아비만 예방 및 관리를 위한 부모와 아이가 함께 사용하는 건강 관리 서비스입니다.

[기여도]

• 스토리북을 이용한 공통 컴포넌트 작업 (Website)

• 브랜치전략도입

• 프로젝트 셋업 (초기세팅, 보일러플레이트 구성등)

• FE 작업 (Website)

  • 공통컴포넌트작성 (헤더, 네비게이션등)

  • 목표설정 페이지

깃허브링크

실무에서 성능 최적화 작업을 효과적으로 수행하기 위해, 의도적으로 성능을 저하시킨 코드를 작성한 후 다양한 최적화 기법을 적용하는 실험을 진행하였습니다.

이 과정에서 Virtual Scroll, Lazy Loading, Code Splitting, Memoization 등의 기법을 직접 구현하여 성능 차이를 비교하고, 개선 효과를 측정하였습니다. 성능 측정은 Lighthouse를 활용하였으며, 개선 과정과 성능 변화 데이터를 README에 기록하여 최적화 적용 전후의 차이를 명확히 분석하였습니다.