[Study] BE/Node.js

[포스코x코딩온] MVC_MySQL

stop-zero 2023. 4. 9. 02:29
더보기

📂  프로젝트 생성만 N번째, 이제는 눈감고도 칠 것 같지 않다.

이제 조금 늘었다는 생각이 드는 건 npm install 에서 install 다 안치고 i 만 쳐버린다. 이 자신 정말 장하다 장해! 

저번 시간에 배운 mvc 방식에 mysql 을 연결하여 사용하는 방법을 알아봤다. 아직 mvc도 잘 모르겠는데 내가 어떻게 mysql 연결까지 하지 라는 생각을 했지만 또 질질 끌려가고 있다. 

 

📂 프로젝트 폴더 구조
  • controller
    • Cvisitor.js 
      • View 와  Model 연결 부분
  • model
    • Visitor.js
      • 데이터 처리
  • node_modules
  • routes
    • index.js
      • 경로 설정
  • views
    • 404.ejs
    • index.ejs
    • visitor.ejs
      • UI 관련 처리
  • .gitignore
  • app.js
  • package-lock.json
  • package.json
  • controller
    • Cvisitor.js 
      • View 와  Model 연결 부분
  • model
    • Visitor.js
      • 데이터 처리
  • node_modules
  • routes
    • index.js
      • 경로 설정
  • views
    • 404.ejs
    • index.ejs
    • visitor.ejs
      • UI 관련 처리
  • .gitignore
  • app.js
  • package-lock.json
  • package.json

 

🗂️ DB 구조

# 매일 까먹어서 매일 쓰려고 함
# 이동
cd / mysql/bin 경로로 이동
# 접속
./mysql -u root -p
# 종료
quit 


 

DB와 연결하여 구현할 기능 (+router)

  • GET /  => 메인페이지 (index.ejs)
  • Create  
    • name, comment 작성 후 [등록] 누르면 DB에 저장 
    • POST /visitor/writer  
  • Read
    • 위에서 입력한 내용이 table에 출력
    • GET /visitor  => 방명록 전체
    • GET /visitor/get => 방명록 하나 조회
  • Update
    • [수정] 누르면 방명록 수정
    • PATCH  /visitor/edit
  • Delete
    • [삭제] 누르면 정보 삭제
    • DELETE /visitor/delete

 

 

프로젝트에 MySQL 연결하기

mysql 패키지 설치 후 package.json에서 mysql 정보를 확인할 수 있다.

npm install mysql

 

mysql 사용

  • model/Visitor.js
  • host 주소를 host: 'localhost", 로 지정했을 때는 연결되지 않았다. 왜인지..port 번호의 작성 유무에 차이였나. 이유를 찾지 못했다.
const mysql = require('mysql');

const conn = mysql.createConnection({
  host: '127.0.0.1', //데이터베이스가 설치된 ip주소
  user: 'user', //데이터베이스 접속 계정명
  password: '', //데이터베이스 접속 비번
  database: 'visitor', //사용할 데이터베이스 이름
  port: '3306',
});

 

Node.js mysql 연결

외부에서 최상위 root 계정으로의 비밀번호를 허용하지 않기에, 새로운 user 계정을 만들고 접근해야 가능하다!

user 계정 생성하기

-- user 계정 생성하기
CREATE USER 'user'@'%' IDENTIFIED WITH mysql_native_password BY '1234'; 

-- user 계정에 모든 권한 부여
GRANT ALL PRIVILEGES ON *.* TO 'user'@'%' WITH GRANT OPTION;

-- 현재 사용중인 mysql 캐시 지우고 새로운 설정 적용
FLUSH PRIVILEGES;

-- 생성된 계정 확인
SELECT host, user from mysql.user;

-- 참고) 계정 비번 변경 
ALTER USER 'user'@'%' IDENTIFIED WITH mysql_native_password BY '1234';

SELECT * FROM mysql.user;

 

 

추가 메소드

.insertAdjacentHTML('', );

요소에 html를 추가할 수 있는 기능이다. 

'beforebegin' : 요소 앞에 생성

'agterbegin' : 요소 뒤에 생성

'beforeend' : 요소 태그 앞에 생성

'afterend' : 요소 태그 뒤에 생성