OT, 개발환경 세팅 및
GitHub
프로그래밍을 처음 시작하는 분들을 위한 풀스택 웹 개발 입문 스터디입니다. 오늘은 개발에 필요한 도구를 설치하고, Git과 GitHub의 기본을 배웁니다.
웹 서비스 이해하기
브라우저에 주소를 입력하면 어떤 일이 벌어질까요?
사용자
브라우저에 주소 입력
프론트엔드
화면을 보여줌
백엔드
데이터를 처리
데이터베이스
데이터를 저장/조회
식당에 비유하면?
프론트엔드
= 식당의 홀
손님이 보는 메뉴판, 인테리어, 주문 화면
Next.js백엔드
= 식당의 주방
주문을 받아 요리를 만드는 곳
Nest.js데이터베이스
= 냉장고
재료(데이터)를 보관하는 곳
PostgreSQL개발 환경 세팅
Visual Studio Code는 개발자들이 가장 많이 사용하는 코드 편집기입니다. 무료이며, 다양한 확장 기능을 제공합니다.
설치 후 확인할 것
폴더 열기
File → Open Folder로 프로젝트 폴더를 엽니다
터미널 열기
Ctrl + ` (백틱)으로 내장 터미널을 엽니다
확장 프로그램
왼쪽 사이드바에서 확장 프로그램 탭을 확인합니다
Git 기본 개념
😵 이런 경험 있으시죠?
✨ Git이 해결합니다!
버전 관리
모든 변경 이력을 자동으로 기록
되돌리기
언제든 이전 버전으로 복원 가능
협업
여러 사람이 동시에 작업 가능
핵심 개념 3가지
Repository (저장소)
프로젝트의 모든 파일과 변경 이력이 저장되는 공간입니다. 하나의 프로젝트 = 하나의 Repository.
my-project/
├── .git/ ← Git이 관리하는 숨김 폴더
├── index.html
├── style.css
└── README.mdGit 설치 및 초기 설정
$ git config --global user.name "홍길동"
$ git config --global user.email "hong@email.com"
# 설정 확인
$ git config --list--global 옵션은 이 컴퓨터의 모든 프로젝트에 동일하게 적용됩니다.GitHub 첫 Push
Git vs GitHub
Git
내 컴퓨터에서 버전을 관리하는 도구
GitHub
온라인에 코드를 올리고 공유하는 서비스
GitHub 레포지토리 생성
github.com에 접속 & 로그인
오른쪽 상단 '+' 버튼 → New repository
Repository name 입력
예: my-first-repo
Public 선택
Create repository 클릭
실습: 첫 번째 Push!
mkdir my-first-repocd my-first-repogit initecho "# My First Repo" > README.mdgit add README.mdgit commit -m "first commit"git remote add origin <URL>git push -u origin mainGit 워크플로우
Working Directory
작업 폴더
Staging Area
준비 영역
Repository
저장소 (Local)
git push로컬 저장소의 커밋을 GitHub(원격 저장소)에 업로드합니다오늘 배운 것
NEXT WEEK
npm과 Next.js로 진짜 프로젝트를 시작합니다!
npm 기본 사용법 · Next.js 프로젝트 생성 · 기본 페이지 & 라우팅