본문 바로가기

분류 전체보기

 (45)
Virtual DOM Virtual DOM에 대해 알아보기 전에 DOM의 개념부터 정리해보자. DOM DOM이란 Document Object Model이다. 웹 문서 내 모든 요소와 요소의 어트리뷰트 및 텍스트를 각각의 객체로 표현하여 이 객체들의 부자 관계를 트리 구조로 표현한 모델이다. 서버에서 온 웹문서는 브라우저가 스스로 이해할 수 없으므로, 웹 페이지를 이루는 태그들이을 브라우저가 이해할 수 있게끔(메모리에 적재할 수 있게끔) 트리 구조로 만든 객체 모델이다. Virtual DOM이 등장한 이유 DOM에 변화가 생기면 브라우저는 Render Tree를 재생성하고 이에 따라 Layout 및 Painting 과정이 다시 일어난다. 복잡한 SPA에서는 잦은 DOM 조작이 발생하는데, 잦은 변화를 반영하기 위해 브라우저는 ..
명령형 프로그래밍 vs 선언형 프로그래밍 명령형 프로그래밍 무엇을 어떻게 할 것이다. 코드로 원하는 결과물을 얻기 위한 과정에 집중한다. 선언형 프로그래밍 무엇을 할 것이다. 원하는 결과물을 얻기 위한 과정 하나하나보다는 필요한 것들을 기술하는 데 중점을 둔다. level 1에서 바닐라 자바스크립트로 애플리케이션을 만들었을 때는 주로 명령형 프로그래밍을 한 것 같다. 모든 코드는 '어떤 상황에서 어떻게 작동해라!'라는 의도를 가지고 작성되었으니 말이다. 아무래도 초심자의 입장에서는 알고리즘을 하나하나 머릿속에서 떠올리며 그 과정을 코드로 작성하다 보니 명령형 코드로 작성하게 되는 것 같다. 그러다가 여러 함수나 메서드를 알게 되면서 지금까지의 코드를 선언형으로 바꿀 수 있다는 것을 알 수 있는 것 같다. 명령형 let string = 'THis..
함수 선언문 vs 함수 표현식 이 궁금증의 경우, 함수를 표현할 때 function A( ) { }의 표현법을 사용할 지, const A = ( ) => { } 의 표현법을 사용할지에 대해 페어와 고민하다가 갖게 되었다. 그러다 리뷰어님의 도움을 받아 함수 표현식과 함수 선언문이 있다는 것을 알게 되었다. 함수 선언문 function test() { // 함수 내용 } 일반적인 프로그래밍 언어에서 함수를 선언하는 방식으로 함수 리터럴과 모양이 동일하다. 함수 이름을 생략할 수 없다. Hoisting에 영향을 받는다. 즉, 코드를 구현한 위치와 관계없이 브라우저가 자바스크립트를 해석할 때 맨 위로 끌어올려준다. 함수 표현식 const test1 = function foo() {}; const test2 = function () {}; ..
Webpack과 Babel 모듈 번들러 모듈 번들러란? 모듈 번들러는 자바스크립트 모듈을 브라우저에서 실행할 수 있는 단일 자바스크립트 파일로 번들링할 때 사용되는 도구이다. 예시) wepback, rollup, fusebox, parcel 모듈 번들러는 왜 필요한가? 요즘은 아니더라도, 이전 브라우저들은 모듈 시스템을 지원하지 않았다. 코드의 종속성을 효율적이게 관리하고, 종속성 순서대로 모듈을 가져올 수 있다. asset(종속성 순서, image, CSS,,,)을 가져오는데 도움이 된다. 위의 파일로 구성된 어플리케이션을 빌드하려면 script tag를 통해 자바스크립트 파일을 html에 추가하고, 어플리케이션을 시작하기 위해서는 5개의 왕복 요청에 대한 http 요청이 필요하다. 하지만 모듈 번들로를 통해 , 이들을 모두 다..
DOM DOM 텍스트 파일의 웹 문서를 브라우저에 렌더링하려면, 웹 문서를 브라우저가 이해할 수 있는 구조로 메모리에 올려야 한다. 브라우저 렌더링 엔진은 이를 위해 웹 문서를 load하고 parsing 하여, DOM을 생성하고 이를 메모리에 적재한다. DOM이란, 모든 요소와 요소의 어트리뷰트, 텍스트를 각각의 객체로 만들고 이 객체들의 부자 관계가 표현된 트리 구조이다. DOM은 JS를 통해 동적으로 변경할 수 있으며, 변경된 DOM은 리렌더링 된다. 정적인 웹페이지를 동적으로 조작하기 위한 방법은, 메모리 상에 존재하는 DOM을 변경하는 것이다. 그리고 이때 필요한 것이 DOM API이다. DOM API는 DOM에 접근하고 변경하는 프로퍼티와 메소드의 집합이다. DOM에서 모든 요소, 어트리뷰트, 텍스트는..
자바스크립트 This 대부분의 객체지향 언어에서 this는 클래스로 생성한 인스턴스 객체릐 의미한다. 하지만 자바스크립트에서의 this는 어디서든 사용할 수 있고, 그래서 가장 혼란스러운 개념 중 하나라고 할 수 있다. 상황에 따라 달라지는 this 자바스크립트에서 this는 실행 컨텍스트가 생성될 때 함께 결정된다. 실행 컨텍스트는 함수가 호출될 때 생성되므로, this는 함수를 호출할 때 결정된다. 함수를 실행하는 방법에는 일반적인 함수로서 호출하는 방법과 메서드로서 호출하는 방법이 있다. 일반적인 함수는 그 자체로 독립적인 기능을 수행하지만, 메서드로서 호출된 함수는 자신을 호출한 객체에 관한 동작을 수행한다. 메서드 내부에서의 this this에는 호출한 주체에 대한 정보가 담긴다. 즉, 메서드로서 호출된 함수의 경우..
No newline at end of file(EOF) github에 미션을 올리고 보니, 'No newline at end of file' 이라는 문구가 뜨는 것을 발견했다. VSCode 상에서는 발견하지 못했어서 이게 뭐지 하고 의아했는데, 알고보니 '파일의 끝에 개행문자가 없음'의 의미로 파일의 제일 마지막 한줄을 꼭 비워두라는 의미였다. 그렇다면 파일 끝에 개행문자(\n)를 왜 넣어야할까? 결론부터 말하자면, 옛날에 IEEE가 책정한POSIX에서줄(line)을 그렇게 정의했기 때문이다. 이전에 C컴파일러 gcc는 POSIX에 근거하여 동작해서 코드를 한 줄씩 읽었다. 따라서, 파일 끝에 개행문자(\n)인 EOF가 없으면 문제가 발생했다. 그리고 여러 파일을 합칠 때, 끝에 한 줄이 비워져있지 않다면 병합(merge)하는 과정에서 에러를 발생시킬 가능성..
자바스크립트 Fetch API 자바스크립트에서 fetch()를 사용하면 필요할 때 서버에 네트워크 요청을 보내고 새로운 정보를 받아오는 일을 할 수 있다. fetch()가 등장하기 전에는, 클라이언트 단에서 직접 HTTP 요청하고 응답을 받는 게 상당히 복잡해서 request나 axios, jQuery와 같은 라이브러리를 사용했다. 하지만 이제는 브라우저에서 내장된 fetch() 함수를 이용하면 대부분의 HTTP 요청을 할 수 있다. fetch 사용법 fetch(url, options) .then((response) => console.log("response:", response)) .catch((error) => console.log("error:", error)) fetch() 함수는 첫번째 인자로 URL, 두번째 인자로 옵션 ..

티스토리툴바