2024/03 5

브라우저 캐시 정책으로 인한 버전 충돌 에러 해결

개요 얼마전에 회사에 내가 작업한 코드가 배포되었는데 직후 실 서비스에서 엄청난 에러로그가 발생하여 바로 롤백을 하게된 일이 있었다. 원인으로는 새로운 버전이 배포되면서 이전 버전을 사용하고 있던 유저가 페이지를 새로고침 하지 않고 내부 팝업을 열었을때에 새로운 버전의 코드를 가져와 오래된 버전의 코드와 충돌이 발생하는것이였으며, 새로운 버전의 코드를 가져오면 해당 코드로 잘 동작하는것이 당연하다고 생각할 수 있지만 회사 프레임워크에서 어떠한 파일을 실행할때에 내부적으로 클로저로 한번 감싸 오래된 코드가 남아있을 수 있는 가능성이 잠재되어 있었다. 물론 이러한 방식은 캐시가 정상적으로 동작한다고 가정하였을때에 유효한 방식이라고 말할 수 있다. 하지만 캐시가 정상적으로 동작하지 않았으며 내가 배포한 코드가..

browser 2024.03.31

브라우저는 어떻게 캐시 만료시간을 정하나요?

기본적으로 서버쪽에서는 response header에 “expires", "cache-control”, “max-age”, 클라이언트 쪽에서는 fetch시에 header의 cache 값을 통해 캐시의 만료, 정책 설정이 가능하다. 네트워크 요청시에 요청의 response header에 cache-control, expires, max-age 등을 포함해서 캐시의 만료 정책을 명확하게 나타내는 헤더 설정이 없고 last-modified 설정만 존재한다면 대부분의 브라우저는 heuristic freshness 라는 정책을 사용하여 캐시 기간을 설정한다. 계산식은 아래와 같다. which is the one suggested by RFC 7234 (date time - last modified time) / ..

browser 2024.03.29

Docker, AWS ECR,Lambda를 사용하여 node.js function serverless로 배포하기

먼저 Docker를 다운받는다. docker가 없어도 lambda에 함수를 올리는건 쉽게 할 수 있지만 환경이 바뀔때마다 혹은 어딘가에 배포를 할때마다 매 번 환경을 맞춰줄수는 없으니 되도록 docker를 사용하는것이 좋다 로그인은 따로 진행하지 않아도 된다. https://www.docker.com/products/docker-desktop/ Docker Desktop: The #1 Containerization Tool for Developers | Docker Docker Desktop is collaborative containerization software for developers. Get started and download Docker Desktop today on Mac, Windows..

devops 2024.03.26

타입스크립트에서 타입 호환성은 어떻게 체크되는가?

아래의 코드를 봐보자 class Programmer { name:string; constructor(name:string) { } } class Manager { name:string; constructor(name:string) { } } let employee:Programmer = new Manager('Jongsik') Programmer와 Manager는 같은 구조의 클래스이다. 타입스크립트에서는 이러한 상황에 Programmer 타입과 Manager 타입은 같은 타입이라고 판단하여 에러를 발생시키지 않는다. 아래 이미지와 같은 예시에서도 마찬가지이다 분명 Manager타입에 Programmer 타입을 넣었는데 에러가 발생하지 않는것을 확인할 수 있다. 이로써 알 수 있는것이 하나 있다. 타입스..

typescript 2024.03.13

타입스크립트의 제네릭이란

제네릭은 타입스크립트에서 재사용이 가능한 컴포넌트를 생성하는것을 도와주는 역할을 한다 문법 type A = (a:T[]) => T const a:A = (arr) => { return arr[0] } const result= a([1,2,3]) const result2 = a(['1','2']) // 함수형 function A(arg:SomeGeneric) {} A A A // 클래스형 // !Static과 같은 정적변수는 제네릭으로 관리할 수 없다. class A { constructor(a:T){} } new A(1) new A('a') // 타입스크립트 인터페이스 interface GenericIdentityFn { (arg: Type): Type; } 주의점 Static과 같은 정적변수는 제네릭으..

typescript 2024.03.07