생활코딩 node.js_ 35강부터 36강까지

# App 제작 - 글수정_수정할 정보 전송

이전 시간에 업데이트 링크를 생성해보았습니다!

이제 그럼 업데이트를 클릭했을 때 보여지는 화면을 만들어봅시다

 

화면을 만들기 위해서는 첫 번째로는 폼이 필요하고

두 번째는 우리가 수정하고자 하는 데이터를 미리 넣어두어야하기 때문에 리드 기능이 필요합니다.

따라서 기존의 우리가 만들었던 것 중에 어떤 특정한 글을 읽어오는 id값이 있는 경우에 대한 처리를 필요로 합니다.

 

path정보가 /update일때의 공간을 새롭게 만들어 주고, create에 있는 글쓰기UI 코드를 복사해서 붙여넣어줬습니다.

위에 드래그한 부분이 긁어온 코드들 입니다.

웹 브라우저의 창은 다음과 같이 나옵니다~

 

코드를 약간 수정해야할 것 같네요.

저 폼에서 제출버튼을 눌렀을 때 사용자가 정보를 어디에 보낼 것인지를 수정해줘야합니다.

 

저는 보내는 위치를 create_process에서 update_process로 설정했습니다.

 

그리고 수정 기능이니까 기존에 있었던 정보가 글쓰기 UI에 들어가 있어야 글을 수정할 수 있기 때문에

create에서 만들었던 글 정보를 읽어다가 update에 넣어줘야 됩니다. 

제목부분과 내용부분을 가져와봅시다~

 

제목부분에는 title이라는 변수에 값을 쓰면되는데

html input 태그는 value라는 속성 덕분에 value의 값으로 넣은 것이 기본값으로 들어오게 할 수 있습니다.

화면을 리로드하면 제목을 쓰는 글쓰기 UI에 CSS가 나온 것을 볼 수 있을 겁니다.

 

그 다음 내용부분을 수정하기 위해서, textarea의 기본값('${description}')을 textarea태그 안 쪽에 넣어주면 됩니다.

여기까지의 과정은 다음과 같습니다.

 

 

화면을 리로드 했을 때 다음과 같이 제목과 글의 내용이 기본적으로 들어가 있는 것을 볼 수 있습니다. 

그 다음 수정을 마치고 제출버튼을 눌렀을 때, 아까 설정한 update_process로 사용자가 수정한 정보를 전송할 건데 

그 때의 어떤 파일을 수정할 것인지를 알 수 있어야합니다.

근데 우리가 타이틀로 전송한 정보를 바탕으로하면 문제가 생깁니다. 왜냐면 사용자는 자신이 제목을 수정할 수도 있기 때문입니다. 

만약 CSS -> CSS3라고 제목을 수정했으면 정보가 전송되어도 css3라는 파일을 찾지못합니다.

그래서 사용자가 수정하는 정보와 우리가 수정하고자하는 정보, 파일을 구분해서 전송해야합니다.

 

< input type ="text" name="id" value = "${title}"> 

 

위의 코드를 추가해주었습니다. value의 값으로 기존의 title 값을 전달할 것입니다. 추가한 코드를 실행시켜보면 다음과 같이 나옵니다. 

 

웹 브라우저에 CSS라는 글쓰기 UI가 하나 더 나왔습니다. 하나 더 나오게 된 CSS정보는 사용자가 수정하면 안됩니다.

그렇기 때문에 화면에 보이는게 의미가 없습니다. 그래서 html에는 hidden 이라는 타입이 있습니다.

 

hidden을 쓰면 위 사진의 웹 브라우저를 보는 것처럼 가려져 나오게됩니다. 

hidden로 되어있는 저 컨트롤의 id라는 이름으로 value값이 전송될거니까 update_process에서는 수정되지 않은, 수정할 파일의 이름을 받을 수 있는 것입니다. 

 

 

 

 

#App 제작 - 글수정_파일명 변경, 내용저장

update_process 쪽으로 데이터를 전송했기 때문에 이렇게 전송한 그 데이터를 받아낼 수 있는 코드를 생성해주어야 합니다!

위와 같이 pathname === "update_process"를 추가하고 안에는 create_process의 코드를 가져와 약간의 수정을 했습니다.

update_process에는 title, description 뿐만 아니라 id를 받기로 되어 있어서 변수 id를 추가해주었고 부분 주석처리를 일단 해주었습니다.

CSS->CSS3로 제목을 바꿨다면 파일의 이름또한 CSS -> CSS3로 바꿔야합니다. 

파일 제목의 수정을 위해 fs.rename( `old File`, `new File`, callback)을 사용했습니다.

 

코드를 수정하고 CSS3라고 바꾼 제목을 제출하기 전이다.

 

CSS3라고 제목을 수정했더니 파일이름도 수정되었다!

이렇게 성공적으로 파일명도 바꿔졌습니다! 

 

그 다음으로 해야할 일은 CSS3라는 파일의 내용을 바꾸면 됩니다.

근데 내용을 바꾸는 코드는 주석 처리해둔 부분이기 때문에 그대로 컷해서 함수 안으로 붙여넣어주면 됩니다.

 

수정한 코드를 실행시켜주기 전 화면입니다. 웹 브라우저를 봐주세요!

제목을 CSS라고 바꿔주고 내용을 CSS is ...로 바꿔준 후 제출버튼을 누르기 전인데

data폴더에 CSS3라고 아직 파일 명이 바뀌지 않았습니다!

 

이렇게 제출버튼을 누르면 내용도 수정되고 파일도 수정된 모습을 볼 수 있습니다!