47일차 - [JSP] 톰캣 설치(이클립스 설정), emmet 설치, 주석

안녕하세요. pitang입니다.

이제는 JSP(Java Server Page)에 대해 알아보겠습니다.

정확하게는 JSP를 사용하기 위한 설정을 모두해보겠습니당~!

 

JSP 기초

JSP는 동적 페이지를 작성하는 데 사용되는 자바의 표준 기술이다.

HTML 응답을 생성하는데 필요한 기능을 제공하고 있다.

더 정확하게는 HTML응답뿐만 아니라 XML, JSON, 바이너리 파일 등도 응답으로 생성할 수 있지만,

JSP 코드를 작성하는 주된 목적은 웹 브라우저에 보여 줄 HTML 문서를 생성하는 것이다.

 

JSP를 이용해서 만든 프로그램을 실행하려면 톰캣(Tomcat)이나 제티(Jetty) 또는 JBoss EAP와 같은 서버 프로그램이 필요하다.

단순 웹 서버가 정적인 HTML 파일이나 이미지를 제공하는 것과 달리

서버는 웹을 위한 연결, 프로그래밍 언어, 데이터 베이스 연동과 같이 애플리케이션을 구현하는데 필요한 기능을 제공하고 있다.

 

앞으로, 서버 프로그램은 톰캣 9 버전을 사용할 것이다. 

---

톰캣 9 버전 다운로드 및 설치

 

톰캣을 검색해 아래의 사이트를 들어가게 되면 Download의 Tomcat9를 선택한다.

http://tomcat.apache.org

Apache Tomcat® - Welcome!

 

Tomcat

m1 맥북이므로 tar.gz 파일을 다운로드하고 압축을 풀어준다.

그 이후, 이클립스 workspace에 톰캣 폴더를 넣어준다.

java 폴더

여기까지 설정했다면 이클립스에서 설정을 해줘야 한다. 

 

New->Other>Server->Tomcat v9.0 Server->위에서 넣어준 톰캣 폴더 선택->Finish 하면 Servers폴더가 생길 것이다.

New->Other->설정과정

Server 폴더 완성

 

그다음,

New->Dynamic Web Project->Next->프로젝트명을 설정해서 프로젝트를 만들 수 있다.

예시

 

ex1) WebContent 폴더에 jsp 파일을 만들었다.

01jsp.jsp

console

 

jsp파일 -> java파일

-> 이클립스에서 tomcat으로 출력을 했을 때, 

     에러가 나면 jsp가 java파일로 컴파일된 경로만 나오고 jsp의 오류는 알려주지 않을 때가 있다. 

     그때, java 파일을 확인해야 하므로 java 파일을 확인하는 방법은 아래와 같다.

---

이클립스 workspace 폴더에서 .metadata를 찾아야 하는데 처음엔 안 보인다.

mac에서는 우클릭을 해도 안 보이고 shift + command + . 을 누르면 숨긴 폴더를 볼 수 있고 .metadata폴더가 아래처럼 보일 것이다.

 

eclipse-workspace

.metadata/.plugins/org.eclipse.wst.server.core/tmp0/work/Catalina/localhost/만든폴더

-> 쭉쭉쭉 들어가면 java파일이 있을 것이다.

경로

java 파일이 있는 폴더

---

굳이 안 해도 되지만, 보기 편하게 chrome으로 기본 브라우저를 설정해주었다.

chrome이 깔려있음에도 이클립스에 뜨지 않아 직접 추가해주었다.

 

Eclipse->Preferences->Web Browser->Use external web browser선택 후,

New...->Name:이름과 Location: 크롬이 깔려있는 경로를 설정해주고->OK

Chrome 기본 브라우저 설정

 

여기까지 완료해주면 톰캣 9 버전도 사용 가능하고 기본 실행되는 브라우저가 크롬으로 설정이 완료가 된다.

 

emmet 설치

jsp파일에서 emmet이 사용되지 않아 직접 설치해주었다.

 

emmet eclipse를 검색하면 아래의 사이트가 거의 맨 위에 검색이 될 것이다. 이 사이트에 들어가면 따라 하기 쉽게 작성되어있다.

https://github.com/emmetio/emmet-eclipse

GitHub - emmetio/emmet-eclipse: Emmet for Eclipse

 

사이트 안에 있는 내용을 가져와 설명하자면!

 

Help->Install New Software->Add 를 클릭하면 Add Repository가 뜰 것이다.

Name:이름과 Location:http://download.emmet.io/eclipse/updates/

Location을 복사해 넣어주고 Add->Next->agree->finish를 누르면 우측 하단에 Installing Software로 다운로드가 되고 있을 것이다.

다운로드가 다 되면 알아서 restart 할 거냐고 물어봐준다. 그때, restart 해주면 설치 완료!

Help->Install New Software

 

Eclipse->Preferences->Emmet->여기에라고 적혀있는 부분에 tag, jspf, jsp를 추가해주면 정말 끝이다.

지금은 jsp만 추가해줘도 되지만 추후에 배울 것들을 모두 추가해놓았다.

Eclipse->Preferences->emmet

 

emmet은 내용을 적고 enter 가 아닌 tap 키를 눌러주면 완성이 된다.

 

주석(comment)

/* css주석 */ 

<!-- html 주석 -->

// java 주석

// js 주석

<%-- jsp 주석 --%>

 

ex)

06comment.jsp - console(페이지 소스 보기)

 

 

 

 

모든 프로그램의 시작, 설치 및 환경설정이 제일 어려운 것 같습니다.... 

그냥 보고 따라 하기만 하는 건데도 자꾸 오류가 나는 이유는 무엇인지 그래도 잘 다운로드되었으니 

앞으로 또 다시 개념! 알아보도록 하겠습니다!

 

감사합니다.

 

*m1 맥북을 사용 중입니다.*