Use Idioms
2023. 03. ~ 진행 중영어 숙어를 편리하게 학습하고 더 오래 기억하기 위해 제작한 웹 어플리케이션
작업사항
프론트엔드
- TypeScript, React 기반 프론트엔드
- React 프로젝트를 Remix로 리팩토링하여 서버 사이드 렌더링, 및 검색 엔진 최적화
- 화면에 지금 필요한 이미지만 렌더링하도록 최적화하여 Lighthouse Performance 점수를 50점 초반에서 70점 후반으로 개선
- 캐시 설정으로 새로고침할 때 로딩 시간 2초 이내로 단축.
- react-window로 리스트 & 그리드 뷰 컴포넌트의 스크롤 가상화 작업 및 react-window-infinite-loader로 무한 스크롤 작업으로 퍼포먼스 개선
- 서버 사이드 렌더링에서 useSyncExternalStore로 로컬 스토리지 및 미디어 쿼리를 포함한 Window 객체와 컴포넌트의 라이프사이클을 맞출 수 있었음.
- Web SpeechSynthesis API로 TTS 작업. 예문 텍스트를 클릭하면 클릭한 지점에서 음성 재생되도록 하여 사용자 경험 개선
백엔드
- Go 기반 백엔드
- 오프셋 기반 페이지네이션에서 커서 기반 페이지네이션으로 리팩토링
- OpenAI API와 연동하여 해당 숙어와 사용자가 작성한 프롬프트에 따라 예문 생성
- DB 트랜잭션으로 DB 작업 일부 실패할 때 롤백되도록 리팩토링
스크린샷
주소
Resume
2023. 04. ~ 진행 중Remix, MDX로 개발된 이력서
작업사항
- TypeScript, Remix, MDX 기반 프론트엔드 개발.
- Cloudflare Pages로 배포하기 위해 @remix-run/node에서 @remix-run/cloudflare로 교체, 깃허브 레포지터리와 연결하여 메인 브랜치 업데이트될 때마다 자동 배포하여 개발 편의성 개선.
- 서버 실행 중일 때 node:fs/promise로 마크다운 파일을 불러와 렌더링하는 방식에서 빌드 타임에서 파일을 컴파일하도록 리팩토링하여, MDX 파일 렌더링 최적화 & 컴포넌트 렌더링하여 UI 개선
주소
Coolify
2023. 05. ~ 진행 중ChatGPT 프롬프트와 이력서를 개선해주는 웹 어플리케이션
작업사항
- TypeScript 기반 Remix 프론트엔드
- OpenAI, Gemini Flash API와 연동
- Cloudflare Pages로 깃허브 저장소와 연동하여 배포 자동화
- mdx-bundler로 마크다운, MDX 컨텐츠 렌더링
스크린샷
