웹개발 한 번 해보겠습니다..

웹 페이지의 내용은 Document 객체가 관리한다. 웹 브라우저가 웹 페이지를 읽어 들이면 렌더링 엔진은 웹 페이지의 HTML 문서 구문을 해석하고 Document 객체에서 문서 내용을 관리하는 DOM 트리라고 하는 객체의 트리 구조를 만든다. DOM Tree를 구성하는 객체 하나는 노드라고 하고, 기본적인 노드에는 문서 노드, HTML 요소 노드, 텍스트 노드가 있다. 노드 객체 가져오기 getElementsByTagName, getElementByName, getElementByClassName는 NodeList 객체를 반환 여기서 NodeList 객체는 살아 있는 상태를 가리킨다. 살아 있는 상태란 특정 시점의 정적인 상태를 표현하는 것이 아니라 HTML 문서의 변화에 따라 동적으로 바뀌는 것을 ..

Client와 Server가 어떻게 통신할 수 있는지를 정의한 것이 HTTP (HyperText Transfer Protocol) 이다. Client가 Server에게 데이터를 request하고 Server는 Client에게 그에 맞는 데이터를 response한다. Client에서 Server와 통신할 때는 fetch() API를 사용하거나 XHR (XMLHttpRequest) Object를 사용할 수 있다. 하지만 XML을 사용하면 불필요한 태그들이 많이 들어가서 파일의 사이즈가 커지고 가독성도 떨어진다. 따라서 XML은 최근 많이 사용되지 않고, JSON을 많이 사용한다. JSON (JavaScript Object Notation)의 특징 text를 기반으로 하고 있다. 읽기가 편하다. key-val..

고차함수란 함수를 인자로 받거나 함수를 결과로 반환하는 함수이다. JavaScript의 내장 함수로는 Array.prototype.map , Array.prototype.filter , Array.prototype.reduce 가 있다. Array.prototype.map map() 메소드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열로 반환해준다.callback 함수는 호출될 때 대상 요소의 값, 그 요소의 인덱스, 그리고 map을 호출한 원본 배열 3개의 인자를 받는다. map() 메소드를 사용하지 않는 경우 const array1 = [1, 4, 9, 16]; const array2 = []; for(let i = 0; i < array1.length; i++)..

JavaScript의 함수는 1급 객체(First Class Object)이다. 1급 객체가 무엇이고 이것이 왜 JavaScript에서 중요할까? 1급 시민(First Class Citizen) JavaScript를 포함한 거의 모든 프로그래밍 언어의 변수에서 1급 시민의 조건은 다음과 같다. 변수(variable)에 담을 수 있다. 인자(parameter)로 전달할 수 있다. 반환 값(return value)으로 전달할 수 있다. let bar1 = 1; // 1. 변수에 담을 수 있다. function foo (param) { // 2. 인자로 전달할 수 있다. let bar2 = param + 1; return bar2; // 3. 반환 값으로 전달할 수 있다. } console.log(foo(ba..

Webpack에 대한 설정하기 webpack.config.js 라는 파일을 최상단에 생성해준다. path라는 모듈을 사용하여 절대 경로를 불러온다. __dirname 은 현재 위치이고, resolve() 를 사용하여 현재 위치 뒤에 / 를 붙여준다. const path = require(&#39;path&#39;); console.log(__dirname); const pathTest = path.resolve(__dirname, &#39;abc&#39;); console.log(pathTest); // /Users/kobyunghwa/fastcampus_webpack // /Users/kobyunghwa/fastcampus_webpack/abc webpack.config.js const path = r..

module entry : module의 의존 관계를 이해하기 위한 시작점을 설정 (복잡한 참조관계를 갖고 있는 module 중에서 어떤 module을 시작점으로 해야할지 Webpack에게 알려주는 것) module들의 의존성 그래프를 만들어 module들을 해석하고 bundling을 진행한다. 파일별로 쪼개진 module들의 내용을 bundle에 담는 과정이다. output : Webpack이 생성하는 bundle 파일에 대한 정보를 설정 Webpack 설치 package.json 파일을 먼저 생성해준다. npm init -y webpack-cli는 Webpack을 실행하는 명령어를 지원해주는 패키지이다. npm install webpack webpack-cli --save-dev 설치가 끝나면 /no..

hoisting var 변수 선언과 함수 선언문에서 발생한다. 함수 내에서 아랫쪽에 존재하는 내용 중 필요한 값들을 최상단으로 끌어올린다. 실제로 코드가 올라가는 것이 아니고, JavaScript 내부적으로 끌어올려서 처리하는 것이다. 따라서 실제 메모리에서의 변화도 없다. var의 할당과 함수 표현식은 hoisting되지 않는다. var foo; // var의 선언 function foo2() { console.log('hello'); } // 함수 선언문 var foo = 'hello'; // var의 할당 var foo2 = function() { console.log('hello'); } // 함수 표현식 콜백 함수 함수가 끝나고 난 뒤에 인자로 전달되어 실행되는 함수 콜백(setTimeout)을..