22. 9월 스크랩

1. 90년대 Cursor 효과들 (링크)

• 마우스 커서를 따라다니면서 보여주던 다양한 효과들을 최신 자바스크립트 기술로 재구현
• JS 라이브러리로 제공되어 자신의 사이트에 쉽게 추가 가능
• 무지개가 따라다니는 Rainbow
• 시계가 따라와서 고정되는 Clock
• 마우스 잔상을 남기는 Ghost 와 Trailing
• 눈송이가 떨어지는 Snowflakes
• 공기방울이 위로 올라가는 Bubbles
• 이모지가 비처럼 떨어지는 Emoji Rain

2. 어느 40년 차 프로그래머의 회고 (링크)

• 노아 깁스라는 프로그래머가 남긴 회고록에서 인상깊었던 8가지 내용만 추려봤습니다.

1. 소프트웨어 개발은 아직 젊다
   -> 경험이 많은 첼로 연주자의 경력보다 소프트웨어 개발의 역사가 더 짧습니다. 우리가 일하고 있는 분야는 아직 젊습니다.
2. 젊어서 시작할 필요가 없다
   -> 20대, 30대, 40대에 시작한 뛰어난 프로그래머를 만났습니다. 50대나 60대에 시작하지 못하는 이유를 모르겠습니다. 시간과 노력이 필요하지만 젊을 필요는 없습니다.
3. 순서가 승패를 좌우하지 않는다
   -> 40년 동안 많은 트렌드가 왔다가 사라집니다. 거의 모든 분야에서 당신이 배울 것이 있다는 것이 밝혀졌습니다. 당신이 새로운 것을 배우려고 시도하는 한, 그 순서는 별로 중요하지 않습니다. 다양한 분야의 프로그래밍을 시도하세요. 순서는 상관하지 말고 시도해 보세요.
4. 아직 시간은 많다
   -> 약 10년의 경력을 가진 한 첼로리스트가 있다고 가정해 볼게요. 그가 복잡한 클래식 음악을 연주해야 하는지 아니면 대중적이고 재즈적인 음악을 연주해야 하는지 고민해 보세요. 아마 클래식 음악은 그의 테크닉을 향상시키고 인기 있는 재즈 음악은 그에게 폭을 줄 것입니다.
   -> 둘의 장점을 비교할 수도 있겠지만 사실 정답은 단순해요. 둘 다 가치가 있으므로 무언가를 선택하고 실행하면 됩니다. 30년 더 유지한다면 어느 것을 선택하느냐가 그렇게 중요하지 않습니다. 둘 다 당신을 더 낫게 만들어 줄 거예요.
5. 일이 좋아야 한다
   -> 왜 소프트웨어 개발을 하게 되었나요? 그것이 무엇인지 알아내려고 노력하세요. 당신은 무엇을 좋아했나요? 무엇이 당신을 끌어들였나요? 좋은 점은 무엇입니까? 모든 사람이 동일한 이유를 가지고 있지 않습니다. 당신만의 이유를 찾으세요.
6. 스프린트나 마라톤이 아니라 다이어리다
   -> 계속 일하세요. 당신을 더 낫게 만드는 무한한 흥미로운 작업이 있습니다. 우리는 단거리 달리기나 마라톤을 뛰고 있는 것이 아닙니다. 이건 일기를 쓰고 있는 과정입니다. 10년 후에 페이지를 다시 넘기며 이렇게 말해보세요, "와, 내가 멋진 일을 했네".
7. 일과 경력을 혼동하지 마세요
   -> 작곡과 연주로 돈을 받는 사람들이 있습니다. 그러나 다수의 음악가는 돈을 받지 않으면서도 여전히 그 일을 합니다. 작업은 흥미롭고 강력하며 만족스럽습니다. 급여를 받을 수 있다면 더 많은 시간을 일할 수 있습니다. 그러나 일은 일 자체로 의미가 있고, 경력은 단지 당신이 일을 할 수 있도록 길을 닦는 것입니다. 저에게 소프트웨어 작성은 그런 것입니다.
8. 다른 분야를 보고 다른 분야에서 배우세요
   -> 우리 분야가 젊다면 그것은 무엇을 의미할까요? 이는 우리가 여전히 기본 사항을 파악하고 있다는 의미입니다. 다른 분야에서 많은 것을 배울 수 있습니다. 나는 예술가의 연습 방법을 훔치는 방법에 대한 책을 썼습니다. 미술 및 음악 교사가 컴퓨터 공학 교수보다 나을 수 있습니다. 그들은 우리보다 수천 년을 먼저 시작했습니다.

3. CORS 캐싱하기 - 성능과 비용을 위해 (링크)

CORS preflight 란 ?

• 복잡한 요청을 보내기 전에 OPTIONS로 권한을 있는지 먼저 요청하는 것
• 하지만 실제로는 대부분의 요청들이 이걸 필요로 함 (JSON/XML 바디가 있거나 크레덴셜을 포함하거나 등등 )
• 이게 나쁜 이유는 실제 요청에 걸리는 시간이 늘어난 다는 것
  • OPTIONS 리퀘스트는 기본적으로 캐싱이 불가능해서, CDN들도 보통 처리하지 않아 요청이 서버까지 도달함
  • 이 값들은 클라이언트에서 캐싱되며 기본적으로 5초만 유지됨.
    • 즉 웹페이지가 API 폴링을 10초마다 한다면 preflight가 10초마다 한번씩 이루어짐
  • 많은 경우 브라우저 클라이언트의 API 레이턴시를 증가시켜, 사용자 입장에서 성능이 절반으로 떨어짐
  • 또한 API 서버에 쓸데없는 부담을 주고 비용을 증가 시킴
  • 특히나 서버리스라면 더더욱. Lambda, Netlify Functions, Cloudflare Workers, Google Cloud Functions 모두 함수 호출당 비용을 받으므로, 이 preflight 도 그것에 포함됨

preflight 응답을 캐쉬하는 방법

• 브라우저에서 캐싱해서, 불필요한 동일 preflight 요청을 보내지 않게 만들기
• CDN 레이어에서 캐싱해서, 이 요청들을 실제 백엔드 서버가 처리할 필요없이 응답하도록 처리하기

CORS caching for browsers

• preflight 응답에 다음 헤더를 추가 Access-Control-Max-Age: 86400
• Firefox는 86400(24시간) 까지 가능하지만 크로미엄 기반 브라우저는 7200(2시간)이 최대 값

CORS caching for CDNs

• CDN 또는 프록시에서 캐싱하기 위해서 다음 헤더를 추가
  Cache-Control: public, max-age=86400
  Vary: origin
• 중요한 건 OPTIONS는 기본적으로 캐싱하게 되어있지 않기 때문에 표준이 아니라는 것. 하지만 대부분의 CDN이 지원함

Configuration 예제

• Caching CORS with AWS Lambda
• Caching CORS in Node.js
• Caching CORS in Python
• Caching CORS with Java Spring