[Web] 웹(요약)

2022. 10. 18. 05:05·Programming/Web
728x90
  • 월드 와이드 웹(World Wide Web)은 줄여서 WWW 또는 웹이라고 한다.
  • 웹은 HTML(HyperText Markup Language)이라는 간단한 마크업 언어를 통해 정보의 연결이 가능하도록 하이퍼텍스트를 포함한 콘텐츠를 제공하며, HTTP(HyperText Transfer Protocol)라는 프로토콜을 사용해 TCP/IP 네트워크상에서 서비스를 운영하게 된 것이 웹의 시작이다.
  • 네트워크를 구축하려면 컴퓨터 간의 연결 규격인 프로토콜(Protocol)이 필요하며 여러 프로토콜 중 가장 널리 쓰이는 프로토콜이 TCP/IP다.
  • 인터넷 기반의 대표적인 서비스는 웹 이외에도 이메일, FTP, Telnet, DNS 등이 있지만 일반적으로 사용하는 서비스로는 웹이 절대적이다.
  • HTML, CSS, JavaScript는 프론트엔드(클라이언트) 영역을 구성하는 핵심 프로그램 기술이다.
  • 백엔드 중심의 개발은 전통적인 웹 개발 모델이며, 서버에서 모든 것을 담당하는 방식이다.
  • 프론트엔드 중심 개발은 클라이언트에서 HTML을 가지고 있거나 서버에서 HTML만 받아오고 서버로부터 화면 구성에 필요한 데이터만 자바스크립트로 받아와 데이터와 화면을 조합해 보여주는 방식이다.

 

  • JSP는 서블릿이라고 하는 자바 웹 프로그래밍 기술에 기반한다. 따라서 JSP로 프로그램을 개발하려면 자바 웹 개발환경을 먼저 구축해야 한다.
  • 자바 웹 개발을 위해서는 기본적으로 자바 개발도구(JDK), 통합개발환경(IDE), 서블릿 컨테이너가 필요하다. 이와 더불어 데이터베이스와 연동을 한다면 데이터베이스도 필요하다.
  • 클라우드 인프라가 발전하면서 전통적인 개발환경 설정을 넘어 클라우드 인프라와 협업을 위한 기본적인 배경지식과 경험이 요구된다.
  • 데브옵스(DevOps)란 개발(Development)과 운영(Operations)의 합성어로 소프트웨어 개발 규모가 커지고 협업이 보편화되면서 신속한 개발과 지속적 유지보수, 배포 등의 운영을 병행하기 위한 노력을 통칭한다.
  • 데브옵스의 장점은 다음과 같다.
    • 빠른 속도
    • 빠른 배포
    • 안정성
    • 확장 가능성
    • 협업 강화

 

  • HTML은 HyperText Markup Language의 약어로 모든 웹 콘텐츠는 HTML로 이루어져 있다.
  • HTML 문서는 다음과 같은 기본 구조를 가진다.
<!DOCTYPE html>
<html>
	<head>
	</head>
	<body>
		...콘텐츠...
	</body>
</html>
  • HTML이 텍스트나 이미지, 표와 같은 구성요소를 웹 문서에 넣어 뼈대를 만드는 것이라면, CSS는 글씨의 색상이나 크기, 이미지 크기나 배치 방법 등 웹 문서의 디자인 요소를 담당한다.
  • 부트스트랩(Bootstrap)은 가장 대표적인 오픈소스 CSS 라이브러리로 일관된 디자인이 적용된 컴포넌트가 클래스 형태로 정의되어 있다.
  • 자바스크립트는 정적인 HTML 콘텐츠에서 사용자와 상호작용하며 동적으로 변경하는 부분을 담당한다.
  • 자바스크립트는 객체(Object) 기반의 스크립트 언어로 기본적으로는 웹 브라우저에서 해석되는 인터프리터 언어이며, Node.js와 같은 프레임워크를 사용하면 서버 프로그래밍에도 사용할 수 있다.

 

  • 서블릿을 실행하기 위해서는 톰캣과 같은 서블릿 컨테이너가 필요하며 이러한 서버 소프트웨어는 일반적으로 WAS로 불리기도 한다.
  • JSP는 서블릿에서 HTML과 데이터 결합을 손쉽게 처리하기 위해 만들어졌다. 하지만 단순한 HTML 문법만으로는 처리할 수 없기 때문에 자바 코드를 중간중간 사용해야만 한다는 문제가 있다.
  • JSP의 구조적 문제를 해결하기 위해 커스컴 태그를 기반으로 하는 JSTL(JSP Standard Tag Library) 및 EL(Expression Language)이 도입되었다.
  • REST는 네트워크상에서 클라이언트와 서버 사이의 통신을 구현하는 방법 중 하나다.
  • JAX-RS란 자바에서 REST API 개발을 위한 서버 프로그램의 표준 규격이다. 특히 호환성을 위해서라면 JAX-RS를 사용하는 것이 좋다.
  • 스프링 프레임워크는 자바 기반의 오픈소스 프레임워크로 Java EE에서 요구하는 수준의 복잡한 기능을 Java EE를 사용하지 않고 구현하고자 시작한 것이다.

 

 

  • JSP는 서블릿의 화면 처리 어려움을 해결하기 위해 등장하였으며 HTML과 데이터를 조합하기 위한 특징과 구성요소를 가지고있다.
  • JSP는 기본적으로 HTML 문서의 텍스트 파일 형식을 가진다. 하지만 일단 컴파일된 JSP는 단순한 파일이 아니라 컨테이너에서 서블릿 객체로 관리된다.
  • 지시어(Directives)는 JSP 파일의 속성을 기술하는 요소로, JSP 컨테이너에 해당 페이지를 어떻게 처리해야 하는지를 전달하는 내용을 담고 있다. 지시어의 기본 형식은 다음과 같다. <%@ 지시어 속성="값" %>
  • 지시어에는 크게 다음의 세 종류가 있다.
    • page 지시어: 현재 JSP 페이지를 컨테이너에서 처리(서블릿으로 변환)하는 데 필요한 각종 속성을 기술하기 위해 사용한다.
    • include 지시어: 다른 파일을 포함하기 위한 지시어로, 사용된 위치에 특정 파일(html, jsp)을 불러온다.
    • taglib 지시어: JSP의 태그 확장 메커니즘인 커스텀 태그를 사용하기 위한 지시어이다.
  • JSP의 특징 중 하나는 HTML과 자바 코드를 섞어 사용할 수 있다는 점이다. 이때 사용되는 자바 코드를 스크립트 요소라고 한다.

 

  • 액션(Action)태그란 '표준 액션'이라고도 불리며 JSP에서 객체 생성과 공유, 페이지 이동과 전달, 태그 파일 작성 등에 필요한 기능을 제공하는 일종의 커스텀 태그다. 별도의 taglib 지시어 사용 없이 JSP 접두어를 사용한다.
  • useBean 액션이란 JSP에서 자바 빈 객체를 생성하거나 참조하기 위한 액션이다. 기본적인 동작 구조는 다음과 같다.
    1. useBean을 이용해 만든 객체의 범위는 지정하는 속성인 scope에 주어진 id의 객체가 있는지 확인한다.
    2. 객체가 없다면 새로 객체를 생성하고 해당 scope에 저장한다.
  • 커스텀 태그(Custom Tag)란 사용자 정의 태그를 의미한다. 커스텀 태그를 사용하기 위해서는 taglib지시어를 사용하여 커스텀 태그가 어디에 정의되어 있는지를 선언해야 하며 태그에 사용할 접두어를 지정해야 한다.
  • 표현 언어(Expression Language)는 주로 EL이라고 불리며 현재 페이지의 자바 객체 혹은 scope object에 저장된 자바 빈 객체를 손쉽게 접근하고 사용할 수 있게 해준다.
  • JSTL(JSP Standard Tag Library)은 JSP에서 스크립트릿을 사용하지 않고 HTML 형식을 유지하면서 조건문, 반복문, 간단한 연산과 유용한 기능을 손쉽게 사용할 수 있도록 지원하기 위해 만들어진 표준 커스텀 태그 라이브러리다.

 

  • 디자인 패턴은 소프트웨어 설계에서 공통적으로 발생하는 문제에 대한 재사용 가능한 솔루션이다.
  • MVC 패턴이란 Model-View-Controller의 약어로 주로 GUI(Graphical User Interface) 기반의 애플리케이션 개발에 사용되는 디자인 패턴이다.
  • 기본적인 MVC 패턴 구조는 다음과 같다.
    • 모델: 데이터를 처리하는 영역이다. 데이터베이스와 연동을 위한 DAO(Data Access Object) 클래스와 데이터 구조를 표현하는 DO(Data Object, 엔티티라고도 함)클래스 등으로 구성된다.
    • 뷰: 화면 구성을 담당하는 영역이다. 뷰에서 데이터를 직접 가져오는 방식은 권장되지 않고 주어진 데이터를 출력하는 용도로만 사용하는 것이 바람직하다.
    • 컨트롤러: MVC 패턴의 핵심으로 모든 사용자 요청의 중심에 위치한다.
  • 사용자의 요청을 구분해 하나의 서블릿에서 처리하기 위해서는 다음의 두 가지 방법을 사용할 수 있다.
    • URL의 파라미터 이용
    • 프론트 컨트롤러 구현

 

  • 데이터베이스는 데이터를 체계적으로 관리할 수 있도록 해주는 소프트웨어다. 현실적으로 데이터베이스는 컴퓨터의 도움 없이는 운영이 어렵기 때문에 DBMS라고 불리는 소프트웨어 시스템을 사용하게 된다.
  • 데이터베이스는 데이터를 관리하는 구조의 특징을 따라 몇 가지 유형으로 구분된다. 그 중 가장 대표적인 것은 관계형 데이터베이스이며 그 외에도 계층형, 네트워크형, 객체형, NoSQL형 등이 있다.
  • 관계형 데이터베이스에서 데이터 관리의 기본이 되는 구조로 테이블이 있다. 테이블은 칼럼과 로우로 구성된다.
  • 키(Key)는 관계형 데이터베이스에서 제약 조건 중 하나로 데이터의 유일성 및 관계 설정을 위해 사용된다.
    • 기본키: 테이블에 저장된 레코드(로우)를 서로 구분할 수 있도록 특정 칼럼에 설정하는 제약 조건이다.
    • 외래키: 테이블 간의 관계를 설정하기 위해 사용하며 참조 무결성을 제공하기 위한 용도로 사용된다.
  • 시퀀스는 기본키 칼럼을 관리하기 위해 사용하는 데이터베이스 객체로 보통 데이터를 추가 할 때 순차적으로 증가하는 값을 자동으로 생성한다.
  • 데이터베이스는 다음과 같이 트랜잭션 관리를 위한 명령을 제공한다.
    • commit: 모든 데이터의 변화를 실제 적용한다.
    • rollback: 문제 발생 시 현재까지의 변화를 원래대로 되돌린다.
  • H2 데이터베이스는 보통 임베디드 데이터베이스로 알려져 있으며 MySQL과 같은 관계형 데이터베이스 관리 시스템이다.
  • SQL(Structured Query Language)은 관계형 데이터베이스에서 데이터를 관리하기 위한 쿼리 언어로 일반적인 프로그램 언어보다는 단순한 구조를 가지고 있다.
  • SQL 문은 크게 DDL(Data Definition Language)과 DML(Data Manipulation Language)로 나눌 수 있다.

 

  • 리스너란 컨테이너에서 발생하는 이벤트 발생 여부를 모니터링하다가 특정 이벤트가 발생하면 실행되는 특수한 형태의 서블릿으로 이벤트 리스너(Event Listener)라고도 한다.
  • 리스너는 기본적으로 생명 주기 변화와 Scope Object에서 관리하는 속성의 변화를 모니터링하고 해당 이벤트가 발생하면 실행되는 구조다.
  • 필터는 서블릿 필터(Servlet Filter)라고도 하며 리스너와 마찬가지로 웹 애플리케이션을 지원하기 위한 특수한 형태의 서블릿이다.
  • 필터가 대표적으로 활용되는 분야는 다음과 같다.
    • 인증(Authentication)
    • 로깅/감사(Logging And Auditing)
    • 국제화(Localization)
    • 한글 인코딩 처리(Encoding)

 

  • REST 또는 RESTful이라는 용어는 2000년 로이 필딩의 박사 학위 논문에서 처음 제안된 방법으로, 네트워크상에서 클라이언트와 서버 사이의 통신을 구현하는 방법에 대한 아이디어다.
  • REST는 현재 HTTP와 JSON을 함께 사용하여 OPEN API를 구현하는 형태로 많이 사용되고 있다.
  • REST 서비스를 제공하기 위해서는 여러 HTTP Method(GET, POST, PUT 등)를 지원하면서 다양한 URI 요청을 처리할 수 있는 서버 프로그램 구조가 필요하다. 이에 따라 자바에서는 JAX-RS라고 하는 표준 규격을 만들었다.
  • REST API 설계 원칙은 다음과 같다.
    • 동사 대신 명사 사용
    • 상태 변경 시 GET 메서드와 쿼리 파라미터 사용 금지
    • 복수 명사 사용
    • 관계 형태 표현에 하위 리소스 사용
    • 에러 정보 제공
  • REST 클라이언트는 REST API를 사용하는 프로그램을 의미한다. REST API 자체가 HTTP를 사용하기 때문에 HTTP를 지원하는 모든 프로그램은 REST API 클라이언트가 될 수 있다.

 

  • 스프링 프레임워크는 자바 기반의 오픈소스 프레임워크로 Java EE에서 요구하는 수준의 복잡한 기능을 Java EE를 사용하지 않고 구현하기 위해 시작되었다.
  • 스프링 프레임워크의 주요 특징은 다음과 같다.
    • 경량 컨테이너
    • 제어의 역행 지원
    • 의존성 주입 지원
    • 관점 지향 프로그래밍 지원
  • 스프링은 여러 서브 프로젝트로 구성되어 있는데, 대표적인 스프링 프로젝트는 다음과 같다.
    • 스프링 부트
    • 스프링 데이터
    • 스프링 배치
    • 스프링 시큐리티
    • 스프링 HATEOAS
  • 스프링 부트는 스프링 프레임 워크 기반의 프로젝트를 빠르고 간편하게 시작할 수 있게 해준다. 스프링 부트는 스프링에 대한 전문 지식이 없어도 특정 목적의 개발환경과 프로젝트 구조를 자동으로 생성하고 바로 사용할 수 있도록 도와준다.
  • IoC는 작업을 수행하는 쪽에서 객체를 생성하는 일반적인 개념을 뒤집은 것으로, 프로그램의 제어를 자신이 아닌 다른 곳에 위임하는 것을 말한다.
  • IoC를 시스템적으로 구현하는 방법으로 DI(Dependency Injection)와 DL(Dependency Lookup)이 있다. DI는 우리말로 의존성 주입이라 불리며, 클래스 간의 의존관계를 Bean 설정에 기반해 컨테이너가 자동으로 연결해주는 방식이다.
  • AOP(Aspect-Oriented Programming)는 관점 지향 프로그래밍이라고 하며 스프링 프레임워크의 핵심 요소 중 하나다.
  • 스프링 프레임워크의 대표적인 적용 분야인 웹 개발에 사용할 수 있는 두 가지 모듈로 WebMVC와 RestController가 있다. WebMVC는 서블릿과 같이 MVC 패턴 기반의 웹 애플리케이션을 구현할 때 사용하는 모듈이며, RestController는 REST API 구현에 사용된다.
  • 스프링 빈은 스프링 컨테이너에 의해 관리되는 자바 객체로 빈 등록은 설정 xml, 애너테이션, 설정 클래스를 이용해 할 수 있다. 그리고 이렇게 등록한 스프링 빈은 오토와이어링을 통해 공급된다.
  • 필요한 객체를 오토와이어링하는 방법은 다음의 세 가지 유형이 있다.
    • 필드 주입(Field Injection)
    • 생성자 주입(Constructor Injection)
    • Setter 주입(Setter Injection)

'Programming > Web' 카테고리의 다른 글

[Web] 웹(DevOps)  (0) 2022.10.18
[Web] 웹(Java, JVM, JDK, IDE, Servlet Container)  (0) 2022.10.18
[Web] 웹(웹 개발 트렌드)  (0) 2022.10.18
[Web] 웹(Server, Front-end, Back-end)  (0) 2022.10.18
[Web] 웹(Network, TCP/IP, Internet, Protocol, Port, DNS)  (0) 2022.10.14
'Programming/Web' 카테고리의 다른 글
  • [Web] 웹(DevOps)
  • [Web] 웹(Java, JVM, JDK, IDE, Servlet Container)
  • [Web] 웹(웹 개발 트렌드)
  • [Web] 웹(Server, Front-end, Back-end)
arajo
arajo
  • arajo
    아라 메모장
    arajo
  • 전체
    오늘
    어제
    • 분류 전체보기 (509)
      • Language (298)
        • HTML (55)
        • CSS (11)
        • JavaScript (70)
        • TypeScript (8)
        • Python (33)
        • Java (119)
        • C (0)
        • C# (2)
      • Programming (92)
        • Programming (14)
        • Web (51)
        • Apache (1)
        • MySQL (23)
        • AWS (3)
      • Framework | Library (26)
        • Framework | Library (3)
        • Vue.js (2)
        • React.js (5)
        • React Native (4)
        • Node.js (1)
        • Ajax (1)
        • Bootstrap (8)
        • Spring (1)
        • Flutter (1)
      • etc (2)
      • 휴식 (19)
        • 책 (13)
        • 일기 (5)
        • 게임 일기 (1)
      • A (71)
        • 공부 (18)
        • 기타 (6)
        • 일 (47)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    CSS
    web
    리액트
    react
    TypeScript
    JavaScript
    next.js
    HTML
    array
    변수
    객체
    파이썬
    자바스크립트
    event
    타입스크립트
    제어문
    MySQL
    Java
    object
    Python
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.1
arajo
[Web] 웹(요약)
상단으로

티스토리툴바