📌 Web Server 다운로드

  • Tomcat.Apache 웹 서버
    1. Tomcat.Apache 사이트 이동 후 zip 폴더 다운로드
    2. 압축 해제 후 Apache 폴더를 web project workplace 바깥으로 이동시킴


📌 이클립스 workspace 변경

1. 이클립스 실행
2. File -> Switch WorkSpace -> other -> 변경할 workspace 선택



📌 Encoding 설정

  • encoding 설정
    1. window -> proferences -> enc 검색
    2-1. workspace 선택 -> text file encoding -> UTF-8 선택 -> Apply
    2-2. JSP Files 선택 -> UTF-8 선택 -> Apply


📌 Apache Server 적용

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 로 변경 ]



📌 Web Project 생성

  • Dynamic Web Project 생성
    1. File -> Dynamic Web Project 선택
    2. 생성한 프로젝트 폴더 내부의 src -> main -> webapp 폴더 내부에 웹 서비스를 위한 파일을 생성


📌 Web Project 실행

1. 서버가 종료된 상태에서 하단 Servers 탭 -> 서버 우클릭
2. Add and Remove 선택
3. 생성한 파일들을 Configured 쪽으로 Add 함
4. 서버 실행 (하단 블록의 우측 상단 Run)
5. http://localhost:8888/Hello/Index.html 경로로 접속해서 확인



📌 HTML in Web Project

  • 경로
    - 상대 경로 : ./파일이름
    - 서버 기준 절대 경로 : /프로젝트명/파일이름
    - 인덱스 페이지 : /프로젝트명/
<!-- 상대 경로 -->
<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 태그 구조
    - 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 이란?

  • Servlet
    - 동적 웹 서비스 개발을 위해 웹브라우저(클라이언트)의 요청, 응답을 백엔드단(자바)에서 객체적으로 처리할 수 있도록하는 자바 기반 웹 프로그래밍 기술이다.
    - 장점 : 요청, 응답을 쉽게 처리할 수 있다.
    - 단점 : html 마크업 전체를 작성해야 한다.


📌 사용자 요청 처리 Servlet

  • 사용자 요청 처리 클래스
    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();
	}
}


profile
데이터 사이언티스트를 목표로 하는 개발자

0개의 댓글