공부하는 비오

왜 쿠키와 세션을 사용하는가를 알려면 HTTP의 특징을 알아야 한다. HTTP 특징 | 비연결지향 (Connectionless) 클라이언트가 서버에 요청을 보내면서 연결을 열고, 서버가 클라이언트에 응답을 보내면서 연결을 끊는다. | 무상태(stateless) 프로토콜 클라이언트와 서버 간의 어떠한 상태(데이터)도 유지하지 않는다. 계속해서 연결을 유지하지 않는 것은 리소스 낭비를 줄일 수 있지만, 통신할 때마다 새로 연결해야 하기 때문에, 클라이언트는 매 요청마다 인증을 해야한다. 이전 요청과 현재 요청이 같은 사용자의 요청인지 알기위해서는 상태를 유지하는 것이 필요하다. HTTP에서 상태를 유지하기 위해 필요한 기술이 쿠키와 세션이다. 쿠키 쿠키에는 여러종류가 있지만, 쿠키와 세션을 비교할 때 사용하..

이론공부 2020. 12. 28. 23:53

일단 쿠키와 세션이 왜 필요한지를 살펴보자. 쿠키 로그인을 하고난 후, 브라우저와 서버에서 같은 유저정보를 가지고 있어야한다. 로그인 후, 포스트를 작성하거나 덧글을 작성할 때, 유저정보와 함께 서버로 요청해야하기 때문이다. 그러므로 로그인을 할 때, 누가 로그인 했는지를 브라우저에 보내주어야 한다. 실제정보를 보내주면, 비밀번호가 그대로 노출되므로 보안에 취약하다. 그러므로 실제정보대신 암호화한 토큰을 브라우저로 보내준다. 이 토큰은 브라우저에 저장되는데, 이를 쿠키고 부른다. 브라우저에서는 이 후 요청을 보낼 때, 쿠키와 함께 요청한다. (쿠키를 자동으로 요청헤더에 추가하여 요청) 하지만 보통 로그인을 할 때는 쿠키를 사용하지 않는다. 브라우저에서 접근이 가능하고 변조가 가능하기 때문. 로그인과 같이..

Node/Express 2020. 12. 26. 23:34

환경변수를 참조할 수 있게 만들어주는 라이브러리 dotenv 를 설치하자. 사용법은 간단하다. 환경변수를 사용하고자하는 파일에 다음과 같이 설정해주면 된다. dotenv.config( ); 환경변수로 사용할 자리에는 proccess.env.{변수이름} 을 사용하면 된다. 환경변수를 사용하면 주의해서 관리해야할 코드들(비밀번호같은 것들)을 .env 파일 하나에서 관리하면 된다. 다른 코드들이 해커에게 해킹당해도, .env파일만 잘 관리한다면 보안에 큰 문제가 없다. (물론 env파일이 해킹당하면 보안문제가 생기지만...)

Node 2020. 12. 26. 21:57

로그인을 설정하기 위해 passport 라이브러리를 사용해보자. passport와 poassport-local을 설치한다. passport: sns 로그인을 한 번에 관리해주는 라이브러리 passport-local :사용자가 만드는 로그인을 관리해주는 라이브러리 (이 라이브러리를 사용해 email 로그인한다.) back 루트 디렉토리에 passport 폴더만들기 index.js 패스포트 설정파일만들기 local.js 로컬설정파일 만들기. app.js 에서 불러와서 설정하기. app.js에서 모든 기본 설정을 한다. index(passport)를 불러와 호출하면 기본 설정이 끝난다. 이 상태로 서버를 실행하면 app crashed 오류가 발생한다. 오류를 읽어보면 LocalStrategy는 유효한 콜백함수..

Node/Express 2020. 12. 25. 23:02

사가를 사용하여 서버에 비동기 요청을 보낼 때, 다음과 같은 코드일 것이다. 수많은 요청들이 있을 텐데, 개발을 할때는 localhost를 사용하지만 배포 할때는 실제 주소를 사용할 것이다. 이를 일일히 다 바꿔주는건 귀찮을 뿐더러, 실수로 빠트리는 코드가 있을 수도 있다. 하지만 사가에서 axios를 이용하여 기본 url을 설정해줄 수 있다. /saga/index.js axios.defaults.baseURL = '기본 URL'; 이후 코드는 이렇게 바뀐다. 기본이 되는 url 이후 주소만 적어주면 된다.

Redux 2020. 12. 25. 21:36

프론트엔드 개발자라면, 자주 마주칠 CORS 에러. CORS는 일종의 보안정책이다. 해커가 마음대로 서버에 접근하지 못하도록, 다른도메인에서 접근하지 못하게 브라우저에서 미리 막아둔다. 즉 CORS에러는 다른도메인으로(3060에서 3065로)보낸 요청을 브라우저가 차단하기 때문에 생긴다. 브라우저에서 다른 도메인으로 보낼 때에만 생기는 문제이기 때문에, 프론트서버(3060)에서 백엔드서버(3065)로 보낼때는 문제가 안생긴다. 브라우저를 변조하면 cors에러가 안걸리지만... 용자의 브라우저를 변조할수없다^^(그건해킹이니까) 그러므로 다른 도메인으로(3060에서 3065로) 보낼 수 있도록 해결해줘야한다. CORS 해결하는 방법으로는 두 가지가 있다. 1. 프록시방법 2. 백엔드서버에서 헤더를 만들어주는..

Node/Express 2020. 12. 25. 21:08

현재 사용하고 있는 구성요소는 네개다. 브라우저(client):3060 - 프론트서버(Next):3060 - 백엔드서버(express):3065 - DB(MYSQL):3306 브라우저랑 프론트서버는 같은 프로그램이다. (포트가 같으므로) 브라우저는 특별히 화면을 보여주기 위해서 구동하는 프로그램이다. 회원가입을 할 때의 흐름을 이 네가지 구성요소와 함께 생각해보고, 백엔드서버를 구성해보자. [브라우저] 회원가입을 위해 data를 입력한 후, 회원가입 버튼을 누른다. [프론트서버] signup request 리듀서가 실행되고, saga에서 action.data로 받아온 값이 백앤드서버로 전달된다. 즉, signUpAPI의 매개변수인 data는 signUp에서 받아온 action.data이다. 서버 기본설정..

Node/Express 2020. 12. 25. 20:41

사용자가 입력한 비밀번호를 그대로 저장한다면, 보안에 문제가 생길 수 있다. bcrypt의 암호해싱기능을 사용하여 문제를 해결해보자. npm 을 이용해 bcrypt를 설치한다. 불러오기. bcrypt.hash(암호화할내용, 암호화단계); 사용법은 간단하다.bcrypt 내장메서드인 hash를 사용하면 된다. 암호화단계는 숫자이다.숫자가 높을수록 암호해독이 어려워지나 암호화하는데 시간이 걸린다. 적정수준을 찾아 넣어주면된다. 암호화되어 DB에 저장된 것을 확인할 수 있다.

Node 2020. 12. 25. 17:46