지금까지 배운 내용들로 백엔드에서만 프로그램이 돌아가게 미니 미니 프로젝트를 만들었다.
32-bit/64-bit Windows Service Installer (pgp, sha512)
다운받기
Tomcat 9.0 버전으로 다운 받았다.
포트번호 안 겹치게 하기 위해 바꿔주고 Next
누르기
체크 해제하고 Finish
누르기
Oracle Java SE Platform
다운받기
설정 > Server > Runtime Environments 에 들어가서 Add...
클릭
Apache Tomcat v9.0
선택하기
본인이 설치한 버전을 선택해주면 된다.
그리고 톰캣 경로도 선택해준다.
Dynamic Web Project로 프로젝트를 하나 만들어준다.
Dynamie web module version은 3.1
로 해준다.
webapp
에서 뷰 페이지 파일들을 만들 것이다.
jsp 설치하기
그리고 Java Resources
에서는 서버 관련 파일들을 만들 것이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<h3>목록 테스트</h3>
<h4>순서 없는 목록</h4>
<ul>
<li>자바</li>
<li>오라클</li>
<li>html</li>
</ul>
<ul style="list-style-type:disc">
<li>자바</li>
<li>오라클</li>
<li>html</li>
</ul>
<ul style="list-style-type:circle">
<li>자바</li>
<li>오라클</li>
<li>html</li>
</ul>
<ul style="list-style-type:square">
<li>자바</li>
<li>오라클</li>
<li>html</li>
</ul>
<ul style="list-style-type:none">
<li>자바</li>
<li>오라클</li>
<li>html</li>
</ul>
<ol>
<li>자바</li>
<li>오라클</li>
<li>html</li>
</ol>
</body>
</html>
html → 웹페이지 기본 뼈대
css → 예쁘게 꾸미기 위한
javascript → 프로그래밍적인 요소를 웹페이지에 추가
ajax(asynchronous javascript and xml) → 비동기 자바스크립트와 xml
아이디 입력할 때 새창이 뜰 때가 있고 그냥 바로 로그인을 할 수가 있는데 xml을 쓰면 새창이 안 나오게 만들 수 있다.
그래서 불필요한 페이지 이동을 줄일 수 있고 사용자 입장에선 적게 움직이는게 좋기 때문에 xml을 사용하는 것이 좋다.
동기
자바에서 사용하는 일반적인 함수호출은 동기이다.
자바에서 메서드호출하면 호출한 쪽의 코드는 멈춰있고 그 메소드로 점프해서 그걸 실행하고 호출한쪽으로 다시 돌아와서 코드가 다시 실행이 된다.
그때 호출한 쪽의 코드는 멈춰져있는것이 동기이다.
비동기
동기와 반대로 호출해도 계속해서 코드가 돌아가는게 비동기이다.
그래서 비동기라고 하면 페이지 이동이 이루어질 수 있다.
예를 들어 아이디를 입력받고 입력받은 것을 (사용자 몰래?) 몰래 서버에게 보내준 다음 일치하면 로그인이 되고 일치하지 않으면 로그인이 되지 않게 한 페이지 내에서 비동기적으로 해결할 수 있다.
XML은 DOM과 비슷하다
DOM이란 Document Object Model을 뜻한다.
XML은 우리가 직접 태그를 명명해서 사용하는 방법이다.
(HTML은 태그가 정해져 있고 직접 명명하고 싶을때 XML을 이용)
계속 사용하는 코드는 라이브러리로 만들어 처음부터 만드는 게 아니라 가져다 쓴다.
그러면 편하기도 하고 신뢰성이 높아진다.
그런 자바스크립트 라이브러리이다.
(요즘엔 제이쿼리가 많이 빠지는 추세이다. 순수자바스크립트를 많이 쓴다.)
중간에서 교통정리하는 컨트롤러 역할 웹통신이 가능한 자바이다.
HTML 웹페이지에서 자바값을 인식해야하는데 JSP가 이를 인식할 수 있다.
client와 server 중간에 있는 친구 : servlet.
역할 → 웹에서 클라이언트가 요청하는게 있으면 요청을 받고 처리해주는 친구가 servlet이다.
<hr/> // 수평선
<img src="../img/daum.png" alt="test1" style="width:200px">
엑스박스가 떴을 때 그때 설정한 alt의 이름으로 출력하게 된다.
그래서 어느 부분이 잘못됐는지 확인할 수 있다.