미리보기

Project

• 영재 교육 플랫폼 어드민 전체 개발 및 서비스 페이지 일부 개발

  • 회원 관리 페이지

  • 결제 관리 페이지

  • 컨텐츠(교재, 강의) 관리 페이지

• 법률 신문 - 외국 변호사 대관 페이지 개발

• 청년이어드림 어드민 페이지 개발

  • 폼 데이터 관련 트러블 슈팅

• 애니메이션 제너레이터 툴 개발

  • 애니메이션 관련 트러블 슈팅

  • VueJS Dom 조작 관련 트러블 슈팅

짧은 기간내 프론트엔드 개발자(인턴)로서 프로젝트 두 가지를 경험했습니다.

첫 번째는 기존에 진행하던 CRM 프로젝트에서 기능 개발을 경험했습니다.

두 번째는 회사 직원의 근태관리를 포함한 모든 직원과 지점을 관리할 수 있는 직원 관리 시스템을 프로젝트 기획부터 참여했습니다.

Experience

• 주도적으로 코드 리뷰 도입

새로운 프로젝트를 진행하며 인턴들 간의 코드 리뷰를 주도적으로 도입하였습니다.
에러 유무 확인 및 pr 머지를 위한 리뷰가 아닌 -> 컨벤션을 체크하고 코드를 실행해보며 구체적인 코드 리뷰로 진행

• 에러 처리 핸들링

예외 처리를 위해 토스트 메시지를 도입하고 사용하면서 에러의 전파에 대해 고민했고 전역적인 에러 처리와 상세 에러처리를 나누어 처리했습니다.

매일 CPO님과 개발자분들과 스크럼을 진행하며 애자일 방식으로 개발하는 기업의 문화를 경험했습니다.

빠르게 개발하는 조직의 문화 속에서 의사소통과 문서화의 중요성을 배웠으며 이 후 회사 적응하는데 도움이 될 것이라 생각합니다.

Description

영재 교육을 위한 교육 플랫폼의 어드민과 서비스의 일부 기능을 담당해 개발했습니다.

• 회원 관리 페이지 / 문의 페이지 / 결제 관리 페이지 / 교재 관리 페이지 등 서비스 관리에 필요한 어드민 페이지 제작

• 서비스 페이지의 1:1 문의 등록 및 공지사항 페이지 제작

Experience

• 페이지 별 토스트 컴포넌트 - 최상단 하나의 토스트 컴포넌트로 리팩토링
  토스트 사용하는 컴포넌트마다 토스트 컴포넌트를 매번 선언하도록 구현되어 있던 코드에서 최상단에서 선언 및 호출 시 id를 전달해 각각 다른 toast ui를 처리하도록 수정

• 사진 업로드 및 업로드 실패한 이미지 처리

  
  기존에는 여러 개의 이미지를 올릴 때 실패한 이미지가 있으면 이 후 모든 요청이 실패되어 모든 이미지 업로드가 실패한 것 처럼 데이터 불균형이 일어났던 코드에서 Promise.allSettled 함수를 이용해 여러 개의 이미지 처리 및 각 이미지의 성공 실패 여부를 통해 업로드 실패한 이미지는 재시도 가능하게 처리해 UX 개선

Tech Stack

React Redux-Toolkit

RESULT

푸디풀 배포 사이트

푸디풀 깃허브

DESCRIPTION

한식 디저트 판매 및 한식 디저트 수업을 위한 예약이 가능한 쇼핑몰 사이트를 개발했습니다.

프론트엔드 전체와 백엔드 전체를 단독 개발하면서 전체적인 개발 프로세스에 대해 자세히 알 수 있었습니다.

• JWT를 이용한 로그인 기능

• 달력을 이용한 예약 기능

• Portone 결제 시스템을 이용한 결제 기능

• Naver SMS Api를 이용한 문자 인증 기능

• 상품 및 클래스 CRUD 기능

• 댓글 및 대댓글 기능

EXPERIENCE

JWT를 이용한 로그인 기능 개발

• 쿠키, 세션, jwt 토큰에 대한 이해를 바탕으로 로그인 기능 개발

AWS의 S3스토리지, EC2 기능 사용

• S3 스토리지를 이용해 사진 저장

• EC2를 이용해 프론트엔드, 백엔드 배포

NestJS와 PostgreSQL을 이용한 백엔드 개발

• Type ORM인 prisma 도입

• 전체 DB 설계 및 API 개발

Docker와 Github Action을 이용한 CI/CD

Nginx를 이용한 호스팅 처리 및 SSL 인증

presigned url을 이용한 서버 부하 감소

• 프론트에서 상품 추가 시 백엔드에 저장하지도 않는 무거운 이미지 파일을 전달해야 하는 단점을 발견해 백엔드 서버로 요청을 보내고 백엔드 서버에서 aws와 통신을 통해 업로드가 가능한 사진이라면 presigned url을 응답, 프론트에서 사진을 S3로 직접 업로드 하는 방식으로 구현
  -> 무거운 파일을 전달하지 않아도 됨으로써 업로드 시간 2000/ms에서 1500/ms로 25% 감소

DB 조회 성능 개선

• 전체 상품을 조회한 후 각 상품에 대해 현재 사용자가 좋아요를 눌렀는지 확인하는 로직으로 조회했을 때 product의 개수만큼 favorite-product 테이블에 쿼리를 날리기 때문에 상품의 개수가 증가할수록 데이터베이스에 부하를 줄 수 있다는 단점을 발견해 유저가 좋아요 누른 상품을 먼저 조회 후 전체 상품과 비교하는 로직으로 수정
  -> 조회 시간 37ms 30ms 0.7ms 단축

이미지 포맷 변경으로 웹 성능 향상

• 이미지 포맷 avif가 더 높은 압축률과 좋은 화질을 지원해서 avif로 포맷 설정했지만 LCP 4300ms로 매우 느림.
  -> webp로 변경 후 LCP 3000ms 으로 웹 성능 30% 개선

Tech Stack

React NextJS React-Query Jotai NestJS PostgreSQL Docker

RESULT

이길로그 배포 사이트

이길로그 깃허브

DESCRIPTION

지도를 기반으로 장소와 코스를 기록하는 SNS 기반 서비스입니다.

지도 기능 / 마이페이지 기능 / 네이버, 구글 OAuth 로그인 / 알림 기능 / 장소 상세, 수정 / 코스 수정 시 지도에 경로 표시 기능을 담당했습니다.

EXPERIENCE

지도 기능 개발

• Geolocation를 이용한 현재 위치 표시

• 네이버 지도 API를 이용한 주변 장소 표시

• 네이버 지도 API를 이용한 지도에 경로 표시

Server Sent Event 알림 기능 개발

• 양방향 통신에 유용하고 로직이 복잡한 단점이 있는 웹소켓 방식, 클라이언트의 주기적인 요청을 이용한 폴링 방식을 비교 후 클라이언트에서 서버와 연결하면 구독 형식으로 작동하는 Server Sent Event를 이용해 알림 기능 구현
  -> 단방향 통신으로 불필요한 연결을 줄여 서버 부하 감소 및 기능 개선

MSW를 이용한 API 모킹

• SSR 요청과 CSR 요청이 모두 가능하게 MSW 환경 설정

네이버 및 구글 OAuth 로그인

• 반복되는 부분을 공통 함수로 정의해 가독성 및 코드량 개선

Zod 라이브러리를 이용한 타입 검증

Fetch 내장 함수를 이용한 캐싱 및 재검증

• 기존에 캐싱 및 새로운 요청에 대한 재검증을 axios 및 tanstack-query 이용했지만 next14의 fetch의 cache 기능을 이용해 캐싱 기능 사용 및 revalidate 기능을 이용해 재검증 구현
  -> 외부 라이브러리 사용 감소로 의존성을 줄여 유지보수의 용이성을 높이고 배포 용량을 줄임

Tech Stack

React NextJS React Context API Zod MSW Docker

RESULT

렌시스 배포 사이트(현재 서버 닫힘)

렌시스 깃허브

DESCRIPTION

기업의 요구사항을 분석해 성능 개선과 UX 개선 목적으로 참여한 팀 프로젝트로
UX/UI 디자이너, 백엔드 개발자, 프론트엔드 개발자(3명)와 함께 개발했습니다.

메인 페이지 상품 조회 / 장바구니 및 즐겨찾기 추가 / 이벤트 조회 및 쿠폰 발급 / 공지사항 기능을 개발했습니다.

EXPERIENCE

Lazy loading으로 성능 개선

• 사진이 많은 렌즈 사이트 특성을 고려해 Intersection Observer Api를 이용한
  lazy loading 도입해 메인 페이지의 첫 화면 불러올 때의 속도를 높여 FCP 3s 2.5s 약 17% 성능 개선

Prefetch를 이용한 성능 개선

• pagination을 구현하면서 React-query의 prefetch 기능을 이용해

  상품 로딩 시간 단축 및 캐싱 처리

Tech Stack

React React-Query Recoil

RESULT

안전해 배포 사이트

안전해 깃허브

DESCRIPTION

지역을 선택해 가고싶은 해수욕장을 찾고 찾은 해수욕장의 상태, 수질, 날씨를 확인할 수 있는 웹사이트입니다.

지도에서 클러스터 및 마커를 이용해 궁금한 해수욕장을 선택할 수 있으며 로그인을 통해
해수욕장에 대한 후기를 남길 수 있습니다.

EXPERIENCE

Kakao Map Api를 이용해 지도 표시

• 줌 인/아웃에 따른 클러스터 기능

• 마커 기능을 이용해 해수욕장 위치 표시

공공 API와 Open Weather Map Api를 가공해 해수욕장 정보 표시

Firebase를 이용한 로그인 기능과 댓글 정보 저장

• Firebase 인증 기능을 이용한 로그인 기능 구현

• Firebase firestore을 이용한 유저 정보 및 댓글 db 저장

Tech Stack

React Redux toolkit Kakao map Firebase

원티드 프리온보딩 FE 챌린지 9월 강의 중에 약 15분정도의 시간을 부여받아 약 200명 정도의 수강생 앞에서 SPA, CSR, SSR 을 주제로 발표를 진행했습니다.

발표를 위해 자료를 만드는 과정에서 정확한 정보 전달을 위해 노력했습니다.

공식 문서와 공식 영상을 찾아보며 신뢰성 있는 정보를 바탕으로 발표 자료를 준비했습니다.

발표를 준비하며 과거의 웹 페이지는 어떤 방식으로 동작했는지, 어떤 이유로 SPA가 등장했는지, CSR과 SSR의 차이점이 무엇이고 어떤 상황에서 사용해야 하는지 구체적으로 알게 되었습니다.