🤐사실 JSP 수업은 이틀차다. 어제는 정말 뭐가 뭔지 하나도 모르겠는 상태였다면, 오늘은 진짜 큰일이라는 생각만 한가득이 들어요... 나 진짜 어떡하죠...
HTML이 다시 등장했고, 나는 JAVA 마스터도 아닐뿐더러, 어려움의 벽이 너무 크게 느껴진다. HTML 태그 다 까먹었는데 진짜 큰일이다... HTML, CSS, JAVA SCRIPT, REACT... 열심히 안 하려고 안 한게 아니라요... 진짜 너무 어렵고 힘들어서 제대로 못 한건데... 다시... 다시야... 다시... 자바 들어갈 때보다 막막하다. 음. 그래도 프론트 엔드 처음 배울 때보단 덜 막막하다. 그 땐 진짜 눈물 좔좔이었다. 그치만... 어찌어찌 겨우 따라가다가... 마지막 시간엔 나만 문제에 손도 못대겠는가 싶어서 너무 속상하고 조금은 쥐구멍에 숨고 싶었다. 좀 해볼만 한가 싶으면 다시 엄청 큰 벽과 마주하는 것 같다. 주저리는 이쯤하고.
일단... 일단 수업 내용을 다시 복기해보도록 하겠습니다... 방금 기본 설정을 해주었다.
🙄 JSP 실행
Dynamic Web Project로 만들어본 나의 첫 프로젝트! 강의 ppt에서 jwbook이라고 적으라기에 프로젝트명이 저렇게 되었다. 음... 그래도 이제 웹상에 결과물이 보이게 되는건가! 약간의 기대감이 생기긴 한다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h2>안녕 JSP!</h2>
<hr/>
현재 날짜와 시간은
<%=java.time.LocalDateTime.now()%>
입니다.
</body>
</html>hello라는 이름의 jsp 파일을 만들고 오랜만에 보는 html(^^...) 바디태그 안에 코드를 적어보래서 적어보았다. html의 태그가 눈에 띄면서 처음 보는 <%= > 이 요상한 것... 거기다가 자바 기본 모듈을 사용한다(!). 이 무슨 html과 자바의 혼종이란 말입니까... 아무튼 저렇게 코드를 적어주면
h2 태그와 hr 태그가 적용되었음을 알 수 있고, 포맷팅을 해주지 않은 상태의 현재 시각이 뜬다.
jsp를 처음으로 실행해보았다. 이렇게... 쓰는군요... 갈 길이 아주 멀다.
😐 백엔드 / 프론트 중심 개발
첫 날 수업은 이론 위주로 많이 배웠다.
기존의 백엔드 중심의 개발과 요즘의 프론트 중심 개발에 대한 이야기였다. 잘... 모르니까 일단 복기한다는 느낌으로 간단하게만...
🤔 기존 백엔드 중심 개발(서블릿/JSP)
백엔드 중심이다보니 서버에서 모든 것을 담당하는 가장 전통적인 웹 개발 모델을 말한다.
웹 브라우저에서 URL을 요청하면 서버에서 DB로 데이터를를 처리하고 화면을 호출한다. 이때 서블렛/자바를 사용한다. 그리고 JSP에서 HTML과 데이터를 결합시킨 후 다시 서버를 거쳐 웹 브라우저에 응답을 준다. (이미지는... 왠지... 저작권 문제가 있을 것 같아서...)
기술이 안정적이라는 장점 등이 있지만 모바일 환경에서는 부적합하다는 단점이 있다. (화면 갱신 시 모든 데이터, HTML, CSS, JS, 이미지 등이 다시 전송되어야 하기 때문에!)
🤔 요즘 프론트엔드 중심 개발
웹 브라우저(HTML, CSS, JS)에서 서버에 URL을 요청하면 서버는 DB에서 자바나 Node.js 같은 프로그램으로 데이터를 처리한다. 그리고 서버는 JSON 등을 통해 응답하고, 웹 브라우저에서 화면이 렌더링된다.
클라이언트에서 HTML을 가지고 있거나 서버에서 HTML만 받아오고, 서버로부터 화면 구성이 필요한 데이터만 JS로 받아와서 데이터와 화면을 조합해서 보여주는 방식이다! ㅎㅎ 그렇구나... 이것을 CRS(Client Side Rendering)방식이라고 한다.
필요한 부분의 데이터만 갱신이 가능해서 서버로부터 매번 갱신된 전체 화면을 받아올 필요가 없다는 장점이 있다. 실시간 데이터 갱신이 자유로워서 모바일 환경에서 적합하다는 것 같음! React, vue.js 등의 다양한 라이브러리를 사용 가능하다는 것도 장점이다.
SSR(Server Side Rendering)
요청할 때마다 새로고침이 일어나서 서버에 새로운 페이지에 대한 요청을 하는 방식을 말한다. 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 페이지를 보여주는 방식이다. JSP가 SSR 방식에 해당한다. (실제로 JSP를 통해서 화면을 구현하면 수정할 때마다 새로고침을 해야 함.)
이는 웹에서 제공하는 정보량이 많아지면서 문제점이 많아진다. 때문에 SPA가 등장!
CRS
최초에 1번, 서버에 전체 페이지를 로딩하여 보여준 다음, 사용자의 요청이 올 때마다 바뀐 내용만 보여주는 방식이다.
Angular JS, Backbone JS와 같이 SPA 개발에 쉬운 JS프레임워크가 등장하며 점점 클라이언트가 무거워지게 되었다. 때문에 view만 관리하는 React JS가 등장하게 되었다.
SPA
브라우저에 최초에 한 번 페이지 전체를 로드한 이후, 특정 부분만 Ajax를 통해 데이터를 바인딩하는 방식이다.
CRS와 SPA는 다르다! SPA가 CRS방식을 사용한 것이다.
😮 웹 개발 트렌드는 프론트엔드 중심으로 변화하고 있다
모바일 사용자가 증가함에 따라 데이터 요금이나 속도 문제가 발생하였다.(실시간 데이터 갱신 필요) 모바일 환경의 중요성이 커짐에 따라 CRS방식 (프론트 엔드 중심) 으로 개발을 전환하는 계기가 된 것이다. React JS, Vue JS를 많이 사용하게 된 계기이다.
프론트 엔드 개발 중심의 가속화가 일어남에 따라 백엔드에서 화면을 다루는 경우는 점점 감소하는 추세다.
그래서... 프론트엔드 수업도 열심히 들었어야 했다는 이야기... (아... 열심히 안 들은건 아닌데... 암튼......)
😣 그럼... JSP 왜 배우는데요? ㅠ
아직까지는 서블릿/JSP 프로젝트를 유지보수하는 경우가 많다.
흑... 내가 볼 땐 이게 제일 커 보임...
그래도 이걸 배워두면... 다른 형태의 프레임워크나 라이브러리를 배울 때 유리하다고 한다.
스프링을 배우기 전에 전반적인 웹 개발의 빅픽처를 이해하는 데도 도움이 된다고 합니다.
그리고 나는 정보처리 산업기사를 따야하기 때문에... 배워야 해.
🕸 웹 서버
하드웨어: Web 서버가 설치되어 있는 컴퓨터
소프트웨어: 웹 브라우저 클라이언트로부터 HTTP 요청을 받아 정적인 컨텐츠(.html, .jpeg, .css 등)를 제공하는 컴퓨터 프로그램 Web Server의 기능
웹 서버는 HTTP 프로토콜을 기반으로 하여 클라이언트(웹 브라우저/웹 크롤러)의 요청을 서비스하는 기능을 담당!
- 정적인 컨텐츠를 제공하거나 WAS를 거치지 않고 바로 자원을 제공
- 동적인 컨텐츠(DB조회 등?) 제공을 위한 요청을 전달한다.
클라이언트 요청(Request)을 WAS에 보내고, WAS가 처리한 결과를 클라이언트에게 전달(응답, Response)한다.
🕸 WAS
WAS = Web Server + Web Container(JSP, Servlet)
WAS는 HTTP를 통해 컴퓨터나 장치에 애플리케이션을 수행해주는 미들웨어 (소프트웨어 엔진)이다.
웹 컨테이너 또는 서블릿 컨테이너라고도 불린다.
클라이언트에서 WAS에 요청(Request)를 하면 WAS가 Database에 접근해 처리를 한 후 클라이언트에 응답(Response)한다.
역할 - DB조회나 다양한 로직 처리를 한다. (이를 동적 컨텐츠라고 함)
WAS가 가진 웹 서버도 정적인 컨텐츠를 처리하는데 있어서 성능상의 큰 차이를 가지고 있지는 않다.
WAS의 예시) Tomcat, JBoss, Jeus, Web Sphere 등
난 공부하면서 톰캣을 쓰는데 로고 존나 못생겼다.
웹 서버와 WAS를 분리하는 이유
웹 서버를 통해 정적인 파일(HTML, CSS, 이미지 등)들을 Application Server까지 가지 않고서도 빠르게 보내줄 수 있어서 서버 부담을 줄일 수 있다.
WAS의 구조
Client -> WAS -> DB
Client -> Web Server -> WAS -> DB
🐱 TOMCAT (WAS)
로고 못생김
아파치와 톰캣은 컨테이너 기능이 가능하냐 가능하지 않느냐의 차이다.
아파치와 톰캣을 병행할 때 - 정적 데이 처리할 때 아파치 성능이 좀 더 좋다.
