Notice

whoami (~ 24.12.04)

Recent Posts

Recent Comments

Link

instagram

250x250

« 2025/06 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

Tags more

Archives

Today

Total

관리 메뉴

hy30nq's blog

섹션 24: 노드JS & 익스프레스 웹사이트에서 MySQL 사용하기[61일차] 본문

Web/100일 코딩 챌린지 - Web Development

섹션 24: 노드JS & 익스프레스 웹사이트에서 MySQL 사용하기[61일차]

hy30nq 2024. 3. 8. 00:13

728x90

`mysql2/promise`란?

mysql2는 Node.js를 위한 MySQL 클라이언트 라이브러리입니다. 이 라이브러리는 비동기 MySQL 통신을 위해 콜백, 프로미스(Promises), 그리고 async/await 패턴을 지원합니다. mysql2/promise는 특히 프로미스 기반의 인터페이스를 제공하여, 비동기 코드를 더욱 깔끔하고 효율적으로 작성할 수 있게 해줍니다.

왜 `mysql2/promise`를 사용하는가?

비동기 프로그래밍에서 콜백 함수를 사용하는 것은 복잡하고 중첩된 코드를 초래할 수 있습니다(콜백 지옥). 프로미스는 이러한 문제를 해결하는 방법 중 하나로, 코드를 더 읽기 쉽고 관리하기 쉬운 형태로 작성할 수 있게 해줍니다. async/await 구문과 함께 사용할 때, 비동기 코드가 마치 동기 코드처럼 보이고 작동하게 만들어, 로직의 흐름을 쉽게 이해하고 디버그할 수 있게 됩니다.

사용 방법

설치

먼저, mysql2 패키지를 프로젝트에 설치해야 합니다. NPM을 사용하는 경우, 다음 명령어를 실행합니다:

npm install mysql2

기본 사용법

mysql2/promise 모듈을 사용하기 위해, 다음과 같이 모듈을 불러옵니다:

const mysql = require("mysql2/promise");

이제 MySQL 데이터베이스에 연결하고, SQL 쿼리를 실행할 준비가 되었습니다. 예를 들어, 데이터베이스에 연결하고 간단한 SELECT 쿼리를 실행하는 코드는 다음과 같습니다:

async function main() {
  // 데이터베이스 연결 설정
  const connection = await mysql.createConnection({
    host: 'localhost',
    user: 'your_username',
    database: 'your_database',
    password: 'your_password'
  });

  // 쿼리 실행
  const [rows, fields] = await connection.execute('SELECT * FROM your_table');

  console.log(rows);
}

main();

장점

코드 가독성 향상: 프로미스와 async/await 구문을 사용함으로써, 비동기 코드를 동기식 코드처럼 쉽게 읽고 이해할 수 있습니다.
에러 처리 용이: 프로미스 체인을 사용하여 에러를 쉽게 캐치하고 처리할 수 있습니다.
흐름 제어: 복잡한 비동기 로직에서도 코드의 실행 흐름을 쉽게 제어할 수 있습니다.

Async/Await: 자바스크립트의 비동기 처리 패턴 이해하기

자바스크립트는 비동기 프로그래밍을 간편하게 만들어주는 async와 await 문법을 제공합니다. 이 문법은 콜백 함수와 프로미스의 복잡성을 줄여주면서, 동기 코드처럼 보이게 하는 매력적인 방식입니다. 이 글에서는 async와 await의 개념과 사용 방법을 자세히 알아보겠습니다.

Async/Await 기초

`async` 함수

async 함수는 자바스크립트에 새로 도입된 키워드로, 함수 앞에 async를 붙이면 해당 함수는 항상 프로미스를 반환합니다. 만약 함수가 프로미스가 아닌 값을 반환하더라도, 그 값은 자동으로 프로미스로 감싸져서 반환됩니다.

async function helloWorld() {
  return "Hello, world!";
}

위 함수는 다음과 같이 표현할 수 있는 프로미스를 반환합니다:

function helloWorld() {
  return Promise.resolve("Hello, world!");
}

`await` 연산자

await 연산자는 async 함수 내부에서만 사용할 수 있으며, 프로미스의 해결을 기다립니다. await은 프로미스가 fulfilled 상태가 될 때까지 함수의 실행을 일시 중지하고, 프로미스의 결과값으로 함수를 재개합니다.

async function getHelloMessage() {
  const message = await helloWorld();
  console.log(message); // "Hello, world!"
}

Async/Await의 장점

코드 가독성: async와 await을 사용하면 비동기 코드를 동기 코드처럼 읽고 이해하기 쉽습니다.
에러 처리: try...catch 문을 사용하여 비동기 작업 중 발생하는 예외를 쉽게 처리할 수 있습니다.
동시성 제어: Promise.all과 함께 사용하여 여러 비동기 작업을 동시에 처리하고, 모든 작업이 완료될 때까지 기다릴 수 있습니다.

예외 처리

async 함수 내에서는 try...catch 문을 사용하여 에러를 처리할 수 있습니다. 이를 통해 비동기 작업 중 발생할 수 있는 예외를 간편하게 관리할 수 있습니다.

async function fetchUserData() {
  try {
    const response = await fetch('https://api.example.com/user');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("An error occurred:", error);
  }
}

결론

async와 await는 자바스크립트의 비동기 프로그래밍을 더욱 간결하고 이해하기 쉽게 만들어줍니다. 콜백 함수와 프로미스의 복잡성을 줄이면서, 동기 방식의 코드 작성법을 제공하여, 비동기 코드의 가독성과 유지보수성을 크게 향상시킵니다. 이러한 이유로 현대 자바스크립트 개발에서 async와 await는 필수적인 도구가 되었습니다.

EJS에서 Include 사용하기: 모듈러한 템플릿 구성

EJS(Embedded JavaScript templating)는 JavaScript를 사용하여 HTML 마크업을 생성하는 간단하면서도 강력한 템플릿 엔진입니다. 웹 개발 프로젝트에서 반복되는 HTML 구조를 재사용하기 위해, EJS는 include 기능을 제공합니다. 이 기능을 통해, 개발자는 공통 요소(예: 헤더, 푸터, 사이드바 등)를 별도의 파일로 분리하고, 이를 주요 템플릿에 삽입할 수 있습니다. 이 글에서는 EJS의 include 문법과 사용 방법에 대해 알아보겠습니다.

EJS에서 Include 사용하기

EJS의 include 기능을 사용하면, 한 파일의 내용을 다른 파일에 삽입할 수 있습니다. 이는 코드의 재사용성을 높이고, 유지 관리를 용이하게 하며, 템플릿 구조를 모듈화하는 데 도움을 줍니다.

기본 문법

EJS에서 다른 파일을 포함시키려면 <%- include('파일경로') %> 구문을 사용합니다. 이때, 파일 경로는 현재 템플릿 파일을 기준으로 합니다.

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
</head>
<body>
    <%- include('partials/header') %>

    <h1>Welcome to My Website</h1>
    <p>This is the home page.</p>

    <%- include('partials/footer') %>
</body>
</html>

위 예제에서, partials/header와 partials/footer는 현재 파일과 같은 디렉토리 내에 있는 partials 폴더에 위치한 파일입니다. header.ejs와 footer.ejs 파일의 내용이 각각 해당 위치에 삽입됩니다.

파일 경로

include를 사용할 때, 파일 경로를 정확히 지정해야 합니다. 경로는 상대 경로나 절대 경로로 지정할 수 있으며, 파일 확장자 .ejs는 생략 가능합니다.

데이터 전달

include 구문을 사용하여 다른 EJS 파일을 포함시킬 때, 현재 템플릿의 로컬 변수를 포함된 파일에서도 접근할 수 있습니다. 필요한 경우, 추가적인 데이터를 전달할 수도 있습니다.

<%- include('partials/greeting', { name: 'John' }) %>

위 코드에서, partials/greeting.ejs 파일은 name 변수에 접근할 수 있게 됩니다.

장점

재사용성: 자주 사용되는 HTML 구조를 별도의 파일로 분리하여, 여러 페이지에서 재사용할 수 있습니다.
유지 관리: 공통 요소를 한 곳에서 관리할 수 있어, 변경 사항이 있을 때 여러 파일을 수정하지 않아도 됩니다.
가독성: 주요 로직과 UI 구성 요소를 분리하여, 코드의 가독성을 향상시킵니다.

결론

EJS의 include 기능은 템플릿의 재사용성과 유지 관리를 개선하며, 웹 애플리케이션의 개발 과정을 보다 효율적으로 만들어줍니다. 공통 요소를 모듈화하여 코드의 복잡성을 줄이고, 프로젝트의 구조를 명확하게 할 수 있습니다. EJS를 사용하는 개발자라면, include 기능을 적극적으로 활용하여 효율적이고 유지 보수가 용이한 웹 애플리케이션을 만들어 보세요.