플젝이 끝난지 벌써 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

    감사합니다!

미니 Web Application Server(WAS)를 짜려다보니...


HTTP의 요청 프로토콜과 응답 프로토콜에 대한 이해가 먼저 필요했다.



왜냐면 HTTP는 요청과 응답의 한 세트로 모든 일이 일어나기 때문!


그래서 이번 포스트에서는 요청 프로토콜에 대해 다뤄보도록 하겠다.



요청 프로토콜(Request Protocol)

HTTP 요청 형식은 다음과 같다.


Request-Line CRLF 

 { 메시지헤더 CRLF } * 

 CRLF

 message-body



참고로 CRLF는 줄바꿈을 말한다. 그니까 '엔터'치는거 말이다.


Request-Line이 한 줄 오고 줄 바꿈 후, 메시지 헤더가 온다.

메시지 헤더에는 general, request, entity header가 있는데, 이 3개는 여러 개가 올 수 있다.

메서지 헤더는 하나 당 한 번이 줄 바꿈이 있어야 하고 메시지 헤더가 모두 끝나면 빈 줄이 꼭 있어야 한다.

그런 담에 메시지 본문이 오면 끗.


각각을 좀 더 디테일하게 살펴보겠다.


1. Request-Line(요청 라인)

요청 라인은 요청 대상을 가리키는 한 줄의 문자열이다.

이 요청 라인은 이렇게 구성이 되어 있다.

GET 

http://www.tistory.com/index.html

HTTP/1.1 

 메소드

URI 

HTTP 버전 


메소드

메소드는 요청의 종류를 말한다. 
어떤 종류의 요청인지를 가리는 데에 사용된다고 보면 된다.
메소드는 몇 가지 종류가 있는데, GET, POST가 가장 대표적이다. 
GET은 자원 조회 요청에 주로 사용되고, POST는 자원을 추가하거나 변경하는 것과 같은 요청에 사용된다.

메소드는 이 두 가지 말고도 몇 개가 더 있다.
HEAD - 생성일, 크기 등 자원의 정보면 요청할 때 사용
PUT - 자원 추가 요청 시 사용
DELETE - 자원 제거 요청 시 사용

뭐 이 정도만 알아도 많이 아는거다. 헿


URI

메소드가 어떤 종류의 요청인지를 알려주는 거라면, 이 친구는 '뭘 요청했나?'를 알려주는 친구다.
우리가 웹브라우저 주소 창에 www.daum.net를 입력하면 그에 대한 응답으로 우리에게 다음 홈 화면을 주는거다.

HTTP 버전

이건 말 그대로 HTTP 버전을 나타낸다.
버전에 따라서 이용할 수 있는 메소드 종류도 다르고, 요청 헤더 종류도 달라지기 때문에 어떤 버전에 따른 요청인지 지정해줘야 한다.

2. Message Header(메시지 헤더)

메시지 헤더는 요청에 대한 부가 설명은 담은 데이터로, 3 가지 종류가 있다.
 => 일반 정보(general header), 요청 정보(request header), 엔티티 정보(entity header)


이걸 쓰는 문법은 이렇다.

 => 헤더명: 값 CRLF

General Header

요청과 응답 모두에 사용되는 정보이다.

Request Header

요청할 때만 전달되는 정보이다.

Entity Header

보내는 데이터에 대한 정보이다.
무언가 데이터를 보낸다는 것은 POST 요청이라는 말이기 때문에, 이 정보는 POST 요청일 때만 보낸다.

참고로 GET 요청은 URL에 보내는 데이터가 포함되기 때문에 entity header가 필요하지 않다.


3. Message-body(메시지 본문)

이것은 말 그대로 요청하는 데이터 본문을 말하는데, 데이터를 보낸다는 것은 POST요청이라는 말이다.
때문에 이것도 POST 요청인 경우에만 추가된다.



이그잼쁠


GET /app/test/list.json HTTP/1.1
Host: localhost:8080
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36
Origin: null
Accept: *
Accept-Encoding: gzip, deflate, sdch, br
Accept-Language: ko-KR,ko;q=0.8,en-US;q=0.6,en;q=0.4

=> 이 예는 GET 방식 요청이기 때문에 Request Line과 메시지 헤더로만 구성되어 있다.



  1. EomJinyoung 2017.06.01 18:06

    오호라

  2. H 2017.06.03 15:29

    우왕~ 나중에 또 읽어봐야짓!!

  3. jaehee 2018.12.28 15:35

    감사합니다 :-)
    정리가 잘 되어있어서 이해하기 좋았어요!

  4. workingmoon5000 2019.01.09 10:15

    이해가 쉽도록 과정을 잘 설명해주시네요.
    저는 원래 delphi/c#/c++ 같은 것만 사용했습니다.
    작년부터 java 계열과 이클립스를 사용하면서 삽질(?) 을 많이 했었는데요.
    특히 이클립스 툴에 대해서 멘붕이었고요.

    글을 보면서 좀 이해가 되는게, 이클립스가 나온지 꽤 되서 그런지 아주 기초외엔 중간팁 같은건 없고
    익히는 과정중에 여러 삽질을 했습니다.

    지금도 오류가 나거나, 애처러운 부분이 많이 생기는데...
    이클립스 툴에 대해서도 글을 남겨주세요.

+ Recent posts