웹 개발자의 역량을 고민하다 책 <더 나은 웹 개발을 위한 가이드>를 읽었다.
목차 펼치기
출처 : yes24
목차 보기
목차 보기
때때로 세상을 자신의 시선으로 해석하는 사람들을 보며, ‘나는 과연 그럴 수 있을까?’라는 반문을 한다. 이 반문은 ‘그래서 웹 개발자의 시선은 어떤 방향인가?’로 이어져서 ‘그럼 웹 개발자는 뭐지?’라는 생각을 하게 되고, 웹 개발자로서의 전문 역량은 무엇일까에 대한 생각으로 이어진다. 더 나은 구조, 간결한 코드, 웹 접근성, SEO, 렌더링 성능, 트렌디한 기술, 디자인적 감각, 애니메이션, 개발 환경, 인프라 등등… 새로운 프레임워크와 라이브러리는 계속 나온다. “더 멋지고 더 뛰어난 나를 모르신다고요? 아셔야 할 텐데?” 하고 외치는 느낌이다. 주식과 코인에서나 느낄 법한 FOMO 감정을 여기서 느껴야 한다는 게 슬프다. 이 책은 그런 생각들 속에 읽게 되었다.
출처 : Facebook Computer Science Memes
더 나은 웹 개발을 위해서는 우열을 가리기 힘들 정도로 중요한 요소들이 많고 그 하나하나의 깊이는 별도의 책으로 나와도 부족함이 없다. 이 책에서는 그 요소들을 하나씩 소개하며 왜 이런 고민을 해야 하는지를 이해시켜 더 나은 웹 개발을 위한 전체적인 그림을 그릴 수 있도록 도와준다. 마치 안내소의 책자나 패키지여행의 가이드 같다. 그런 의미에서 책 제목에 ‘가이드’를 넣은 건 아주 잘 어울린다고 생각한다.
렌더링 최적화 (CRP 최적화)
웹 리소스 최적화
웹 이미지, 동영상 최적화
SEO 최적화
반응형 웹 스타일 마크업
JavaScript 동작 원리에 대한 이해
TypeScript에 대한 이해
코드 퀄리티 및 개발 생산성 향상
협업을 위한 코딩
이 책에서 가장 유심히 읽은 부분은 크롬 개발자 도구를 활용한 성능 측정과 최적화 방법에 대한 것이었다. 만약 성능을 측정하고 개선하는 부분에 대해서 어떻게 익혀야 할지 입구를 찾는 것부터 헤매고 있다면 많은 도움이 될 수 있을 것 같다. 나도 이 부분이 부족하기 때문에 많은 도움이 되었다. 이 부분을 읽고 FEConf의 메모리 누수 디버깅 세션을 들었었는데 꽤 익숙해지고 있다는 기분을 느꼈던 기억이 난다. 아쉬운 점이라면 이어서 실습을 바로 못 한 것이다. 성능 최적화를 어디에 어떻게 적용할지 아직 막연한 느낌이 든다. 하지만 연차가 쌓일수록 이 능력은 큰 강점이 되어줄 것이라 믿고 있기에 언젠가 실전에 딥다이브하고 글로써 풀어볼 생각이다.
내가 가장 울림을 받았던 것은 웹 접근성에 대한 이야기였다. 웹 접근성은 누구나 사이트를
동등하게 이용할 수 있어야 한다는 것인데, 더 따뜻하고 편리한 세상이 오기를 바란다고 하면서도 ‘지금 빨리 되어야 하니까’, ‘회사는 이걸 신경 쓰지 않으니까’, 라는 변명 아래 웹 접근성에 대해 무심해지다 이내 잊다시피 했던 것 같다. 웹 접근성은 필수라는 저자의 말에 무심했던 나를 돌이 켜보게 되었다. 이 부분에 대해서는 <프론트엔드 다이빙 클럽>의 미니 아고라에서 잠깐 이야기하기도 했는데 토스에서는 웹 접근성을 매우 중요하게 생각하고 있으며 디자인 시스템에 녹아있어 실제 개발에 있어서는 개발자가 크게 고민하지 않아도 되는 환경이라는 이야기를 들었다.
그 외에도 ECMAScript 버전에 따른 주요 기능, tailwind처럼 그리드 시스템을 위한 css 코드, 코딩 컨벤션, 쿠키와 개인정보보호 등 다양한 내용들이 다뤄져서 좋았다.
그 어떤 개발자도 웹을 이용하는 사용자의 권리를 막아서는 안 됩니다.
노코드와 로우코드 툴이 발전하고 Chat GPT와 Copilot이 화두가 된 AI 시대에 개발자가 가져야 할 역량에 대해서 위에 소개한 하드 스킬보다 소프트 스킬을 강조하는 데 개인적으로 매우 동감했다. 연차가 쌓일수록 소프트 스킬의 중요성을 더 실감하게 된다. 내 장점은 기계 아닌 사람이기 때문에 사람과 소통할 수 있는 곳에서 온다고 생각한다. 커뮤니케이션, 기획, 분석 등 더 넓은 시야는 개발자의 강력한 무기가 되어줄 것이라 믿는다. 그러면서도 슬금슬금 드는 FOMO에 AI를 통해 내 생산성을 향상하고 인사이트를 얻는 연습을 하기 위해 최근 Chat GPT 4.0의 구독을 시작했다. 공부하면 할수록 내 무지와 부족함에 통탄을 금할 길이 없다. 😇
렌더링 성능 최적화
렌더링 성능 최적화
HTML 마크업 최적화
불필요한 wrapper 요소 제거
사용하지 않는 CSS 스타일 선언 제거
[CSS Overview] -[Unused declarations] 탭에서 사용하지 않는 CSS 확인 가능
CSS 파싱 시점 분리
CSS는 파싱되는 동안 렌더링이 일어나지 않는 ‘렌더링 차단 리소스’다.
media태그를 활용하여 CSS를 최적화할 수 있다.
[Performance insights] 탭에서 렌더링 차단 요청이 얼마나 일어났는지 확인할 수 있다.
Performance insights report
렌더링이 차단되면
Render blocking request를 확인할 수 있다.
JavaScript 최적화
JavaScript는 처리되는 동안 HTML 마크업 파싱을 중단하는 ‘파서 차단 리소스’다.
비동기로 처리해도되는 script에는
async를 사용한다.
코드가 작다면, 내부 스크립트로 삽입해서 네트워크 요청을 줄일 수 있다. 단, HTML 문서 크기는 그만큼 커진다.
HTTP 요청 최소화
내부 스타일 시트 사용
웹팩 등을 통해 외부 CSS와 JavaScript를 번들링하여 다운로드
이미지 스프라이트 사용
파일을 gzip으로 압축하여 전송 (약 70% 절감 가능)
가상 DOM
가상 DOM
DOM 노드 조작으로 리플로우와 리페인트가 발생하는데, 이 요청을 가상 DOM에 우선 반영하여 변경 사항들을 묶은 후 한 번에 실제 DOM에 반영하기 위해 만들어졌다.
DOM 조작에 대한 연산 비용을 급격히 절감할 수 있다.
대표적으로 React.js, Vue.js 에서 사용하고 있다.
웹 리소스 최적화
웹 리소스 최적화
preload
현재 페이지에서 필요한 리소스를 미리 가져온다.
as속성으로 유형을 반드시 명시해야 하며,
href속성의 확장자와 일치해야 한다.
중복해서 선언할 경우, 선언된 수만큼 리소스를 가져온다.
현재 페이지에서 3초 이내에 사용되지 않을 경우, [Console]에서 Warning을 발생시킨다.
preconnect
브라우저에게 외부 도메인을 미리 알려준다.
브라우저가 외부 사이트에 필요한 연결을 미리 예상할 수 있다.
DNS, TCP, TLS 등 왕복에 필요한 시간을 절약할 수 있다.
prefetch
미래에 사용될 것으로 예상되는 리소스를 브라우저 캐시에 저장한다.
브라우저 렌더링을 차단하지 않는다.
JavaScript의 경우, 인터프리터에 의해 해석되지 않고 브라우저 캐시에만 저장한다.
사용하는 시점에 브라우저 캐시에서 빠르게 리소스를 가져온다.
남용할 경우 네트워크 통신이 많이 발생해 페이지 렌더링이 오래 걸릴 수 있다.
사용자의 다음 행동이 확실히 예측되는 리소스일 경우 사용한다.
loading=lazy
img,
iframe등에서 레이지 로딩을 구현한다.
웹 요소 최적화
웹 요소 최적화
Semantic Tag
검색 엔진과 스크린 리더에서도 명확히 의미를 전달할 수 있다.
Semantic Attribute
hidden vs display: none
HTML 요소에 hidden을 선언하면 해당 요소는 감춰진다.
<div hidden>Hide</div>
autocomplete
미리 정의된
name속성 값을 사용하면
input의 입력 정보를 브라우저 캐시에 저장한다.
ARIA (WAI-ARIA)
ARIA (WAI-ARIA)
“
그 어떤 개발자도 웹을 이용하는 사용자의 권리를 막아서는 안 됩니다.”웹 개발자라면 ARIA는 반드시 지켜야 하는 의무이지 선택이 아니다.
장애가 있는 사용자가 웹 컨텐츠에 쉽게 접근할 수 있는 방법을 정의한 여러 특성을 제공한다.
스크린 리더가 올바르게 해석할 수 있다.
기본 역할을 변경하면 안된다.
동일한 역할을 재정의할 필요는 없다.
role
aria-required
aria-invalid
aria-label
aria-labelledby
aria-describedby
aria-live