우주선

AWS S3와 CloudFront는 정적 웹 사이트 호스팅과 CDN을 제공하는데, 이러한 서비스를 사용하는 경우 새로운 업데이트된 파일을 반영하기 위해서는 일정 시간이 지나야 한다. 하지만 새로운 파일을 즉시 반영해야할 때가 있다. 예를 들어 "@@이미지 당장 교체 부탁드립니다. 텍스트 잘못 들어간 이미지가 있어요." 이런 경우에는 CloudFront 캐시를 삭제한다. 캐시를 무효화할 경우 최신 파일이 사용되며, 오래된 파일이나 삭제된 파일에 대한 요청이 발생하지 않는다. [ CloudFront 캐시 삭제하기 ] 1. S3에서 이미지(혹은 파일)을 교체한다. - CloudFront에서 버킷을 검색해야 하기 때문에 버킷명 등 특징을 확인한다. - 갱신이 필요한 파일이나 폴더 경로를 복사해두면 좋다. 2. ..

물리적인 웹 페이지의 로딩 속도는 사용자 경험에 큰 영향을 미친다. 특히 느린 네트워크 상황이거나, 이미지를 불러오는 속도가 느리거나, 페이지가 랜더링되지 않으면 페이지 이탈율이 높아진다. 그래서 리소스의 로딩을 최적화하기 위해 다양한 방법을 사용한다. 필자는 이미지 리소스의 로딩을 최적화하기 위해 fetchpriority, preload, prefetch를 사용했는데 간단히 정리해보려고 한다. 왜냐면 쓰면서 헷갈렸으니까. 로딩과 관련된 세 가지 속성으로, 각각의 기능과 사용 방법에 차이가 있다. fetchpriority fetchpriority는 HTML의 태그에서 사용할 수 있는 속성이다. 이미지 리소스의 다운로드 우선순위를 지정하는 데 사용한다. 웹 페이지에서 이미지 리소스의 로딩 순서와 우선순위를..

토이 프로젝트를 만드는데 깃허브 레포지토리를 AWS Amplify 를 사용해서 배포 중이었다. 그러다 SDK의 키를 사용해야 하는 일이 생겼다. .env 파일에 키를 넣고 로컬호스트에서 작업했다. 깃허브에 푸시 하기 전에 생각해보니... .gitignore 에 .env 를 설정했었고, 그런 종류의 키 (API키라던가, SDK를 사용할 때 쓰는키라던가) 를 깃허브에 올리면 안 되지. Amplify에서 환경변수 세팅은 어떻게 하지 ? 찾아보니 Amplify가 깃허브와 연동해서 배포가 쉬웠던 것 처럼 환경변수 세팅도 쉬웠다. 1. Amplify 앱 설정 > 환경 변수 탭에 들어가서 환경 변수를 생성한다. ( 변수 이름은 기존 process.env.~ 로 쓰던 것으로, 필자는 리액트라 REACT_APP으로 시작..

모던 자바스크립트 Deep Dive ― (10) 39장 DOM DOM 은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 프로퍼티와 메서드를 제공하는 트리 자료구조다. 39.1 노드 HTML 요소는 HTML 문서를 구성하는 개별적인 요소를 의미한다. 이 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환된다. DOM을 구성하는 노드 객체는 ECOMScript에 정의된 게 아니라 브라우저 환경에서 추가적으로 제공하는 호스트 객체이다. 1) 트리 자료구조 - 노드들의 계층 구조로 이뤄진다. - 부모 노드와 자식 노드로 구성되어 노드 간의 계층적 구조를 표현하는 비선형 자료구조다. - 최상위 노드를 루트 노드, 자식 노드가 없으면 리프 노드라 한다. - 노..

모던 자바스크립트 Deep Dive ― (9) 36장 디스트럭처링 할당 디스트럭처링 할당(구조 분해 할당)은 구조화된 배열과 같은 이터러블 또는 객체를 비구조화하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다. 36.1 배열 디스트럭처링 할당 배열 디스트럭처링 할당의 대상은 이터러블이어야 하며, 할당 기준은 배열의 인덱스다. 할당 연산자 왼쪽에 값을 할당받을 변수를 선언해야 한다. 이때 변수를 배열 리터럴 형태로 선언한다. 이때 변수의 개수와 이터러블의 요소 개수가 반드시 일치할 필요는 없다. const arr = [1,2,3] const [one, two]= arr console.log(one, two) // 1,2 36.2 객체 디스트럭처링 할당 객체의 각 프로퍼티를 객체로부터 추출하여 1개 ..

신나게 커밋하려는데 Eslint가 오류를 뱉었다. ✖ eslint --fix found some errors. Please fix them and try committing again. unreachable Error: unreachable at CodePathState.popChoiceContext (/~내폴더~/node_modules/eslint/lib/code-path-analysis/code-path-state.js:444:23) 보니까 이 프로젝트에 설정된 eslint로 nullish 병합 연산자(nullish coalescing operator) 즉 ?? 을 쓸 수 없었다 이슈글에서 보니 eslint 버전이 6.1.0이면 지원된다길래 package.json을 열었더니... "@nuxtjs/es..

모던 자바스크립트 Deep Dive ― (8) 32장 String 표준 빌트인 객체인 String은 원시 타입인 문자열을 다룰 때 유용한 프로퍼티와 메서드를 제공한다. 32.1 String 생성자 함수 String 객체는 생성자 함수 객체로서 new 연산자와 함께 호출하면 String인스턴스를 생성할 수 있다. String 을 new 연산자와 함께 호출하면 String 래퍼 객체를 생성하는데, 이 String 래퍼 객체는 유사 배열이면서 이터러블이다. 따라서 배열과 유사하게 인덱스를 사용하여 각 문자에 접근하거나, length값을 가진다. String 생성자 함수의 인수로 문자열이 아닌 값을 전달하면 인수를 문자열로 강제 변환한다. new연산자를 사용하지 않고 String에 생성자 함수를 호출하면 Str..

모던 자바스크립트 Deep Dive ― (7) 28장 Number 표준 빌트인 객체인 Number는 원시 타입인 숫자를 다룰 때 유용한 프로퍼티와 메서드를 제공한다. 28.1 Number 생성자 함수 Number 객체는 생성자 함수 객체로서 new 연산자와 호출하여 Number 인스턴스를 생성할 수 있다. new 연산자와 호출하면 [[NumberData]] 내부 슬롯에 인수로 전달받은 숫자를 할당한 Number 래퍼 객체를 생성한다. new 연산자 없이 호출하면 Number 인수의 타입을 변화시켜 인스턴스가 아닌 숫자를 반환한다. let numObj = new Number('10') console.log(numObj) // Number {10}[[Prototype]]: Number[[PrimitiveVa..