MySQL 설치하기, node.js로 개발하기

💭 교육 27일차

오늘부터 프로그래밍 실습 수업이 시작됐다. 3시간 정도는 이론을 가볍게 훑었고 노드 express 라이브러리 다운로드, view engine 지정, get 방식, post 방식의 요청과 응답 등을 주제로 기본적인.. 사용법?을 익히게 됐다. 저번달에 노드 찍먹 시간이 있었는데 그땐 시간 관계상 설명을 듣지 못했던 내용들을 들을 수 있게 되었다. 프로젝트도 노드를 기반으로 하게 될 것 같다! 노드가 자바스크립트에서 파생되었다 보니 구조가 비슷해서 마음의 부담이 없어 재미있다 ㅎㅎ

✔️ 웹 서버란?

웹 서버는 하드웨어, 소프트웨어 두 가지 측면으로 구분 할 수 있다.

브라우저가 웹 서버에서 불려진 파일을 필요로 할 때, 브라우저는 HTTP를 통해 파일을 요청한다.

요청이 올바른 웹 서버(하드웨어)에 도착했을 때, HTTP 서버(소프트웨어)는 요청된 문서를 HTTP를 이용해 보낸다.

하드웨어

간단하게 우리가 사용하고 있는, 서버를 구동시킬 컴퓨터라고 보면 됨
컴포넌트 파일에는 HTML, CSS, JavaScript가 존재한다.
컴포넌트 파일을 인터넷을 통해 클라이언트에게 전달된다.

소프트웨어

사용자가 어떻게 호스트 파일들에 접근하는지 관리한다.
웹 서버는 주소 HTTP 프로토콜을 사용하여 클라이언트의 요청을 응답하고 처리한다.

✔️ MySQL 설치

DB 연동 작업이 있던 건 아니고... 교육장 와이파이가 느려서 미리 다운로드만 받았다.

다운로드 페이지에 접속해 두 번째 파일을 다운로드 했다.

맥은 터미널에 brew install mysql 입력

모든걸 다 다운 받진 않았고 custom 옵션을 선택해 MySQL Server와 MySQL Workbench만 다운 받았다.

📂 환경변수 설정하기

(맥은 안 해도 됨)

시스템 환경 변수를 검색하고 고급 탭의 환경 변수 버튼을 클릭한다.

시스템 변수란에서 Path를 찾아 더블클릭하거나 편집을 눌러 환경 변수 편집 창으로 이동한다.

새로 만들기 버튼을 눌러 MySQL이 설치된 폴더 안의 Server 폴더의 bin 폴더 경로를 복사하여 넣어준다.

확인을 눌러 환경 변수 설정 완료

** 열려있는 터미널/cmd는 꼭 닫고 다시 열것!!

cmd를 열고 mysql -u root -p 를 입력하면 패스워드 입력창이 나온다. 설치할 때 설정한 패스워드를 입력하면 mysql이 실행된다.

(맥은 패스워드 설정이 따로 없으니 그냥 엔터 누르기~~)

✔️ node.js 개발 환경 구축

저번달에 노드를 잠깐 찍먹 했었는데 수업 초반은 이때 들었던 것과 거의 동일한 내용이었고 설명을 듣지 못했던 view engine 설정과 이후 내용을 이어서 학습했다.

VSCode에서 작업할 폴더를 불러온다.

폴더를 선택하고 우클릭하면 Copy Path를 통해 경로를 복사할 수 있다.

cmd를 이용해 복사된 해당 워크스페이스로 이동해준다.

(직접 해보진 않았는데 맥에선 이렇게 하면 안 된다고.. 나는 Finder를 통해 경로를 복사해 이동했다.)

📂 npm init -y 로 package.json을 생성한다.

-y 를 붙이면 기본 설정에 따른다는 뜻으로, 엔터 광클을 하지 않아도 되는 편리함이~!

📂 express, ejs 라이브러리 설치

npm install express ejs

cmd에 위 명령어를 입력하여 express와 ejs 라이브러리를 설치한다.

express는 서버를 생성하기 위함이고 ejs는 view engine 설정을 위함인데 html을 ejs를 통해 변환 해서 가져와준다.

npm: Node Package Manager
- node.js 패키지 설치 및 버전, 호환성 관리를 할 수 있는 커맨드 유틸리티이다.
- npm 명령어를 사용하여 모듈을 설치 할 수 있다. ( 예) npm install 모듈이름 )

👉 라이브러리 로드하기

// express 로드
const express = require('express')
const app = express()

// 웹 서버의 port 번호 지정
const port = 3000

// 서버 실행
const server = app.listen(port, function(){
    console.log("Server Start")
})

index.js 파일을 만들어 모든 설정을 이 파일에서 해줄 것이다.

require 함수를 이용해 라이브러리를 불러올 수 있다.

변수에 담아 저장하여 객체지향적인.. 코드를 작성한다.

서버를 실행하기 위해선 express 라이브러리의 listen 함수를 사용한다.

listen 함수에는 포트번호와 콜백함수가 필요한데, 포트번호도 바로 적어줄 수 있지만 변수에 담아 적어줬다. 콜백함수로는 간단하게 로그를 찍어주도록 작성했다.

//뷰 파일들의 기본 경로 설정
app.set('views', __dirname + '/views')
//뷰 파일의 엔진으로 어떤 것을 사용할 것인가 = ejs
app.set('view engine', 'ejs')

app은 express 라이브러리를 로드한 변수(객체)이다.

첫 번째 set 함수 내용은 views 라는 폴더 안에 있는 파일들을 view 파일로 사용하겠다 설정한 것이고,

두 번째내용은 view engine으로 ejs를 사용한다고 설정한 것이다.

📂 nodemon 라이브러리 설치

저번달에 노드 찍먹할 때는 js 파일이 수정될 때마다 서버를 재시작 해주었어야 하는데 상당히 귀찮았다!

그 귀찮음을 해소하기 위해선 nodemon이란 걸 다운 받아 설정해주면 된다.

npm install nodemon -g

cmd에 위 명령어를 입력해 nodemon을 설치한다.

-g : '글로벌'이란 뜻. 의존성 모듈이 아니라 환경에? 설치하는 것. package.json을 열어보면 express와 달리 Dependencies에 nodemon은 없다.

설치가 완료 되었으면 사진과 같이 package.json의 scripts에 "start" : "nodemon index.js" 를 추가한다.

명령어 커스텀 같은 느낌으로 이제 cmd에 npm start 를 입력하면 매번 서버를 재시작할 필요 없이 js가 수정되어 저장될 때마다 서버가 자동으로 재시작 된다.

✔️ node.js로 개발하기

// 기본 경로 localhost:3000
// localhost:3000/ 요청이 들어오면
app.get('/', function (req, res) {
    // ejs 파일 응답해주기
    res.render('main.ejs')
})

index.js 파일에 get 방식을 이용해 간단하게 메인 페이지를 띄우는 코드를 작성했다.

콜백함수 안 req(request)매개변수는 유저가 서버에게 요청을 보내는 부분이고,
res(response) 매개변수는 서버가 유저에게 응답을 보내는 부분이다.

'localhost:3000/'이라는 요청이 들어온 것이기 때문에 response의 render 함수를 이용해 ejs 파일로 응답해준다.

ejs 파일 확장자는 생략 가능해서 'main'만 적어줘도 된다!

🔻 main.ejs는 이렇게 작성했다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .btn {
            border: 2px solid #000;
            color: #000;
            border-radius: 10px;
            background-color: #fff;
            cursor: pointer;
        }

        a {
            color: #000;
        }
    </style>
    <script>
        function third() {
            location.href = '/third'
        }
    </script>
</head>
<body>
    <h1>Main Page</h1>
    <p><a href="/login">로그인</a></p>
    <!-- 상대경로 하이퍼링크 -->
    <a href="/second">Second Page</a><br><br>
    <!-- javascript를 이용한 페이지 이동 -->
    <button onclick="third()" class="btn">Third Page</button>
</body>
</html>

🔗 form을 사용해 get/post 방식으로 데이터 보내기

앞선 메인 페이지에서 Second Page를 누르면 해당 화면으로 이동한다.

// localhost:3000/second
app.get('/second', function(req, res) {
    //res.send('Second Page')
    res.render('data.ejs')
})

/second 요청이 들어왔을 때의 동작을 작성한 코드이다. 단순이 data.ejs 파일을 로드해준다.

data.ejs는 아래와 같이 작성했다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            font-weight: bold;
        }

        .sub {
            border: 1px solid #626262;
            color: #626262;
            border-radius: 10px;
            background-color: #fff;
            cursor: pointer;
            font-size: 10px;
            padding: 2px 8px 2px 8px;
        }

        input {
            padding: 3px;
            margin-bottom: 3px;
        }

        input::placeholder {
            font-size: 10px;
        }
    </style>
</head>
<body>
    <p>get 방식으로 데이터 보내기</p>
    <form action="/data" method="get">
        <input type="text" name="_id" placeholder="아이디를 입력하세요."><br>
        <input type="password" name="_pass" placeholder="패스워드를 입력하세요."><br>
        <input type="submit" class="sub">
    </form>

    <p>post 방식으로 데이터 보내기</p>
    <form action="/data2" method="post">
        <input type="text" name="_id" placeholder="아이디를 입력하세요."><br>
        <input type="password" name="_pass" placeholder="패스워드를 입력하세요."><br>
        <input type="submit"  class="sub">
    </form>
</body>
</html>

input의 name 속성을 사용해 데이터를 넘겨줄 것이다.

get 방식으로 데이터 보내기

//localhost:3000/data
app.get('/data', function(req, res) {
    // get 형식으로 데이터를 보내면
    // req 안에 query라는 키값 안에 데이터들이 존재함 
    console.log(req.query)
})

get 방식의 form의 action url은 '/data'이다. 따라서 index.js에서 '/data' 주소를 연결해준다.

get 방식으로 데이터를 보내면 그 데이터는 request 안 query라는 키값 안에 존재한다.

로그를 찍어 확인해보았다.

로그가 찍힌 것을 보면 input의 name 속성에 입력해준 값들이 키값으로 보이는 것을 확인할 수 있다.

//localhost:3000/data get 방식
app.get('/data', function(req, res) {
    // get 형식으로 데이터를 보내면
    // req 안에 query라는 키값 안에 데이터들이 존재함 
    //console.log(req.query)

    const input_id = req.query._id
    const input_pass = req.query._pass
    //console.log(req['query']) // 접근방식2: 대괄호 - 키값이 숫자거나 중간에 공백이 있을 경우 사용
    console.log(input_id, input_pass)
    
    res.send(req.query)
})

함수에 내용을 추가로 작성하였다.

name 속성이 키로 존재하는 것을 확인 했으니 req.query.[name 속성 값]으로 데이터에 접근할 수 있다.

id와 패스워드 각각의 값을 변수에 담아주고 그 값을 다시 로그를 찍게끔 작성했다.

별도의 화면을 띄우도록 하진 않았고 resposne의 send 함수를 이용해 아이디와 패스워드 값만 찍어주도록 했다.

post 방식으로 데이터 보내기

//localhost:3000/data2 post 방식
app.post('/data2', function(req, res) {
    // post 형식으로 데이터를 보낼 땐 req 안에 body 안에 데이터들이 존재
    console.log(req.body)
}

post 방식의 form의 url은 '/data2'이기 때문에 해당 주소를 연결해준다.

post 방식으로 데이터를 보낼 땐 request 안 body 안에 데이터들이 존재한다. 로그를 찍어주는 코드를 작성했다.

form에 데이터를 입력하고 제출 버튼을 누르면 사진과 같이 undefined가 뜬다.

그 이유는 resquest.body 데이터는 json 형식이라 형변환이 필요해 데이터 못 읽어오기 때문이다.

데이터를 읽어오기 위해선 json 데이터를 사용하겠다는 설정이 추가로 필요하다.

app.use(express.urlencoded({extended:false})) // 요즘엔 true나 false 입력 안 해도 됨

index.js에 위 코드를 추가한다.

옛날엔 app.use(express.json()) 이렇게 적어야 했지만 요즘은 적지 않아도 된다고 한다.
extended:false를 사용한다면 데이터를 변환하는 엔진인 querystring 모듈을 사용한다는 뜻이다. (express에 내장됨)

만약 extended true를 사용하게 되면 데이터를 변환하는 엔진인 qs 모듈을 사용한다는 뜻이라고..(근데 구버전 express에는 내장되어 있지 않음)

💡 근데!!

요즘은 아예 extended:어쩌고 설정을 적어주지 않아도 된다고? 하셔서 실행해봤더니 경고 문구가 뜨긴 하지만 데이터는 잘 찍히긴 한다.

강사님께서 본인은 늘 적고 있다고는 하셔서 나도 생략하진 않을건데 querystring와 qs의 차이가 뭔지도 궁금 했어서 별도로 공부를 해봐야겠다!

//localhost:3000/data2 post 방식
app.post('/data2', function(req, res) {
    // post 형식으로 데이터를 보낼 땐 req 안에 body 안에 데이터들이 존재
    console.log(req.body)

    // 유저가 입력한 id 값이 test이고 password가 1234인 경우 로그인 성공
    // 그 외의 경우엔 로그인 실패
    const input_id = req.body._id
    const input_pass = req.body._pass
    console.log(input_id, input_pass)
    let result

    if ((input_id == 'test') & (input_pass == '1234')) {
        result = '로그인 성공'
    } else {
        result = '로그인 실패'
    }
})

post 방식으로 데이터를 보냈을 때 JSON 데이터를 받는 설정도 해주고, 데이터가 찍히는 것 또한 확인 했으니 로그인 기능 같아 보이는 코드를 작성했다.

유저가 입력한 id 값이 test이고 password가 1234인 경우에만 로그인에 성공하고 그외의 경우엔 실패하도록 조건을 줬다.

req.body._id, req.body._pass로 사용자가 입력한 아이디와 패스워드를 변수에 저장해줬고(input_id, input_pass), 결과를 저장할 변수(result)를 선언해뒀다.

if 조건문을 통해 result에 각각의 값을 저장해줬다.

// 화면에 result 값도 띄우기 키 data : 값 result
res.render('index', {
    data : result
})

저장한 데이터를 화면에 보내주기 위해선 위와 같이 render 함수에 키와 값의 형태로 입력해주면 된다.

index.ejs에 data라는 이름으로 result 값을 보낼 것이다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>
        로그인 상태: ( <%= data %> )
    </p>
</body>
</html>

index.ejs는 위와 같이 작성했다.

ejs에선 자바스크립트 문법을 사용할 수 있는데, jsp에서 썼던 것처럼 <%= %> 를 사용하면 내용물을 출력해줄 수 있다.

data 라는 이름으로 result 값을 담아주었으니 input에 입력하는 아이디, 패스워드 값에 따라 "로그인 성공" 혹은 "로그인 실패" 문자열이 출력될 것이다.

<% %> 구문(?)도 사용할 수 있는데, 아무것도 출력해주지 않는다. 따라서 if나 for문 같은 제어문을 입력할 때 사용된다.

화면 띄우기 성공!!

노드를 이용해 간단하게 데이터를 보내고, 출력해보는 코드를 짜보았다!

저작자표시 비영리 변경금지

'etc > 블록체인 뉴딜일자리사업' 카테고리의 다른 글

ERC-6551 리서치 (0)	2023.06.21
VISA 계정추상화 리서치 (1)	2023.06.15
BM 기획 프로세스 (0)	2023.06.12
비즈니스 기획하기 (0)	2023.06.12
NFT 발행 실습 (0)	2023.06.09

vellalog

MySQL 설치하기, node.js로 개발하기

💭 교육 27일차

✔️ 웹 서버란?

✔️ MySQL 설치

📂 환경변수 설정하기

✔️ node.js 개발 환경 구축

📂 npm init -y 로 package.json을 생성한다.

📂 express, ejs 라이브러리 설치

👉 라이브러리 로드하기

📂 nodemon 라이브러리 설치

✔️ node.js로 개발하기

🔗 form을 사용해 get/post 방식으로 데이터 보내기

get 방식으로 데이터 보내기

post 방식으로 데이터 보내기

'etc > 블록체인 뉴딜일자리사업' 카테고리의 다른 글

댓글

티스토리툴바

MySQL 설치하기, node.js로 개발하기

💭 교육 27일차

✔️ 웹 서버란?

✔️ MySQL 설치

📂 환경변수 설정하기

✔️ node.js 개발 환경 구축

📂 npm init -y 로 package.json을 생성한다.

📂 express, ejs 라이브러리 설치

👉 라이브러리 로드하기

📂 nodemon 라이브러리 설치

✔️ node.js로 개발하기

🔗 form을 사용해 get/post 방식으로 데이터 보내기

get 방식으로 데이터 보내기

post 방식으로 데이터 보내기

'etc > 블록체인 뉴딜일자리사업' 카테고리의 다른 글

관련글

댓글

티스토리툴바

🔗 form을 사용해 get/post 방식으로 데이터 보내기