미리보기

삼성전자 DS 20년 상반기 신입사원 공채로 입사하였으나, 프론트엔드 개발자로서 새로운 도전을 경험하기 위해 퇴사하였습니다.

• Mobile GPU Kernel Driver 개발 중, “메모리 파트”를 담당하였습니다.
디버깅에 필요한 메모리 피처를 개발하고, 메모리 할당 방식을 관리하였습니다.

• “고객사 이슈 대응 TF”로 활동하였습니다.
제품 상용화 이후 실제 고객들이 사용하면서 발생한 User / Kernel Driver 이슈를 재현하고,
분석하며 해결하였습니다.

수영인들을 위한 수영 기록 서비스입니다. 프론트엔드 4명, 백엔드 3명, 디자인 3명으로 구성된 팀에서 프론트엔드 개발자로, 달력에서 일별 수영거리의 목표 대비 기록 시각화를 확인할 수 있는 메인 페이지와 다른 유저들의 수영 기록을 확인할 수 있는 피드 페이지를 주로 개발하였습니다.

기술 스택

• TypeScript, Next 14, Panda CSS, React-Query, Jotai, Storybook

기술적 성과

1. Zero-Runtime CSS인 Panda CSS 도입
   빌드 타임에 정적 분석을 통해 CSS 파일을 생성하는 Panda CSS를 도입하여 RSC 또한 스타일을 
적용할 수 있도록 하였습니다. 또한 디자인 토큰을 정의하고, CVA를 활용하여 디자인 시스템을 
반영하여 변경에 유연하게 대비할 수 있도록 노력하였습니다.

2. svg와 path를 활용한 물결 모양 시각화
   svg 태그 내부에서 path 태그의 명령어들을 활용하여 사용자의 수영 거리의 목표 대비 기록의 비율을 계산해 물결 모양 디자인에 맞게 시각화하는 컴포넌트를 구현하였습니다.

3. GitHub Action 활용
   자동으로 리뷰어를 지정하고, PR의 타입, 리뷰가 필요한 PR의 라벨을 자동으로 부착하여 명시적으로 확인할 수 있도록 하였습니다. 또한 빌드 테스트를 진행하여 배포 시 에러를 사전에 방지하였으며, 
스토리북 자동 배포를 통해 디자이너와 효율적으로 소통하고자 하였습니다.

자신의 목표를 세우고 인생 지도를 만들 수 있는 서비스입니다. 프론트엔드 4명, 백엔드 3명, 디자인 3명으로 구성된 팀에서 프론트엔드 개발자로, 자신의 목표를 설정하는 목표 설정 플로우와 다른 유저들이 올린 목표들을 확인할 수 있는 피드 페이지를 주로 개발하였습니다.

기술 스택

• TypeScript, Next 14, Tailwind CSS, React-Query, Jotai, Storybook, React-Hook-Form
  

기술적 성과

1. Atomic Pattern 도입
   첫 디자인 직군과 협업을 하며 프로젝트 초반 디자인 수정이 빈번하다는 것을 느꼈습니다. 
따라서 Atomic Pattern을 도입하여 원자 컴포넌트를 먼저 정의하고 디자인 시스템을 반영하여 코드 재사용성을 높이고 변경에 유연하게 대처하려 노력하였습니다.

2. React-Hook-Form을 활용한 목표 추가 기능 구현
   간단한 유효성 검사 규칙을 제공하고, 비제어 컴포넌트를 활용하는 React-Hook-Form을 사용하여
불필요한 리렌더링을 방지하고 form과 관련된 상태를 분리하였습니다.

3. Google Analytics 활용
   GA를 통해 1차 MVP 이후 유저들의 재방문이 거의 없다는 것을 파악하고, 이를 팀에 공유하여 추가 
기능 개발의 필요성을 어필하였습니다. 이후 팀원들과 사용자 간 소통을 할 수 있는 피드, 댓글, 이모지 기능 등을 기획하고, 추가하여 약 700명의 유저를 유치하며 동아리 우수상을 수상할 수 있었습니다.

고양이를 위한 SNS입니다. 프론트엔드 2명, 백엔드 2명으로 구성된 팀에서 프론트엔드 개발자로, 인스타그램처럼 모든 게시글들을 확인할 수 있는 메인 페이지, 위치 정보가 담긴 게시글들을 확인할 수 있는 지도 페이지를 주로 개발하였습니다.

기술 스택

• TypeScript, React, React-Query, Recoil, styled-component

기술적 성과

1. 효율적인 개발 환경 구축
   첫 개발 프로젝트를 진행하며 생산성 향상과 사전 에러 방지를 위해 TypeScript를 도입하였습니다. 또한 API 통신 로직 분리를 통한 가독성 향상과 서버 상태 분리를 위해 React Query를 활용하였습니다.

2. 클라이언트 번들 사이즈 축소

   
   라이트하우스 성능 평가 시 번들 파일의 용량이 크다는 문제가 발생하였습니다. 따라서 React Loadable과 gzip 압축을 활용하여 main.js의 크기를 기존 대비 약 31%로 축소하였습니다.

3. 과부화된 서버의 블로킹 문제 해결
   부하테스트와 유저테스트를 통해 Single Thread로 동작하는 Nest 서버에 블로킹이 발생하는 것을 확인하였습니다. 따라서 PM2를 활용하여 서버 프로세스의 수를 늘리고, Redis를 공유 메모리로 
활용하여 이를 해결하였습니다.

네이버 커넥트 재단에서 주관하는 네이버 부스트캠프는 미션과 팀 프로젝트 위주의 개발
부트캠프입니다.

학습 과정에서 혼자 고민하는 과정도 필요하지만 네트워킹과 피드백을 중요하게 생각합니다.


따라서 도메인을 변경하면서 비슷한 환경의 사람들과 함께 공부하고 성장하기 위해 참여하였습니다.

챌린지 과정에서 매일 미션을 통해 JavaScript와 CS 지식에 대해 학습하고, 코드 리뷰를 통해 매주 다른 팀원들과 함께 학습하며 성장하였습니다.

위를 바탕으로 멤버십 과정에서 매주 짧은 스프린트를 통해 전반적인 웹 개발을 경험하였습니다.

그리고 학습한 내용들을 바탕으로 6주간 팀 프로젝트를 통해 결과물을 만들어 낼 수 있었습니다.

디프만에서는 여러 개발자뿐만 아니라 비개발 직군인 디자이너와의 협업 경험을 기르기 위해 참여하였습니다.

프론트엔드 4인, 백엔드 3인, 디자인 3인으로 구성된 팀에서 협업과 효율적인 개발 프로세스에 대한 방법론에 대해 고민하였습니다.

직접 동아리 운영진으로 참여하여 다른 개발자들은 어떤 개발 방향성과 가치관을 가지고 있는지, 또 어떻게 학습하는지를 직접 보면서 제 자신의 방향성 설정에 있어 성장하고 싶어 참여하였습니다.

또한 프로젝트를 통해 기술적으로 성장할 수 있는 기회를 얻고자 새로운 기술을 적극적으로 도입했습니다. 기술을 익히면서 기본기를 바탕으로 한 문제 해결 능력을 검증할 수 있었습니다.