금일 정기배포 이후 www.creatrip~ 에서 요청하는 js chunk 파일에 대한 CORS 에러가 발생했다. 이 얼마 만에 보는 CORS 에러란 말인가...! 우리 회사에서는 nextjs 빌드 후 생성된 정적 파일은 s3 - cloudfront를 통해서 캐싱 후 제공하고 있는데, 배포 전 후로 설정을 바꾼 부분은 없는 상황이었다. 일단 cdn에서 제공하는 정적 파일에 대한 응답 헤더에 정책을 생성하고, 해당 정책에서 www가 붙은 도메인, 붙지 않은 도메인에 대해 모두 오리진을 추가해서 대응해 주었다. 빠르게 대응은 했는데, 대체 왜 갑자기 문제가 생긴 것인지 파악을 하기가 여간 쉽지 않았다. 처음에는 해당 이슈가 배포 직후에 발생한 문제인지에 대한 확신도 서지 않았고, SSG 등으로 생성된 정적..

https://jonghakseo.github.io/posts/metaprogramming/ Metaprogramming This post is about metaprogramming. What is meta programming? jonghakseo.github.io

회사의 스토리북 유지보수 업무를 하면서 Footer와 같은 공통 컴포넌트를 스토리북에 넣어줘야 하는 일이 있었다. 큰 문제없이 작업을 완료하고 원격 저장소에 push를 하니, 로컬에서 빌드되던 스토리북의 배포가 실패하고 있었다. 원인을 살펴보니, Footer 내부에 graphql codgen으로 생성된 typescript 파일에 대한 의존성이 있어서 codegen을 하지 않는 배포환경에서의 스토리북 빌드가 실패하던 것이었다. 정적인 데이터를 위주로 회사의 기본적인 정보를 보여주는 Footer였기 때문에 어째서 서버 타입의 의존성이 있는지 이해하지 못했으나, 자세히 살펴보니 서버 데이터를 기반으로 codgen을 해서 사용하는 일부 enum 값에 대해서 상수처럼 사용하고 있었다. 예를 들어 대표적으로는 다국..

브라우저에서의 렌더링 최적화 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 라이..

공변성과 반공변성 '공변성(Covariance)'과 '반공변성(Contravariance)'은 Typescript를 다루는 개발자라면 누구나 매일매일 접하고 또 사용하는 개념이지만, 나를 포함해서 해당 개념을 매번 의식하고 인터페이스를 설계하는 사람은 많지 않을 것이다. 공변성과 반공변성이 타입스크립트에서 가지는 의의를 이해하기 전에, 먼저 공변성이 뭔지, 반 공변성이 뭔지부터 이해하고 가보자. 공변성 더 많이 파생된(더 구체화된) 형식을 사용할 수 있다. I 형식의 변수에 할당할 수 있다. 쉽게 풀어서 설명하려고 해도 되지 않으니 예시를 들어서 한 번 살펴보자. 다음과 같은 타입 A,B,C가 있다. type A = string type B = string | number type C = string |..

TCP/IP 인터넷(네트워크) 계층 역할 세 줄 요약 IP 프로토콜을 사용하여 호스트 간의 통신에 필요한 주소 관리와 경로 제어를 수행한다. 패킷을 라우팅하여 수신 호스트까지 전달한다. 데이터의 오류 확인 및 수정을 위한 ICMP 프로토콜을 제공한다. 주요 프로토콜 프로토콜이란? 패킷 교환 과정에서 정보를 주고받는 데 사용하는 규약이며, 송/수신 호스트의 주소 지정과 패킷 분할 및 조립 기능을 담당 = 인터넷에서 컴퓨터들이 서로 정보를 주고받는 데 쓰이는 통신규약 IP 프로토콜 (Internet Protocol) 대표적인 프로토콜 (IP가 이미 인터넷 프로토콜의 약자인데 왜 IP 프로토콜이라 부르는지...?) 송/수신 호스트가 패킷 교환 네트워크(PSN: 패킷 스위칭 네트워크)에서 정보를 주고받는데 사용..