이 글을 따라하고 나면, 코드를 작성하고 실행하고 GitHub에 올리는 것까지 모든 준비가 끝납니다. - 이 글은 AI와 함께 작성되었습니다 추가적으로 해당 글에는 어느정도 개념이 포함되어 있는데 일단은! 개념보단 세팅이 우선이니 세팅 먼저 하면 될 것 같습니다 !🦁

개발 공부를 시작하려고 마음먹었는데, 막상 "뭘 먼저 깔아야 하지?"에서 막히는 경우가 많습니다. 이 글 하나만 처음부터 끝까지 따라하면, 코드를 작성할 수 있는 환경이 완성됩니다.

설치할 것들은 총 4가지입니다.

하나씩 진행해 봅시다.

---

Part 1. VSCode 설치하기

1-1. VSCode 다운로드 및 설치

1. https://code.visualstudio.com 에 접속합니다.
2. 화면 중앙의 Download 버튼을 클릭합니다. 자신의 운영체제(Windows / macOS)에 맞는 버전이 자동으로 선택됩니다.
3. 다운로드된 파일을 실행하여 설치합니다.

Windows의 경우, 설치 과정에서 아래 옵션이 나오면 체크해 주세요:

• ✅ Add "Open with Code" action to Windows Explorer file context menu
• ✅ Add "Open with Code" action to Windows Explorer directory context menu
• ✅ Add to PATH

이 옵션들을 체크하면 폴더에서 마우스 오른쪽 클릭으로 바로 VSCode를 열 수 있고, 터미널에서 code . 명령어로 VSCode를 실행할 수 있습니다.

macOS의 경우, 다운로드된 .zip 파일의 압축을 풀고 Visual Studio Code.app을 응용 프로그램 폴더로 드래그하면 됩니다.

1-2. VSCode 기본 화면 살펴보기

VSCode를 처음 열면 Welcome 탭이 나타납니다. 아직은 익숙하지 않아도 괜찮습니다. 자주 쓰게 될 영역만 알아두면 됩니다.

사이드바 아이콘 설명:

1-3. 터미널 열기

VSCode 안에는 **터미널(Terminal)**이 내장되어 있습니다. 터미널은 컴퓨터에게 텍스트로 명령을 내리는 도구입니다. 앞으로 자주 사용하게 됩니다.

터미널을 여는 방법은 아래와 같습니다:

• 단축키: Ctrl + ` (Windows) / Cmd + ` (macOS)
• 메뉴: 상단 메뉴 → Terminal → New Terminal

터미널이 열리면, 아래에 커서가 깜빡이는 검은 영역이 나타납니다. 여기에 명령어를 입력하고 Enter를 누르면 실행됩니다.

간단하게 테스트해 봅시다. 터미널에 아래 명령어를 입력해 보세요:

Hello World가 출력되면 터미널이 정상적으로 동작하는 것입니다.

1-4. 필수 확장 프로그램 설치

VSCode의 강점은 **확장 프로그램(Extension)**입니다. 확장 프로그램을 통해 코드 자동완성, 미리보기, 코드 포맷팅 등 다양한 기능을 추가할 수 있습니다.

사이드바에서 🧩 (Extensions) 아이콘을 클릭한 후, 검색창에 이름을 입력하고 Install 버튼을 누르면 됩니다.

모든 개발자 공통

HTML/CSS 개발 시 추가

React/Next.js 개발 시 추가

처음에는 공통 항목만 설치하면 됩니다. 나머지는 해당 기술을 배울 때 설치해도 늦지 않습니다.

1-5. Prettier 자동 포맷팅 설정

Prettier를 설치했으면, 파일을 저장할 때마다 코드가 자동으로 정렬되도록 설정해 봅시다.

1. Ctrl + , (Windows) 또는 Cmd + , (macOS)를 눌러 Settings를 엽니다.
2. 검색창에 format on save를 입력합니다.
3. Editor: Format On Save 항목을 **체크(✅)**합니다.
4. 검색창에 default formatter를 입력합니다.
5. Editor: Default Formatter 항목을 Prettier - Code formatter로 선택합니다.

이제 코드를 작성하고 Ctrl + S (저장)를 누르면 코드가 자동으로 깔끔하게 정렬됩니다.

💡 조금 더 알아보기 — 코드 편집기란? **코드 편집기(Code Editor)**는 코드를 작성하기 위한 전문 프로그램입니다. 메모장으로도 코드를 작성할 수 있지만, 코드 편집기는 구문 강조(코드에 색을 입혀 구분하기 쉽게 해줌), 자동완성, 에러 표시 같은 기능을 제공해서 훨씬 효율적입니다. 비슷한 도구로 **IDE(Integrated Development Environment, 통합 개발 환경)**라는 것도 있습니다. IntelliJ, Eclipse 같은 것들이 IDE입니다. IDE는 코드 편집기보다 더 많은 기능(디버거, 빌드 도구 등)을 기본으로 포함하고 있어서 무겁지만, VSCode는 가벼운 코드 편집기에 확장 프로그램으로 필요한 기능만 추가하는 방식이라 가볍고 빠릅니다.

---

Part 2. Cursor 설치하기

2-1. Cursor란?

Cursor는 VSCode를 기반으로 만들어진, AI가 내장된 코드 편집기입니다.

겉모습과 사용법은 VSCode와 거의 동일하지만, AI가 코드 작성을 도와주는 기능이 추가되어 있습니다. 코드에 대해 질문하거나, 코드를 자동으로 완성하거나, 에러를 설명해달라고 요청할 수 있습니다.

VSCode의 확장 프로그램과 설정을 그대로 가져올 수 있기 때문에, 별도로 확장 프로그램을 다시 설치할 필요가 없습니다.

2-2. Cursor 다운로드 및 설치

1. https://cursor.com 에 접속합니다.
2. Download 버튼을 클릭하여 설치 파일을 다운로드합니다.
3. 다운로드된 파일을 실행하여 설치합니다.

설치 과정에서 아래와 같은 옵션이 나타날 수 있습니다:

• Import VS Code Settings: ✅ 선택 — VSCode의 설정과 확장 프로그램을 그대로 가져옵니다.
• Install cursor command: ✅ 선택 — 터미널에서 cursor . 명령어로 Cursor를 실행할 수 있습니다.

2-3. Cursor 핵심 기능 살펴보기

Cursor를 열면 VSCode와 거의 동일한 화면이 나타납니다. 추가된 AI 기능은 아래와 같습니다:

Chat (채팅)

Ctrl + L (Windows) / Cmd + L (macOS)을 누르면 오른쪽에 AI 채팅 패널이 열립니다.

여기서 코드에 대해 질문할 수 있습니다. 예를 들어:

• "이 코드가 뭘 하는 건지 설명해줘"
• "이 에러 왜 나는 거야?"
• "이 함수를 더 깔끔하게 바꿔줘"

Inline Edit (인라인 편집)

코드를 선택한 후 Ctrl + K (Windows) / Cmd + K (macOS)를 누르면, 선택한 코드에 대해 AI에게 수정을 요청할 수 있습니다.

예를 들어 함수를 선택하고 "이 함수에 에러 처리를 추가해줘"라고 입력하면, AI가 코드를 수정해 줍니다.

Tab 자동완성

코드를 작성하다 보면 AI가 다음에 올 코드를 자동으로 제안합니다. 제안이 마음에 들면 Tab을 눌러 적용하면 됩니다.

2-4. VSCode vs Cursor, 뭘 쓰면 되나요?

둘 다 설치해 두되, 평소에는 Cursor를 사용하면 됩니다.

Cursor는 VSCode의 모든 기능을 포함하면서 AI 기능이 추가된 것이기 때문에, Cursor만 사용해도 충분합니다. 다만 VSCode도 함께 설치해 두는 이유는 아래와 같습니다:

• 일부 확장 프로그램이 Cursor에서 호환되지 않는 드문 경우가 있습니다.
• 팀 프로젝트에서 VSCode 기준으로 설정을 공유하는 경우가 있습니다.
• 나중에 취업하면 회사에서 VSCode를 사용할 수도 있습니다.

💡 조금 더 알아보기 — AI와 함께 개발한다는 것 AI 코드 편집기를 쓴다고 해서 AI가 대신 개발해 주는 것은 아닙니다. AI는 도우미 역할입니다. 모르는 에러가 나왔을 때 검색 대신 바로 물어볼 수 있고, 반복적인 코드를 빠르게 작성할 수 있습니다. 하지만 "왜 이 코드가 이렇게 동작하는지"를 이해하는 것은 본인의 몫입니다. AI가 제안한 코드를 무조건 수락하지 말고, "이게 왜 이렇게 되는 거지?" 하고 한 번 더 생각하는 습관이 중요합니다. AI가 만들어준 코드를 이해하지 못한 채 복붙만 하면, 결국 스스로 아무것도 만들 수 없는 상태가 됩니다. AI는 잘 활용하되, 기본기는 반드시 탄탄하게 쌓아야 합니다. 관련해서 질문이 있다면 언제든 편하게 운영진을 찾아주세요!!!

---

Part 3. Node.js 설치하기

3-1. Node.js란?

Node.js는 JavaScript를 웹 브라우저가 아닌 내 컴퓨터에서 실행할 수 있게 해주는 프로그램입니다.

JavaScript는 원래 웹 브라우저 안에서만 동작하는 언어였습니다. 하지만 Node.js 덕분에 컴퓨터에서 직접 JavaScript를 실행할 수 있게 되었고, 이를 통해 서버도 만들고, 다양한 도구도 사용할 수 있게 되었습니다.

Node.js를 설치하면 함께 설치되는 것들이 있습니다:

3-2. Node.js 다운로드 및 설치

1. https://nodejs.org 에 접속합니다.
2. LTS 버전을 다운로드합니다.

**LTS(Long Term Support)**는 "장기 지원 버전"이라는 뜻입니다. 안정적이고, 오래 관리되는 버전이기 때문에 항상 LTS를 선택하면 됩니다. 옆에 있는 Current 버전은 최신 기능이 들어있지만 불안정할 수 있으므로 지금은 사용하지 않습니다.

1. 다운로드된 파일을 실행하고, 모든 옵션을 기본값 그대로 두고 Next → Next → Install을 진행합니다.

3-3. 설치 확인

설치가 끝나면, VSCode(또는 Cursor)의 터미널을 열고 아래 명령어를 입력해 봅시다:

v22.x.x 같은 버전 번호가 출력되면 성공입니다. (v20.x.x이어도 괜찮습니다.)

npm도 확인해 봅시다:

10.x.x 같은 버전 번호가 나오면 됩니다.

⚠️ command not found 또는 'node'은(는) 인식할 수 없는 명령입니다 에러가 나는 경우

터미널을 한 번 종료하고 새로 열어보세요. 그래도 안 되면 VSCode(또는 Cursor) 자체를 완전히 종료했다가 다시 실행해 보세요. 설치 직후에는 터미널이 새로운 환경 변수를 인식하지 못하는 경우가 있습니다.

3-4. Node.js가 잘 동작하는지 테스트

터미널에서 바로 JavaScript 코드를 실행해 봅시다:

Node.js 설치 완료!가 출력되면 모든 준비가 된 것입니다.

💡 조금 더 알아보기 — npm과 패키지

**npm(Node Package Manager)**은 다른 개발자들이 만들어 놓은 코드(패키지 또는 라이브러리)를 쉽게 설치하고 관리할 수 있게 해주는 도구입니다.

예를 들어, React를 사용하려면 React 패키지를 설치해야 합니다. 이때 npm install react라고 터미널에 입력하면, npm이 인터넷에서 React 코드를 다운로드해서 내 프로젝트에 추가해 줍니다.

전 세계 개발자들이 공유한 패키지는 https://www.npmjs.com 에서 검색할 수 있습니다. 현재 200만 개 이상의 패키지가 등록되어 있습니다.

---

Part 4. Git & GitHub 설정하기

4-1. Git과 GitHub의 차이

이 두 가지는 이름이 비슷하지만 다른 것입니다:

Git이 내 컴퓨터에서 코드의 역사를 관리하는 도구라면, GitHub는 그 역사를 인터넷에 올려서 다른 사람과 공유할 수 있게 해주는 서비스입니다.

4-2. Git 설치

macOS

macOS에는 Git이 이미 설치되어 있는 경우가 많습니다. 터미널에서 확인해 봅시다:

버전이 나오면 이미 설치된 것입니다. command not found가 나오면 아래 명령어를 실행하세요:

팝업이 나타나면 "설치"를 클릭하고 기다리면 됩니다.

Windows

1. https://git-scm.com 에 접속합니다.
2. Download for Windows 버튼을 클릭합니다.
3. 다운로드된 파일을 실행하고 모든 옵션을 기본값 그대로 두고 설치합니다.

설치 후 터미널(VSCode 또는 Cursor)에서 확인합니다:

git version 2.x.x 같은 결과가 나오면 성공입니다.

4-3. Git 초기 설정

Git을 처음 설치하면 "나는 누구인지"를 설정해야 합니다. 이 정보는 코드를 저장할 때마다 "누가 이 변경을 했는지" 기록하는 데 사용됩니다.

터미널에서 아래 두 명령어를 입력하세요. 이름과 이메일은 자신의 것으로 바꿔주세요:

여기서 이메일은 GitHub 가입에 사용할 이메일과 동일한 것을 입력하는 것을 권장합니다.

설정이 잘 되었는지 확인해 봅시다:

user.name=홍길동, user.email=gildong@example.com이 나오면 됩니다.

4-4. GitHub 회원가입

1. https://github.com 에 접속합니다.
2. Sign up 버튼을 클릭합니다.
3. 이메일, 비밀번호, 사용자명을 입력합니다.

사용자명(Username) 정하기 팁:

• 영문, 숫자, 하이픈(-)만 사용 가능합니다.
• 이 사용자명이 내 GitHub 주소가 됩니다. (예: https://github.com/gildong)
• 나중에 바꿀 수 있지만, 처음부터 깔끔하게 정하는 것이 좋습니다.
• 본명 또는 본명의 영문 표기를 사용하는 것을 추천합니다. (예: gildong-hong, honggildong)

1. 이메일 인증을 완료하면 가입이 끝납니다.

4-5. Repository(레포지토리) 만들기

**Repository(레포지토리)**는 하나의 프로젝트를 담는 폴더입니다. 줄여서 **"레포"**라고 부릅니다.

GitHub에서 레포를 만들어 봅시다:

1. GitHub에 로그인한 상태에서, 오른쪽 상단의 + 버튼 → New repository를 클릭합니다.
2. 아래 항목을 입력합니다:

1. Create repository 버튼을 클릭합니다.

레포가 생성되면 https://github.com/사용자명/my-first-repo 주소로 이동합니다. README.md 파일이 하나 있는 화면이 보이면 성공입니다.

4-6. 내 컴퓨터에 레포 가져오기 (Clone)

방금 GitHub에 만든 레포를 내 컴퓨터로 가져와 봅시다. 이 과정을 **Clone(클론)**이라고 합니다.

1. GitHub 레포 페이지에서 초록색 Code 버튼을 클릭합니다.
2. HTTPS 탭에 있는 URL을 복사합니다. (예: https://github.com/gildong/my-first-repo.git)
3. VSCode(또는 Cursor)의 터미널에서 아래 명령어를 실행합니다:

이 명령어는 바탕화면으로 이동하는 것입니다. 원하는 위치가 있다면 해당 경로로 변경해도 됩니다.

URL은 본인의 레포 주소로 바꿔주세요.

1. 클론이 완료되면, 해당 폴더를 VSCode로 열어봅시다:

Cursor를 사용하는 경우 cursor .으로 대체하면 됩니다.

VSCode가 열리고, Explorer에 README.md 파일이 보이면 성공입니다.

4-7. 코드를 수정하고 GitHub에 올려보기

실제로 파일을 수정하고 GitHub에 올리는 과정을 경험해 봅시다. 이 과정은 add → commit → push 3단계입니다.

Step 1: 파일 수정하기

VSCode에서 README.md 파일을 열고, 아래 내용으로 바꿔봅시다:

Ctrl + S (저장)를 누릅니다.

Step 2: 변경 사항 기록하기

터미널에서 아래 명령어를 순서대로 실행합니다:

이 명령어는 "변경된 모든 파일을 기록 대상에 추가한다"는 뜻입니다.

이 명령어는 "변경 사항을 하나의 기록(commit)으로 저장한다"는 뜻입니다. -m 뒤의 메시지는 이 변경이 무엇인지 설명하는 것입니다.

Step 3: GitHub에 올리기

이 명령어는 "내 컴퓨터의 기록을 GitHub에 올린다"는 뜻입니다.

처음 push할 때 GitHub 로그인을 요구할 수 있습니다. 브라우저 팝업이 나타나면 GitHub에 로그인하고 권한을 허용해 주세요.

완료되면, GitHub 레포 페이지를 새로고침해 보세요. README.md의 내용이 업데이트된 것을 확인할 수 있습니다.

💡 조금 더 알아보기 — add, commit, push가 왜 3단계인가?

하나의 명령어로 바로 올리면 더 편할 것 같은데, 왜 3단계로 나뉘어 있는지 궁금할 수 있습니다.

택배를 보내는 과정에 비유하면 이해하기 쉽습니다:

Git 명령어	택배 비유	설명
git add	택배 상자에 물건 넣기	어떤 파일을 기록할지 선택하는 단계
git commit	상자 포장하고 송장 붙이기	선택한 파일들을 하나의 기록으로 묶는 단계
git push	택배 발송하기	기록을 GitHub(원격 저장소)에 보내는 단계

add 단계가 있는 이유는 모든 변경 사항을 한꺼번에 올리지 않고, 의미 있는 단위로 나누어 기록하기 위해서입니다. 예를 들어 로그인 기능과 회원가입 기능을 동시에 만들었더라도, "로그인 기능 추가"와 "회원가입 기능 추가"를 각각 별도의 commit으로 나눌 수 있습니다.

4-8. GitHub 프로필 꾸미기 (선택)

GitHub에는 자기만의 프로필을 꾸밀 수 있는 기능이 있습니다. 사용자명과 동일한 이름의 레포를 만들면 됩니다.

1. GitHub에서 새 레포를 만듭니다.
2. Repository name에 본인의 사용자명을 입력합니다. (예: 사용자명이 gildong이면 gildong)
3. "✨ This is a special repository" 라는 안내가 나타나면 올바르게 입력한 것입니다.
4. Add a README file 을 체크하고 생성합니다.

이 레포의 README.md에 작성하는 내용이 GitHub 프로필 메인에 표시됩니다. 나중에 시간이 날 때 꾸며보세요.

---

마무리

여기까지 따라왔다면, 개발을 시작하기 위한 모든 준비가 끝났습니다.

지금 내 컴퓨터에는 아래 도구들이 설치되어 있습니다:

앞으로 AI를 활용해서 다양한 실습과 개념을 콘텐츠로 만들어서 제공할 예정입니다!

📌 이 글에서 설치한 것 정리

• VSCode — 코드를 작성하는 편집기. Prettier로 자동 포맷팅 설정까지 완료.
• Cursor — AI가 내장된 코드 편집기. 평소 개발 시 메인으로 사용.
• Node.js (LTS) — JavaScript를 내 컴퓨터에서 실행. npm으로 패키지 관리.
• Git — 코드 변경 이력을 관리하는 도구. add → commit → push 흐름.
• GitHub — 코드를 온라인에 저장하는 서비스. 레포 생성, clone, push까지 완료.