코딩 기록기

TCP, UDP 란 ? OSI 7 계층 중 Layer 4: 전송계층에서 사용되는 프로토콜로써, 전송계층은 프로토콜 내에서 송신자와 수신자를 연결하는 통신 서비스를 제공하는 계층인데, IP에 의해 전달되는 패킷의 오류를 검사하고 재전송 요구 등의 제어를 담당합니다. 이러한 전송계층에서 사용되는 프로토콜이 바로 TCP와 UDP이다. TCP(Transmission Control Protocol) TCP를 해석하면 전송을 제어하는 프로토콜(규약)이라는 뜻인데, 이는 아래의 정의와 별 다를 바 없습니다. 인터넷상에서 데이터를 메시지의 형태로 보내기 위해 IP와 함께 사용하는 프로토콜 신뢰성 있는 데이터 전송을 지원하는 연결 지향형 프로토콜 일반적으로 TCP와 IP가 함께 사용되는데, IP가 데이터의 전송을 처리한..

Prettier '코드 구현 방식'이 아닌, 줄 바꿈, 공백, 들여 쓰기 등 에디터에서 '텍스트'를 일관되게 작성되도록 도와주는 것이다 코드를 읽어들여 개발자가 설정한 옵션에 따라 코드를 다시 리포맷하는 코드 포맷터다. ESLint ES 는 Ecma Script를, Lint 는 에러가 있는 코드에 표시를 달아놓는 것을 의미한다. ESLint 는 자바스크립트 문법에서 에러를 표시해주는 도구다. 여러 방식의 코드 작성법이 있는데, 이러한 방식을 일관성 있는 방식으로 구현할 수 있도록 잡아주는 것이다. 요약 ESLint 는 코드 포맷터의 역할도 하지만, 주로 코드 에러를 잡아내고 코드 문법을 강제하는 등 코드 품질 개선에 중점을 둔 반면, Prettier 는 코드가 정갈해 보이도록 하는 것이 중점이지, 코드의..

DOM(Document Object Model) 이란? 영어 뜻풀이 그대로 하자면 문서 객체 모델을 의미한다 문서 객체란 ? html, head, body와 같은 태그들을 javascript가 이용할 수 있는 (메모리에 보관할 수 있는) 객체를 의미한다. 따라서 돔이란 ? 웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미한다. 다시 말해 DOM은 HTML과 스크립팅언어(Javascript)를 서로 이어주는 역할을 하고 있다. 자바스크립트는 어떻게 HTML 태그들을 조종할 수 있는 걸까? document라는 전역 객체를 통해 접근할 수 있다. 또한 window라는 객체는 document객체의 상위에 위치한다. 가상돔이 나오게 된 이유 여기서 h1이라는..

display 속성이란? display 태그는 화면에 어떻게 드러나게 할지를 결정하는 속성이다. 사실 이렇게 들으면 감이 잘 안오는데 요소 크기를 어떻게 결정할건가 를 결정하는 속성이라고 이해하는게 조금 더 감이 잘 잡히는 것 같다 display 속성값의 종류 속성 속성값 설명 display none 화면에 표시X (영역 차지X) block 블록레벨 요소로 표시, 너비/높이 설정 가능 inline 인라인 요소로 표시, 너비/높이 설정 불가 inline-block 인라인 요소이나 너비/높이 설정 가능 예제 코드 HTML I am none I am block I am inline I am inline-block CSS body div { font-size: large; margin-bottom: 50px; ..

메모리 구조 먼저, 프로그램이 실행되면 운영체제(OS)는 메모리(RAM)에 이 프로그램을 위한 공간을 할당해 준다 그 공간은 다음과 같이 총 4가지(Code, Data, Heap, Stack)으로 나뉘어져 있다 코드 (code) 가장 낮은 수준의 메모리 영역으로, 실행할 프로그램의 코드가 저장되는 영역이다 CPU는 코드 영역에 저장된 명령어를 하나씩 가져가서 처리한다. 프로그램이 시작하고 끝날때까지 메모리에 계속 남아있다. 텍스트 영역이라고도 한다. 데이터(data) 프로그램의 전역 변수, 정적 변수(상수, 리터럴, 전역변수, Static 등)가 저장된다. 프로그램의 시작과 함께 할당되고 종료되면 소멸한다. 힙(heap) 사용자가 직접 관리할 수 있는, 직접 관리해야하는 영역으로 사용자에 의해 메모리 공..

브라우저 렌더링 과정은 간략하게 다음과 같이 이루어진다. 브라우저는 서버에 리소스를 요청하고 응답받는다. 브라우저 렌더링 엔진은 응답된 HTML 파일을 한 줄씩 순차적으로 읽어 들이면서 HTML을 파싱하여 DOM을 생성한다. CSS 링크를 만나면 DOM 생성을 일시 중단하고, 서버에 파일을 요청하고 응답받아 CSS를 파싱하여 CSSOM을 생성한다. 자바스크립트를 만나면 작업을 일시 중단하고, 서버에 파일을 요청하고 응답받으면 제어권이 자바스크립트 엔진에게 넘어간다. 자바스크립트 코드를 파싱하여 바이트코드로 변환하고 이를 실행한다. DOM과 CSSOM을 결합하여 렌더 트리를 만든다. 렌더 트리를 기반으로 레이아웃을 계산한다. 브라우저 화면에 페인팅한다. URL 입력 브라우저 주소창에 https://goog..

React 에서 컴포넌트 렌더링을 수행하는 조건은 ? state(상태) 변경이 있을 때 리액트는 state 변경이 감지되면 재렌더링 한다 새로운 props가 들어올 떄 부모 컴포넌트로부터 새props가 들어오면 자식 컴포넌트는 재렌더링 된다. 기존 props가 업데이트 됐을 때 부모 컴포넌트로부터 받은 props 값을 받은 자식 컴포넌트도 재렌더링 된다 부모 컴포넌트가 재렌더링 될 때 부모 컴포넌트가 업데이트 되어 재렌더링 되면 자식 컴포넌트도 재렌더링 된다. 렌더링 성능 최적화 방법 state 선언 위치 렌더링 수행 조건으로 state 값의 변화가 있는데 state가 변경이 되면 그 state가 선언된 컴포넌트와 하위 컴포넌트들이 모두 리렌더링 된다. 그렇다면 state 선언 위치를 잘 설정해 주는 것..

Front-end 프레임워크 1. 프레임워크란? 애플리케이션 구조에 대한 가이드라인과 기반 코드를 제공하는 개발 툴 2. Front-end 프레임워크 사용자와 만나는 화면단인 Front-end 개발을 목적으로 하는 프레임워크 최근에는 웹이 복잡해지며 SPA 개발을 위한 프레임워크가 각광 받고 있다. JavaScript 프레임워크의 등장 모바일 / 웹의 발달로 화면에서 표현해야 하는 Front-end의 개발이 복잡해지며 JS를 이용한 프론트엔드 구성이 주목 받고 있다. 웹 규모가 커지며 JS 파일이 많아져 관리가 어려워졌고, 이를 관리하는 프론트엔드 프레임워크가 등장 React / Angular / Vue.js 비교 가장 먼저 발표된 프레임 워크는 Angular. 이후 React, Vue.js 순서로 개발..

JSX란 무엇인가? JSX를 리액트에서 무조건 사용해야하는것은 아니지만, JSX를 통해 얻는 이점이 많아 대부분의 개발자가 사용한다. 그렇다면 JSX란 무엇일까? JSX는 JavaScript XML의 줄임말로 XML 형태로 작성되며, 아래 문법은 JavaScript에 XML을 확장한 JSX의 문법이다. const element = Hello, World!; 그밖에 JSX의 특징은 아래와 같다. ▪ JSX(JavaScript XML)는 Javascript에 XML을 추가한 확장한 문법이다. ▪ 브라우저에서 실행되기 전에 바벨을 통해 일반적인 자바스크립트 코드로 변환된다. ▪ 공식적인 자바스크립트 문법은 아니다. ▪ JSX 하나의 파일에 자바스크립트와 HTML을 동시에 작성할 수 있다. JSX 변환 예제 J..

1. 동적인 언어이며 객체 지향 언어이다 JavaScript는 Prototype기반 객체 지향 언어이다 Class기반 객체 지향과 Prototype기반 객체 지향 존재한다 Class와 Prototype의 차이 Class 기반 언어는 객체의 형식이 정의된 class라는 개념을 가지고 객체를 찍어낸다 Prototype 기반 언어는 class라는 개념이 없고 객체 prototype의 위임 과정을 통해 상속이 된다 따라서 객체끼리의 chaining을 통해 동적으로 표현된다 프로토 타입이란 ? 자바스크립트는 프로토타입 기반의 객체지향 프로그래밍이라고 할 수 있는데, 객체지향 프로그래밍의 특징 중 상속을 구현하기 위해 사용되는 개념이며 프로토타입 객체를 이용하여 객체를 만든다. 프로토타입 객체는 한 객체의 부모 역..