스꾸딩에서 가장 많이 사용하는 언어는 JavaScript입니다. JavaScript는 웹 브라우저에서 동작하는 언어로 시작했지만, Node.js를 통해 서버에서도 동작할 수 있게 되었습니다. Node.js는 서버에서 JavaScript를 읽고 실행할 수 있게 해주는 런타임입니다.

이번 주에는 JavaScript의 문법을 공부하고, Node.js를 통해 간단한 서버용 프로그램을 만들어보는 것을 목표로 합니다.

아래의 모든 자료는 참고 자료일 뿐이고, 자유롭게 검색해서 공부하셔도 됩니다! 😎

공부할 내용 📚

1. JavaScript & Node.js란?

JavaScript는 웹 브라우저에서 동작하는 언어로, 원래 프론트엔드에서 많이 쓰이는 언어였습니다. Node.js는 서버에서 JavaScript를 동작시킬 수 있게 해주는 런타임으로, Node.js 덕분에 백엔드에서도 JavaScript로 서버 프로그램을 작성할 수 있게 되었습니다.

JavaScript와 Node.js의 탄생 배경과 특징에 대해 알아봅니다.

2. JavaScript 문법

JavaScript의 문법을 공부합니다. 아래 개념들을 검색하고 정리해보세요. 각종 method들은(length, push 등) 자세하게 정리할 필요는 없고, 간단하게 어떤 기능을 하는지만 훑어두면 됩니다.

  • 변수 (var, let, const)
  • 자료형 (Number, String, Boolean, Array, Object)
  • 연산자 (산술 연산자, 비교 연산자, 논리 연산자)
  • 조건문 (if)
  • 반복문 (for, while)
  • 함수 (function, arrow function)
  • 객체 (Object)
  • 배열 (Array)
  • 비동기 (Promise, async/await) → 중요! 🔥

아래는 JavaScript 문법을 공부할 수 있는 관련 자료입니다.

  • 드림코딩 자바스크립트 입문: 빠르게 코드만 보고 싶은 분들을 위해 문법을 정리한 repo입니다. 더 자세한 설명을 위해서는 유튜브 영상도 참고해주세요. https://github.com/dream-ellie/learn-javascript
  • 코어 자바스크립트: 분량이 많아 전부 읽는 것은 어렵고, 필요한 부분을 찾아서 읽어보세요. ‘자바스크립트 기본’, ‘객체: 기본’, ‘자료구조와 자료형’, ‘프라미스와 async, await’, ‘모듈’ 정도를 읽어보면 좋을 것 같아요. https://ko.javascript.info/js
  • “비동기, Promise, async, await 확실하게 이해하기” (글): 비동기와 Promise, async/await에 대해 자세하게 정리한 글입니다. 비동기와 Promise, async/await를 정확히 이해하고 싶다면 읽어보세요. https://springfall.cc/article/2022-11/easy-promise-async-await

3. Node.js만의 기능

웹 브라우저의 JavaScript 런타임에는 없는 Node.js만의 기능들을 알아봅니다. 아래와 같은 내용들을 공부해보세요.

  • os 모듈
  • fs 모듈
  • path 모듈
  • http 모듈

프로젝트 실습 🎈

OS 정보를 출력하는 간단한 서버를 만들어봐요. 서버를 실행하고 http://localhost:3000에 접속하면 아래 사진처럼 OS 정보가 출력되어야 합니다.

  • http 모듈로 서버를 만들어보세요. 포트 번호는 3000번으로 지정해주세요.
  • Express를 쓰지 않고 http 모듈만으로 구현해보세요. 파일 하나(server.js)면 충분해요!
  • HTML 파일은 assets 폴더에 있는 week1.html을 사용해주세요. Github 링크
  • 요청이 오면, HTML 파일을 읽은 다음 os 모듈을 사용하여 OS 정보를 읽어서 HTML에 넣어주세요. 예를 들어 {{type}} 부분에는 os.type()의 결과가 들어가야 합니다. (🔍 힌트: String.replace를 써보세요!)

설치 & 실행 ⚙️

WSL 설치 (윈도우만)

WSL(Window Subsystem for Linux)은 윈도우에서 리눅스를 실행할 수 있게 해주는 기능입니다. 앞으로 리눅스 명령어를 사용할 일이 많아지기 때문에 WSL을 설치하고 사용하는 것을 추천합니다. 가이드를 참고하여 WSL을 설치해주세요. (WSL 설치 가이드)

Visual Studio Code 설치

Visual Studio Code는 Microsoft에서 만든 텍스트 편집기입니다. 스꾸딩의 개발 환경은 주로 Visual Studio Code를 사용합니다. 아래 링크를 통해 Visual Studio Code를 설치해주세요. https://code.visualstudio.com/

Visual Studio Code

Node.js 설치

1. NVM 설치

nvm은 Node.js의 버전을 관리해주는 도구입니다. 보통 nvm을 통해 Node.js를 설치하고 사용합니다. 아래 명령어를 입력하여 nvm을 설치합니다.

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash

이후 터미널을 재시작하거나 아래 명령어를 입력하여 nvm을 사용할 수 있게 합니다.

source ~/.bashrc
# zsh를 사용하는 경우
# source ~/.zshrc

nvm이 정상적으로 설치되었는지 확인합니다.

nvm --version
# 0.39.5

공식 가이드는 아래 링크에 있습니다. https://github.com/nvm-sh/nvm#install--update-script

2. Node.js 설치

nvm을 통해 Node.js를 설치합니다. 아래 명령어를 입력하여 Node.js를 설치합니다.

nvm install --lts
# LTS 버전 대신 최신 버전을 설치하고 싶은 경우
# nvm install node

Node.js가 정상적으로 설치되었는지 확인합니다.

node --version
# v18.17.1 (버전은 다를 수 있습니다)

JavaScript 실행해보기

JavaScript는 여러 방법으로 실행할 수 있습니다. 아래 두 가지 방법을 통해 JavaScript를 실행해보세요.

REPL로 실행하기

아래 명령어를 입력하여 REPL을 실행합니다.

node

REPL에서 아래 코드를 입력하고 엔터를 누르면 코드가 실행됩니다.

console.log('Hello, world!')
// Hello, world!

파일로 실행하기

아래 코드를 hello.js라는 이름으로 저장합니다.

console.log('Hello, world!')

아래 명령어를 입력하여 hello.js를 실행합니다.

node hello.js
# Hello, world!