일요일 오전에 메모 링크 회고 #1을 작성한 후, 하릴없이 붉은 사막에서 노니다 어느덧 새벽 1시가 되었는데,

출근을 위해 잠자리에 들어야 함에도 머릿 속 뇌가 "주인님 마저 작성해야 하지 않을까요?" 하는 바람에 링크 회고 작성을 하게 되었다. (....)

https://dongmin-jang.medium.com/frontend-service-worker-%EC%84%9C%EB%B9%84%EC%8A%A4-%EC%9B%8C%EC%BB%A4%EA%B0%80-%EB%AC%B4%EC%97%87-2dab5d60f611

• 서비스 워커가 무엇인지에 대한 간략한 소개
• 이 메모를 저장할 때까지만 해도 W3C 표준이 아니었다.
• 직접 구현보다는 google workbox나 VITE PWA로 많이 쓰이는 듯.
  • 허나 직접 구현도 꽤 되는 편이다. 알게 모르게.

https://www.zerocho.com/category/Webpack/post/58ad4c9d1136440018ba44e7

• 제로초님의 9년전 글.
• 웹팩 5로 청크관리 및 코드 스플리팅 설정법에 대해 논한다.
• 현재는 Vite를 많이 쓰지만 Webpack 을 사용해야 할 때 예전 자료를 들춰볼 일이 있을지도 모른다.
  • 하지만 AI가 다 해주겠지...

https://hodolman.tistory.com/24

• 비슷한 글로, 호돌맨님의 7년전 글. 웹팩 4~5.x 에서 스플릿 청크르 무시하는 법에 대해 논한다.

https://taegon.kim/archives/9919

• 코드쓰는사람 김태곤님의 한글 지원 퍼지 문자열 구현 예 아카이브.
• 타입센스 같은 좋은 아이템을 써먹어야지 하다가 이런 걸 봤던 기억이 난다.
• 쓸 일이 있으면 다시 꺼내볼 만 하겠다 싶다.

https://github.com/yamoo9/Vue-CAMP/blob/master/Document/vue-jsx.md

• 9년전 야무님 뷰 코딩 캠프에 쓰였던 Vue에서 jsx 를 사용하는 방법에 대해 논한 글.
• 작성 일시가 그렇고 그렇다보니, Vue 2.x 에 대한 내용이다.
• 지금 와서 하는 얘기지만, 결국 끝에 끝까지 Vue 2.x에서는 JSX를 한 번도 써보지 않음. 굳이 쓸 필요가 있지도 않았고.

https://ielselog.blogspot.com/2013/09/understand-css-trasition.html

• 메모로 기록한 것들 중에 가장 오래된 링크. 2013년의 링크로, 대학생 시절에 저장해둔 링크이다.
• CSS Transition 이해에 대한 내용으로, 좋은 설명을 담고 있다.
• IE9 이하에서 작동하지 않는다는 설명이 있어서 굉장히 세월을 체감하게 하는 글

https://kaminion.tistory.com/75

• 시놀로지 웹스테이션에 SSL을 설정하게 하는 법...에 대한 글인데,
• 시놀로지 OS가 5.x or 6.x 를 사용하고 있어서.. 요즘에는 안 맞는 가이드이다.
• 헤놀로지 할 때 도움이 될까?

https://github.com/kaesetoast/find-in-files

• Node.js용 도구로, 다수의 파일에서 텍스트 패턴을 찾을 때 쓰는 툴이다.
• 메모해놓고 한 번도 안써봤다. 아마 파일 내부나 코드 내부에서 검색할 패턴을 찾는 일을.... 2019~2020년쯤에 했었지 싶은데, 그 때 저장해놨던 모양.

https://tobiasahlin.com/spinkit/
https://github.com/tobiasahlin/SpinKit

• 엄청 유명한 개발자님으로 기억한다. 그분의 CSS Spinner 예제.
• 이미지 없이, SVG 없이 CSS 만으로 구현한 걸로 알고 있다.
• 이 예시가 6년 전 마지막 업데이트, 12년 전 최초 업데이트란 걸 감안하면 참 대단하다 싶다.

https://velog.io/@dev-tinkerbell/display-none%EC%9D%B4-transition%EC%9D%B4-%EC%95%88%EB%A8%B9%ED%9E%88%EB%8A%94-%EC%9D%B4%EC%9C%A0

• CSS display:none 이 transition이 먹히지 않는 이유에 대해 논한 글.
• 오래된 글이지만 지금도 보기 좋은 글이다.

https://velog.io/@neity16/NodeJS-%EB%B3%B4%EC%95%88helmet

• nodejs의 express 보안 라이브러리인 helmet에 대해 소개한 글.
• 예전에는 필수 보안 패키지 같은 느낌이었는데, 요즘에는 기본 보안 헤더 세팅을 간소화하는 유틸리티 같은 느낌이 되었다.
• 보안 헤더 설정을 실수 없이 적용하는 도구라 하면 정확하겠다.

https://velog.io/@taylorkwon92/%EC%98%A4%EB%8A%98%EC%9D%98-TIL

• 웹 브라우저 컨텐츠 정책인 CSP에 대한 설명글.
• 설명이 자세하게 되어 있다기보단 깔끔하고 간결하게 설명되어있다.

https://blog.ull.im/engineering/2019/03/31/node-js-production-best-practices.html

• Node.js 프로덕션 환경을 위한 Best Practice 모음... 이라지만 요즈음에도 유용한 글.
• 언제나 프로덕션 환경을 위한 설정은 한결같다. 모니터링, 로그, 종속성 잠그기, 올바른 도구와 올바른 프로세스 실행 상태 유지하기. 모든 CPU 코어 활용하기.
• 몇 가지 동의 못하는 부분이 있긴 하지만 전반적으로 좋은 글.

https://dololak.tistory.com/126

• Node.js 로깅에 대한 도로락님 게시글. winston 모듈에 대한 글이다.

https://stackoverflow.com/questions/21172889/express-send-a-page-and-custom-data-to-the-browser-in-a-single-request

• Express에서 HTML 페이지와 JSON 데이터를 한 번의 요청으로 같이 보내는 방법에 대한 질의
• res.render()와 res.send()를 연속 호출할 수는 없다.
• 전체 HTML 응답 안에 서버 데이터를 JSON.stringify() 해서 <script> 변수로 주입하거나, AJAX 응답이면 HTML partial을 문자열로 렌더링해 JSON에 포함시키는 방식으로 해결봐야한다.... 는 답변 내용임.

https://stackoverflow.com/questions/57146485/monaco-editor-intellisense-from-multiple-files

• Monaco Editor에서 여러 JS 파일 간 export/import 관계를 기반으로 IntelliSense를 동작시키는 방법에 대한 질의
• 파일마다 monaco.editor.createModel()로 모델을 만들고, 단일 editor 인스턴스에 필요할 때 setModel()로 바꿔 끼우며, setEagerModelSync(true)를 설정하면 된다고 답변하고 있다.
• 이 질문을 기록할 때 Monaco Editor를 활용한 파일 분석 도구를 만들었던 기억이 난다. 그 서비스는 아직도 살아있을런지.

https://stackoverflow.com/questions/45629937/monaco-editor-pre-populate-find-control-with-text

• Monaco Editor의 Find 창을 열 때 검색어를 미리 채우는 방법에 대한 질의
• 검색할 텍스트 범위를 먼저 선택한 뒤 actions.find를 실행하면 선택 문자열이 검색창에 들어간다고 한다.
• 이것도 위 질문을 찾아볼 때 같이 알아봤었다. 같이 기록되어있었음.

https://stackoverflow.com/questions/54697757/read-file-inside-current-directory-using-vue

• .vue 파일과 같은 디렉터리의 hello.txt를 XHR로 읽으려는데 HTML이 반환되는 문제
• 당연한 얘기지만 이 때는 몰랐어서 찾아봤던 것.
• 브라우저 런타임 기준의 상대경로와 소스의 경로는 엄연히 다른 법이다.
• Vite를 쓰는 요즘 같으면, import text from './hello.txt?raw' 정도로 하면 되지 않을까.

https://stackoverflow.com/questions/50019563/display-doughnut-pie-chart-as-circle-progress-chart-js

• 차트JS 도넛 차트를 응용해 프로그래스 서클 (진행도)로 응용하는법에 대한 질문
• 이건 지금 봐도 신박한데 싶다.
• dataset에 percent를 두고 플러그인의 beforeInit에서 [percent, 100 - percent]로 데이터를 구성. beforeDraw에서 중앙 텍스트를 직접 그림. 툴팁은 실제 진행률 조각에만 표시하도록 필터링하라고 조언한다.

https://stackoverflow.com/questions/18447970/content-security-policy-data-not-working-for-base64-images-in-chrome-28

• CSP에서 data를 허용했는데 Chrome에서 base64 이미지가 막히는 문제에 대한 질의.
• Chrome 28 기반에서 묻고 있지만... CSP 문법 규칙에 따른 것이므로 이 질문과 답변은 요즘에도 유효하다.
• 결과적으로, CSP scheme source는 data가 아니라 data:처럼 콜론을 붙여야 한다.
• img-src 'self' data:가 정답. 단, data: 허용은 보안 영향을 고려해야 한다.
• 이게 이 꼬라지가 난 건 결국 CSP 문법이 직관적이지 않아서인데, 브라우저는 이를 더 엄격하게 처리하기때문에...
• 옛날에는 이게 버그였겠지만, 지금은 의도된 동작이라는 점에서 다르다고 하겠다.

이로써 옛날 링크는 다 털었음. 조만간 새 링크도 털어보도록 하자.