스꾸딩에서 가장 많이 사용하는 언어는 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’, ‘모듈’ 정도를 읽어보면 좋을 것 같아요.

    • 그리고 ‘함수 심화학습’ 중 ‘나머지 매개변수와 스프레드 문법’, ‘오래된 var’, ‘화살표 함수 다시 살펴보기’도 읽어주시면 좋을 것 같아요!

    https://ko.javascript.info/js

3. Node.js만의 기능

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

4. API Testing Tool

백엔드의 주요 업무가 API를 설계하고 개발하는 일인만큼, 직접 API를 보내고 테스트할 수 API Testing Tool을 설치해 사용해보는 것을 권장드립니다.

다양한 API Testing Tool이 있는데, 자유롭게 선택하셔서 설치해주시면 됩니다.

예시로, 유명한 툴 중 하나가 ‘Postman’인데요, 아래 사진처럼 원하는 API를 직접 전송하고 응답까지 확인할 수 있습니다.

https://www.postman.com

프로젝트 실습 🎈

이번 백엔드 프로젝트는 간단하게 judger를 만들어봐요. 서버를 실행하고 http://localhost:3000에 접속하면 아래 사진처럼 파이썬 코드를 보냈을 때, local에서 코드를 실행하고 결과값을 돌려주도록 하면 됩니다.

여기에서는 python이 local에 설치되어 있다는 전제하에 진행됩니다. (다들.. 있으시죠?)

조건 및 힌트

  • http 모듈로 서버를 만들어보세요. 포트 번호는 3000번으로 지정해주세요.
  • 요청 메서드는 POST, 코드 데이터는 body에 담아서, 그리고 URL은 /code로 설정해주세요.
  • 요청이 오면, 코드를 읽은 다음 fs 모듈을 사용하여 파이썬 파일을 생성해주세요. 그 다음, node.js에 있는 child_process 모듈을 이용하여 command(ex.python3 <filename>)를 실행시킨뒤, 출력을 응답에 담아 보낼 수 있도록 해주세요. (양식은 자유입니다.)
  • 에러핸들링은 자유입니다.

설치 & 실행 ⚙️

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!