생활코딩 node.js _ 29강부터 30강까지

# Node.js의 패키지 매니저와 PM2

Package Manager의 Package는 소프트웨어를 부르는 여러가지 표현 중 하나라고 생각하면된다. 독립적으로 실행되는 것을 package라고 할 수 있고 어떤 프로그램 안에서 부품으로 사용되는 작은 프로그램도 package라고 할 수 있다.

Package Manager은 software를 생성하고 설치하고 업데이트 및 삭제할 수 있도록 관리해주는 것을 말한다.

각각의 컴퓨터 언어와 OS 별로 Package Manager들은 굉장히 중요한 역할을 하고 있다.

 

오늘은 여러 Package Manager들 중 NPM을 볼 것이다.

NPM은 Node.js에서 광범위하게 사용되고 있고 기본적으로 Node.js를 설치할 때 함께 설치되는 Package Magnager이다.

 

검색 엔진에 PM2를 입력해서 홈페이지로 가면 PM2라는 프로그램 패키지가 나온다.

PRODUCTION PROCESS에서 process는 질행중인 프로그램을 부르는 다른 표현 중의 하나이다 (press process라고도 함)

ADVANCED, PRODUCTION PROCESS MANAGER FOR NODE.JS는 Node.js를 통해서 만든 프로그램을 말한다.

이는 지금까지 작업해왔던 main.js가 될 것이다.

 

프로그램을 실행해서 동작을 시키다보면 어떤 이유로 인해 우리가 원하지 않은 순간에 프로그램이 꺼질 수도 있다. 

PM2와 같은 프로그램이 우리가 만든 프로세스를 감시하고 있다가 꺼지면 다시 켜주는 역할을 한다.

그리고 우리가 코드를 수정하면 Node.js를 껐다가 다시 실행시켜야 변경된 내용이 반영됐었는데 PM2가 파일이 수정되는지를 관찰하고 있다가 파일이 수정되면 자동으로 프로그램을 껐다가 다시 켜서 수정할 때마다 프로그램을 껐다 키는 불편함을 제거할 수 있게 도와준다.

 

* * PM2 설치 * *

cmd 창에 $ npm install pm2 -g

 

* * PM2 실행 * *

cmd 창에 $ pm2 start main.js

 

신기하게도 PM2를 실행한 다음에 localhost:3000에 접속해보면 이렇게 잘 실행된다.. ㅇㅅaㅇ

 

이외에도 더 신기한 기능이 있다.

cmd창에 $ pm2 monit 명령을 실행하면 PM2에 의해 실행되고 있는 프로그램들이 보인다.

그리고 만약 PM2가 실행되고있는데 강제로 main.js가 실행되고 있는 cmd창을 종료시켜버리면 바로 반응을 한다.

종료시켜버린 cmd창을 다시 켜주면서 Application이 끈질기게 생존할 수 있도록 도와준다.

이를 설명한 화면은 다음과 같다.

 

왼쪽 부분이 PM2에 의해 실행되고 있는 프로그램을 보여주고 있는 것이고 오른쪽 부분은 만약 프로그램이 갑자기 종료되었을 때 알림이 나오면서 재실행했다는 메시지를 전달해주는 곳이다. 

이 화면을 나가고 싶을 때는 Shift + q 를 누르면 된다.

 

* * 현재 실행중인 process의 list 보기 * *

$ pm2 list 

 

* * 실행중인 process 종료하기 * *  (만약 끄고싶은 process의 이름이 main이라면)

$ pm2 stop main

 

다음 화면을 보면 실행한 결과의 창을 볼 수 있다.

 

$ pm2 list에서 main의 상태는 online으로 실행 중임을 알 수 있다.

$ pm2 stop main을 실행시킨 후 main의 상태는 stopped으로 실행이 종료되었음을 알 수 있다.

 

PM2는 프로그램의 소스코드를 변경했을 때 자동으로 main.js를 껐다가키기 때문에 불편을 감수하지 않아도 된다.

그리고 PM2를 실행시킬 때 옵션을 하나 꼭 추가하자.

$ pm2 start main.js --watch

 

리로드 버튼을 누르기 전

 

리로드 버튼을 누른 후

코드는 페이지의 제목인 WEB을 WEB2로 바뀌었다. 

예전 같았으면 바꾼 코드를 저장하고 cmd창을 거쳐 Node.js을 껐다가 다시 실행한 후 수정된 내용을 확인 할 수 있었지만 이젠 쉽게 리로드 버튼만 누르면 바로 수정된 내용의 나온다.

 

근데 코드에 오류가 생겼을 때 이전 방식으로 바로바로 확인할 수 있었지만 현재 방식으로는 확인을 잘 할 수 없다.

$ pm2 log 

아래 화면과 같이위 명령어는 문제점이 생기면 화면에 바로 문제점을 보여준다.

 

이렇게해서 아주 유용한 도구 PW2를 설치하고 사용하는 법까지 배웠다.

그리고 Package Manager이라고하는 중요한 개념을 살짝 알아보았다 앞으로도 Package Manager을 사용해서 프로그램을 실행시켜볼 예정이다.

 

 

 

 

 

# HTML -form

지금까지 만든 Web Application은 data라는 이름을 갖고 있는 directory에 파일을 생성하면 그 파일을 감지해서 글 목록을 만들어주고 우리 대신에 html 코드를 생성해줄 수 있었다.

data directory에 접근할 수 있는 있는 건 자기 자신 뿐 이기 때문에 콘텐츠를 생성하는 것은 이 사이트의 소유자만 가능하다. 이런 한계는 누구나 웹을 통해서 데이터를 전송하면 그 전송된 데이터가 데이터 디렉토리 안에 자동적으로 생성되게 하고 싶다는 마음을 만든다. 이제부터 컨텐츠를 사용자가 웹을 통해 생성하고 또 수정하고 삭제하는 방법을 길게 살펴볼 예정이다.

그 첫 걸음으로서 우리가 먼저 볼 것은 사용자가 서버 쪽으로 데이터를 전송하기 위한 방식인 html form이라는 기능을 살표볼 것이다.

 

그 전에 syntax directory에 form.html 파일을 만들어 주고 여기에다가 사용자로부터 정보를 인풋받는(입력받는) 법을 살펴볼 것이다.

 

 

form.html 파일에 위와 같이 코딩을 했더니 저기다 글씨를 입력할 수 있게됐다. 이제 이 입력한 정보를 서버로 전송할 수 있게 되는 거죠. 더 이쁘게 만들려면 <p>태그로 감싸서 줄바꿈이 되도록 할 수 있다. 

그리고 저 코드는 한 줄의 텍스트를 입력할 수 있는 것이기 때문에 여러 줄을 입력할 수 있도록 바꿔준다.

그래서 여러 줄을 입력받고자 하는 경우에는 <textarea></textarea>라고하는 태그를 사용하면 된다.

그리고 사용자가 입력이 끝난 다음에 전송을 해야하는데 이때 전송버튼이 필요하다. 

이 때는  <input type = "submit"> 을 명령하면 전송버튼이 생긴다.

여기까지 설명한 내용이 화면에서 볼 때는 아래 이미지와 같다.

 

 

그런데 이렇게 사용자가 입력한 정보를 서버 전송하기 위해서는 정보를 어디로 보낼 것인가에 대한 주소가 필요하다. 

사용자가 전송하고자 하는 데이터들을 갖고 있는 폼들을 <form>으로 감싸주면 된다. 

그리고 action이라는 control을 추가하게 되면 입력한 정보를 (action의 값으로 나타내준 주소)서버로 전송하고 싶다라는 뜻이 된다. 그런데 입력한 각각의 값들이 이름이 있어야지만 서버 쪽에서 받았을 때 의미가 있다.

각각의 글 쓰는 명령어에다가 control 중의 하나인 name을 붙여준다. 

여기까지의 코드가 아래 이미지와 같다.

 

제출 누르기 전

 

제출 누른 후

제출을 누른 후 웹 페이지의 주소를 보면 쿼리 스트링이 만들어 지는 것을 볼 수 있다. 

그래서 <form>은 안에 있는 각각의 control들에 사용자가 입력한 정보를 제출버튼을 눌렀을 때 action 속성이 가리키는 서버로 쿼리 스트링의  형태로 데이터를 전송하는 기능이다. html의 기능이다라고 생각하면 된다.

아직 process_create가 아직 없기 때문에 not found가 떴지만 저 Application에게 title과 description 값을 전송하기는 했는데 이건 좋은 방법이 아니다. 

 

우리가 어떤 특정 웹페이지를 사용자가 가져갈 때 id= HTML이라고 했는데 이건 좋은 방법이다.

왜냐면 주소상에 우리가 필요한 데이터가 포함이 되어 있어야지만 이걸 카피해서 누군가에게 전송하고 그 사람이 여기로 올 수 있기 때문이다. 

지금 우리가 하려는 것은 글을 쓰는 것이고 뒤에서는 글을 수정하고 삭제하는 일도 할 것이다.

근데 그것을 하기 위해 데이터를 전송할 때 주소의 데이터가 포함이 되어 있다면 저 주소를 무심코 카피해서 누군가한테 보냈을 때 그 사람이 이걸 클릭해서 들어오면 우리 서버에 있는 정보가 수정되거나 삭제되거나 생성되는 사건이 일어날 수 있다.

따라서 서버에서 데이터를 가져올 때  Query String을 쓴다.

서버에 데이터를 생성하거나 수정하거나 삭제하는 것과 같은 수정행위를 가할 때에는 필요한 데이터를 이렇게 url로 보내면 절대 안된다. 따라서 눈에 보이지 않는 방식으로 보내는 것이다.

그러기 위해서 그 방법을 method = "post"로 하면 된다.

여기까지 코드가 구현된 모습을 아래 화면에서 볼 수 있다.

method = "post"를 사용하고 url을 봤더니 우리가 action 속성에서 적은 process_create는 있지만 Query String이 없다는 것을 알 수 있다. 이는 사람 눈에 보이지 않는 방식으로 은밀하게 서버로 전송한 것이다. 

이렇게 전송하면 아주 큰 데이터도 전송할 수 있다. 반면에 url로 데이터를 전송할 때는 url은 무한히 긴 데이터를 수용하지 않기 때문에 나중에 데이터가 짤릴 수도 있는 문제가 있다. 그래서 사용자가 서버로부터 데이터를 가져올 때는 get방식을 쓰는 것이다. get방식이란 method에 get이라고 적혀있거나 아니면 method가 생략되어있을 때 get방식이다.

하지만 서버의 데이터를 수정, 삭제, 생성과 같은 것을 할 때에는 반드시 method를 post방식으로 해야한다.

 

 

 

 

 

😊 더 알아보기 _ URL과 URI의 차이점 알아보기

 

 

URI (Uniform Resource Identifier)

resource의 식별자이다. 리소스의 식별은 리소스의 위치를 표시하거나 unique한 이름으로 접근할 수 있을 것이다. 현실 세계에 비유하면, 나를 내 거주지(위치)나 나의 주민등록번호로 다른 사람과 나를 구별할 수 있는 객관적인 방법이 생기는 것이다.

• URI의 존재는 인터넷에서 요구되는 기본조건으로서, 인터넷 프로토콜에 항상 붙어다님
  - ex) http://www.naver.com (http프로토콜임을 명시하고 있음)
• 인터넷에 있는 자원을 나타내는 유일한 주소
• URI의 존재는 인터넷에서 요구되는 기본조건으로서, 인터넷 프로토콜에 항상 붙어다님
  - ex) http://www.naver.com (http프로토콜임을 명시하고 있음)
• URI의 하위개념에 URL,URN이 포함되어 있다.
• URI의 보편적인 형태가 URL인데, URI의 부분집합으로 볼 수 있다.
  - 자원에 접근하기 위해 사용되는 절차
  • 어떤 자원을 가지고 있는 특정한 컴퓨터
  • 컴퓨터 상의 유니크한 자원의 이름(파일명)

• http://test.com/test.pdf?docid=111 이라는 주소는 URI이지만 URL은 아니다.
  - http://test.com/test.pdf 까지만 URL임(주소의 위치)
  • docid=111이라는 쿼리스트링의 값에 따라 결과가 달라지게됨, 따라서 식별자 역할을 하고 있음
• http://test.com/test.pdf?docid=111 ,http://test.com/test.pdf?docid=112는 같은 URL을 가지고 다른 URI를 가짐

URL (Uniform Resource Locator)

• 자원
• resource를 access할 수 있는 위치를 나타낸다.
• 웹 상에 서비스를 제공하는 각 서버들에 있는 파일의 위치를 표시하기 위한 것
  - http://blong.com/work/test.pdf 는 blog.com서버에서 work폴더안의 test.pdf를 요청
• 웹사이트 주소가 요청하는 파일이라기 보다는, 구분자로 보는 것

URN (Uniform Resource Name)

• resource의 name을 나타낸다.
• 위치와 상관없이 리소스의 이름값을 이용해서 접근하는 방식
• 노출된 URL은 http://blog.com/syun/222 인데, http://blog.com/syun/list/323으로 요청을 보내면 404 response를 받는다. 이를 보완하기 위해서 위치 정보와는 무관하게 리소스를 찾을 수 있게 해주는 방식
• 해당 리소스의 위치정보가 아닌 실제 리소소의 이름으로 사용하는 방식
• 예시로는 ISBN 시스템이 있다. URL과 같이 access할 수 있는 위치가 아닌 이름으로 표시된다.
  예시: ISBN 0-486-27557-4

URI, URN, URL의 관계

URL과 URN은 URI의 종류이다.

그렇기에 모든 URL은 URI이고, 또한 모든 URN은 URI이다.

그리고 위에서 언급했듯이, URL과 URN은 다르다.

그렇다는 건 모든 URI는 URL이라고 말할 수 없다. (URI는 URL과 같다는 주장에 대한 오류)

 

 

**  참고자료 **

개발상식 - URI, URL 차이 정리

 

URI, URL과 URN의 차이

 

URI vs URL vs URN :: 마이구미

 

😄 더 알아보기 _ Postman 설치 및 사용법 알아보기 

 (추가할 예정입니다😙)