웹사이트 반응 속도가
왜 중요할까?
Jay(박재호, jrogue@gmail.com)
OKdevTV2020년 9월 5일 개발 이야기

참고자료
• <컴퓨터 vs 책> 블로그
http://jhrogue.blogspot.com/
• 오늘자 방송
https://www.youtube.com/watch?v=CbU5kgUL6uk&list=PLdntWJk2tJPKvRB0mSqC5
tyKUv7HFtcqg&index=2
• 유튜브 채널 OKdevTV > 재미있는 개발 이야기 리스트
https://www.youtube.com/playlist?list=PLdntWJk2tJPKvRB0mSqC5tyKUv7HFtcqg
• 슬라이드 셰어
https://www.slideshare.net/jrogue/presentations OKdevTV

오늘의 주석 via @winterwolf0412
오늘의 짤방
OKdevTV
𝐆𝐞𝐟𝐨𝐫𝐜𝐞 𝐑𝐓𝐗 𝟗𝟗𝟗𝟎 via @d01n

① 오픈소스를 비즈니스화 하는 방법
② 개발자들이 꼭 알아야하는 데이터베이스 지식
③ 개발자를 위한 MySQL 커닝 페이퍼
④ 웹사이트 속도가 왜 중요할까?
⑤ 꼭 설정해야 하는 10가지 멋진 크롬 플래그
⑥ 반응형 웹 페이지 테스트 도구
⑦ IT 기업 기술 블로그 45곳 소개
⑧ 윈도우 10에서 자동 실행 목록 보기
오늘의 소개할 내용
OKdevTV

• https://www.oreilly.com/radar/the-business-of-open-source/
• 오픈 코어 모델 vs 레드햇 모델
• 오픈 코어: 핵심은 오픈 소스, 상용 컴포넌트는 과금
• 예: 엘라스틱
• 문제점: 클라우드 회사들이 서비스 형태로 제공해도 막을 방법이 전무함
• 레드햇 모델: 서비스나 제품에 상표를 사용하지 못함
• 예: 레드햇
• 방법: 소프트웨어를 자유롭게 사용할 수는 있으나 서비스나 제품에 상표를 사용할 수 없음
• 인프라 자동화 도구인 셰프(chef)가 아파치 2.0 라이선스를 따르면서, 셰프라는 이름을 등록했기에 재배포할 때는 셰프
라는 이름을 쓸 수 없음
• 이렇게 하면 오픈소스와 상용 버전의 차이점을 설명할 필요가 없음
• 또한 클라우드 업체들이 오픈소스로 자사 중심의 생태계를 만들지 못함
(오늘의 논쟁) 오픈소스를 비즈니스화 하는 방법
OKdevTV
1

• https://medium.com/@rakyll/things-i-wished-more-developers-knew-about-databases-
2d0178464f78
• 99.999% 동안 네트워크 문제가 없다면 당신은 행운아다.
• ACID에는 다양한 의미가 있다.
• 데이터베이스마다 일관성과 격리 능력이 제각각이다.
• 낙관적인 잠금은 잠금을 얻을 수 없을 때 선택지가 된다.
• 뒤쳐진 데이터 읽기와 데이터 손상 이외에도 여러 가지 문제 상황이 존재한다.
• 데이터베이스와 애플리케이션은 항상 순서에 동의하지 않는다.
• 애플리케이션 수준의 샤딩은 애플리케이션 외부에 존재할 수 있다.
• AUTOINCREMENT는 해로울 수 있다
• 김빠진 데이터는 유용하며 잠금에서 자유로울 수 있다.
• 원자 시계를 갖다 놓더라도 시간은 안 맞기 마련이다.
• 대기시간에는 여러 의미가 있다.
• 트랜잭션 당 성능 요구 사항을 평가하라.
• 중첩된 트랜잭션은 해로울 수 있다.
• 트랜젝션에 애플리케이션 상태를 유지해서는 안 된다.
• 질의 계획기는 데이터베이스에 대해 많은 내용을 말할 수 있다.
• 온라인 마이그레이션은 복잡하긴 하지만 가능하다.
• 데이터베이스 크기가 늘어나면 예측 가능성이 떨어진다.
OKdevTV
(개발) 개발자들이 꼭 알아야하는 데이터베이스 지식2

OKdevTV
(개발) 개발자를 위한 MySQL 커닝 페이퍼
➢https://medium.com/better-programming/the-mysql-cheatsheet-we-all-need-d1af0377bdc6
• MySQL 연결, 사용자 생성
• DML: 데이터베이스 생성, 테이블 생성
• DDL: insert, select, view
• 트랜잭션
• 커서
• 제어 흐름
• 트리거
• 스케줄링
3

OKdevTV
(개발) 웹사이트 반응 속도가 왜 중요할까?4
• https://pjh3749.tistory.com/285
• 성능은 사용자 유지에 핵심이다
• BBC는 사이트 로드시간을 매 초 늘릴 때마다 추가적으로 사용자를 10% 잃는다는 사실을 발견
• Pinterest는 인지하는 대기시간을 40%를 줄였고 이로 인해서 검색 엔진 트래픽과 가입이 15%나 늘어남
• 성능은 전환을 개선시키는 것이다
• Mobify의 경우 홈페이지 로드의 매 100ms 단축마다 1.11%의 세션기반의 전환 증가 → 38만 달러 연간 수익 향상
• 결제 페이지에서 100ms의 페이지 로드 개선은 1.55% 세션기반의 전환 증가 → 53만 달러 연간 수익 향상
• 성능은 사용자 경험에 관한 것이다
• 모바일 장비는 제한된 CPU 파워와 메모리를 탑재하며, 종종 적은 양의 최적화 되지 않은 코드로 인해 문제가 발생
• 성능은 사람에 관한 것이다.
• 빠르고 가벼운 사용자 경험이 위기의 순간에 처한 사용자에게 매우 중요

OKdevTV
(개발) 꼭 설정해야 하는 10가지 멋진 크롬 플래그5
https://medium.com/better-programming/10-awesome-chrome-flags-you-should-enable-right-now-2684e4518cb5
• Reader Mode: chrome://flags/#enable-reader-mode
• Focus Mode: chrome://flags/#focus-mode
• Impulsive-Style Scroll Animations: chrome://flags/#impulse-scroll-animations
• Tab Groups: chrome://flags/#tab-groups
• PDF Two-Up View: chrome://flags/#pdf-two-up-view
• Force Dark Mode for Web Contents: chrome://flags/#enable-force-dark
• Quieter Notification Permission Prompts: chrome://flags/#quiet-notification-prompts
• Tab Hover Cards: chrome://flags/#tab-hover-cards chrome://flags/#tab-hover-card-images
• Enable Page Sharing via QR Code: chrome://flags/#sharing-qr-code-generator
• Parallel Downloading: chrome://flags/#enable-parallel-downloading

• https://responsively.app/
• 특정 디바이스에서 이벤트를 주면 다른 디바이스에도 동일하게 전파
• 필요에 따라 디바이스 배치 레이아웃을 조정
• 강력한 엘리먼트 검사기
• 내장 디바이스 프로필(30+ 이상)
• 원 클릭 스크린샷
• 핫 리로딩 지원
OKdevTV
(개발) 반응형 웹 페이지 테스트 도구6

• https://blog.naver.com/sicle_official/222071769230
• 개발자로 경력을 전환한 비전공자들의 학습을 돕기 위해 정리한 블로그
• 최신 개발 지식과 기술 학습에 유용한 교재
• 오픈소스로 도움을 받을 수 있음
• 기술 블로그 개발자 채용 공고에도 주목할 필요가 있음
OKdevTV
(개발) IT 기업 기술 블로그 45곳 소개7

• 윈도우 10에서는 msconfig로는 자동 실행 목록을 볼 수 없다
• 하지만 뭔가 불편하다… 그럴 때 autoruns를 사용!
OKdevTV
(우리가 몰랐던 사실) 윈도우 10에서 자동 실행 목록 보기8
• https://docs.microsoft.com/en-us/sysinternals/downloads/autoruns