node.js 게시판 만들기

🗃️javascript/프로젝트

node.js 게시판 만들기

하얀성 2023. 11. 6. 20:19

예상결과

데이터구조

1. node.js에 대한 이해들

1-0 한 웹앱에 한 서버가 일반적. (물론 쪼개서 쓸 수는 있음.)

서버.js , 서버2.js 이렇게 두개의 서버가 동시에 돌아갈 순 없음.

1-1 get , post , put, delete를 한 라우터에서 모두 관리가능.

php는 입력창을 만들 때, post 하는 곳 get하는 곳이 있다면 delete 등의 삭제기능은 따로 화면을 만들어서 만들어줘야했지만 node.js는 삭제기능을 router를 통해서 한 곳에서 가능해짐.

PHP는 전통적으로 서버사이드에서 페이지를 처리하는 언어로, 각각의 PHP 파일이 하나의 엔드포인트(URL)로 동작합니다. 이는 웹 서버(Apache, Nginx 등)가 URL을 파일 시스템의 경로로 직접 매핑하는 방식으로 동작하는 것이 일반적입니다. 따라서 PHP로 작성된 전통적인 애플리케이션에서는, GET 요청과 POST 요청을 다루는 로직을 각각의 파일에 작성할 필요가 있었습니다.

반면에, Node.js(특히 Express.js 같은 프레임워크 사용 시)는 미들웨어 개념과 라우팅 시스템을 사용하여, 같은 경로에 대해 GET, POST, PUT, DELETE 등의 여러 HTTP 메서드를 다룰 수 있는 라우트를 하나로 묶을 수 있게 해줍니다. 이는 코드를 좀 더 체계적으로 관리할 수 있게 하며, 중복을 줄이고 각각의 라우트에 대한 처리를 명확하게 분리할 수 있게 해줍니다.

1-2 db와 서버의 관계에 대한 이해

1. 데이터는 화면따라 각각의 데이터 table을 쓰기보단 한 테이블에서 다같이 저장후, 따로 뽑아쓰는 식으로 관리함.

2. 중간의 짧은 데이터 이동 과정이라도 db를 거치는게 안정적이며 일반 어플리케이션의 구조는 보통 db와 상호작용함

서버의 동작은 서버의 메모리에 값을 바로 get, post가 주고 받는게 아니라,

get이 db에서 확인하고, post도 db에 값을 전달해주는 그런 과정으로 진행되어야 한다.
메모리가 db역할을 해서는, 데이터의 안정성이 낮아진다.

2. node.js에서 데이터 가져와서 화면에 출력해보기.

2-1 show.js 와 query문에서 데이터값 빼내오기

show.js 화면 일부코드

app.get('/show', (req, res) => {
    let query = "SELECT * FROM fun ORDER BY id DESC"; // id를 기준으로 내림차순 정렬
    connection.query(query, (error, results, fields) => {
        if (error) throw error;
        
        // 결과를 show.html 템플릿에 전달
        res.render("show", { // html 생략가능
            items: results
        });
    })
})

show.html

%= EJS 템플릿 엔진 문법을 사용해서 출력 반복문을 만들어줌.

<body>
  <h2>게시글 리스트</h2>
  <table>
    <thead>
      <tr>
        <th>번호</th>
        <th>제목</th>
        <th>작성자</th>
        <th>내용</th>
        <th>날짜</th>
      </tr>
    </thead>
    <tbody>
      {% for item in items %}
      <tr>
        <td>{{ item.id }}</td>
        <td>{{ item.title }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.content }}</td>
        <td>{{ item.date }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</body>

윗 show.js의 connection.query("쿼리문", 실행함수{})

실행함수 기본 구조.

connection.query('SELECT * FROM mytable', function (error, results, fields) {
  if (error) throw error;

  // fields 배열의 각 요소에 접근하여 컬럼 이름을 로그로 출력
  fields.forEach(field => {
    console.log(field.name);
  });
  
  // results를 처리하는 나머지 코드...
});

Node.js의 mysql 라이브러리에서 connection.query 함수를 호출하면, 콜백 함수는 세 개의 매개변수를 받습니다: error, results, 그리고 fields.

- error: 쿼리 실행 중에 발생한 에러입니다. 에러가 없으면 null이나 undefined가 됩니다.

- results: 쿼리 실행 결과입니다. SELECT, SHOW, DESCRIBE 혹은 EXPLAIN 문을 실행했을 때는 이 결과가 결과 데이터로 채워진 배열입니다. INSERT, UPDATE, DELETE 문을 실행했을 때는 이 결과가 명령의 영향을 받은 행의 수, 새로운 행의 ID 등의 정보를 포함한 객체입니다.

- fields: 쿼리 실행으로 반환된 결과 집합의 각 필드(컬럼)에 대한 상세 정보를 담고 있는 배열입니다. 각 필드 정보는 name(필드 이름), table(필드가 속한 테이블), type(필드 데이터 타입) 등을 포함하고 있습니다.

실행함수의 results 객체에는 쿼리에 의해 반환된 실제 데이터와 컬럼제목이 담겨 있다

실행함수의 result 객체를 출력해본 결과

connection.query('SELECT id, name FROM users', function (error, results, fields) { //id, name 컬럼의 데이터 부름
  if (error) throw error;

  // 첫 번째 결과 행에 접근
  console.log(results[0]); // { id: 1, name: 'John Doe' }
  
  // 첫 번째 결과 행의 'id' 컬럼 값에 접근
  console.log(results[0].id); // 1
  
  // 첫 번째 결과 행의 'name' 컬럼 값에 접근
  console.log(results[0].name); // 'John Doe'
});

2-2 db에 순서부여 위해 primary key 지정해보기

id 값을 primary 키로 만듦(자동적으로 row를 추가할 때마다 값이 1씩 증가)

 alter table fun add id auto_increment primary key;

'🗃️javascript > 프로젝트' 카테고리의 다른 글

구글 티쳐블머신으로 졸음방지 프로그램 만들어보기 (0)	2023.12.01
메모장 만들기[경고창 발생, 페이지 나누기 ,ssr에 따른 템플릿사용결정] (0)	2023.11.08
node.js로 html화면과 mysql 연결 및 값 저장 \|\| query문 '?'쓰는 이유 (0)	2023.11.04
숫자야구게임 (0)	2023.06.19
사칙연산 계산기(2)[더 작은 거부터 만들고 풀어보자.] (0)	2023.04.06

현재글node.js 게시판 만들기

하얀성의 개발 메타인지