Node.js-MySQL-6

STEP 1. 작성자 관리 목록을 생성하자.(CRUD 중 Read!)

1. 웹페이지에 author로 이동하는 링크 역할을 하는 제목태그를 달아주기 위해 lib/template.js 파일에 <a>태그를 추가한다.

author라고 하는 path로 가게 되는데, 이때 이 path를 지정하는 경로가 없다.(우리가 아직 안했기 때문에!)

2. main.js에 경로를 추가한 후 author 모듈을 불러와 author 모듈의 home 함수를 사용하자. lib 폴더 내에 author.js 파일을 만든 다음 모듈을 내보내는 exports.home = function(request, response){...}함수를 작성하자.

3. 그런 다음, export.home 함수내에 뭘 채워야 할지 모르겠다면 먼저 작성했던 topic.js의 home 함수를 이용하자.(온고지신의 정신을 잊지 말 것)

4. node를 reload 해보면 Reference Error: db is not defined라는 반가운 오류가 난다. 침착하게 db 모듈을 복붙하고 db 모듈을 가져오는 김에 어차피 사용할 template 모듈도 불러오자.

5. 짠. author 페이지가 잘 보인다. 이제 author 표를 만들어보자. 표는 저기 welcome 과 hello, node.js 자리에 위치하면 되겠다. 코드에서 필요없을 title과 description 을 삭제하자.

6. 표가 들어왔으면 좋겠으니까 html 상으로 표를 만드는 table 태그 속 tr과 그 속에 td태그를 작성하자. tr은 표의 열(column)을 td는 표의 행(row)를 표시한다.

실행 화면

7. 테이블에 한 행(tr)을 추가한 다음, 테이블의 선을 주는 css를 작성하자. html에서 css는 style 태그 안에 작성한다. 테두리를 주자, 테두리 사이에 빈칸이 보기 좋지 않아 테두리 사이 여백을 없애는 border-collapse 속성을 주면 테두리 사이 여백이 사라진 걸 확인할 수 있다.

8. 테이블 안 정보를 프로그래밍으로 나타내기 위해, query 문을 작성하자. author 테이블을 사용하고 두 번째 인자로는 콜백함수를 작성하자. query문 안에 코드를 위치시키자.

9. table태그의 각 열의 name, profile, update, delete를 while문을 돌면서 채울 수 있는 변수 tag를 만들자.

구현 화면

10. 이렇게 작성해도 ok지만, tag 변수에 table 태그를 넣어서 코드를 정리정돈하자.

11. 노드를 reload해 잘 구현된 표의 모습을 확인한 후, 정리한 tag 변수의 코드 부분을 template.js로 빼서 코드의 가독성을 높이자.

12. template.js 파일에 authorTable이란 함수를 만든 후 파라미터로 authors를 넣자. 그 다음 return tag를 통해 테이블을 화면에 뿌리자.

13. author.js에는 $tag 변수를 ${template.authorTable(authors)}로 변경하자!

STEP 2. 작성자 관리 목록에서 작성자를 생성해보자(CRUD 중 Create!)

14. 작성자 관리 목록에서 작성자를 생성하는 ui는 form 태그로 저렇게 만드는 것을 머리속에 그려놓고 시작하자. 코드를 복붙해오는 과정에서 미처 지우지 못한 필요없는 코드는 삭제하자.

15. create_process에서 사용했던 form 태그 재사용해 author.js에 붙여넣자. 그런 다음 작성자 생성에 알맞게 변수명을 수정하자. action 뒤의 링크를 바꾸고 name과 placeholder을 name으로, textarea name과 placeholder 이름은 profile로 변경하자.
    그럼 다음 reload 해보면 작성자 관리 목록 표 위에 form 이 생기는 걸 볼 수 있는데, 표 위에 출력된 이유는 HTML의 세번째 인자 자리에 코드를 작성했기 때문이다. HTML 함수의 세번째 인자 자리는 control 역할을 하는 코드가 들어가야 하므로 두번째 인자 자리로 코드를 옮기자.

함수의 두번째 인자 자리로 form 코드를 옮기니 표 밑에 form이 생기는 걸 볼 수 있다.

16. submit 버튼을 눌렀을 때 전송된 데이터를 받는 코드를 작성하자.(=create_process) main.js 파일에 /create_author_process로 경로를 추가하자. 그런 다음 author.js 파일에 form action에 똑같이 경로를 붙여넣자.

17. 사용자로부터 전송된 데이터를 받은 후 화면에 뿌릴 코드를 작성해야 하는데, topic에서 작성했던 create_process코드를 이용해 author에 재사용하자. query문을 author에 알맞게 변경하자. 요청에 응답하는 response의 위치 또한 author로 경로를 바꾸자.

author create가 잘 실행되는 것을 확인할 수 있다.

18. 그런데, 경로로 설정한 이름이 아쉽다. main.js에서 경로 이름을 좀 더 나은 경로인 /author/create_process로 변경하자. 또한 함수의 이름도 author 모듈에서는 굳이 create_author_process 처럼 안해도 create_process가 하나이므로 후자로 변경하자.

19. main.js만 경로를 변경해서는 안된다. author.js의 form 태그 안 action 뒤에 붙는 경로도 수정해야 함을 잊지말자.

작성자 목록에 새로운 행이 추가됨을 확인 할 수 있다.

STEP 3. 작성자 관리 목록에서 작성자를 수정할 수 있도록 세팅하자(CRUD 중 Update!)

20.update 링크를 만들자. template.js에 변수 tag의 table의 열 중 하나인 update에 a태그를 만들고 id 값으로 author[i].id 를 주자.

21. reload 했을 시 Not Found라는 오류가 나는데, 띄울 페이지가 없기 때문이다. main.js에 update 경로를 추가하자.

22. reload 했을 시 페이지가 잘 보이면 ok, 이제 id에 맞는 값을 채워넣은 화면을 사용자에게 보여주자. author.js 파일에 exports.home 코드를 복붙한 후 update로 적절하게 변경한다. p 태그를 추가하고 input type으로 hidden을 주어 사용자에게 보여주지 않도록 하고 value로 queryData.id를 준다.

💭 이때 왜 queryData.id를 value값으로 줄까?

url의 author/update의 queryString의 값은 author 테이블의 id 컬럼 값에 따라 결정되므로 queryString의 값(queryData)에 따라 데이터베이스에서 데이터를 가져오는 코드를 작성해야 한다.

💭 그럼 왜 input의 type 값은 hidden일까?

• update를 하기위해서는 고유한 id 값 필요.
  ➡️ <input type=“hidden”>
  사용자에게는 보이지 않는 숨겨진 입력 필드를 정의
  로 구현됨.
  숨겨진 입력 필드는 렌더링이 끝난 웹 페이지에서는 전혀 보이지 않으며, 페이지 콘텐츠 내에서 그것을 볼 수 있게 만드는 방법도 없습니다.(즉, 보이지 않지만 값은 서버로 전송됨)
  따라서 숨겨진 입력 필드는 폼 제출 시 사용자가 변경해서는 안 되는 데이터를 함께 보낼 때 유용하게 사용됩니다.
  이러한 입력 필드는 업데이트 되어야 하는 데이터베이스의 레코드를 저장하거나, 고유한 보안 토큰 등을 서버로 보낼 때 주로 사용됩니다.
  출처

23. form의 name의 value는${author[0].name}으로 profile은 ${author[0].profile}값으로 받아 채우자. 그리고 update를 다 한 후 누르는 submit 버튼의 이름을 update로 바꾸자!

STEP 4. 작성자 관리 목록에서 작성자를 수정해보자(CRUD 중 Update!)

사용자가 author 정보를 수정하면 그 데이터를 받아 처리한 후 사용자에게 수정된 화면을 보여주는 걸 구현해보자. 이를 프레임워크에서는 흔히 라우팅 기능이라고 한다. 우린 조건문을 통해 구현하고 있지만 프레임워크에서는 라우팅으로 세련되게 구현해줄 수 있다!

24. main.js에 update_process 경로를 추가한 후 author.js의 form action에도 경로를 설정하자.

25. 그런 다음, 지금 할 update_process와 코드는 먼저 작성했던 create_process 코드와 하는 역할이 유사하다. 그러니 온고지신의 정신으로 create_process를 복붙해 온 후 update코드로 바꾸는게 훨씬 효율적이다.

26. update_process로 함수 이름을 바꾼 후 query 문도 바꿔주자. UPDATE author SET name = ?, profile = ? WHERE id = ?
,[post.name, post.profile, post.id] 로 바꾼 후 response.writeHead의 인자는 웹브라우저에게 페이지를 리다이렉션해달라고 말하는 302코드와 그럼 리다이렉션하는 경로는 /author로 설정하자.

writeHead는 http응답 메시지 헤더를 작성한다는 뜻이고, 302는 브라우저한테 페이지를 이동시켜라고 명령하는 것.
Location: '/'는 어디로 이동할지를 적어주는 것이고요.
종합하면 '/'로 이동해라라는 명령이 됩니다.
출처

27. 그런데, reload 했을 때 오류가 났고 오류 내용을 찬찬히 살펴보니 "sql문에 틀린 부분이 있는 것 같으니 한번 더 살펴볼래?" 라는 말이었고 게다가 컴파일러는 sql문의 '6' 주변이 틀린 부분인 것 같다고 틀린 부분까지 상냥하게 말해주고 있었다. (역시 코딩은 수학능력보다 언어능력을 더 중요시 여긴다고 했었나, 오류는 이젠 화나는 것보단 컴파일러와 대화하는 느낌이다.)

28. 그런데 우린 sql문에 숫자 '6'을 넣은 적이 없었다. 스크롤을 내려 아래를 보니 에러의 요약 정보가 있었고 컴파일러에 실행하려다 못한 데이터베이스에서 가져온 데이터의 (대입된)sql문을 볼 수 있었다! 에러를 통해 실제로 데이터베이스에서 값을 가져와 실행되는 쿼리문을 확인할 수 있었다! 대입된 쿼리문을 보니 백틱으로 문장이 끝나야 하는데 작은 따옴표가 하나 잘못 들어간 걸 발견할 수 있었다.

오류의 원인인 작은따옴표를 지우고 node를 reload 하니 수정한 내용이 잘 반영됨을 확인(update success!)

STEP 5. 작성자 관리 목록에서 작성자를 삭제해보자(CRUD 중 Delete!)

삭제는 링크로 처리하면 안된다. form으로 처리해야 한다. 삭제 페이지로 가는 건 ok지만 삭제 작업은 form의 post 방식으로 꼭 처리해야 한다.

Why POST?

<form> 태그의 method 속성
폼 데이터(form data)가 서버로 제출될 때 사용되는 HTTP 메소드를 명시합니다. method 속성은 속성값으로는 GET과 POST 두 가지 중 하나를 선택할 수 있습니다. GET 방식은 URL에 폼 데이터를 추가하여 서버로 전달하는 방식입니다.

• GET 방식의 HTTP 요청은 브라우저에 의해 캐시되어(cached) 저장됩니다. 또한, GET 방식은 보통 쿼리 문자열(query string)에 포함되어 전송되므로, 길이의 제한이 있습니다. 따라서 보안상 취약점이 존재하므로, 중요한 데이터는 POST 방식을 사용하여 요청하는 것이 좋습니다. POST 방식은 폼 데이터를 별도로 첨부하여 서버로 전달하는 방식입니다.
  
  
• POST 방식의 HTTP 요청은 브라우저에 의해 캐시되지 않으므로, 브라우저 히스토리에도 남지 않습니다. 또한, POST 방식의 HTTP 요청에 의한 데이터는 쿼리 문자열과는 별도로 전송됩니다. 따라서 데이터의 길이에 대한 제한도 없으며, GET 방식보다 보안성이 높습니다.

29. 작성자 관리 목록의 delete를 form 태그로 기능을 만들자.

<input> Attributes
<input> 요소가 강력한 이유는 바로 다양한 속성 때문입니다. 그 중에서도, 위의 표에서 확인할 수 있는 type 속성이 제일 중요합니다.

• name
  type: all
  Name of the form control. Submitted with the form as part of a name/value pair.
  (input 양식 컨트롤의 이름. 이름/값 짝(name/value pair)의 일부로서 양식과 함께 전송된다)
• value
  type: all
  input 양식 컨트롤의 현재 값. 이름/값 짝(name/value pair)의 일부로서 양식과 함께 전송된다

30. delete 버튼이 구현되었다. 이제 delete 버튼을 눌렀을 때 delete_process로 가게끔 main.js에 경로를 추가하자.

31. main.js에 delete_process 경로를 추가하자. 그런 다음 author.js로 돌아와서 delete_process 함수를 작성하자.

32. 위의 update_process 코드를 복붙해 delete_process로 변경 후 쿼리문도 수정하자. DELETE FROM author WHERE id=?로 작성 후 id값은 post.id로 주자. 그런 다음 node를 실행해보면?

33. 기존의 author id값이 1번이었던 행과 최근에 추가한 6번 행을 삭제하면 삭제한 결과를 사용자가 잘 볼 수 있다.

34. 이때 저자가 삭제되면 그 저자가 작성한 topic도 삭제되었음 한다. author.js에 author를 delete하는 쿼리문 블록 위에 topic을 delete하는 쿼리문을 작성하자.

구현 화면
author페이지에서 작성자 목록 중 duru를 삭제하니, duru가 작성자였던 글들도 삭제된 화면을 볼 수 있다.