웹브라우저
- HTML을 비롯하여 이미지, 멀티미디어 파일등의 문서를 월드와이드웹을 기반으로 연결하기 위한 응용 프로그램(Application Program)
- HTML은 마크업언어로 변수수정, 조건분기가 불가하며 웹브라우저를 만나야만 렌더링되어 동작된다
- 현재 html5가 표준이며, 웹 페이지소스에서 <!doctype html>을 확인할 수 있다면 html5로 작성된 것을 알 수 있음.
- 그외 legacy로 html4, xtml 등이 있음. : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional...
- HTTP프로토콜을 기반으로 통신하며 사용자의 동작에 따라 HTTP method를 실행하여 OS에 전송을 요청하는 역할을 함
웹표준
- 웹접근성(장애인의 사용성)을준수하고 수준을 높이는 것은 웹 표준을 지킴으로서 달성가능함
- ex) tap키를 통해서 웹화면이 잘 선택이 되는지
- 웹브라우저의 다양화로 크로스 플랫폼을 지향하는 웹서비스는 각 브라우저의 엔진에 잘 작동되어야한다.
- 브라우저 : 엔진 - IE : 트라이던트, 엣지 크롬 : blink, 사파리 : Webkit, 파이어폭스 : Gecko
- 나아가, 모바일 브라우저의 등장으로 다양한 기종에 따른 화면을 구성하는 작업이 필요하여 백엔드와 프론트엔드가 나눠지기 시작함.
- 프론트앤드의 주 개발도구는 크롬이며 F12로 다양한 디스플레이 환경을 보여준다.
프론트엔드 백엔드 프로그래밍
- 프론트엔드 개발은 웹브라우저 내에서의 동작과 데이터처리의 범위를 지칭함. 문서를 HTML을 통해서 아웃라인을 잡고 CSS로 디자인을 입히고 Javascript로 이펙트와 데이터 처리에 대한 업무를 진행함.
- 사용기술 : jQuery(라이브러리. 과거 표준이며, 현재 웹상 많은 자료로 일부 쓰이기도함), Angular (구글에서 배포, mvc모델 기본), React (페이스북과 인스타에서 사용, 현재 주류), vue.js (러닝커브가 적은 프레임워크)
- 백엔드 개발은 웹브라우저를 넘어서 네트워크를 타고 후면에 존재하는 웹서버와 데이터베이스를 사용하 조건과 로직에 맞게 데이터를 쓰고 읽고 수정하고 삭제하는 일을 함.
- 사용기술 : PHP(C언어 스타일), ASP - ASP.net(MS사의 C#, VB.net), JSP(Java), Django(Python) 루비온레일(루비) Node.js(Javascript) 등이 있다.
웹기술
- 비즈니스 업무 기반은 데이터와 처리하는 로직으로 구성됨. 데이터의 처리, 데이터의 입력과 출력 창구를 담당하는 것이 웹임.
- 웹서버: 클라이언트에 정적 리소스 제공(정적파일 : HTML, CSS, JS, 이미지, 영상 그리고 기타 부가기능의 종류)
- 아파치 웹 서버, NGINX, 마이크로소프트 IIS서버, 구글 웹 서버
- 웹 어플리케이션 Web Application Server, 앱(WAS) : 동적인 온디멘드 구현. 동적으로 DB를 조회하고 변환, 웹문서를 로직대로 변경해서 재출력하는 서버이다. 웹앱은 동적인 웹문서 뿐만아니라 웹서버처럼 정적인 웹문서 역시 처리할 수 있다.
- 아파치의 톰캣, 오라클의 ZEUS, Jetty, Undertow 등
- 웹서버와 웹어플리케이션의 분리 : 1. WAS는 여러가지 복잡한 어플리케이션 로직이 존재하기때문에 쉽게 서버가 다운될 수 있다. 그러므로 정적인파일을 담당하는 서버와 동적인 파일을 담당하는 서버를 분리시켜야 WAS가 다운되더라도 웹페이지에 접속자체가 안되는 불상사를 막을 수 있음. 2. 정적인 자원은 web서버 증설, 동적인 자원은 was서버 증설로 효율적자원분배
- 서블릿
- 1997년 도입, 서블릿은 자바 클래스 중 하나로, TCP/IP 통신구현 및 HTTP Parsing을 통해서 Request와 Responsde 객체를 생성하여 수신정보를 기반으로 회신정보를 넣어서 송신하는 객체이다. 개발자의 공통과정인 TCP/IP와 HTTP 통신의 상세하게 고려하지 않고 비즈니스 로직구현에만 신경쓸 수 있도록 도와준다.
- 단, out객체에 write method를 사용해서 html문을 한줄 한줄 입력해야해서 개발자가 직업 html 생성이 어려움
- 톰캣과 같은 서버 프로그램 내에는 서블릿을 자동으로 생성해주는 서블린 컨테이너가 있음, JSP도 서블릿으로 변환 되어서 사용됨, 동시 요청을 위한 멀티 쓰레드 처리 지원.
- 스프링 MVC 내에서 서블릿 컨테이너는 주로 요청과 응답을 처리하고, 이를 스프링 프레임워크로 전달하는 역할을 하며, 실제 애플리케이션의 로직은 스프링이 담당한다고 보면 됩니다.
- JSP
- 1999년 도입됨. 최근에는 타임리프를 주력으로 많이 씀.
- JSP : Java를 이용한 서버 사이드 템플릿 엔진이다. JSP는 자바를 웹서버에서 쉽게 쓰기 위한 기술이며 언어가 아니다. 동적인 java와 정적인 html을 융합시킨 파일로 html과 <%, %> 해당 꺽쇠 안의 내용은 동적인 내용이 표시된다.
- 이 JSP 파일을 Servlet 자바소스로 클래스로 변환하고 컴파일 역할을 하는 프로그램을 JSP 컨테이너라 하며 컴파일된 서블릿 클래스 파일을 실제로 실행하는 프로그램은 서블릿 컨테이너 혹은 웹 컨테이너라고 부른다. 대표적인 것으로 Tomcat. 하나의 JSP 페이지가 하나의 Java 클래스이기 때문에 모든 Java 라이브러리를 끌어다 쓸 수 있다.
- 단, 서블릿과 달리, JSP는 HTML 생성은 편리하지만, 하나의 파일 내에 html 화면표시와 중간의 비즈니스 로직까지 한꺼번에 너무 많은 역할을 담당하여 유지보수와 가독성이 어려움
- MVC 패턴,Spring MVC
- MVC 패턴 자동화, 복잡한 웹 기술을 편리하게 사용할 수 있는 다양한 기능 지, 서블릿, JSP 조합 MVC 패턴 사용, 모델, 뷰 컨트롤러로 역할을 나누어 개발
- Spring Boot
- Spring이라던지 톰캣서버와 같은 WAS를 셋팅하고 배포하는 등의 작업이 번거로움, 과거에는 서버에 WAS를 직접 설치하고, 소스는 War 파일을 만들어서 설치한 WAS에 배포
- 스프링 부트는 빌드 결과(Jar)에 WAS 서버 포함 -> 빌드 배포 단순화
아파치 톰캣 설치법
- 아파치 톰캣 홈페이지에서 톰캣9의 tar.gz파일을 다운로드 받아서 bin폴더 startup shell파일을 command(./startup)명령어로 실행한다.
- http://localhost:8080/으로 접속시에 local에서 호스트하는 서버페이지로 접속할 수 있다. webapps의 root - index.html 파일이 호스트서버의 페이지문서이다.
- JSP : Java를 이용한 서버 사이드 템플릿 엔진이다. Jsp 는 자바를 웹서버에서 쉽게 쓰기 위한 기술이며 언어가 아니다.동적인 java와 정적인 html을 융합시킨파일로 <%, %> 해당 꺽쇠 안의 내용은 동적인 내용이 표시된다. 이 JSP 파일을 Servlet 자바소스로 클래스로 변환하고 컴파일 역할을 하는 프로그램을 JSP 컨테이너라 하며 컴파일된 서블릿 클래스 파일을 실제로 실행하는 프로그램은 서블릿 컨테이너 혹은 웹 컨테이너라고 부른다. 대표적인 것으로 Tomcat. 하나의 JSP 페이지가 하나의 Java 클래스이기 때문에 모든 Java 라이브러리를 끌어다 쓸 수 있다.
- System.out.println("text") : 콘솔에 text를 출력한다
- out.write("text"") : jsp에서 사용하는 out이라는 개체를 통해서 html 문서에 text를 add하게된다.₩
- 해당 과정을 세부적으로 뜯어보면, jsp파일은 우선 java파일로 변환되어 필요한 클래스와 패키지를 호출과 상속한다. 그리고 out개체 안의 string을 html 양식과 함께 write method로 한줄 한줄 작성을 한다. 그리고 배포에 필요한 세션 등 웹 프로토콜에 대한 설정을 java file내에서 완료하고 이를 자동으로 컴파일한다.
- 톰캣의 설치 및 개발설정의 번거로움으로 인해서 스프링부트에서는 서버에 톰캣을 내장하여 더이상 톰캣을 로컬환경에 설치할 필요가 없도록 도와준다.
'개발기술 > Web Dev' 카테고리의 다른 글
| 프론트엔드 설계 고려사항 (0) | 2024.07.08 |
|---|---|
| 프론트엔드 자바스크립트 & http request (0) | 2024.07.08 |
| API 활용법 (http통신, Json Parsing, 비동기화) (0) | 2024.07.03 |
| 톰캣을 통한 JSP 사용법 (0) | 2024.07.01 |
| 프론트엔드 HTML, CSS (0) | 2024.06.09 |
