전체 글

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에 반영하는 단..

import React from 'react'import ReactDOM from 'react-dom/client'import App from './App.tsx'import './index.css'ReactDOM.createRoot(document.getElementById('root')!).render( )리액트에서 `StrictMode`라는 키워드를 자주 접해본 적이 있다. 주로 개발 중에 발생할 수 있는 잠재적인 문제를 사전에 감지하고 예방하기 위해 사용합니다.목적1. 오래된 라이프사이클 메서드와 비권장 API 사용을 감지합니다.`componentWillMount`, `componentWillUnmount`와 같은 메서드는 더 이상 사용이 권장되지 않는데, StrictM..

더보기답변 초안www.google.com을 입력하면 DNS 서버에서 해당 주소를 검색해 IP 주소로 변환합니다. IP 주소로 변환해 TCP 연결을 설정합니다. 3way handshake를 통해 송신자(서버)와 수신자(브라우저)의 연결을 확인하고 서버로부터 데이터를 전달받습니다. 전달받은 데이터를 브라우저 렌더링 파이프라인을 통해 화면에 그려냅니다.DNS 조회TCP 연결 수립HTTP 요청서버의 응답브라우저 렌더링 파이프라인 진행 1. DNS 조회사용자가 "www.google.com"을 입력하면, 브라우저는 도메인 이름을 IP 주소로 변환해야 합니다. 브라우저는 캐시된 DNS 기록을 먼저 확인하고, 없으면 로컬 DNS 서버에 요청하여 "www.google.com"에 해당하는 IP 주소를 얻습니다. 2. TC..