Vite 기반 번들링 환경 구축과 타입 안정성을 위한 TS 마이그레이션

번들링 환경 구축

Vite를 사용할 예정인데, 그러려면 일단 Node.js부터 설치해야 한다.

*Node.js가 설치되어 있는지는 터미널에서 node -v로 간단하게 확인 가능하다.

공식 사이트에서 LTS 버전 다운로드하고 설치하면 된다.
참고로, 설치 과정에서 npm도 같이 깔리니 따로 설치할 필요는 없다.
설치가 끝나면 node -v, npm -v 찍어서 확인하자.

아마 높은 확률로 이렇게 뜰 텐데, PowerShell 보안 정책상 npm 실행이 차단된 상태라고 볼 수 있다.

Windows PowerShell은 .ps1 스크립트 실행을 막아서 실수나 악성 코드 실행을 방지하려고 한다. npm.ps1도 일종의 스크립트이기 때문에, 기본 정책인 Restricted에서는 사용할 수 없다.

 

관리자 권한으로 실행해 다음 명령어를 입력하자.

Set-ExecutionPolicy RemoteSigned

RemoteSigned는 로컬에서 만든 스크립트는 허용하되, 인터넷에서 받은 스크립트는 서명된 것만 실행한다는 정책이다.

대충 이런 무서운 문구가 나올 텐데 어떤 의미인지 간단하게 알아보자.

 

실행 정책 세 가지는 아래와 같다.

보안과 관련된 사항이므로 보안 위험 컬럼을 추가했다.

실행 정책	설명	보안 위험
Restricted (기본)	모든 스크립트 실행 차단	매우 안전, 너무 제한적
RemoteSigned	로컬 스크립트는 허용, 외부 스크립트는 서명 필요	일반 개발자에겐 안전
Unrestricted	무엇이든 실행 가능	위험 (절대 비추천)

 

현재 우리가 사용할 정책은 RemoteSigned인 것이고, 대체로 안전하긴 하나 인터넷에서 받은 .ps1 파일은 언제나 실행 전 꼭 확인해 보는 습관이 필요하다. (악성 스크립트 주의)

Set-ExecutionPolicy Restricted

찝찝하다면 작업 후에 다시 Restricted로 바꾸는 방법도 있다.

프레임워크 선택창 예쁘다.

프로젝트 이름 그대로 사용해 주었고, 어차피 타입스크립트로 마이그레이션 할 것이기 때문에 TS 템플릿을 사용해 초기화하였다.

 

아! 그리고 놀라운 사실!

tree /f

해당 명령어를 입력하면 지금 폴더의 트리 구조를 계층적으로 보여준다.

/f 옵션은 파일까지 보여달라는 의미다.

---

새로운 이슈 발생

결국 나는 전통적인 방법 대신 모던한 개발 환경을 구축하기로 했다. (Vite+TS)

 

Vite 템플릿을 사용한 익스텐션 개발로 전환하면서, 기존 where-was-i 리포지토리를 어떻게 관리할 것인지가 새로운 고민거리가 된 셈이다.

 

선택 사항은 크게 두 가지다.

1. 기존 리포지토리를 살린다.
2. 기존 리포지토리를 죽이고 새로운 리포지토리를 생성한다.

기존 리포지토리를 살리면 조금 혼란스럽지만 작업 히스토리를 유지할 수 있다.
기존 리포지토리를 죽이고 새로운 리포지토리를 생성하면 확실히 분리되어 좋긴 하겠지만 히스토리를 유지할 수 없다.

 

결론은 where-was-i 리포지토리를 그대로 유지하되, 그 안에 where-was-i-vite 템플릿을 만들어 기존 코드를 이전하는 방식을 택했다. 히스토리도 그대로 유지할 수 있고 나름대로 새로운 템플릿과 기존 코드를 분리하여 관리할 수 있기 때문이다.

 

물론 이전이 완료되면 어차피 템플릿 안에서 개발하고 배포로 이어질 것이기 때문에 기존 코드는 존재할 이유가 없을 듯하여 전부 제거할 예정이다. 그걸 기록하는 것 또한 의미 있다고 보는 관점이다.

 

다만 한 가지 마음에 걸리는 사항이 있다.

 

Vite 템플릿으로 전환하는 것도 브랜치를 따서 관리해야 할 것 같은데, vite-setup 브랜치를 따자니 기존 브랜치 전략에 어긋나는 느낌이다. 그렇다면 feature/vite-setup? chore/vite-setup? 뭐가 맞는 건지 모르겠다.

---

브랜치 전략 재고

> 템플릿 생성 작업 브랜치

1. 기존 환경에서 템플릿을 새로 생성하고 기존 코드를 이전하는 작업은 큰 변경 사항이다.
2. 별도의 브랜치로 feature/vite-setup 브랜치를 사용하자.
3. Vite 템플릿을 생성하고, 기존 코드를 템플릿에 맞게 이전한 뒤, 최종적으로 템플릿 기반에서 계속 개발할 수 있도록 세팅한다.

충분히 고민한 것 같다. 정답에 가까운지는 모르겠으나, 일단 해보자!

Remove-Item -Recurse -Force .\where-was-i

이름이 같아 혼동할 우려가 있는 기존 템플릿부터 제거한 뒤, 새로운 템플릿을 생성했다. PowerShell을 통해 제거한 것이고, 다른 환경이라면 명령어가 달라질 수 있다. PowerShell 기준으로, ls를 입력해 삭제 결과를 확인할 수도 있다.

---

TS 마이그레이션

코딱지만한 프로젝트인데도 굉장한 피로감을 느꼈다.

아무래도 이렇기 때문에 기업에서 함부로 마이그레이션 할 수 없는 게 아닐까 싶다.

 

변환 과정을 상세히 기록하고 싶지만, 굉장히 지친 관계로 궁금한 분들은 깃허브를 참고해 주길 바란다.

그러라고 깃허브 관리하는 것이기도 하고, 나름 신경 써서 커밋했으니 말이다.

GitHub - funczun/where-was-i

---

이제 진짜 모든 준비를 마쳤으니, 다음에는 기능 구현 위주로 들어갈 듯하다.

오히려 기능 구현이 쉬운 듯한 느낌이다.

 

다음 주가 시험이라 조금 늦어질 수도 있다.

그래도 힘내자!🔥