[웹 풀사이클 데브코스 TIL] 6주차 Day 3 - MySql workbench를 사용해 보자

MySQL Workbench를 실행하고 새 데이터베이스를 생성하면,  오류가 납니다 ... (안 나는 날이 없음)

현재 맥북 버전은 Sonoma 14.1.1 이고, workbench 버전을 다운그레이드 해서 받아도 계속 오류가 나기 때문에 ... 

m1은 ARM 버전으로 다운받으라고 하던데, 저는 x86으로 받고 오류 뜨고, 재접속 하니까 되더라구요  ,,🥲

 

전체적인 화면 구성은 이렇게 되어있습니다!

확실히 CLI보다 간편하게 테이블을 작성할 수 있네요 ,,😮

 

users테이블을 작성할 때 Auto Increm 속성을 체크했더니

id 2는 작성해 주지 않았는데도, 알아서 아이디 값이 들어간 걸 확인할 수 있습니다 ㅎㅎ

 

그렇다면 아이디 3을 건너뛰고 4를 삽입한다면 ?

4가 들어가게 되고, 그 다음 행을 id 없이 삽입한다면 

3이 아닌 5로 아이디가 지정됩니다!

지난 강의때 작성한 TIL을 보면 그 이유를 알 수 있습니다

→ AI 속성을 체크했다면 웬만하면 id를 입력하지 말고 데이터베이스에게 맡깁시다 !

 

그리고 또 다음 데이터를 삽입하면

id가 6으로 등록됩니다 (´._.`)

 

 

DB 연결

https://www.npmjs.com/package/mysql2 

mysql2

이걸 사용해 줄거에요

 

npm install --save mysql2

 

링크 내 First Query에 있는

// get the client
const mysql = require('mysql2');

// create the connection to database
const connection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  database: 'test'
});

// simple query
connection.query(
  'SELECT * FROM `table` WHERE `name` = "Page" AND `age` > 45',
  function(err, results, fields) {
    console.log(results); // results contains rows returned by server
    console.log(fields); // fields contains extra meta data about results, if available
  }
);

``사이에 table명을 넣고 서버를 실행시키면 

이렇게 json array 형태로 데이터를 출력해줍니다!

 

// simple query
connection.query(
  'SELECT * FROM `users`',
  function(err, results, fields) {
    console.log(results[0].id);
    console.log(results[0].email); 
    console.log(results[0].name);  
  }
);

요 코드를 비구조화 해서 꺼내볼게요

 

// simple query
connection.query(
  'SELECT * FROM `users`',
  function(err, results, fields) {
    if (err) {
        console.log(err);
        return;
    }

    // 비구조화 형식으로 데이터 꺼내오기
    if (results.length > 0) {
        const {id, email, name} = results[0];
        console.log(id);
        console.log(email);
        console.log(name);
    } else {
        console.log('찾으시는 데이터가 없습니다 ')
    }
  }
);

저는 이런식으로 먼저 작성을 해 봤습니다 🙂

같은 결과가 나오네요 ~

 

 

TIMESTAMP 찍어보기 !

users테이블에 created_at을 만들어서 데이터가 추가 된 시간을 찍어주는 TIMESTAMP를 찍어보도록 하겠습니다!

 

id 가 7인 데이터를 1분 늦게 추가했는데, 다르게 타임스탬프가 찍힌 것을 확인할 수 있어요 !

현재 시간은 10시쯤이었는데, 시간이 좀 이상하게 출력됩니다 😭

 

 

TIMEZONE 설정해보기 

vscode에서 created_at을 찍어보면, 여기도 시간이 이상하게 출력되는데요 

이런식으로 ,,,

 

SET time_zone = 'Asia/Seoul';
SELECT @@global.time_zone, @@session.time_zone;

users 테이블이 있는 곳에 이 두 명령어를 작성하고 다시 확인했더니 

데이터 작성 시간이 정상적으로 출력됩니다 !

( db에서 시간을 제대로 보려면 timezone 설정을 해야합니다 )

 

++ slack에서 데브코스 수강하시는 다른 분이 올려주신 해결 방법으론, vscode상에서 시간이 잘못 출력되는 문제는
created_at은 Date 객체인데, console.log(created_at)으로 직접 출력하게 될 경우, UTC + 0 시간이 출력되기 때문에
UTC + 9인 한국의 시간과 맞지 않았던 것이라고 합니다!

 

따라서 현지 시간을 표시하고 싶다면 Date 객체에서 제공하는 getHours(), toLocaleString() 메서드를 사용하면 됩니다.

 

    // 비구조화 형식으로 데이터 꺼내오기
    if (results.length > 0) {
        const {id, email, name, created_at} = results[0];
        console.log(id);
        console.log(email);
        console.log(name);
        console.log(created_at.toLocaleString());
    } else {
        console.log('찾으시는 데이터가 없습니다 ')
    }
  }
);

id가 1인 데이터를 삽입한 시간이 제대로 출력됩니다!!
좋은 정보 감사합니다 🍀

 

 

 

이제 vscode와 db를 연결하고.. CLI, GUI 모두 사용해서 데이터를 작성 해봤는데요..!
하나하나 배워가는게 즐겁지만, 이러다가 어느순간 갑자기 난이도가 확 올라갈지 ㅎㅎ 너무 걱정이 됩니다
열심히 복습하고 짚고 넘어가야겠어요 ~~!!