ݺߣ

ݺߣShare a Scribd company logo

깃헙 페이지로 호스팅 하기 사전 자료

•
•
권
권성 양

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

1 of 19
Download to read offline
깃헙 페이지로 호스팅 하기 양권성 사전자료
트래픽 ▸ 파일 용량은 가정한 것임,
 이 외에도 js 파일, css 파일 등등도 다 트래픽에 포함됨. ▸ 자신의 호스팅에 올라간 파일이 아닌 외부 자원을 쓴 경우에는
 트래픽에 미포함됨. (소스코드 상의 구글 로고 이미지 같은) ▸ html 소스 코드: 1MB ▸ 404.jpg: 2MB ▸ video.mp4: 7MB ▸ 1명 방문시 트래픽 1+2+7 = 10MB 발생 ▸ 5명 방문시 트래픽 50 MB 발생
트래픽 초과 전 페이지에 이어서… ▸ 무료 계정인 경우 일일 트래픽이란 게 존재함. ▸ 일일 트래픽이 50MB인 경우 6명부터 트래픽 초과, 페이지 접속 불가. ▸ 트래픽을 수동으로 초기화해줘야 함. ▸ 24시간 모니터링 할 것인가…? ▸ 그에 대한 해답은 세미나에서!
기존 방식의 문제점 - 버전 괶리 ▸ 우리에게 필요한 것은 단 하나의 최종 버전 html 파일 ▸ 하지만 우리의 갑(클라이언트, 의뢰자)님께서는 변덕이 심하여 갑님께 보여드릴 여러 시안과 그 시안에 따라 여러 버전이 등장하게 됨. ▸ 그 버전을 구분하고자 날짜, 수정, 최종본 등등 여러 키워 드를 붙이지만 직접 파일을 까보기 전에는 정확한 결과물 을 예측 할 수가 없음.
구세주 - GIT
GIT - 버전 괶리 ▸ git이란 프로그램을 쓰면 파일은 하나인데 그 하나의 파일에 대 해 로그(기록)을 남겨 어떤 변경 사항이 있는지 남길 수 있음. ▸ 해당 로그만을 보고 좌측의 해시코드를 가지고 왔다리 갔다리 자유롭게 할 수 있음. ▸ 하지만 깃은 자신의 컴퓨터, 즉 로컬에서만 쓸 수 있어서 타인과 협업을 하거나 다른 컴퓨터, 혹은 포맷에 대한 대비가 돼있지 않 음.
구세주 - GITHUB ▸ github은 로컬에 있는 git을 웹으로 고대로 옮겼다고 보면 됨.
GITHUB - 버전 괶리
GITHUB - 파일 비교 ▸ 현재 버전이 이전 버전과 어떤 내용이 삭제/추가 됐는지를 보여줌. ▸ 물론 git(로컬)에서도 가능하지만 웹페이지에서 보는 게 더 직관적
NODE.JS란…? ▸ 서버가 아니라 자바스크립트 실행 환경 ▸ 즉, 브라우저 밖에서도 자바스크립트를 실행할 수 있음. ▸ 서버를 구동하기 위해서는 http와 같은 모듈을 사용 해야 함. ▸ 윈도우의 명령 프롬프트(CMD)와 맥의 터미널에서 실행할 수 있음.
NODE.JS란…? ▸ 노드js 설치 후 윈도우의 CMD, 맥의 터미널을 키고, node라고 치면 바로 노드를 실행할 수 있다. ▸ 변수 선언, 표현식 사용 전부 가능 (물론 서버 구축도) ▸ 하지만 브라우저가 아니기 때문에 브라우저에서 제공 해주는 alert, confirm과 같은 함수는 사용 불가.
NPM(NODE PACKAGE MANAGER)이란…? ▸ 패키지 = 잘 만들어 놓은 모듈을 패키징한 것. ▸ 하나의 모듈이 하나의 패키지가 될 수도 있고, 여러 모듈이 하 나의 패키지가 될 수도 있음. ▸ npm은 여러 패키지들이 저장된 저장소임. ▸ 여기서 jquery나 bxslider 같은 애들 설치해서 쓰면 됨, 공식 홈페이지 가서 다운받고 cdn에서 파일 주소 복붙할 필요가 사 라짐. ▸ node 란 이름이 들어갔으니 노드 안에서 실행됨, 즉 cmd나 터 미널을 키고 거기서 실행하면 됨!
NPM(NODE PACKAGE MANAGER)이란…?
기존 방법으로 모듈 삽입
NPM을 이용한 모듈 삽입 ▸ 모듈 검색하기
NPM을 이용한 모듈 삽입 ▸ 모듈 버전 검색하기
NPM을 이용한 모듈 삽입 ▸ 모듈 설치하기
NPM을 이용한 모듈 삽입 ▸ 모듈 삽입하기(JS) script.js 파일
NPM을 이용한 모듈 삽입 ▸ 모듈 사용하기 물론 npm의 다른 패키지인 웹팩 2를 사용해야 예제와 같이(물론 많은 과정은 생략됐다고 보면 됨.) 사용할 수 있는데 단적인 예를 보여주고자 예를 든 것임. 절대 제이쿼리 모바일만 설치해서는 이런 방식으로는 작동하지 않음.

More Related Content

깃헙 페이지로 호스팅 하기 사전 자료

  • 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 파일 ▸ 하지만 우리의 갑(클라이언트, 의뢰자)님께서는 변덕이 심하여 갑님께 보여드릴 여러 시안과 그 시안에 따라 여러 버전이 등장하게 됨. ▸ 그 버전을 구분하고자 날짜, 수정, 최종본 등등 여러 키워 드를 붙이지만 직접 파일을 까보기 전에는 정확한 결과물 을 예측 할 수가 없음.
  • 6. GIT - 버전 괶리 ▸ git이란 프로그램을 쓰면 파일은 하나인데 그 하나의 파일에 대 해 로그(기록)을 남겨 어떤 변경 사항이 있는지 남길 수 있음. ▸ 해당 로그만을 보고 좌측의 해시코드를 가지고 왔다리 갔다리 자유롭게 할 수 있음. ▸ 하지만 깃은 자신의 컴퓨터, 즉 로컬에서만 쓸 수 있어서 타인과 협업을 하거나 다른 컴퓨터, 혹은 포맷에 대한 대비가 돼있지 않 음.
  • 7. 구세주 - GITHUB ▸ github은 로컬에 있는 git을 웹으로 고대로 옮겼다고 보면 됨.
  • 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나 터 미널을 키고 거기서 실행하면 됨!
  • 15. NPM을 이용한 모듈 삽입 ▸ 모듈 검색하기
  • 16. NPM을 이용한 모듈 삽입 ▸ 모듈 버전 검색하기
  • 17. NPM을 이용한 모듈 삽입 ▸ 모듈 설치하기
  • 18. NPM을 이용한 모듈 삽입 ▸ 모듈 삽입하기(JS) script.js 파일
  • 19. NPM을 이용한 모듈 삽입 ▸ 모듈 사용하기 물론 npm의 다른 패키지인 웹팩 2를 사용해야 예제와 같이(물론 많은 과정은 생략됐다고 보면 됨.) 사용할 수 있는데 단적인 예를 보여주고자 예를 든 것임. 절대 제이쿼리 모바일만 설치해서는 이런 방식으로는 작동하지 않음.