Node.js-MySQL-2

MySQL로 홈페이지 구현

앞서 설치한 mysql 모듈을 웹에 적용해 파일로 구현했던 홈페이지에 보여주는 정보를 데이터베이스로 구현해보자.

Step1. Let's connect!

1. mysql2 이라는 모듈을 가져온다. 모듈의 이름은 mysql이라고 하자.
2. 모듈을 가져왔으니, 실제 데이터베이스와 연결을 해야한다!
   mysql 모듈의 createConnection 메소드 호출을 통해 mysql 계정 정보를 입력한다.
3. 데이터베이스와의 연결한 정보를 변수 db 라고 하자.
4. 변수에 connect이라는 메소드를 호출해 mysql과 접속을 하자.

Step2. 홈페이지의 정보는 데이터베이스로 가져오자!

1. localhost:3000 으로 들어가면 맨 처음 보이는 화면 = 최상위 경로 = querystring의 id 값이 없음
2. query 문을 이용해 파일 대신 데이터베이스를 홈페이지의 정보로 가져오자!
3. query 문의 첫번째 인자로 사용할 테이블을 선택하는 쿼리문 작성
4. 두번째 인자로 첫번째 인자로 서버가 응답하면 그 응답한 결과를 웹페이지가 처리할 수 있도록 콜백 함수
5. 콜백 함수의 시그니처(형식)으로 첫번째 파라미터로는 error 정보를, 두번째 파라미터로는 결과가 성공적일 때 쿼리문의 결과 = topics가 담길 수 있게 한다.
6. Success! 라는 문구가 보이면 성공
   
   
   

Step3. 웹페이지를 구성해보자

1. 주석 처리한 기존 코드를 활용해 데이터베이스로 웹페이지를 구성한다.
2.  template.list 는 lib/template.js의 list property 의 함수이다. 파라미터명을 filelist 에서 topic 으로 변경하자.

3. template.HTML은 웹페이지의 기초적인 틀을 담당한다.
4. 파라미터를 체크한다.

5. 웹페이지를 reload 했을때 이렇게 나온다.
6. 하지만 우리가 원하는 모습과 비슷하지만 다른데, title 대신 object Object라는 날것의 객체가 보인다.

7. template.list의 property가 잘못되었기 때문인데, 우리는 topics라는 객체의 title이라는 property가 필요하기에 코드를 topic[i].title 로 수정한다.

8. reload 시, title의 내용이 아주 잘 보인다 ^_^
9. CRUD을 적용하기 위해 각각의 title로 들어가본다.

10. Oops! 원치않은 웹사이트의 모습이다. 이때 url을 관찰했을때, querystring 의 값이 object로 나온다.
11. 왜일까? 코드에서 title의 property를 수정했는데 말이다. 마우스 우클릭 페이지 소스보기로 들어가서 원인을 탐색해보자

12. a 태그의 querystring 값이 객체로 되어있기 때문에 그렇게 보인듯 하다.

13. template.js 의 list 함수의 a태그의 쿼리스트링 값에 유일무이한 식별자인 테이블의 id 값을 추가한다.

14. 웹 페이지를 reload 했을때, 쿼리 스트링의 값이 id 값으로 잘 나온다면 성공!