플젝이 끝난지 벌써 1달이 훌쩍... 오랜만에 기술용어들을 접하면서 멘붕이 왔다.


아니... 나 이거 분명 아는건데? 왤케 생소한거? 똥망의 냄새.


아 난 기억력이 정말 똥파리 수준이라는것조차 망각하고 말았다. 이래서 내가 블로그를 시작했지 참.

멘탈이 탈탈 털리고 정신을 차리고 아주 기초적인 용어들을 다시 잡아볼까 한다.


그 시작은 바로 에이잭스! 뚜둔-.



AJAX란?

에이잭스로 말할 것 같으면, 일단 위키는 이렇게 설명하고 있다.

Ajax는 비동기적인 웹 앱 제작을 위해 어떠한 "조합"을 이용하는 웹 개발 기법이다.

즉, 얘는 그 자체가 하나의 기술을 말하는건 아니고, 그냥 같이 쓰는 몇 개의 기술이 있는데 걔네들을 묶어서 이렇게 부르는 거다.



그렇담, 묶어서 쓴다는 그 기술들은  뭔데?

- HTML & CSS
- DOM & JavaScript
XML & XSLT & XMLHttpRequest

이런 것들이 있다고 한다.

각각의 기술들에 대한 설명은 차차 하도록 하고.


왜 이런 조합, 그러니까 AJAX가 생겨나게 된걸까 그 배경을 한번 살펴보자.




AJAX 탄생 배경

에이줵스 이전의 웹 애플리케이션이 어떻게 동작했느냐 하면은(사실 아직도 이 방법 계속 많이많이 쓰고 있음.)


클라이언트에서 어떤 요청을 서버한테 보내면  -> 서버는 그 요청에 맞게 데이터를 가공해서 새로운 웹 페이지를 생성해 버린다.

 -> 그리고 이렇게 생성한거를  다시 클라이언트에게 응답으로 주는 방식이었다.


자. 이 대목에서 중요한건, 서버쪽에서 지가 새로운 웹페이지를 생성해서 준다는 데에 있다.

요거요거 바로 JSP 방식이다. 이 얘긴 또 기니까 다음에 차차 하기로 하고.


고런데 이 때 약간의 문제가 뭐냐 하면, 대역폭 낭비가 생겨버린다는 거다.

뭔 말이냐 하면.

처음에 클라이언트가 주는 페이지나, 서버가 새로 생성해서 돌려준 그 페이지나 별 차이가 없는데, 서버가 굳---이 페이지를 새롭게 만들어 주는 바람에,

중복되는 HTML코드가 전송되면서 대역폭이 낭비된다 이거다.


그래서 생긴게 바로 아작스, 두둥-.




AJAX는 어떻게 돌아가냐면,

얘는, 클라이언트가 요청을 서버한테 보내면 -> 서버가 거기에 필요한 데이터만 가공해서 클라이언트한테 넘기고,

 -> 그걸 건네 받은 클라이언트는 지가 알아서 그걸 처리해서 화면에 보여주든 말든 한다.



이렇게 하면 클라이언트와 서버 간에 교환되는 데이터량이 훨씬 줄어들고, 웹 서버에서 처리해야하는 데이터 양도 확 줄어들기 때문에, 애플리케이션의 응답성이 좋아진다!


또한, 할 일이 안그래도 많은 서버한테 페이지 생성까지 시키니까 서버가 부담이 이만저만이 아니었는데,

이 방법을 써먹으면 데이터만 싹 보내고 끝이니까 서버의 부하를 줄일 수 있다.


클라이언트쪽에서도 좋은게, 무조건 서버쪽에서 보내준 화면을 띄울 수 밖에 없었던 기존 방법과는 달리!

서버에서 데이터만 보내주면 자기 입맛에 맞게 처리할 수 있다. 

좀 유식하게 말하면, 클라이언트에게 처리를 위임할 수 있다.






음. 일단 밤이 깊었으니까 오늘은 여까지.

이전에 자바 웹 프로젝트를 생성하는 것을 설명한 적이 있었당.


요것을 모르겠다면 이전 포스트 읽고오시길.


=>  2017/06/01 - [Programming/Lib, Tools] - Eclipse :: 이클립스에서 웹 애플리케이션(Web Application) 프로젝트 만들기



이번 포스트에서는 이클립스의 자바 웹 애플리케이션 구조 와  실무의 자바 웹 애플리케이션 구조  를 설명하고 어떻게 다른지 비교하면서


왜. 대체 왜 실무에서는 다른 프로젝트 폴더 구조를 사용하는지를 이야기하며 마무리하도록 하게따.



1. 이클립스 웹 애플리케이션 디렉토리 구조

$workspace/프로젝트명/build

/classes

/src

/WebContent

/META-INF

/WEB-INF

/lib


이거슨 이클립스의 자바 웹 애플리케이션 디렉토리 구조이다.

이전에 이클립스에서 웹 프로젝트를 만드는 방법을 소개했었는데, 그 2 가지 방법이 있었다. 
(이클립스의 다이나믹 웹 프로젝트를 만드는 방법과 gradle을 이용하는 방법.)

그 중, 손쉽게 만들 수 있는 이클립스 다이나믹 웹 프로젝트를 생성하게되면, 위와 같은 구조를 띈다.

그런데, 회사마다 다르겠지만. 이 구조는 잘 사용하지 않는다.


그렇담?? 뭐가 실무에서 많이 쓰이는데??

2. 실무의 웹 애플리케이션 디렉토리 구조 (=Maven 웹 프로젝트 구조)


실무에서는 대부분  메이븐의 웹 프로젝트 구조를 많이 쓴다.

개발을 돕는 툴들이 겁나게 많은데, 메이븐은 그 중 하나로, 사이트에 가보면 스스로를 이렇게 설명하고 있다.

Apache Maven is a software project management and comprehension tool. Based on the concept of a project object model (POM), Maven can manage a project's build, reporting and documentation from a central piece of information.


비슷한게 Gradle이 요새는 뜨고 있는데 이와 관련된 내용은 다음에 제대로 포스팅 하는 것으로 하고. 

다시 본론으로 돌아와, 이게 그 폴더 구조이다.

$workspace/프로젝트명

/src

/main

/java

/resources

/webapp(=WebContent)

/WEB-INF

/test

/java

/resources

/bin




 

<디렉토리 설명>


-  src : 프로그램 소스 파일을 두는 곳


- main/java : 자바 소스 파일(.java파일)을 두는 곳


- main/resources : 프로그램을 실행할 때 사용하는 설정 파일(.properties, .xml 등)을 두는 곳


- main/webapp : HTML, CSS, JavaScript, GIF 등 정적 웹 자원을 두는 곳.

                   (JSP파일도 여기에 둠)


- main/webapp/WEB-INF : 웹 애플리케이션 정보 파일을 두는 곳


- test : 코드를 테스트하는 소스 파일을 두는 곳


- test/java : 단위 테스트 관련 자바 소스 파일을 두는 곳


-bin : 소스코드가 컴파일된 *.class 파일, *properties파일, *xml파일 등



그런데 우리의 이클립스는 메이븐 폴더구조를 알아서 딱딱 만들어주지 않는다.


이클립스로 웹 플젝트를 암만 만들어봐야 지네 플젝 구조를 만들어줄 뿐. 몹쓸.



3. 현업에서 메이븐 폴더 구조를 자바 웹프로젝트 디렉토리 구조로 많이 사용하는 이유

사람마다, 회사마다 모두 다른 IDE를 사용한다.

어떤 사람은 이클립스를 쓰는데 또 어떤 사람은  인텔리제이를 쓰고.. 

그럼 프로젝트를 함께 개발한다고 할 때, 공유하기가 매우 불편하다.


즉, 특정 IDE폴더구조를 사용하게 되면 공유하기가 불편하다. 


저사람과 내가 사용하는 폴더구조가 다르면, 어떤 파일은 여기에, 또 어떤 파일은 저기에 내가 직접 한땀한땀 복붙해줘야 하며

뭐 하나 잘못하면 잘 돌아가야 할 프로젝트가 안 돌아가는 대참사가 일어나게 마련.


이 때문에 전 세계 공통으로 사용하는 폴더구조가 있는데 그게  Maven 폴더 구조다.

이게 국제적으로 모든 개발자가 가장 많이 사용하는 폴더 구조인거다.


그리고 다른 사람과 공유할 일이 생기면, src폴더만 공유하면 된다.



그럼 이클립스에서 이 메이븐 폴더 구조를 사용하려면??


이클립스에서 메이븐 폴더 구조를 만들어주려면 src 폴더와 그 밑의 폴더들을 모두 직접 만들어주면 된다.


참고로 이클립스는 컴파일이 되면서 자동으로 bin 폴더를 생성한 후 그 곳에 class파일을 두니까 굳이 bin폴더를 만들어줄 필요는 없다.


src 폴더 구조만 만들어준 후, 이전 포스트에서 소개한 방법을 응용해주면 되시겠다.



끄읏-.






  1. 굳은모와무른모 2019.03.17 19:58

    잘보고갑니다^^

  2. ㅎㅇ 2019.11.17 15:46

    감사합니다!

이전 포스트에서 이클립스에서 톰캣을 실행시키는 방법과 그 이유를 설명했다.


이번엔, 이클립스에서 웹 프로젝트를 만드는 2가지 방법을 설명하려고 한다.




이클립스 웹 프로젝트를 만들려면


1) 이클립스에서 직접 웹 프로젝트를 만들 수도 있고,

2) Gradle 도구를 사용하여 이클립스 웹 프로젝트를 만들 수도 있다. 




그러면 두 가지를 다 해보면서 뭐가 더 좋은지도 설명하고 끝내도록 하게따-.




1. 이클립스에서 Dynamic Web Project 만들기



이클립스에서 아래와 같이 Dynamic Web Project를 만들어 준다.




그러면 이런 창이 뜨는데, 먼저 원하는 프로젝트 명을 입력해준다.





프로젝트 다 만들었으면 웹 애플리케이션을 서버실행 환경에 배치해야 한다.


이거슬 해줘야 이전 포스트에서 설명한 그 tmp~ 폴더에 이 웹 프로젝트 파일들이 복붙되어 실행이 가능해진다.


어케 하냐면 


Servers 뷰(이거 뭔지 모르겠으면 이전 포스트 읽으세요) 에서,

등록한 서버에다 대고 오른쪽 마우스 눌러서 context menu를 띄운 다음 > Add and Remove 를 눌러준다. 그럼 아래의 창이 뜬다.





여기서 왼쪽 목록에 나열되어 있는 웹 프로젝트를 선택해서 오른쪽 목록에 추가한다.


그러면 끄읏~!





2. Gradle 도구로 이클립스 웹 프로젝트 만들기


자. 이 방법으로 웹 프로젝트를 만들려면... build.gradle 파일이 일단 있어야 한다.


build.gradle 파일로 말할 것 같으면 여기다가 쓰기엔 역부족이라서ㅜㅜ 다음에 기회가 되면 포스팅 하는 것으로 하고.


이런 파일을 이미 알고 있다는 가정 하에. 



먼저, General 폴더를 하나 만들어준다.




적당히 원하는 이름을 갖다 붙여서 만들어준다. (웹 앱 프로젝트 명)




그러면 Project Explorer에 요렇게 새로 만든 폴더가 생긴다.




그럼 요 폴더에다가 build.gradle 파일을 하나 만들어준다.

원래 있었으면 걍 복붙.






이렇게 해줬으면 build.gradle 파일에다가 아래와 같은 코드를 추가해준다.



  apply plugin: 'eclipse-wtp' 

  apply plugin: 'war' 

  webAppDirName='WebContent'



수정된 build.gradle파일을 저장한 후, 콘솔창(명령 프롬프트)을 켠다.


콘솔창에서 우리가 방금  만들어준 폴더로 이동을 해준 다음, "gradle eclipse"라는 명령을 딱 쳐주면



이렇게 빌드를 성공했다고 나올 거시다.


어디 한번 확인을 해볼가.




다시 이클립스로 돌아와, Project Explorer에서 내가 방금 만든 wow 프로젝트 폴더를 Refresh 해주면...



두둥-. 


아까는 없던 것들이 생긴 것을 볼 수 있다.


그리고 폴더 생김새를 잘 보면 지구본 모양과 J가 붙어있는걸 확인할 수 있다!


요 모양이 바로 "나는 웹 애플리케이션 프로젝트에요" 하고 알려주는 표시다. 요게 생겼으면 잘 된거임.




이렇게 프로젝트 폴더 다 생성 했으면, 아까 이클립스에서 웹 애플리케이션 프로젝트 생성하는 방법에서 해줬던 것처럼


웹 애플리케이션을 서버실행 환경에 배치해주면 진짜 끗-.




2번째 방법을 추천한다.

두 가지 방법 중 간편한 것은 사실 첫 번째 방법이다.


그치만 첫 번째 방법은 다른 사람과 프로젝트 폴더를 공유하기가 어렵다.


왜냐면 저렇게 만든 경우, 프로젝트 설정 파일이 개별적인 PC환경을 반영하기 때문이다.



그래서 Grale 도구를 사용하여 이클립스 웹 프로젝트를 만드는 두 번째 방법을 추천한다..!!


두 번째 방법은 오로지 src 파일과 build.gradle 파일만 있으면  되기 때문에, 파일을 공유할 때 그것만 주면 된다.




끄읏!

  1. ggalggal 2017.06.01 18:26

    요청자료 감사합니다

  2. 의성어장인 2017.06.02 17:09

    보기쉽게 잘설명하셨네여 자주보러올게요 키ㅓㅏ아ㅏㅏㅏ

  3. H 2017.06.03 15:27

    멋져부려요~ 저도 막 요청해도 포스팅 해주시나요? ㅋㅋ~~~

+ Recent posts