박미정의 깃 & 깃 허브 입문 4주차

1.깃/ 깃허브 기본 기능 실습하기 

1.1 프로젝트 기술 소개 

자바 스크립트 와 Node.js 기반으로 프로젝트를 생성하는데 필요한 기술과 설치 방법을 설명. 

자바스크립트 
ECmAScript 표준을 따르는 프로그래밍 언어. 예전에는 웹 브라우저 내에서 웹 페이즈를 동적으로 변경하는 목적으로 많이 사용되었지만 현재는 Node.js와 같은 런타임 환경에서 서버 프로그래밍 언어로도 많이 된다. 
이번 프로젝트에선 서버 프로그래밍 언어로 사용할것이다.

Nods.js 
Nods.js는 자바스크립트 코드를 해석하는 크롬 V8 엔진 기반 런타임이다. 즉 자바 스크립트로 웹 서버와 같은 애플리케이션을 개발을 할 수 있는 환경이다. 
참고로 설치시 npm이 자동으로 설치 된다. 

express.js

Nods.js를 위한 웹 애플리케이션 프레임워크이다. 간단한 웹 애플리케이션을 생성 할것이다.

 

1.2 프로젝트 실습 환경 구축하기 

먼저 Node.js를 홈페이지 접속 후 다운로드 

LTS 버전으로 다운로드 한다


그 다음 명령 ㅋ프롬프트를 열어 node -v를 입력한다 

node -v

 

그 다음 Express.js를 돕는 express-geberator를 설치 

npm install express-generator -g

 

-g는 글로벌을 의미하고 전체 프로젝트에서 사용할 수 있게 설치하는 의미 

설치가 완료된 후에는 express --version를 입력하여 버전이 출력되면 설치 완료

 express --version

 

express mastering-git-github --no-view 를 사용하여  별도의 템플릿 엔진을 사용하지 않게 됩니다.

express mastering-git-github --no-view

 

 

생성한 프로젝트에서 필요한 패키지를 설치합니다

npm istall

 

 

npm start 명령어로 서버를 실행합니다. 

npm start

 

웹브라우 저를 열은 후 locallhost:3000/에 접속하여 웹 애플리케이션이 정상적으로 동작하는지 확인합니다.

 

터미널를 실행하여 mastering-git-github에서 git init 명령어로 깃 지역 저장소를 설정 한 후 
git config로 사용자 이름과 이메일 주소를 넣어줍니다.

 

cat .git/config를 사용 하여 저장소에 정보를 확인 합니다. 

다음으로는 깃허브에 접속하여 mastering-git-github를 이름으로 새로운 저장소를 생성합니다.

그렇게 한 후 원격 저장소의 주소를 복사 하여 

지역 저장소에 origin이라는 식별자로 원격 저장소 주소를 등록합니다. 
origin 뒤에 오는 URL에는 복사한 주소를 넣어 줍니다.

 

또한 .gitignore라는 파일을 생성한 후에 필요 없는 파일을 명시 해 준후 

git status로 확인합니다. 

또한 git add로 파일을 추가 한 후 
git coomit으로 커밋을 해줍니다. 
커밋 메세지는 Add inital file and .gitignore 입니다.

 

이제 git push origin main으로 커밋을 푸시 합니다. 

git push origin main

 

결과

 

 

메인 페이지 타이틀 변경하기

 

npm start로 애플리케이션을 싱행 후 
index.html파일을 수정합니다. 

 

 

 

 

 

git add 와 git status로 index.html 파일을 커밋 대상으로 등록합니다. 

 

 

git commit으로 커밋을 수행 한 후 
커밋 메세지를 

change the title of main page로 바꿔줍니다. 

 

 

메인 페이지에 운영팀 연락처 추가하기 

 

 

 

이어서 위 단계 처럼 

git add 와 git status로 index.html 파일을 커밋 대상으로 등록합니다. 

 

git commit으로 커밋을 수행 한 후 
커밋 메세지를 Add hotline to mainpage를 해줍니다. 

 

마지막으로 git log , git push origin main으로 커밋 내역 확인 및 커밋을 등록합니다. 

 

 

커밋을 클릭 하면 총 3번의 커밋을 한 것을 확인 할 수 있습니다.