로컬 서버 세팅하기

개요

본 글에선 모던 자바스크립트 튜토리얼 https://javascript.info 를 로컬 환경에서 구동하기 위한 방법을 설명합니다.

서버는 Windows, Unix 계열 OS, macOS 모두에서 구동할 수 있습니다. Windows 사용자라면 Git Bash 등을 이용해 스크립트 실행할 수 있으므로 참고하시기 바랍니다.

설치 방법

1. Git과 Node.js 설치하기

   Git과 Node.js는 서버를 업데이트하고 구동하기 위한 필수 요구사항입니다. Windows 사용자라면 바이너리 파일을 다운로드하여 설치를 진행하시면 됩니다. 다른 운영체제 사용자라면 손에 익은 설치 도구를 사용하여 설치를 진행하시면 됩니다.

   Node.js는 10+ 버전을 설치하셔야 합니다.

   (선택사항) 이미지(*.svg)를 변경하려면 GraphicsMagick과 ImageMagick을 설치하셔야 합니다.

   GraphicsMagick, ImageMagick

2. 전역에 필요한 모듈 설치하기

   npm install -g bunyan gulp@4

3. 프로젝트에 쓰일 루트 폴더를 만들기

   js라는 이름을 가진 폴더를 만듭니다. 다른 이름을 가진 폴더를 만들어도 되는데, 그런 경우는 명령어 내 경로를 본인이 설정한 경로로 바꿔주어야 합니다.

4. 서버 저장소 클론하기

   cd /js
   git clone https://github.com/javascript-tutorial/server
   git clone https://github.com/javascript-tutorial/engine server/modules/engine

   두 개의 저장소에서 클론을 받아와야 합니다. modules/engine엔 서버 구동에 필요한 엔진의 소스 코드가 저장됩니다.

5. 한국어 저장소 포크받은 후, 포크된 저장소 클론하기

   cd /js/server/repo
   git clone https://github.com/나의GitHub유저네임/ko.javascript.info

6. 사이트 구동하기

   먼저 모듈을 설치해야 합니다.

   cd /js/server
   npm install

   이제 한국어로 번역된 자바스크립트 튜토리얼을 띄워봅시다.

   ./edit ko

   명령어를 입력하고, 빌드가 종료될 때까지 대기합니다.

   빌드가 종료되면 importWatch: Import complete라는 메시지가 뜹니다.

   http://127.0.0.1:3000에 접속해 튜토리얼이 잘 보이는지 확인합시다.

7. 튜토리얼 수정하기

   다섯 번째 단계에서 받아온 한국어 저장소를 수정하면 자동으로 튜토리얼 웹페이지가 새로 고침 됩니다.

FAQ

server 저장소와 engine 저장소를 새롭게 받아와도 서버 구동에 문제가 있는 경우 아래 항목들을 확인해주세요.

1. *.svg 파일이 안보여요.

   해결

   연관 이슈