Node.js-MySQL-4

사용자가 온라인을 통해 데이터를 삽입하는 방법을 알아보자

STEP 1. create 코드를 수정하자

create 버튼을 클릭해서 들어간 새 페이지에서 글목록들이 제대로 뜨지 않는 문제 발생.

1. 구현했던 글목록을 불러오는 코드를 복붙하자.

2. 그 후 글 본문이 출력되는 코드 대신 폼이 출력되는 코드로 변경하자. 이 역시 구현했던 코드를 이용.

3. create의 파일을 읽는 코드는 이제는 필요 없으니 삭제.

4. create를 눌렀을때 글목록이 잘 보이도록 구현한 모습이다. 이제 사용자가 글을 작성한 후 submit 했을때 처리되는 코드는 create_process 부분이다. 받는 쪽에서 어떻게 하면 될까?

5. 새로운 행을 추가하는 쿼리문 작성하는 코드 작성하자.

6. value 안의 값을 아무거나 주었지만 코드 상으로는 ?처리 한 후 뒤에 채울 데이터의 변수값을 넣자. 콜백함수의 첫번째 인자에는 에러의 여부를 판단하고 정상적으로 잘 되었을 때 응답하는 코드를 작성하자. 이때, id 값에 삽입한 행에 대한 id값을 가져와야 하는데, 새로 추가한 행에 대한 id값을 어떻게 가져올 수 있을까?
   npm 공식 문서의 inserted 라고 검색해 results.insertId으로 id값을 변경하자

7. 노드를 reload 하였을때 추가된 행에 대한 id 값으로 바로 리다이렉션 되는 모습을 확인했다면 성공!

STEP 2. update 코드를 수정하자

8. update 코드 부분에서 파일 읽기에 관련한 코드는 주석처리하고 필요 없는 변수는 지우자. 또한 상세보기 페이지에서 구현했던 페이지를 복붙해서 재활용!

9. html 변수 부분의 변수값을 topic의 첫번째 요소 title 값으로 변경한다. 또한 form 코드 부분에서 변수값을 topic[0].id, topic[0].description, topic[0].title로 변경한다. 수정하려는 행에 대한 식별자를 설정하는 것이다.

10. reload 후, update를 눌렀을 때 기존에 작성했던 제목과 본문 내용이 잘 나오고

11. 폼 완성 후 수정하려는 데이터의 id 값 1로 잘 나온 걸 확인했다면 잘 처리한 것이다.

STEP 3. update에서 submit 버튼을 눌렀을때 update_process로 데이터 전송되었을때, 데이터를 받는 방법?

12. update_process 코드에서 파일의 내용을 바꾸는 코드를 sql 으로 교체하자.

13. update sql을 검색해 syntax대로 코드를 작성하자 ?에 들어갈 말은 함수의 두번째 인자에 파라미터 변수를 추가한다. 그러면 자동으로 sql의 ' ? ' 에 매핑되어 sql이 실행된다. (단, 물음표 순서는 array 순서대로 해야한다. 그 다음 콜백함수의 id 역시 post.id로 수정하자.
    기존의 파일 읽기 코드는 삭제하자.

The SQL UPDATE Statement

UPDATE table_name
SET column1 = value1, column2 = value2, ...
WHERE condition;

Note: Be careful when updating records in a table! Notice the WHERE clause in the UPDATE statement. The WHERE clause specifies which record(s) that should be updated. If you omit the WHERE clause, all records in the table will be updated!

💡 UPDATE 문 사용할때 WHERE 을 빼먹지 말자. 테이블 전체가 수정되는 대참사가 일어날 수 있다.

STEP 4. delete을 구현해보자

14. 쿼리문으로 글을 삭제하는 코드를 작성하자. 성공했을 때는 홈으로 리다이렉션되게끔 변수명을 /로 설정한다. 기존 코드에서 필요없는 부분은 삭제한다.

STEP 5. 상세보기 구현(글 작성자가 누구야? feat. 관계형데이터베이스)

지금까지 데이터베이스에서 topic 테이블만을 이용해서 구현을 했다. 그러나 우리 스키마에는 테이블이 더 있는데, 그중 author 테이블을 이용해서 상세보기를 클릭했을때 글을 작성한 작성자를 출력해보고자 한다.
mysql은 관계형 데이터베이스이다. 이를 어플리케이션에 어떻게 적용시킬 수 있을까?
topic과 author의 관계를 탐구해보자.

15. topic과 author는 id가 동일하다. 따라서 SELECT * FROM topic LEFT JOIN author ON topic.author_id=author.id WHERE topic.id=?라는 쿼리문을 작성하게되면 둘의 관계성(id 동일)에 의해 하나의 테이블로 합칠 수 있다.
    또한 db.query 코드를 작성해 본문을 작성했으니, 저 부분을 수정해 본문에 글 작성자를 출력할 수 있을 것이다.

16. db.query 코드를 수정했다. SELECT * FROM topic LEFT JOIN author ON topic.author_id = author.id WHERE topic.id=?과 ?에 들어갈 배열인 [queryData.id], 세번째 인자에는 콜백함수를 추가했다. 콘솔창에 topic을 테스트 해봤다.
    코드를 잘 작성했다면 author.id과 id가 합쳐진 객체가 콘솔창에 보이면 성공이다.

17. 본문을 출력하는 코드에 작성자를 출력하고자 한다. 변수명만 추가하면 줄 바꿈이 안되기에 <p>태그를 추가해 글 바꿈이 되게끔 한다. node를 재실행하면 본문에 작성자가 추가된 것을 확인할 수 있다.

STEP 6. 글 생성 시 작성자 선택하기

18. 글 작성 시 작성자를 선택하기 위해서는, 작성자목록을 데이터베이스에서 가져와야 한다. 따라서 db.query를 이용해 작성자목록을 가져오는 sql문을 작성한 다음 두번째 인자로 그 결과를 받는 콜백함수를 작성한다.

19. author를 가져온 다음 코드가 실행되도록, 새로 만든 코드 블록 안으로 기존 코드를 복붙하고 작성자목록을 authors로 가져오기 때문에 console.log(authors)로 작성자목록이 잘 가져오는지 확인한다.

20. 콘솔창에 작성자목록이 잘 보인다. 글 작성하는 본문에 작성자를 선택하는 콤보박스를 이용해 화면으로 출력하고자 한다. 콤보박스를 만드는 태그를 만들자.
    콤보박스 만드는 html 태그
    <select><option>선택할 정보</option></select>

21. 빈 문자열을 담은 변수 tag를 선언 한 다음, authors.length 만큼 while문을 도는 콤보박스 안의 정보를 표현하는 코드를 작성했다. 화면에 콤보박스가 잘 보이면 성공이다.

22. template.js 문서로 콤보박스 코드를 뺄까 한다. template.js의 함수 authorSelect를 만들어 파라미터로 authors를 준다. 작성한 코드를 복붙한 다음, return 값에는 출력할 콤보박스 안 정보를 담는데, 백틱기호를 꼭 빼먹지 말고 쓰자. main.js에는 복붙한 코드는 지운 다음, p태그 안 ${template.authorSelect(authors)}로 작성하자. 그럼 이제 사용자가 submit을 하면 그 정보를 받아와야 한다. 이때 create_process를 봐보자.

23. create_process의 db.query의 쿼리문의 두번째 인자의 고정적인 1 대신, post.author로 변경하자.

24. 이때 post.author의 author는 우리가 작성자 변수에 설정했던 이름을 그대로 써야한다. 만약 변수 설정을 authorauthor로 했다면 post.authorauthor로 대입하자.