• 웹 서버
    • 인터넷 웹브라우저의 요청이 들어오면 그에 해당하는 웹페이지를 찾아서 보내주는 일을 하는 컴퓨터를 지칭한다. 
    • 정확히 표현하면 인터넷 사용자의 URL요청을 받아서 그에 해당하는 웹페이지(HTML문서나 이미지)를 찾아서 다시 웹브라우저로 보내주는 것이다.

  • 웹어플리케이션 서버(WAS)
    • 웹어플리케이션 서버는 웹서버에 웹어플리케이션을 합친 것이다.
    • 우리가 웹페이지를 볼때 화면이 동적일 때가 있을 것이다. 동적이란 말은 이를테면 특정 URL을 요청했을 때 뉴스페이지 같은 곳에서는 각각의 기사에 대하여 다른 기사제목과 내용들이 표시 되는일들을 말하는데 정적인 웹 서버로는 이것을 처리가 불가능하다. 웹 서버가 웹어플리케이션 프로그램을 호출해야 가능한 일이다. JSP같은 기술이 웹어플리케이션의 역할을 담당한다.
    
웹 서버 : 정적인 처리 담당 html, 이미지등     ex) Apache
웹 어플리케이션 서버  (WAS) : jsp, 서블릿 담당(동적처리)    ex) Tomcat


  • JSP(Java Server Pages)
    • JSP 는 자바 Servlet 기술을 확장시켜 웹 환경 상에서 자바만으로 서버 사이드 모듈을 개발하기 위한 기술이다. 
    • JAVA기반으로 만들어서 JAVA의 모든 기능을 사용할 수 있어 발전 가능성이 무한하다.
    • ASP, PHP 처럼 HTML 태그 사이 사이에 동적인 contents 생성 을 담당할 JAVA 코드가 들어 있는 형태로 Servlet 의 형태와 다른 모습을 취하고 있다.
    • 커스텀 태그를 만들어 사용할 수 있으며, JSTL(JSP Standard Tag Library)과 같은 태그 라이브러리를 이용할 수 있어 개발이 용이하다.
    • 서블릿으로 컴파일된 후 메모리에서 처리되기 때문에 많은 사용자의 접속도 원활하게 처리할 수 있디.
    • Java Beans를 이용해 JSP 또는 다른 서블릿 간의 데이터를 쉽게 공유 할 수 있다.

  • Servlat(Server + Applet) 
    • JAVA를 이용한 서버 프로그래밍 기술이다.
    • JAVA 언어를 기반으로 동적인 contents 를 생성하는 기술로 JAVA 프로그램을 작성하는 형식과 거의 같다.
    • JAVA 코드 안에 HTML 태그가 섞여 있어 작업에 대한 분리적인 측면으로 볼 때 효율성이 떨어진다.
    • 프로그래머가 프로그래밍하기 어려우며 수정하기 어려운 단점이 있다.

  • JSP와 서블릿 차이
    • JSP는 HTML과 같은 일반적인 텍스트 파일 구조
    • 서블릿은 자바 소스로 작성된 클래스 파일 구조
    • JSP는 서블릿 컨테이너에 의해 서블릿 형태의 자바 소스로 변환되어 클래스로 컴파일 됨
    • 서블릿 컨테이너
      • 서블릿 컨테이너는 서블릿을 실행하고 JSP를 서블릿 코드로 변환하는 기능을 수행
      • 변환된 JSP의 서블릿 클래스를 실행하고 웹 서버의 메모리에 적재하고 사용자 요청에 따라 실행
      • 예: Tomcat, WebLogic, JBoss, Jetty 등
      • HTTP 서버
        • URL 주소의 해석을 하는 역활
        • HTTP 서버는 단순히 어떤 주소(URL) 요청이 들어왔을 경우 그 주소에 미리 매핑되어 있는 콘텐츠(HTML 파일이나 이미지 등)를 사용자의 브라우저에 응답 형태로 전송하는 역할을 한다. 이 때 만일 요청된 URL이 서블릿 클래스 또는 JSP파일(ex. http://www.sevlet.com/servlet 또는 http://www.wervlet.com/home.jsp)일 경우 HTTP 서버는 이를 웹 컨테이너에서 처리하도록 클라이언트의 요청을 넘겨준다.
      • 웹 컨테이너(Web Container)
        • 서블릿 클래스 또는 JSP 파일의 실행 요청을 처리해주역활
        • 웹 컨테이너에서는 요청된 URL에 맞는(미리 설정된) 서블릿 클래스 또는 JSP 파일을 실행하여 그 결과를 HTTP 서버에 넘겨주게 되고 이는 응답 메시지의 형태로 사용자의 브라우저에 전성된다. 

  • JSP 처리 과정



  1. 사용자가 브라우저 주소창에 도메인을 입력하면 브라우저는 그 도메인에 해당하는 IP 주소를 찾기 위해서 DNS 서버에 접속한다.
  2. DNS 서버는 도메인에 대한 IP 주소를 알려준다.
  3. IP 주소를 획득한 브라우저는 인터넷에 접속해서 IP 주소에 있는 서버에 HTTP 프로토콜로 요청한다.
  4. 웹 서버가 요청 내용을 분석하고 서블릿 컨테이너에 요청을 넘겨 처리한다
    • HTML인 경우와 JSP인 경우 구분하여 처리한다.
    • HTML인 경우 HTML, CSS 등등 추가적인 행위가 필요없는 정적인 파일을 찾아서 사용자에게 전달한다.
    • JSP인 경우 웹 서버의 서블릿 컨테이너를 이용한 처리 과정이 필요하다. 
      • 찾은 파일을 서블릿으로 파싱한다.(hello.jsp -> helloServlat.java)
      • 만약 이미 변환 되어있는 파일이 있다면 그 파일을 바로 실행한다. (helloServlat.class)
      • 이전에 요청했던 페이지일 경우 파싱할 필요 없이 파싱했던 클래스파일을 메모리에 적재한다.
      • 서블릿 파일을 실행가능한 class파일로 컴파일 한다. (helloServlat.java -> helloServlat.class)
      • 클래스 파일은 메모리에 적재가 되어 실행된다.
      • 컴파일된 .class는 컴퓨터에서 실행할 수 있는 형태로 특정한 기능을 수행할 수 있게 된다. 이후 소스 변경 전까지 해당 파일은 메모리에 상주하면서 다시 컴파일 되지 않고 서비스된다.
      • 데이터베이스 처리 혹은 별도의 기능을 위한 클래스 호출 등이 있다면 실행하고 결과를 취합한다. (Java Beans)
  5. 웹서버는 취합한 결과를 기반으로 브라우저가 인식할수 있는 정적페이지(HTML)를 구성하여 웹 브라우저에 전송한다.

  • 모델 1
        
  • JSP, Servelt, Bean 등으로 구성되는 형태로 JSP에는 프리젠테이션 레이어 & 비즈니스 레이어를 포함하고 업무부분을 JavaBean이나 Servlet에서 구현하기도 한다.
  • Model - View - Controller로 구분하기 모호하긴하지만 궂이 따지자면 그림과 같이 JSP에서는 주로 View와 Controller의 역할을 JavaBean / Servlet에서는 주로 Model의 역할을 하지만Controller의 역할을 하기도 한다.
  • 장점
    • 페이지 흐름이 단순해 개발팀원의 수준이 높지 않아도되 중소형 프로젝트에 적합하다.
  • 단점
    • 웹어플리케이션이 복잡해 질수록 유지 보수가 힘들어진다.
    • 완벽히 분리되지 않아 디자이너와 개발자가 원활히 의사소통 되지 않으면 충돌이 발생한다.


  • 모델 2
       
  • 사용자 요청에 대하여 Controller는 Model에게 데이터 조회, 비즈니스 로직의 처리를 요청하고 Model로 부터 정보를 받아 View에게 전달한다. 최종적으로 View는 정적데이터를 구성하여 사용자에게 전달한다.
  • 장점
    • 효과적으로 분리되어 구성된다면 개발자와 디자이너의 작업이 분리되어 역할과 책임 구분이 명확해진다.
    • 로직과 디자인 개발의 분리로 인해 웹어플리케이션이 구조화되어 유지보수 및 확장이 용이해진다.
  • 단점
    • 구조화를 위해 개발의 복잡도가 증가함에 따라 개발기간도 증가한다.
    • 개발팀원이 MVC구조에 대한 높은 수준의 이해가 요구되 고급개발자가 필요하다.


  • MVC 패턴
    • Model
      • 데이터베이스와의 관계를 담당한다. 클라이언트(웹브라우저)의 요청에서 필요한 자료를 데이터베이스로부터 추출하거나 수정하여 Controller로 전달한다.
      • DAO(Data Access Object) : sql문으로 질의응답 하는 클래스 
      • DTO(Data Transe Object) : 데이터의 틀을 만들고 저장하는 클래스
    •  View
      • 사용자한테 보여지는 UI화면이다. Controller에서 어떤 view 컴포넌트를 보여줄지 결정한다.
      • 주로 .jsp로 작성한다.
    • Controller
      • 클라이언트(웹브라우저)의 요청을 받고 적절한 Model에 지시를 내리며 Model에 전달된 데이터를 적절한 view에 전달 한다.
      • 매니저 같은 역할로 클라이언트로부터 요청받으면 이 요청이 그냥 보여주면되는건지 DB를 거쳐 보여야하는건지 판단하고 알맞게 작업진행을 한다.

  • 네트워크 통신
    • 자바스크립트를 이용한 웹브라우저의 통신 기능 사용
    • Ajax(Asynchronous JavaScript and XML)
      • Ajax는 웹브라우저와 웹서버가 내부적으로 데이터 통신을 한다.
      • 페이지 리로드 없이 웹페이지의 내용을 변경할 수 있다.
      • 자바스크립트를 이용해서 비동기적으로 서버와 브라우저가 데이터를 주고 받는 방식을 의미한다.

  • XML과 JSON은 구조화된 문서를 전송 가능하게 만든 텍스트 포멧 형식을 말한다.
  • Json
    • 장점
      • 내용이 함축적으로 최소한의 정보만을 가지고있다.
      • 그렇기때문에 XML대비 용량이 획기적으로 줄어들고 속도는 그만큼 빨라지게된다.
      • 객체구조와 {} 배열구조의 [] 적절한 만남으로 아주 효율적인 데이터 구성이 가능하다. 
      • 파싱이 매우 간편하고, 때로는 일반적인 변수처럼 사용도 가능하다.
      • 즉, 사용하기 쉽다. 
    • 단점
      • 내용이 함축적이다 보니 내용의 의미파악은 힘들수 있다. 
      • 적은규격의 데이터 전송에 적합한 방식이기때문에 XML보다는 빠르지만 대용량급의 데이터 송수신엔 부적합 모습도 있다. 
  • xml
    • 장점
      • 작성하기가 간편하다(tag구조)
      • Json에 비해 XML이 사람이 읽기가 쉽다. (즉 각 장보들이 의미하는 바를 한눈에 보기가 좋다.
      • DTD 등 XML자체의 기능을 확장할 여지가 많이 있다.
    • 단점
      • 문서의 양이 필요이상으로 많다.(실 데이터가 아닌 tag글자)
      • 배열형식이나 반복구조의 경우 불필요한 데이터가 계속 해서 나타난다.
      • 결국 이로인해 파싱이 힘들어지고 속도는 느려진다.


  • Json과 XML 차이점 
    • XML 문서는 XML DOM(Document Object Model)을 이용하여 해당 문서에 접근한다.
    • 하지만 JSON은 문자열을 전송받은 후에 해당 문자열을 바로 파싱하므로, XML보다 더욱 빠른 처리 속도를 보여준다.
    • 따라서 HTML과 자바스크립트가 연동되어 빠른 응답이 필요한 웹 환경에서 많이 사용되고 있다.
    • 하지만 JSON은 전송받은 데이터의 무결성을 사용자가 직접 검증해야 한다.
    • 따라서 데이터의 검증이 필요한 곳에서는 스키마를 사용하여 데이터의 무결성을 검증할 수 있는 XML이 아직도 많이 사용되고 있다.






Web 카테고리지만 Android를 하면서 git 사용시 어려움을 겪었다.


git clone으로 파일을 받았지만 아무 파일이 없을때... 당황하지 말고 branch를 확인해본다!

$ git branch -a 


여러 branch들이 뜬다! 하면 자신이 원하는 branch를 checkout 해주자

$ git checkout (android-tegra3-grouper-3.1-lollipop-release)


( )괄호안은 자신이 원하는 branch명


다시 ls로 확인해보면 해당하는 branch의 폴더들이 생겨있다!


 

'WEB > ETC' 카테고리의 다른 글

Git을 사용해서 프로젝트 관리하기  (0) 2015.07.22
웹 포토샵 pixlr  (0) 2014.12.15
웹 표준을 공부해보자!  (0) 2014.11.05
오픈 소스 웹 템플릿 사이트  (0) 2014.09.28
Sublimetext2에서 sftp사용하기  (2) 2014.07.05

git에 대해 귀엽고 자세하고 쉽게 설명되어있는 사이트!!

http://backlogtool.com/git-guide/kr/intro/intro1_1.html


'WEB > ETC' 카테고리의 다른 글

Git branch 활용  (0) 2016.01.29
웹 포토샵 pixlr  (0) 2014.12.15
웹 표준을 공부해보자!  (0) 2014.11.05
오픈 소스 웹 템플릿 사이트  (0) 2014.09.28
Sublimetext2에서 sftp사용하기  (2) 2014.07.05

웹에서 간단히 포토샵 작업을 할 수 있는 사이트!


나름 꽤 쓸만한 사이트인것 같다.


https://pixlr.com/

'WEB > ETC' 카테고리의 다른 글

Git branch 활용  (0) 2016.01.29
Git을 사용해서 프로젝트 관리하기  (0) 2015.07.22
웹 표준을 공부해보자!  (0) 2014.11.05
오픈 소스 웹 템플릿 사이트  (0) 2014.09.28
Sublimetext2에서 sftp사용하기  (2) 2014.07.05

[DAUM에서 정리 해 놓은 웹 표준]

http://darum.daum.net


-> 좀 더 둘러봐야겠다


[모바일 & 반응형웹 테스트 툴 - 트로이(Troy)]

http://troy.labs.daum.net


Troy는 국내외 주요 모바일 단말기에 탑재된 기본 브라우저의 실측 사이즈 화면을 통해

모바일 웹 또는 반응형 페이지의 인터페이스를 검증하는데 도움을 주는 개발 도구!



'WEB > ETC' 카테고리의 다른 글

Git을 사용해서 프로젝트 관리하기  (0) 2015.07.22
웹 포토샵 pixlr  (0) 2014.12.15
오픈 소스 웹 템플릿 사이트  (0) 2014.09.28
Sublimetext2에서 sftp사용하기  (2) 2014.07.05
Mac에서 Sublimetext2 세팅하기  (0) 2014.07.05
 매일 까먹는 나를 위해 만든 포스팅.

 1. HTML5UP  (http://html5up.net/)

  

  디자인에 자신이 없는 개발자들을 위한 웹 템플릿 사이트.

  기본적으로 반응형 웹 제작이 가능하도록 되어져 있다. 

  CCA 3.0 라이센스로 개인용으로 뿐만 아니라 상업용으로도 무료로 사용할 수 있고 사용자가 원하는대로 변형시켜 사용해도 OK.

  즉, 모두 무료로 사용 가능!! 


 2. BootStrap  (http://getbootstrap.com/)

        

 부트스트랩은 트위터의 UI 디자이너 Mark Otto와 개발자 Jacob Thornton이 만든 오픈소스 프런트 엔드 툴킷이다. 

 기본적으로 반응형 웹 기반의 HTML, CSS, javascript 파일을 제공한다.

 뿐만 아니라 데모 사이트를 제공하고 커스텀마이징 가능한 예제를 제공해 준다.





'WEB > ETC' 카테고리의 다른 글

Git을 사용해서 프로젝트 관리하기  (0) 2015.07.22
웹 포토샵 pixlr  (0) 2014.12.15
웹 표준을 공부해보자!  (0) 2014.11.05
Sublimetext2에서 sftp사용하기  (2) 2014.07.05
Mac에서 Sublimetext2 세팅하기  (0) 2014.07.05

1. Tools -> Command Palette

Package Control 창에 Package Control: install Package 선택 후 SFTP검색

* 이미 설치 되어 있는 경우 뜨지 않는다


2. File -> Open


프로젝트의 로컬 디렉토리를 연다. 만약 처음 시작하는 경우에는 빈 디렉토리를 하나 생성하여 열면된다.

* Sublimetext의 경우 FTP에 접속하여 바로 수정하는 것이 아니라 로컬에 저장한 후 Sync를 해야한다.


3. SFTP에 사용할 프로젝트 파일을 선택한후 왼쪽 클릭을 한 메뉴에서 SFTP / FTP -> Map to Remote... 선택




선택 할 시 다음과 같으 json파일이 하나 생성 된다. 




여기서 자신이 사용하는 것에 따라 바꿔주면 된다.


"host": 자신이 사용할 호스트 주소

"user": 호스트 계정 

"password": 호스트 비밀번호

"port" : 호스트 접속 포트번호


"remote_path": remote할 서버의 폴더의 경로 


저장할 때 마다 자동으로 업로드하기를 원한다면 upload_on_save 항목을 true 로 변경한다.


3. 서버에 있는 파일이나 폴더를 Sync 할 경우 / 로컬에 있는 파일이나 폴더를 Sync 할 경우 등등 다음과 같이 하면 된다.


`







'WEB > ETC' 카테고리의 다른 글

Git을 사용해서 프로젝트 관리하기  (0) 2015.07.22
웹 포토샵 pixlr  (0) 2014.12.15
웹 표준을 공부해보자!  (0) 2014.11.05
오픈 소스 웹 템플릿 사이트  (0) 2014.09.28
Mac에서 Sublimetext2 세팅하기  (0) 2014.07.05

1. Package Control 설치

 View -> Show Console

   Sublime Text 2의 각종 패키지들을 검색하고 설치, 업그레이드 및 삭제할 수 있는 Manager 콘솔창을 오픈하여 아래의 명령을 붙여넣어 실행


import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else   None;urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace('   ','%20')).read()); print 'Please restart Sublime Text to finish installation'


설치 완료 되면 'Please restart Sublime Text to finish installation' 문구가 뜨고 프로그램 재시작


2. Tools -> command palette

 Package Control창에 package를 검색하면 아래와 같이 뜨는데 여기서 Package Control: install Package 클릭 하면 설치완료!


 


'WEB > ETC' 카테고리의 다른 글

Git을 사용해서 프로젝트 관리하기  (0) 2015.07.22
웹 포토샵 pixlr  (0) 2014.12.15
웹 표준을 공부해보자!  (0) 2014.11.05
오픈 소스 웹 템플릿 사이트  (0) 2014.09.28
Sublimetext2에서 sftp사용하기  (2) 2014.07.05

환경: Eclipse kepler(4.3)


1. STS(스프링) 플러그인 설치


  Help -> EclipseMarketPlace... -> Find ->sts 검색 

  자신의 Eclipse버전에 맞는 sts를 install하면 된다. uninstall이라 뜨는 경우는 이미 설치가 된 경우

 * 아직 Eclipse LUNA는 지원하지 않는듯 하다. 이것땜에 또 삽질 아오 


 



2. Maven 플러그인 설치 

 Help -> EclipseMarketPlace... -> Find ->m2e 검색


Maven Integration for Eclipse install




3. spring MVC 프로젝트 만들기


File -> New -> Other -> Spring -> Spirng Project  선택 또는

메뉴바에서  버튼 눌러서 바로 Spring DashBoard에서 Spring Project 생성 가능!


template은 Spring MVC Project선택!


    





4. Encoding 설정

Project 누른 후 왼쪽버튼 메뉴의 Properties 클릭


text encoding -> other UTF-8로 변경


 



 


다음과 같은 구조에서 views에 있는 home.jsp에 

<%@ page language="java" contentType="text/html; charset=UTF-8" %> 추가

*다른 파일 생성시에도 추가

   

5. tomcat 서버 run

 다음과 같은 화면이 보이면 성공!








+ Recent posts