하리하링웹

Settimeout 함수 설명 setTimeout(functionRef, delay, param1, param2, /* …, */ paramN) 첫 번째 인자에 넣은 함수를 딜레이 이후 실행해준다. 뒤의 파라미터들은 함수에 전달해주는 매개변수이다. delay 값을 숫자값이 아니라 “1000” 과 같은식으로 전달할 경우 1초로 자동으로 변경된다. 잘못된 값을 넣으면 자동으로 0초로 변환된다. 반환 값은 timeoutID를 받으며 이는 clearTimeout() 을 통해 타입아웃을 취소할 수 있다. This 문제 setTimeout은 다른 excution context에서 실행된다. 따라서 자바스크립트의 this 바인딩 특성상 이 값이 바뀔 수 있어 문제가 발생할 수 있다. [정상 동작] const myAr..

Viewport size viewport의 size는 변할 수 있다. 브라우저 창 크기 조절 모바일 가로, 세로, etc.. 키보드 창 켜짐 자바스크립트에서 viewport size를 받는법 document.documentElement.clientWidth; /* 1200 */ window.innerWidth; /* 1200 */ window.outerWidth; /* 1200 */ document.documentElement.clientHeight; /* 800 */ window.innerHeight; /* 800 */ window.outerHeight; /* 900 */ document.documentElement.clientWidth: document의 가로 px값이며 패딩은 포함되지만 마진, 테두..

정의웹 개발에서 viewport는 사용자의 브라우저 창 내에서 실제로 보이는 영역을 의미한다. 예를 들어 사용자가 크롬 창을 늘리거나 줄이면 보이는 만큼이 viewport 영역이며 모바일에서 핸드폰으로 보는 상황이라면 핸드폰의 스크린에 보이는 만큼이 viewport 영역이다. viewport는 반응형 웹에서 특히 신경써서 개발해야 하며 모바일, 태블릿은 일반적으로 화면의 크기가 고정되어 있기 때문에 서비스를 만들 때 각 디바이스의 화면의 크기에 맞게 break point를 정해놓고 개발을 진행하는것이 일반적이다. 아래는 일반적인 break point의 수치이다. 반응형 웹 디자인 참고링크 Responsive Design - Tailwind CSSUsing responsive u..

GitHub Actions를 사용하여 AWS Lambda 함수를 자동으로 배포하는 방법을 작성해보겠다. 이 프로세스를 통해 코드 변경 사항이 main 브랜치에 푸시될 때마다 자동으로 AWS Lambda 함수가 업데이트되도록 설정할 수 있다. 이는 개발 효율성을 크게 향상시키고, 배포 과정에서 발생할 수 있는 휴먼 오류를 줄이는 데 도움이 되며 각 코드에 대한 버전 관리, 무중단 배포도 쉽게 할 수 있다는 장점이 있다. 아래 링크를 참고하면 초기 설정등에 더 도움이 될것이다. [참고링크] 초기 설정 [ECR, Lambda] 먼저 이미지를 올릴 ECR, Lambda 함수를 만들어준다. 위 링크를 참고하여 쉽게 만들 수 있으며 주의할점은 이번 글에서는 docker와 ecr을 사용하여 배포를 진행하는거기 때문에..

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

기본적으로 서버쪽에서는 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) / ..

먼저 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..

아래의 코드를 봐보자 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 타입을 넣었는데 에러가 발생하지 않는것을 확인할 수 있다. 이로써 알 수 있는것이 하나 있다. 타입스..

제네릭은 타입스크립트에서 재사용이 가능한 컴포넌트를 생성하는것을 도와주는 역할을 한다 문법 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과 같은 정적변수는 제네릭으..

현재 다니고있는 회사에서는 약 100명 정도의 개발자가 단일 저장소에서 코딩을 진행하고 있다. 이러한 복잡한 작업 환경에서는 개발자에 의해 발생할 수 있는 실수나 예측할 수 없는 에러를 방지하는 것이 매우 중요하다. 이에 따라, 객체의 모든 레벨에서 객체의 변경을 방지할 수 있는 방안이 필요했고, TypeScript를 활용하여 DeepReadonly 유틸리티 타입을 만들게 되었다. DeepReadonly 타입은 객체의 모든 프로퍼티를 재귀적으로 읽기 전용으로 만들어, 객체의 불변성을 보장해준다. 프로젝트의 규모가 커질수록 코드의 안정성을 유지하는 것이 중요하며, DeepReadonly 타입은 객체의 중첩된 구조까지 보호함으로써 개발자들이 실수로 객체를 변경하는 것을 방지할 수 있다. 구현 코드 type ..