★ "CTRL + F"로 '워크스페이스 세팅', '서버 세팅' 찾으세요. ★
ㅁ 자바스크립트로 정적인 화면에 동적인 효과를 줄 수 있었다.
- 그렇게 구현한 화면에 사용자가 실제 요청을 보냈을 때 요청을 처리하고 응답해주는 것은 백단이다.
- 백단이 자바, 오라클, jdbc이다.
- 즉 이때까지 배웠던 화면 구현이랑 자바, 오라클 등 다 합쳐서 하나의 어플리케이션(하나의 프로젝트)를 만들 것이다.
ㅁ 프로젝트(어플리케이션)을 개발한 후에는 서버라는 공간에 배포를 해야 우리가 만든 어플리케이션을 다른 사용자들이 이용할 수 있다.
- 그래서 서버 구축을 진행한다.
- 세팅이 많다. 반복적으로 해봐야 한다. 회사가면 안 알려준다. 세팅 처음부터 끝까지 할 수 있어야 한다.
ㅁ 깃허브에 원격 저장소를 만들고, 내 pc에 로컬 저장소를 만든다.
- 현재 your repositories를 가면 04_front-workspace까지 있다.
- new로 05_jspServlet-workspace를 만든다. private, add a readMe file 하고 만든다. (원격저장소 생성 성공)
- clone을 통해서 원격저장소와 연동되는 로컬저장소를 현 pc에 구축한다.
초록색 Code 버튼을 누르고 'open with github desktop'을 선택한다.
- 현재 원격 저장소를 어디로 내려받을 건지 로컬 path를 지정해야 한다.
- browse로 c:\workspaces를 선택하면 아래 경로가 이렇게 바뀐다.
앞이 내가 선택한 경로다. 뒤는 이 이름의 폴더로 로컬저장소가 만들어질 거라는 소리다.
- 원격 저장소명이랑 로컬 저장소명을 다르게 주고싶으면 그래도 되지만 헷갈리니 같게 준다.
- c드라이브에 가서 잘 내려받아졌는지 확인한다.
- 현재 readme 파일만 있다.
- 이제부터 이폴더를 이클립스로 워크스페이스로 선택해서 실행하고, 이 안에서 여러 프로젝트를 만들 예정이다.
- 워크스페이스 자체가 작업 환경이다. 폴더 하나하나가 작업환경에 대한 폴더다.
내가 어떤 작업을 하냐에 따라서 작업환경에 대한 세팅이 매번 달라진다.
- 여기서는 이제 자바 코드가 들어갈 예정이기 때문에 git에는 절대 올라가선 안되는 파일들이 있다.
그것들을 gitignore 파일로 제외시킬 수 있다.
git ignore는 초반에 해야 한다. git ignore는 이 로컬저장소 만들고 최초로 올린 git ignore만 적용된다.
- 자바관련해서 마지막으로 했던 03_jdbc-workspace에서 gitignore 파일을 05_jspServlet-workspace 폴더에 붙여넣기.
- 그리고 git ignore를 바로 올리지 않고, 수정하고 올린다.
vscode를 실행해서 파일 - 폴더열기 - 05_jspServlet-workspace 열기 - .gitignore 파일 열기
- 맨 위 이클립스 주석 부분의 마지막에 ".properties", "Servers/" 를 추가한다. (대소문자 잘 확인)
- 저장한다. 깃허브 데스크톱에서도 추가되었는지 확인한다. 아직 커밋 푸쉬로 올리진 않는다.
ㅁ 이제부터 화면과 백엔드를 함께 구현할 예정이다.
- 화면은 HTML, CSS, JAVASCRIPT, 백엔드는 자바, DB 관련한 것들.
이 모든 것들을 이제부터 하나의 프로젝트로 제작한다.
- 그 하나의 프로젝트를 곧 웹 어플리케이션이라고 얘기한다.
- 여러분들은 하나의 어플리케이션을 제작하고, 그 어플리케이션을 서버에 올려야 다른 사용자가 서버에 요청해서 이용을 할 수 있다.
- 우리가 어떤 웹사이트에서 여기저기 눌러봤을 때 사실 주소창에 작성되어있는 url이 항상 달라진다.
이 url이 바로 서버에 요청을 보내는 것이다.
naver 서버의 메인페이지를 보여달라고 요청을 보낸 것이고, 메인페이지가 응답되어서 돌아온 것이다.
그래서 우리가 이 페이지를 볼 수 있는 것이다.
- 우리가 이제부터 제작할 어플리케이션도 마찬가지다.
사용자가 url 요청을 보냈을 때 그에 해당하는 응답페이지를 제작해서 응답할 수 있어야 한다.
그런 어플리케이션을 제작해서 우리만의 서버에 올려줘야 다른 사용자들이 이용할 수 있다.
- 웹 어플리케이션을 제작해서 서버에 배포를 해야(올려야) 클라이언트가 url로 서버에 요청해서 화면을 볼 수 있다.
ㅁ 서버는 크게 두 종류가 있다.
- 동적인 페이지들은 대부분 db로부터 데이터를 조회해와서 페이지를 구현해야 한다.
- 사용자에 따라서 다르게 보여줘야하는 페이지(동적인 페이지)를 응답하고자 한다면 웹 서버로는 불가능하다.
WAS가 필요하다.
- WAS를 사용하면 JSP, Servlet이라는 자바 기반 기술을 이용해서 동적인 화면을 만들 수 있다.
- 우리가 주로 만드는 페이지들은 대부분 동적인 페이지들이다.
그래서 결국 우리에게 필요한 서버는 WAS다.
- 통신흐름은 위와 같다.
- 클라이언트가 요청을 보내서 그 요청을 처음 받는건 웹 서버다.
만약 웹 서버만 두고 WAS, DB가 없다면 정적인 페이지인 HTML만을 응답할 수 있다.
DB로부터 데이터 조회도 못한다.
- 클라이언트가 요청, 동적 페이지면 웹서버가 WAS한테 요청, WAS는 DB에 SQL 쿼리 실행, 그 결과가 DB로부터 WAS로 돌아옴, 결과를 돌려받아서 JSP / Servlet을 활용해서 사용자에게 응답할 응답페이지를 동적으로 제작, 그걸 결과로 돌려줌, 클라이언트에게 응답해서 클라이언트가 응답 페이지를 보게 됨.
- 우리는 결국 동적인 웹 어플리케이션 제작을 위해서 WAS가 필요하다.
그 대표적인 WAS가 톰캣이다.
- 아파치 톰캣이라는 서버를 설치해서 사용할 예정이다.
- 버전에 따라서 코드 같은게 살짝씩 달라질 수 있고, 서버가 제공하는 몇몇 클래스들의 패키지 구조 같은게 조금 다르다.
우리는 9버전을 사용할 예정이다.
============================================================================
[워크스페이스 세팅]
ㅁ Apache Tomcat 다운
- 9버전을 다운받는다.
- 보통 8.5 아니면 9 버전을 쓴다.
- 11버전같은 beta 버전은 쓰는게 아니다.
- apache-tomcat-9.0.93라는 압축 파일을 풀면 어떤 프로그램으로 압축을 풀었느냐에 따라 다른데 2겹으로 감싸져 있다.
바깥쪽 말고 안쪽의 apache-tomcat-9.0.93 폴더를 c:\dev 폴더로 옮긴다.
- dev 폴더는 개발하면서 필요한 문서, 파일, 폴더 등을 두는 곳이다.
ㅁ 웹개발 할 때는 자바때와는 달리 설정할 게 많다.
- 이클립스를 연다.
- 워크스페이스를 "C:\workspaces\05_jspServlet-workspace" 선택하고 launch.
- 자바때는 open perspective로 "Java" 환경으로 바꿨었는데, 웹 개발은 바꾸지 않고 "Java EE" 환경 그대로 사용한다.
- 오른쪽의 outline 뷰 닫고, 하단에서 problems, Servers 빼고 다 닫는다.
- window - show view - console 뷰 열기
- window - show view - other... - "package Explorer" 검색
- 프로젝트 익스플로러는 똑같은 프로젝트를 어떤 구조 위주로 볼건지에 대한 창이다. 탐색기 창이다. 그냥 둔다.
ㅁ new에서 뜨는 목록 설정
- 나중에 패키지 익스플로러에서 우클릭 - new로 필요한 것들을 만들 때 정작 내가 필요한건 잘 안보이고 불필요한 것들이 많이 보여진다. (상단 File - new에도 적용된다)
- 내가 자주 쓰는 것들 위주로 목록이 뜨게끔 설정한다. 필수 설정은 아니고 편하려고 하는 설정이다.
- window - Perspective - cusomize perspective 여기서 shortcuts 탭에서 불필요한 것들을 체크 해제한다.
- 목록 중에 일부만 체크되어 있으면 "-"으로 표시된다.
- 왼쪽 EJB 체크 해제.
- 왼쪽 Java를 클릭(체크는 아님)하고 오른쪽 창에서 Class, interface, package, source folder 체크한다.
- 왼쪽 Java EE, JavaScript, JPA, Maven 체크 해제
- 왼쪽 Web에서 오른쪽의 Static web project는 체크 해제. 우리는 동적인 웹 프로젝트를 만든다. Filter는 체크한다.
- 왼쪽 Web Services 체크 해제
- apply and close
- 이러면 상단 File - new에 뜨는 목록들이 체크한 것들만 보여진다. Other... 눌러서 찾을 수도 있다.
ㅁ UTF-8 인코딩
- 웹과 관련된 파일들은 한글을 사용하기 때문에 다 UTF-8로 설정해야 한다.
- JDBC까지는 웹개발을 한 게 아니라 2군데만 UTF-8로 설정을 했다.
이젠 웹개발을 할거라 웹 개발 관련 파일들도 UTF-8로 설정해야 한다.
- window - preferences - general - workspace에서 UTF-8로 설정
- window - preferences - Web - CSS files, HTML files, JSP Files의 인코딩을 제일 위에 있는 "ISO 10646/UNICODE(UTF-8)"로 설정 ("enco"를 검색한다)
- window - preferences - XML - XML Files 의 인코딩을 제일 위에 있는 "ISO 10646/UNICODE(UTF-8)"로 설정.
- window - preferences - general - editors - text editors - spelling - Encoding에서 Default (UTF-8) 체크 ("spelling" 검색)
ㅁ 자동완성기능, 폰트, tab size 등 설정
- window - preferences - java - code style - code templates 에서
'Code' 눌러서 method body, catch block body에서 주석 지운다. (+ constructor body 생성자 주석)
- general - appeance - colors and fonts - basic 확장 - text font 선택하고 오른쪽에서 Edit.. 누르고 D2CODING 선택하고 확인.
- window - preferences - general - editors - text editors에서 Displayed tab width를 4에서 2로 바꾼다. (tab 검색)
탭 사이즈는 자바 코드에는 반영되지 않음. 화면 구현 관련한 파일에서 적용된다.
자바 코드에 탭 사이즈 반영은 별다른 설정해야되서 스킵.
- 주석문의 빨간줄이 거슬린다면 window - preferences - general - editors - text editors - spelling에서 제일 위의
Enable spell checking을 체크 해제한다.
- window - preferences - XML(Wild Web Devloper)에서 Download external resources like referenced DTD, XSD를 체크한다.
( 이 설정은 외부 XML 리소스(예: DTD, XSD 파일)를 다운로드하도록 허용하는 옵션입니다. 이 설정은 XML 파일의 유효성 검사 및 자동 완성 기능을 개선하기 위해 사용됩니다. )
(xml 파일 실행엔 문제가 없지만 주석에 빨간줄이 많이 떠서 거슬린다. 이걸 체크하면 빨간줄이 안 뜸.)
ㅁ 워크스페이스, 서버 관련 세팅은 git에 올라가지 않는다. PC를 바꿀 때마다 다시 해야 한다.
ㅁ MyBatis 추가 세팅(2024.10.10)
- 추가로 한가지 세팅을 더 한다.
- Web - JSP Files - Editor - Templates - 'New JSP File (html 5)'
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="contextPath" value="$${pageContext.request.contextPath}" />
- JSP 파일 만들때 마다 상단에 taglib 지시어에 core 라이브러리를 선언하기 귀찮아서 연동 구문이 쓰여진채로 만들어지게 하는 설정이다.
- 추가로 context path를 동적으로 알아내는 구문도 작성한다.
==========================================================================
[서버 세팅]
ㅁ 이 워크스페이스에서 프로젝트를 제작할 예정이다.
- 프로젝트를 서버에 올려서 구동시켜야만 브라우저를 통해서 사이트를 이용할 수 있다.
- c:\dev에 아파치 톰캣 WAS 서버를 갖다 놨는데, 이 서버를 우리가 스타트하거나 스탑하거나 프로젝트를 올린다던가 하는 과정을 원래방식대로 하려면 리눅스 명령어를 사용해야 한다.
- 이클립스에서는 보다 편하게 서버를 우리가 연동해서 쓸 수 있다. 이제부터 서버 세팅을 한다.
ㅁ 이클립스에서 서버 연동하기 (서버 세팅)
- 현재 생성된 서버가 하나도 없기 때문에 하단의 Servers 탭의 파란 글씨(~ create a new server...) 클릭하면
New Server라는 창이 뜬다.
- Apache를 펼쳐서 9버전(다운받아 놓은 버전) 선택한다.
- Server's host name은 localhost로 되어있는데 바꿔서는 안 된다.
이 서버가 위치해 있는 IP주소인데, 지금 우리는 각자 본인 PC 서버를 구축하고 있다.
각자 본인 pc의 ip주소를 입력해야 하는데 그걸 대변하는 게 localhost다.
- Server name은 수정해도 된다. 단순히 하단의 Servers 뷰에 노출될 이름이다. 수정 안하고 next.
- Tomcat installation directory - browse에서 연동시킬 서버의 경로를 제시한다.
c:\dev에서 apache-tomcat-9.0.93 폴더를 누른다. 경로가 C:\dev\apache-tomcat-9.0.93로 뜬다.
- 사실 바로 finish를 눌러도 되는데 NEXT를 한번 눌러본다.
- 이 서버 위에 어떤 프로젝트를 올릴까 선택하는 창이다.
그런데 아직 프로젝트를 만든게 없어서 서버에 올릴 프로젝트가 없다. 그냥 바로 finish.
- 이러면 서버가 생성되었다. 이제 이클립스에서 편하게 서버를 구동시킬 수 있다.
우리가 만든 어플리케이션을 이 서버 위에 배포시킬 수 있고, 그 서버를 구동시킬 수도 있고 멈출 수도 있다.
- 패키지 익스플로러와 프로젝트 익스플로러에 Servers라는 폴더가 생성되었다. 굳이 열어볼 필요는 없다.
Server와 관련된 환경설정 파일들이 담겨 있다. 열어서 수정할 필요는 없다.
- 서버를 생성하면 그 서버와 관련된 환경설정 파일들이 담겨있는 폴더 하나가 만들어진다.
서버를 하나 더 생성하면 또 새로운 폴더가 하나 더 만들어진다.
ㅁ 서버를 생성했다고 끝이 아니고, 생성하자마자 반드시 해야하는 설정이 있다.
- 하단의 Servers 뷰에서 설정 변경하고자 하는 서버를 더블 클릭하면 Tomcat v9.0 Server at localhost 탭이 뜬다.
- 이 서버에 대한 세팅을 아까 그 Servers 폴더를 열어서 직접 server.xml 파일을 열어서 작성해서 설정을 해도 되지만 굉장히 복잡하다. 이 탭에서 훨씬 편하게 세팅할 수 있다.
- Server Options 탭에서 Serve module without publishng을 체크한다.
이걸 체크하지 않으면 나중에 파일 업로드 같은 기능을 하게될 때 내가 어떤 위치를 지정해서 파일 다운로드를 진행시킬 건데 그 때 지정된 위치가 외부 이상한 경로로 잡히게 된다. (?)
- Ports 탭에서 tomcat admin port이 8005로 되어있는데 혹시 다른 프로세스에서 이미 쓰고 있으면 수정을 해야 한다.
- Ports 탭에서 HTTP/1.1를 8080에서 다른 프로세스에서 사용하고 있지 않은 8888로 변경한다.
포트번호는 다른 프로세스에서 이 포트를 쓰고 있어서는 안 된다. 오라클이 8080 포트를 사용한다.
- 세미용 서버 세팅은 Tomcat admin port를 8005가 아닌 9005, HTTP/1.1을 8080이 아닌 9999로 했다.
- 나중에 서버를 하나 더 만들고 각각 구동을 시킬 수도 있다.
그러면 그땐 tomcat admin port와 HTTP/1.1 둘 다 겹치지 않도록 수정해야 한다.
- ctrl s나 디스크 모양을 눌러서 저장하고 닫기.
ㅁ 참고로 서버가 문제가 되는 경우가 빈번하다.
- 아무리 서버 스타트를 해도 제대로 스타트가 안되면 서버를 아예 지웠다가 다시 생성하는 것이 좋다.
이때 단순히 Servers 탭에서만 지우지만 말고, package explorer의 Servers 폴더도 아예 제거를 했다가 다시 구축을 하는 게 좋다.
ㅁ 프로젝트 세팅은 다음 게시글
'05_Server (04. JSP 프로그래밍 구현)' 카테고리의 다른 글
| 화면구현 - 웹사이트 개발 화면 구현 (BootStrap) (3) | 2024.08.28 |
|---|---|
| [Servlet + JSP] 서블릿과 JSP 결합 (5) | 2024.08.28 |
| [JSP] JSP (0) | 2024.08.27 |
| [Servlet] 서블릿(2) (0) | 2024.08.27 |
| [Servlet] 서블릿(1) - 프로젝트 세팅(만들기) (2) | 2024.08.26 |
