- Tomcat.Apache 웹 서버
1. Tomcat.Apache 사이트 이동 후 zip 폴더 다운로드
2. 압축 해제 후 Apache 폴더를 web project workplace 바깥으로 이동시킴
1. 이클립스 실행
2. File -> Switch WorkSpace -> other -> 변경할 workspace 선택
- encoding 설정
1. window -> proferences -> enc 검색
2-1. workspace 선택 -> text file encoding -> UTF-8 선택 -> Apply
2-2. JSP Files 선택 -> UTF-8 선택 -> Apply
1. 이클립스 하단 servers 탭 선택
2. servers 블록 내부에서 우클릭
3. New -> Server -> Apache -> Tomcat v8.5 Server 선택 -> Next
4. browser -> 압축 해제한 Apache 폴더 선택 -> Finish
5. 완료 후 왼쪽 탭에서 Servers -> Tomcat v8.5 Server -> server.xml 선택
6. 밑에 탭에서 source로 변경
7. Connector의 port 번호를 변경 [ 8080 -> 8888 로 변경 ]
- Dynamic Web Project 생성
1. File -> Dynamic Web Project 선택
2. 생성한 프로젝트 폴더 내부의 src -> main -> webapp 폴더 내부에 웹 서비스를 위한 파일을 생성
1. 서버가 종료된 상태에서 하단 Servers 탭 -> 서버 우클릭
2. Add and Remove 선택
3. 생성한 파일들을 Configured 쪽으로 Add 함
4. 서버 실행 (하단 블록의 우측 상단 Run)
5. http://localhost:8888/Hello/Index.html 경로로 접속해서 확인
- Web 주소 형식
http://ip주소:port번호/project이름/접속할file이름
- 경로
- 상대 경로 : ./파일이름
- 서버 기준 절대 경로 : /프로젝트명/파일이름
- 인덱스 페이지 : /프로젝트명/<!-- 상대 경로 --> <img src="./images/1.jpg"> <!-- tomcat 서버 기준 절대 경로 --> <img src="/Hello/images/1.jpg"> <!-- 프로젝트 내에서 /프로젝트명/ 만 작성할 시 자동으로 index.html 파일로 이동 --> <a href="/Hello/">인덱스</a>
- 외부 CSS 가져오기(Bootstrap)
- link 태그를 사용하여 cdn 링크 접속<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
- form 태그 구조
- form 태그 : 사용자 입력 값을 특정 경로의 파일로 connecting(response) 시킴- action 속성 : 경로 지정
- method 속성 : http 응답 형식을 지정
→ get 속성값 : 입력한 데이터를 주소에 달고 요청하는 방식
→ post 속성값 : 입력한 데이터를 요청 body에 달고 요청하여 주소에는 보이지 않는다.get 방식 특징 : req의 CharacterEncoding을 하지 않아도 된다.
- input 태그 : 사용자에게 값을 입력받도록 하는 블록
- type 속성 : 입력 형식을 지정
- name 속성 : 사용자 입력 값이 name에 지정한 변수 이름에 저장된다.
- placeholder : 입력 칸에 배경 텍스트를 지정- button 태그 : submit 타입으로 지정 시, input에 입력한 값을 action 경로로 연결시킴
<form action="/Hello/send" method="post"> <input type="text" name="msg" placeholder="서버에 할 말 입력"/> <button type="submit">전송</button> </form>
- Servlet
- 동적 웹 서비스 개발을 위해 웹브라우저(클라이언트)의 요청, 응답을 백엔드단(자바)에서 객체적으로 처리할 수 있도록하는 자바 기반 웹 프로그래밍 기술이다.
- 장점 : 요청, 응답을 쉽게 처리할 수 있다.
- 단점 : html 마크업 전체를 작성해야 한다.
- 사용자 요청 처리 클래스
1. HttpServlet 클래스 상속받기
2. service(HttpServletRequest req, HttpServletResponse resp) 메소드 Override 하기
3. 요청 맵핑 : @WebServlet("/action에 넣은 요청 키워드") 로 클래스 위에 정의
↪ flask 와 비슷한 개념
- 클래스 내부 요소 설명
- HttpServlet 클래스 : Servlet 기술을 구현한 클래스
- service(요청객체, 응답객체) 메소드 : 사용자 요청, 응답을 처리하는 메소드
- HttpServletRequest : 사용자 요청 객체
- HttpServletResponse : 서버 응답 객체
- 요청, 응답 객체 메소드
🔍 요청 객체 메소드
- req.getParameter(String name)
: html의 name 속성에 입력한 변수명을 인자값으로 입력하여 저장된 값을 받아온다.
- req.setCharacterEncoding("UTF-8")
: 한글 인코딩 메소드
🔍 응답 객체 메소드
- resp.getWriter()
: 웹브라우저에 쓰기 준비를 하는 PrintWriter 객체를 반환한다.
- printwriter.println()
: printwriter 객체를 이용해 웹브라우저에 print한다.
- resp.setCharacterEncoding("UTF-8")
: 한글 인코딩 메소드
- resp.setContentType("text/html; charset-utf-8")
: 웹페이지 출력 한글 인코딩 메소드<form action="/Hello/send" method="post"> <input type="text" name="msg" placeholder="서버에 할 말 입력"/> <button type="submit">전송</button> </form>
// 요청 맵핑 @WebServlet("/send") // HttpServlet 상속 받기 public class SendServlet extends HttpServlet { // service 메소드 Override 하기 @Override protected void service(HttpServletRequest req, HttpServletResponse resp) > throws ServletException, IOException { System.out.println("요청 전달 받음"); // 한글 인코딩 req.setCharacterEncoding("UTF-8"); // 사용자 요청 데이터 처리(req) String msg = req.getParameter("msg"); System.out.println(msg); // 요청을 한 클라이언트에게 문자열을 응답할 객체(resp) 얻어오기 resp.setCharacterEncoding("UTF-8"); resp.setContentType("text/html; charset-utf-8"); PrintWriter pw = resp.getWriter(); pw.println(msg); pw.flush(); pw.close(); } }