본문 바로가기

FrontEnd

 (17)
Docker What is Docker? 1. Docker의 정의 컨테이너 기반의 오픈소스 가상화 플랫폼 도커(Docker)는 컨테이너를 사용하여 응용프로그램을 더 쉽게 만들고, 배포하고 실행할 수 있도록 설계된 도구입니다. 도커는 하이퍼바이저 위에서 동작하는데, 하이퍼바이저는 가상머신을 구동할 수 있게 해주는 소프트웨어 계층입니다. 도커는 이러한 하이퍼바이저 구조를 기반으로, 각 컨테이너 안에 서로 다른 실행 환경을 구축할 수 있습니다. 도커 파일은 도커 이미지를 구성하기 위해 필요한 의존성, 소스코드 등을 기록한 명령 파일입니다. 이 도커 파일에 정의된 대로 도커 이미지가 생성됩니다. 반면 도커 이미지는 컨테이너 생성과 실행에 필요한 명령들의 집합체입니다. 많이 사용되는 이미지들은 공식 저장소에서 받아올 수 있습..
NodeJS NodeJS What is NodeJS? 이벤트 기반, 논 블로킹 I/O, 싱글 스레드라는 특성을 가진 Node.js는 자바스크립트 언어 기반의 서버 사이드 플랫폼입니다. Node.js의 핵심은 Chrome V8 자바스크립트 엔진과 libuv 라이브러리를 기반으로 하는 점입니다. V8 엔진은 자바스크립트 코드를 빠르고 효율적으로 실행하며, libuv는 이벤트 기반, 논 블로킹 I/O 모델을 제공합니다. Node.js의 이벤트 기반 아키텍처는 요청이 들어올 때마다 이벤트를 생성하고 특정 콜백 함수를 호출하는 방식으로 동작합니다. 이를 통해 복잡한 웹 애플리케이션도 가볍고 효율적으로 구동할 수 있습니다. 논 블로킹 I/O 모델 덕분에 파일, 네트워크 관련 작업이 이루어질 때 해당 작업이 완료될 때까지 기다리..
In Clouser-with-javascript Clouser-with-javascript 자바스크립트 메모리 관리와 관련된 데이터 구조 자바스크립트의 메모리 관리 메커니즘은 효율적인 데이터 구조를 통해 크게 강화됩니다. 이러한 데이터 구조들은 개발자들이 데이터 관리의 복잡성을 줄이고, 메모리 사용을 최적화할 수 있게 돕습니다. 특히, Map, Set, WeakMap, WeakSet과 같은 구조는 자바스크립트에서 데이터 관리의 한계를 극복하고 보다 섬세한 메모리 관리를 가능하게 합니다. 객체(Object)와 배열(Array)의 한계 전통적으로 자바스크립트에서는 객체(Object)와 배열(Array)을 통해 데이터를 관리해 왔습니다. 하지만 이러한 방식은 특정 상황에서 복잡성과 한계를 드러냅니다. 예를 들어, 배열을 사용할 때 중복 값을 제어하기 위해서..
React-JS React-JS JS의 동등성 React에서는 useEffect와 같은 훅에서 의존성 배열을 다룰 때 해당 배열 내에 포함된 값들에 대한 동등성 비교를 Object.is 메서드를 통해 수행합니다. 이 방식은 참조형 타입에 있어서 동일한 메모리 주소를 가리키는 경우 두 객체를 동등하다고 간주하는 "얕은 비교" 방식을 채택합니다. 따라서 리액티브한 값이라 할지라도, 매 렌더링마다 그 값이 변경되었는지 여부는 참조된 메모리 주소의 동등성을 기준으로 판단되며 이는 React의 리렌더링 원리와 상당히 밀접하게 연관되어 있습니다. JS의 데이터 타입 자바스크립트의 데이터 타입 체계는 근본적으로 두 가지 범주로 구분됩니다: 원시 타입과 객체 타입. 원시 타입은 객체 타입을 제외한 모든 기본 타입을 포함하며, 이에는 ..
HTTP-Header HTTP-Header HTTP 헤더(Header)는 HTTP 요청과 응답에 추가되는 메타데이터입니다. Header를 통해 클라이언트와 서버는 HTTP 메시지의 내용이나 처리 방식 등에 대한 정보를 교환할 수 있습니다. HTTP Header 유형 주요 HTTP 헤더 유형은 다음과 같습니다. General Header 메시지 전체에 적용되는 정보 ex) Connection: keep-alive Request Header 요청 정보 ex) User-Agent: agent Response Header 응답 정보 헤더(Server, Set-Cookie 등) Representation Header 본문(Body) 해석 정보 헤더(Content-Type, Content-Length 등) Entity Header 리소..
Cross-Browsing Cross-Browsing 크로스 브라우징 정의 크로스 브라우징(Cross-browsing)은 웹 페이지가 여러 다양한 브라우저에서 일관된 모습으로 제대로 동작하도록 하는 작업을 의미합니다. 크로스 브라우징(Cross-browsing)은 웹 페이지가 여러 다양한 브라우저에서 일관된 모습으로 제대로 동작하도록 하는 작업을 의미합니다. 웹 페이지를 만들 때 각 브라우저의 렌더링 엔진의 동작 방식과 호환성을 고려하여 일관된 사용자 경험을 제공하는 것이 목표입니다. 크로스 브라우징을 고려하지 않으면 HTML, CSS, JavaScript 등의 코드가 각 브라우저에서 원하는 대로 작동하지 않을 수 있습니다. 이는 브라우저마다 렌더링 엔진이 다르기 때문에 발생하는 문제입니다. 대부분의 브라우저는 트라이던트, 게코,..
CORS CORS 프론트엔드 개발자들을 개발환경에서 특히나 괴롭히는 CORS입니다. 분명 통신은 200 즉 성공했다고 환영을 받았으나 위와 같은 에러로 데이터는 줄 수 없다는 브라우저의 메시지였다. CORS는 브라우저의 단속입니다. CORS(Cross-Origin Resource Sharing)는 보안상의 이유로 브라우저가 사용자를 보호하기 위해 발생하는 기능입니다. 최초에 리소스를 제공한 출처(origin)와 다른 출처의 리소스를 요청하는 경우 브라우저가 이를 제한합니다. 출처란 URL의 scheme(protocol), host(domain), port로 이루어진 값으로, 두 origin이 같다는 것은 URL의 scheme과 host, port가 모두 같음을 의미합니다. 예를 들어, 프론트의 localhost:..
NextJS Next.JS Next.js는 React의 SSR(Server Side Rendering)을 간편하게 구현할 수 있게 해주는 프레임워크이다. 클라이언트 사이드 렌더링 VS 서버 사이드 렌더링 서버 사이드 렌더링(Server Side Rendering, SSR)은 클라이언트가 페이지를 요청할 때 서버에서 해당 페이지의 데이터를 가져와서 완전한 HTML 문서로 만든 후, 브라우저에 전달하는 방식입니다. 이렇게 전달된 HTML 문서는 브라우저에서 바로 렌더링 되어 사용자에게 보입니다. SSR은 초기 요청에 대한 응답으로 완전한 페이지를 제공하기 때문에, 페이지 전체가 한 번에 로드되는 것을 볼 수 있습니다. 그리고 서버 측에서 페이지를 구성하기 때문에 이는 구글봇 같은 봇이 HTML의 내용에 접근할 수 있어 ..
JavaScript Closures Closure 1. 클로저란? 클로저는 함수와 그 함수가 선언됐을 때의 렉시컬 환경(Lexical environment)과의 조합입니다. 렉시컬 환경은 실행 콘텍스트의 구성 요소 중 하나인 outerEnvironmentReference에 해당하며, 변수의 유효 범위인 스코프를 결정하고 스코프 체인을 가능하게 합니다. 클로저의 예시를 한번 살펴봅시다. 어떤 컨텍스트콘텍스트 A에서 선언한 내부 함수 B의 실행 콘텍스트가 활성화된 시점에는 B의 outerEnvironmentReference(OE)가 참조하는 대상인 A의 Lexical Environment(LE)에도 접근이 가능합니다. 이로써 A에서는 B에서 선언한 변수에 접근할 수 없지만, B에서는 A에서 선언한 변수에 접근할 수 있게 됩니다. 자바스크립트의..
TypeScript & 제네릭 TypeScript 신입 때 프로젝트를 진행 했을 때 TypeScript로 코드를 짠 적이 있는데 제대로 알지 못하여 anyScript의 세계로 가고 있는 나를 반성하며 현재 계속해서 주목 받고 있는 TypeScript 알아보도록 하겠습니다. 타입스크립트는 유명한 Microsoft의 오픈 소스 라이브러리로 자바스크립트보다 더 정확하고 안전한 자바스크립트를 사용 할 수 있게 정적 타입을 지원하는 언어이다 한마디로 superset of JavaScript!! 왜 TypeSciprt를 사용해야 하는가? JavaScript의 특징은 프로그램이 런타임 될 때 타입이 동적으로 결정된다는 것입니다. 이는 유연한 코딩을 가능하게 하지만, 코드를 읽을 때 변수나 함수의 타입을 파악하기 어렵고, 런타임 중에 예기치 못한 ..

티스토리툴바