노마드 코더/유튜브 클론

[JavaScript, Node.js] 유튜브 클론 정리 7장 (7) - Cookie, Env File

LooanCheong 2023. 5. 13. 00:22
반응형

머리글

이번 시간에는 쿠키에 대해 조금 더 자세히 알아보고 env 파일에 대해서도 알아보자.

Cookie

쿠키에는 다양한 프로퍼티가 존재한다.

우선 Secret이다.
secret는 우리가 쿠키에 사인할 때 사용하는 string이다.
쿠키에 사인을 하는 이유는 backend가 쿠키를 줬다는 것을 보여주기 위함이다.
또한 session hijack이라는 공격 방지를 위함이다.
따라서 Secret는 길고 강력하고 무작위성을 지녀야 한다.

다음은 Domain이다.
domain은 말 그대로 이 쿠키를 만든 backend가 누구인지 알려준다.
우리가 인터넷 사이트를 도메인이라고 하는 것과 같은 이치다.
쿠키는 domain에 있는 백엔드로만 전송된다.
예를 들어 지금 우리 사이트의 domain은 localhost 이기 때문에 localhost의 백엔드로만 쿠키가 전송된다.

그리고 Expires가 있다.
Session이라고 적힌 경우에는 만료 날짜가 명시되지 않은 상태이다.
이 경우 세션을 닫으면 쿠키는 만료된다.
닫지 않는 경우에는 계속 살아있다.

Max-age도 알아보자.
말 그대로 언제 세션이 만료되는지를 알려준다.
이 또한 설정값으로 변경이 가능하다.
이 항목을 통해 쿠키를 얼마나 유지할지 설정이 가능하다.
유저가 어느 주기로 로그아웃 될 지 정할 수 있다.

이제 우리의 string을 보호하기 위해 사용하는 env 파일에 대해서 알아보자.

.ENV

지금 우리의 코드를 보면 쿠키의 시크릿이 노출되어 있고,
DB의 url도 노출되어 있다.

이는 보안상 매우 좋지 못하므로 이를 안전하게 작성할 방법이 필요하다.

따라서 우리는 환경변수 파일을 만들어줘야 한다.

'.env'라고 파일을 생성하면 된다.
그리고 Git에 올리는 걸 방지하기 위해 '.gitignore'에 추가해 주자.

관습적으로 env 파일에 추가하는 모든 string은 대문자로 적어줘야 한다.
다음과 같이 작성해 보자.

COOKIE_SECRET=쿠키 Secret 내용
DB_URL=DB 주소

이런 식으로 파일을 작성해 주자.

보통 env 파일에 비밀로 해야 하는 url이나 API key를 넣어준다.

그리고 기존의 노출되어 있던 문자를 수정해 주자.

...
store: MongoStore.create({ mongoUrl: process.env.DB_URL }),
...

이런 식으로 'process.env.이름' 의 형태로 사용이 가능하다.

그런데 지금처럼 작성하고 사용하려 하면 제대로 동작하지 않는다.
그래서 우리는 추가로 패키지를 설치해주어야 한다.

npm i dotenv

이 패키지는 우리의 env 파일을 읽고 각 변수들을 process.env 안에 넣어준다.

이 패키지는 우리의 앱 안에서 최대한 앞부분에 위치해야 한다.
최대한 빨리 로드해야 문제없이 사용이 가능하기 때문이다.

따라서 우리의 앱 중 가장 먼저 실행되는 init.js의 가장 앞부분에 넣어주자.

import "dotenv/config";
import "./db";
...

이런 식으로 작성해 주면 문제없이 작동한다.

마무리

이번 시간에는 쿠키의 프로퍼티와 env 파일에 대해서 알아보았다.

다음 시간에는 Github 로그인을 구현해 보자.

반응형