미리보기

Github | Service

웹에서 면접 연습을 할 수 있는 서비스 입니다.

Tech Stack

React, TypeScript, React-Query, Emotion, Recoil, MSW, Jira, Sentry

People

Web Frontend(3) Backend(2)

Description

• 프론트엔드 코드 리뷰를 주도적으로 도입하고 가치관을 확립하며 프론트엔드 팀 내 코드 구조를 언라인하고 품질을 향상하는 계기가 되었습니다. (관련글)

• 면접 준비 설정 페이지 흐름을 관리하는 데 불편한 점이 있어 해당 부분을 관심사 분리와 응집도를 높이는 방향으로 구조를 변경하였습니다. (관련글)

• 서비스 내 많은 Modal을 관리하기 위해서 custom hook을 생성하여 Modal의 컴포넌트 및 페이지의 종속을 제거하였습니다 (관련글)

• Error Boundaries를 이용해서 Router, API, Auth, Unknown의 계층으로 에러를 선언적으로 핸들링하고 Sentry를 이용해서 에러를 수집하였습니다. 그 결과 메모리가 누수되는 에러를 잡을 수 있었습니다. (관련글)

Github

집에 있는 재료로 요리 레시피를 찾아주는 서비스입니다.

Tech Stack

React, Typescript, NextJS, React-Query, Emotion, Storybook, Jest

People

Web Frontend(2) Backend(2) Design(2)

Description

• 아이디어를 선정하고 개발 전 서비스를 어떤 방향으로 운영할지 발표하면서 실제 사용자를 모으기 위한 기반을 다질 수 있었습니다.

• 프로젝트에 참여하는 팀원의 시간을 효과적으로 사용하기 위해 github action을 이용한 Release note 초안 작성 자동화, Storybook CI/CD를 추가하여 개발에만 집중할 수 있는 환경을 만들었습니다.

• 프로젝트 기간 동안 접속하는 사용자 중 모바일 접속 사용자 증가로 모바일 반응형 대응을 추가 하였습니다

• 모바일 반응형 서비스 도입 이후 네이티브 공유 기능을 사용할 수 있도록 브라우저 호환성에 따라 모든 기기에 네이티브 공유 기능을 활성화하는 방법을 구현하고 공유하였습니다.

• Storybook 라이브러리에 대해 주관을 확립하게 해준 프로젝트가 되었습니다. (관련 게시글)

Github | Blog

내가 가지고 있는 경험을 공유하며 개발자의 가치를 나누고자 나만의 개발 블로그를 만들었습니다.

Tech Stack

Typescript, React, GraphQL, Gatsby.js, Emotion, Chakra UI

Description

• 블로그를 빠르게 구축하고 빠른 초기 랜더링과 SEO를 위해서 Gatsby.js를 선택해 개발하였습니다. (관련 게시글)

• 블로그를 검색에 노출시키기 위해 sitemap.xml, robots.txt, 시멘틱 태그 등 SEO를 통해 lighthouse SEO 100점 달성하였습니다.

• 이미지 및 폰트 최적화로 LCP 2.1초 감소시켜 사용자가 빠르게 페이지에 대한 반응을 주고자 했습니다.

• 나만의 아이덴티티를 부여하기 위하여 custom domain을 설정하였습니다. (관련 게시글)

Github | Refactor Github

뉴스 제보를 사고파는 서비스입니다. 추후에 개발하면서 아쉬웠던 부분을 리팩토링해 보았습니다.

Tech Stack

JavaScript, Jest, MSW, React-Query, React, Styled-Component, Storybook

People

Web Frontend(2) Andorid(2) Backend(3)

Description

• 프론트엔드 코딩 컨벤션, 회고, 스프린트 방식, 기술 스택 선정 등 처음으로 개발 환경에 대해서 고민하고 적용한 프로젝트입니다.

• 무한 스크롤로 인한 데이터가 늘어날수록 Dom의 개수가 시간이 증가함에 따라 react-virtualized를 이용해서 최적화를 진행하여 렌더링 성능을 약 10배(2s -> 0.2s)로 감소하였습니다. (관련 PR) | (관련 게시글)

자기주도적으로 성장하는 개발자가 되는 방법에 대해 생각하고 적용하며 기술에 딥 다이브 하는 경험을 가질 수 있었습니다. (작성 노트)

관련 스터디

부스트 캠프 내에서 타입스크립트 스터디를 진행하였습니다

• 타입스크립트 교과서 교제를 바탕으로 북 스터디를 기획하고 운영하였습니다.
• 스터디 자유 주제로 Redux 까보기를 발표하였습니다 (발표 글1) (발표 글2)
• Github | Notion

개발자 / 디자이너와 함께 실제 프로덕트를 만드는 동아리로 기획부터 개발까지 6명의 직장인 팀과 함께 “모먹지” 프로젝트를 진행 및 네트워킹을 가질 수 있었습니다.

관련 스터디

동아리 내 JS로 React 흉내 내보기 스터디를 진행하였습니다.

• React에서 중요하다고 생각하는 useState, useEffect, JSX, VirtualDOM, SPA에 대해 알아보고 JS를 이용해서 구현했습니다.
• Github | Notion

React API인 isValidElement 번역에 참여했습니다

• 프론트엔드 프로젝트 선행 학습을 주도 하였습니다.
• 스프린트, 회고, 코딩 컨벤션, git-flow, git-wiki 등을 적용하며 작업에 몰두할 수 있는 환경에 대해 고민하고 적용하였습니다.