GitHub Pages 활용하여 정적 웹페이지 만들기
깃허브에 new repository 생성. 계정명.github.io 형식으로 만들기
vscode 에서 (ctrl + shift + p) 로 git clone 검색하여 새로 만든 리포지터리를 선택한다.
관리하기 편한 위치에 저장(수업에서는 user 폴더의 git 에 저장함)
open in new window 선택하여 vscode를 새 창으로 열어주고 index.html 파일을 생성한다.
생성 파일 깃허브에 commit&push
깃허브의 settings 에서 pages 로 들어가면 visit site 로 만들어진 페이지 확인 가능
vscode 에서 docs 폴더를 새로 만들어 index.html 파일을 넣어준 뒤 commit&push
terminal 창 열어서 git subtree push --prefix docs origin gh-pages 입력
(docs 안에 있는 파일만 브랜치를 remote main(→origin)에서 gh-pages 란 서브모듈 브랜치로 만든다는 의미)
깃허브 settings 의 pages 에서 branch 설정을 gh-pages root 로 변경하기
이후 vscode 에서 수정작업 후 원할 때 마다 커밋 후 위의 명령어를 입력 하여 배포를 해준다.
(브랜치를 분리하지 않고 main 에서 그대로 사용하면 커밋 할 때 마다 배포되어 너무 많은 사용량을 일으킨다)
github 의 repository 는 remote repository 이고, 개인PC 의 repository 는 local repository 이다.
깃허브에 있는 리포지터리를 PC에 다운 받는 것을 clone 이라 함
PC의 local repository 입장에서 branch main → local repository 을 의미하고
origin → github remote main 을 의미한다.
- Servlet / JSP
request(요청)
client ────────────> server
(사용자) <──────────── (서버)
response(응답)
- Web Server
: 사용자에게 HTML페이지나 jpg, png 같은 이미지를 HTTP 프로토콜을 통해 웹 브라우저에 제공하는 서버로 내부
의 내용이 이미 만들어져 있는 정적인 요소들을 화면에 보여주는 역할은 함(정적 페이지)
종류) Apache, Windows IIS, NGINX, node.js
- WAS (Web Application Server)
: 사용자가 요청한 서비스의 결과를 스크립트 언어 등으로 가공하여 생성한 동적인 페이지를 사용자에게 보여주
는 역할
종류) tomcat, Jboss, jeus
- Servlet-Container (java → class, 수정작업이 있으면 직접 다시 컴파일 해야함)
: 서블릿의 생명 주기 관리(생성, 초기화, 소멸)
HttpServletRequest/HttpServletResponse 객체 생성
요청에 따라 멀티 스레딩 구성
전송 방식에 따라 동적으로 페이지 구성하는 작업 진행
정적 로딩 처리
- JSP-Container (JSP → java → class)
: JSP 파일을 다시 java 코드로 변경해주고 class 파일로 전환하여 메모리 공간에 로드한 뒤 실행 가능하게 작업
처리 결과를 HTML 파일로 만들어주는 작업
동적 로딩 처리
tomcat 다운로드 후 이클립스에서 Dynamic Web Project 생성
이클립스 - Dynamic Web Project 생성 → 초기 서버 설정(target new runtime → apache tomcat 10.0 선택 → 체크박스 체크 → browse 눌러서 아까 설치한 톰캣 선택 → JRE java11선택)
→ next 후 context root : /web01 설정 후 밑에 체크 박스 체크 → 생성완료
만들어진 server 우클릭 해서 add and remove 클릭 → 만든 프로젝트 add → 우클릭 start → localhost:8080 으로
페이지 확인
(시크릿창으로 열기. 일반 브라우저에서는 정적파일(HTML,CSS,JS,이미지)이 브라우저에 캐시 형태로 임시로 저장하여 계속 사용된다. 우리는 정적파일들을 수정해서 반영 결과를 계속 확인할 것이니 시크릿모드로 전환하기)
만든 프로젝트 src-webapp 에 index.html 파일 생성. localhost8080/web01/index.html 으로 확인
(web01 = 아까 설정한 context root, 나중에 프로젝트를 여러개 만들 때 각 프로젝트마다 context root 바꿔서 사용할 수 있다.)
프로젝트에 java resources-src/main/java 는 아래의 src 폴더 경로와 같은거다. java resources는 자바 파일만 따로 보여주기 위해 있는 것
여기에 클래스 파일(controller패키지,MainController클래스) 만들기. doGet, doPost 메서드 작성
맵핑 정보 작성법
1. web.xml 에 기록
2. @annotation 사용
충돌이 생길 수 있어 두 가지 방식 중 한 가지만 정해서 사용해야 한다.
1. web.xml (=배포 서술자)
: 배포 서술자(Deployment Descriptor) 는 애플리케이션에 대한 전체 설정 정보를 가지고 있는 파일이다.
애플리케이션 폴더의 WEB-INF 폴더에 web.xml 파일을 가리킨다.
설정 정보) Servlet 정의, Servlet 초기화 파라미터
Session 설정 파라미터, Servlet/JSP 매핑, MIME type 매핑, 보안설정
Welcome file list 설정, 에러페이지 리스트, 리소스, 환경 변수
| <web-app> | 루트 속성, 문법 식별자 및 버전 정보를 속성 값으로 설정 |
| <context-param> | 웹 애플리케이션에서 공유하기 위한 파라미터 설정 |
| <mime-mapping> | 특정 파일 다운로드 시 파일이 깨지는 현상 방지 |
| <servlet>~<servlet-class>/<servlet-mapping> | 서블릿 매핑 |
| <servlet>~<servlet-class> | 컨테이너에 서블릿 설정 |
| <welcome-file-list> | 시작 페이지 설정 |
| <filter> | 필터 정보 등록 |
| <error-page> | 에러 발생 시 안내 페이지 설정 |
| <session-config> | session 기간 설정 |
| <listener> | 이벤트 처리 설정 (6가지) |
<servlet>
<servlet-name>임의의이름작성</servlet-name>
<servlet-class>패키지명.클래스파일명</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>임의의이름작성(위와동일)</servlet-name>
<url-pattern>요청URL</url-pattern>
</servlet-mapping>
web.xml 파일을 정의한 후에는 서버를 껐다가 다시 켜야 한다. 만약 요청URL을 /home 이라 정했다면
localhost:8080/web01/home 이란 주소가 입력(Get) 되면 같은 서블릿네임을 찾아 맵핑된 그 안의 클래스파일
(MainController)이 요청 된다.
2. @annotation : 내용 추가 필
- 서블릿 라이프 사이클
: 첫 번째 요청일 경우 객체를 생성하며 init()메소드를 호출함(초기화). 이 후 작업이 실행될 때 마다
service()메소드가 요청한 HTTP Type에 따른 doGet(), doPost() 가 호출된다. 최종적으로 서블릿이 서비스
되지 않았을 때 destroy()가 호출된다(소멸)
(destroy()는 보통 서버가 종료되거나 서블릿 내용이 변경되어 재 컴파일 될 때 호출됨)
- 사용자 데이터 전송 방식
1. get 방식 : url 창에 "?" 뒤에 데이터를 입력하는 방법(쿼리스트링). 데이터가 여러 개인 경우 & 로 묶음
데이터 검색에 많이 사용하고 데이터 크기에 한계(4kb)가 있으며 보안에 취약하다.
2. post 방식 : http body에 내용을 보내는 방식으로 데이터 크기에 제한이 없고 보안이 뛰어나다.
→ 요청 form method 가 get 인지 post 인지에 따라 나뉜다. 사용자가 입력하고 그 데이터를 처리하게 보내는 것은
거의 post 방식이다. 그 외는 대부분 get 임(a 링크 클릭도 get 에 속함)
데이터 전송 방식은 개발자가 정하는 것이기 때문에 어떤 메서드(doGet,doPost)를 써야할지 알 수 있다.
- 서블릿 매개변수 객체
| HttpServletRequest | |
| getParameter(String) | client 가 보내준 값이 저장된 명칭이 매개변수와 같은 명칭에 저장된 값을 불러오는 메서드 |
| getParameterNames() | client 가 보내준 값을 저장한 명칭을 불러오는 메서드 |
| getParameterValues(String) | client 가 보내준 값이 여러개일 경우 그 값을 배열로 불러오는 메서드 |
| getParameterMap() | client 가 보내준 값 전체를 Map 방식으로 불러오는 메서드 |
| setAttribute(String, object) | request 객체에 전달하고 싶은 값을 String 으로 Object 에 저장하는 메서드 |
| getAttribute(String) | 매개변수와 동일한 객체 속성값을 불러오는 메서드 |
| removeAttribute(String) | request 객체에 저장되어 매개변수와 동일한 속성값을 삭제하는 메서드 |
| setCharacterEncoding(String) | 전송 받은 request 객체의 값들의 CharacterSet을 설정하는 메서드 |
| getRequestDispatcher(String) | 컨테이너 내에서 request, response 객체를 전송하여 처리할 컨포넌트(jsp파일 등)를 불러오는 메서드. forward() 메서드와 같이 사용 |
| HttpServletResponse | |
| setContentType(String) | 응답으로 작성하는 페이지의 MIME type을 정하는 메서드 |
| setCharacterEncoding(String) | 응답하는 데이터의 CharacterSet을 지정해주는 메서드 |
| getWriter() | 문자를 페이지에 전송하기 위한 Stream을 가져오는 메서드 |
| getOutputStream() | byte 단위로 전송하기 위한 Stream을 가져오는 메서드 |
| sendRedirect(String) | client 가 매개변수의 페이지를 다시 서버에 요청하게 하는 메서드 |
'국비' 카테고리의 다른 글
| 01.11 국비학원 70일차 (평가8) (0) | 2023.01.12 |
|---|---|
| 01.10 국비학원 69일차 (Servlet/JSP, MVC model 활용(방명록)) (0) | 2023.01.11 |
| 01.06 국비학원 67일차 (ER다이어그램, 정규화) (0) | 2023.01.07 |
| 01.05 국비학원 66일차 (클래스 다이어그램, 시퀀스 다이어그램, ER다이어그램) (0) | 2023.01.06 |
| 01.04 국비학원 65일차 (starUml 설치, 유스케이스 다이어그램) (0) | 2023.01.05 |
