choco 설치와 mkcert 설치 후 React 적용(with. React + TypeScript)

mkcert를 설치해야 하는 이유? 개인 프로젝트 진행 중에 쿠키를 사용해야 하는데 https만 사용 가능한 옵션을 사용했기 때문에 계속 쿠키가 저장이 안 되고 있다는 생각이 들었다. 그래서 검색의 방향을 바꿔서 https 설정을 먼저 진행하고 다시 쿠키 저장을 테스트해보려고 한다. 이걸로 며칠을 붙잡고 있는지 모르겠다..😅 다만 mkcert를 설치하기 위해서 choco를 설치해야 했기 때문에 한 번에 정리하려고 한다. 다들 brew 맥용으로 설치하는 방법이 많았지만 나는 현재 윈도용이기 때문에 choco를 설치해야 했고 설치는 금방 했던 것 같다. 만약 이 글을 보고 따라 하시려고 하는 분들은 용기를 가지고 그대로 따라 하면 10분 만에 완료할 수 있다!

 

1. 윈도우 검색창에서 Windows PowerShell 검색 후 관리자 권한으로 실행

다들 윈도우  검색창은 알 것이라고 판단하여.. 검색창에 Windows Powe... 여기까지만 쳐도 사실 나오기 때문에 다 안쳐도 된다! 다만 바로 실행하는 게 아닌 마우스 오른쪽으로 클릭하여 관리자 권한으로 실행해줘야 한다! 꼭!

 

2. 실행 정책 확인

PowerShell을 관리자 권한으로 실행했다면 아래 명령어로 실행 정책을 먼저 확인해줘야 한다.

 

Get-ExecutionPolicy

 

위에서 AllSigned 가 아니라면 전부 아래 명령어로 실행 정책을 변경해줘야 한다. 아래 명령어를 실행한다면 이미지처럼 긴 안내 문구들이 나오는데 y를 입력해 주면 된다. 사실 여기서부터 이거 맞아? 이러면서 또 검색을 엄청 했는데 정상적으로 나오는 안내 글이니 두려워하지 말고 y 입력해 버리자!

 

Set-ExecutionPolicy AllSigned

 

 

3. Chocolatey 설치

2번까지 완료되었으면 본격적으로 Chocolatey를 설치해 주면 된다. 아래 명령어로 실행하면 되고 불안하다면 공식사이트도 확인해 보면 좋을 것 같다. 난 또 맞나?라는 생각에 공식홈에 들어가서 복사해 왔기 때문이다..

 

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

 

 

여기까지 하고 choco를 입력하여 아래처럼 나온다면 정상적으로 설치 완료된 것이다!

 

 

+ 공식 사이트

https://chocolatey.org/install

Installing Chocolatey

 

4. mkcert 설치

choco를 설치했다면 이제 mkcert를 설치해야 한다. 이걸 설치하기 위해 choco를 설치했으니까..! 아래 명령어가 설치하는 명령어이다.

 

choco install mkcert

 

 

5. 인증서 생성 및 키파일 생성

이제 mkcert까지 설치가 완료되었고 아래 명령어를 입력해서 인증서를 생성해 주자! 여기서 아마.. 팝업창이 하나 뜨는데 "예" 버튼? 만들겠다는 버튼을 클릭하면 된다. 이 부분은 캡처를 하지 못해서 연회색 팝업창만 뜬다면 무조건 예쓰!라고 생각하면 된다.

 

mkcert -install

 

 

그다음에 키 파일을 생성해 주는 아래 명령어를 실행해서 만들어줘야 한다. 그러면 해당 경로의 파일에 localhost.pem, localhost-key.pem 2가지 파일이 생성되어 있다.

 

mkcert localhost

 

 

6. 현재 프로젝트에 적용하기!

이제 5번에서 만든 키파일 2개를 현재 프로젝트 폴더로 옮겨준다. 다시 풀어서 말하자면 현재 VSCODE로 개발 중이기 때문에 VSCODE를 켜서 내가 작업하고 있는 프로젝트를 열어서 src와 동등한 위치로 ssl 폴더를 만들어서 넣어주면 된다.

(예시 폴더 경로 : deGoProject > client > ssl > localhost.pem, localhost-key.pem)

 

 

그다음에 package.json 파일의 script 부분에 아래 코드를 추가해 준다.

 

"start:dev": "set HTTPS=true&&set SSL_CRT_FILE=ssl/localhost.pem&&set SSL_KEY_FILE=ssl/localhost-key.pem&&npm run start",

 

 

마지막으로 해당 파일들은 중요한 정보여서. gitignore 파일에 추가해줘야 한다!

 

 

여기까지 하면 정말 끝! 이제 다시 쿠키가 제대로 저장되는지 테스트해 보러 가보자! 

 

+ 이후 한가지 알게 된 점은 쿠키의 secure 옵션이 true일 경우 https를 사용하는 경우에만 쿠키를 사용할 수 있다고 하여 위 내용을 설정했지만 localhost의 경우는 예외라고 해서 secure 옵션을 true를 해도 http://localhost에서 사용할 수 있는 것 같다..! 그래도 로컬호스트에서 https 설정을 할 수 있는 방법을 알게 되어서 공부는 되었다!