본문 바로가기

Programming

 (477)
4. Node 기능 살펴보기 (2) - 모듈 사용하기 : ECMAScript 1 ECMAScript(ES 모듈)은 공식적인 Javascript 모듈 형식입니다. 점차 표준 모듈로서 사용량이 늘어나고 있고, 무엇보다 브라우저와 노드 양쪽에서 모두 같은 모듈 형식을 사용할 수 있습니다. 우선 이 ES 모듈의 특징을 CommonJS와 비교하면 다양한 차이점이 있습니다. 우선 몇 가지를 설명하고 예제를 살펴보겠습니다. ES 모듈에서 사용하는 import, export default는 require나 module.exports를 대체합니다. 하지만, 단순 객체나 함수 레벨의 변수가 아니라 '문법' 자체라는 사실을 기억해야 합니다. 모듈 파일의 확장자도 .js가 아닌 .mjs입니다. 그렇기에 일반 js 확장자 파일에서 import를 사용하게 되면 syntax error가 발생하게 됩니다. (j..
4. Node 기능 살펴보기 (2) - 모듈 사용하기 : CommonJS 5 [require 1] 이번 아티클에서는 모듈을 불러오는 데 사용한 require에 대해서 살펴보도록 하겠습니다. 기본적으로 require도 함수입니다. 함수는 객체이므로 require도 객체로서의 속성을 몇 가지 가지게 되겠죠. 일단, require.cache와 require.main에 대해서 살펴보도록 하겠습니다. 우선 앞선 아티클에서 작성했던 예제 파일 중, [var.js]가 있는 폴더에 [require.js]를 새로 생성해 보겠습니다. // [var.js] exports.odd = 'CJS 홀수'; exports.even = 'CJS 짝수'; /* const odd = 'CJS 홀수'; const even = 'CJS 짝수'; module.exports = { odd, even, }; */ // [require.js] ..
4. Node 기능 살펴보기 (2) - 모듈 사용하기 : CommonJS 4 ○ 노드에서의 this 잠깐 require를 다루기 전에, 참고 삼아 this에 대해서 다루어보도록 하겠습니다. 우선 노드가 아닌 기본 Javascript 학습 단계에서 최상위 스코프에서의 this에 대해서 다루었습니다. 그때는 이해가 가지 않았던 부분이 지금에 와서 어느 정도 풀리는 것 같네요. 8. Javascript 함수 호출 (3) - 함수를 호출할 때 this 바인딩 전역 객체의 이해 이번에는 지난 아티클인 [객체 메서드]와 다른 개념인, 함수 호출 시의 this 바인딩에 대해서 살펴보려고 합니다. 이를 이해하기 위해서는 Javascript에서의 전역 객체에 대한 이해 nozeroslope.tistory.com 위 아티클의 초반 내용을 통해서 Javascript의 전역 객체에 대해서 확인했습니다..
4. Node 기능 살펴보기 (2) - 모듈 사용하기 : CommonJS 3 앞선 아티클까지 module.exports 객체를 이용해 특정 Javascript 파일을 '모듈'화 시키는 방법을 살펴보았습니다. 이번에는 모듈화를 시키는 주요 요소인 module.exports에 대해서 살펴보겠습니다. 이전 예제에서 module.exports를 사용한 [var.js]를 다시 살펴보겠습니다. /* var.js */ const odd = 'CJS 홀수'; const even = 'CJS 짝수'; module.exports = { odd, even, }; odd와 even 변수를 module.exports 객체에 대입하여 모듈로 만들었습니다. 그런데 여기서 module.exports가 있는 라인을 아래처럼 바꾸고 [index.js]를 실행시켜 보도록 하겠습니다. /* var.js */ exp..
4. Node 기능 살펴보기 (2) - 모듈 사용하기 : CommonJS 2 앞서 살펴본 아티클에서 CommonJS 모듈 실습을 위한 예제 코드를 작성했습니다. [var.js], [func.js]가 그것이죠. 아래와 같이 작성된 코드를 다시 한번 상기하도록 하겠습니다. 4. Node 기능 살펴보기 (2) - 모듈 사용하기 : CommonJS 1 노드에서는 (당연한 이야기이지만) 코드를 모듈로 만들 수 있습니다. 여기서 말하는 모듈은 - 특정한 기능을 수행하는 함수나 변수들의 집합 - 을 의미합니다. 이는 모듈 자체로서도 하나의 프로 nozeroslope.tistory.com /* var.js */ const odd = 'CJS 홀수'; const even = 'CJS 짝수'; module.exports = { odd, even, }; /* func.js */ const { odd..
4. Node 기능 살펴보기 (2) - 모듈 사용하기 : CommonJS 1 노드에서는 (당연한 이야기이지만) 코드를 모듈로 만들 수 있습니다. 여기서 말하는 모듈은 - 특정한 기능을 수행하는 함수나 변수들의 집합 - 을 의미합니다. 이는 모듈 자체로서도 하나의 프로그램이면서, 다른 프로그램의 부품으로써도 사용할 수 있죠. 이렇게 만들어둔 모듈을 통해 여러 프로그램에 재 사용이 가능합니다. 결국 이러한 메커니즘은 Javascript에서 코드를 재사용하기 위해 함수를 만드는 작업과 유사합니다. 통상적으로 파일 하나가 하나의 모듈로 취급됩니다. 추상적인 개념은 이해가 가셨을 것입니다. 노드에서는 크게 두 가지 형식의 모듈을 사용하는데, CommonJS와 ECMAScript 모듈입니다. 우선 CommonJS부터 살펴보겠습니다. CommonJS 모듈은 표준 자바스크립트 모듈이 아님에도,..
4. Node 기능 살펴보기 (1) - REPL 사용 Javascript는 스크립트 언어입니다. 이것이 무엇을 의미할까요? 이는, 타 언어처럼 미리 컴파일 과정을 거치지 않더라도 즉석에서 코드를 실행할 수 있다는 것을 의미합니다. 그래서 크롬의 콘솔 탭에서 즉석으로 코드를 입력해 결과를 보는 것이 가능했던 것입니다. 노드에서도 크롬의 콘솔 탭과 비슷한 역할을 하는 콘솔을 제공합니다. 이를 REPL이라고 하는데, 이는 Read(읽고) / Eval(해석하고) / Print(결과물을 반환하고) / Loop(종료할 때까지 반복하고)를 의미합니다. 명령 프롬프트(맥의 터미널)에서 node를 입력하거나, VS Code 에서 [ Ctrl + ` ]를 눌러 터미널을 실행하고 node를 입력하면 됩니다. PS C:\xxxx\xxx> node Welcome to Node.j..
3. Front-end Javascript (4) - 데이터 속성과 dataset 노드를 사용한 웹서버는 당연히 클라이언트, 즉 프런트엔드와 데이터를 주고받게 되고 - 이 과정에서 서버에서 보낸 데이터를 프런트엔드에 전달해 저장해야 합니다. (원론적인 얘기를 하자면, 프런트엔드에 데이터를 보낼 때는 보안을 가장 신경 써야 합니다. 민감한 데이터를 내려보내서는 안 되죠) 데이터를 프런트엔드로 전달했을 때, 기본적으로는 자바스크립트 변수에 저장을 해도 되지만 HTML5에서 공식적으로 지원하는 데이터 저장 방식도 활용이 가능합니다. 여기서 활용하는 것이 데이터 속성(data attribute)입니다. 아래 HTML 예제를 살펴보겠습니다. 여기서는 태그에 속성 값을 선언하는 방식으로 데이터 속성을 부여했습니다. A1 B1 C1 D1 E1 태그에 data-id, 그리고 data-user-job..

티스토리툴바