미리보기

Description

멀티플레이와 랭킹 시스템이 있는 웹앱 게임. (Github)

Experience

• Storybook 도입 및 CDD(Component-Driven Development) 프로세스를 적용하여 컴포넌트 개발의 일관성과 재사용성 향상.

• Jest를 통한 테스트 자동화와 코드 안정성 확보.

• react-stomp 라이브러리를 통합하여 STOMP 프로토콜을 통한 게임플레이 통신 기능 구현.

• ...진행 중.

Skillset

Storybook React Typescript Tailwindcss Zustand Zest

Description

사진 속 식단을 인공지능이 분석 후 운동계획 제공. (Github | 유튜브)

인스타 형식의 커뮤니티 공간 제공.

Experience

• AWS EC2에 Nginx를 구성하고, GitHub Actions와 Docker로 CI/CD 환경을 구축.

• react-easy-crop 라이브러리를 통합하여 이미지 업로드 전 크롭, 확대, 회전 기능을 구현하여 이미지 편집의 유연성과 사용자 경험을 향상.

• 타이핑 애니메이션, 페이지 전환 애니메이션 등을 적재적소에 적용하여 모바일에서 UI의 반응성 향상.

Reflections

• 팀 구성원의 경험 부족으로 디자인 패턴을 적용하지 못해 유지보수성이 다소 미흡했습니다.

• SEO 최적화를 위한 meta 태그 관리가 미흡하여 Next.js의 SSR 이점을 충분히 활용하지 못했습니다.

Skillset

React Next.js Typescript Tailwindcss ReduxTK

Description

기술 블로그입니다. (Github | 배포링크)

Experience

• 풀스택 개발과정 경험.

• react-three fiber를 활용하여 3D 랜딩 페이지 구현.

• AWS EC2에 Nginx를 구성하고, GitHub Actions와 Docker로 CI/CD 환경을 구축.

• Quill 라이브러리를 통합해 실시간 글 작성 및 수정 기능을 구현하여 직관적인 텍스트 편집툴 적용.

• 문자열 정제를 수행하여 CSRF 공격 방지.

• 이미지 업로드 시 WebP 포맷으로 자동 변환되도록 구현하여 이미지 용량을 줄이고 페이지 로딩 속도 개선.

• 느린 배포 서버를 보완하기 위해 스켈레톤 UI 컴포넌트를 제작하여 사용자 경험 개선.

Reflections

컴포넌트 디자인 패턴이 부재한 상태에서 유지보수를 지속하며 그 중요성을 체감했으며, 다양한 디자인 패턴을 학습하고 적용해보는 계기가 되었습니다.

Skillset

Three.js React Typescript Tailwindcss ReduxTK Tanstack ASP.NET Core C#

이 외 프로젝트 내역은 아래 블로그 링크에 정리되어 있습니다.

https://blog.jeheecheon.com/categories/Projects