[포스코x코딩온] 웹 풀스택 과정 7기 5주차 금요일 회고

2023 May 26

포스코 코딩온 웹 풀스택 과정 7기 5주차 금요일 회고

• [포스코x코딩온] 웹 풀스택 과정 7기 5주차 금요일 회고
  • MVC 모델
  • DB - express 연결
    • DB 새로운 사용자 만들기
    • mysql 모듈 설치
    • DB 연결
    • DB 쿼리 요청
  • Element.insertAdjacentHTML()

MVC 모델

MVC 모델은 Model, View, Controller의 약자이다.
프로그램을 구성하는 요소들을 세 가지 역할로 구분한 개발 방법론이다.

• 구성
  • Model: DB와 연결되어 데이터를 관리
  • View: 사용자에게 보여지는 UI 부분
  • Controller: 사용자의 요청을 받아 Model과 View를 제어
• 장점
  • 유지보수가 쉽다.
  • 재사용성이 높다.
  • 협업에 많은 도움이 된다.
• 단점
  • 설계가 어렵다.
  • 완벽한 분리가 어렵다
• 그럼에도 장점이 더 많기 때문에 많이들 MVC 모델을 사용한다.

DB - express 연결

DB 새로운 사용자 만들기

root 계정은 외부에서 접속이 불가능하다. 따라서 DB를 외부에서 사용하기 위해서는 root 계정이 아닌 새로운 계정으로 접속해야한다.

USE mysql; -- mysql DB 선택
CREATE USER '<사용자 이름>'@'%' IDENTIFIED BY '<사용자 비밀번호>'; -- 사용자 계정 생성
ALTER USER '<사용자 이름>'@'%' IDENTIFIED WITH mysql_native_password BY '<사용자 비밀번호>'; -- 비밀번호 암호화
GRANT ALL PRIVILEGES ON *.* TO '<사용자 이름>'@'%' WITH GRANT OPTION; -- 사용자 권한 추가(모든 DB, 모든 테이블)
FLUSH PRIVILEGES; -- 변경 적용

mysql 모듈 설치

먼저 mysql 모듈을 설치해야 한다.
강의에서는 mysql 모듈을 사용했지만 해당 모듈은 콜백 방식으로 비동기를 처리한다.
나는 async - await 방식으로 사용하고 싶어서 mysql2 모듈을 사용했다.

npm i mysql2

DB 연결

async function connectDB(query) {
  const conn = await mysql.createConnection({
    host: "<호스트 주소>",
    user: "<사용자 이름>",
    password: "<사용자 비밀번호>",
    database: "<DB 이름>",
  });

  let result = await conn.query(query);
  return result
}

DB 쿼리 요청

const readQuery = "SELECT * FROM <테이블 이름>";
const readResult = await connectDB(readQuery); // table의 모든 데이터를 가져온다.
const createQuery = "INSERT INTO <테이블 이름> VALUES (<추가할 데이터>)";
const createResult = await connectDB(createQuery); // table에 데이터를 추가한다.
const updateQuery = "UPDATE <테이블 이름> SET <변경할 데이터> WHERE <조건>";
const updateResult = await connectDB(updateQuery); // table의 데이터를 변경한다.
const deleteQuery = "DELETE FROM <테이블 이름> WHERE <조건>";
const deleteResult = await connectDB(deleteQuery); // table의 데이터를 삭제한다.

Element.insertAdjacentHTML()

요소의 앞뒤 혹은 자식요소로 HTML을 추가한다.

element.insertAdjacentHTML(position, text);

• position
  • beforebegin: 요소 앞에 추가
  • afterbegin: 요소 안의 첫 번째 자식 요소로 추가
  • beforeend: 요소 안의 마지막 자식 요소로 추가
  • afterend: 요소 뒤에 추가
  • 예시

    <!-- beforebegin -->
    <p>
    <!-- afterbegin -->
    foo
    <!-- beforeend -->
    </p>
    <!-- afterend -->
    

• text
  • DOM에 삽입 가능한 HTML 혹은 XML 문자열