** 주요 기술 스택
React.js – hooks를 이용한 함수형 컴포넌트를 다룰 수 있습니다. 커스텀 hooks를 사용하여 리액트의 생명주기를 활용하여 이미지 lazy loading 등 특수 기능 구현을 할 줄 압니다. React.memo를 통해 렌더링 최적화를 할 줄 압니다.
TypeScript – 반드시 필요한 상황이 아니면 절대 any를 쓰지 않습니다. 타입의 결합, 상속, 유틸리티 타입, 타입 제네릭 등을 통해 반드시 필요한 타입만 다루도록 로직을 제어할 줄 압니다. 타입스크립트를 통해 견고한 소프트웨어를 만드는데 관심이 많습니다.
JavaScript – ES2015 이후의 자바스크립트 문법에 익숙합니다. jQuery 없이 DOM API를 다루는데 능숙합니다. 라이브러리 없이 직접 기능 구현하는 걸 좋아합니다.
HTML/CSS – 시맨틱 마크업을 준수합니다. Styled-components로 아토믹 패턴을 사용해 통일성있는 UI를 효율적으로 만드는 걸 좋아합니다. 크로스 브라우징을 할 줄 압니다.
Redux – Redux를 통하여 react.js 컴포넌트의 상태 관리를 더 효율적으로 할 줄 알며, 데이터 모델링을 할 줄 압니다.
Webpack – 코드 스플리팅과 웹팩 설정 변경을 통해 빌드 파일의 용량 최적화로 성능 개선을 할 줄 압니다.
Service Worker – 서비스 워커의 fetch 이벤트 함수를 통해 cache 정책을 사용할 줄 압니다.
** 주요 경력 기술
1. 개발 문화 개선 프로젝트 (2020년 11월 – 2020년 11월, 1개월)
코딩 컨벤션 초안을 작성하고, 객관적이고 가독성 좋은 코드를 위한 코드 리뷰 문화를 제안하여 도입했습니다. 제가 작성해 온 초안을 팀원들과 의견을 교환하며 수정한 끝에 코드 규칙을 확립하고, 코드 리뷰를 통해 객관적으로 코드 양식을 통일하여 코드 분석 소요 시간을 다소 경감하여 생산성을 늘리는 결과를 얻었습니다.
2. 성능 개선 프로젝트 (2021년 2월 – 2021년 3월, 2개월)
구글에서 제공하는 PageSpeed Insights 서비스를 활용하여 현재 서비스의 성능 상 문제점을 진단하여 사이트 성능 개선 작업을 진행했습니다. Custom hooks를 사용하여 사이트 전역적으로 이미지에 lazy loading기술을 적용했습니다. 또한 Service Worker에서 제공하는 caching기능을 활용하여 data fetch 반복 시 불필요한 리소스 낭비 및 네트워크 지연을 방지했습니다. Webpack 설정의 변경과 코드 스플리팅을 통해 빌드 파일을 필요한 것만 선택적으로 불러올 수 있도록 하고, 중복 번들링을 피해 효율적으로 빌드파일이 로드되도록 했습니다.
이 결과 인덱스 페이지의 로딩 리소스를 기존의 40% 가량 절약하고, 빌드파일의 용량은 50% 감소되어 성능이 대폭 향상되는 결과를 얻었습니다.
3. 흑우노노 웹 사이트 UI 및 기능 개발 (2020년 10월 – 현재)
흑우노노의 인덱스 페이지, 상품 상세 페이지, 장바구니 페이지 등 주요 서비스의 페이지를 제작 및 유지 보수하는 업무를 담당했습니다. 시맨틱 웹을 사용한 HTML 구조와 반응형 스타일, 사용자 인터랙션 기능 제작을 담당했습니다. 애니메이션, 트랜지션을 사용하여 UI에 생동감을 주는 작업도 담당했습니다.
더보기