[TypeScript] 타입스크립트 기초 시작..전부터 문제 해결

※본 포스팅은 개인 학습을 목적으로 작성된 것이므로 정확하지 않은 정보가 포함되어 있을 수 있음을 참고 부탁드립니다.

---

 

부트캠프를 하면서 실전을 같이 하게된 팀원분들과 JS 코드를 TS로 바꿔보기로 했다.

사전 지식이 없으니 인프런의 타입스크립트 기초 강의를 각자 듣고, 2주 이내로 완성할 것으로 예상된다. (아니 희망..)

타입스크립트는 핫하고 트렌디하다(?) 정도로 알고 주변에서 많이 들어보기만 했다.아는게 없어서 강의를 듣기 전까지는 감이 안잡혔는데, TS를 공부하면서 JS에 대한 개념도 잡을 수 있을 것 같다.사실 강의 내용이 어렵지는 않은데(어려워도 쉽게 알려주시는듯), git clone을 했음에도 진행에 어려움을 겪었던 케이스가 몇개 있어서 정리해 보려고 한다.

 

일단 강의에 앞서 아래와 같이 필요한 플러그인들을 알려주신다.

처음 보는 것들도 있는데, 나중에 포스팅하여 따로 정리해둬도 좋을 것 같다.

 

 

1. Live Server 실행 에러

 

그 중에 Live Server라는게 있는데, 이게 어떤건가에 대해서는 아래 블로그에 잘 나와있다.

https://jhnyang.tistory.com/482#:~:text=Live%20Server%EB%9E%80%20%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80&text=%EB%82%B4%EA%B0%80%20%EC%BD%94%EB%93%9C%EB%A5%BC%20%EB%B3%80%EA%B2%BD%ED%95%A8%EC%97%90,%EC%9D%84%20%EB%B0%94%EB%A1%9C%20%ED%99%95%EC%9D%B8%ED%95%A0%20%EC%88%98%20%EC%9E%88%EC%8A%B5%EB%8B%88%EB%8B%A4.

[VSCode 라이브서버] 웹페이지 실행 결과 바로 확인 가능한 Live Server 설치 및 사용법, 한글깨짐

 

설치는 어렵지 않았지만, view의 코드들이 담겨있는 index.html을 실행하면 계속 아래처럼 페이지가 작동하지 않는다는 에러가..

🤔🤔🤔🤔🤔

근데 뭔가 에러 느낌이 아예 로컬이 돌아가지 않는 느낌.. ㅎr

처음에는 모듈이 문제인가 해서 뭐를 설치해야하나? 라고도 생각하고,

Live Server 플러그인을 설치하고도 서버가 없어서 그런가? 라고 생각해서 이것 저것 import도 해줬는데

 

 

Network(net::ERR_EMPTY_RESPONSE)를 봐도 console(crbug/1173575, non-JS module files deprecated.)창을 봐도 감을 잡을 수 없어서 열심히 구글링..!

그러다 stackoverflow의 solution을 보고 해결했다.

 

해결 방법은 설치한 Live Server에서 host로 local ip를 사용하겠다는 옵션에 체크를 하면 됐다.

 

 

1) 확장팩으로 들어가서 Live Server의 셋팅을 들어갔다.

 

2) 빨간색 박스의 체크 부분을 체크해 준다.

 

3) 실행 페이지에서 Open with Live Server 클릭

 

4) Screen shoot은 없지만 잘 실행됐다!

 

 

 

+++ 근데 이렇게 설정한 이후 다른 장소에서 실행을 하려니까 또 접속이 안됐다. ㅠㅎ 

(FYI: 이전과 똑같이 무선와이파이 접속 환경이었고, 이번에는 주소창에 127.0.0.1:5500이 아니라 ip:5500 이런식이었음. 근데 여기에 있는 ip주소가 하단의 주소와 다르게 떠있어서, 아래처럼 무선 LAN 어댑터 WI-FI의 IPv4 주소 부분으로 넣어줬다.)

 

이 부분은 접속 ip 주소를 찾아서 접속 주소를 바꿔줬더니 해결됐다.

 

 

 

 

 

 

 

2. tsc 실행 에러

 

1) Node 설치 확인 후 TS 설치 (node -v   ,   npm i typescript - g    -> 글로벌로)

     feat.신나게 설치

 

2) tsc index.ts 하고 엔터하자마자 에러 발생

 

열심히 구글링( categoryinfo : 보안 오류: (:) [], pssecurityexception + fullyqualifiederrorid : unauthorizedaccess )

 

 

 

3) 에러의 원인은 스크립트 실행 권한이 제한되어 있어서였다.  따라서 Windows PowerShell 을 관리자로 실행한다.

처음에 검정색 화면에 흰색 글자길래... cmd로 들어갔다. 명령 프롬프트 아님!!!!!!!!!

 

https://junetony.junebest.com/entry/%EB%AA%85%EB%A0%B9-%ED%94%84%EB%A1%AC%ED%94%84%ED%8A%B8-vs-%ED%8C%8C%EC%9B%8C%EC%89%98-vs-%EC%9C%88%EB%8F%84%EC%9A%B0-%ED%84%B0%EB%AF%B8%EB%84%90-%EC%B0%A8%EC%9D%B4%EC%A0%90

명령 프롬프트(CMD) vs 파워쉘 vs 윈도우 터미널 차이점

 

 

4) PoswerShell로 들어와서 아래 빨간색 박스를 차례대로 타이핑해준다.

중간에 한글로 뭔가를 묻는다면, Y 를 입력해주면 권한이 변경된 것을 확인할 수 있다.

 

 

5) 마지막에 잘 실행이 되면 스크린샷 찍는 것을 잊는다. 아무튼 vscode에서 다시 tsc index.ts 로 실행 했을 때 잘 실행됐다.