[생활코딩] WEB2 - Node.js (下)

0. npm 사용법

* 실행을 원하는 파일이 있는 폴더로 이동(cd)

앱 목록을 확인하고 싶을 때 : pm2 list

앱을 실행시키고 싶을 때 : pm2 start (파일이름).js

앱을 종료시키고 싶을 때 : pm2 stop (파일이름).js

앱을 실행시키고 수정사항을 자동으로 반영시키고 싶을 때 (끄고-켜고) : pm2 start (파일이름).js --watch

앱 현황(오류상황 등)을 체크하고 싶을 때 : pm2 log

 

1. HTML form 기능

1) form이란

 웹브라우저(사용자) -> 서버로 데이터를 전송할 때 사용하는 기능.

 HTML로 만들 수 있음.

 

2) <form> 태그

: 안에 있는 각각의 컨트롤에 사용자가 입력한 정보를 / submit 버튼을 눌렀을 때 / queryString의 형태로 / action 속성이 가리키는 서버로 / 보내는 기능이다.

-> 이렇게 '서버'로 보내면, 'data' 폴더 안에 "title"값을 제목으로 하는 메뉴데이터가 생성됨.

*정보를 전송할 때 querystring에 담은 정보가 url에 그대로 드러나면, 문제 발생.

 (1) 누군가 임의로 정보를 수정/삭제할 수 있음.

 (2) 전송 가능한 정보량에 한계가 있음(url 길이 제한)

 -> method 속성을 변경해 눈에 보이지 않는 형태로 전송.

     디폴트는 method="get" (생략, 안 보임)

     정보를 서버에 생성/수정/삭제 시 method="post"로 변경해야 함.

 

2. 글생성 ui 만들기

웹페이지 내 메뉴바 밑에, 'create / update'라는 글자를 누르면 메뉴를 추가/수정할 수 있는 기능을 넣을 것이다.

 

step1. 페이지 기본 템플릿 templateHTML에 새로운 매개변수 'control'을 추가한다.

         템플릿 내에서 control이 들어갈 위치도 잡아준다.

         이제 저 함수 마지막 자리에 새 변수를 넣어주면 그게 뭐든 ${control}자리에 표시된다.

step2. 원하는 페이지에 가서 templateHTML에 매개변수를 추가한다.

       <a href="/create">create</a>  create라는 글자를 선택하면 path가 /create인 페이지로 이동한다.

       <a href="/update?id=${title}">update</a> update라는 글자를 선택하면 /update?id=${title} 페이지로 이동한다.

 

step3. path가 /create 인 페이지의 내용을 정의한다.

        3번째 매개변수 자리(body)에, 기존의 제목+글 대신 제목입력창+글입력창 기능을 넣어준다.

        1) 기본 :  form 태그 이용해서 내용을 server로 보낼 준비 -> 보내면 'data' 폴더에 새 데이터파일 생성됨

                    action 속성으로 create 제출 이후 리디렉트 될 /create_process 마련.

        2) 제목입력창 : <input> 태그 사용, 짧은 입력창 생성

        3) 글입력창 : <textarea> 태그 사용, 사이즈 조절되는 넓은 입력창 생성

        4) 제출버튼 : 다시 <input> 태그 사용. type="submit"이면 알아서 버튼이고 뭐고 알아서 다 되나 봄.

          * placeholder는 창에 넣을 값을 흐릿하게 적어 주는 기능

          * 여기서는 'create/update' 버튼이 없어도 되므로 매개변수 'control' 자리는 비움.

        -> 모두 정상이면 response.end(template) 반환

 

step4. 결과창 /create_process 만들기

         fs.writeFile 이용해서 방금 받은 내용을 새 File로 write함.

          제목은 post.title

          내용은 post.description

          패스는 /?id=${title}

          -> 생성 끝!

 

step5. 기존의 내용을 수정하는 /update 기능 구현

       우선 기존의 파일 내용을 불러오고(fs.readFile) create 기능과 비슷하게 만들되,

       제목입력창과 제목창에 value="" 속성으로 기존 내용을 미리 입력해 둔다.

       -> 사용자가 제목도 수정할 수 있는데, 이 경우 var title이 수정되면 데이터 관리가 곤란하므로

       input을 추가로 만들어서 id값을 기존 title로 저장하고 사용자가 못 보도록 숨긴다(type="hidden").

 

step6. 글 수정 기능 구현

 

3. 글삭제 기능

1) 삭제 버튼 만들기

    step1. 글을 선택했을 때 활성화되는 부분, 즉 update 기능이 있는 곳에 delete 키 삽입

      *주의 : delete 기능을 anchor로 링크 걸어서(get 방식) 구현하면,

                 그 링크를 복사했다가 다시 접속할 때 페이지가 삭제될 수 있음