미리보기

프로젝트 기간

2023.12 - 2024.01 (약 6주)

구성 인원

FE : 2명 / BE : 3명 / Designer 1명

맡은 역할

• 전체 스타일링 및 애니메이션 구현
• 지도 API 연결 (카카오 Api, Google Api)
• 게시글, 댓글 CRUD 구현
• 성능 최적화
• SEO 최적화
  
  

사용 기술

Vite, Typescript, React, react-query, framer-motion, zustand, styled-components

주요 구현 기능

• 카카오 api, google api를 활용한 지도 페이지 구축 및 장소 검색 시스템 구축
• react-helmet을 활용한 SEO 최적화 진행
• 가상화 리스트를 활용한 DOM 트리 최적화
• 성능 최적화 진행 (폰트 최적화, 이미지 형식 최적화, 코드 스플리팅, 이미지 lazy load)

프로젝트 기간

2024.01 - 2024.01 (약 10일)

구성 인원

개인 프로젝트

프로젝트 주요 구현 기능

• 카카오 api를 활용한 지도 생성 및 마커 생성
• Next.js api route & Prisma를 활용한 api 직접 구축 (CURD, 북마크 기능)
• Recoil을 활용한 지도 전역 상태 관리 적용
• 서울시 공공데이터를 활용하여 supabase로 데이터 시드 작업
• Next-Auth를 활용한 소셜 로그인 (구글, 네이버, 카카오) 구현
  
  

가장 신경 쓴 부분

• Next.js의 page route 와 app route 의 차이점을 학습하는 것이 최종 목표.
• page route로 구현 완료 후 app route로 마이그레이션 작업.
  
  

프로젝트 후 얻은 성과

•Next.js 12와 13의 차이점 학습 및 Next.js의 구조 및 사용법 이해
•Next.js의 api와 Prisma를 활용하여 api 구축에 대한 이해
•Next Auth의 활용법 학습 및 이해
•Recoil의 사용 방법 복습
•tailwind css의 사용 방법 학습

프로젝트 기간

2024.01 - 진행중

구성 인원

개인 프로젝트

현재까지 완성된 프로젝트 주요 구현 기능

• Three.js를 활용한 그래픽 구현
• 입체감 있는 배경 생성
• gsap을 이용한 스크롤에 따른 텍스트 페이드 및 배경 이동 효과
• 조명 및 그림자 반사 효과를 마우스 위치 기반 적용.
• 3d 텍스트 모델링으로 빛에 반사되는 텍스트 구현
• 챗봇 엔터테인먼트 요소
• api 미연동 및 하드코딩으로 완성도 부족 - 추후 개선

프로젝트 기간

2024.02 - 진행중

구성 인원

개인 프로젝트

현재까지 완성된 프로젝트 주요 구현 기능

• wysiwyg 에디터 구현 완료
• github calendar 구현 완료
• open AI를 활용한 블로그 챗봇 구현 완료
• fetch api와 React Server Component에 기반한 리팩토링 완료
• dynamic route의 메타 정보를 활용한 SEO 최적화 적용 완료
• github actions, cypress를 활용한 E2E 테스트 자동화 CI 구현 완료
  
  

배운점

• 다양한 api 엔드포인트 백엔드에 대한 이해도 증가.
• LLM의 입출력과 openAI의 chatgpt 작동 방식 이해
• React ServerComponent 학습
• Next.js의 작동원리 및 캐시 구조에대한 학습.

직책 : 해외 플랫폼 운영 대행 MD / 팀장
주요 성과 : 위메프 해외파트 운영 대행 경험, 개발자와의 협업
경험과 주력 상품 페이지 기획 총괄

직책 : 국내 온라인 MD 사원
주요 성과 : 파이썬 스크래핑, 크롤링을 활용한 데이터 구축 경험