TypeScript - 환경 설정
안녕하세요, 미래의 코딩 슈퍼스타! TypeScript의 세상으로의 흥미로운 여정을 안내해 드리게 되어 기쁩니다. 프로그래밍을 가르쳐온 많은 해 동안, 개발 환경을 설정하는 것은 요리하기 전에 부엌을 준비하는 것과 같다고 말씀드릴 수 있습니다. 그것이 가장 매력적인 부분은 아니지만, 원활하고 즐거운 경험을 위해서는 필수적입니다. 그麼, 손을 dirt고 시작해 보겠습니다!
로컬 환경 설정
TypeScript의 구체적인 내용에 들어가기 전에, 우선 로컬 환경을 설정해야 합니다. 이를 통해 당신의 코딩 작업 공간을 만들 것입니다 - 놀라운 프로그램을 만들어 나갈 따뜻한 모퉁이입니다.
Node.js 설치
먼저 Node.js를 설치해야 합니다. "하지만 우리는 TypeScript를 배우는 줄 알았잖아?"라고 물어볼 수도 있습니다. 맞습니다! 하지만 Node.js는 TypeScript가 많은 것에 의존하는 친절한 이웃과 같습니다. TypeScript 컴파일러를 실행하는 것을 포함하여.
Node.js를 설치하려면 다음 단계를 따르세요:
- 공식 Node.js 웹사이트(https://nodejs.org/)를 방문하세요.
- 대부분의 사용자에게 추천되는 버전을 다운로드하세요.
- 설치 프로그램을 실행하고 지시에 따라 설치하세요.
- 설치가 완료되면 터미널이나 명령 프롬프트를 엽니다.
-
node -v를 입력하고 Enter를 눌러 설치를 확인합니다.
버전 번호가 표시되면 축하합니다! Node.js를 성공적으로 설치했습니다. 그렇지 않으면 걱정 마세요 - 우리 모두 그런 적이 있었습니다. 설치 과정을 다시 확인하거나 도움을 요청하세요.
이제 Node.js가 설치되었으므로 TypeScript를 설치해 보겠습니다:
- 터미널이나 명령 프롬프트를 엽니다.
- 다음 명령어를 입력하고 Enter를 눌러주세요:
npm install -g typescript이 명령어는 npm(노드 패키지 관리자)가 시스템 전체에 TypeScript를 설치하도록 합니다. 설치가 완료되면 다음을 입력하여 설치를 확인할 수 있습니다:
tsc -v버전 번호가 표시되면 준비가 완료되었습니다!
IDE 지원
이제 핵심 도구가 설치되었으므로, 작업 공간을 선택할 차례입니다 - 통합 개발 환경(IDE). IDE는 코딩에 필요한 다양한 기능을 제공하는 신뢰할 수 있는 스위스 아르미Knife와 같습니다. 여기서 당신은 TypeScript 코드를 작성하고 디버그하며 실행할 것입니다.
Visual Studio Code
제가 개인적으로 좋아하는(그리고 모든 학생들에게 추천하는) 것은 Visual Studio Code(VS Code)입니다. 무료이고 강력하며, TypeScript에 대한 우수한 지원을 기본적으로 제공합니다.
VS Code를 설정하려면 다음과 같이 합니다:
- VS Code 웹사이트(https://code.visualstudio.com/)를 방문하세요.
- 운영 체제에 맞는 버전을 다운로드하고 설치하세요.
- 설치가 완료되면 VS Code를 엽니다.
VS Code는 내장된 TypeScript 지원을 제공하지만, 설치된 버전을 사용하고 있는지 확인해 보겠습니다:
- 새 파일을 만들고
.ts확장자로 저장하세요 (예:hello.ts). - 다음 코드를 입력하세요:
let message: string = "Hello, TypeScript!";
console.log(message);-
Ctrl + Shift + B(또는 Mac에서는Cmd + Shift + B)를 눌러 빌드 작업 메뉴를 엽니다. - "tsc: build - tsconfig.json"를 선택합니다.
-
tsconfig.json파일을 생성할지 묻는다면 "예"를 선택합니다.
이렇게 하면 프로젝트 폴더에 tsconfig.json 파일이 생성되며, TypeScript가 코드를 어떻게 컴파일할지 지정합니다. 나중에 TypeScript에 더 익숙해지면 이 파일을 맞춤 설정할 수 있습니다.
Brackets
VS Code가 제首选이지만, 일부 학생들은 특히 웹 디자인 배경을 가진 사람들이 Brackets를 선호합니다. Brackets는 가벼우며 웹 기술에 중점을 둡니다.
TypeScript를 위한 Brackets를 설정하려면 다음과 같이 합니다:
- 공식 Brackets 웹사이트(http://brackets.io/)에서 Brackets를 다운로드하고 설치합니다.
- Brackets를 엽니다. 그런 다음 "File > Extension Manager"로 이동합니다.
- "TypeScript"를 검색하고 "Brackets TypeScript" 확장을 설치합니다.
- 설치 후 Brackets를 다시 시작합니다.
이제 .ts 파일을 만들고 TypeScript로 코딩을 시작할 수 있습니다!
유용한 메서드와 도구
TypeScript 여정을 시작하면서 만날 수 있는 몇 가지 유용한 메서드와 도구를 표로 정리해 보겠습니다:
| 메서드/도구 | 설명 | 예제 |
|---|---|---|
tsc |
TypeScript 컴파일러 명령어 |
tsc hello.ts는 hello.ts를 hello.js로 컴파일합니다 |
tsc --watch |
파일 변경을 감시하고 자동으로 재컴파일 | tsc --watch hello.ts |
npm init |
새로운 Node.js 프로젝트 초기화 | 프로젝트 폴더에서 npm init 실행 |
tsconfig.json |
TypeScript 컴파일 설정 파일 | 컴파일러 옵션과 프로젝트 설정을 지정 |
console.log() |
콘솔에 출력 | console.log("Hello, World!"); |
node |
JavaScript 파일 실행 |
node hello.js는 컴파일된 JS 파일을 실행합니다 |
이것들은 기본적인 것들일 뿐입니다. 진행하면서 더 많은 흥미로운 도구와 메서드를 발견하게 될 것입니다!
결론
와우! 오늘 많은 내용을 다루었습니다. Node.js 설치에서 IDE 설정까지.처음에는 약간 혼란스러울 수 있지만, 연습을 하다 보면 이 모든 것이 자연스러워질 것입니다.
저는 처음 코딩을 시작할 때 환경 설정에 몇 시간을 보냈던 기억이 납니다. 지금은 아침 커피를 내리는 것과 같이 자연스럽습니다!
TypeScript 여정을 계속하면서, 모든 위대한 프로그래머가 당신이 지금 있는 위치에서 시작했음을 기억하세요. 중요한 것은 호기심을 유지하고, 계속 실험하며, 궁금한 점이 있으면 언제든지 질문하는 것입니다.
다음 강의에서는 첫 TypeScript 프로그램을 작성하고, 언어의 독특한 기능을 탐구해 보겠습니다. 그때까지 즐겁게 코딩하고, 세미콜론이 항상 적절한 위치에 있기를 바랍니다!
Credits: Image by storyset