JSP 강의 정리 1일차

[1] 테스트 환경

hardware

cpu : intel i7-7700, gpu : intel hd 630, ram : ddr4 16GB, mainboard : samsung DB400S7A-Z51, secondary storage : 256GB SSD, 1TB HDD

OS

windows pro 64bits

software

jdk version 1.8.0_301 eclipse version 2021-09 (4.21.0) apache-tomcat version 9.0.54

 

[2] 이론 정리

 

(1) 웹 프로그래밍이란?

웹 프로그래밍란, 웹 어플리케이션을 구현하는 행위

웹 어플리케이션이란 웹을 기반으로 작동되는 프로그램

웹이란 1개 이상의 사이트가 연결되어 있는 인터넷 서비스의 형태

인터넷이란 1개 이상의 네트워크가 연결되어 있는 형태

 

(2) URL(Uniform Resource Locator)

네트워크 상에서 자원이 어디 있는지 알려주기 위한 규약

(쉽게 말해서, 웹 페이지를 찾기 위한 주소)

https://www.naver.com:443 

네이버

 

(3) URL(Uniform Resource Locator)

프로토콜 : 네트워크상에서 약속한 통신규약 (HTTP, FTP, SMTP, PDP, DHCP)
FTP : 파일을 전송하기 위한 통신규약 

SMTP : 서버 간에 이메일 송수신
POP : 이메일 수신 및 보관 

DHCP : IP 주소를 자동으로 할당하고 관리
IP주소 : 네트워크상에서 특정 컴퓨터를 식별할 수 있는 주소 (192.168.111.222)
DMS(Domain Name System) : 도메인 명을 IP 주소로 변환
포트(PORT) : IP주소가 컴퓨터를 식별할 수 있게 해준다면, 포트번호는 해당 컴퓨
터의 구동되고 있는 프로그램을 구분할 수 있는 번호

 

(4) HTTP / HTTPS

HTTP (Hyper Text Transfer Protocol) : 인터넷에서 하이퍼텍스트를 교환하기 위한 통신 규약으로, 80번 포트를 사용하고 있다. 따라서 HTTP 서버가 80번 포트에서 요청을 기다리고 있으며, 클라이언트는 80번 포트로 요청을 보내게 된다. HTTPS (HyperText Transfer Protocol over Secure Socket Layer, HTTP Secure) : HTTPS는 HTTP에 데이터 암호화가 추가된 프로토콜이다. HTTPS는 HTTP와 다르게 443번 포트를 사용하며, 네트워크 상에서 중간에 제3자가 정보를 볼 수 없도록 공개키 암호화를 지원하고 있다

 

(5) 웹 프로그래밍 구성요소
웹 서버 : 각 클라이언트에게 서비스를 제공하는 컴퓨터를 의미
클라이언트 : 네트워크로 서버에 접속한 후 서버로부터 서비스를 제공받는 컴퓨터
HTML : Hyper Text Markup Language로, www 서비스를 제공하기 위한 표준 언어
JavaScript : HTML 웹 페이지의 여러 가지 동적인 기능을 제공하는 스크립트 언어
CSS(Style Sheet) : HTML 문서에서 서체나 색상, 정렬 등 세부적인 HTML 
페이지의 디자인에 관련된 여러가지 기능을 제공

 

(6) 서버와 클라이언트
웹 브라우저에서 정보를 입력하거나 링크를 클릭하면 웹 사이트는 인터넷에 연결된 컴퓨터에서 정보를 가져와서 웹 브라우저에 보여준다. 이때 인터넷에 연결된 컴퓨터를 서버(server) 라고 한다. 웹 사이트에 접근하려고 사용하는 PC, 스마트폰 등을 클라이언트(client) 라고한다. 서버는 정보를 제공해주는 쪽이고, 클라이언트는 정보를 요청하는쪽이다.

 

(7) Web Container
웹 컨테이너(Web Container) : 웹 서버가 보낸 JSP등의 파일들을 실행하고 수행결과를 다시 웹 서버로 보내주는 역할을 한다.
웹 어플리케이션 서버는 웹 서버에서 요청을 받고, 이를 웹 컨테이너로 보내 로직(알고리즘, DB 연결 등)을 수행하고 그 결과를 다시 웹 서버로 보내 최종적으로 클라이언트에게 보내주는 것이다.

 

(8) WAS (Web Application Server)

(HTTP / HTTPS)를 통해 컴퓨터나 장치에 어플리케이션을 수행해주는 소프트웨어

동적 서버 컨텐츠를 수행한다는 것으로 웹서버와 구별되며, 주로 데이터베이스 서버와 같이 서비스를 수행한다.

1. 프로그램 실행환경과 데이터베이스 접속기능을 제공한다.

2. 여러개의 트랜잭션을 관리한다. 트랜잭션 : (데이터베이스의 상태를 변경시키기 위해 수행하는 작업 단위)

3. 업무를 처리하는 비즈니스 로직을 수행한다.

 

(9) 웹 프로그래밍 동작

 

(10) 웹 어플리케이션 장점

사용자 : 별도의 설치 없이 프로그램을 사용할 수 있기 때문에 접근성이 용이하다.

개발자 : 사용자용 프로그램을 별도로 제작하지 않고, HTML을 이용하여 사용자 UI를 구축하기 때문에, 소요되는 시간과 노력이 줄어든다.

 

(11) JSP 웹 어플리케이션의 장점

1. 풍부한 JAVA API를 사용하여 제작된다.

2. JSP기반의 웹 어플리케이션은 특정 운영체제가 아니더라도 호환성에 문제가 없다.

3. 실제 코드가 프로그램에서 노출되지 않기 때문에 보안상의 장점이 있다.

 

(12) JSP 웹 개발 선행학습

웹 개발을 하려면 웹 브라우저에 정보를 어떻게 표현하는지 알아야 한다. 그래서 HTML, CSS, 자바스크립트등의 선행학습이 필요하다.
HTML : HTML은 웹 브라우저 창에 웹 문서의 내용을 보여주는데 필요한 약속이라고 할 수 있다. 웹 개발을 하면서 웹 브라우저에 보여주고 싶은 내용이 있다면 HTML에 맞는 표기법을 사용해야 한다. 
CSS : CSS는 HTML로 만든 내용을 사용자가 알아보기 쉽게 꾸미거나 사용하기 편리하도록 배치할 때 사용한다.

자바스크립트 : 요즘 웹 사이트는 단순히 내용을 보여주는 것에 그치지 않고 사용자가 클릭하거나 스크롤하는 동작에 따라 반응한다. 예를 들어 팝업 창을 보여 주거나 상품목록을 자동으로 스크롤하는 것처럼 동적인 효과를 사용하려면 자바스
크립트가 필요하다.
자바 : JSP(Java Server Page) 는 자바 언어로 구성된 서버페이지이다. 우리가 JSP를 학습하려면 자바의 기본 문법과 객체의 이해, 생성 및 사용 등에 대해서 반드시 먼저 선행 학습을 한 후에 JSP를 학습하는 것이 바람직하다.

 

(13) JDK 설치

https://engpro.tistory.com/13?category=477126 

자바 프로그래밍 개발 도구 설치(jdk, eclipse)

(14) JAVA 환경 변수 설정

https://engpro.tistory.com/13?category=477126 

자바 프로그래밍 개발 도구 설치(jdk, eclipse)

 

(15) JAVA 통합 개발 환경(Eclipse)

통합 개발 환경 IDE (Integrated Development Environment)
→ 편집, 컴파일, 디버깅을 한번에 할 수 있는 통합된 개발 환경
(디버깅이란 오류를 찾아내기 위한 테스트과정이다.)
이클립스(Eclipse)
→ 자바 응용 프로그램 개발을 위한 통합 개발 환경
→ http://www.eclipse.org

The Community for Open Innovation and Collaboration | The Eclipse Foundation

 

(15) Eclipse 설치

https://engpro.tistory.com/13?category=477126 

자바 프로그래밍 개발 도구 설치(jdk, eclipse)

 

(16) 이클립스(workspace)

이클립스 workspace라는 작업공간, 즉 폴더를 두어 프로젝트들을 관리한다.

이클립스 워크 스페이스지정이 -metadata

폴더가 생성이 된다. 이 폴더는 워크 스페이스라는 표식을 남기는 폴더이다.

이클립스에서 설정했던 내용들이 들어가 있다. 즉, 이클립스가 해당 폴더를 워크 스페이스로 이용하는 것에 대해 준비를 해두는 폴더이다.

 

(17) 통합 개발환경

Package Explorer : 프로젝트를 관리하는 창
가운데 영역 : 소스코드를 작성하는 에디터 창
Console : 이클립스에서 프로그램을 실행을 했을때 결과를 출력해주는 창
Outline : 소스코드를 구성하는 여러 가지 문법적인 요소들을 확인 창
Problems : 소스코드에 어떤 문제가 있을 때 알려주는 창
Task List : 작업을 관리할 수 있는 하나의 장소를 제공하는 창

 

(18) 인코딩 방식(UTF-8)

UTF-8의 경우에는 조합형 방식의 문자집합(Charater Set)이면서, 유니코드 인코딩 방식중 하나이다. 유니코드 인코딩 방식에서 가장 대표적인 문자집합이다. 초성, 중성, 종성을 각각 1바이트로 인식해서 일반적으로 한글을 3바이트로 인식 하지만 공백이나 영문은 1바이트로 인식을 한다. 또한 유니코드의 경우에는 다른 국가에서 한글 언어팩이 설치되지 않았다고 하더 라도 한글 표현이 가능하다. 같은 방식으로 우리 나라에서도 다른 나라의 언어를 볼 수 있다. 따라서 다양한 언어로 작성되는 환경이나, 웹과 같은 다양한 국가의 사 람들이 보는 경우에는 더 좋은 방식이다.

 

(19) 이클립스 환경 셋팅

Window -> Preferences

 

encoding 검색 General -> workspace -> Textfile encoding -> UTF-8 선택

Web -> CSS Files -> UTF-8 선택

 

Web -> HTML Files -> Creating files -> UTF-8 선택

 

Web -> JSP files -> Creating files -> UTF-8 선택

 

(20) 아파치 톰캣 설치

Download -> Tomcat 9 선택

64bit Windows zip 선택

 

원하는 위치에 압축을 풀어준다. 압축을 풀어주면 톰캣이 설치된 것이다.

 

() 톰캣 이클립스 연동

서버 탭 클릭 후 No servers are available. Click this link to create a new server... 클릭

Tomcat v9.0 Server 클릭 후 Next > 버튼 클릭

Browser... 버튼 클릭

 

아까 압축 풀었던 apache-tomcat-9.0.54 경로 지정 후 폴더 선택 버튼 클릭

 

 

Finish 버튼 클릭

 

() 톰캣 서버 설정 변경

Tomcat v9.0 Server at localhost 더블 클릭

 

빨간 색 네모칸 친 부분 변경 및 클릭 후 ctrl +s 으로 저장

use Tomcat installation은 톰켓이 설치되어있는 곳으로 path를 요청한다는 의미
Publish modul contexts to separate XML files는 이클립스에서 환경설정이나xml파일 작업을 하면 그것을 실제 톰켓이 있는 서버와 동기화를 시킨다는 것이다.

기본적으로 이클립스에 톰캣 서버를 올리면 8080이라는 기본 포트 설정값을 가지고 있는데 톰켓을 ORACLE이랑 함께 사용한다면 ORACLE 역시 기본 포트값이 8080 이기때문에 충돌이 많이난다. (8090, 8181 등 포트번호를 변경해주자.)

 

() 이클립스 프로젝트 생성

이클립스 메뉴 -> File -> New -> Dynamic Web Project 선택

 

Project name 입력 후 Next > 버튼 클릭

 

Next > 버튼 클릭

 

Generate web.xml deployment descriptor 체크박스 선택 후 Finish 버튼 클릭

() 이클립스 Dynamic Web Project 구조

 

src/main/java : 자바 소스파일 위치
build : 자바 클래스 파일(.class) 위치 (class 파일은 보이지 않게 숨기므로 보이지 않는다.)
src/main/webapp : HTML, CSS, JavaScript, JSP, 이미지 파일 등의 웹 콘텐츠 위치
META-INF : MANIFEST 파일을 담는 폴더
(MANIFEST 파일은 jar 사용설명서)
WEB-INF : 프로젝트의 환경 설정 파일을 배치
(web.xml 파일이 반드시 위치해야 한다.)

 

web.xml이란?
<web-app>태그로 시작하고 종료하는 문서로서 Web Application의 동작과 관련
된 다양한 환경 정보를 태그기반으로 설정하는 파일이다.

() 이클립스 설정 - 자바 버전 바꾸기

 

메뉴 창에서 Window -> Preferences를 클릭한다.

 

왼쪽 위 검색창에서 install 검색 Java -> installed JREs 클릭 후 Add... 버튼 클릭

 

 

 

Standard VM 클릭 후 Next > 버튼 클릭

 

Directory  버튼 클릭

 

jdk가 설치된 폴더를 선택 후 폴더 선택 버튼을 클릭

 

Finish 버튼 클릭

jdk 앞 체크 박스 선택 후 Apply and Close 선택

 

프로젝트를 오른쪽 버튼으로 클릭 후 Properties 버튼 클릭

 

메뉴 검색에서 project fa 검색, Java 오른쪽 목록에서 원하는 자바 버전 선택 예제의 경우 1.8 버전 선택, Apply 버튼 클릭

왼쪽 메뉴에서 Java Build Path 클릭, Libraries 클릭, JRE System Library [JavaSE-17] 더블 클릭

Alternate JRE 버튼 클릭, 목록에서 원하는 jdk 버전 클릭 예제에서는 jdk1.8.0_301 클릭, Finish 버튼 클릭