공부내용 공유하기
Nextjs 12.3.4 -> 13.5.6 버전업 후 정적파일 CORS 에러
금일 정기배포 이후 www.creatrip~ 에서 요청하는 js chunk 파일에 대한 CORS 에러가 발생했다. 이 얼마 만에 보는 CORS 에러란 말인가...! 우리 회사에서는 nextjs 빌드 후 생성된 정적 파일은 s3 - cloudfront를 통해서 캐싱 후 제공하고 있는데, 배포 전 후로 설정을 바꾼 부분은 없는 상황이었다. 일단 cdn에서 제공하는 정적 파일에 대한 응답 헤더에 정책을 생성하고, 해당 정책에서 www가 붙은 도메인, 붙지 않은 도메인에 대해 모두 오리진을 추가해서 대응해 주었다. 빠르게 대응은 했는데, 대체 왜 갑자기 문제가 생긴 것인지 파악을 하기가 여간 쉽지 않았다. 처음에는 해당 이슈가 배포 직후에 발생한 문제인지에 대한 확신도 서지 않았고, SSG 등으로 생성된 정적..
메타프로그래밍 (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 값에 대해서 상수처럼 사용하고 있었다. 예를 들어 대표적으로는 다국..
웹 성능 최적화 끄적끄적
브라우저에서의 렌더링 최적화 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 라이..
Typescript의 공변성과 반공변성
공변성과 반공변성 '공변성(Covariance)'과 '반공변성(Contravariance)'은 Typescript를 다루는 개발자라면 누구나 매일매일 접하고 또 사용하는 개념이지만, 나를 포함해서 해당 개념을 매번 의식하고 인터페이스를 설계하는 사람은 많지 않을 것이다. 공변성과 반공변성이 타입스크립트에서 가지는 의의를 이해하기 전에, 먼저 공변성이 뭔지, 반 공변성이 뭔지부터 이해하고 가보자. 공변성 더 많이 파생된(더 구체화된) 형식을 사용할 수 있다. I 형식의 변수에 할당할 수 있다. 쉽게 풀어서 설명하려고 해도 되지 않으니 예시를 들어서 한 번 살펴보자. 다음과 같은 타입 A,B,C가 있다. type A = string type B = string | number type C = string |..
TCP/IP 인터넷(네트워크) 계층
TCP/IP 인터넷(네트워크) 계층 역할 세 줄 요약 IP 프로토콜을 사용하여 호스트 간의 통신에 필요한 주소 관리와 경로 제어를 수행한다. 패킷을 라우팅하여 수신 호스트까지 전달한다. 데이터의 오류 확인 및 수정을 위한 ICMP 프로토콜을 제공한다. 주요 프로토콜 프로토콜이란? 패킷 교환 과정에서 정보를 주고받는 데 사용하는 규약이며, 송/수신 호스트의 주소 지정과 패킷 분할 및 조립 기능을 담당 = 인터넷에서 컴퓨터들이 서로 정보를 주고받는 데 쓰이는 통신규약 IP 프로토콜 (Internet Protocol) 대표적인 프로토콜 (IP가 이미 인터넷 프로토콜의 약자인데 왜 IP 프로토콜이라 부르는지...?) 송/수신 호스트가 패킷 교환 네트워크(PSN: 패킷 스위칭 네트워크)에서 정보를 주고받는데 사용..
프로세스 스케줄링(Process scheduling)
Scheduler? 기본적으로 모든 프로세스는 크게 두 가지 단계로 이루어져 있다. 하나는 CPU만 사용하는 CPU burst 단계, 다른 하나는 I/O(input/output) 작업만 하는 I/O burst 단계이다. 각 프로세스는 CPU에 할당되어 작업을 하게 되고, 해당 CPU의 자원을 점유하여 하고자 하는 동작을 실행한다. 문제는 I/O busrt 단계에서는 CPU가 놀게 된다는 점이다. CPU가 노는 시간을 줄이기 위해 고안된 방법이 바로 스케줄링, 이러한 동작을 하는 모듈을 스케줄러라고 한다. 목적 프로세스 스케줄링은 다음 두 가지 목적을 위해 존재한다. CPU의 성능을 높인다 프로그램의 성능을 높인다 CPU 입장에서의 성능이란? 다음과 같이 나타낼 수 있다. CPU 이용율: 전체 시간 중 쉬..
[디자인 패턴] 커맨드 패턴, 팩토리 메서드 패턴, 상태 패턴
커맨드 패턴 세 줄 개념 실행 기능 단위로 캡슐화 함으로써 여러 기능을 실행할 수 있는 재사용성 높은 클래스 설계 기능 자체를 캡슐화 하기 때문에 Invoker와 Reciver간의 의존성 자체를 제거(기능 자체의 세부구현 변경이 Invoker와 Reciver의 수정 없이 이뤄질 수 있음) 기능 자체를 다루는 로직이 필요할 때 사용(되돌리기, 히스토리 기록 등) 유용한 사례 실행 취소가 가능한 명령들을 다양하게 다뤄야 하는 텍스트 에디터 보상 트랜잭션 공유 리소스를 바탕으로 병렬 처리를 원할 때(ex. 커맨드 단위로 멀티 스레드에서 동작) 느낀 점 처음에 커맨드 패턴을 코드상에서 봤을 때 마치 side effect를 적극적으로 사용하는 패턴으로 보였음 excute()의 반환 타입이 실질적인 응답 데이터를 ..
[디자인 패턴] 싱글톤, 데코레이터
싱글톤 패턴 세 줄 개념 클래스의 인스턴스화를 단일 인스턴스로 제한하여 하나의 객체 사용을 강제하는 패턴 두 개 이상의 인스턴스화를 방지하는 게 핵심 구현 방법 메모리 사용에서의 이점 + 하나의 데이터 출처를 강제하는 용도로 사용 유용한 사례 Logger 많은 곳에서 사용되며 사이드 이펙트가 없고 인스턴스를 재활용했을 때의 효용이 높음 공유 리소스에 대한 동시 엑세스 제어 리소스에 대한 엑세스를 전역에서 요구 하나의 객체만 존재해야 하는 경우 위 세 개의 조건을 모두 만족하는 경우 고려해 볼 수 있음(무조건 사용해야 하는것이 아님) 문제점 싱글톤은 SRP를 위반한다 싱글톤 객체는 자기 자신의 인스턴스를 감시하는 책임 + 스스로의 구성정보를 제공하는 책임. 두 개의 책임을 가지고 있는 객체 메모리 관리에 ..
1년간 React 테스트를 작성하며 겪은 이슈 10가지
테스트 환경은 다음과 같습니다. - jest (27.0.6 -> 28.1.3) - jsdom (16.6.0 -> 19.0.0) - @testing-library/react (12.0.0) - @testing-library/user-event (13.5.0) 1. JSDOM 환경에서 innerText 감지 불가 Select 컴포넌트를 확장한 DropdownSelect 컴포넌트의 테스트를 하던 중, 선택된 값을 감지할 수 없는 이슈가 발생했습니다. (Select 컴포넌트는 여러 옵션 중 하나를 선택할 수 있도록 해주는 UI 컴포넌트로, Renderer 컴포넌트를 동적으로 받아 다양한 요구사항에 대응할 수 있는 컴포넌트입니다) 문제가 발생한 테스트는 DropdownSelect에서 특정 값을 선택하는 과정이 포..