[TIL]21.12.19

npm install 했다, 패키지관리를 쉽게하기 위함이다. 서버 코드를 고쳐도 바로바로 적용가능하도록 nodemon을 사용할 것이다.

우선 http로 개발하기 위해서 서치하는 중 다음과 같은 문장을 발견해서 나중에 더 공부를 해보려 남기도록 한다

참고링크 ⇒ https://kss7547.tistory.com/43 // http모듈 사용법에 대한 전반적인 이해가 가능함.

• HTTP(HyperText Transfer Protocol)은 TCP/IP를 기반에 둔 프로토콜입니다.

const server = http.createServer(();

server.listen(3001, function(){
    console.log('3001번 포트로 서버가 실행되었습니다.')
    return;
})

위와 같은 코드를 다음과 같이 적어서 사용할 수 있다.

const http = require('http');
// const cors = require('cors');
// const cookieParser = require('cookie-parser');
// const express = require('express');

const server = http.createServer((req, res) => {
		// res.writeHead(200, {'Content-Type': 'text/html'}) 만약 response를 html를 한다면
		// 다음과 같이 Head를 정의해줘야함 이미지이나 텍스트, css파일과 같은 헤더에 적용 시켜야할 종류도
		// 각각 있다.

    res.write('Hello World');
    res.end();
    return;
}).listen(3001);

그 후로 npm install —save express 를 해서 express로 미들웨어로 서버에 들어오는 각 라우팅에 따른 응답을 처리하기 위해 npm으로 express를 install 해줬다.

express.json() 모듈을 사용하면 json요청을 받을 수 있다. ⇒ req.body로.. (express 4.16 이후버전의 경우)

express 4.16 이전 버전의 경우는 npm으로 body-parser이라는 모듈을 다운받아서 json을 파싱하기 위해서 사용해야한다.

npm install로 cors 모듈을 설치했다.

extended 는 중첩된 객체표현을 허용할지 말지를 정하는 것이다. 객체 안에 객체를 파싱할 수 있게하려면 true.

내부적으로 true 를 하면 qs 모듈을 사용하고, false 면 query-string 모듈을 사용한다. 이 두 모듈간의 차이에서 중첩객체 파싱여부가 갈린다. 예제는 참조문서의 stackoverflow 에 잘 나와있다.

참조문서 : https://stackoverflow.com/questions/29960764/what-does-extended-mean-in-express-4-0/45690436#45690436

출처: https://sjh836.tistory.com/154

환경변수(.env)를 사용하기위해 npm으로 dotenv을 설치했다.

.env에서 관리해야하는 데이터들은 데이터베이스이름, 데이터베이스패스워드, 토큰 등등이 있다. 그냥 노출되면 안되는 것들을 때려박아보자.

이젠 갤러리 CRUD를 위해 mysql의 스키마를 작성해보자

// 나중에 김연희 작가님의 데이터베이스 개론 을 읽어보고 싶다.

// draw.io를 나중에 사용해보자 웹 서비스의 전반적인 아키텍쳐를 문서화하기도, 데이터베이스 스키마를 문서화하기도 좋은 툴이다.

ORM(Object Relational Mapping)

sql문을 쓰지않고도 프로그래밍언어로 DB를 관리할 수 있도록 도와주는 tool인 Squelize와 Squelize-cli을 사용하기 위해서 npm 으로 설치했다.

npm install --save sequelize

npm install --save-dev sequelize-cli

모델 생성

npx sequelize-cli model:generate --name User --attributes firstName:string,lastName:string,email:string

우선 갤러리모델(테이블)을 만들 것이기 때문에.. 다음과 같은 명령어를 터미널에 명령해줬다. (id는 자동생성이므로 제외했다.)

npx sequelize-cli model:generate --name gallery --attributes title:string,comment:string,pictureUrlOne:string,pictureUrlTwo:string,pictureUrlThree:string

데이터베이스를 sequelize가 사용할 수 있도록 migration(이주)해야한다. 그때에 mysql2라는 모듈이 필요함으로..

npm install mysql2

npx sequelize-cli db:migrate

알게된 것

https://www.w3schools.com 는 정말 최고다..

1. 만약 http://localhost:3001/iloveyou 라면
req.url은 'iloveyou' 이다. req.url을 알게된 것..

2. cors모듈을 사용하는 방법 중.. 다음과 같은 방법이 있는데 cors()함수의 들어가는 객체의
키, 즉 옵션들에 대해 살펴보자

참고링크 => https://evan-moon.github.io/2020/05/21/about-cors/
https://expressjs.com/en/resources/middleware/cors.html

심심할때 읽기 좋을 듯
https://web.dev/cross-origin-resource-sharing/

const cors = require('cors')
const app = express();
app.use(cors({
	origin: *, // 모든 주소의 Cross Origin(출처) Resource Sharing을 허용한다는 뜻이다.
						 // 또 다른 값으로는 ['https://localhost:3001', '주소']로도 CORS허용이 가능하다.
	"methods": ["GET,HEAD,PUT,PATCH,POST,DELETE"],   // CORS에 허용하는 method들을 옵션으로 받는다.
  "preflightContinue": false, // 
  "optionsSuccessStatus": 204,
	"credentials": true
}))

3. express를 쓸 때는 app.listen(포트번호, 콜백함수) 로 마지막 사용해야한다. 그렇게 되면 http가 자동으로 
사용되어진다. 또한 https와 express를 같이 쓰고 싶다면?

const app = express();

if (fs.existsSync('./key.pem') && fs.existsSync('./cert.pem')) {
  const privateKey = fs.readFileSync(__dirname + '/key.pem', 'utf8');
  const certificate = fs.readFileSync(__dirname + '/cert.pem', 'utf8');
  const credentials = { key: privateKey, cert: certificate };

  server = https.createServer(credentials, app);
  server.listen(HTTPS_PORT, () => console.log('https server runnning'));
} else {
  server = app.listen(HTTPS_PORT, () => console.log('http server runnning'));
}
module.exports = server;

이런식으로 server = https.createServer(credentials, app); 한 후 
server.listen(포트번호, 콜백함수)를 해서 https로 연결하면 되는 것이다.

4. 구조분해 할당 https://velog.io/@dooreplay/%EA%B5%AC%EC%A1%B0%EB%B6%84%ED%95%B4%ED%95%A0%EB%8B%B9-destructuring-%EC%A0%95%EB%A6%AC%ED%95%B4%EB%B3%B4%EA%B8%B0
1) 
let x, y;
[x = 1, y = 2] = [null];
console.log(x, y;   // null, 2

2) 
const user = {
	name: 'chaerin',
	color: 'green'
}

let likedColor = user.color;

const { color : likedColor } = user;

console.log('likedColor : ', likedColor ); // green

3) 리액트 객체 구조 분해 할당

this.state = {
	like: 0,
	follow: 0
}

const { like, follow } = this.state;

4) 로그인 로직에서의 배열 구조 분해 할당
const [shouldBeBearer, token] = req.headers.authorization.split(' ');

참고 => https://velog.io/@dooreplay/%EA%B5%AC%EC%A1%B0%EB%B6%84%ED%95%B4%ED%95%A0%EB%8B%B9-destructuring-%EC%A0%95%EB%A6%AC%ED%95%B4%EB%B3%B4%EA%B8%B0