1. INTRO
React를 다루기에 앞서 JavaScript의 작성 및 실행 방법, 특징과 기본 문법에 대해 학습했습니다. 실습을 위해 node.js 를 설치한 후 VS Code에서 예제를 실행해보았습니다.
2. node.js 설치
자바스크립트 파일 실행을 위해 node.js를 설치합니다. https://nodejs.org/ko 에서 기본 설정 상태로 설치 파일을 다운로드합니다. 이 과정에서 2503, 2502번 에러가 발생했는데, 실행 권한 문제로 파악되어 cmd -> 관리자 권한으로 실행시켜서 설치했습니다. 설치 완료 여부는 node -v, npm -v 로 버전을 확인하여 진행했습니다.
c:\javascript> node --v
v22.12.0
c:\javascript> npm --v
10.9.0
3. 모던 자바스크립트의 특징
- 가상 DOM(Virtual DOM)을 이용하는 라이브러리/프레임워크를 사용
실제 DOM을 효율적으로 업데이트하기 위한 기법으로, 실제 DOM을 미리 메모리 상에서 가상으로 만들어 두고, UI 업데이트를 가상 DOM에서 먼저 처리합니다.
- 패키지 관리자를 사용
패키지는 라이브러리나 도구를 쉽게 설치, 관리, 업데이트, 제거할 수 있게 해 주는 도구로,
의존성 및 버전 관리가 필요합니다. 예시로는 npm, yarn, pip, gem, composer 가 해당됩니다.
- EC6(ECMAScript 2015) 이후의 문법을 사용
EC6 도입으로 새롭게 추가된 문법이 있습니다. 그 예시는 아래와 같습니다.
- let, const
- arrow function
- template literal :
${expression}- 디스트럭처링 할당
- 기본 매개변수
- for ... of 구문
- 모듈 시스템 (import, export)
- 클래스
- Promise
- Map, Set
- Rest, Spread 연산자
위 문법의 자세한 사용 방법은 아래에 작성하였습니다.
- 모듈 번들러(module bundler)를 사용
모듈 번들러는 여러 모듈을 하나의 번들로 묶어 번들링을 처리하는 도구로, 네트워크 요청 수를 줄이고 로딩 속도를 향상합니다. Webpack, Parcel, Rollup이 해당 됩니다.
- 트랜스파일러(transpiler)를 사용
트랜스파일러는 한 프로그램 언어로 작성된 소스 코드를 다른 프로그래밍 언어로 변환하는 도구입니다. 언어 간 변환, 버전 호환성, 플랫폼 호환성, 언어 확장의 기능을 한다고 볼 수 있습니다. Babel 에서 기능을 직접 확인해 볼 수 있습니다.
- SPA(Single Page Application)로 작성
SPA 방식으로 작성된 예시 페이지는 hotels.com 이 있습니다. 요청값을 실시간으로 전송하여 응답값을 바로 반영하는 방식입니다. 즉, 인터랙션이 발생할 때 마다 서버로부터 새로운 파일을 받아 해당 링크로 이동해 페이지 전체를 새로 렌더링하는 웹페이지 구성 방식입니다. 데이터는 ajax 와 json 으로 주고 받습니다.
4. 자바스크립트 작성 및 실행 방법
- REPL(Read-Eval-Print-Loop) 방식으로 파일 실행
node.js 내부에 탑재된 프로그램으로, 아래와 같이 실행해볼 수 있습니다. 읽고, 값을 지정하고, 출력하는 방식을 반복합니다.
- node 명령어로 파일 실행
먼저 VS Code를 실행하고, js 파일을 생성합니다.
helloJavaScript.js 파일에는 아래와 같은 내용이 작성돼있습니다.
그리고 위와 같이 명령문을 작성하면 콘솔에서 결괏값을 확인할 수 있습니다.
- 브라우저를 이용해서 파일 실행
sample.html 파일을 생성하고, inline, internal, external 방식으로 스크립트 코드를 추가합니다.
그리고 웹 서버 기동(live server) 후 해당 페이지를 요청하면, 응답 전달된 페이지의 스크립트 코드가 실행되는 것을 확인할 수 있습니다. 확인 방법은 웹 브라우저의 개발자 도구(F12)에서 제공하는 콘솔을 이용합니다.
5. OUTRO
자바스크립트를 작성하고 실행시켜보기 위한 환경 설정과 기본 특징을 정리하였습니다. 다음 포스팅에서는 자바스크립트의 기본 문법에 대해 정리해보겠습니다. 감사합니다.
