presentation
presentation

2019년 10월 첫째 주

September 29, 2019
report

Why I’m better Developer than You, 2019.8.4

무엇이 자신을 괜찮은 개발자로 만들어주는지 그가 스스로 생각한 점을 얘기해준다.

  1. vim을 사용 (vimtutor)
  2. Knowing data structures and algorithm (coursera, mit open courseware, sphere online judge)
  3. sleep enough

Why i stopped using Service Workers, 2019.9.30

그가 어떤 웹 사이트를 Create-react-app(CRA)으로 만들었었고, 그 당시 CRA는 자동으로 서비스워커를 포함시켰다. 그는 나중에 이 사실을 알았고, 서비스워커가 정적 파일들을 캐시해준다는 사실에 이를 좋게 여겼다.

그런데 이후 사이트를 새롭게 배포해도 이용자들이 이전 버전의 사이트를 사용하고 있는 문제점을 발견하게 된다. 이 문제는 사용자가 페이지를 리프레시해야 해결이 되었는데, 이는 서비스 워커의 동작 방식에 의거한 현상이었다.

서비스 워커가 캐시로 동작할 때는 기본적으로 클라이언트와 서버 사이에 위치하게 되는데, 기존의 서비스워커가 새로운 서비스워커를 다운받게 되면 새로운 서비스워커는 대기 상태에 들어간다. 이후 기존의 서비스워커가 완전히 종료되어야 새로운 서비스워커가 활성화된다.

그는 skipWaiting()이라는 걸 발견했고, 이 메소드는 새로운 서비스워커가 발견됐을 때 대기상태로 두지 않고 활성화하게 해주었다. 그러나 이게 새로운 정적 파일들을 현재 열린 페이지 바로 적용시키는 걸 의미한 건 아니었다. 사용자는 여전히 refresh를 해야 새로운 컨텐츠를 볼 수 있었다.

이에 대해 사용자에게 새로운 컨텐츠가 있음을 알리고 refresh 버튼을 어딘가에 표시하는 UX를 생각했지만, 이게 좋은 UX가 아니라 생각하여 아예 서비스워커를 걷어내기로 결심한다.

이 링크의 댓글을 보면, google workbox library와 pre-caching을 사용하여 미리 캐시를 최신 상태로 만들 수 있을 거라는 내용이 있다.

웹폰트 최적화 기법에 관한 몇가지 이야기, 2018.2.2

How to Store JWT for Authentication

JWT의 Access token을 메모리에 저장하고 refresh token을 쿠키에 저장함으로써 access token을 local storage나 cookie에 저장하여 XSS와 CSRF를 방어할 수 있는 전략에 대해서 얘기함

The Ultimate Guide to handling JWTs on frontend clients (GraphQL)

JWTs (JSON Web Token, pronounced ‘jot’) are becoming a popular way of handling auth. This post aims to demystify what a JWT is, discuss its pros/cons and cover best practices in implementing JWT on the client-side, keeping security in mind. Although, we’ve worked on the examples with a GraphQL clients, but the concepts apply to any frontend client.