전체 글 썸네일형 리스트형 56. Virtual DOM, this, binding Virtual DOM DOM을 추상화한 가상의 객체로 DOM 조작에 의한 렌더링이 비효율적인 문제와 React 등의 사용으로 인한 DOM 복잡도 증가로 최적화와 유지보수가 어려워진 문제를 해결하기 위해서 나온 기술로 DOM을 직접 조작하면 렌더링이 너무 자주 일어나게 되고 이로 인한 자원 낭비를 막기 위해서 만들어낸 기술이다. 동작원리는 메모리에 DOM을 추상화한 가상의 객체를 메모리에 만들어 놓는 것으로 이것을 아까 말한 것 처럼 Virtual DOM이라고 말하고 이것이 DOM과 유사한 역할을 담당하게 되고 DOM을 수정할 것을 대신 Virtual DOM을 수정하고 이를 마지막에 진짜 DOM에 적용해주는 방식으로 동작하게 된다. 그림 예시 This, Binding This 자바스크립트에서 this는 쓰.. 더보기 55. Browser’s Rendering Process Browser’s Rendering Process 브라우저가 렌더링하는 과정을 아래의 순서로 설명하겠다. 1. 사용자가 유저 인터페이스에 주소표시줄에 URI를 입력하여 브라우저 엔진에 전달한다. 2. 브라우저 엔진은 자료 저장소에서 URI에 해당하는 자료를 찾고 해당 자료를 쿠키로 저장했으면 그 자료를 렌더링 엔진에 전달한다. 3. 렌더링 엔진은 브라우저 엔진에서 가져온 HTML, CSS, image 등을 분석한다. 동시에 URI 데이터를 통신, 자바스크립트 해석기 UI 백엔드로 전파한다. 4. 렌더링 엔진은 통신 레이어에 URI에 대한 추가 데이터를 요청하고 응답할 때까지 대기한다. 5. 응답받은 데이터에서 자바스크립트는 해석기가 파싱한다. 6. 자바스크립트 해석기는 파싱한 결과를 렌더링 엔진에 전달하.. 더보기 54. Webpack, JS V8 Engine Webpack https://webpack.kr/ webpack 웹팩은 모듈 번들러입니다. 주요 목적은 브라우저에서 사용할 수 있도록 JavaScript 파일을 번들로 묶는 것이지만, 리소스나 애셋을 변환하고 번들링 또는 패키징할 수도 있습니다. webpack.kr Webpack은 모듈 번들러로 의존성을 가진 모듈들을 다루고 그 모듈로부터 정적인 asset을 생성한다. 웹 서비스를 개발할 때 자바스크립트로 작성하는 코드의 양이 많아지면 유지 보수가 쉽도록 코드를 모듈로 나누어 관리하는 모듈 시스템이 필요한데 자바스크립트는 언어 자체가 지원하는 모듈 시스템이 없어서 이런 한계를 극복하기 위해서 webpack과 같은 도구를 사용한다. JS V8 Engine V8 엔진이란 구글에서 제작된 자바스크립트를 위한 .. 더보기 53. OOP, FP OOP(Object Oriented Programming) class와 object에 기반한 프로그래밍 디자인 패턴으로 데이터끼리 묶어서 class를 형성하고 그 안에서 object instance를 만들어 프로그램을 디자인한다. 장점 코드의 재사용률이 높고 코드가 간결해서 유지보수가 쉽다. 데이터를 안전하게 보존할 수 있다. 대표적 언어들 C++, Java, Python, Javascript 특징 1. Encapsulation(캡슐화) 객체의 내부 로직을 감추고 외부에 상대적으로 안정적인 부분만을 공개해서 데이터를 안전하게 보존할 수 있게 하는 특징. 2. Abstarction(추상화) 공통점을 찾아서 Class로 묶고 복잡한 디테일을 숨기고 핵심만 뽑아내는 형태로 공통된 기능에 초점을 둬서 클래스를 .. 더보기 52. Event Loop Event Loop 이벤트 루프는 자바스크립트의 런타임 모델로 코드 실행, 이벤트의 수집과 처리, 큐에 대기 중인 하위 작업을 처리하는 기준이 된다. 위의 그림은 자바스크립트 이론적인 모델을 이미지한 것이다. 스택 함수의 호출들을 프레임 스택으로 들어간다. 힙 객체가 할당되며 단순히 메모리의 큰 영역을 지칭하는 용어이다. 큐 자바스크립트 런타임은 메시지 큐, 즉 처리할 메시지의 대기열을 사용한다. 더보기 51. HTTP Status Code HTTP Status Code HTTP는 상태에 따라서 코드가 나눈다. 이를 상태 코드라고 부르는데 이 분류를 앞의 숫자에 따라서 구분할 수 있다. 1. 100번대 : Information responses 1로 시작하는 상태 코드로 서버가 요청을 받았고 서버에 연결된 클라이언트는 작업을 계속 진행하라는 의미이다. 종류 100. continue 현재 진행 상태에 문제가 없다. 101. switching protocol 클라이언트에 의해 보낸 업그레이드 요청 헤더에 대한 응답으로 보낸다. 102. processing 서버가 요청을 수신하였으며 이를 처리하고 있어 아직 응답을 줄 수 없다. 2. 200번대 : Successful responses 200. OK 요청이 성공되었다. 201. Created 요청.. 더보기 50. 원시 자료형 VS 참조 자료형, Shallow Copy와 Deep Copy 1. 원시 자료형 원시자료형은 쉽게 생각해서 숫자, 문자열 등 실제 데이터 값을 저장하는 타입의 자료형이다. JS 원시 타입 종류 1. 논리형 : Boolean(true, false) 2. 문자형 : string 3. 숫자형 : int, float 4. Null 5. undefined 원시 자료형은 변수에 할당될 때 메모리의 고정 크기로 원시 값을 저장하고 해당 저장된 값을 변수가 직접적으로 가리키는 형태다. 또한 값을 가리키는 것이기 때문에 재할당을 하더라도 기존값이 변하지 않는 불변성을 가진다. 2. 참조 자료형 원시타입을 제외한 타입은 모두 참조 자료형이라고 생각하면 된다. 그리고 대표적으로 참조 자료형은 배열과 객체가 있다. 참조 자료형은 변수의 크기가 동적으로 변하기 때문에 Object의 데이터.. 더보기 49. Hoisting 자바 스크립트에서 호이스팅이란 인터프리터가 변수와 함수의 메모리 공간을 선언하기 전에 미리 할당하는 것을 말한다. var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화 하고 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화 하지 않는다. 사용 예시 위에서 알 수 있듯 함수가 정의되기 전에 함수가 실행되더라도 코드가 동작한다는 것을 보이는 예시 코드로 함수의 코드를 실행하기 전에 함수 선언에 대한 메모리부터 할당하기 때문에 먼저 배치할 수 있는 것이다. 더보기 이전 1 2 3 4 ··· 14 다음
