Frontend Platform Engineer

2023.12 - 현재

Projects Experience.

Flick-Pick (2024.06 - now)

취향에 맞는 영화를 찾고 리뷰를 남기는 커뮤니티입니다.

Skills.

*TypeScript, Next14, Prisma, Supabase, Tailwind-css*

Links.

https://github.com/H0onnn/Flick-Pick | https://flick-pick-iota.vercel.app/

Description.

• Next app router, prisma orm, supabase를 사용한 풀스택 1인 개발
  • Next의 ServerAction과 RouteHandler를 활용하여 백엔드 로직을 구축하였습니다.
  • 90% 이상의 API 통신이 서버 측에서 이루어지도록 구현하여 서버와 클라이언트 간의 waterfall을 방지했습니다.
• 모바일 유저를 고려한 완벽한 반응형 웹 지원
  • Tailwind를 사용해 스타일링 했으며, 모바일 환경에서의 UI/UX를 깊게 고민해볼 수 있는 계기가 되었습니다.
• 리액트 cache 함수를 사용한 API 호출 최적화
  • 별도의 라이브러리를 사용하지 않고 내장 함수를 이용하여 프로젝트의 번들 사이즈를 최대한 줄여보고자 했습니다.
  • cache 함수를 사용해 API 호출을 최소화 하고, data를 prefetch해 렌더링 속도를 개선했습니다.
• Next Image 컴포넌트를 활용한 최적화
  • Image 컴포넌트의 placeholder와 blurDataUrl 속성을 활용하여 렌더링 속도를 개선하고, 레이아웃 시프트를 최대한 방지했습니다.
• 리액트 최신 문법의 학습 및 활용
  • 새롭게 등장한 use, useTransition, useOptimistic 등 다양한 기술들을 학습하고, 이를 프로젝트에 적용했습니다.
  • 이는 다양한 기술을 적재적소에 맞게 적용하기 위해 깊게 고민해볼 수 있는 계기가 되었습니다.

맛이슈 (2023.05 - 2023.06)

다양한 연령층의 사용자가 모여 자신만의 레시피를 공유하는 플랫폼입니다.

Links.

https://github.com/H0onnn/MatIssue | https://www.matissue.com/

Skills.

*TypeScript, Next, Recoil, Styled-components*

Description.

• 사용자 접근성을 고려한 개발
  • 다양한 기기에서 원활한 사용이 가능하도록 반응형 웹을 적용했습니다.