전체 글

지난번에 CI/CD를 구축하고 나서 정적 페이지를 호스팅까지 했었다.오늘은 AWS의 CDN(Content Delivery Network) 서비스인 CloudFront를 이용해 정적, 동적 콘텐츠를 배포하고자 한다.[CI/CD 구축] / [CloudFront 정리]1. CloudFront 생성`원본 도메인`을 선택하고, `원본 엑세스`를 원본 엑세스 제어 설정으로 선택하고 `OAC(Origin Access Control)`을 생성한다.*OAC(Origin Access Control) 목적S3 버킷에 대한 직접 접근을 차단CloudFront를 통해서만 S3 콘텐츠에 접근 가능하도록 제한뷰어 프로토콜은 선택사항이지만, HTTPS만 사용하기 위해서 HTTP 요청을 HTTPS로 리다이렉트하도록 설정한다.`기본값 ..

CSS의 `position` 속성은 문서 상에 요소를 배치하는 방법을 지정합니다.`static`, `relative`, `absolute`, `fixed`, `sticky`와 같은 속성을 사용해 요소를 배치할 수 있습니다.각 속성은 아래와 같은 특징이 있습니다.`static` : 요소를 일반적인 문서 흐름에 따라 배치합니다. 이는 기본값으로, 모든 요소는 별도 position 값을 지정하지 않으면 static이 적용됩니다.`relative` : static의 특성을 가지면서 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용할 수 있습니다. 다른 요소들에는 영향을 주지 않고 해당 요소만 이동됩니다.`absolute` : 요소를 일반적인 문서 흐름에서 제거하고, 가장 가..

React 프로젝트의 빌드 결과는 정적 리소스 파일(`.html`, `.js`, `.css` 등)이다. 정적 리소스 파일은 `AWS S3 버킷`에 올려 baseURL을 index.html로 연결시켜 클라이언트가 baseURL에 접속했을 때 index.html을 받도록 한다. 클라이언트측인 브라우저는 `S3 버킷`에 필요한 리소스를 요청하여 정적 리소스를 전달한다.1. AWS S3 버킷⭐️ S3 버킷 생성`버킷 만들기` 버튼을 눌러 버킷을 생성할 준비를 한다.버킷의 이름은 자유롭게 작성하고 `퍼블릭 엑세스 차단 설정`에서 모든 퍼블릭 엑세스 차단을 해제한다.그리고 버킷 만들기를 클릭하여 버킷을 생성한다.⭐️ 버킷 정책 편집`버킷 정책 편집`에서 새 문 추가를 클릭하여 기존 문을 아래와 같이 알맞게 내용을 ..

자바스크립트의 배열(Array)는 순서가 있는 리스트형 객체로, 여러 값을 하나의 자료구조에 저장할 수 있습니다.배열은 제로 인덱스 기반으로, 배열의 각 값은 `인덱스`를 통해 접근할 수 있습니다. 자바스크립트 배열은 `동적 배열`로, 크기가 고정되어 있지 않고 요소를 자유롭게 추가하거나 제거할 수 있는 유연성을 제공합니다.배열의 다양한 데이터 타입을 함께 저장할 수 있습니다.// 숫자, 문자열, 불리언, 객체 타입const arr = [1, 'apple', true, {key : 'value'}];자바스크립트는 `동적 배열`이기 때문에 배열의 크기를 미리 지정하지 않아도 되고, 요소를 추가할 때마다 배열의 크기가 자동으로 조정됩니다.const arr = [1, 2, 3];arr.push(4); //..

CI/CD는 자주 접해본 단어인데 소규모 프로젝트만 해보면서 되게 멀게만 느껴졌던 단어였다. Wouldyouguess? 프로젝트를 진행하면서 팀원 형님이 CI/CD를 구축하는 모습을 보면서 '아 어렵구나...'라고만 생각했었다. 구축이 된 이후에는 '아 편하구나...'라고 느꼈는데 이번을 기회로 차근차근 내용을 습득해보고자 한다.1. CI/CD란?일반적인 애플리케이션 개발 단계개발(develop) → 빌드(build) → 테스트(test) → 릴리즈(release) → 배포(deploy)CI/CD는 `지속적 통합(Continuous Integration)` / `지속적 배포(Continuous Deployment) or 지속적 제공(Continuous Delivery)`의 줄임말로, `CI`는 빌드 및 ..

공부 이전 답변자바스크립트 호이스팅은 자바스크립트 엔진이 런타임 이전에 변수, 함수 선언을 코드 최상단으로 끌어올려 실행시키는 것처럼 작동하는 것을 말합니다. 자바스크립트 엔진은 변수를 호이스팅하여 undefined로, 함수는 함수 객체 자체로 초기화하게 됩니다. var 키워드와 ES6부터 등장한 let, const 키워드에 따라 차이가 있습니다. var 키워드는 변수를 선언과 동시에 초기화를 진행하지만, let, const 키워드는 선언과 초기화가 별도로 이루어지기 때문에 그 사이에 TDZ(Temporal Dead Zone)가 생겨 초기화되기 전에 참조할 경우 ReferenceError가 발생하게 됩니다.`호이스팅(Hoisting)`은 자바스크립트가 코드를 실행하기 전에 변수와 함수 선언을 코드의 최상..

리액트의 렌더링 과정은 크게 두가지로 `render phase`와 `commit phase`로 나뉜다.  1. render phase`render phase`는 리액트가 변화된 상태(state)나 props에 따라 어떤 UI가 변경되어야 할지 결정하는 단계입니다. 이 과정에서는 실제로 DOM을 업데이트하지 않고, 새로운 가상 DOM을 생성하여 기존 가상 DOM과 변경사항을 계산하고 비교합니다. 이 단계는 순수하게 계산하는 과정이기 때문에 성능에 영향을 주지 않도록 중단되거나 다시 실행될 수 있으며, `React 18`에서 도입된 `Concurrent Mode`를 사용해 비동기적으로 처리될 수도 있습니다.2. commit phase`commit phase`는 실제로 변화된 UI를 실제 DOM에 반영하는 단..