소개: 사진과 함께 개인 일대기를 기록할 수 있는 서비스입니다. 팀원: FE 5명 맡은 기능 1. 다크모드 구현 - 운영체제 설정과 별개로 다크모드 On, Off가 가능토록 구현 - 재방문 시에도 이전 설정이 적용되도록 localStorage 이용 - Props Drilling을 방지하고자 Context API를 통해 현재 모드 저장 2. Lazy Loading을 통해 이미지 네트워크 요청 최적화 - Intersection Observer API를 통해 Lazy Loading 구현 - 이를 통해 첫 화면 렌더링 속도 개선

소개: 무엇을, 누구랑 먹을지 고민하는 현상을 해결하기 위해 제작한 서비스입니다. 팀원: FE 3명, BE 4명 맡은 기능 1. 협업 간 코드 스타일을 일치시키기 위해 린팅, 포맷팅, 깃 관련 도구 도입 2. 카카오맵을 렌더링시키고 이를 Recoil의 atom으로 저장하는 과정에서 생긴 에러 해결 3. 현재 위치에 기반하여 랜덤 맛집 뽑기 기능 개발 4. 사용자간 친밀감 형성과 원활한 소통 지원을 위해 채팅 구현 5. Suspense와 Error Boundary를 통한 선언형 코드 작성

소개: 깊게 학습한 내용과 프로젝트 이후 회고를 기록하기 위해 Gatsby.js를 이용하여 개인 블로그를 개발했습니다. 주요 기능 1. SSG 방식으로 마크다운 파일 렌더링: Gatsby의 createPages API를 이용하여 빌드 시점에 미리 데이터가 채워진 HTML 파일을 형성하여 배포 2. 검색 엔진 최적화: sitemap.xml, robots.txt, canonical link, meta tag 설정을 통해 검색 엔진 최적화 3. 글마다 목차 렌더링: 글의 내용을 빠르게 파악하고 이동이 용이하도록 목차 기능 개발

소개: JavaScript만을 이용하여 SPA 형태의 작은 노션을 구현했습니다. 기능 1. 페이지 생성, 편집, 삭제 가능. 페이지들을 사이드바에 트리 형태로 렌더링 2. state 변화 추적과 디버깅을 수월히 하기 위해 단방향 데이터 바인딩 방식으로 state 전달 3. History API의 pushState, replaceState 메서드를 통해 새로고침 없이 페이지 이동이 가능토록 구현 4. Webpack을 통해 IIFE로 코드를 실행시켜 유효 범위 문제 방지 5. Github Actions를 이용해 배포 자동화

소개: 웹 사이트에서 책을 보며, 동시에 쉽고 빠르게 공부 노트를 작성할 수 있도록 만든 서비스입니다. 팀원: FE 2명, BE 3명, 디자이너 1명 맡은 기능 1. 하이라이트 로직 개발: PDF로부터 변환된 HTML 태그들 위에서 3가지 색깔로 하이라이트가 가능하도록 구현 2. Roll Back 기능 개발: 읽기 모드와 쓰기 모드로 구분하여 에디터를 과거 기록으로 되돌리는 기능 개발 3. 메인 페이지 개발: 왼쪽에서는 책을 읽으며 하이라이트를 할 수 있고, 오른쪽에서는 공부 노트를 작성할 수 있는 페이지 개발