개발 환경 세팅
사이트를 만들기 전에, 우리가 앞으로 사용할 몇 가지 필수 도구를 준비해두어야 합니다.
이 도구들은 모두 무료이며, 한 번만 설정해두면 이후 과정이 훨씬 편해집니다.
다만 Cursor의 경우에는 일주일 무료체험기간이 있고 이후엔 결제가 필요합니다.
입문 단계시라면 무료체험이 종료되었을 때 Pro 플랜부터 구독하시는 것을 추천합니다.
1. Cursor 세팅
Cursor(커서) 는 최근 많은 개발자들이 사용하는 AI 기반 코딩 도구입니다.
쉽게 말해 “코드를 대신 써주는 인공지능”이라고 생각하면 됩니다.
직접 코드를 작성하지 않아도, “이런 사이트를 만들어줘”라고 말하면 AI가 자동으로 코드를 만들어줍니다.
요약하자면 Cursor는 “코드 편집기 + 인공지능 팀원”입니다.
복잡한 코드를 몰라도 사이트 제작 과정을 빠르게 진행할 수 있습니다.
설치 후 실행해주세요.
실행 후 회원가입을 진행해주세요.
회원가입을 완료하면, Preferences에서
Chat Language를 Korean으로 바꾸고 Continue를 눌러주세요.
Appearance에선 IDE Layout을 선택해주고, Continue를 눌러주세요.
세팅이 완료되면, 아래와 같은 화면이 나올 것입니다.
이제 Cursor 세팅은 끝났습니다.
2. Github 세팅
Github(깃허브) 는 ‘내가 만든 파일과 코드를 안전하게 저장하고, 버전별로 관리할 수 있는 온라인 저장소’입니다.
쉽게 말해 “코드를 위한 구글 드라이브” 같은 곳입니다.
Cursor에서 작업한 내용은 내 컴퓨터 안에도 저장되지만, Github에 올려두면 인터넷상에서도 안전하게 보관할 수 있습니다.
그래서 나중에 다른 컴퓨터에서 작업을 이어가거나, 파일이 날아가더라도 Github에서 언제든 다시 내려받을 수 있습니다.
Github은 “내 코드를 언제, 어디서든 꺼내 쓸 수 있게 해주는 온라인 폴더를 제공하는 서비스”입니다.
Cursor는 “그 폴더 안에서 AI와 함께 작업하는 프로그램”입니다.
즉, Cursor에서 수정한 파일을 바로 Github에 업로드할 수도 있고,
Github에 저장된 최신 파일을 Cursor로 불러와 이어서 작업할 수도 있습니다.
https://github.com 에 접속한 후, Sign up 버튼을 눌러 회원가입을 진행해주세요.
다운로드 버튼을 누르고, 파일을 실행시켜줍니다.
Sign in to GIthub.com을 클릭합니다.
Use my GIthub account name and email address를 선택하고 Finish를 눌러줍니다.
Create a New Repository on your local drive… 을 클릭해줍니다.
Repository란 저장소로, 쉽게 말해 구글 드라이브의 폴더 하나라고 보시면 됩니다.
현재는 우리 PC에만 있는 파일을, Github에 업로드하겠다. 라는 의미입니다.
바탕화면 또는 원하는 위치를 지정해주세요.
그 후 아래 세팅과 같이 하고 Create Repository 버튼을 눌러줍니다.
Publish repository를 눌러줍니다.
Keep this code private 옵션을 체크해준 후 Publish repository 버튼을 클릭합니다.
이제
github.com 으로 가보면, 우리가 만든 repository가 보일 것입니다.
이제 첨부자료인 skeleton 프로젝트를 만드신 repository 폴더로 옮겨주세요.
그리고 github desktop을 다시 보면, 추가된 파일 목록이 보이실 겁니다.
commit 해보겠습니다.
“이 파일들로 작업을 완성하겠다!” 라고 생각하시면 됩니다.
push 하겠습니다. “정말 Github에 올리겠다” 라는 의미로 보시면 됩니다.
Github에 잘 올라온 것을 볼 수 있습니다.
이제 Cursor에서, Open project 버튼을 클릭합니다.
그리고 아까 만든 repository 폴더를 선택합니다.
그리고 표시된 버튼들을 눌러줍니다.
버튼들을 누르면 이런 레이아웃이 보일 것입니다.
좌측은 우리 프로젝트의 코드 파일들이고 우측은 AI에게 일을 시킬 수 있는 대화창입니다.
이제 정말 일을 맡길 수 있는 상태가 된 것입니다.
아래는 시험삼아 AI에게 이 프로젝트의 구성에 대해 설명해달라고 시켜본 결과입니다.
동작 방식 요약에서 알 수 있듯, 여러분은 개발하시면서 아래 두 명령어를 자주 쓰시게 될 것입니다.
npm run dev: 로컬(내 컴퓨터) 환경에서 서버를 실행하여 사이트가 정상적으로 작동하는지 테스트합니다.
npm run build: 실제 인터넷에 배포하기 전에, 사이트를 배포 가능한 형태로 미리 완성(빌드)합니다.
쉽게 말해,
npm run dev는 내 컴퓨터에서 미리 보기,
npm run build는 인터넷에 올릴 준비가 되었는지 확인하는 단계라고 생각하시면 됩니다.
3. NPM 설치
npm은 Node Package Manager의 줄임말로, 사이트 만들 때 필요한 재료들을 가져오는 프로그램이라고 생각하시면 됩니다.
npm 명령어를 실행하기 위해서는, Node.js를 설치해야 합니다.
본인의 환경에 맞는 파일을 다운로드하고 실행시켜서 설치해주세요.
버튼을 눌러주세요. 터미널 창이 열립니다.
이후 아래 명령어들을 입력해주세요.
이후, pwd 명령어를 입력해주세요.
현재 어느 위치에서 작업하고 있는지 경로를 볼 수 있습니다.
만들었던 레포지토리에 위치해있을 수 있는데, skeleton 폴더로 이동해야 합니다.
cd 명령어를 이용해 skeleton 폴더로 이동해주세요.
(cd ske 까지만 입력 후 tab 키를 누르시면 자동완성이 될 겁니다.)
npm install을 입력해주세요.
필요한 도구나 라이브러리를 설치하는 명령어입니다.
npm run dev 명령어를 실행해보겠습니다.
https://localhost:3000 으로 접속 시, 아래와 같은 화면이 보이면 개발 서버 구동이 성공적으로 된 것이고,
개발할 준비가 완료된 것입니다.
4. Cloudflare 회원가입
Cloudflare(클라우드플레어) 는 ‘내가 만든 사이트를 전 세계 어디서든 빠르고 안전하게 보여주는 서비스’입니다.
우리가 만든 사이트는 결국 인터넷에 “주소(도메인)”를 붙여야 실제로 접속할 수 있습니다.
Cloudflare는 바로 이 과정을 대신 도와주는 역할을 합니다.
쉽게 말해 “우리 사이트를 세상과 연결해주는 관문”이라고 할 수 있습니다.
Cloudflare는 단순히 “사이트를 올려주는 공간”이 아닙니다.
한 번만 연결해두면, 코드를 수정할 때마다 자동으로 사이트가 업데이트되는 ‘자동 배포’ 시스템을 제공합니다.
예를 들어, Cursor에서 코드를 수정하고, 이를 Github에 저장(push)만 하면 Cloudflare가 이를 감지해 자동으로 최신 버전을 배포합니다. 즉, 별도의 수동 업로드 없이 저장 = 즉시 배포가 이루어지는 구조입니다.
즉, Cloudflare는 “코드를 수정할 때마다 사이트를 자동으로 업데이트해주는 배포 플랫폼”입니다.
- Cloudflare 회원가입/로그인 후 컴퓨팅(Workers) 혹은 컴퓨팅 및 AI 에서 Workers 및 Pages를 클릭합니다.
- 응용 프로그램 생성 버튼을 클릭합니다.
- 리포지토리 가져오기 시작 버튼을 클릭합니다.
- 새로운 GIthub 연결 클릭, 연동해두었던 Github repository와 연결합니다.
- 프로젝트 이름은 원하는 대로 설정해주세요.
빌드 및 배포 명령은 아래 스크린샷처럼 수정 후 생성 및 배포 버튼을 클릭합니다.
이제 해당 프로젝트는 수정 후 commit, push를 할 때마다 자동으로 사이트에 변경사항이 반영될 것입니다.
