트래픽, 깃, 깃헙, 노드, npm에 대해 간단한 설명

1. 깃헙 페이지로 호스팅 하기
양권성
사전자료

2. 트래픽
▸ 파일 용량은 가정한 것임,
이 외에도 js 파일, css 파일 등등도 다 트래픽에 포함됨.
▸ 자신의 호스팅에 올라간 파일이 아닌 외부 자원을 쓴 경우에는
트래픽에 미포함됨. (소스코드 상의 구글 로고 이미지 같은)
▸ html 소스 코드: 1MB
▸ 404.jpg: 2MB
▸ video.mp4: 7MB
▸ 1명 방문시 트래픽 1+2+7 = 10MB 발생
▸ 5명 방문시 트래픽 50 MB 발생

3. 트래픽 초과
전 페이지에 이어서…
▸ 무료 계정인 경우 일일 트래픽이란 게 존재함.
▸ 일일 트래픽이 50MB인 경우 6명부터
트래픽 초과, 페이지 접속 불가.
▸ 트래픽을 수동으로 초기화해줘야 함.
▸ 24시간 모니터링 할 것인가…?
▸ 그에 대한 해답은 세미나에서!

4. 기존 방식의 문제점 - 버전 관리
▸ 우리에게 필요한 것은 단 하나의 최종 버전 html 파일
▸ 하지만 우리의 갑(클라이언트, 의뢰자)님께서는 변덕이
심하여 갑님께 보여드릴 여러 시안과 그 시안에 따라 여러
버전이 등장하게 됨.
▸ 그 버전을 구분하고자 날짜, 수정, 최종본 등등 여러 키워
드를 붙이지만 직접 파일을 까보기 전에는 정확한 결과물
을 예측 할 수가 없음.

5. 구세주 - GIT

6. GIT - 버전 관리
▸ git이란 프로그램을 쓰면 파일은 하나인데 그 하나의 파일에 대
해 로그(기록)을 남겨 어떤 변경 사항이 있는지 남길 수 있음.
▸ 해당 로그만을 보고 좌측의 해시코드를 가지고 왔다리 갔다리
자유롭게 할 수 있음.
▸ 하지만 깃은 자신의 컴퓨터, 즉 로컬에서만 쓸 수 있어서 타인과
협업을 하거나 다른 컴퓨터, 혹은 포맷에 대한 대비가 돼있지 않
음.

7. 구세주 - GITHUB
▸ github은 로컬에 있는 git을 웹으로 고대로 옮겼다고
보면 됨.

8. GITHUB - 버전 관리

9. GITHUB - 파일 비교
▸ 현재 버전이 이전 버전과 어떤 내용이 삭제/추가 됐는지를 보여줌.
▸ 물론 git(로컬)에서도 가능하지만 웹페이지에서 보는 게 더 직관적

10. NODE.JS란…?
▸ 서버가 아니라 자바스크립트 실행 환경
▸ 즉, 브라우저 밖에서도 자바스크립트를 실행할 수
있음.
▸ 서버를 구동하기 위해서는 http와 같은 모듈을 사용
해야 함.
▸ 윈도우의 명령 프롬프트(CMD)와 맥의 터미널에서
실행할 수 있음.

11. NODE.JS란…?
▸ 노드js 설치 후 윈도우의 CMD, 맥의 터미널을 키고,
node라고 치면 바로 노드를 실행할 수 있다.
▸ 변수 선언, 표현식 사용 전부 가능 (물론 서버 구축도)
▸ 하지만 브라우저가 아니기 때문에 브라우저에서 제공
해주는 alert, confirm과 같은 함수는 사용 불가.

12. NPM(NODE PACKAGE MANAGER)이란…?
▸ 패키지 = 잘 만들어 놓은 모듈을 패키징한 것.
▸ 하나의 모듈이 하나의 패키지가 될 수도 있고, 여러 모듈이 하
나의 패키지가 될 수도 있음.
▸ npm은 여러 패키지들이 저장된 저장소임.
▸ 여기서 jquery나 bxslider 같은 애들 설치해서 쓰면 됨, 공식
홈페이지 가서 다운받고 cdn에서 파일 주소 복붙할 필요가 사
라짐.
▸ node 란 이름이 들어갔으니 노드 안에서 실행됨, 즉 cmd나 터
미널을 키고 거기서 실행하면 됨!

13. NPM(NODE PACKAGE MANAGER)이란…?

14. 기존 방법으로 모듈 삽입

15. NPM을 이용한 모듈 삽입
▸ 모듈 검색하기

16. NPM을 이용한 모듈 삽입
▸ 모듈 버전 검색하기

17. NPM을 이용한 모듈 삽입
▸ 모듈 설치하기

18. NPM을 이용한 모듈 삽입
▸ 모듈 삽입하기(JS)
script.js 파일

19. NPM을 이용한 모듈 삽입
▸ 모듈 사용하기
물론 npm의 다른 패키지인 웹팩 2를 사용해야 예제와 같이(물론 많은
과정은 생략됐다고 보면 됨.) 사용할 수 있는데 단적인 예를 보여주고자
예를 든 것임. 절대 제이쿼리 모바일만 설치해서는 이런 방식으로는
작동하지 않음.