WWW (World Wide Web)
- 웹은 인터넷에서 운영되는 서비스
- 흩어져 있는 정보를 손쉽게 정리하고 공유하기 위해 사용
Web 웹
- 웹은 인터넷 서비스 (인터넷은 컴퓨터 네트워크망)
- 인터넷상의 정보를 하이퍼텍스트 방식과 멀티미디어 환경에서 검색할 수 있게 해주는 정보 검색 시스템
- HTTP 프로토콜을 사용
- HTML 문서를 연결하여 다양한 콘텐츠를 제공
- 다수의 사람들이 정보를 쉽게 공유하고 접근할 수 있도록 하는 것이 목적
웹의 동작과정(HTML중심)
클라이언트-서버
- 웹 서비스 제공을 위하여 서버 컴퓨터와 서버에서 동작하는 프로그램이 필요
- 프론트엔드는 클라이언트 중심의 프로그래밍(HTML/CSS/JavaScript, Angular/React/Vue)
- 벡엔드는 서버를 구성, 서비스를 제공하기 위한 서버 쪽 프로그래밍(서블릿/JSP, 스프링 프레임워크, 파이썬)
- 클라이언트는 웹서비스를 이용하는 사용자(user)
- 서버는 웹 서비스를 제공하기 위한 서비스 공급자
HTML(HyperText Markup Language)
- 웹 문서의 구조를 정의, 콘텐츠를 표현하는 기본 마크업 언어
- 웹을 통해 콘텐츠를 제공하려면 HTML을 사용해야 한다.
- HTML은 태그 표기법으로 표현하고자 하는 정보에 의미를 부여
- (<h1>, <img src="...">와 같은 태그!)
CSS(Cascading Style Sheet)
- HTML 문서에 레이아웃과 디자인과 같은 시각적 요소를 정의하는 규격
- CSS는 콘텐츠의 위치, 정렬, 요소 크기, 여백, 배경 등을 정의
JavaScript 자바스크립트
- HTML문서에서 동적으로 변한느 콘텐츠를 표현하기 위한 이벤트 처리, 서버와 연결하여 데이터를 가지고 오는 역할
- 프로그램 언어
- HTML문서에서 이벤트를 서버 연결 없이 동적으로 처리 가능한 기술
벡엔드 중심 개발
- 전통적인 웹 개발 모델, 서버에서 모든 것을 담당
- 대표적인 개발 기술은 서블릿/JSP
- 서비스 연동에 필요한 다양한 서버 환경에 대응 가능
- 검색 엔진 최적화에 유리
- 안정적이고 검증된 기술
- 기존에 많이 사용되어 레거시 시스템이 오랫동아 유지된다.
- 하지만, 모바일 네트워크의 속도가 느리고, 많인 비용이 든다.
- 서버에 화면갱신을 요청하면, 모든 데이터가 다시 전송되어야 해 모바일 환경에는 적절하지 않음
프론트엔드 중심 개발
- 클라이언트에서 HTML을 가지고 있거나, 서버에서 받아오고, 서버로부터 필요한 데이터만 자바스크립트로 받아와 데이터 화면을 조합하여 보여준다. -> CSR(Client Side Rendering)
- 필요한 부분의 데이터만 갱신이 가능, 서버로부터 매번 전체 화면을 받아오지 않아도 된다.
- 실시간 데이터 갱신이 자유로움
- React.js, Vue.js 등 다양한 라이브러리/프레임워크를 사용할 수 있음
- 하지만, 데이터 제공을 위한 서버가 필요
백엔드 개발 및 운영 환경
- 스프링 프레임워크가 등장
- 소규모 분산 서비스 운영 방식인 MSA로 전환되기 시작
- 프런트엔드 중심의 개발이 가속화, 서버 프로그램이 간결한 형태로 전환, Node.js, 파이썬을 이용한 서버 프로그램 개발이 늘어나고 있음
프런트엔드 중심 개발
- 웹에서 모바일로 이동 : 데이터를 서버에서 조합(Binding)한 다음 화면을 구성(Rendering)하는 서버 사이드 렌더링(SSR)은 방식에서 여러 문제가 있다
- 서버로부터 데이터만 수신하고 클라이언트(웹 브라우저)에서 데이터를 조합한 다음 화면을 구성하는 클라이언트 사이드 렌더링(CSR) 방식으로 개발을 전환하게 됨
스프링 프레임워크(Spring Framework)
- 대규모 서비스 쉽게 개발 가능
- 자바 기반의 대표적인 개발 프레임워크
- 스프링 부트(Spring Boot)의 경우 JSP 사용에 제약이 있음
자바 웹개발 도구
- 자바 개발도구(JDK)
- 통합 개발환경(IDE)
- 서블릿 컨테이너
- 데이터베이스
자바 개발도구(JDK)
- JDK(Java Development Kit)
- 자바 개발도구는 자바 실행을 위한 JRE(Java Runtime Environment)와 컴파일러 포함
- 통합개발환경(IDE)을 비롯해 아파치 톰캣과 같은 자바기반 서버 실행에 JDK가 필요
통합개발환경(IDE)
- Integrated Development Environment
- 이클립스(eclipse) : 대표적인 자바 통합개발도구(IBM), 이클립스는 웹 개발을 위해서 Eclipse IDE for Java Enterprise Developer를 설치해야 함
서블릿 컨테이너(WAS)
- Web Application Server
- 이름과 같이 웹 애플리케이션을 구동하는 서버
- 서버 컴퓨터가 WAS로 동작하려면 서블릿 컨테이너가 필요
- 실제 서비스 시스템을 구축할 때는 정적 콘텐츠 서비스를 위한 웹 서버와 WAS를 병행 운영 (상호연동됨)
- 아파치 톰캣, Jetty, Undertow 등이 사용됨
자바 웹 환경설정
1. JDK설치
AdoptOpenJDK 설치 (https://adoptopenjdk.net ‘OpenJDK 11 (LTS)’ 버전, JVM은 ‘HotSpot’ 다운로드)
명령 프롬프트 창에서 ‘java –version’ 입력 : 설치된 OpenJDK의 버전이 나오면 정상 설치
2. 아파치 톰캣 설치
(https://tomcat.apache.org/download-90.cgi[Binary Distributions] → [Core] → [zip] 다운로드)
다운로드한 압축파일 C드라이브에 압축 풀기.
( [apache-tomcat-9] 폴더 바로 밑에 [bin], [conf], [lib] 등이 있도록 경로설정하기)
3. 이클립스 설치
(https://www.eclipse.org/downloads/<Download x86_64> 다운로드)
웹 개발용 이클립스(Eclipse IDE for Java Enterprise Developer) 설치
[eclipse installer] 창에서 ‘Eclipse IDE for Enterprise Java Developers’를 선택
4. 텍스트 인코딩 설정
UTF-8을 기본으로 사용
Window-Preferences -> General-ContentTypes-Text -> Default encoding에 utf-8입력, update
HTML, CSS, JSP의 캐릭터 인코딩 설정도 변경 - 인코딩 항목을 ‘ISO 10646/Unicode(UTF-8)’로 변경 (Preferences-Web-HTML Files/CSS Files/JSP Files)
정적 웹 프로젝트(Static Web Project) - HTML, CSS, 자바스크립트로만 구성된 웹을 개발할 때
동적 웹 프로젝트(Dynamic Web Project) - 서블릿, JSP 등을 개발할 때
Target runtime은 New Runtime으로 Apache Tomcat v9.0을 선택
JSP File은 생성한 디렉토리폴더-src-main-webapp에서 생성하면 된다.
JSP는 Run On Server로 Tomcat v9.0으로 실행
(출처 : 짧고 굵게 배우는 JSP 웹 프로그래밍과 스프링 프레임워크(황희정))
'Java > JSP 웹프로그래밍' 카테고리의 다른 글
| JSP : 계산기 (html, jsp파일) (0) | 2023.01.04 |
|---|---|
| JSP #4 : 속성관리 (230104)1 (0) | 2023.01.04 |
| JSP #3 : 페이지 이동 & 정보 공유 (230103)1 (0) | 2023.01.03 |
| JSP : GET방식으로 구구단 출력 실습 (0) | 2023.01.03 |
| JSP #2 : 서블릿 (230102)1 (0) | 2023.01.03 |
댓글