Session #4 Deploy

HufsGlobal·2021년 4월 28일
0

HUFSLION 9th 이야기

목록 보기
4/7
post-thumbnail

2021.04.28 (수)

세션 담당자 : 홍예은

네번째 세션에서는 시작하기에 앞서 지난주까지 진행했던 아이디어 위크를 기반으로 아이디어를 확정하고 아이디어 마다 새롭게 팀 배정을 했습니다!


실습 목표

1. 코딩세션 복습

웹서비스를 개발한다 == 서버용 프로그램을 만든다.

  • 서버
    • 이용자의 정보를 받아 적절한 응답을 보내는 역할
    • 24시간 켜있어야하고, 보안에 유의해야 함
  • 웹서비스를 배포하는 방법
    1. 로컬환경을 세팅 : 내 컴퓨터를 서버 컴퓨터로 만든다.
    2. 웹 호스팅 : 다른 서버 컴퓨터를 빌린다.

정리하자면

  1. 배포

    로컬에서 만든 페이지에 누구나 접근할 수 있도록 공개하는 것.

  2. 웹 호스팅

    서버용 프로그램 (HTML,CSS,JS) 을 제공하여 업체가 대신 웹페이지를 운영하도록 하는 것.

오늘은 정적 웹페이지 배포를 실습한다.

2. 정적 웹페이지란

  • 동적 웹페이지

    네이버 블로그, 티스토리 등 우리가 접하는 대부분의 페이지

    사용자와 상호작용한다.

    게시글 작성 가능, 설정 변경 가능.

    ⇒ 데이터베이스 DB 필요

  • 정적 웹페이지

    jekyll로 만든 블로그 등

    ⇒ 사실 블로그는 게시글 열람 외 사용자와 상호작용할 일이 거의 없어 정적 웹페이지만으로 구현할 수 있다.

    미리 만들어놓은 페이지만 열람 가능

    서버간 통신이 거의 없고, 빠름.

3. Bootstrap

Free Bootstrap Themes, Templates, Snippets, and Guides

템플릿을 따로 모아두는 페이지가 있다.

Creative - One Page Bootstrap Theme

오늘 사용할 템플릿

원하는 템플릿을 골라와도 상관 없으나 저작권에 유의해야 한다.

  • MIT License?

    수정, 배포가 자유로우며 실무 혹은 상업적인 이용 가능한 오픈소스 라이센스

4. 실습

코딩강의에서 bootstrap의 요소를 짜집기 해봤고, githubPage로 배포도 해봤다.

오늘은 완성된 템플릿을 이용해 나만의 페이지를 만들어보자.

  1. 로그인

  1. 템플릿 다운로드

다운로드된 압축파일 압축 해제

이미 완성된 페이지이므로 코딩강의에서 다루었던 jquery는 이미 index.html에 적용되어있다.

  1. index.html을 chrome으로 열어보면 이런 페이지가 열린다.

주소를 잘 확인할 것. 우리가 흔히 아는 www.~~.com이 아니라 해당 파일의 로컬주소다.

이런 주소로는 다른사람에게 내 페이지를 보여줄 수 없다.

  1. 배포하기 전, 템플릿의 페이지를 수정해보자.

f12 로 개발자 모드를 열 수 있다. 커서모양을 클릭하면 각 부분이 어떤 코드에 해당하는지 확인할 수 있다.

첫 페이지는 masthead class를 사용한 부분이다.

/css 폴더에서 styles.css를 열고 masthead를 찾는다.

이미지가 위치한 주소를 확인할 수 있다.
해당 위치로 가서 이미지를 열어보면 표지이미지를 찾을 수 있다.

이미지를 추가하고, 주소를 바꿔보자.

chrome에서 새로고침하면 바뀐 이미지를 확인할 수 있다.

이 외의 이미지는 index.html에서 동일한 방식으로 수정할 수 있다.

아직 html 읽는게 익숙하지 않다면 지금까지 한 것 처럼 웹 브라우저 켜놓고 일일이 확인해보는 방법을 사용하면 된다.

  1. 수정을 완료했다면 깃허브에 push한다.

Netlify

웹 호스팅 업체에 페이지 운영을 맡기는것이 웹 호스팅이라고 했다.

github, netlify, heroku 등에서 웹 호스팅 서비스를 제공한다.

Netlify를 이용한 배포

Netlify: Develop & deploy the best web experiences in record time

  1. 가입

    항목은 자유롭게 채우면 된다.

  1. 페이지를 만들기 위해 New site from Git 클릭

  1. 배포


우리는 github에 템플릿을 올렸으므로 github 선택

이런 팝업이 뜨고

내 repo 목록이 나온다. 원하는 repo를 선택

  1. 배포 환경 설정

소스코드를 사용할 수 있는 상태로 만드는 것을 build라고 한다.

예를들어 node js를 사용했을 경우 npm run build 를 사용한다.

이번엔 부트스트랩만 사용했으므로 공란으로 남긴다.

  1. 배포 완료

  1. 배포 확인

repo에 다시 커밋하고 새로고침하면 다른 작업 없이도 변경된 내용으로 재배포된다.

  1. 도메인 이름 변경

웹페이지를 구분하는 고유값으로, 일반적으로 주소를 도메인이라고 말한다.

우측에서부터 좌측으로 읽으며 `.`을 기준으로 분류된다.
  • 도메인 이름

      사용자가 지정. 고유한 값
  • SLD

      2차 도메인, 차상위 도메인
    
      일반적으로 도메인 이름을 등록한 조직이 해당된다.
  • TLD

      1차 도메인, 최상위 도메인
    
      일반 최상위 도메인 : `.com` `.net`
    
      국가 최상위 도메인 :  `.kr` `.jp` 

    Netlify에서 무료로 변경할 수 있는 도메인은 '도메인 이름'이다.

과제

완성한 페이지의 소스코드를 submodule로 등록한 repo에 올리고,
배포한 페이지 주소를 하단 테이블에 올려주세요

기한 : 5주차 세션 (5/19) 시작 전까지

  1. 페이지 내 모든 텍스트를 수정할 것.
    • 주제는 상관없음 (ex: 멋사소개, 포트폴리오용 자기소개, 좋아하는 동물/연예인 소개 등)
    • 채워넣을 내용이 없다면 영어를 한국어로 바꿔볼 것
  2. 실습에서 진행한대로 배경이미지 변경할 것
    • style.css에서 bg-masthead.jpg → 원하는 이미지
  3. title 변경할 것
  4. site name 변경할 것
  5. 소스코드를 organization에 submodule로 등록한 본인의 repo에 올리고, 제출테이블의 체크박스 체크
profile
한국외국어대학교 글로벌캠퍼스 멋쟁이 사자처럼

0개의 댓글