티스토리

FrontEnd Devlog

검색하기

블로그 홈

FrontEnd Devlog

jj-frontend.tistory.com/m

프론트엔드 개발에 관한 내용을 기록합니다.

구독자: 0

방명록 방문하기

주요 글 목록

Docker What is Docker? 1. Docker의 정의 컨테이너 기반의 오픈소스 가상화 플랫폼 도커(Docker)는 컨테이너를 사용하여 응용프로그램을 더 쉽게 만들고, 배포하고 실행할 수 있도록 설계된 도구입니다. 도커는 하이퍼바이저 위에서 동작하는데, 하이퍼바이저는 가상머신을 구동할 수 있게 해주는 소프트웨어 계층입니다. 도커는 이러한 하이퍼바이저 구조를 기반으로, 각 컨테이너 안에 서로 다른 실행 환경을 구축할 수 있습니다. 도커 파일은 도커 이미지를 구성하기 위해 필요한 의존성, 소스코드 등을 기록한 명령 파일입니다. 이 도커 파일에 정의된 대로 도커 이미지가 생성됩니다. 반면 도커 이미지는 컨테이너 생성과 실행에 필요한 명령들의 집합체입니다. 많이 사용되는 이미지들은 공식 저장소에서 받아올 수 있습.. 공감수 0 댓글수 0 2024. 4. 7.
NodeJS NodeJS What is NodeJS? 이벤트 기반, 논 블로킹 I/O, 싱글 스레드라는 특성을 가진 Node.js는 자바스크립트 언어 기반의 서버 사이드 플랫폼입니다. Node.js의 핵심은 Chrome V8 자바스크립트 엔진과 libuv 라이브러리를 기반으로 하는 점입니다. V8 엔진은 자바스크립트 코드를 빠르고 효율적으로 실행하며, libuv는 이벤트 기반, 논 블로킹 I/O 모델을 제공합니다. Node.js의 이벤트 기반 아키텍처는 요청이 들어올 때마다 이벤트를 생성하고 특정 콜백 함수를 호출하는 방식으로 동작합니다. 이를 통해 복잡한 웹 애플리케이션도 가볍고 효율적으로 구동할 수 있습니다. 논 블로킹 I/O 모델 덕분에 파일, 네트워크 관련 작업이 이루어질 때 해당 작업이 완료될 때까지 기다리.. 공감수 0 댓글수 0 2024. 3. 26.
In Clouser-with-javascript Clouser-with-javascript 자바스크립트 메모리 관리와 관련된 데이터 구조 자바스크립트의 메모리 관리 메커니즘은 효율적인 데이터 구조를 통해 크게 강화됩니다. 이러한 데이터 구조들은 개발자들이 데이터 관리의 복잡성을 줄이고, 메모리 사용을 최적화할 수 있게 돕습니다. 특히, Map, Set, WeakMap, WeakSet과 같은 구조는 자바스크립트에서 데이터 관리의 한계를 극복하고 보다 섬세한 메모리 관리를 가능하게 합니다. 객체(Object)와 배열(Array)의 한계 전통적으로 자바스크립트에서는 객체(Object)와 배열(Array)을 통해 데이터를 관리해 왔습니다. 하지만 이러한 방식은 특정 상황에서 복잡성과 한계를 드러냅니다. 예를 들어, 배열을 사용할 때 중복 값을 제어하기 위해서.. 공감수 0 댓글수 1 2024. 3. 23.
React-JS React-JS JS의 동등성 React에서는 useEffect와 같은 훅에서 의존성 배열을 다룰 때 해당 배열 내에 포함된 값들에 대한 동등성 비교를 Object.is 메서드를 통해 수행합니다. 이 방식은 참조형 타입에 있어서 동일한 메모리 주소를 가리키는 경우 두 객체를 동등하다고 간주하는 "얕은 비교" 방식을 채택합니다. 따라서 리액티브한 값이라 할지라도, 매 렌더링마다 그 값이 변경되었는지 여부는 참조된 메모리 주소의 동등성을 기준으로 판단되며 이는 React의 리렌더링 원리와 상당히 밀접하게 연관되어 있습니다. JS의 데이터 타입 자바스크립트의 데이터 타입 체계는 근본적으로 두 가지 범주로 구분됩니다: 원시 타입과 객체 타입. 원시 타입은 객체 타입을 제외한 모든 기본 타입을 포함하며, 이에는 .. 공감수 0 댓글수 0 2024. 3. 22.
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 리소.. 공감수 0 댓글수 0 2024. 3. 22.
Cross-Browsing Cross-Browsing 크로스 브라우징 정의 크로스 브라우징(Cross-browsing)은 웹 페이지가 여러 다양한 브라우저에서 일관된 모습으로 제대로 동작하도록 하는 작업을 의미합니다. 크로스 브라우징(Cross-browsing)은 웹 페이지가 여러 다양한 브라우저에서 일관된 모습으로 제대로 동작하도록 하는 작업을 의미합니다. 웹 페이지를 만들 때 각 브라우저의 렌더링 엔진의 동작 방식과 호환성을 고려하여 일관된 사용자 경험을 제공하는 것이 목표입니다. 크로스 브라우징을 고려하지 않으면 HTML, CSS, JavaScript 등의 코드가 각 브라우저에서 원하는 대로 작동하지 않을 수 있습니다. 이는 브라우저마다 렌더링 엔진이 다르기 때문에 발생하는 문제입니다. 대부분의 브라우저는 트라이던트, 게코,.. 공감수 0 댓글수 0 2024. 3. 21.
CORS CORS 프론트엔드 개발자들을 개발환경에서 특히나 괴롭히는 CORS입니다. 분명 통신은 200 즉 성공했다고 환영을 받았으나 위와 같은 에러로 데이터는 줄 수 없다는 브라우저의 메시지였다. CORS는 브라우저의 단속입니다. CORS(Cross-Origin Resource Sharing)는 보안상의 이유로 브라우저가 사용자를 보호하기 위해 발생하는 기능입니다. 최초에 리소스를 제공한 출처(origin)와 다른 출처의 리소스를 요청하는 경우 브라우저가 이를 제한합니다. 출처란 URL의 scheme(protocol), host(domain), port로 이루어진 값으로, 두 origin이 같다는 것은 URL의 scheme과 host, port가 모두 같음을 의미합니다. 예를 들어, 프론트의 localhost:.. 공감수 0 댓글수 0 2024. 3. 21.
NextJS Next.JS Next.js는 React의 SSR(Server Side Rendering)을 간편하게 구현할 수 있게 해주는 프레임워크이다. 클라이언트 사이드 렌더링 VS 서버 사이드 렌더링 서버 사이드 렌더링(Server Side Rendering, SSR)은 클라이언트가 페이지를 요청할 때 서버에서 해당 페이지의 데이터를 가져와서 완전한 HTML 문서로 만든 후, 브라우저에 전달하는 방식입니다. 이렇게 전달된 HTML 문서는 브라우저에서 바로 렌더링 되어 사용자에게 보입니다. SSR은 초기 요청에 대한 응답으로 완전한 페이지를 제공하기 때문에, 페이지 전체가 한 번에 로드되는 것을 볼 수 있습니다. 그리고 서버 측에서 페이지를 구성하기 때문에 이는 구글봇 같은 봇이 HTML의 내용에 접근할 수 있어 .. 공감수 0 댓글수 0 2024. 3. 21.
JavaScript Closures Closure 1. 클로저란? 클로저는 함수와 그 함수가 선언됐을 때의 렉시컬 환경(Lexical environment)과의 조합입니다. 렉시컬 환경은 실행 콘텍스트의 구성 요소 중 하나인 outerEnvironmentReference에 해당하며, 변수의 유효 범위인 스코프를 결정하고 스코프 체인을 가능하게 합니다. 클로저의 예시를 한번 살펴봅시다. 어떤 컨텍스트콘텍스트 A에서 선언한 내부 함수 B의 실행 콘텍스트가 활성화된 시점에는 B의 outerEnvironmentReference(OE)가 참조하는 대상인 A의 Lexical Environment(LE)에도 접근이 가능합니다. 이로써 A에서는 B에서 선언한 변수에 접근할 수 없지만, B에서는 A에서 선언한 변수에 접근할 수 있게 됩니다. 자바스크립트의.. 공감수 0 댓글수 0 2024. 3. 20.
TypeScript & 제네릭 TypeScript 신입 때 프로젝트를 진행 했을 때 TypeScript로 코드를 짠 적이 있는데 제대로 알지 못하여 anyScript의 세계로 가고 있는 나를 반성하며 현재 계속해서 주목 받고 있는 TypeScript 알아보도록 하겠습니다. 타입스크립트는 유명한 Microsoft의 오픈 소스 라이브러리로 자바스크립트보다 더 정확하고 안전한 자바스크립트를 사용 할 수 있게 정적 타입을 지원하는 언어이다 한마디로 superset of JavaScript!! 왜 TypeSciprt를 사용해야 하는가? JavaScript의 특징은 프로그램이 런타임 될 때 타입이 동적으로 결정된다는 것입니다. 이는 유연한 코딩을 가능하게 하지만, 코드를 읽을 때 변수나 함수의 타입을 파악하기 어렵고, 런타임 중에 예기치 못한 .. 공감수 0 댓글수 0 2024. 3. 20.
JWT JWT JWT는 JSON Web Token의 약자입니다. 이는 로그인 성공 후 유저가 매번 로그인하지 않아도 되도록 하는 데 사용되는 액세스 토큰을 생성하기 위한 방법 중 하나입니다. JWT는 JSON 객체를 사용하여 토큰 자체에 정보를 저장하는 웹 토큰입니다. 대부분의 주류 프로그래밍 언어에서 JWT를 지원합니다. JWT는 다음과 같은 구조로 이루어져 있습니다: HEADER . PAYLOAD . SIGNATURE. 이 구조는 점(.)으로 구분되며, 헤더, 페이로드, 서명 세 부분으로 구성되는데 헤더(Header)는 토큰의 타입과 해시 암호화 알고리즘으로 구성됩니다. 페이로드(Payload)는 실제로 토큰으로 사용하려는 데이터인 user_id, expire, scope 등이 담기는 부분입니다. 서명(Si.. 공감수 0 댓글수 0 2024. 3. 20.
JavaScript 얕은 복사와 깊은 복사 자바스크립트 얕은 복사, 깊은복사 const FormInputList = [ { id: 1, FormTitle: '첫번째 프로젝트', item: [ { id: 1, FormTitle: '프로젝트 제목', FormInput: '프로젝트 제목을 입력해주세요', name: 'name', type: 'text', }, { id: 2, FormTitle: '프로젝트 대표 이미지', FormInput: '프로젝트 대표 이미지를 등록해주세요', name: 'thumbnailUrl', type: 'file', }, (...) { id: 2, FormTitle: '투자 목표 및 구성', item: [ { id: 1, FormTitle: '투자 목표 금액', FormInput: '투자 목표 금액을 입력해 주세요', nam.. 공감수 0 댓글수 0 2024. 3. 19.
What is JavaScript? And React? JavaScript는 무엇인가? 정적인 웹에 활력을 불어넣어 동적인 웹을 구현해 주는 개발 언어 JavaScript의 기능 새로운 로드 작업없이 사용자가 요청한 기능 동작을 구현할 수 있다. 1. 동적 효과 새로운 요소, 내용, DOM의 추가, 삭제 CSS의 이벤트를 변경하여 웹 화면을 실시간으로 변경 2. 프로그래밍적 기능 사용자 입력 데이터 확인 및 요청에 따른 유효성 검증 가능 웹 브라우저 제어 및 브라우저 쿠키 설정 AJAX 기술을 이용한 웹 서버와의 통신 JavaScript의 특징 객체 기반의 스크립트 언어 동적이며 타입을 명시할 필요가 없는 인터프리터 언어로 웹 브라우저에 의해 해석되고 실행됨 HTML 문서내에 내장되어 함께 처리되며 프로그래밍적 요소 추가 및 활용 객체 지향형 / 함수형 프로.. 공감수 0 댓글수 1 2024. 3. 19.
DOM DOM 문서 객체 모델(Document Object Model, DOM) 은 HTML, XML 문서의 프로그래밍 interface이다. 이제 이해를 해보자 작성한 HTML 코드가 브라우저에 의해 파싱되면 DOM이 됩니다. HTML -> 최초의 설계도 / DOM -> 설계도를 실제로 화면에 나타내는 인터페이스 DOM은 문서에 접근 할 수 있는 API입니다. node와 property, method를 갖는 객체로 이루어져 CSS, 스크립트와 같은 언어들이 DOM에 접근하여 커스텀 할 수 있게 만들어주는 연결고리역할 이라고 보면 됩니다. DOM을 이용하여 텍스트 내용 변경, 스타일링 및 노드 구조까지도 변경 할 수 있습니다. CSS 선택자 & DOM 1. querySelector를 사용하여 DOM 요소 선택 .. 공감수 0 댓글수 0 2023. 11. 3.
CSS flexbox CSS flexbox 1. display 대부분 요소들의 레이아웃 구성은 수직 구성으로 좀 더 간편하게 수평 레이아웃을 구현하기 위해 display 속성을 사용할 수 있습니다. display: flex; block 요소들의 구성을 쉽고 빠르게 수평적으로 구현할 수 있습니다. 2. flex-direction flex container 에서 중요한 개념은 바로 Axis(축)입니다. 어떤 축을 기준으로 정렬할지를 정하는 속성이 바로 flex-direction이다. 기본값은 row이며 column으로 세로로 요소들을 쌓을 수 있습니다. row-reverse, row-column와 같이 작성할 경우 요소들은 배열 순서를 역방향으로 구현 할 수 있습니다. 3. flex-wrap 요소들의 여러 줄 묶음(줄 바꿈을)을.. 공감수 0 댓글수 1 2023. 11. 2.
CSS 속성, 선택자 css 속성 , 선택자 1. class 와 id 스타일을 지정시 사용하는 속성 ★ 생성 규칙 1. 영문자로 작성 2. 첫번째 글자는 숫자가 들어갈 수 없음 3. 특수문자는 "_" , "$" 2가지만 사용 1-1 class 여러 태그들을 그룹으로 묶어 스타일을 지정시 사용하는 속성입니다. 스타일 지정시 .class명으로 작성합니다. 1-2 id 스타일을 지정시 하나의 태그만 지정해서 사용하는 속성입니다. 하나의 문서에서 고유한 id명만 사용이 가능합니다. 스타일 지정시 #id명으로 작성합니다. 2. 선택자 2-1. 전체 선택자 패턴 * 를 사용하여 내부의 모든 요소를 선택하여 스타일을 지정할 수 있습니다. 예시1) * { margin: 0; padding: 0; } 2-2. 태그 선택자 HTML의 기본 요.. 공감수 0 댓글수 0 2023. 11. 1.
HTML & CSS 주요 속성 정리 HTML 주요 태그 1. 기본 태그 : 헤드 : 타이틀 (헤드 안의 속함) : 문서의 본문 - head 와 body 사이에는 아무것도 들어 갈수 없음 ~ : 제목 : 단락 : anchor. 링크를 통해 다른 문서에 연결 : 수평줄 : 줄바꾸기 2. div / span / 아무것도 나타내지 않는 콘텐츠 영역(꾸미는 목적) ● 가로폭을 전부 차지함 (block element) ● 폭과 넓이 지정 가능 ● 박스 형태의 영역으로 설정됨 ● 줄 사이에 끼워 놓는 요소 (inline element) ● 주로 컨텐츠 안에 강조하고 싶은 부분에 사용 ● 크기 설정 불가 ★ 헷갈리는 포인트 1. 여러 개 나열시 div는 자동 줄바꿈이 발생 span은 줄바꿈이 일어나지 않고 가로로 나열 2. 여백 설정(margin) di.. 공감수 0 댓글수 0 2023. 10. 31.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.