[Node.js] 프로젝트 : 연락처 수정 후 삭제

출처 : https://www.youtube.com/playlist?list=PLG7te9eYUi7vxSvo6hvhOaht8oP0PoCwi

Do it! Node.js 프로그래밍 입문

 

 

 

연락처 수정

 

우선 GET 방식으로 해당 ejs 템플릿(업데이트 페이지)를 서버에서 가져오도록 한다. 수정하길 원하는 contact 값과 함께

 

 

 

업데이트 페이지의 input 값에 수정을 원하는 값들을 집어넣는다.

 

 

 

 

홈페이지 ejs에서 수정 페이지로 넘어갈 수 있도록 수정 페이지를 보여주는 GET 주소를 넣어준다. (해당 contact의 id 값을 파라미터로 전달)

 

 

 

그럼 수정 버튼을 눌렀을 때, 수정페이지로 넘어감과 동시에 수정하기 원하는 값들 역시 불러와진다.

 

 

 

 

 

 

form 태그는 method 요소에 GET과 POST 밖에 설정할 수 없다. 해당 form을 PUT과 DELETE로 보내고 싶다면 method-override를 이용한다. 서버를 끄고 터미널에 npm i method-override를 쳐서 설치한다.

 

 

 

 

 

그럼 애플리케이션에서 method-override를 사용하겠다는 것을 선언해야 한다.

 

 

 

 

저번에 만들어 놓은 업데이트 컨트롤러, PUT 방식이다. 마지막에 화면 페이지에 json을 보여줄 것이라고 설정했었는데, 이를 지우고 /contacts 경로(홈페이지 경로) 로 리다이렉트 하게끔 했다.

 

 

 

 

 

 

업데이트 ejs 파일에 가서 form에서 action에 수정 컨트롤러 에 대한 주소를 적은 뒤, ?_method=PUT 을 추가하여 이 form이 PUT 방식으로 전달하겠다는 것을 설정한다.

 

 

 

 

 

이름이 hong 인 것을 다음과 같이 수정하였다. 제대로 수정된 걸 확인할 수 있다.

 

 

 

 

 

 

 

 

연락처 삭제

 

간단하다 우선 이미 만들어 놓은 delete 컨트롤러에 홈페이지로 리다이렉트 하겠다는 코드를 추가하고, 홈페이지 ejs의 삭제 버튼을 input으로 만든 뒤 다음과 같이 form으로 감싼 후 action 요소의 주소 안에 method로 DELETE임을 설정하였다.

 

 

 

 

 

 

kim 을 삭제하자 리다이렉트 되어 kim이 없어진 걸 확인할 수 있었다.

 

 

 

 

 

몽고 DB에서도 확인해본 결과 kim에 대한 데이터가 사라졌다.