프로그래밍/웹 개발

[Intellij] JSP Web Project 생성 세팅(Tomcat 연동)

나그네형 2023. 6. 20. 00:32

* 실습환경 intellij Ultimate , mac ventura os 13.3.1를 기준으로 작성됨.

* intellij, JSP, Tomcat을 이용해 간단하게 web개발 실습을 하는 초보자에게 도움이 될만한 글임.(DB연동 x)

* 나를 비롯한 초보자를 위해 A부터 Z까지 상세하게 서술하는 글이니 특정 정보를 얻고자 방문한 분은 시간낭비할 확률이 높음.

* 또한 단순히 방법론적인 정보 전달 측면의 글이 아닌 어떤 이유로 이러한 과정을 거치는지에 대해 아는 만큼 서술할 예정.

* 이 글을 보시는 분들도 단순히 따라하면서 프로젝트를 만들고 실습환경을 세팅하는데에 급급하기보다 공부하는 차원에서 보셨으면 함.

1. intellij로 Web Project를 생성하게 된 계기 :

기존에 eclipse로 JSP를 이용한 web 개발 실습 진행 -> 가독성 떨어지고 code assist나 auto complete가 intellij 보다 잘 안돼있음, 또한 mac에서 eclipse사용시 한글 지울시 2글자가 지워지는 버그가 있는 등 여러가지 측면에서 intellij가 훨씬 낫다고 판단됨.

+ 얼떨결에 eclipse plug in 설치하다가 기존 프로젝트가 안열려버리는 오류가 발생 -> intellij로 개발환경 변경 시도

2. intellij로 project를 생성하면서 부딪히게 된 여러가지 문제점

eclipse에서는 dynamic web project로 생성하면 모든 게 쉽게 진행됐지만 intellij는 또 별도로 설정해줘야 하는 것이 있었음.

 

 

1. Project 생성 : File -> New ->  Project로  새 프로젝트를 생성한다.

 

2. 전체 Project 설정 : New Project를 선택 후 손댈 것 없이 바로 create(Language는 Java로 설정돼있어야 한다.) -> 현재 진행중인 실습은 JSP를 이용한 게시판 만들기이기 때문에 Java를 기반으로 한 Project를 생성한다.

 

3. Web Framework Setting : 프로젝트 폴더를 우클릭한 후에 add framework setting 클릭, 이 부분에서는 다른 블로그와 나의 인터페이스가 다르게 나오긴 했으나 우선은 필자는 이처럼 진행해서 되긴 했음. 우선 Web Application을 체크한 후에 ok를 눌러준다. 

이렇게 설정하게 되면 web 폴더가 생성되며 web.WEB-INF.web.xml 파일이 생겨나게 된다. 

 

* xml(eXtensible Markup Language) 파일이란? : xml파일은 html파일과 크게 다를 것이 없다. 오히려 더 단순한 언어라고 생각하면 된다. xml에는 html의 태그처럼 기존에 정의된 태그가 없이 사용자가 그 때 그때 태그를 생성해내 텍스트를 전달한다. xml파일은 즉 데이터를 교환하기 위한 파일의 표준형식이라고 생각하면 된다. 아래의 코드를 내가 작성했다고 가정했을 때 저 태그들은 그냥 별다른 의미를 가지고 있지 않은 텍스트들일 뿐이다. 다만 저 데이터들이 의미있어지고 중요한 데이터를 가지고 있게 된다면 수신자 측에게는 중요한 정보가 될 것이다.

<book>
<title>Harry Potter and the Sorcerer's Stone</title>
<author>J.K. Rowling</author>
<year>1997</year>
</book>

즉 앞으로 우리가 프로젝트를 생성하거나 이외의 상황에서 xml파일을 마주하게 된다면 어떠한 데이터를 전달하기 위한 문서이구나 라고 생각하면 한층 더 이해하기 쉽지 않을까?

 

4. Project dependency Setting : 프로젝트 폴더 우클릭 후 Open Module Settings 클릭 or 커맨드 + ; 를 입력해서 Project Structure창을 띄운다. 그리고 좌측의 Modules탭에서 Dependencies를 선택 후 + 버튼을 누른다. 그 다음 JARs or Directories를 클릭한다(1번 이외의 2 3번을 선택했을 때도 크게 문제될 건 없어 보인다. 뇌피셜). 그리고 본인의 Tomcat경로로 들어가 Tomcat폴더 내부의 lib폴더로 지정해준다. 

 

* 이 과정을 거치지 않으면 JSP파일에 JSP문법으로 코드를 작성해도 해당 코드를 인식하지 못하는 에러가 발생하게 된다.

대표적인 예로 HttpServletRequest의 객체인 request를 통해 getParameter와 같은 메서드에 접근할 수 없게 된다. 즉 lib 폴더를 dependency(의존성) 설정해줌으로서 여러가지 api를 참조할 수 있게 되는 것이다.

 

5. Tomcat Server 설정 및 Artiface 설정1 : 상위탭의 run 부분의 edit configurations 세팅으로 본인이 설치한 버전에 해당하는 tomcat server를 local로 생성한다. 이후 Deployment 탭으로 들어가서 +를 누른 후 artifact를 설정한다. -> web project는 기본적으로 확장자명을 war로 설정해야 한다.

* Artifact란 무엇인가? : 컴퓨터 사이언스에서 Artifact는 굉장히 광범위한 용어로 사용된다. 소프트웨어 개발에 필요한 어떠한 소스코드나 스크립트 등 개발을 하기위해 필요한 무엇인가를 Artifact라고 지칭하는 것 같다. 여기서는 Web 개발을 위한 .war(확장자명) Artifdact가 필요하구나 라고만 생각하고 넘어가자.

 

Application Context는 어플리케이션을 실행할 때 url을 어떤 경로로 설정할 것이냐 정할 수 있다 .즉 Tomcat 서버 위에서 내가 실행할 html, 혹은 jsp 파일은 일반적으로 'localhost:8080/파일명' 으로 실행된다. 저기서 Application context를 설정하게 되면 포트번호와 파일명 사이에 저 경로가 추가된다. 이름을 없애든 본인이 원하는 이름으로 설정하든 관계없다.

 

6. Tomcat Server 설정 및 Artiface 설정2 : Deployment탭에서 다시 Server탭으로 넘어온다. 그리고 Server로 사용할 내 PC의 서버 경로를 설정해주는데 이때 경로는 appache-tomcat-$버전명  의 폴더로 설정한다. 더 깊이 들어가서 bin폴더나 lib폴더로 설정하지 않게 주의한다. 다음 URL은 아마 본인이 방금 설정한 Application context 이름이 포트 번호 뒤에 붙어있을 것이다. 저 URL로 Server가 실행된다는 것.

추가적으로 소스코드를 수정하고 변경사항을 확인하기 위해서는 On frame deactivation : Do nothing -> Update classes and resources로 변경해준다. 그러면 파일을 저장하고 서버가 실행된 페이지를 새로고침 할때마다 변경사항이 바로바로 적용된다.

마지막으로 port 번호는 본인이 원하는 port번호로 설정하되 아래쪽 숫자는 port번호를 사용할 확률이 높으니 더 큰 숫자로 설정해준다. 그래도 헷갈린다면 '활성 상태 보기'를 통해 현재 프로세스들이 사용중인 port 번호를 확인한다. --> 아마 더 확실한 방법은 터미널은 통해 프로세스들의 사용중인 포트번호를 조회하는 것일듯.

 

 

7. JSP File 생성 :  이제 본격적으로 JSP File을 생성해볼 차례이다. JSP File은 파란색 동그라미 표시가 있는 web 폴더에서 우클릭한 후 생성할 수 있다. 이외의 폴더에서는 생성할 수 없다. 설정을 통해 JSP 파일을 생성할 수 있는 방법이 존재하기는 한다. 기본적으로 web 디렉토리 내에는 index.jsp파일이 있을 것이다. 이제 Server를 실행하고 정상적으로 작동되는지 확인해볼 차례이다.

설정한대로 잘 접속됨을 확인할 수 있다.

혹시 404 에러가 발생한다면 나도 모르는 곳에서 8080 포트 번호가 사용중일 수 있으니 아까 설정한 Run Edit Configuration 창에서 prot 번호를 8081, 8082등으로 바꿔서 시도해보길 바란다.

 

 

 

 

 

 

 

 

 

 

 

 

 

참고사이트 : https://velog.io/@kiwonkim/IntelliJ-%EC%9B%B9-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%8B%9C%EC%9E%91-%EB%B0%A9%EB%B2%95