[열한번째] Node.js & MySQL 연동하여 간단한 웹 애플리케이션 사이트 만들기(스압)

10개의 포스팅으로 정말 Node의 기초와 프레임워크 express 기초에 대해 알아봤다.

이 기초를 이용하여 관계형 데이터베이스(RDB) 중 가장 보편적으로 사용되고 있는

MySQL을 연동시켜서 간단한 애플리케이션을 만들어보자.

데이터 베이스 관련 포스팅은 추후 올라갈 예정이다.

(본 포스팅은 생활코딩 수업의 내용을 바탕으로 하고 있습니다.)

기본적인 원리는 express로 라우팅을 해주면서 필요한 요소요소에 데이터베이스를 연동하여

필요한 정보를 불러오고 사용자로부터 받은 정보를 저장하는 것이다.

express 함수를 호출한다.

express 함수를 다루기 편하게 app이란 객체로 객체화

express 내장 모듈인 fs 모듈도 호출.

mysql module 도 호출.

mysql.createConnection()을 통해서 mysql과 연동을 한다.

그리고 conn이라는 객체로 객체화 시킨다.

접속할 서버, 유저 명, 패스워드, 데이터베이스 명을 적는다.

자기 컴퓨터의 서버로 접속하는 경우 localhost로 접속하면 되고

기본적 유저명은 root이다.

password는 wamp bitnami(window운영체제의 경우)설치 시에 설정해두었던 패스워드를 입력한다.

database는 자신이 console창에서 생성한 데이터베이스 명을 입력한다.

(! express 라던지 mysql 이라던지 npm은 미리 설치해둬야한다. 설치방법은 구글에 나와있다.)

3000번 포트로 리스닝 시켜둔다.

이 코드는 맨 마지막에 위치할 것이다.

포스팅이 코딩을 완료하고 난 뒤의 상태라

코딩했던 순서와 보이는 것과 다르다.

완성된 코드에 대해 설명하는 식으로 포스팅하겠다.

post로 전달될 데이터를 파싱하기 위해 body-parser 라는 모듈을 설치하고 불러온다.

use 메서드를 사용하여 bodyparser모듈을 가져온다.

app.locals.pretty 는 이따 사용할 jade 템플릿 엔진의 코드를 정렬시켜주는 코드이다.

jade 파일이 로드될 폴더를 지정해줬고

template engine으로 jade를 사용할 것이라는 의미이다.

우선 topic/add 라우팅을 해야 한다.

새로운 글을 추가하는 페이지이다.

SQL구문이 먼저 보인다.

node.js와 mysql을 연동하기 위해서 SQL 구문을 sql 객체로 객체화 시켜 핸들링한다.

그리고 conn.query로 불러온다.

res.render('add',{topics:topics});

add페이지에 add.jade파일이 로드된다.

add.jade파일은 다음과 같다.

doctype html

html

head

meta(charset='utf-8')

body

h1

a(href='/topic') 첫 블로그, 성공적

hr

ul

each topic in topics

li

a(href='/topic/'+topic.id)= topic.title

article

form(action='/topic/add' method='post')

p

input(type='text' name='title' placeholder='title')

p

textarea(name='description' placeholder='description')

p

input(type='text' name='author' placeholder='author')

p

input(type='submit')

each topic in topics

-> iteration구문(반복문)이다. topics에 있는 topic들을 하나씩 꺼내어 li 태그에 대입한다.

topic 테이블의 title을 추출한다.

placeholder는 입력될 text상자나 textarea에 ' '안에 있는 글씨를 희미하게 띄워

어떤 내용을 입력하면 되는지 알려주는 기능을 한다.

add페이지에서 post방식으로 사용자가 정보를 입력해왔다.

각각 사용자로부터 온 request 중에서 body메서드를 이용하여 title, description, author 에 대한 정보를

각각 title, description, author 로 객체화 시켜서 쿼리로 다룬다.

개발자의 입장에서는 정보가 잘 입력되었는지 그 과정을 알아야하지만 사용자는 알 필요없다. 

바로 자신이 방금 작성한 글이 보이면 되는 것이다.

그래서 respond 로 redirect 메서드를 사용한다.

그러면서 사용자가 작성한 글에 Id 값을 태깅하여 url에 적용한다.

SQL구문이 또 나왔는데 이번에는 INSERT 구문이다.

각각 입력되는 내용들을 ?로 받고 있다.

아까부터 계속 보이는

if(err){

console.log(err);

res.status(500).send("Internal Server Error');

이 코드는 에러 상황을 대비하여 작성한 것이니 크게 신경쓰지 않아도 된다.

다시 get방식으로 라우팅하고 있다.

이번에는 작성한 글을 수정하는 페이지 /topic/:id/edit 을 라우팅한다.

edit.jade 소스 코드이다. add.jade와 거의 똑같다. action부분이 조금 다르다.

doctype html

html

head

meta(charset='utf-8')

body

h1

a(href='/topic') 첫 블로그, 성공적

hr

ul

each topic in topics

li

a(href='/topic/'+topic.id)= topic.title

article

form(action='/topic/'+topic.id+'/edit' method='post')

p

input(type='text' name='title' value=topic.title placeholder='title')

p

textarea(name='description'  placeholder='description')

=topic.description

p

input(type='text' name='author' value=topic.author placeholder='author')

p

input(type='submit')

ul

li

a(href='/topic/add') add

/topic/:id/edit 페이지에서 수정된 사항을 post방식으로 보내고 있다.

수정하는 방식이므로 SQL 구문에서는 UPDATE 구문이 사용되었다.

SQL 구문에서 WHERE은 인생을 결정하는 구문이다. 항상 유의하도록 하자.

수정을 하고는 자신이 수정했던 페이지로 redirect해주고 있다. '/topic/'+id

마지막으로 자신이 작성한 글을 삭제하는 기능을 추가하는 코드이다.

일단 삭제를 한다고 버튼을 클릭했을 때 한 번 더 물어보는 페이지를 만들어주는 것이다.

삭제할 쿼리를 선택하는데 select 구문을 사용하였다. 여기서도 where 구문은 필수이다.

if(topic.length === 0) 은 삭제할 쿼리가 있는지 없는지 파악하는 용도로 사용된다.

삭제할 쿼리가 존재한다면 delete.jade 파일을 렌더링해서 보여준다.

delete.jade 소스코드이다.

doctype html

html

head

meta(charset='utf-8')

body

h1

a(href='/topic') 첫 블로그, 성공적

hr

ul

each topic in topics

li

a(href='/topic/'+topic.id)= topic.title

article

h1= 'Delete? '+topic.title

form(action='/topic/'+topic.id+'/delete' method='post')

p

input(type='submit' value='YES')

a(href='/topic/'+topic.id) NO

삭제한 내용을 post 방식으로 보낸다.

여기서 redirect 해줄 때는 이미 삭제된 id 값이므로 뒤에 +id를 해주지 않는다.

가장 먼저 입력했던 main 페이지 소스코드인데 입력하고 계속 위에서 추가를 해오다 보니가

가장 마지막으로 밀려났다.

mian페이지의 템플릿 파일은 view.jade로 저장하는 것이 관습적이라고 한다.

view.jade 파일의 소스코드이다.

doctype html

html

head

meta(charset='utf-8')

body

h1

a(href='/topic') 첫 블로그, 성공적

hr

ul

each topic in topics

li

a(href='/topic/'+topic.id)= topic.title

article

if topic

h2= topic.title

= topic.description

div= 'by '+topic.author

else

h2 Welcome

|this is serverside javascripit tutorials

ul

li

a(href='/topic/add') add

if topic

li

a(href='/topic/'+topic.id+'/edit') edit

li

a(href='/topic/'+topic.id+'/delete') delete

복습해보면서 보니까 단락 단락들이 비슷한 구문의 반복이루어져 있다.

다음 포스팅은 채팅프로그램 만들기다.

생활코딩 감사합니다^^

-..-