프론트엔드 개발 환경 세팅: VS Code와 Git으로 건축 준비 끝!
혹시 수십억 원이 오가는 재건축 현장에서, 설계도를 이면지에 대충 연필로 그리고 지우개로 벅벅 지우는 현장 소장님을 본 적 있으신가요? 상상만 해도 아찔하시죠. 작은 바람만 불어도 도면이 날아가고, 어제 수정한 배관 위치가 어디였는지 기억나지 않아 공사 전체가 마비될 것이 뻔합니다.
코딩도 이와 정확히 같습니다. 프론트엔드 개발이라는 거대한 디지털 건축물을 올리기 전, 가장 먼저 해야 할 일은 '최첨단 설계 사무소'를 차리고 '완벽한 도면 관리 시스템'을 도입하는 것입니다. 맨손으로 땅을 팔 수는 없는 노릇이니까요.
지난 6편에서는 자바스크립트의 비동기 처리(Async/Await)를 통해 데이터 통신 중에도 멈춤 없는 쾌적한 웹 환경, 즉 '지연 없는 스마트홈 시스템'을 구축하는 법을 배웠습니다. 이제 다음 단계인 현대 웹 개발의 표준, React(리액트)라는 '모듈형 조립식 아파트'를 본격적으로 짓기 전에 우리의 작업 공간부터 완벽하게 세팅해보겠습니다. 오늘 알아볼 핵심은 바로 개발자들의 영혼의 단짝, VS Code와 Git/GitHub입니다.
VS Code: 내 손안의 최첨단 설계 사무소
부동산을 개발하려면 쾌적하고 장비가 잘 갖춰진 사무실이 필요하듯, 프론트엔드 개발자에게는 코드를 작성할 훌륭한 '에디터(Editor)'가 필요합니다. 과거에는 메모장이나 무거운 통합개발환경(IDE)을 썼지만, 현재 전 세계 개발자의 70% 이상이 마이크로소프트에서 만든 Visual Studio Code(VS Code)를 사용하고 있습니다.
VS Code는 단순히 글씨를 쓰는 메모장이 아닙니다. 오타를 실시간으로 잡아주고, 필요한 자재(코드)를 자동 완성해 주며, 도면(화면)이 어떻게 구현될지 미리 보여주는 '최첨단 홀로그램 설계 데스크'와 같습니다.
부동산 전문가가 추천하는 필수 VS Code 확장 프로그램(Extensions)
VS Code의 진정한 강력함은 '확장 프로그램'에서 나옵니다. 빈 사무실에 최신식 복합기와 커피머신을 들여놓듯, 아래의 플러그인들을 설치하면 개발 효율이 수십 배 상승합니다.
- Live Server: 코드를 수정하고 저장하는 순간, 인터넷 브라우저에 변경 사항이 실시간으로 반영됩니다. 마치 모델하우스의 벽지 색을 바꾸자마자 실제 방의 벽지가 스르륵 변하는 것과 같은 마법을 경험할 수 있습니다.
- Prettier - Code formatter: 여러 명의 인부(개발자)가 각자의 글씨체로 도면을 그려도, 저장 버튼 하나만 누르면 업계 표준의 깔끔한 폰트와 간격으로 도면을 싹 정리해 줍니다. 유지보수를 위한 필수 템입니다.
- Material Icon Theme: 수백 개의 파일과 폴더에 직관적인 아이콘(이미지, 문서, 스크립트 등)을 달아줍니다. 복잡한 건축 자재 창고에 깔끔하게 라벨링을 하는 작업이죠.
Git: 절대 지워지지 않는 마법의 건축물 대장
자, 훌륭한 사무실(VS Code)을 차렸으니 이제 도면을 그려볼 차례입니다. 그런데 문제가 하나 있습니다. 어제 거실을 넓히는 도면을 그렸는데, 오늘 건축주가 갑자기 "아니요, 그냥 예전처럼 방을 3개로 해주세요"라고 변덕을 부립니다. 만약 Ctrl + Z(실행 취소)를 수백 번 눌러야 한다면 멘탈이 바사삭 부서지겠죠?
이때 필요한 것이 바로 Git(깃)입니다. Git은 파일의 변경 사항을 시간순으로 완벽하게 기록해 주는 '분산 버전 관리 시스템(VCS)'입니다. 부동산으로 치면, 건물의 설계가 변경될 때마다 그 이력을 빠짐없이 기록해 두는 '마법의 건축물 대장'인 셈입니다.
Git의 3가지 핵심 개념: 부동산 실무로 이해하기
- Commit (도면 확정 도장 찍기): "2023년 10월 24일, 안방 화장실 타일 색상 변경"이라는 메모와 함께 현재 설계도의 상태를 찰칵 사진 찍어 보관하는 행위입니다. 언제든 이 도장이 찍힌 시점으로 타임머신을 타고 돌아갈 수 있습니다.
- Branch (평행 우주 모델하우스 짓기): 건물의 뼈대는 그대로 둔 채, A동에는 수영장을, B동에는 옥상 정원을 지어보고 싶을 때가 있습니다. 원본 도면(Main Branch)을 건드리지 않고, 안전하게 새로운 아이디어를 테스트해 볼 수 있는 '복제본 도면'을 만드는 기능입니다. 테스트가 성공적이면 원본에 합치고(Merge), 망하면 그냥 복제본만 찢어버리면 됩니다.
- Merge (최종 설계도 병합하기): 전기팀이 수정한 배관 도면(Branch A)과 인테리어팀이 수정한 벽지 도면(Branch B)을 충돌 없이 하나의 마스터 도면으로 합치는 작업입니다.
핵심 포인트: Git을 사용하면 파일 이름을최종_도면.html,진짜_최종_도면.html,이게_마지막_도면.html처럼 지저분하게 관리할 필요가 전혀 없습니다!
GitHub: 전 세계 시공사가 모이는 클라우드 설계소
많은 초보 개발자분들이 Git과 GitHub(깃허브)를 헷갈려하십니다. 쉽게 정리해 드릴게요. Git이 내 컴퓨터 안에서만 작동하는 '개인 건축물 대장'이라면, GitHub는 이 대장들을 인터넷(클라우드)에 올려 전 세계 사람들과 공유할 수 있는 '온라인 모델하우스 전시관이자 공동 작업장'입니다.
대규모 아파트 단지를 건설할 때, 서울에 있는 설계팀, 부산에 있는 구조팀, 제주도에 있는 디자인팀이 하나의 도면을 보고 실시간으로 협업해야 합니다. 내 컴퓨터에만 있는 Git 기록을 GitHub라는 클라우드에 올려두면(Push), 다른 팀원들이 그 도면을 다운로드(Pull)하여 이어서 작업할 수 있습니다.
Git vs GitHub, 한눈에 비교하기
| 구분 | Git (깃) | GitHub (깃허브) |
|---|---|---|
| 정의 | 버전 관리 '프로그램' (소프트웨어) | Git을 저장해 주는 클라우드 '서비스' |
| 작업 공간 | 내 컴퓨터 (로컬) | 인터넷 (원격 저장소) |
| 부동산 비유 | 나만의 비밀 건축물 대장 기록부 | 국토교통부의 공개 건축물 대장 열람 시스템 |
실전 시나리오: 내 첫 번째 설계도 안전하게 보관하기
자, 이제 이론을 알았으니 직접 행동으로 옮겨볼까요? 아래의 3단계 시나리오를 따라 내 코드를 안전하게 클라우드에 보관해 보세요.
Step 1. Git 초기화 (건축물 대장 만들기)
VS Code의 터미널(명령창)을 열고 git init을 입력합니다. 이제 이 폴더 안에서 일어나는 모든 파일의 변화를 Git이 감시하기 시작합니다.
Step 2. Add와 Commit (변경 사항 기록하기)
새로운 HTML 파일을 만들고 코드를 작성했습니다. git add . 명령어로 변경된 파일을 장바구니에 담고, git commit -m "메인 페이지 레이아웃 완성"을 입력하여 도장을 쾅 찍습니다. 이력서에 남길 첫 번째 기록이 완성되었습니다.
Step 3. GitHub에 Push (클라우드에 도면 올리기)
GitHub 웹사이트에 접속해 새로운 Repository(저장소)를 만듭니다. 그리고 내 컴퓨터의 Git과 GitHub를 연결한 뒤, git push origin main을 입력합니다. 성공입니다! 이제 컴퓨터가 고장 나도 여러분의 소중한 도면은 GitHub에 안전하게 보관되어 있습니다.
마무리하며: 튼튼한 기초 공사가 명품 아파트를 만듭니다
오늘 우리는 프론트엔드 개발 환경 세팅의 핵심인 VS Code와 Git/GitHub에 대해 알아보았습니다. 처음에는 매번 Commit을 하고 Push를 하는 과정이 마치 구청에 가서 서류를 떼는 것처럼 번거롭게 느껴질 수 있습니다. 하지만 이 안전장치가 습관이 되면, 수만 줄의 코드를 작성하는 대형 프로젝트에서도 두려움 없이 코드를 수정하고 혁신적인 기능을 추가할 수 있습니다.
자, 완벽한 최첨단 설계 사무소 세팅이 끝났습니다. 도면을 잃어버릴 걱정도 사라졌죠. 다음 8편에서는 드디어 오늘 세팅한 완벽한 환경 위에서, 현대 웹 개발의 꽃이자 전 세계 1위 프레임워크인 React(리액트)의 기초와 모듈형 컴포넌트 개발 방식을 본격적으로 파헤쳐 보겠습니다. 모듈식 조립 아파트가 어떻게 지어지는지, 다음 시간에도 기대해 주세요!