[Node.js] 7일차-1 : 글쓰기, 수정 (method post, redirection)

[Node.js] 7일차-1
: 글쓰기, 수정 (method post 데이터 사용하기, redirection)

만든 날짜:

2019-01-17 오전 9:43

 본 글은 출처 생활코딩-https://opentutorials.org/course/3332/21136-에 있는 강의를 들으며 요약정리한 내용입니다. 원내용은 위 링크에서 확인할 수 있습니다. 감사합니다.

App - POST 방식으로 전송된 데이터 받기

여기까지 우리는 생성페이지로 이동하게되면 form을 통해서 사용자가 입력한 데이터들을 action에 보냈다. post방식으로 보냈다. 이제 그 데이터를 받아보자.

http://localhost:3000/process_create 로 데이터를 전송하는데 이제 해당 부분에서 데이터를 받을 수 있게 만들어야 쓸모가 있어진다. 우선 주소이름을 바꾸자.

create_process로 주소이름을 바꿔주었다.

그 후 create_process로 이동했을시 잘 전송된 것을 표시하기위해 success를 출력하는 부분을 구현했다.

post방식으로 전송한 데이터를 nodejs안에서 가져오기 위해서 어떻게 해야할까?

Google : nodejs post data

createServer는 nodejs로 웹브라우저로 접속이 들어올 때마다 콜백함수를 호출한다. request는 요청할때 웹 브라우저가 보낸정보, response는 응답할 때 우리가 웹브라우저에 전송할 정보가 담긴다.

웹브라우저가 post방식으로 전송을할 때 데이터가 많으면 한번에 처리하다가 프로그램이 꺼지든 무리가 간다. nodejs에서는 post방식 데이터가 많을경우를 대비해서 아래와 같은 사용방법을 가진다. 100이 있으면 그중에서 조각조각을 수신할 때마다 서버는 아래 콜백함수를 호출하도록 약속되어있다. data라는 인자에 수신한 정보를 주도록 되어있다.

입력한 데이터를 console.log()를 통해 콘솔에 출력해보면 위와 같이 입력된 정보를 확인할 수 있다. 즉 post.title, post.description으로 접근하여 데이터를 사용할 수 있다. qs.parse()를 이용해서 정보를 객체화 한 것이다.

---

App - 파일생성과 리다이렉션

전송된 데이터를 파일형대로 저장하는 방법을 알아보자.

Google : nodejs file write

fs의 writeFile함수를 사용하여 파일을 쓴다. 저장경로는 템플릿 리터럴을 사용하여 data 디렉토리 아래에 저장한다. err처리는 람다로 처리할 수 있도록 콜백함수로 제공한다.

사용자가 파일을 생성(글쓰기)을 하고 난 후에는 그 파일(페이지)로 이동할 수 있도록 리다이렉션을 해봅시다. 리다이렉션이란 어떤 처리후 사용자를 다른 페이지로 팅겨 내는것이다.

Google : nodejs redirection

301 뜻 : 해당주소는 해당 주소로 변경이 되었다.

302: 페이지를 다른 곳으로 리다이렉션하라는 뜻이다.

위와 같이 응답을 302로 주고 Location으로 설정해주면 해당 주소로 다이나믹하게 리다이렉트 되는 것을 확인할 수 있다!

즉, MongoDB로 파일을 생성하고 나고 나서 바로 해당 페이지로 이동할 수 있게 되었다.

---

App - 글수정 - 수정 링크 생성

글 수정 기능을 만들어보자 (update 기능)

html코드를 생성하는 함수에 control을 추가하여 홈에는 업데이트가 뜨지않고 특정 글을 클릭했을 때 update가 뜨도록 하자.

위와 같이 3번째 인자로 control을 주어 update링크를 표시한다.

update?id= 를 통해서 수정하고 싶은 파일을 쿼리스트링으로 전달하자.

---

App - 글수정 - 수정할 정보 전송

form을 사용하여 수정할 데이터를 받자.

(cf. ==과 ===차이 ==는 동등연산자. 서로다른 타입이면 변환해서 비교. === 는 일치연산자. 두 피연산자를 확실히 비교한다.)

사용자가 수정하는 정보와 수정하는 파일을 구분해야한다. (제목 변경가능하므로) type="hidden" 을 사용하여 원본 파일명을 전송한다. 아직 수정안된 파일명.

다시 설명 하자면, 사용자가 수정시 본문 뿐아니라 제목까지 수정이 가능하기 때문에 수정된 제목만 전달하게 되면, 원본 파일명은 아직 수정이 되지 않았지만 접근하려는 문제가 생길 수 있기 때문에 수정전인 원본파일명을 hidden타입으로 전송시켜주는 것이다.

코드를 작성하고 실행해보면 위와 같이 update를 클릭시 수정란에 원본 내용이 긁어져 오게되며, 내부적으로 id로 원본명이 전송된다.

---

App - 글수정 - 수정된 내용 저장

정보를 받아보자.

파일 명이 변경된 경우.

Google : nodejs file rename

rename을 통해 수정된 이름으로 파일 명을 변경한 뒤에 수정한 내용으로 원본 파일 내용에 덮어 씌운다. 그리고 수정된 곳으로 이동하여 확인할 수 있다.

JavaScript에 !를 추가로 붙여서 수정하는 경우 위와같이 파일명까지 잘 바뀐 것을 확인할 수 있다.