본문 바로가기

코딩 농장/웹 프로그래밍

Web2 node.js 세번째

NPM 을 사용해 pm2 를 다운받자 : "npm install pm2 -g"

하지만 오류로 인해 pm2 로 js 파일이 실행 안되었다 

해결 방법 : https://blockmonkeys.tistory.com/94

Window Power Shell 을 관리자 권한으로 실행해서 해결해주었다.

 

pm2 사용

좀 더 쉽게 서버를 관리할 수 있다

우리는 코드를 변경하고 저장하고 node main.js 를 실행해서 웹 새로고침을 해야 확인할 수 있었다.

이제는 코드를 변경하고 저장한 후 웹 새로고침을 하면 바로 변경사항을 볼 수 있다.

"pm2 start main.js --watch" : 코드를 수정할 때마다 자동으로 반영시켜준다.

"pm2 log" : 코드를 저장하고 실행할 때 변경점이나 발생하는 오류를 보여준다.

"pm2 status" : 현재 열려있는 프로젝트를 보여준다.

"pm2 stop app" : app 프로젝트를 닫는다.

 

HTML-form 사용자로부터 정보 입력받기

form 태그는 submit 했을 때 사용자가 입력한 정보를 action 속성이 가리키는 서버로 Query String 의 형태로 데이터를 전달해준다.

우리가 필요한 주소를 가져갈 때 id 가 표시되는 것은 옳지만 서버에 있는 글을 쓰고 삭제하는 수정 할 때 필요한 데이터를 url (id) 로 보내면 안된다. 눈에 보이지 않는 방법으로 보내야 한다.

따라서 method="post" 를 사용해준다.

 

이제 다음과 같은 과정으로 사용자에게 데이터를 입력받는다

Create 버튼을 만듦 : html 에서 하이퍼링크로 create를 클릭하면 수정 페이지로 가도록 함 ( pathname 을 기준으로 나눔 )

문자를 입력할 수 있는 공간을 만듦 : html 에서 form 을 사용해 정보를 받는다. ( 우리가 정보를 받아서 저장을 해놓는다 )

submit 버튼을 만듦 : 받은 정보를 이제 서버에 보내고 어떤 작업(새 페이지를 만들던지 데이터를 저장하던지...)을 수행한다. 

request.on('data', function(data) { // 데이터를 쪼개서 받아 쌓는다.

    body += data;

}

이후 받은 데이터를 파일로 저장한다. 우리가 만들었듯이 파일이 있으면 자동으로 페이지가 만들어진다.

// 정보를 다 받았으면 
        request.on('end', function(){
            var post = qs.parse(body);
            var title = post.title;
            var description = post.description;
            fs.writeFile(`data/${title}`, description, 'utf8', function(err){
                response.writeHead(200);
                response.end('success');
            })
            console.log(post);
        })

 

Redirection : 사용자를 임의의 곳으로 보낸다. 사용자가 새 정보를 입력해서 페이지가 만들어졌을 때 그 페이지로 보낸다면 그것이 리다이렉션이다.

 

생활코딩 Web2 node.js 강의 36강까지

'코딩 농장 > 웹 프로그래밍' 카테고리의 다른 글

실용 JavaScript 첫번째  (0) 2022.08.12
Web2 node.js 마지막  (0) 2022.08.11
Web2 node.js 네번째  (0) 2022.08.10
Web2 Node.js 두번째  (0) 2022.08.02
Web2 Node.js 첫번째  (0) 2022.08.02