PM2 작업 준비
- pm2 start main.js —watch (에디터 변경사항 바로 반영)
- pm2 log (에러, 변경사항 바로 표시)
<생활코딩 - WEB - WEB2 - Node.js>
1. App 제작-글생성 UI 만들기
1. creat 링크 생성
1. function templateHTML 함수에서 list와 body 함수 사이에
“/create”라는 a 링크를 입력한다.
2. 웹화면에서 create 라는 링크를 클릭하니,
localhost:3000/create 주소로 이동하고 Not found가 확인되었다.
3. pathname을 확인해보니,
홈 화면은 “/”이고 create 화면은 “/create”임이 확인되었다.
2. else if 통해 form box 생성
1. 맨 마지막 else 앞 부분에 else if 를 입력한다.
2. 소괄호에 pathname === “/create”를 입력한다.
3. 중괄호에 홈화면에 입력했던 fs.readdir 내용을 붙여 넣기한다.
4. var title을 create로 변경하고, var description을 삭제한다.
5. var template에서 세번째 인자부분이었던
title, descriptopn 부분을 삭제한다.
6. 그 부분에 form.html 내용을 붙여 넣기한다.
7. 이제 localhost:3000/create 를 접속하면, form box 2개가 확인된다.
3. form box에 설명주기
1. else if - var template에서 p 태그 부분에 각각
placeholder=“title”, =“description”을 입력한다.
2. formbox 내에 회색으로 title, description이 확인되고,
그곳에 글을 입력하면 사라진다.
4. form box 입력 정보 확인하기
1. 검사-Network를 열어놓는다.
2. /create 웹화면에서 내용을 입력하고 submit을 클릭한다.
3. 웹화면에 Not found가 확인되고,
URL은 localhost:3000/process_create라고 확인된다.
4. Network-process_create-Headers-Form Data를 확인한다.
5. form box에 입력한 내용이 post 방식으로 전송된 것을 볼 수 있다. 2. App 제작-POST 방식으로 전송된 데이터 받기
1. 가독성을 위해 웹주소를 localhost:3000/create_process 로 바꿔주었다.
2. 맨 마지막 else 앞 부분에 또다시 else if 를 입력하고
pathname이 /create_process와 같다고 정의한다.
3. post data를 전송받는 방법을 알기 위해,
“nodejs post data”라고 검색한다.
4. 확인 내용에 따라 입력한다.
1. *request는 요청할 때 웹브라우저가 보낸 정보들을,
response는 응답할 때 우리가 웹브라우저한테 전송할 정보들을 담는다.
5. path name이 /create_process인 else if 안에
request.on ‘data’와 request.on ‘end’를 입력한다.
1. request.on ‘data’는
웹 브라우저가 포스트 방식으로 데이터를 전송할 때 데이터의 양이 너무 많을 때를 대비하여,
서버쪽에서 데이터를 조각조각 수신할 때마다 콜백 함수를 호출하도록 약속되어있다.
2. 이에 body = body + data; 라는 값을 통해,
콜백이 실행될 때마다 데이터를 추가하도록 설정한다.
3. 이제 더이상 추가될 데이터가 없을 때, end 함수가 실행된다.
4. 정리: request와 같은 이벤트를 통해서
웹브라우저로부터 포스트 방식으로 전송된 데이터를 가져올 수 있고,
또 쿼리 스트링이라는 모듈의 파스 함수를 이용해서 정보를 객체화할 수 있다.
5. 더하여, var title = post.title; var description = post.description;
이라는 변수를 통해 form box에 입력된 정보를 가져올 수 있다. 
💡 Software Engineer - F.E