JavaScript

크롬 확장 프로그램

. 개요- JavaScript로 크롬 확장 프로그램을 만들 수 있다. 최소 두 개의 소스파일(정해진 형식을 갖춘 manifest.json 파일, 원하는 기능을 구현한 .js 파일)만으로도 크롬 확장 프로그램을 구현할 수 있다.. manifest.json의 내용{ "manifest_version": , "name": "My Extension", "version": ".", "permissions": ["...

Node.js의 기본 개념

. Node.js의 개념- 웹 브라우저는 컴퓨터 내외부 서버에 HTTP/HTTPS 접속을 해서 HTML, XML, JavaScript 등의 코드와 CSS 등의 서식정보, 그리고 그외 음악, 사진, 동영상 등 여러 미디어 파일을 얻어온 후 코드를 해석하고 화면에 표현할 각종 요소를 렌더링하여 최종적으로 사용자에게 웹 페이지를 보여준다. 이처럼 여러 형식의 코드와 파일을 처리하기 때문에 웹 브라우저는 각 기능을 ...

CSS 선택자로서 id와 class의 비교

흔히 알려진 지식으로, ‘id 선택자는 페이지 내에서 한 id가 한 엘리먼트만을 지칭하고 class 선택자는 여러 엘리먼트를 동시에 지칭할 수 있다’ 정도가 알려져 있다. 그런데 어떤 엘리먼트가 페이지 내에서 한 번만 쓰일지 아니면 여러 번 쓰일지 확신할 수 없을 때는 어떤 선택자를 쓰는 게 더 나을까? class 선택자를 쓰는 게 나으며, 한 번만 쓰일 가능성이 압도적으로 높은 엘리먼트라 하더라도 되도록이면...

이벤트 버블링, 캡처링, stopparagation(), 위임

. 이벤트 버블링, 캡처링- 웹페이지에 클릭, 이벤트 등 어떠한 이벤트가 발생했을 때, 자바스크립트로 이를 감지하고 그에 따라 특정한 자바스크립트 함수를 실행시키게 할 수 있다. 이처럼 이벤트를 감지하여 특정 함수를 실행시키게 하는 것을 ‘이벤트 핸들러’라 하며, 여러 방법이 있는데 addEventListener() 메서드를 이용하면 이벤트 버블링/캡처링 등을 쉽게 제어할 수 있다는 이점이 있다.- DOM 트...

Import, export

. 개요- 서로 다른 .js 파일들을 import, export 예약어를 사용하여 마치 하나의 소스파일을 작성한 것처럼 묶어 사용할 수 있다. 이처럼 모듈 단위로 개발한 수개의 .js 파일을 import, export 예약어로 서로 묶는 식으로 개발하면 <script> 태그로 .js 파일 수개를 로드하는 것에 비해 다음 이점을 얻을 수 있다.() <script> 태그로 .js 파일 수개를...

Webpack의 개념

. 모듈 단위 개발의 이점- 프로젝트의 전체 소스코드를 하나의 파일에 몰아넣는 게 아니라 공통점이 있는 부분끼리 나누어 여러 개의 파일에 각각 따로 저장해 개발을 진행하는 것을 ‘모듈 단위로 개발한다’고 한다. 하나의 소스파일에 들어있는 코드끼리는 서로 공통점이 있으므로 코드의 가독성을 높일 수 있어 향후 기능별로 유지보수를 하는 데 유리하다.. 자바스크립트에서의 모듈 단위 개발- 자바스크립트에서도 기본적으로...

동기/비동기/블로킹/논블로킹의 개념, Promise 객체, await/async

. 동기, 비동기, 블로킹, 논블로킹의 개념- 동기(synchronous)의 사전적 정의는 ‘동시에 일어난다’를 의미하며, 비동기(asynchronous)는 반대로 ‘동시에 일어나지 않는다’를 뜻한다. 컴퓨터 공학에서 ‘동시에 일어난다/일어나지 않는다’는 개념은 특정 시간 동안 또는 그 전후로 작업을 수행하는 주체가 둘 이상인 경우에 사용되며, 작업을 같은 시간에 시작해서 동시에 끝내는 경우 또는 한 주체가 ...

<script>의 알맞은 위치

. 개요- 브라우저는 HTML 문서를 파싱할 때 문서의 맨 위에서부터 차례대로 태그를 하나씩 파싱한다. 이때, 파싱 과정에서 <script> 태그를 만나면 <script> 태그 안의 스크립트를 모두 실행하고 그 다음에 그 뒤에 있는 태그들을 파싱한다. (<script> 태그에서 src 링크가 지정돼있으면 해당 링크의 .js 파일을 다운받고 실행하고 그 다음에 그 뒤에 있는 태그...

Let, const

. let자바스크립트는 var로 모든 변수를 선언할 수 있으나, var를 이용한 변수 선언의 경우 이것이 가진 여러 특징이 다음과 같이 여러 문제를 발생시킨다.) 중복선언var fruit = '사과';...var fruit = '배';var는 위와 같이 변수명이 같은 변수를 여러 번 중복으로 선언해도 에러가 발생하지 않는다. 이렇게 되면, 만약 앞에서 선언한 fruit에 중요한 정보가 담겨있을 때, 프로그래머...

For in, for of

. for inconst obj = { key: 'value', key: 'value', key: 'value' };for (let key in obj){ console.log(`속성명 ${key}의 속성값 ${obj[key]}`);}for in 반복문은 수개의 속성으로 이루어진 객체의 각 속성명을 매 루프마다 지정한 변수명(위 코드의 key)에 전달하는 반복문이다. 위 코드의 경우 다음과 같은 결과를 ...

DOM 트리의 동적 구성

. 개요- 하나의 HTML 문서는 <html></html>을 최상위 태그로 하여 안에 여러 태그 요소와 문자열로 구성된다. HTML 문서의 태그 요소들은 모두 각자의 부모 태그 안에 자식 태그로서 들어가 있어 마치 트리와 같은 구조를 갖는데, 브라우저는 HTML 문서를 파싱한 후 이들 태그 요소들을 각각 하나의 객체로 보는 트리를 만든 후 이 트리를 기준으로 페이지를 렌더링 한다. 이처럼...

Array의 유용한 메서드들 - forEach(), map(), from(), call()

. forEach()const array = ["사과", "배", "포도"];const obj = {key: "과일 이름"};const cb_func = function(elem, idx, arr){ console.log(`배열 [${arr}]의 ${idx}번 인덱스의 ${this.key}: ${elem}`);};array.forEach(cb_func, obj);- forEach()는 Array()형으로 ...

자바스크립트에서의 함수 선언과 호출(익명함수, 람다식)

. 함수 선언식(function declaration)function func_name(parameter, parameter){ ...}한편, 다음과 같이 함수를 앞뒤로 ()로 감싸고 그 뒤에 ();를 덧붙이면 마치 그 지점에서 함수를 호출한 것과 같이 그 함수 내용이 실행된다.(function func_name(parameter, parameter){ ...})(argument, argument)...

자바스크립트 함수 호출 기초(인자 전달)

. 인자를 생략한 함수 호출- 함수 선언 시 파라미터가 함께 정의돼 있다 하더라도, 함수 호출 시 반드시 인자를 넣어야만 함수가 실행되는 것은 아니다. 단, 함수 내에서 그 파라미터를 사용하는 경우에는 그 값이 undefined로 처리된다. 예를 들어, 아래 코드는 콘솔창에 undefined를 출력한다.function func_name(param){ console.log(param);}func_name(...