챕터 1: 웹 개발의 첫걸음 - 개발 환경 준비하기
서론
웹 개발이라는 흥미진진한 여정을 시작하신 것을 진심으로 축하드립니다. 여러분이 지금 이 글을 읽고 있다는 것은 새로운 기술을 배우고자 하는 강한 의지와 열정을 가지고 계시다는 증거입니다. 프로그래밍이 완전히 처음이라 막막하고 어려워 보일 수 있지만, 걱정하지 마십시오. 모든 전문 개발자들도 여러분과 똑같은 출발점에서 시작했습니다.
웹 개발을 시작하기 위해서는 먼저 우리의 컴퓨터를 개발이 가능한 환경으로 만들어야 합니다. 이것은 마치 요리를 시작하기 전에 주방을 정리하고 필요한 조리 도구들을 준비하는 것과 같습니다. 좋은 도구가 있어야 좋은 결과물을 만들 수 있듯이, 적절한 개발 도구를 갖추는 것이 성공적인 웹 개발의 첫걸음입니다.
본론
Node.js - JavaScript의 심장
우리가 가장 먼저 설치해야 할 프로그램은 Node.js입니다. Node.js는 JavaScript라는 프로그래밍 언어를 우리 컴퓨터에서 실행할 수 있게 해주는 런타임 환경입니다. 원래 JavaScript는 웹 브라우저에서만 실행되는 언어였습니다. 하지만 2009년에 Node.js가 등장하면서 JavaScript를 컴퓨터에서도 직접 실행할 수 있게 되었고, 이는 웹 개발의 판도를 완전히 바꾸어 놓았습니다.
Node.js를 설치하는 방법은 매우 간단합니다. 먼저 웹 브라우저를 열고 nodejs.org 웹사이트에 접속합니다. 메인 페이지에 두 개의 큰 다운로드 버튼이 보일 것입니다. 하나는 LTS(Long Term Support) 버전이고, 다른 하나는 Current 버전입니다. 초보자라면 반드시 LTS 버전을 선택하시기 바랍니다. LTS는 '장기 지원' 버전으로, 안정적이고 오랜 기간 지원을 받을 수 있습니다.
다운로드한 설치 파일을 실행하면 일반적인 프로그램 설치와 동일한 과정을 거칩니다. 대부분의 경우 기본 설정을 그대로 유지하고 '다음' 버튼을 계속 클릭하면 됩니다. 설치 과정에서 'Add to PATH'라는 옵션이 있다면 반드시 체크되어 있는지 확인하십시오. 이 옵션은 어느 위치에서든 Node.js를 실행할 수 있게 해주는 중요한 설정입니다.
Visual Studio Code - 코드를 작성하는 전문 편집기
두 번째로 필요한 도구는 Visual Studio Code(줄여서 VS Code)입니다. 이것은 Microsoft에서 만든 무료 코드 편집기로, 전 세계 개발자들이 가장 많이 사용하는 도구 중 하나입니다. 메모장으로도 코드를 작성할 수 있지만, VS Code는 코드를 색깔로 구분해주고, 오류를 실시간으로 찾아주며, 자동 완성 기능까지 제공하여 개발 생산성을 크게 향상시켜줍니다.
VS Code를 설치하려면 code.visualstudio.com 웹사이트에 접속합니다. 큰 파란색 다운로드 버튼을 클릭하면 여러분의 운영체제에 맞는 버전이 자동으로 다운로드됩니다. Windows, Mac, Linux 모든 운영체제를 지원하므로 어떤 컴퓨터를 사용하든 문제없습니다.
설치가 완료되면 VS Code를 실행해보십시오. 처음 실행하면 Welcome 탭이 나타날 것입니다. 왼쪽 사이드바에는 파일 탐색기, 검색, 소스 제어, 디버깅, 확장 프로그램 등의 아이콘들이 있습니다. 지금은 이 모든 기능을 알 필요가 없습니다. 차차 필요한 기능들을 하나씩 배워나가면 됩니다.
Chrome 브라우저 - 웹 개발자의 필수 도구
세 번째 도구는 Google Chrome 브라우저입니다. 이미 Chrome을 사용하고 계시다면 이 단계는 건너뛰어도 됩니다. Chrome은 강력한 개발자 도구를 내장하고 있어 웹 개발 시 디버깅과 테스트가 매우 편리합니다. 또한 대부분의 웹 개발 문서와 튜토리얼이 Chrome을 기준으로 작성되어 있어 학습에도 유리합니다.
Chrome 설치는 google.com/chrome에서 할 수 있습니다. 다운로드 후 설치하면 바로 사용할 수 있습니다. Chrome이 설치되면 F12 키를 눌러 개발자 도구를 열어보십시오. 복잡해 보이는 패널들이 나타날 텐데, 지금은 닫아두셔도 됩니다. 나중에 이 도구들이 얼마나 유용한지 알게 될 것입니다.
설치 확인하기
모든 프로그램의 설치가 완료되었다면 이제 제대로 설치되었는지 확인해볼 차례입니다. Windows 사용자는 명령 프롬프트(cmd) 또는 PowerShell을, Mac 사용자는 터미널을 열어주십시오. Windows에서는 시작 메뉴에서 'cmd'를 검색하면 명령 프롬프트를 찾을 수 있고, Mac에서는 Spotlight 검색(Cmd+Space)에서 'Terminal'을 입력하면 됩니다.
터미널이 열리면 다음 명령어를 입력하고 Enter 키를 누릅니다:
node --version
이 명령어를 실행하면 v18.17.0과 같은 버전 번호가 나타나야 합니다. 버전 번호가 18 이상이면 성공적으로 설치된 것입니다. 만약 'node는 내부 또는 외부 명령이 아닙니다'와 같은 오류가 나타난다면 Node.js 설치 과정에서 문제가 있었을 가능성이 있으므로 재설치를 시도해보십시오.
다음으로 npm(Node Package Manager)도 확인해봅니다:
npm --version
npm은 Node.js와 함께 자동으로 설치되는 패키지 관리자입니다. 이것은 다른 개발자들이 만든 코드 패키지를 쉽게 설치하고 관리할 수 있게 해주는 도구입니다. 9.0.0 이상의 버전 번호가 나타나면 정상입니다.
VS Code 터미널 사용하기
이제 VS Code에서 직접 터미널을 사용하는 방법을 알아보겠습니다. VS Code를 열고 상단 메뉴에서 Terminal → New Terminal을 선택하면 에디터 하단에 터미널이 나타납니다. 이 통합 터미널을 사용하면 코드를 작성하면서 동시에 명령어를 실행할 수 있어 매우 편리합니다.
VS Code 터미널에서도 동일하게 node와 npm 버전을 확인해보십시오. 정상적으로 작동한다면 이제 개발 환경 준비가 모두 완료된 것입니다.
결론
축하합니다! 여러분은 방금 웹 개발을 위한 필수 도구들을 모두 설치했습니다. Node.js로 JavaScript를 실행할 수 있게 되었고, VS Code로 코드를 효율적으로 작성할 수 있으며, Chrome으로 만든 웹사이트를 테스트할 수 있습니다. 이 세 가지 도구는 앞으로 우리의 웹 개발 여정에서 가장 중요한 동반자가 될 것입니다.
처음에는 이 도구들이 왜 필요한지, 어떻게 사용하는지 완전히 이해하지 못할 수도 있습니다. 하지만 걱정하지 마십시오. 다음 챕터부터 실제로 코드를 작성하면서 각 도구의 역할과 중요성을 자연스럽게 체득하게 될 것입니다. 개발 환경 설정이라는 첫 번째 관문을 성공적으로 통과한 여러분 자신을 칭찬해주십시오. 이제 본격적인 웹 개발의 세계로 들어갈 준비가 되었습니다!