Node.js-MySQL-5

STEP 1. update 페이지에서도 작성자 목록을 보고싶다악!!

1. 기존에 작성했던 create의 author 코드의 일부분을 재활용해서 update에 이용하자!

2. update 코드에 복붙한 후 기존에 있던 update 코드를 쿼리문 안으로 이동시키자.

3. update 페이지도 create 페이지처럼 작성자를 콤보박스로 입력할 수 있도록 update form 코드 부분에 p 태그를 추가한 후 ${template.authorSelect(authors)}을 추가하자.
   이때, update 페이지는 create 페이지와 다르게 현재 선택되어 있는 값을 반영해야 한다.

4. 선택되어 있는 값을 나타내기 위해 데이터베이스 테이블 topic의 author_id 컬럼의 데이터 값을 전달해야 한다. 따라서 authorSelected의 두번째 인자에 현재의 설정을 전달하는 topic[0].author_id를 추가하자.

5. template.js 파일> function의 두번째 인자에 현재 글 작성자를 나타내는 변수author_id를 적자. 작성자 목록을 순회하는 while문 안에 if문을 추가해, 만약 authorSelect를 통해 전달한 현재 글 작성자의 id와 작성자 목록을 순차적으로 순회하는 작성자의 id가 같다면 변수 selected에 값 ' selected'를 넣어 option 태그의 select라는 문자열이 생기도록 한다.(by. 템플릿리터럴)

6. 노드를 reload 해보면 topic 테이블의 author_id의 값이 잘 선택되어있고 개발자도구를 들어가(💻 mac 단축키: cmd+opt+i) p태그의 option 태그를 보면 author_id 값에 맞춰 selected가 추가되어 있음을 알 수 있다.
   그럼 사용자가 새로운 작성자를 선택한 후(update) submit를 눌러 전송한 값을 처리해보자!

6-1. 사용자가 보낸 update 정보를 처리하는 부분은 update_process이다. 여기서 author_id=1을 author_id = ?로 변경한 후 ?에 값을 치환하는 배열의 3번째 요소에 post.author을 추가하자.

✨ 구현 화면 ✨

STEP 2. 정리정돈 - db접속(집 청소 ver.1)

MySQL 관계형데이터베이스의 핵심인 JOIN을 이용해서 구현을 해봤다. 여태까지 topic 테이블을 이용해 글을 CRUD 했으나 이젠 author 테이블을 이용해 작성자를 CRUD 해볼까 한다.

7. 우리는 main.js의 코드를 각자 역할에 따라 다른 파일로 정리정돈할 예정이다. 이때, main.js의 모듈을 불러오는 코드 부분을 보자. 변수 db는 데이터베이스 접속 코드이다. 데이터베이스 접속은 어느 파일에서든지 필요하므로 따로 분리할 필요가 있다. 폴더 lib>db.js를 생성한 후 코드를 복붙하자.
   참! mysql 변수 또한 db.js에 복붙하는거 잊지 말자.

8. main.js에 db 변수를 추가하자. 파일 경로는 lib 폴더>db.js 이므로 ./lib/db.js에서 파일을 require. 또한, 회색으로 처리된 부분들은 현재의 html에서 사용하지 않는 모듈이라는 뜻이다. 필요없기에 삭제하자.

8. 위에 첨부한 사진까지 입력 후 node를 reload했을 때 오류가 발생한다. 원인은 db.js를 외부에서도 사용할 수 있게 export를 해야하는데 안했기 때문이다. 만약 외부로 꺼내놓을 api가 하나라면 module.exports = db;처럼 작성하자. 여러 개의 api라면 exports 만 적어도 ok.
   노드를 reload 했을 시 오류가 발생하지 않으면 성공이다.

9. 하지만 db.js처럼 데이터베이스 정보를 파일에 저장하는 건 굉장히 나쁜 습관이다. 만약 소스코드 보관소 같은 데에 id,pw와 같은 기밀정보가 담긴 파일을 upload한다면 심각한 보안사고로 이어질 수 있기 때문이다.
   따라서 db.js의 복사본 파일을 하나 만들자. 동일한 lib 폴더 내에 db.template.js라는 파일을 만든 후 db.js의 코드를 복붙한 후 접속을 위한 id와 pw 정보는 지우자. 그런 다음 버전관리시스템 같은 데에는 db.template.js파일을 올리는 것이다.(db.js는 버전관리시스템으로 관리 x) 그런 다음, 실제로 개발 환경을 setting 할때는 db.template.js 파일을 복사한 후 db.js 파일에 id와 pw 정보를 담는 것이다.

STEP 2. 정리정돈 - topic(집 청소 ver.2)

10. 2번째 집 청소 시간이다. topic의 생성, 읽기, 수정, 삭제 기능을 별도의 파일로 저장해 main.js를 청소(단순화)하자. main.js의 홈페이지 관련 코드를 lib 폴더(동일한 폴더) 내 topic.js를 생성한 후 cut and paste.

11. 여러개의 api를 내보낼 예정이라, module.exports(단수)가 아닌 exports(복수)를 사용하자. main.js 파일에 모듈을 불러오는 topic 변수를 추가한 후 코드를 cut 한 자리(바깥쪽으로 빼놓은 자리)에 home을 출력하는 코드이기에 topic.home(); 이라고 작성하고 topic.js의 exports.home = function(){...}를 추가하자. 그럼 topic.home()을 실행하면 topic.js의 exports.home이 잘 실행이 되야 하기에 node를 reload시켜 확인해보자.

12. ReferenceError: db is not defined 라는 오류가 발생한다. 이는 topic.js에 db가 정해져 있지 않다고 컴파일러가 알려주는 것이다. main.js에 db 모듈 코드를 복붙하자(온고지신 온고지신)

13. node를 reload 해보면, 또 다른 오류가 난다. Error: Cannot find module './lib/db.js로 db 모듈을 찾을 수 없다는 뜻이다. 오류 원인은 topic.js 파일은 lib 폴더 내에 존재하는데 모듈을 require 해오는 db.js 파일 역시 lib 폴더 내에 존재한다. 즉, 같은 폴더 내에 있는 자매관계로 상대경로 중 lib 폴더를 삭제하면 된다.

14. 자 node를 reload 해보면 ReferenceError: template is not defined라는 위에서 본 오류가 난다. 오류의 내용은 컴파일러가 template을 못찾겠다!고 말하는 것으로 원인은 코드에는 template을 썼지만 정작 모듈을 불러오지 않았기 때문에 컴파일러가 찾지 못해 에러가 난다.
    (나: 왜 template 작성했는데 실행안되죠? / template 모듈: 아니, 부르지 않았는데 어떻게 가요?)
    template을 불러오는 코드를 작성하자.

15. 익숙하겠지만 node를 또 다시 reload 해보면, ReferenceError: response is not defined 라는 오류가 난다. 자, 이젠 익숙한 에러 내용이다. response가 정의되지 않았다!고 컴파일러가 우리에게 알려주는 것으로, 원인은 응답과 관련된 코드인 response가 없기 때문에 발생한다.
    따라서 main.js 파일의 home 함수에 요청(request)과 응답(response)을 추가하고 topic.js 파일의 function 함수에도 request과 response를 추가하자.
    (관련한 node 공식 문서를 아래 인용한다)

Create the Server
Any node web server application will at some point have to create a web server object. This is done by using createServer.

const http = require('http');
const server = http.createServer((request, response) => {
  // magic happens here!
});
The function that's passed in to createServer is called once for every HTTP request that's made against that server, so it's called the request handler. In fact, the Server object returned by createServer is an EventEmitter, and what we have here is just shorthand for creating a server object and then adding the listener later.
const server = http.createServer();
server.on('request', (request, response) => {
  // the same kind of magic happens here!
});

When an HTTP request hits the server, node calls the request handler function with a few handy objects for dealing with the transaction, request and response. We'll get to those shortly.
In order to actually serve requests, the listen method needs to be called on the server object. In most cases, all you'll need to pass to listen is the port number you want the server to listen on. There are some other options too, so consult the API reference.

구현 화면✨

STEP 3. 정리정돈 - topic2(집 청소 ver.3)

상세보기 페이지를 눌렀을 때 나오는 코드를 정리정돈 해보자.

16. 위에 해왔던 것처럼 main.js의 상세보기 페이지 구현 코드를 cut 한 후 topic.js에 정리하자. 변수명은 page로 하고 topic.js에는 exports.page = function(request, response){...}로 main.js에는 topic.page(request, response)라고 적자.

17. 노드를 reload 해보면, 오류가 발생하는데 `ReferenceError: queryData is not defined라는 오류로 위에서 자주 본 익숙한 친구이다. queryData가 없다는 뜻으로 main.js의 queryData 모듈 변수와 그 모듈을 불러오는데 필요한 모듈인 위의 _url 모듈을 topic.js에 복붙하자.

18. 노드를 reload 하면, ReferenceError : url is not defined가 뜬다. 반갑다 친구야^^
    (오류도 익숙해지면 그냥 안부인사같다..)
    url이 없다고 친절하게 알려주니, url 모듈을 추가하자. 노드를 reload 했을 때 오류가 안나면 성공.

19. 이제 create 페이지를 정리정돈하자. create 페이지 구현 코드를 cut 한 후, topic.js에 exports.create = function(request, response){...} 을 추가한 후 중괄호 안에 paste하자. 그런 다음 main.js에 topic.create(request, response)라고 topic 파일에 있는 create 함수를 불러오는 걸 잊지말고.

20. 그 다음 정보를 저장하는 페이지인 create_process를 정리정돈하자. 역시나 긴 코드들을 cut 한후 topic.js에 paste하자. exports.create_process = function(request, response){...} 적은 후 중괄호 안에 코드를 붙여넣자. 그런 다음 main.js에 잘라놓은 코드 빈공간에 topic.create_process(request, response) 라고 적자.

21. create을 누르고 제목과 본문을 적고 submit을 눌러 url의 1이 추가된 id번호, 제목, 본문, 작성자(글 작성할때 선택)가 잘 보이면 구현 성공~

STEP 4. 정리정돈 - topic3(집 청소 ver.4)

대청소의 끝이 보인다

22. update 코드를 topic.js로 정리정돈시키자. exports.update = function(request, response){...} 라고 topic.js에 적고 이동시킨 코드의 빈 공간이 있는 main.js에는 topic.update(request, response)라고 적자.

이동시킨 모습이다.

23. 마찬가지로 update_process코드 또한 topic.js로 cut 한 다음, exports.update_process=fuction(request, response)라 적자. main.js에는 topic.update_process(request, response)라고 적자.

24. node를 reload 한 후, update를 눌러 제목과 본문, 작성자를 입력한 후 submit를 누르면 update가 잘 되는 모습을 확인 할 수 있다.

25. 그 다음으로 delete_process의 코드를 정리하자. cut한 후 topic.js에 exports.delete_process = function(request, response){...}라고 적고 중괄호 안에 paste하자. cut한 빈자리가 생긴 main.js에는 topic.delete_process(request, response)라고 적자.

구현화면 ✨