[포스코x코딩온] 웹개발 풀스택 코스 8주차 회고 feat. MySQL

시간이 정말 빨리 지나간다. 벌써 8주라니...

이번주는 데이터베이스에 관련 내용이 주된 내용이었다.

지난 주에 프론트에서 백엔드로 데이터를 서로 주고 받는 걸 했다면,

이번에는 프론트에서 고객이 입력한 값을 백엔드로 데이터를 넘기고 최종적으로 데이터베이스에 저장하여

데이터들을 영원히 보관하도록 하는 작업을 하였다.

이렇게 하여 서버 새로고침을 하여도 데이터가 날아가지 않게 만들 수 있었다.

 

1. 데이터베이스의 정리

데이터베이스는 크게 2가지로 나눈다고 한다.

 

관계형(RDBMS) vs 비-관계형(Non-RDBMS)

 

*DBMS = Data Base Management System의 약자

*R = Relational

 

MySQL은 대표적인 관계형 데이터베이스라고 하는데, 이 관계형이란,

위 사진과 같이 테이블 형식으로 구조화가 되어있는 것을 말한다.

장점은 구조과 명확하게 되어 있고, 데이터 입출력 속도가 매우 빠르다.

그러나 구조화가 명확하게 되어 있는 만큼 DB의 구조 변경이 어렵다는 것도 단점으로 작용한다.

이런 점 때문에 빅데이터 등에서는 사용이 어렵다고 한다.

 

비-관계형 데이터베이스는 관계형이 아닌 모든 것을 의미한다.

위 테이블 형태가 아닌

이와 같이 문서형이나, 그래프형 등 다양한 형태가 있다.

이런 비-관계형은 대용량데이터 처리에 효율적이며, DB의 구조 변경이 쉽고, 확장성이 뛰어나다는 것이 장점이다.

그리고 그래프형의 모양 처럼 복잡한 데이터 구조의 표현도 가능하다.

다만, 속도 저하가 있을 수 있다는 단점은 있다.

 

이렇게 데이터베이스에 대한 간략한 정리를 했다.

데이터베이스 영역의 존재하는 개념들을 전반적으로 훑어보아서 우리가 사용하는 시스템이 정확히 무엇인지 인지하게 되었다.

 

그리고 수업 시간에는 관계형(SQL)과 비관계형인 MongoDB 이렇게 사용을 해서 둘의 차이점을 배운다고 한다.

이런 수업 구성도 매우 좋다고 생각한다. 일단 8주차에는 MySQL을 배우게 되었다.

 

2. MySQL설치 및 사용

npm에는 JS에서 MySQL을 사용할 수 있게하는 패키지가 있다. 'npm i -S mysql' 이렇게 터미널에 입력하여 설치를 하면 된다.

그 다음에 터미널에서 'mysql.server start'를 사용하여 데이터베이스 서버를 켜주면 된다.

 

MySQL 서버가 실행됨

MySQL의 GUI인 'MySQL Workbench'도 있어서 같이 설치하는 시간을 가졌다.

MySQL workbench의 모습

아무래도 GUI환경이 터미널로 컨트롤하는 것보다 직관적이라 편하긴하다.

 

이렇게 설치를 마무리하고 JS를 통해서 데이터베이스 서버에 연결해주는 파트를 만들었다.

여기서는 조금 정리가 필요한데, module.exports를 사용해서 1. 서버를 연결하는 JS파일을 만들었고, 2. 이 데이터베이스 서버에 query를 날려서 데이터베이스에서 필요한 자료들을 가져올 수 있게 하는 컨트롤러파트의 JS도 필요하다. 서버를 연결하는 JS는 1개만 존재하지만, 컨트롤러JS는 상황에 따라 여러 개를 만들어서 사용 할 수 있다.

대략 위 사진과 모습이다. 빨간색으로 표시한 부분에 'dbConnect'라는 것이 내가 만든 MySQL과 연결해주는 파트이고, 나머지는 용도에 따라 데이터들을 어떻게 가져올지 설정한 컨트롤러이다.

 

수업을 들으면서 내가 정리한 데이터의 흐름은

 

1. 데이터베이스 커넥트를 하고 -> 2. 컨트롤러에서 MySQL에 전달할 명령어를 내가 원하는 자료를 가져올 수 있게 만들어준다. -> 3. 라우터에서 컨트롤러로 알맞는 값을 전달해주고, 콜백 함수를 활용해 데이터를 다시 잘 가져와서 ejs쪽(프론트 쪽)으로 자료를 잘 가공하여 넘겨준다.

 

이렇게 된다.

여기서 콜백함수가 굉장히 중요해지는데, 이건 아래 수업시간에 짠 코드를 보면서 설명해야한다.

'INSERT~'라고 되어 있는 부분이 MySQL쪽으로 명령어를 주는 것이다. mydb.user라는 테이블에서 (USERID 와 PASSWORD)라는 값에 새로운 값을 넣어주는 것이다. 여기서 새로운 값은 ('${newUser.id}, ~ ) 이 부분이다. 그런데 새로운 값이라는 것은 사용자가 프론트에서 Input태그에 입력한 값(value)일 것이다. 이것을 가져와야한다. 여기서 라우터가 활약을 한다.

register.js라는 라우터를 만들었고, 오른쪽에 post방식으로 코드를 짰다. req.body는 ejs에서 form태그를 통해 들어온 값들을 의미한다. 즉, 사용자가 input에 입력한 값들인 것이다. 이것을 userDB.userRegister라는 위 컨트롤러를 가져와서 newUser라는 매개변수 자리에 req.body를 넣어주는 것이다. 그렇게 되면, 이 req.body는  ('${newUser.id}, ~ ) 이 부분에 들어가게 된다. 즉, newUser.id 는 req.body.id와 같은 것이 된다. 이렇게 값이 query에 담겨서 MySQL에 명령을 하게 된다. 즉, 사용자가 입력한 값이 query에 담기고 그것을 컨트롤러가 쏴준다. 그렇게해서 성공한 값은 data라는 콜백함수에 담긴다. 컨트롤러의 data는 register.js라우터의 (result)와 같은 것이다. 

 

말로 설명하니 좀 복잡해지는데, 순서를 한번 다시 정리해보자.

 

1. 사용자가 ejs영역(프론트영역)에서 form에 input에 자기가 넣고 싶은 값을 입력한다.

2. 그 다음 form에 담긴 정보들(id, password 등)은 req.body라는 json형태로 가공되어 register.js라우터로 넘어온다.

3. 라우터에서 userController.js라는 컨트롤러의 미들웨어를 임폴트해서 그 매서드에 매개변수로 req.body를 넣어준다. 즉, 사용자가 입력한 값을 userController.js 내의 미들웨어인 userRegister로 보내서 사용자가 입력한 값이 담근 MySQL형태의 query에 넣어준다.

4. userController.js 내의 미들웨어는 MySQL데이터베이스에 query명령어를 입력해주어 데이터를 저장해 준다.

5. userController.js 내의 미들웨어의 cb(콜백함수)에는 query작업을 마친 data가 저장된다.

6. 그럼 register.js라우터에 (result)부분에 userController.js의 cb(data)가 들어온다.

7. register.js라우터에서 data(=result) 부분을 작업해 주고 마무리한다.

 

이런 순서로 간다고 내 나름 정리를 했다.

 

이렇게 프론트에서 백으로 그리고 최종적으로 데이터베이스에 저장하는 것까지 해보았다.

여기서 여러 개념들의 갈래가 나와서 강사님이 하나 하나 차근 차근 순서를 정리해 주시면서 설명해 주셨다.

그래서 구조를 파악하는데 큰 도움이 되었고, 이렇게 블로그에 내 나름의 정리를 할 수 있었던 것 같다.

 

 

8주차도 매우 알찼다.

특히나 이 데이터를 주고 받는 구조를 이해하는데 큰 도움이 되었던 수업들이었다.

개념 위주로 많이 설명해주시니, 내 나름의 방법으로 데이터들을 주고 받고 삭제하는 것 까지 응용해 볼 수 있었다.

그냥 따라치는 코딩은 타자 연습에 불과한 것 같다.

개념과 구조, 데이터 흐름을 파악해야 응용도 가능한 것 같다.

더 넓은 숲을 보게하는 수업 방식이 너무 좋았고, 내 나름의 작업들을 계속 해나가야 할 것 같다.

다음 주는 어떤 배움을 얻게 될지 무척이나 기대가 된다.

 

이번 주도 알차게 끝!