[Westagram Backend Project] 3. mysql Database로 유저 회원가입 하기 (주황색)

-Westagram Backend Project - 

여기에서 body가 없는거고, 배열 안에 있는 건 더미 데이터

[Node.js] Express, postman 활용 - 유저 생성, 추가 (회원가입)

vscode 할 때, command+ s (ctrl+s) 로 저장 후 node.[파일이름]으로 실행 

(저장 안 됐다면, tab에 흰 점 생김)

---

[구조화 흐름- 접근]

위에서 배열에 추가한 것과 다르게,

 

여기서는 mysql 에 있는 database 연결 후, 

여기에서 insert int로 유저 생성 

 

 

이번 과제에서는 회원가입, 유저생성하기!

이번에는 

get, post, 콜백함수를 써주는 것! 

 

 

일단, 프론트는 postman body에 써서 백엔드한테 request보내고

백엔드는 받은 request를 다 하고 다했다고 postman에 response보내고 .

 

get post는 아래 링크 참고

[Server Communication] HTTP, HTTPS, get/post method (app.get, app.post)

---

코드 뜯어보기 

 

아래 링크에서, 전체적인 코드 틀은 뜯어보았다. (데이터베이스 연결하는 과정)

https://pm-developer-justdoit.tistory.com/32

 

주석을 보면 되는데 

이번 회원가입/ 유저 생성에 해당되는 건, 과제2이다. 

 

회원가입/ 유저 생성에는 총 5개의 단계가 있다. 

 

 

보라색은 주석 부분이다. 

 

 

// user 가져오는 get

//1. API 로 users 화면에 보여주기       --먼저 users 화면에 보여줘야 한다  (postman에서 가져오는 거니까 get) 

app.get('/users', async(req, res) => {                           --> user 가져오는 get

 

--> '/users' 는 url -->  맨 밑의 server.listen 첫 인자 8000 -> localhost:8000/users 에 해당 

--> / 는 root (localhost3000/  뒤에 아무것도 없는 것= localhost3000)

--> localhost는 디폴트, 그다음 숫자는 아래의 server.listen에서 확인 --> localhost3000/ 

try {
query DB with SQL
Database Source 변수를 가져오고.
SELECT id, name, password FROM users;
const userData = await myDataSource.query

(`SELECT id, name, email FROM USERS`)

 

 

//console 출력

console.log("USER DATA :", userData)         --> 서버 화면에 띄우는 거

                                                                                             (javascript는 화면에 띄우려면 console.log 띄어야하니)

 . 있으면 다 js라고 생각하면 됨--> 파이썬도 .py

// consolelog로 띄우는 게 FRONT 전달

 

// 함수 있으니까 반환

return res.status(200).json({         
"users": userData
})
} catch (error) {
console.log(error)
}
})

 

 

//2. users 를 post로 생성,          '/users' -> mysql의 users table에 생성

app.post("/users", async(req, res) => {                             

try {
// 1. user 정보를 frontend로부터 받는다. (프론트가 사용자 정보를 가지고, 요청을 보낸다) -> postman body에 받는다
const me = req.body

// 2. user 정보 console.log로 확인 한 번!
console.log("ME: ", me)              --> me는 임의로 넣어놓은 변수 (r ,q 아무거나 가능)


// 3. DATABASE 정보 저장.
// postman body에서 빈 창에 데이터 자세하게 적고, vscode 여기로 와서 양식 쓰기 

// postman에서 해당 부분은 body에 "name":"Ken" "password="ppdd" "email"="ken@email.com" 으로 보일 것
const name2 = me.name
const password2 = me.password
const email2 = me.email

const userData = await myDataSource.query(`
INSERT INTO users (
name,
password,
email
)
VALUES (
'${name2}',
'${password2}',
'${email2}'
)
`)

// 4. DB data 저장 여부 확인 -- console.log 찍어봐서 
console.log('inserted user id', userData.insertId)

// 5. send response to FRONTEND -- 잘 됐다고 보내기 (postman에서 response 보내기)
return res.status(201).json({
"message": "userCreated"
})

} catch (err) {
console.log(err)
}
})

 

//서버 띄우는 get

app.get("/", async(req, res) => {

try {

return res.status(200).json({"message": "Welcome to Soheon's server!"})

} catch (err) {

console.log(err)

}

})

const dotenv = require("dotenv")

dotenv.config()

const http = require('http')

const express = require('express')

// 이게 mysql로 database 가져오는거

const { DataSource } = require('typeorm');

const myDataSource = new DataSource({

type: process.env.TYPEORM_CONNECTION,

host: process.env.TYPEORM_HOST,

port: process.env.TYPEORM_PORT,

username: process.env.TYPEORM_USERNAME,

password: process.env.TYPEORM_PASSWORD,

database: process.env.TYPEORM_DATABASE

})

myDataSource.initialize()

.then(() => {

console.log("Data Source has been initialized!")

})

 

 

const app = express()

app.use(express.json()) // for parsing application/json

//서버 띄우는 get

app.get("/", async(req, res) => {

try {

return res.status(200).json({"message": "Welcome to Soheon's server!"})

} catch (err) {

console.log(err)

}

})

//과제2

// user 가져오는 get

//1. API 로 users 화면에 보여주기

//get 안의 첫번째 인자가 url --> 맨 밑의 server.listen 첫 인자 8000 -> localhost:8000/users

app.get('/users', async(req, res) => {

try {

// query DB with SQL

// Database Source 변수를 가져오고.

// SELECT id, name, password FROM users;

const userData = await myDataSource.query(`SELECT id, name, email FROM USERS`)

// console 출력

// 서버 화면에 띄우는 거 (javascript는 화면에 띄우려면 console.log 띄어야하니/ . 있으면 다 js연결)

console.log("USER DATA :", userData)

// consolelog로 띄우는 게 FRONT 전달

// 함수 있으니까 반환

return res.status(200).json({

"users": userData

})

} catch (error) {

console.log(error)

}

})

//2. users 를 post로 생성, /users -> mysql의 users table에 생성

app.post("/users", async(req, res) => {

try {

// 1. user 정보를 frontend로부터 받는다. (프론트가 사용자 정보를 가지고, 요청을 보낸다) -> postman body에 받는다

const me = req.body

// 2. user 정보 console.log로 확인 한 번!

console.log("ME: ", me)

 

// 3. DATABASE 정보 저장.

// body에서 빈 창에 데이터 자세하게 적고, 여기로 와서 양식 쓰기

const name2 = me.name

const password2 = me.password

const email2 = me.email

const userData = await myDataSource.query(`

INSERT INTO users (

name,

password,

email

)

VALUES (

'${name2}',

'${password2}',

'${email2}'

)

`)

// 4. DB data 저장 여부 확인

console.log('inserted user id', userData.insertId)

// 5. send response to FRONTEND

return res.status(201).json({

"message": "userCreated"

})

} catch (err) {

console.log(err)

}

})

// 과제 3 DELETE

// 가장 마지막 user를 삭제하는 엔드포인트

app.delete("/users", async(req, res) => {

try {

} catch (err) {

console.log(err)

}

})

// 과제 4 UPDATE

// 1번 user의 이름을 'Code Kim'으로 바꾸어 보세요.

app.put("/users/1", async(req, res) => {

try {

const newName = req.body.data.name

} catch (err) {

console.log(err)

}

})

myDataSource.initialize()

.then(() => {

console.log("Data Source has been initialized!")

})

const server = http.createServer(app) // express app 으로 서버를 만듭니다.

const start = async () => { // 서버를 시작하는 함수입니다.

try {

server.listen(8000, () => console.log(`Server is listening on 8000`))

} catch (err) {

console.error(err)

}

}

start()

 

 

참고 영상 

https://www.youtube.com/watch?source_ve_path=MTM5MTE3LDEzOTExNywyODY2MywyODY2MywyODY2MywzNjg0MiwzNjg0MiwxNjQ5OSwyODY2NCwxNjQ1MDM&feature=emb_share&v=Tt_tKhhhJqY 

 

- vscode에서 키보드 화살표하면 위로 올라갈 수 있음 (그전 코드로 갈 수 있음) 

- api 만들기 링크도 만들 수 있음 

app.get('/dog', (req, res) => {

res.send ("<a href= 'https://youtube.com'>") 

}) 

이러면 localhost:3000/dog 에 youtube link 만들어져서 또 들어갈 수 있음 

res.send 안에 html, text 다 가능.  localhost:3000/dog 창에 넣어지는 것. 

send 통해서 뭐든지 보낼 수 있다 !

 

res.send("Hello, world!")    //응답res에 "Hello, world!"를 send 보내겠다!