이번 섹션에서는 개발을 입문하는 분들에게도 개발 환경을 설정하는데 도움이 될 수 있도록 자료를 준비했습니다. 윈도우 개발 환경이니 맥 사용자는 맥 개발 환경을 찾아주세요.
개발 환경
Winget은 Windows Package Manager로, 소프트웨어 패키지의 설치 및 관리를 자동화하기 위한 도구입니다. 처음에는 별도로 설치해야 했지만, 2021년에 발표된 Windows 11에서 Winget은 기본적으로 OS에 포함되어 제공되기 시작했습니다. 따라서 Windows 11부터 Winget이 기본으로 탑재되었습니다.
그리고 윈도우는 기본은 Powershell이라는 기본 쉘을 가지고 있으며 Windows Terminal을 2020년 5월에 정식버전으로 출시했습니다. Windows Terminal은 Microsoft가 기존 cmd.exe의 한계를 극복하 고 현대의 개발 환경에 적합하게 만들기 위해 개발한 터미널입니다. 다중 탭 지원, GPU 가속 렌더링, 사용자 정의 옵션, 다양한 셸 지원 등의 기능을 통해 사용자에게 더욱 풍부한 터미널 경험을 제공합니다. Windows Terminal은 기본적으로 PowerShell을 쉘로 사용하여 열지만, 이는 사용자의 선택에 따라 변경이 가능합니다. cmd, WSL, 또는 다른 커스텀 셸 등 다양한 셸을 추가하여 사용할 수 있습니다. 이렇게 하면 사용자는 자신의 환경과 작업 스타일에 가장 적합한 셸을 선택하여 효율적으로 작업할 수 있습니다. 여기서는 PowerShell로 진행합니다.
위 내용을 알고 나면 설치 과정이 훨씬 더 이해하기 쉬워질 것입니다.
1. Winget
위에서 언급한 것처럼 Winget은 기본적으로 깔려있지만 혹시라도 깔려있지 않다면 Microsoft Store를 실행하여 App Installer를 설치합니다. 그리고 Windows Terminal을 열고 winget 명령어가 잘 동작하는지 확인합니다.
Winget 사용의 장점:
- 간편성: 복잡한 설치 프로세스나 여러 설치 프로그램을 다운로드할 필요 없이, 명령어 하나로 여러 프로그램을 설치할 수 있습니다.
- 일관성: 모든 프로그램이 동일한 방식으로 설치되므로, 개별 프로그램의 복잡한 설치 절차를 건너뛸 수 있습니다.
- 버전 관리:
Winget은 특정 버전의 프로그램을 설치하거나 업데이트할 때 유용하게 사용될 수 있습니다. - 스크립트 지원: 설치 스크립트를 통해 여러 프로그램을 일괄 설치할 수 있어, 새로운 환경 구성이나 시스템 복원시 편리합니다.
- 안전성: 공식 저장소에서 검증된 패키지만 제공되므로, 신뢰할 수 있는 소스에서 프로그램을 다운로드하게 됩니다.
결론적으로, Winget을 사용하면 프로그램의 설치와 관리가 간편해지고, 다양한 환경에서 일관된 방식으로 소프트웨어를 관리할 수 있습니다.
2. Oh My Posh
Oh My Posh는 Windows의 PowerShell 또는 다른 셸 환경을 사용자가 원하는 대로 꾸밀 수 있게 도와주는 프롬프트 테마 및 설정 도구입니다. 기본 셸 프롬프트가 제공하는 정보와 스타일이 한정적이라 여러 가지 추가 정보를 보거나 눈에 더 잘 띄는 스타일로 변경하고 싶은 사용자에게 유용합니다. Oh My Posh를 설치하면, 현재 Git 상태, 작업 디렉토리, 실행 성공/실패 표시 등을 다양한 스타일과 색상으로 표시할 수 있어 셸 환경을 보다 명확하고 효율적으로 사용할 수 있게 됩니다. 이를 통해 개발자의 생산성과 작업의 편의성이 크게 향상될 수 있습니다.
Git은 여러 사람들이 함께 코드를 작업할 때 변경 사항을 추적하고 협업 을 돕는 버전 관리 시스템입니다. 지금 당장 모르더라도, 나중에 개발 작업을 하면서 자연스럽게 필요에 따라 알게 되실 것이니 너무 걱정하지 않으셔도 됩니다!
그러면 이제 Oh My Posh를 설치해보겠습니다.
공식 홈페이지 ➡ Docs ➡️ Get Started ➡️ Installation ➡️ Windows 섹션을 참고하여 아래 명령어를 터미널에 입력해줍니다.
winget install JanDeDobbeleer.OhMyPosh -s winget
그리고 터미널에서 폰트가 깨지는 현상을 방지하기 위해서 추가로 폰트를 설치해줍니다. Windows Terminal을 오른쪽 클릭하여 관리자 권한으로 열어줍니다. 그리고 아래 명령어를 통해 폰트를 설치합니다.
oh-my-posh font install
위 명령어를 치면 폰트를 선택하는 옵션이 나오는데 여기서는
FiraCode를 설치합니다.
터미널 폰트 설정
그리고 터미널에서 CTRL + SHIFT + , 단축키를 통해서 설정 파일을 엽니다. 그러면 텍스트 편집기가 열리고 "profiles" => "defaults" 구간을 찾아주고 아래와 같이 편집합니다.
{
"profiles":
{
"defaults":
{
"font":
{
"face": "FiraCode Nerd Font"
}
}
}
}
터미널 설정에 가서 Settings ➡️ Defaults ➡️ Appearance ➡️ Font face 경로로 가면 FiraCode Nerd Font로 설정되어 있는 것을 확인할 수 있습니다. 혹시 안되셨다면 메뉴얼을 참고해주세요.
쉘 설정
이제 Oh My Posh 설정을 마무리하여 PowerShell을 시작할 때마다 자동으로 실행되게 설정해보겠습니다.
- 먼저, PowerShell을 열고 아래의 명령어를 입력하여 프로필 설정 파일을 생성합니다:
New-Item -Path $PROFILE -Type File -Force
이 명령어를 통해 PowerShell의 프로필 설정 파일이 만들어집니다.
- 생성된 프로필 설정 파일을 노트패드로 열기 위해 다음 명령어를 입력합니다.
notepad $PROFILE
- 노트패드가 열린 후, 아래의 코드를 붙여넣어 줍니다. 이를 통해 PowerShell이 시작될 때
Oh My Posh가 자동으로 실행되도록 설정됩니다.
oh-my-posh init pwsh | Invoke-Expression
이제 설정이 완료되었습니다. 다음부터 PowerShell을 시작할 때마다 Oh My Posh의 설정이 자동으로 적용됩니다.
3. NVM (Node Version Manager) 설치 후 Node.js 설치
Node.js는 웹 브라우저 밖에서도 자바스크립트를 실행할 수 있게 해주는 도구입니다. 이를 통해 컴퓨터에서 서버나 애플리케이션을 만들 때 자바스크립트를 사용할 수 있게 되었습니다. 빠르게 동시 처리가 가능하며, 프론트엔드와 백엔드 모두 같은 언어로 작업할 수 있는 장점이 있습니다.
Node.js만 설치하면 되는데, 왜 NVM을 설치해야 하는지 궁금할 수 있습니다. NVM (Node Version Manager)은 여러 버전의 Node.js를 설치하고 관리할 수 있게 해주는 도구입니다. Node.js 를 직접 설치하면 하나의 버전만 사용할 수 있지만, NVM을 통해 여러 버전의 Node.js를 간편하게 설치하고 전환할 수 있습니다. 이렇게 함으로써 다음과 같은 장점이 있습니다.
- 호환성: 프로젝트마다 필요한
Node.js의 버전이 다를 수 있습니다.NVM을 사용하면 프로젝트 별로 적절한 버전의Node.js를 설정하여 사용할 수 있습니다. - 편리성: 명령어 한 번으로
Node.js의 버전을 간편하게 전환할 수 있습니다. - 안정성: 실험적인 기능이 포함된 최신 버전의
Node.js를 시험하고 싶을 때, 기존의 안정된 버전과 별도로 설치하고 사용할 수 있습니다. - 업데이트와 롤백: 새로운 버전의
Node.js를 쉽게 설치할 수 있고, 문제가 생겼을 때 이전 버전으로 쉽게 롤백할 수 있습니다.
따라서, Node.js만 설치하는 것보다 NVM을 통해 버전 관리를 하는 것은 개발에 있어서 훨씬 더 유연하고 효과적인 방법입니다. 그럼 이제부터 NVM을 설치한 후 Node.js를 설치해보겠습니다.
NVM 설치
nvm-windows 사이트를 방문하여 설치기를 다운로드하세요. 만약 바로 찾기 어렵다면, 릴리즈 페이지에서 최신 버전의 nvm-setup.exe 파일을 다운로드 받으실 수 있습니다 (2023-08-20 기준: 현재 winget은 nvm을 지원하지 않습니다 😔).
다운로드한 파일로 설치를 완료한 후, 기존의 터미널을 닫은 다음 새로 터미널을 열고 아래 명령어를 입력합니다.
패키지 매니저를 통해 설치되지 않은 외부 프로그램은 재시작 없이 터미널에서 인식되지 않습니다. 이론적으로
winget을 통해 설치된 프로그램은 새로 고침 없이 인식될 수 있어야 하지만, 현재winget은 과거의 윈도우 설치 시스템과 함께 사용되기 때문에, 때때로 터미널을 종료하고 다시 열어야 합니다. 팁으로는,winget으로 프로그램을 설치할 때 새 창이 뜨면서 설치가 완료될 경우, 터미널을 재시작해야만 그 프로그램을 인식할 수 있습니다.
nvm list
결과 메시지가
No installations recognized.라면, 설치가 정상적으로 완료된 것입니다.
Node.js 설치
위에서 설치한 NVM을 통해 Node.js를 아래 명령어를 통해 설치해줍니다.
nvm install lts
lts는
long term support의 약자로 현재 기준으로 가장 안정적인 버전입니다.2023-08-20기준으로18.17.1버전이 설치됩니다.
다음으로 nvm에서 Node.js 버전을 선택합니다.
nvm use lts
설치가 정상적으로 완료되었다면, node -v 명령어를 입력하여 설치된 Node.js 버전을 확인할 수 있습니다. 또한, npm -v 명령어를 통해 npm의 버전도 확인해보세요. 여기서 npm은 Node.js에 대한 패키지 관리 도구로, Homebrew와 유사한 기능을 합니다. 쉽게 말해, npm은 Node.js로 설치된 소프트웨어 패키지를 관리하는데 매우 효과적입니다.
npm에 추가하여, yarn 설치를 추천드립니다. 설치 과정은 아주 간단한데 npm을 이용하면 됩니다. Yarn은 메타(이전의 페이스북)에서 개발된, npm과 유사한 패키지 관리 도구입니다. Yarn을 설치하는 주된 이유는 앞으로 설치할 리액트네티이브가 메타에서 개발된 프레임워크이기 때문입니다. yarn 설치는 아래의 명령어를 사용하면 됩니다.
npm install -g yarn
Bun 설치
2024년부터 모든 커뮤니티 프로젝트는 Bun에 의존합니다. 따라서 번을 전역적으로 설치하는 것이 권장됩니다.
4. Visual Studio Code 설치
다음으로, Visual Studio Code를 설치하겠습니다. Visual Studio Code는 종종 vscode로 불리며, 전세계 개발자들에게 사랑받는 코드 편집기 중 하나입니다. 과거에는 edit plus, sublime text, 그리고 현재 지원이 중단된 atom 같은 편집기들이 주요하게 사용되었었습니다. 그러나 vscode의 뛰어난 기능과 사용자 경험으로 많은 개발자들이 이 편집기로 전환하게 되었습니다.
Visual Studio Code는 winget 통해 제공되므로 아래의 명령어로 터미널에서 쉽게 설치할 수 있습니다.
winget install Microsoft.VisualStudioCode
설치가 완료된 후, Powershell 프 로필을 vscode로 열어 정상적으로 설치되었는지 확인해보세요.
code $PROFILE
vscode 텍스트 편집기로 프로필 파일이 열리면, 성공적으로 설치된 것입니다. 만약 열리지 않으면 터미널을 다시 재시작하고 시도해주세요.
5. Git
git은 소프트웨어 개발뿐만 아니라 여러 분야에서 프로젝트 관리와 협업 도구로 널리 활용되고 있습니다. 특히 현대의 다양한 소프트웨어와 플랫폼들은 git과의 통합 기능을 제공하여 사용자의 편의성을 높이고 있습니다. 따라서, git을 미리 설치해두면 나중에 해당 도구나 플랫폼을 활용할 때 쉽고 빠르게 프로젝트에 참여하거나 자신의 작업을 관리할 수 있게 됩니다.
설치
git은 코드 관리 및 협업의 핵심 도구로 널리 사용되며, winget을 통해 손쉽게 윈도우 환경에서 설치할 수 있습니다.
winget install Git.Git
설치가 완료된 후, 터미널을 재시작하고 git --version 명령어를 통해 버전 정보를 확인하면 정상적으로 설치된 것을 확인하실 수 있습니다.
6. Android Studio
안드로이드 통합 개발 환경을 제공하는 안드로이드 스튜디오를 설치해보겠습니다. 이 또한 winget으로 제공되어 편하게 설치할 수 있습니다.
안정적인 버전을 설치하려면 Google.AndroidStudio를 최신 버전을 설치하고 싶으시면 Google.AndroidStudio.Canary를 설치합니다. 여기서는 최신 버전을 설치합니다.
winget install Google.AndroidStudio.Canary
설치가 완료되면 Android Studio 애플리케이션을 찾아서 실행시킵니다. 설치 영상을 참고하여 새로운 어플리케이션을 만들어서 프로젝트를 실행시킵니다. 이는 완전히 안드로이드 개발 환경을 구성하기 위해 필요합니다.
설치 후 설정
Android Studio의 설치 후에는 안드로이드 개발을 위한 몇몇 환경 설정이 필요합니다. 먼저 Android Studio의 설정에서 안드로이드 SDK의 경로를 확인해야 합니다. 이 경로를 윈도우의 환경 변수에 추가해야 하는데, 추가 방법은 다음과 같습니다:
윈도우 제어판➡ ️사용자 계정➡️사용자 계정메뉴로 이동합니다.나의 환경변수 변경을 클릭합니다.새로운 환경변수를 선택하고, 변수 이름으로ANDROID_HOME을 입력하고, 값으로는안드로이드 SDK경로를 입력합니다.- 그 다음,
platform-tools경로도 시스템 환경변수에 추가해야 합니다. 이때, 방금 추가한ANDROID_HOME변수를 이용하면 됩니다. 시스템 환경변수에%ANDROID_HOME%\platform-tools를 추가합니다. - 모든 설정을 마치면
확인을 눌러 변경사항을 저장합니다.
이러한 설정을 마친 후 터미널을 재시작하면, adb 명령어가 정상적으로 인식됩니다. 이는 안드로이드 개발 환경이 터미널에 정상적으로 설정된 것을 의미합니다.
7. 리엑트 네이티브와 엑스포
마지막으로, iOS, 안드로이드, 그리고 웹 등의 개발을 모두 함께 할 수 있는 리엑트 네이티브 설치를 진행합니다.
리엑트 네이티브 프로젝트를 풍요롭게 그리고 빠르게 시작하기 위해 두부랩에서 관리하는 dooboo-cli를 사용합니다.
터미널을 열고 아래 명령어를 입력해줍니다.
npx dooboo init
npx는npm패키지 실행 도구로, 2017년npm버전 5.2.0에서 소개되었습니다. 사용자가 전역으로 패키지를 설치하지 않고도npm레지스트리의 패키지 명령을 직접 실행할 수 있게 해줍니다. 이를 통해, 특정 패키지의 최신 버전을 쉽게 실행하거나, 임시로 패키지를 실행하는 등의 작업이 간편해집니다.
_| _ _ |_ _ _ | _ |_
(_|(_)(_)|_)(_)(_)|(_||_)
터미널에서 위가 같이 표시 된 후 Expo (Typescript) 프로젝트가 caption 상태로 나타나면, Enter키를 눌러 계속 진행합니다. 그 다음, 원하시는 프로젝트 이름을 입력하고 Enter키를 다시 눌러 프로젝트를 생성합니다.
Expo는 React Native를 위한 오픈 소스 플랫폼으로, 모바일 앱 개발을 간소화하고 가속화하는 데 도움을 줍니다. 개발자는 Expo를 사용하여 초기 설정 없이 즉시 새 프로젝트를 시작하고, 다양한 네이티브 API에 쉽게 접근할 수 있습니다. 또한, Expo의 개발 툴은 앱을 실시간으로 미리 보면서 즉시 업데이트를 반영할 수 있게 해, 개발 및 디버깅 과정을 더욱 효율적으로 만들어 줍니다.
생성된 프로젝트 이름의 폴더로 이동한 뒤, bun install 명령어를 수행하여 필요한 로컬 패키지들을 설치합니다. 그 후 bun start 명령어로 프로젝트를 실행합니다. 이후 터미널에 a, w 중 하나의 명령어를 입력하면 각각 안드로이드 시뮬레이터 그리고 웹 브라우저가 실행됩니다.
만약 웹이
w로 실행되지 않는다면,bun web명령어로 다시 시도해보세요. 안드로이드 에뮬레이터가 실행되지 않는 경우,Android Studio를 사용해 새로운 에뮬레이터를 생성해보세요. 관련 자세한 정보는 안드로이드 가상기기 만들기 및 관리하기를 참조해주세요.
iOS에서의 테스트
dooboo를 통해 생성된 프로젝트는 Expo를 활용하므로 윈도우 환경에서도 iOS 기기로 앱을 실행해 볼 수 있습니다. 단, 이를 위해서는 물리적인 아이폰이 필요 하며, bun start 명령을 실행시킨 후 출력되는 QR코드를 스캔하여 Expo Go 앱을 통해 프로젝트를 실행시킬 수 있습니다. 자세한 정보와 사용법은 Expo Go 공식 문서에서 확인할 수 있습니다.
이렇게 설치가 마무리 되었습니다. 앞으로는 코딩에 집중할 수 있습니다 🎉