JSP는 옛날 방식 기술이다. 여기서 spring framwork로 넘어갔다.
모든 개발이 서버에서 이루어짐 -> 개발 집중화(효율적)
그러나 개발자와 디자이너 간 역할 분담이 어려움
[이론]
네트워크
TCP/IP(Transmission Control Protocol/Internet Protocol): 컴퓨터간 통신할 수 있도록 만든 프로토콜 중 하나
TCP:
프로토콜(protocol): 컴퓨터간 통신 규약. 모두 TCP/IP 씀
포트(port): 네트워크 사용 출입문 (한 컴퓨터에 여러 네트워크 서비스 제공하는 경우)
Domain Name System: 인터넷 주소 ~
프론트엔드: 클라이언트 중심 프로그래밍. 눈에 보임 (HTML, CSS, Java script)
프론트엔드 중심개발: 최근 핫한 CSR(Client Side Rendring) 방식; 필요한것만 받아와서 화면 출력
근데 결국 백엔드도 해야함.
백엔드: 서버 구성하며 서비스 제공하기위한 서버 쪽 프로그래밍. 눈에 안보임. (JSP, Spring Framework, Python 등)
백엔드 중심개발: 서블릿/JSP가 인기있는 백엔드 개발기술. 전통적 웹 개발 모델이며 안정적. 검색 엔진 최적화에 유리
다양한 서버 환경 대응 可. 단, 모바일 속도 느린 단점 有(많은 비용 지불 요구)
결국 둘 다 해서 풀스택 개발자가 되는게 좋다.
HTML(HyperText Markup Languade): 웹 문서 구조 정의하고 콘텐츠 표시하는 기본 언어 (뼈)
CSS : 디자인 요소 (HTML 보기 좋게 적용) (살)
JavaScript: HTML, CSS 잘 작동하게 도와줌 (혈액공급)
-> 이를 편의적으로 쓰기위한 framework(javascript library)인 React.js, Vue.js(요즘 뜨는 것) 등 사용
JSP(JavaServer Pages): HTML에 JAVA 코드를 넣어 동적웹페이지를 생성하는 웹어플리케이션 도구.
Java 사용이 가능하기때문에 HTML 작성이 간편하고 효율적으로 변했다는 이점이 있다.
이와 반대되는 개념이 Java sevlet(자바 서블릿)으로, 자바 내에 HTML 코드가 들어간다. (가독성 안좋다.)
Dynamic web project로 생성하고
Apache Tomcat과 연동한다.
https://adoptium.net/ 에서 적절한 JSP를 설치한다.
그리고 webapp 파일에 new를 눌러 새 jsp파일을 생성한다.
%% 사이에 있는 언어는 java로 작성한다 약속하고 html과 섞어 쓴 형태이다.
<hr>는 구분선을 그어준다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>
<h2>Hello World</h2>
<hr>
현재 날짜와 시간은
<%=java.time.LocalDateTime.now()%>
</body>
</html>jsp 파일의 오른쪽 버튼으로 run on-으로 실행을 한다.
port 충돌 오류가 발생하면 밑의 Severs 에서 Tomcat의 서버를 8080에서 다른 숫자로 변경해줘야한다. (8081로 함)
그러면 지정된 web 브라우저로 다음과 같은 화면이 출력된다.
마크업 언어
XML (eXtensible Markup Language): HTML보다 좀 더 범용적 사용 可
제목 태그: <h1> ~ <h6> 까지 있고, 숫자 작을수록 큰 글자로 출력. 문서에서 제목으로 사용할 텍스트
(단순 텍스트 크기아님)!
SEO(Search Engine Optimization)때문에 제목태그 매우 중요함!
목록 태그 사용법
<ul> 순서가 있는 목록
<ol> 순서가 없는 목록 (주로 ul을 사용한다.)
<li> 리스트 아이템
CSS: 글씨 색상 크기 이미지 크기 배치 법 등 웹 문서 디자인 요소 담당.
어제 작성한 코드를 오늘 배운 개념을 합쳐 적용하면..
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<style> /* css 부분이다! */
#id_name {color: blue;}
.title {color: blue;}
p.title {color: red;}
p.title2 {color: green;} /* 이름에 따른 색 지정 可 */
</style>
<body>
<div class="title">
<h1> 안녕하세요 </h1> </div>
<h1> 안녕못해요 </h1>
<ul>
<li>아이템 1</li>
<li>아이템 2</li>
</ul>
<ol>
<li id = "item1"> 아이템</li>
<li> 아이템 </li>
</ol>
<h2 class="title"></h2>
<p class="title"> 왜 안녕하지 못하죠? </p>
<p class="title2"> 오늘 월요일이잖아요 </p>
<p class="title"> 아이고 </p>
<div id="id_name"></div>
<hr>
<h2>Hello World</h2>
<hr>
현재 날짜와 시간은
<%=java.time.LocalDateTime.now()%>
</body>
</html>
추가하고 저장후 새로고침해도 계속 실시간 반영된다(CSS)
부트스트랩(Bootstrap): 가장 대표적인 오픈소스 CSS 라이브러리
검색하면 홈페이지가 나오는데 각종 디자인 종류별 코드를 제공하며 라이브러리 연동방법을 안내한다.
Bootstrap
강력하고 확장 가능하며 기능이 풍부한 프론트엔드 툴킷. Sass로 빌드 및 커스터마이징하고, 사전 빌드된 그리드 시스템 및 구성 요소를 활용하고, 강력한 JavaScript 플러그인으로 프로젝트에 생기
getbootstrap.kr
해당 jsp를 포함하는 종합 예제를 만들어본다.
<%@ 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>
<h3>
1. JSP 주석
<!-- HTML 주석: 화면에서 안 보이고 소스 보기에선 보임 -->
<%--JSP 주석: 화면, 소스 보기에서 둘 다 안보임--%>
</h3>
<%!
String[] members = {"김길동","홍길동","김사랑","박사랑"};
int num1 = 10;
int calc(int num2) {
return num1 + num2;
}
%>
<h3>
2. calc(10) 메서드 실행 결과:
<%=calc(10) %></h3>
<hr>
<h3>3. Include: hello.jsp </h3>
<%@ include file="../Hello.jsp" %>
<h3>4. 스크립트 (배열 데이터 출력) </h3>
<ul>
<%
for (String name: members) {
%>
<li><%=name %></li>
<%
}
%>
</ul>
</body>
</html>
이를 실행하면 다음과 같은 화면이 나온다.
소스보기(개발자 도구)를 눌렀을때 JSP 전용 주석은 보이지 않음을 확인한다.
* 크롤링은 옛날 것은 많이 막혔으니 요즘 크롤링 코드 기법을 배워서 사용해보자
'Programming > Java' 카테고리의 다른 글
| Servlet (0) | 2023.10.19 |
|---|---|
| Javascript를 넣은 회원가입창 만들기 (1) | 2023.10.18 |
| Interface (인터페이스) (0) | 2023.10.17 |
| Inheritance(상속) (1) | 2023.10.16 |
| instance, static, package, access modifier (0) | 2023.10.16 |
