Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

2021년 1월 23일 개발자 이야기

722 views

Published on

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

Published in: Software
  • Login to see the comments

  • Be the first to like this

2021년 1월 23일 개발자 이야기

  1. 1. CTO 둘이 풀어드리는 주간 뉴스 2021.1.23방송 프론트엔드 성능 점검 항목 – 2021 버전
  2. 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. 3. 오늘의 짤방(1) OKdevTV 스택만이 미래다!ㅋㅋㅋㅋ via @Codenang
  4. 4. 오늘의 짤방(2) OKdevTV via @smartjk
  5. 5. ① js;dr ② 풀 스택 vs 풀 사이클 개발자 ③ GCP, AWS, Azure 누가 누가 잘하나 ④ AWS 엘라스틱 라이선스 변경에 대한 대응 방안 발표 ⑤ 오라클에서 PostgreSQL로 마이그레이션할 때 주의 사항 ⑥ 클라우드플레어 waiting room ⑦ 프론트엔드 성능 점검 항목 – 2021 버전 ⑧ gradle의 문제점 오늘의 소개할 내용 OKdevTV
  6. 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. 7. • https://eminetto.medium.com/full-stack-vs-full-cycle-developer-2a454942291b • 풀 스택 개발자: 데이터베이스, 서버, 시스템 엔지니어링, 클라이언트 작업을 모두 처리할 수 있는 개발자 • 이 정의에 따르면 풀 스택 개발자는 프로그래밍 언어, 데이터베이스, 캐시, 디자인, UX 등등을 모두 알아야 한다! • 신입이 들어오면 멘붕 • 풀 사이클 개발자: 2018년 넷플릭스 기술 블로그에 처음 등장 • 소프트웨어 개발과 관련된 모든 기술(백엔드, 프런트엔드, 데이터베이스, UX 등)을 표면적으로 배우는 대신 설계에서 배포와 지원에 이르기까지 모든 작업을 관리할 수 있는 개발자가 더 중요! OKdevTV (오늘의 논쟁) 풀 스택 vs 풀 사이클 개발자 2
  8. 8. • https://www.cockroachlabs.com/blog/2021-cloud-report/ • GCP Outpaces Azure, AWS in the 2021 Cloud Report OKdevTV (뉴스) GCP, AWS, Azure 누가 누가 잘하나 3
  9. 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. 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. 11. • https://blog.cloudflare.com/cloudflare-waiting-room/ • 클라우드플레어에서 만든 고객 대기열 OKdevTV (개발) 클라우드플레어 waiting room 6
  12. 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. 13. • https://www.bruceeckel.com/2021/01/02/the-problem-with-gradle/ • 뭐든 하기 위해서는 모든 것을 알아야 한다. • 구성이 아니라 프로그래밍이다. 각 구성은 실제로 함수 호출이다. • Groovy는 자바가 아니다. 코틀린과 유사하다. • Gradle은 도메인 언어(DSL)를 사용하지만, 기본 빌드 이외의 뭔가를 하려면 더 많은 것을 알아야 한다. 그렇다면 DSL 이 무슨 소용이지? • 같은 일을 하는 방법이 여러 개다. 무엇을 선택해야 하지? • 마법. 무슨 일이 일어나는지 모르면 당황하기 쉬움. 동작은 하지만 어떻게 동작하지는 모르는 상황에 부딪힐 가능성이 매우 높다 • 수명주기: doFirst와 doLast를 아십니까? • 어려운 문서 • 느린 시작 시간 OKdevTV (개발) gradle의 문제점 8

×