개발자를 할 때 프론트앤드를 선택하면 백앤드를 공부안해도 괜찮다고 생각할 수 있는데 어느정도 깊이 들어가려하면 백앤드와 연결되어야 하는 일이 많다. 일이 잘못되면 내 잘못인지 백앤드 잘못인지 알아야한다. 연차가 쌓일수록 더 중요하니 집중해보자!!

cors가 뭘까

CORS (Cross Origin Resource Sharing)
public api를 쓰려할때 cors가 no인 api는 가져올 수 없다.
왜 오픈 api를 쓸 수 없게 해놨을까
cors 에러
→openAPI업체 측에서 보안상아의 이유로 아무 브라우저나 허용하지않게 되면, 브라우저에서 못받게 되고 cors에러를 보게 된다.

sop정책

same-origin-polich : 자신과 동일한 도메인만 서버로부터 데이터를 요청하여 받을 수 있도록 하는 정책 ( 프론트와 백이 같은 사이트 주소여야지만 데이터를 주고받고 할 수 있다.)
같은 브라우저에서만 이동이 가능한 건 너무하다 라는 생각에
cors정책으로 크로스로 데이터를 보낼수도 있게 한다.

preflight(서버에서 어떤 메서드와 어떤 header 를 허용하는지 확인)에서는 options라는 메소드를 통해서 요청이 나가면 받아오는게 get요청, post요청 등 가능한 데이터 요청을 알려주면 그걸로 받아온다.
여기에 하나 같이 오는게 있는데 cors 가 true인지가 그것이다.
이건 백앤드에서 막거나 오픈할 수 있다.
브라우저에서 막는다.

서버 : 24시간 켜져있는 서버 프로그램이 동작하고 있는 컴퓨터
서버 프로그램은 왜 24시간 켜져 있나요?
→ 접속을 기다리기 때문입니다. 바로 바로 응답을 주려면 24시간 켜져 있어야 합니다.

프록시 서버(Proxy Server)란?

클라이언트 대신에 인터넷상의 다른 서버에 접속하는 서버
브라우저가 아니기에 cors와 무관하게 우회해서 받아오는게 가능하다.
백앤드뿐만 아니라 모바일앱(설치)에서 api를 요청할 수 있음.
프록시서버 만들기 과제도 가끔 나온다.
웹팩을 이용한 웹팩프록시서버도 만들 수 있다.
백앤드로도 활용할 수 있다.
장점: 캐시를 이용해 내용을 저장해 두기 때문에 캐시 안에 정보 요청에 대해서는 전송시간을 절약함과 동시에 불필요한 외부와의 연결을 하지 않아도 된다는 장점을 갖게 된다. 또한 외부와의 트래픽을 줄이게 됨으로 네트워크 병목형상(컴퓨터 또는 네트워크 리소스에 의해 데이터 흐름이 제한되는 불연속 조건)을 방지하는 효과도 얻을 수 있게 된다.

cors정책이 그럼 왜 필요하지...
누구나 프록시서버를 만들어서 우회할 수 있는데...

cors 기초

cors 기본

(cors 허용)

(cors 금지)

cors 중급

Proxy Server로 우회하기

사실 cors는 브라우저를 보호하기 위함이다.
로그인을 하면 로그인 증표를 저장하는 쿠키라는 저장공간에 저장하고, 백앤드에 로그인 증표를 보낸다.

만약 헤커가 네이버와 비슷한 네이비라는 사이트에 유저를 들어오게끔 유도해서 로그인하게 하면 네이버 백앤드에 로그인증표를 보내는데 비슷한 네이비에서 게시물 삭제 요청하면 웹브라우저 방식에 따라 로그인증표가 같이 딸려가면서 지워진다.
실제로 이런 해킹공격방식을 CSRF라고 한다.

이를 방지하려고 cors가 금지가 되면 증표가 날아가지 않는다.

백앤드

프론트에서 html을 받아 브라우저에서 출력하고 백앤드로 정보를 보내 디비에 저장했다가 요청하면 꺼내서 출력한다.
브라우저는 관리자사이트, 대표사이트, 오너사이트 등등 여러개가 있는데 백앤드는 하나다.

웹서비스 구조

웹서비스는 Front-end 서버, Back-end 서버 그리고 DataBase로 이루어져있다.

DataBase(DB)의 종류

DataBase란?
데이터 베이스란 데이터를 담아두는 저장소

DB의 종류를 크게 2가지로 나누면 SQL, NoSQL 로 나뉜다.

SQL 방식

데이터들을 DB안에 액셀과 비슷한 표에 정리해두는 방식이며 엑셀같은 표를 테이블이라고 하고 행은 row, 열은 column 이라고 한다.

SQL방식은 NoSQL방식과달리 각각의 표 사이에 관계성을 부여할 수 있습니다. 관계성을 부여할 수 있기때문에 mapping해주는 툴을 ORM을 사용한다.

또한 관계성을 부여하는 데이터베이스를 관계형 데이터 베이스 라고 하며, 대표적으로 Oracle, MySQL, Postgres 이 있다.

NoSQL 방식

서류 봉투에 document를 모아두는 방식으로 서류봉투는 컬렉션이라 하고, 서류는 도큐먼트, 정보가 적히는 곳을 필드라고 한다.
NoSQL 방식을 사용하는 데이터베이스에는 대표적으로 MongoDB와 FireBase가 있다.

데이타조회는 백앤드에서 디비에 연결한 후 명령어를 디비에 보내면 명령에서 맞는 데이터를 준다.

select 제목, 내용, 작성자 from Board where 번호=1
이걸 sql 쿼리문 이라고 한다.
이런 쿼리문은 복잡하기 때문에 요즘은 ORM, ODM을 설치해주어 쿼리문을 대신해준다.
Board.find({번호})

백앤드 서버

노드js는 자바, 파이썬, 자바스크립트 언어를 사용할 수 있고, 실행이 브라우저에서 되는게 아닌 노드.js가 실행된다.

vscode에서 찍어보니 정말 브라우저 없이 실행이 되는 걸 알 수 있다.

Postgresql에 접속해 데이터 저장, 조회가 가능해짐. 그럼 typeORM을 설치해야함

타입스크립트를 브라우저아닌곳에서 실행시키기 정말 어렵당...까다로운 짜식...