부트캠프 7Week

- 220516 ~ 220520

이번 주는 간단하게 블로그 만들기와 게시판 만들기를 해보면서 CRUD 기능을 구현해보았다. 회원가입과 로그인 기능도 구현해보았는 데 비밀번호를 hash화 하여 DB에 저장하는 것을 보고, 보안에 대해 한 번 생각해보는 계기가 되었다. 백엔드는 유저의 개인정보를 다루는 부분이기 때문에 보안에 많이 신경써야겠구나 라는 생각이 들었다.
그리고 NoSQL은 처음이다보니 낮설게 느껴지던 mongoDB도 2주 정도 보니까 어느정도 패턴이 익숙해진 것 같다. 그리고 간단하게 댓글, 메일 보내기와 구글 로그인 기능도 구현해보았다. 정말 간단한 기능이고 아직은 많이 부족하지만 그래도 백엔드와 프론트엔드를 모두 다뤄봄으로써 전체적인 구조를 익힐 수 있어서 좋았다.

• 디자인 패턴 - 우리가 프로그래밍을 할 때 유용하게 활용할 수 있는 정형화된 패턴.
• 하지만, 요즘 언어들은 디자인 패턴 요소들을 포함해서 언어가 설계되는 경우가 많다.
• REST API는 모든 기기에서 호응 가능한 데이터만을 주고 받을 수 있도록 제작한 API
• 강력한 새로고침 → ctrl+shift+R
• res.status(상태코드) (ex. 200/304/404) -> 상태코드에 대한 응답
• REST API의 핵심은 에러 핸들링

app.use(function (err, req, res, next) {
  console.error(err.stack);
  res.status(400).send({message: '잘못된 접근입니다'})
});

• Cors (Cross Origin Resource Sharing) : 외부 라이브러리에서 접근 허용
• npm i cors cors 설치

app.use(cors({ // app 단에서 header 를 설정하여 접근 제어를 허용
  origin: '*',
  methods: ['GET', 'POST','DELETE', 'UPDATE', 'PUT', 'PATCH']
}));

• Hash 함수: 임의의 길이를 갖는 임의의 데이터에 대해 고정된 길이의 데이터로 매핑하는 함수 -> 비밀번호의 암호화
• 쿠키(Cookie): 사용자 정보를 사용자의 컴퓨터에 직접 저장 (브라우저가 종료되어도 유지)
  res.cookie(‘쿠키 이름’, ‘쿠키 값’) : 쿠키 저장
• 세션(Session): 사용자 정보를 서버에 저장하고 관리 (브라우저가 종료되면 유지 X)
  세션의 동작 방식
  1.클라이언트가 서버에 접속 시 세션 ID를 발급 받는다.
  2.클라이언트는 세션 ID에 대해 쿠키를 사용해서 저장하고 가지고 있다.
  3.클라이언트는 서버에 요청할 때, 이 쿠키의 세션 ID를 같이 서버에 전달해서 요청
  4.서버는 세션 ID를 전달 받아서 별다른 작업없이 세션 ID로 세션에 있는 클라언트 정보를 가져와서 사용한다.
  5.클라이언트 정보를 가지고 서버 요청을 처리하여 클라이언트에게 응답한다.
• 보안 면에서는 세션이 쿠키보다 우수하며, 속도는 쿠키가 세션보다 우수하다.
• 하지만 세션은 웹 브라우저가 아닌 경우에는 활용하기 부적합. 따라서 JWT를 사용한다.
• JWT (Json Web Token) : 서버와 클라이언트 간 정보를 주고 받을 때 Http 리퀘스트 헤더에 JSON 토큰을 넣은 후 서버는 별도의 인증 과정없이 헤더에 포함되어 있는 JWT 정보를 통해 인증
• JWT 구성
  header - 토큰 타입, 데이터 서명 방식
  payload - 데이터
  signature - 헤더와 페이로드의 전자서명
• SMTP (Simple Mail Transfer Protocol) : 메일 전송을 구현한 서버
• Nginx : 웹 서버 소프트웨어, HTTP 요청을 받아 파일이나 프로그램 실행 결과를 HTTP 응답으로 보내주는 소프트웨어
• Node.js는 HTTP 요청을 수신하고, 응답하는 기능이 있기 때문에 웹 서버 소프트웨어 없이도 자체적으로 동작이 가능하다. 하지만, production-level 서비스를 구축하기 위해서는 웹 서버 소프트웨어가 필수적으로 필요하다.
• reverse-proxy : HTTP 요청을 다른 서버에 전달

pug 문법

• HTML 닫기 태그 없이 들여쓰기로 블럭을 구분
• 들여쓰기한 이후에 공백까지가 태그로 적용
• 전달받은 변수는 = 을 이용해서 사용
• id나 class는 태그 뒤에 이어서 바로 (#),(.)와 함께 작성
• 속성은 ()을 이용해서 작성
• 여러줄 입력할 때는 ( | ) 로 작성

html
  head
    title= title
  body
    h1#title 안녕
  	a.link(href="/") 홈으로
    p
      | this is example1
      | this is example2
      | this is example3

• each ~ in 표현식으로 주어진 배열의 값을 순환 가능
• if, else if, else를 이용해 조건에 따라 작성 가능

each item in items
  if item.name == 'Best'
  	h1 Best items
  else
 	h1= `${item.name}`

• block을 포함하여 템플릿을 선언하면 layout으로 사용 가능
• layout을 extends 하면 block 부분에 작성한 HTML 태그가 포함됨
• 반복되는 웹사이트의 구조를 만들어두고 extends 하면 편리하게 가져다 쓸 수 있음

// layout.pug
html
  head
    title= title
  body
  	block content
------------------
// main.pug
extends layout
block content
h1 Main Page

• 변수에 값 저장하듯이 자주 반복되는 구문을 작성해두고 include 하여 사용 가능
• 일반적인 텍스트 파일도 include 하여 템플릿에 포함 가능

h1= title
// main.pug
extend layout
block content
	include title
		pre
			include text.txt

• pug와 express 연결

// app.js
app.set('views', path.join(__dirname, 'views'); // 폴더 경로 지정
app.set('view engine' , 'pug'); // 확장자 지정