name 강희

hobby 그림 그리기, 웹툰 보기, 산책

사용자의 마음을 사로잡는 FE 개발자, 강희입니다.

저는 매력적인 웹 페이지를 만들고자 노력합니다.

1. 웹 페이지 성능 개선
   • 로딩, 렌더링, 메모리 성능을 지키며 좋은 서비스를 제공하고자 합니다.
   • SEO 작업으로 검색어 유입에 신경씁니다.
2. 유지보수가 편한 코드 작성
   • 자바스크립트 동작 원리를 이해하며 가독성 좋은 코드를 작성합니다.
   • 클린 코드는 무엇인지 고민하고 적용합니다.
   • 컴포넌트 단위로 개발을 진행하여 재사용할 수 있는 코드를 작성합니다.
3. 기술 자료들을 문서화
   • 기술 블로그를 운영하며 최근에 깨닫게 된 지식을 공유합니다.
   • Git hub의 Wiki를 활용해 프로젝트 진행시 마주한 이슈와 해결법을 문서로 정리합니다.
4. 웹 접근성을 지킨 동일한 사용자 경험 제공
   • WCAG에서 제안한 가이드라인을 지키며 키보드 접근이 가능하고, 스크린 리더가 읽을 수 있는 웹 사이트를 제공합니다.

Contact

About Me

기술 스택

1. Git

2. JavaScript

   React | Redux | RTK | Node

3. CSS

   Sass | styled-component

4. HTML

5. tool

   Web pack | babel | figma

6. Another

   C | Python

교육

1. 네카라쿠배 프론트엔드 개발 스쿨 2기

   2021.07 ~ 2022.01 수료 완료

   네카라쿠배 수료 증명서.pdf

   • 프론트엔드 개발자 양성 교육 과정
   • HTML, CSS, JavaScript, React, 알고리즘
   • 팀 프로젝트

2. 한국외국어대학교 전자공학과

   2018.03 ~ 4학년 2학기 휴학

   • 프로그래밍 경험 : 공학설계프로그래밍(A+), 자료구조(B+)
   • 하드웨어에 대한 이해 : 프로세서응용종합설계(A+), 컴퓨터 구조(A0)
   • CS 지식 습득 : 운영체제 (A+), 시스템프로그래밍 (A+)

역량

1. 문서화

   • 기술 블로그를 통해 새로 알게된 지식을 공유합니다.
   • notion으로 수시로 기록을 정리합니다.
   • 프로젝트를 진행하며 어려웠던 부분들을 기술 로그를 작성하여 팀원들과 공유합니다.

2. Git Commit

   • 컨벤션을 정해 커밋 메세지를 남깁니다.
   • 커밋을 작은 단위로 남겨 구체적인 진행사항을 파악할 수 있습니다.
   • 커밋 메세지 보기

3. 디자인

   진행했던 프로젝트들의 전체적인 디자인을 직접 설계했습니다.

   • 디자인까지 설계했던 프로젝트들

프로그래밍 철학

페이지로드 100ms 개선이 수익 1%를 증가시킨다

저는 웹 페이지의 성능을 개선하여 소비자들에게 빠르고 편안한 사용자 경험을 제공하고자 합니다.

WPO(Web Performance Optimization) stats의 조사[링크] 에 따르면 Walmart는 페이지 로드가 100ms 개선될 때마다 수익이 1% 증가했습니다. 웹 로딩 속도 1초에 아마존 매출 68억달러가 달렸다[링크] 라는 분석도 존재합니다. KissMetrics 연구에 의하면 47%의 소비자는 웹페이지가 2초 이내에 로드되길 기대하고, 40%의 소비자가 3초가 되면 웹페이지를 이탈한다고 합니다. 프론트엔드 개발자는 사이트의 로딩 시간을 줄여 소비자 이탈율을 줄이고 이익을 창출해 낼 수 있습니다.

1. Module Bundling & Code Splitting

Web Pack은 여러 파일들을 하나의 파일로 묶어주는 번들링을 수행합니다. 번들링을 통해서 서버에게 여러 요청을 보내는 대신, 한 번의 요청으로 필요한 소스를 받을 수 있으므로 서버의 부하를 줄입니다. 하지만 번들링 결과가 너무 크다면 페이지 접속시 한 파일을 불러오는 데 오랜 시간이 걸리게 됩니다. 따라서 한 페이지에서 필요한 단위로 코드를 분할하고 번들링하여 웹 성능을 개선할 수 있습니다.

• Yalp 프로젝트에서 React lazy, Suspense를 사용한 Code Splitting

2. 이미지 최적화

웹 페이지에서 대부분의 용량을 차지하는 것은 이미지입니다. 이미지 최적화를 통해 웹 페이지 바이트를 절약하고, 렌더링 속도를 절감시켜 웹 성능을 개선할 수 있습니다.

• 팀원들과 이미지 최적화를 조사하고 정리한 기술 로그 - 이미지 최적화
• Yalp 프로젝트에서 SVG 스프라이트를 사용한 이미지 최적화

3. Lazy Loading

서버로부터 지금 필요하지 않은 데이터들을 한 번에 받아두지 않고, 필요할 때마다 데이터를 요청하는 Lazy Loading을 통해 웹 성능을 개선할 수 있습니다.

• All Review You 프로젝트에서 Intersection Observer를 사용한 Infinite Scroll을 이용한 Lazy Loading

4. React 컴포넌트 최적화

React.memo, useCallback, useMemo를 사용하여 컴포넌트 최적화를 통해 불필요한 컴포넌트 렌더링을 방지하고 웹 성능을 개선합니다.

• Yalp 프로젝트에서 컴포넌트 최적화

5. SEO 최적화

• 리액트 라우터를 통해 SPA이지만 url을 페이지에 맞게 변경해 주며 SEO 최적화를 하였습니다.
• Yalp 프로젝트에서 React helmet을 사용하여 Meta태그를 추가하여 SEO 최적화를 하였습니다.

유지보수하기 좋은 코드를 작성하자

기존의 코드를 유지보수 하는 데 들어가는 시간이 줄어든다면, 더욱 좋은 서비스를 제공할 수 있을 것이며 결국 이익 창출로 이어집니다.

구현에 급급해 빠르게 작성한 코드는 시간이 지난 후 새로운 서비스를 제공하기 위해 코드를 추가하는 순간, 버그가 발생하고 손을 댈수록 더욱더 그 문제를 해결하기 어려워집니다. 가독성이 좋고 논리적인 코드는 다른 사람이 보더라도 이해할 수 있으며, 디버깅하기 용이하며 유지보수가 간편합니다.

1. 함수형 프로그래밍

저는 함수형/선언형 프로그래밍을 지향합니다. 부수효과를 일으키지 않는 순수함수를 작성하여 상태를 안전하게 보호하고자 합니다. 특정 함수만이 상태를 변경할 수 있도록 하여 디버깅을 용이하게 합니다.

• 함수형 프로그래밍에 대해 정리한 블로그 포스트
• Yalp 프로젝트에서 선언형으로 utils 함수들을 사용

2. 의미있는 식별자 이름

함수와 변수의 이름을 통해서 이 함수와 변수가 어떤 의미를 가지는지 한 번에 파악할 수 있도록 작성하고자 노력합니다.

• Snack Games 프로젝트에서 의미있는 함수 이름
• Who ate my fish 프로젝트에서 상수를 적극 사용

3. 클로저를 사용한 은닉화

클로저와 getter, setter를 사용하여 상태를 안전하게 은닉하면 디버깅이 편해집니다.

• Who ate my fish 프로젝트에서 상태 은닉화