[JS] Express 활용! 어떻게 시작하는가?

오랜만에 글을 쓴다. 이제 Node.js에 대한 개념을 배우고 Node.js Express까지 왔다. 먼저 Node.js는 자바스크립트의 활용 범위를 웹 밖으로 까지 확장시켰다. 그래서 백엔드 쪽에서 활용하고 있는데 아직까지 개념을 살펴보고 있는 중이다. 이 후로 프레임워크 Express.js를 바로 배웠는데 정리를 해놔야 기억할 것 같아 기록하고자 한다. 일단 이를 활용하기 위해서 Hyper 터미널을 깔아서 CLI로 조작하려고 한다. 사실 이에 대한 내용은 내가 개발 초창기에 궁금해서 찾아봤는데 이렇게 다시 보니 공부해놓길 잘했고 언젠가 쓰인다는 사실을 깨달았다. 뭔가 항상 아는게 전혀 없어서 너무 날 괴롭게 했는데 정말 반가웠다. 먼저 명령어를 종 정리해야두어야한다. 

 

1. 터미널 조작 용어들 

ls - 현재 디렉토리(파일)의 있는 구성원들을 보여준다.

cd (디렉토리 이름) - 디렉토리 이동한다. (한 단계씩 이동 가능하다. 두 단계 이상을 이동할 때는 전체 path를 다 써줘야한다.)

cd .. - 상위 디렉토리로 이동한다.

mkdir (디렉토리 이름) - 새로운 디렉토리를 현재 디렉토리에 생성한다.

touch (파일 이름) - 새로운 파일을 생성한다.

start (파일 이름) - 파일을 연다.

rm (파일 이름) - 해당 파일을 제거한다.

pwd - 현재 위치의 경로를 출력한다. 

rm -r (디렉토리) - 디렉토리를 포함해 하위 파일들을 모조리 지운다.

 

이렇게 터미널에서 용어를 통해서 조작을 하고 다음은 시작을 위한 준비 단계이다. 

내가 배운 실습 내용인데 여기서 NPM은 라이브러리이다.

 

2. setup 과정 

• Make a new folder called Calculator on your Desktop
• Change Directory to this new folder
• Inside the Calculator folder, create a new file called calculator.js
• Set up a new NPM package - npm init으로 시작해서 설정하면된다. 
• Open the project folder in Atom - 찾아보니 atom을 이제 지원안한다하길래 나는 VS code로 했고 . code 하면 열린다.
• Using NPM install the express module - npm install epress 명령어를 통해서 express setup한다.
• Require express in your calculator.js 

express 모듈을 불러와준다. 파이썬에서 import와 비슷하다.

• Setup express

모듈 활용을 위해 변수에 저장해 준다.

• Create a root route get method with app.get()

/ 메인 페이지이고 이걸로 인해서 이해가 확장되었다. /~~로 통해서 다른 추가 페이지가 생성된다. 하나하나가 route(경로)라는 개념이다. 우리가 흔히 인터넷 홈페이지 잘못된 주소를 치면 경로가 잘못되었습니다. 라고 뜨는데 그 때의 경로이고 영로 route이다.

• Send the words Hello World from the root route as the response
• Spin up our server on port 3000 with app.listen

• Run server with nodemon - nodemon은 자동으로 코드를 업데이트해서 웹에 띄워준다. 원래는 코드를 수정하고 싶으면 코드를 수정하고 터미널에서 웹과의 연결을 종료했다가 다시 시작해야하는데 이 작업을 nodemon이 자동으로 수행시켜준다. npm install -g nodemon으로 설치하면된다. nodemon (js 파일 이름)으로 실행한다.