brunch

매거진 개발노트

You can make anything
by writing

C.S.Lewis

by April Aug 10. 2022

이건 Windows에서 어떻게 셋팅하지?

맥에서 편하게 사용하던 것들을 윈도우즈에 셋팅해 실행하기까지


원래 개발 노트북으로 맥을 사용하는데, 사정이 생겨 잠깐 윈도우 노트북으로 사용하게 되었다. 그러다 보니 윈도우 환경에 맞게 다시 개발 환경을 셋팅해줘야 했고, 구글신의 도움과 삽질 끝에 윈도우 환경에서 프로젝트를 실행할 수 있게 되었다. (다행��)


혹시 나와 비슷한 상황이 있을까 봐 또는 블로그에서는 죄다 맥으로 해서 윈도우에서는 어떻게 따라할지 막막한 분들을 위해 적지만 그래도 내용을 정리해두면 좋을 것 같아 작성해보려고 한다.





mkcert

mkcert는 간단하게 로컬에 신뢰할 수 있는 인증서를 만드는 도구이다. localhost를 https로 개발할 수 있도록 도와준다. 설치 방법은 mkcert github에 나와있다. github을 참고해도 좋고, 아래 작성한 내용대로 진행해도 좋다.


1. PowerShell을 관리자 권한으로 실행

mkcert를 설치하려면 chocolatey 가 필요한데, 이를 설치하기 위해 PowerShell을 관리자 권한으로 실행한다.


2. chocolatey 설치

chocolatey는 npm처럼 패키지를 관리해주는 역할을 한다. 설치하는 방법은 chocolatey 공식 가이드 문서를 참고하였다.


3. mkcert 설치


4. mkcert를 이용해 CA 및 인증서/인증키 생성

mkcert를 이용해 로컬에 CA를 만들고 원하는 도메인의 인증서를 생성한다.




NVM

NVM(Node Version Manager)은 Node.js의 버전을 관리하는 도구이다. 개발을 하다 보면 라이브러리 등의 버전 호환으로 인해 Node.js의 버전을 낮춰서 사용하기도 하는데, 이럴 때 유용하게 사용할 수 있는 게 바로 NVM이다.


윈도우에서 NVM을 사용하려면 직접 다운로드해 설치하거나 위에서 설치했던 chocolatey를 사용하는 방법이 있다.


방법 1) 직접 다운로드

아래 링크를 클릭해 원하는 버전을 클릭하고, Assets 하위에 있는 nvm-setup.exe을 눌러 다운로드하면 인스톨러가 실행된다.


방법 2) chocolatey

chocolatey 사이트에 들어가면 지원하는 패키지 목록을 확인할 수 있다. nvm 또한 지원하고 있어 chocolatey로 간편하게 설치할 수 있다.


설치 후 원하는 nvm에서 제공하는 node.js의 버전 중 원하는 버전을 설치해 사용하면 된다.




노드 환경 변수 설정

보통 실무에서는 env 값을 이용해 development, production 등의 환경 등에 따라 스크립트 명령어를 다르게 구성한다.


npm start를 하면 윈도우에서는 다음과 같이 에러가 발생한다.

NODE_ENV 은(는) 내부 또는 외부 명령 실행할 수 있는 프로그램 또는 배치 파일이 아닙니다


이 방식은 맥, 리눅스 계열에서는 작동하지만 윈도우에서는 인식이 되지 않는다. 그렇기 때문에 cross-env를 이용해 환경변수를 동적으로 설정할 수 있도록 해주어야 한다.


아래 사이트를 참고해 cross-env를 설치하고, NODE_ENV 앞에 cross-env를 셋팅해준다.


만약 스크립트 실행마다 build 폴더 삭제가 필요하다면?



hosts 변경하기

맥에서 hosts를 변경할 때는 Gas Mask를 사용했었는데, 윈도우는 딱히 그런 프로그램이 없는 듯했다. 특정 도메인 주소로 로컬에서 개발 테스트가 필요했기 때문에 어떻게 설정하는지 찾아보았다. 그냥 간단하게 관리자 모드로 편집기를 열어 파일을 직접 변경하면 됐다.


1. 관리자 권한으로 메모장 또는 VSCode 실행

윈도우 검색바에서 메모장이나 VSCode 등 본인이 사용하기 편한 편집기를 검색해 관리자 권한으로 실행한다.


2. hosts 파일 수정

C: > Windows > System32 > drivers > etc > hosts 파일을 연다. 파일을 열면 아래와 같이 기본 내용이 작성되어 있다. 테스트하길 원하는 도메인을 입력해 저장한다. 


매거진의 이전글 react-window 를 이용해 성능 최적화하기

작품 선택

키워드 선택 0 / 3 0

댓글여부

afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari