[TIL] 스파르타코딩클럽 프론트엔드 엔지니어 양성과정_240803

𝜗𝜚 오늘 공부한 내용

1. 모던 자바스크립트 Deep Dive

(1)모듈화와 npm

(출처: https://poiemaweb.com/nodejs-npm)

모듈이란?

• 애플리케이션을 구성하는 개별적인 요소를 말함.
• 일반적으로 파일 단위로 분리되어 있고 필요에 따라 애플리케이션은 명시적으로 모듈을 로드함.
  : 모듈은 애플리케이션에 분리되어 개별적으로 존재하다가 애플리케이션의 로드에 의해 비로소 애플리케이션의 일원이 된다.
• 모듈은 기능별로 분리되어 작성되므로 개발효율성과 유지보수성의 향상을 기대할 수 있다.

• 자바스크립트는 모듈 기능이 없다!
  • 자바스크립트는 웹페이지에 있어서 보조적인 기능을 수행하기 위해 한정적인 용도로 만들어짐.
    → 태생적 한계로 다른 언어에 비해 부족한(나쁜) 부분이 있는 것이 사실.
    → 대표적인 것이 모듈 기능이 없는 것이다.
  • C언어는 #include, Java는 import 등 대부분의 언어는 모듈 기능을 가지고 있지만 Client-side JavaScript의 경우, script 태그를 사용하여 외부 스크립트 파일을 가져올 수는 있지만 파일마다 독립적인 파일 Scope를 갖지 않고 하나의 전역 객체(Global Object)에 바인딩되기 때문에 전역변수가 중복되는 등의 문제가 발생할 수 있음. 이것으로 모듈화를 구현할 수 없다.
    → JavaScript를 Client-side에 국한하지 않고 범용적으로 사용하고자 하는 움직임이 생기면서 모듈 기능은 반드시 해결해야하는 핵심 과제가 되었고 이런 상황에서 제안된 것이 CommonJS와 AMD(Asynchronous Module Definition)이다.
    • CommonJS와 AMD는 사양(spec)으로 CommonJS 또는 AMD라는 라이브러리가 존재하는 것은 아니다.
    • CommonJS 방식은 AMD에 비해 문법이 간단하고 동기 방식(synchronous loading)으로 동작함.
    • AMD 방식은 CommonJS에 비해 문법이 다소 까다로우며 CommonJS와는 달리 비동기 방식(asynchronous loading)으로 동작한다. AMD 방식을 지원하는 대표적인 모듈 로더는 RequireJS이다.
• Node.js는 사실상 모듈 시스템의 사실상 표준(de facto standard)인 CommonJS를 채택하였고 현재는 독자적인 진화를 거쳐 CommonJS 사양과 100% 동일하지는 않지만 기본적으로 CommonJS 방식을 따르고 있다.
  • Node.js는 module 단위로 각 기능을 분할할 수 있다.
  • module은 파일과 1대1의 대응 관계를 가진다. 따라서 클라이언트 사이드 자바스크립트와는 달리 전역변수의 중복 문제가 발생하지 않는다.
  • 모듈은 module.exports 또는 export 객체를 통해 정의하고 외부로 공개한다. 그리고 공개된 모듈은 require 함수를 사용하여 임포트한다.

 

(2) Node.js 설치

• 설치 위치: /usr/local/bin/node
• 설치 후 Node.js와 npm의 버전을 출력해 정상적으로 출력되었는지 확인해보기

$ node -v
v20.15.1
$ npm -v
10.7.0

• Node.js가 제공하는 REPL(Read Eval Pring Loop) 사용하기
  : 간단한 자바스크립트 코드를 실행해 결과를 확인해볼 수 있다.

sodol@macpro ~ % node
Welcome to Node.js v20.15.1.
Type ".help" for more information.
> 1 + 2
3
> Math.max(1,2,3)
3
> [1, 2, 3].filter(v => v % 2)
[ 1, 3 ]

• 자바스크립트 파일을 실행하려면 node 명령어 뒤에 파일 이름을 입력한다. (파일확장자 .js는 생략해도 됨)

$ node index.js

• vscode에 Code Runner 확장 플러그인 설치하고 단축키로 현재 표시 중인 자바스크립트 파일 실행해보기
  • mac OS: control + option + N

 

(3) 변수(variable)

• 변수란 무엇인가? 왜 필요한가?
  • 애플리케이션은 데이터를 다루는데 아무리 복잡한 애플리케이션이라 해도 데이터를 입력(input)받아 처리하고 그 결과를 출력(output)하는 것이 전부다.
  • 프로그래밍 언어는 기억하고 싶은 값을 메모리에 저장하고, 저장된 값을 읽어 들여 재사용하기 위해 변수라는 메커니즘을 제공.
  • 즉, 변수(variable)는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름.
    = 값의 위치를 가리키는 상징적인 이름

 

 

Ig. https://www.instagram.com/sodol_dotcom/