간단(하게 조져지는)한 'Node.js'를 활용한 'MySQL'에 데이터 전송하는법~~
안녕하세요 여러분들~
이번에는 'node.js'와 'Mysql'을 이용한 데이터 저장 방법에 대해서 알아보았어요 ^^
백지상태에서 시작하려니 막막하더라고요~
하지만! 알아보기로 하였으니 GEO DU JEOL MI 하고 시작해 보도록 하겠습니다.
스때쁘 원.
일단, html로 기본적인 코드를 작성해 주었어요~
파일의 이름은 'main.html'로 지정해주었고요!
<head>부분과 그 위의 코드들은 html의 기본적인 코드들이니 신경 안 쓰셔도 되지만, 여기서 주목해야 할 부분은 바로 <body> ~ </body> 부분입니다.
FORM 이란 무엇일까요?
사용자의 정보를 알기 위해 입력할 큰 틀을 만드는데 사용하고, 폼에 입력된 데이터를 한 번에 서버로 전송할 수 있도록 도와주는 친구지요~
그렇다면 안쪽에 자잘하게 들어있는 method, action 은 무엇일까요?
method: 폼을 서버에 전송할 http 메소드를 정해줘요
action: 폼을 전송할 서버 쪽 스크립트 파일을 지정해요~
저는 method 를 post 로 사용하였고요 action은 제 마음대로 /test 로 지정해 주었답니다.
main.html처럼 코드를 작성하게 된다면 아래와 같은 결과물이 나오게 됩니다!
형태는 갖춰졌지만 저 상태로는 할 수 있는게 아무것도 없답니다ㅠ
그래서 Node.js를 사용하는 것이고요!
그렇다면 js파일을 생성하기 전에 mysql에 데이터베이스와 테이블을 생성해보도록 합시다
미리 설치해둔 mysql을 실행 시켜주었고요
만들어 놓은 username과 password를 입력해주었습니다.
mysql이 정상적으로 실행이 되었다면
저는 test1으로 이름을 지정했지만 마음대로 설정하셔도 됩니다~
test1이란 데이터베이스를 만들어주고
test1을 사용한다는 명령어를 적어주면
밑에 데이터베이스가 변경되었다고 뜨게 되죠!
그 다음, db(임의로 지정) db라는 테이블을 생성해 주도록 합니다. 테이블 안에 들어갈 id라는 필드를 만들어주고 문자,정수 등 어떤 값으로 저장할 것인지 지정해주는 거죠.(varchar(20))처럼요. 여기서 깜빡한게 not null이란 구문을 써줘야하는데 테이블에 공백값을 입력하면 안되겠죠? 그치만 전 미리 해놓은 상태에서 다시 만들었기 때문에 간단하게 생략하도록 하겠습니다!(자세한건 구글에 쳐보세요.)
요런식으로 만들어 준다면
이렇게 야무진 table이 생성이됩니다~~^^*
이제 생성해 놓은 데이터베이스를 node.js를 중점으로 http 문서에서 입력받은 form과 연동 시켜줘야겠죠?
위 코드를 작성하기 전에 express,mysql을 미리 다운로드 받으셔야합니다~!(package.json 파일이 뜰 거에요)
1,2 줄로 mysql,express를 요청해주고요~
express를 사용해주기 위해 var app = express();라는 코드를 사용하였습니다.
구글에서 조금 찾아봤을 때는 굳이 app 말고도 conn,connection 같은 걸로도 사용하시더라고요.
express.json은 조금 뒤 사용할 html에 있는 body 부분(그 중에 name= User_ID로 지정되어 있는 부분에 입력된 값)의 정보를 불러 올 때 요청값을 제대로 받아오지 못하는 문제가 발생 할 수도 있는데 이를 해결하기 위해서 사용하였습니다!
urlencoded는 http 통신을 할 때 데이터 인코딩을 하는 방식 중 하나입니다~(body의 UTF-8 인코딩만 허용한다고 하네요)
어찌됐든, var connection = mysql.createConnection을 통하여 데이터베이스를 연동 시켜줍니다.
여기서 multiplestatements를 사용하는 이유는 main.html에서 가져올 정보 (ex. User_ID = {123})는 단일 query로는 데이터를 전송할 수가 없어요 때문에 멀티플어쩌고를 사용해서 다중쿼리를 한번에 처리할 수 있도록 만들어줍니다.
connection.connect()를 작성하여준다면 db와의 연동은 끝납니다!
1-3번 째 줄 까지는 아까 만들어 놓았던 main.html을 node.js를 통해 서버를 열고 웹을 나타내주는 역할을 합니다.
app.listen(3000, (err) => {
***
});
이 부분은 http://localhost:3000/으로 서버를 열어주는 포트값을 지정해주는 코드고요.
app.post 뒤에 있는 /test는 어딘가 많이 익숙해보이죠? 아까 main.html 에 있는 form의 액션값이랍니다.
var id = req.body <-- body값을 요청받는 변수값을 지정하고,
var sql = 'Insert into db values('${id.User_ID}');'; <-- 데이터를 입력받는 위치인 id(body).User_ID(name)를 중간에 넣어 mysql에 데이터를 저장하는 명령어를 작성해줍니다.
connection.query를 사용하여 웹 서버에 정보를 요청합니다.
res.redirect('/');는 웹 페이지에서 데이터를 입력하고 난 뒤 다시 같은 페이지를 띄우기 위해 입력해줍니다.
그 외 SQL Injection
INSERT INTO DB VALUES(‘’);
INSERT INTO DB VALUES(‘ '); drop table db; #');
'); drop table db; # <- 입력란에 넣은 언어
mysql에 들어가 db라는 테이블을 확인해보면 에러가 뜨면서 테이블이 존재하지 않다는 구문이 뜨게 됩니다.
