유튜브에서 방송한 자료입니다. 오늘자 방송: https://www.youtube.com/watch?v=n7PajvLH3rY&list=PLdntWJk2tJPKvRB0mSqC5tyKUv7HFtcqg&index=1

1. CTO 둘이 풀어드리는 주간 뉴스 2021.1.23방송
프론트엔드 성능 점검 항목 –
2021 버전

2. 참고자료
• <컴퓨터vs책> 블로그
http://jhrogue.blogspot.com/
• 오늘자방송:
https://www.youtube.com/watch?v=n7PajvLH3rY&list=PLdntWJk2tJPKvRB0mSqC5tyK
Uv7HFtcqg&index=1
• 유튜브채널OKdevTV >재미있는개발이야기리스트
https://www.youtube.com/playlist?list=PLdntWJk2tJPKvRB0mSqC5tyKUv7HFtcqg
• 슬라이드셰어
https://www.slideshare.net/jrogue/presentations
• 채널박재호(초급개발자를위한...)https://www.youtube.com/c/박재호dev
OKdevTV

3. 오늘의 짤방(1)
OKdevTV
스택만이 미래다!ㅋㅋㅋㅋ
via @Codenang

4. 오늘의 짤방(2)
OKdevTV
via @smartjk

5. ① js;dr
② 풀 스택 vs 풀 사이클 개발자
③ GCP, AWS, Azure 누가 누가 잘하나
④ AWS 엘라스틱 라이선스 변경에 대한 대응 방안 발표
⑤ 오라클에서 PostgreSQL로 마이그레이션할 때 주의 사항
⑥ 클라우드플레어 waiting room
⑦ 프론트엔드 성능 점검 항목 – 2021 버전
⑧ gradle의 문제점
오늘의 소개할 내용
OKdevTV

6. OKdevTV
(용어 소개) js;dr
1
• https://tantek.com/2015/069/t1/js-dr-javascript-required-dead
• JavaScript required; Didn’t Read.
• 참고:
• curlable(https://indieweb.org/curlable)
• pdf;dr

7. • https://eminetto.medium.com/full-stack-vs-full-cycle-developer-2a454942291b
• 풀 스택 개발자: 데이터베이스, 서버, 시스템 엔지니어링, 클라이언트 작업을 모두 처리할 수 있는 개발자
• 이 정의에 따르면 풀 스택 개발자는 프로그래밍 언어, 데이터베이스, 캐시, 디자인, UX 등등을 모두 알아야 한다!
• 신입이 들어오면 멘붕
• 풀 사이클 개발자: 2018년 넷플릭스 기술 블로그에 처음 등장
• 소프트웨어 개발과 관련된 모든 기술(백엔드, 프런트엔드, 데이터베이스, UX 등)을 표면적으로 배우는 대신 설계에서 배포와
지원에 이르기까지 모든 작업을 관리할 수 있는 개발자가 더 중요!
OKdevTV
(오늘의 논쟁) 풀 스택 vs 풀 사이클 개발자
2

8. • https://www.cockroachlabs.com/blog/2021-cloud-report/
• GCP Outpaces Azure, AWS in the 2021 Cloud Report
OKdevTV
(뉴스) GCP, AWS, Azure 누가 누가 잘하나
3

9. OKdevTV
(뉴스) AWS 엘라스틱 라이선스 변경에 대한 대응 방안 발표
4
• https://aws.amazon.com/ko/blogs/opensource/stepping-up-for-a-truly-open-source-
elasticsearch/
• 엘라스틱 라이선스 변경 발표 이후 AWS에 대한 관심이 집중됨(이유: Amazon Elasticsearch Service에 대한 향후 방향)
• AWS는 정면 돌파를 선택
• 버전 7.10(ALv2) 코드 기반에서 fork: 새로운 깃허브 저장소 준비 중
• 그리고 Open Distro 배포판 활용
• 엘라스틱의 입장(https://www.elastic.co/kr/blog/why-license-change-AWS)
• 향후 어떻게 진행될까?
• 오픈소스와 관련한 논쟁이 가열됨
• 클라우드 업체 주도로 오픈소스 배포판을 유지보수하는 상황이 늘어날 가능성이 매우 높음

10. OKdevTV
(개발) 오라클에서 PostgreSQL로 마이그레이션할 때 주의 사항
5
• https://severalnines.com/database-blog/migrating-oracle-postgresql-what-you-should-know
• 데이터 타입: VARCHAR2 → VARCHAR, NUMBER → 여러 가지 타입, DATE → TIMESTAMP(0), CLOB → TEXT, BLOB
RAW → BYTEA
• 트랜잭션: PostgreSQL에서는 명시적으로 활성화(BEGIN!)
• Dual Table: https://github.com/orafce/orafce (Oracle’s compatibility functions and packages)
• SYSDATE: 오라클에서는 여러 가지 문맥에서 SYSDATE를 사용하지만 PostgreSQL에서는 SQL 시작 시각을
statement_timestamp(), 트랜잭션 시작 시각을 now(), 실제 함수가 실행된 시각 clock_timestamp()로 구분해서 사용
• 특히 orafce에 주목!

11. • https://blog.cloudflare.com/cloudflare-waiting-room/
• 클라우드플레어에서 만든 고객 대기열
OKdevTV
(개발) 클라우드플레어 waiting room
6

12. • https://www.smashingmagazine.com/2021/01/front-end-performance-2021-free-pdf-
checklist/
• 주요 목록 정리
• 성능을 중요하게 여기는 문화를 수립하라
• 가장 빠른 경쟁자보다 20% 더 빠르게 만들어라
• 올바른 메트릭을 선택하라
• 테스트를 위해 ‘깨끗한’ ‘고객‘ 프로파일을 설정하라
• 동료와 점검 항목을 공유하라
• 100밀리초 응답 시간, 초당 60 프레임
• 핵심 파일 크기 < 170KB
• 빌드 도구를 선택하고 설정하라
• 점진적인 개선을 기본으로 가져가라
• 강력한 성능 베이스라인을 선택하라
• 각 프레임워크와 의존성을 평가하라
• 리엑트, 뷰, 앵귤러 등을 잘 선택하라
• API 성능을 최적화하라
• CDN을 현명하게 선택하라
• 일반 텍스트 압축을 위해 Brotli를 선택하라
• 반응형 이미지 AVIF, WebP를 사용하라
• 이미지가 적절하게 최적화되어 있는가?
• 비디오가 적절하게 최적화되어 있는가?
• 웹 폰트가 적절하게 최적화되어 있는가?
• 우선 순위를 올바르게 설정하라
• 서비스 환경에서는 네이티브 자바스크립트 모듈을 사용하라
OKdevTV
(개발) 프론트엔드 성능 점검 항목 – 2021 버전
7
• 자바스크립트 실행은 비싸므로 잘 길들여라
• 자바스크립트를 웹 워커나 웹어셈블리로 오프로딩할 수 있나?
• 레거시 코드는 레거시 브라우저에만 제공하라
• 점진적인 결합도 완화 전략으로 레거시 코드를 분석하고 재작성하라
• 사용하지 않는 CSS/자바스크립트 코드를 찾아서 제거하라
• 자바스크립트 의존성 크기를 줄여라
• 목표 자바스크립트 엔진을 최적화하라
• 클라이언트 쪽 렌더링과 서버 쪽 렌더링을 조화롭게 섞어라
• 외부 애셋을 내부적으로 호스팅하라
• 외부 스크립트의 영향력을 제한하라
• HTTP 캐시 헤더를 적절히 설정하라
• 자바스크립트를 비동기식으로 로드하라
• 값비싼 이미지 렌더링과 디코딩을 지연시켜라
• 중요한 CSS를 빠르게 가져와라
• CSS 규칙의 그룹을 바꾸는 실험을 진행하라
• 배포 속도를 높이기 위해 연결을 미리하라
• 렌더링 성능을 최적화하라
• SSL 인증서 폐지의 영향을 줄였는가?
• 항상 HTTP/2를 선호하라
• HTTP/3에 대응하라
• 서버 보안을 튼튼하게 하라
• Mixed-content 경고를 감시하라
• 404 페이지 성능을 테스트하라

13. • https://www.bruceeckel.com/2021/01/02/the-problem-with-gradle/
• 뭐든 하기 위해서는 모든 것을 알아야 한다.
• 구성이 아니라 프로그래밍이다. 각 구성은 실제로 함수 호출이다.
• Groovy는 자바가 아니다. 코틀린과 유사하다.
• Gradle은 도메인 언어(DSL)를 사용하지만, 기본 빌드 이외의 뭔가를 하려면 더 많은 것을 알아야 한다. 그렇다면 DSL
이 무슨 소용이지?
• 같은 일을 하는 방법이 여러 개다. 무엇을 선택해야 하지?
• 마법. 무슨 일이 일어나는지 모르면 당황하기 쉬움. 동작은 하지만 어떻게 동작하지는 모르는 상황에 부딪힐 가능성이
매우 높다
• 수명주기: doFirst와 doLast를 아십니까?
• 어려운 문서
• 느린 시작 시간
OKdevTV
(개발) gradle의 문제점
8