전체 글
HMR의 작은 비밀
개발자의 생산성은 무엇에 달려있을까? 바로 input과 output 간의 이어지는 사이클을 극단적으로 줄여 빠른 피드백을 반복적으로 얻을 수 있는 환경이다. 빌드에 2분이 걸리는 프로젝트가 있고, 코드 변경의 결과물을 확인하기 위해서는 꼭 다시 빌드를 해야 한다고 생각해 보자. 내 코드의 변경사항이 어떤 결과로 나타내는지를 알기 위해서는 2분이라는 시간이 필요하다. 만약 실수했다면? 다시 수정 후 빌드를 하는 2분을 기다려야 한다. 이 시간들은 당신을 좀 더 여유롭게 살 수 있게 해 줄 수 있을지도 모르지만, 적어도 생산적인 사람으로 만들진 못할 것이다. 모든 개발 환경은 이러한 잉여 시간을 줄이고 빠른 피드백을 주기 위해 발전해 왔다. 테스트 코드, HMR(Hot Moudle Replacement), ..
오픈소스 1K Stars 를 달성하며 느낀 것들
vite를 사용해보고자 했던 단순한 마음으로 시작했던 오픈소스가 어느덧 1K Stars를 돌파했다. GitHub - Jonghakseo/chrome-extension-boilerplate-react-vite: Chrome Extension Boilerplate with React + Vite + Typescript Chrome Extension Boilerplate with React + Vite + Typescript - GitHub - Jonghakseo/chrome-extension-boilerplate-react-vite: Chrome Extension Boilerplate with React + Vite + Typescript github.com 누군가에게는 사소한 1K일 수 있지만, 1000명..
근황
0. 직장 동료들과 함께 주말에(!) 영종도에 유명한 카페에 가고 을왕리 해수욕장에도 갔다. 주말에 직장 동료들과 사적인 시간을 보내는게 처음이라서 어색했으나 굉장히 즐거운 시간을 보냈다. 술 한 잔 마시지 않고 11시간을 넘게 같이 있었다... 수다만 엄청 떨었다. 1. Astro Page Transition을 써보려고 블로그를 새로 만들었다. 각잡고 글 올리는 용도의 블로그로 사용할까 생각중... 아마 티스토리는 편하게(?) 무게감 없이 이것저것 적는 용도로 사용할 것 같다. Home Jonghak Seo's blog jonghakseo.github.io 2. 프론트엔드 다이빙 클럽에 다녀왔다. 내가 방문한 회차에는 프론트엔드 테스트 관련한 짧은 세션을 2개 들었는데, 새삼 다들 비슷한 고민들을 하고..
메타프로그래밍 (MetaProgramming)
https://jonghakseo.github.io/posts/metaprogramming/ Metaprogramming This post is about metaprogramming. What is meta programming? jonghakseo.github.io
Proxy로 MockData 관리하기
회사의 스토리북 유지보수 업무를 하면서 Footer와 같은 공통 컴포넌트를 스토리북에 넣어줘야 하는 일이 있었다. 큰 문제없이 작업을 완료하고 원격 저장소에 push를 하니, 로컬에서 빌드되던 스토리북의 배포가 실패하고 있었다. 원인을 살펴보니, Footer 내부에 graphql codgen으로 생성된 typescript 파일에 대한 의존성이 있어서 codegen을 하지 않는 배포환경에서의 스토리북 빌드가 실패하던 것이었다. 정적인 데이터를 위주로 회사의 기본적인 정보를 보여주는 Footer였기 때문에 어째서 서버 타입의 의존성이 있는지 이해하지 못했으나, 자세히 살펴보니 서버 데이터를 기반으로 codgen을 해서 사용하는 일부 enum 값에 대해서 상수처럼 사용하고 있었다. 예를 들어 대표적으로는 다국..
함께 자라기 - 컴퓨터로 대체되기 힘든 일
옥스퍼드 대학교에서 발표한 논문을 참고하여, 직무 역량 DB에 속하는 702개 직종의 컴퓨터 대체 확률을 계산 컴퓨터화에 병목이 되는 주요 역량은 대표적으로 다음과 같음 1. 독창성: 주어진 주제나 상황에 대해 특이하거나 독창적인 생각을 해내기, 혹은 문제를 해결하는 창의적인 방법들을 만들어내기 2. 사회적 민감성: 타인의 반응을 알아차리고 그 사람들이 왜 그렇게 반응하는지 이해하기 3. 협상: 사람들을 화해(조율)시키고 서로 간의 차이를 조정하려고 노력하기 4. 설득: 다른 사람들의 마음이나 행동을 바꾸게 설득하기 5. 타인을 돕고 돌보기: 개인적 도움, 치료, 감정적 지지, 혹은 동료, 고객에게 기타 개인적 도움을 제공하기 논문에서는 프로그래머와 소프트웨어 개발자를 아래와 같이 정의 프로그래머 (스펙..
웹 성능 최적화 끄적끄적
브라우저에서의 렌더링 최적화 DOM 최적화 HTML 구문 오류 최소화 (CPU 리소스 절약) HTML 중첩 완화 (depth 깊을수록 layout 계산 리소스 증가) 지연 로드 (async, defer) GTM(Google Tag Manager) 스크립트 기본값은 async=true GTM 실행 시점을 defer로 미뤄 병목을 방지해야 할까? 트레이드오프 고려 필요 로드 속도를 빠르게 할 수 있지만, 그 효과가 크지 않고 GTM 로드 시점이 늦춰지면서 조기 이탈한 사용자에 대한 정보 누락 가능 https://stackoverflow.com/questions/72531926/defer-attribute-for-the-google-tag-manager 실무에 써먹을 만한 DOM 최적화 windowing 라이..
짜릿해
DragGPT 익스텐션을 만들어서 너무 알차게 쓰고 있다 보니 쓸 때마다 짜릿하다. 제일 많이 사용하는 기능은 번역인데, 구글 번역 익스텐션이 자체적인 dom manipulation을 해버리다 보니 나 태그 사이에 있는 문자들은 이상하게 번역되는 등 귀찮은 이슈들이 있었다. window.getSelection()으로 정직하게 드래그 한 텍스트만 긁어오는 DragGPT에선? 그런 이슈가 없지 후후... 빠른 대화 모드나 gpt4 토글등의 기능도 추가하고서 유용하게 쓰고 있어서 매우 좋다. 대화 기록을 options 창에서 볼 수 있도록 하는 기능은 진행 중인데, 아직까지 큰 필요성을 못 느껴서 진전이 없는 것 같기도 하다. DragGPT 소스코드는 깃헙에 모두 공개되어 잇는데, 신기하게도 미국의 한 스타트..