[56] 230320 JSP Ch. 1 들어가기, Ch. 2 웹 프로그래밍 기초, Ch. 13 이클립스를 이용한 웹 개발 [K-디지털 트레이닝 56일]

230320 Mon 56th class

Ch. 1 들어가기
Ch. 2 웹 프로그래밍 기초

Ch. 13 이클립스를 이용한 웹 개발
진도: p. 20 ~ (교재: 최범균의 JSP 2.3 웹 프로그래밍: 기초부터 중급까지, 저자: 최범균)
책 예제 코드: https://github.com/madvirus/jsp23
저자 블로그: https://javacan.tistory.com/

최범균의 JSP 2.3 웹 프로그래밍: 기초부터 중급까지 | 최범균 - 교보문고

---

오늘 배운 것 중 기억할 것을 정리했다.

---

PART 1 웹 프로그래밍 기초
Ch. 1 들어가기

책의 목차
01 이 책의 범위
02 대상 독자
03 준비물
3.1 JDK 설치
3.2 JAVA_HOME 환경 변수 설정
3.3 톰캣 설치
3.4 톰캣 실행 

HTML/CSS/JAVASCRIPT 클라이언트 (네트워크 프로그램에서 요청하는 쪽)
+
JAVA/DB 서버 (요청을 받아 알맞은 기능이나 데이터를 제공하는 쪽)

서버용 페이지

JSP(Java 기반의 Server),
ASP,
PHP


JSP(Java 기반의 Server)
JAVA
TOMCAT
SQL

---

 

1.1 이 책의 범위

1.2 대상 독자

1.3 준비물
1) JDK 설치

2) JAVA_HOME 환경 변수 설정

3) 톰캣 설치

https://tomcat.apache.org/download-80.cgi

8버전 다운로드 후 압축 풀고 이클립스가 쓰이는 폴더에 넣는다.

---

4) 톰캣 실행

bin 폴더의 startup.bat을 더블 클릭해서 실행한다. 액세스 허용한다.

20-Mar-2023 09:19:34.731 ?뺣낫 [main] org.apache.catalina.startup.Catalina.start Server startup in 491 ms

마지막 문장을 보면 톰캣이 정상적으로 실행됨을 알 수 있다.

http://localhost:8080 주소를 입력하면 위 창이 뜬다. 

---

Ch. 2 웹 프로그래밍 기초

책의 목차
CHAPTER 02 웹 프로그래밍 기초
01 웹과 웹 프로그래밍
1.1 URL과 웹 페이지
1.2 웹 브라우저와 웹 서버
1.3 HTML과 HTTP
1.4 정적 자원과 동적 자원
1.5 웹 프로그래밍과 JSP

02 JSP 만들고 실행해 보기

2.1 웹과 웹 프로그래밍
1) URL과 웹 페이지 

https://javacan.tistory.com/ -- 메인주소

https://javacan.tistory.com/category/Java ? a=10

웹 브라우저의 주소줄에 표시되는 것을 URL(Uniform Resource Locator)이라고 부른다. URL은 일종의 주소와 같은 역할을 한다.
웹 브라우저의 주소줄에 URL을 입력하면 웹 브라우저에 URL에 해당하는 내용이 출력되는데, 이렇게 웹 브라우저에 출력된 내용을 웹 페이지(web page)라고 부른다.
홈페이지라고 부르는 웹 사이트는 이런 웹 페이지의 묶음이다.

---

URL의 주요 구성 요소

구성 요소	설명
프로토콜	웹 브라우저가 서버와 내용을 주고받을 때 사용할 규칙 이름이다. 웹페이지의 주소를 표현할 때는 http를 사용한다.
서버 이름	웹 페이지의 요청할 서버의 이름을 지정한다.  도메인 이름(javacan.tistory.com)이나 IP주소(180.70.134.229)를 입력할 수 있다.
경로	웹 페이지의 상세주소에 해당한다. 즉, 웹 페이지마다 다른 경로를 갖는다.
쿼리 문자열	추가로 서버에 보내는 데이터에 해당한다. 같은 경로라 하더라도 입력한 값에 따라 다른 결과를 보여줘야 할 때 사용한다. ex) 입력한 검색어에 따라 다른 내용이 표시되는데, 보통 쿼리 문자열을 이용해서 검색어를 전달한다.

 

URL의 일반적인 구성

그림 참고: https://ulralra-dev.tistory.com/20

프로토콜 이름과 서버 이름 사이에 위치한 "://"은 프로토콜과 나머지 부분을 구분하기 위해 사용된다. 

---

2) 웹 브라우저와 웹 서버 p. 38

주소를 쓰면 웹 브라우저에게 요청(request)한다. 웹 서버가 응답(response)한다. 
ex) 아이디, 패스워드를 서버에게 주면서 요청할 땐 쿼리 문자열을 쓴다. 
DB에 데이터가 있으면 자바가 사용자에게 응답한다. 
DB에 데이터가 없으면 아이디가 없다는 등 응답을 한다. 

아래는 웹 브라우저에 URL에 해당하는 웹 페이지가 출력되기까지의 복잡한 과정을 단순화해서 그림으로 표현한 것이다.

웹 브라우저와 웹 서버는 IP 주소를 이용해서 연결하기 때문에 도메인 이름을 IP 주소로 변환할 필요가 있는데 이때 사용하는 것이 DNS(Domain Name Server)이다.
웹 브라우저에 URL(Uniform Resource Locator)을 입력하면, 웹 브라우저는 1번 과정처럼 도메인 이름에 해당하는 IP 주소를 DNS에 요청하고,
DNS는 2번 과정처럼 IP주소를 응답으로 제공한다. 

DNS로부터 IP 주소를 받으면, 웹 브라우저는 3번 과정처럼 IP 주소를 이용해서 웹 서버에 연결한 뒤 URL에 해당하는 웹 페이지를 요청하고 
웹 페이지를 응답으로 받게 된다. (4번 과정) 

웹 브라우저와 웹 서버의 통신 과정

그림 참고: https://sleepyeyes.tistory.com/13

그림의 4번 과정: 웹 서버가 웹 브라우저에 웹 페이지를 제공하는 단계이다.
웹 브라우저가 웹 서버에 웹 페이지를 달라고 하는 것을 요청(request)한다고 표현하고, 
요청한 웹 페이지를 웹 브라우저에 제공하는 것을 응답(response)이라고 표현한다. 

웹 브라우저와 웹 서버는 다른 컴퓨터에 위치한다. 웹 서버가 다른 컴퓨터에서 실행되고 있기 때문에, 웹 브라우저가 웹 서버에 연결하려면, 웹 서버가 실행 중인 컴퓨터의 주소를 알아야 하는 데, 이 주소를 IP 주소라고 부른다. 

인터넷을 통해 연결되는 컴퓨터들도 고유의 주소 값인 IP 주소를 갖고 있다. IP 주소는 숫자로 구성되어 있기 때문에 외우기 쉽지 않으므로 "javacan.tistory.com"과 같이 사람이 기억하기 좋은 도메인 이름을 사용한다. 

---

클라이언트(Client): 네트워크 프로그램에서 요청하는 쪽,
웹 브라우저는 HTML 문서나 이미지 등을 요청하므로 클라이언트에 해당한다. 

서버(Server): 요청을 받아 알맞은 기능이나 데이터를 제공하는 쪽,
웹 서버는 서버에 해당한다.
서버 프로그램이 실행되는 컴퓨터를 서버라고도 부른다. 

ex) Naver의 IP주소로 접속하면 해킹 위험이 있으므로 IP 주소를 요청한다. (그림의 1번 과정)
DNS가 웹 브라우저에 응답을 한다. (2번 과정)
이 과정이 1초 이내이므로 바로 웹 서버로 접속 되는 것처럼 느껴진다.

세션(Session)이란 사용자가 최초에 서버에 요청한 시점부터 종료할때까지 사용자로부터 들어오는 일련의 요구를 하나의 상태로 보고 그 상태를 일정하게 유지시키는 기술이다.
참고

세션에 아이디, 비밀번호가 있으면 로그인 한다. 
세션을 쓰는 이유: 한 번 로그인 한 뒤에 계속적으로 사용하기 위해 쓴다. 
웹브라우저를 닫으면 날라간다.
(한 브라우저 당 하나의 세션이다.: 크롬으로 네이버 로그인해도, 마이크로소프트 엣지에는 로그인 안 된 걸로 뜬다.)

애플리케이션 영역 ex) 방문자 수가 누적된다.
서버를 죽이면 애플리케이션 안의 데이터들이 다 날라간다. (세션은 닫으면 날라가는 것과는 다르다.)  

각 서버 프로그램은 클라이언트가 연결할 때 다른 서버 프로그램과 구분할 수 있도록 포트(port)라는 것을 사용한다. 
"http://localhost:8080/index.jsp" 콜론 다음에 위치한 8080이 포트번호가 된다. 
웹 서버가 사용하는 기본 포트 번호는 80이다.

---

3) HTML과 HTTP

웹 서버는 URL에 해당하는 HTML 문서를 전송하는데, HTML 문서를 받은 웹 브라우저는 정해진 규칙에 따라 HTML 문서를 분석해서 알맞은 화면을 생성한다. HTML 표준에 따라 HTML 문서로부터 알맞은 화면을 생성하는 과정을 렌더링(Rendering)이라고도 표현한다.

---

4) 정적 자원과 동적 자원 p. 43

톰캣을 포함해 많은 웹 서버들이 URL이 경로와 일치하는 파일을 읽어와 응답으로 전송하기 때문에, 파일이 바뀌기 전까지 웹 서버는 항상 같은 내용을 웹 브라우저에 전송한다.
고정된 결과가 출력된다고 해서 이들 URL에 해당하는 자원을 정적(Static) 페이지 또는 정적 자원이라고 표현한다. 

정적 자원과 달리 파일(코드)을 바꾸지 않아도 조건에 따라 다른 응답 데이터를 전송하는 경우도 있다.
시간이나 특정 조건에 따라 응답 데이터가 달라지는 자원을 동적(dynamic) 페이지 또는 동적 자원이라고 부른다.
ex) 페이스북의 메시지 https://www.facebook.com/message, 쿼리 문자열에 따라 다른 구글의 검색 결과
사용 되는 프로그래밍 기술: JSP, PHP, ASP.net

---

5) 웹 프로그래밍과 JSP

웹을 위한 연결, 프로그래밍 언어, 데이터베이스 연동과 같이 어플리케이션을 구현하는데 필요한 기능을 제공하는 서버 프로그램을 웹 어플리케이션 서버(WAS(Web Application Server))라고도 부른다.

---

2.2 JSP 만들고 실행해 보기

---

PART 3 개발 효율 향상
Ch. 13 이클립스를 이용한 웹 개발 p. 336

책의 목차

CHAPTER 13 이클립스를 이용한 웹 개발
01 이클립스 설치 및 실행하기
02 서버 실행 환경 설정하기
03 UTF-8 설정
04 웹 프로젝트 생성하기
05 JSP와 자바 코드 작성하기
5.1 JSP 추가하기
5.2 자바 코드 추가하기
5.3 jar 파일 추가하기 

06 서버를 이용해서 웹 어플리케이션 실행하기
07 배포할 WAR 파일 생성하기

13.1 이클립스 설치 및 실행하기

13.2 서버 실행 환경 설정하기 p. 339

Window - Preferences를 클릭한다.

그 후 Tomcat이 설치된 폴더를 선택하면 연결이 된다. 

---

13.3 UTF-8 설정

encoding으로 검색해서 UTF-8을 설정한다.
CSS, HTML, JSP 파일 등을 미리 설정해야 나중에 한글 주석 처리 한글이 안 깨진다.

---

13.4 웹 프로젝트 생성하기

마우스 우클릭으로 Dynamic Web Project를 설정한다. 

---

13.5 JSP와 자바 코드 작성하기

1) JSP 추가하기

책의 예제처럼 hello.jsp 파일을 만든다. 

JSP 부분은 아래와 같다. 나머지는 HTML과 같다.
아래를 지우면 JSP 가동이 안 된다. 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

---

2) 자바 코드 추가하기

3) jar 파일 추가하기 

13.6 서버를 이용해서 웹 어플리케이션 실행하기

13.7 배포할 WAR 파일 생성하기

---