서버 연결

개요

홈페이지 만들기의 첫 과제인 서버 연결.
프론트와 서버 DB를 서버를 중심으로 연결한다.

Back-end & DB 연동

DB(MySQL)

MySQL의 설치와 환경구축은 다른 포스터에서 다루기로 한다.

MySQL의 첫 화면에서 먼저는 사용할 database를 만들어 줘야한다.
위 사진에서 MySQL Connection 옆에 '+'표시를 누른다.

위와 같은 화면이 나오는데, Default Schema를 제외한 칸을 채워준다. 이는, local 환경에서 사용하는 방법으로 연습용 DB이다. 실재 사용법과는 차이가 존재한다.

DB가 올바르게 생성되면 위와 같은 형태의 버튼이 생성된다.

버튼을 통해 들어가면 본격적으로 SQL문을 입력할 수 있는 창이 등장하고, 몇가지 SQL문을 우선적으로 입력해줘야 본격적인 사용이 가능하다.

• show databases; -> 데이터베이스 목록 (현재 계정이 접근 가능한 데이터베이스) - 필수 x
• create database test; -> test라는 이름의 database를 생성합니다. - 최초 한번 생성
• use test; -> test라는 이름의 database를 사용한다. - database를 껐다 킬 때마다 해줘야한다.

여기까지 입력했다면, DB에서 해줘야 하는 필수적인 작업은 끝이 납니다.

Back-end(Node.js)

Node.js 와 database를 단순히 연결하는 방법은 어렵지 않다. 하지만, 조치를 취하지 않고 서버와 DB를 연결한다면 보안이 취약해질 수 있다. 보안을 강화하는 방법은 다양하지만, 연결단계에서 할 수 있는 가장 기초적이고 필수적인 방법은 환경변수(environment variable)이다.

새로운 파일을 만들어주고 이름을 .env로 바꿔주면 위의 사진에서 처럼 (무슨 모양인지 알 수 없는) 특이한 모양의 파일이 생성된다.

환경변수란, 코드를 실행시키기 위해 필연적으로 들어가야하는 개인정보나 secret-key 같이 보안이 필요하거나 알리고 싶지 않은 정보들을 환경변수에 미리 저장하고 코드에서는 환경변수에서 불러와서 사용하는 방식으로 보안을 유지한다. 환경변수의 경우는 git-ignore로 설정해서 git에 push를 할 때, 제외하고 올린다. 사용방법은 DB와 연결하면서 등장.

DB를 관리하는 파일은 앞서 만들어 두었던 config 폴더에 생성한다, 편의상 db.js로 만들겠다.

1. 터미널 창에서 'mysql2'를 설치한다. (mySQL과 연결)
   

2. 터미널 창에서 "dotenv"를 설치한다. (환경변수 사용)
   

3. 각각의 모듈을 불러온다.

// config는 외부프로그램을 연결할때 사용되는 폴더
// mysql 연결정보를 관리하는 파일
// npm install mysql2
const mysql = require("mysql2"); // mysql2 모듈 사용
const dotenv = require('dotenv')

4. dotenv.config() -> require('dotenv').config(); env를 불러오는 코드 풀어서 적으면 밑에 코드로 적을 수 있다.

5. DB에 연결하기 위해 필요한 정보들을 기입

const conn = mysql.createConnection({
    host : process.env.DB_HOST,
    port : process.env.DB_PORT,
    user : process.env.DB_USER,
    password : process.env.DB_PASSWORD,
    database : process.env.DB_DATABASE
})

DB에 연결하기 위해 필요한 명령어는 mysql.createConnection({}) 이다. 이 후 각각의 값을 object의 형태로 담아준다. 각각 필요한 값은 3306, 0000 등의 값이 들어가야 한다. 하지만, 이러한 정보를 담은채 파일을 공유하거나 함에 위험 부담이 있기 때문에 그 값들을 .env파일에서 먼저 선언해준다.

DB_HOST = "127.0.0.1"
DB_PORT = 3306
DB_USER = 'root'
DB_PASSWORD = '0000'
DB_DATABASE = 'test'
// .env

선언이 완료됐다면, db.js로 돌아와서 각각의 값에 맞게 불러와주면 된다.

6. 연결을 실행한다.

conn.connect();

7. 수출한다.

module.exports = conn;

이렇게까지 된다면 SQL문만 잘 작성해준다면, DB와의 연결은 완료됐다.

Front-end & Back-end 연결

Front-end(React)

프론트와 백의 연결은 사용 프로그램마다 차이가 있을 수 있으나, 프론트 먼저 작업을 진행한다.

1. 파일을 생성한다. Main.jsx로 망명하겠다.(반드시 대문자 잊지말자!)
   
   작업 하는 사람에 따라 차이는 존재하겠지만, 정리해가며 작업하는걸 추천한다.
   src > components > main > Main.jsx
   components 폴더까지는 필수사항이고, main부터는 선택사항이다.

2. rafce + 엔터빵!
   생성한 파일 내에서 rafce + 엔터빵을 하여 기본틀을 만들어준다.

3. App.js에서 페이지 연결작업
   3-1. App.js 상단에서 Main 페이지를 불러와준다.

     ```
     import './App.css';
     import { Routes } from 'react-router-dom'
   
     function App() {
       return (
         <Routes>
   
         </Routes>
       );
     }
   
     export default App;
     ```

   import Main from './components/main/Main';

   불러올 페이지의 이름과 상대경로를 작성해준다.

   3-2. Routes 내부에 경로입력(서버내의 경로)
   return > Routes 태그 > Route 작성

   <Route path='/' element= {<Main />}></Route>

   path, element 두 가지 속성값이 들어가야한다.

   import { Routes, Route } from 'react-router-dom'

   추가적으로 Route의 기능을 사용하기 위해 상단 import에 Route를 추가해준다.
   단, 여기서의 경로(path)는 서버 내에서의 경로이다. '/'의 경우 접속했을 때, 가장 먼저 나오는 페이지이다.

여기까지 진행됐다면, 프론트 영역에서의 작업은 우선 마무리 되었다.

Back-end(Node.js)

1. Routes 폴더에 새로운 Router를 생성한다.
   Routes는 경로를 다르는 폴더이다. 대부분의 작업은 이 폴더 내에서 진행된다.
   모든 페이지를 하나의 경로에서 작업할 수 있지만, 코드가 길어지면 수정/보안이 어렵기 때문에. 페이지의 역할을 기준으로 Router를 나누는것이 바람직하다.(명확한 기준은 존재하지 않는다. 개취)
   

• 1.1 express 기능을 불러온다.

  		const express = require('express');
  		const router = express.Router();
  		```
  express의 기능들을 불러오고, 그 중에서도 Router의 기능을 router라는 변수에 담아준다.
  

• 1.2 경로및 통신내용 작성

  router.get('/',(res,req)=>{
   	res.send(':)');
   })

• 1.3 모듈수출

  module.exports = router

2. server.js수출한 모듈을 server.js에서 불러와준다.

const mainRouter = require('./routes/mainRouter')

express의 기능을 통해서 mainRouter내에 들어가는 경로들은 '/'로 설정한다.

여기까지 작업이 완료되면 front - server - database가 상호간에 연결이 유지된 상태이다. 실행시켜 보면
React의 경우

Node.js의 경우

이상이 없이 실행됐다.

이렇게 하면 front-server-database 연결이 완료됐다.