생활코딩 node.js _ 33강부터 34강까지
# App 제작 - 파일생성과 리다이렉션
post 방식으로 전송된 데이터를 데이터 디렉토리 안에 파일의 형태로 저장하는 법을 살펴보겠습니다.
검색 엔진에 node.js file write 라고 검색해서 공식문서를 살펴봅시다.
ctrl+f 로 원하는 함수를 검색할 수 있습니다. 여기서 저는 fs.writefile을 검색했고 결과가 위와 같이 나왔습니다.
fs.writeFile함수는 첫 번째 인자로는 제목의 이름을, 두 번째 인자로는 글의 내용을, 세번째에는 옵션인데 여기에 'utf8'을 넣을 것입니다. 마지막으로는 callback함수입니다.
공식문서의 예시와 설명을 참조해서 코드를 수정해보았습니다.
제목으로 나오게 될 첫 번째 인자에 title변수로 동적으로 바뀔 수 있도록 구현하고 두번째는 description에 전달된 값을 내용으로 받고, 형식은 'utf8'을 쓰게 될 것이며 콜백함수를 적어두었습니다.
function(err)이란 error가 있을 경우 error를 처리하는 방법을 제공하는 것인데 우선 에러를 처리하지 않을 것입니다.
콜백이 실행된다는 것은 파일에 저장이 끝났다는 이야기이고 파일에 저장이 끝난 다음에 success를 출력해주어야하니까
reponse.writeHead(200); response.end('success'); 를 코드 안으로 가져왔습니다.
지금까지 코드를 수정했으니 실제로 해봅시다!
제가 브라우저에서 제목은 node.js이고 내용을 node is .. greate!!라고 적어서 제출을 했습니다. 그랬더니...!
보시다시피 data 디렉토리에 새롭게 node.js라는 제목의 파일이 생성되었고 내용은 node is..greate!!로 아까 브라우저에서 적은 내용과 동일하게 저장되었습니다.
위의 사진은 제가 웹 브라우저에서 제출버튼을 누른 후 나오는 다음 브라우저 페이지입니다!
이렇게 파일 생성에 성공해보았으니 이제 사용자를 지금 생성한 파일을 보는 Vue page로 보내고 싶을 것 입니다
방금 만들어진 node.js 페이지로 가기 위한 주소는 다음과 같습니다.
주소 localhost:3000/?id=node.js로 사용자를 보내면 사용자가 글을 쓰고 자기가 쓴 글이 잘 전송됐는지를 확인하는 것까지 한 방에 할 수 있는 아주 편리한 기능을 만들어 볼 것인데 이것을 리다이렉션이라고 합니다.
node.js에서 redirection하는 방법을 검색엔진을 통해 알아보겠습니다.
response.writeHead(302, {'Location' : '/view/index.html'}); 을 유심히 봐 주세요.
302의 의미는 페이지를 다른 페이지로 리다이렉션시키겠다는 뜻입니다. (영원히 바뀐 것이 아닌 일시적으로 바꿈!)
만약 302의 자리에 200이라면 페이지를 띄우거나 만드는데 성공했다는 뜻이고
301은 사용자를 원래 페이지가 아닌 다른 페이지로 보내주긴 하는데 원래 있던 주소에서 Location 값에 있는 주소로 영원히 바꿨으니 앞으로 저기로 오세요 라는 뜻입니다.
다음과 같이 코드를 수정하고 실제로 어떻게 동작하는지 봅시다!
아까 글생성했던 것처럼 다시 해보겠습니다!
글을 작성하고 제출버튼을 눌렀더니 자연스럽게 위의 페이지로 넘어가게 되었습니다!
지금까지 사용자가 입력한 정보를 받아서 다이나믹하게 프로그래밍적인 방식으로 데이터 디렉토리에 파일을 생성하는 법을 살펴봤습니다!
# App 제작 - 글수정 & 수정링크생성
생성기능을 만들었으니 수정 기능을 만들어 봅시다!
그 전에 수정링크를 생성해볼겁니다!
update라는 링크를 어떤 특정한 글이 선택된 경우에만 나오고 홈에 있을 때에는 안 나오게 하는게 좋을 것입니다.
위의 이미지에 있는 코드들을 control이라는 변수로 대체해 아래와 같이 함수화 시켜주었습니다!
다음은 control 위치에 홈 화면이나 글 화면들이 달라져야하는 것에 유의하며 수정을 해봤습니다.
이렇게 글을 선택했을 때 update가 있게하고 home에는 없게 만들어 주었습니다.
또 한 가지 해야할 것은 우리가 어떤 특정한 글을 선택했을 때, update를 누르면 주소창에 localhost:3000/update로 가는 는데 누구를 업데이트 할 건지에 대한 정보가 필요합니다. 따라서 누구를 수정할 것인지에 대한 정보를 쿼리 스트링을 통해서 전달하려고 합니다.
이렇게 만들어주면 우리가 원하는대로 나오게 됩니다!