📘 웹서비스 프로그래밍 2,3장 정리

8 분 소요

2장 프론트엔드 기초

2.1 구성 요소

HTML 기본 구조
- 브라우저는 <!DOCTYPE>을 통해 HTML 문서로 인식
- 시작
  끝
- , 요소로 구성
요소(element)
- 시작태그와 종료태그로 이루어진 문서의 구성 요소
- 시작태그 + 콘텐츠 + 종료태그
속성 : 항상 시작 태그에 이름 = “값” 형태로 기술하여 요소에 대한 추가적인 정보를 제공
- <title color = "green"> 내용 </title>
<!DOCTYPE> 선언
- 웹 페이지에 사용된 HTML의 종료와 버전을 지정

2.2 기본 태그

글자태그
리스트 태그
- 번호 있/없는 리스트 : <ol> <ul>
- 목록 항목 태그 : <li>
하이퍼링크 태그 (링크 태그)
- <a> : 하이퍼링크 정의
- target 속성 : 각 링크 클릭 시 새로운 페이지 어디에 열리는 지 지정
이미지 태그
테이블 태그
인라인 프레임 (iframe) : 현재 html 페이지 내 영역에 다른 html 페이지를 출력
object, embed 태그
- iframe 태그를 대체하여 비디오, 오디오 등 외부 파일을 포함하는데 주로 사용
- 단점
  - 대체 외부 디자인을 포함하기 때문에 내부 디자인에 영향
  - 웹 보안 정책으로 일부 웹 사이트는 iframe 컨텐츠 차단
HTML 요소
- 인라인 요소 : 요소 표시 후 에도 줄바꿈x
- 블록 요소 : 한 줄을 다 차지
시맨틱 태그 : 브라우저에게 요소의 의미나 목적을 알려주는 요소

2.3 입력 양식

입력 양식 (form)
- 사용자가 입력한 내용을 서버로 보낼 때 사용
- name 속성 : 폼의 이름을 지정
- action 속성 : 폼 데이터를 처리할 웹 서버 스크립트의 주소 지정
- method 속성 : 폼 데이터를 웹 서버로 전송하는 형식
- summit 버튼 : 브라우저가 폼 데이터를 서버로 전송하는데 사용
- reset 버튼 : 입력 필드에 입력한 값 모두 초기화
클라이언트에서 서버로 데이터를 전달하는 2가지 방식
- HTTP GET
  - URL 주소 뒤에 파라미터를 붙여서 데이터를 전달하는 방식
  - 길이 제한(2048)
  - 보안 유지 x
- HTTP POST
  - HTTP Request 헤더에 데이터를 포함시켜서 전송하는 방식
  - 길이 제한 x
  - 보안 유지

2.4 CSS 개요

CSS
- 문서의 스타일 (색상, 글꼴 등) 지정
- HTML의 <head> 요소 내에서 안
- 문법
  - 선택자(selector) : 스타일을 변경하고 싶은 HTML 요소 선택
  - 주석 : /* */

2.5 선택자

타입 선택자 : HTML 요소 이름을 사용
아이디 선택자
- 특정한 요소 선택 (n개중 1개)
- 요소 id 앞 #
클래스 선택자
- 클래스가 부여된 요소 선택 (n개중 m개)
- 몇 개의 요소를 하나의 클래스로 묶어 스타일 지정
- ex) .target
전체 선택자
의사 선택자
속성 선택자
선택자 그룹
- 각 선택자에 의하여 선택된 요소의 합
  - 선택자를 , 로 분리하여 나열
자손, 자식, 형제 결합자
의사 클래스
- 클래스가 정의된 것처럼 간주
- 콜론(:) 사용하여 표기

2.6 CSS 선언 방법

CSS 선언 방식
- 외부 스타일 시트 : 외부에 파일로 저장
  - 많은 페이지에 동일한 스타일 적용 시
  - .css 확장자 가짐
- 내부 스타일 시트 : HTML 안에 CSS 정의
- 인라인 스타일 시트 : 각각의 HTML 요소마다 스타일 지정
- 우선 순위 : 인라인 > 내부 > 외부
- 부모 요소의 스타일은 자식에게 상속

2.7 박스 모델

박스 모델
- 웹 브라우저는 HTML 요소를 박스(사각형) 형태로 간주하고 그림
박스 모델 속성
- margin
  - 경계 주위 영역
  - margin: 10px, 20px 30px 40px → 위 오른쪽 왼쪽 아래
- border
- padding
  - 컨텐츠와 경계 사이 간격
  - 투명함
  - padding: 10px, 20px 30px 40px → 위 오른쪽 왼쪽 아래
수평 정렬
- 인라인 요소
- 블록 요소

2.8 레이아웃

레이아웃
- 웹페이지에서 HTML 요소의 위치, 크기 등을 결정하는 것
  - 인라인 요소, 블록 요소
- display
  - display:block → 블록 요소
  - display:inline → 인라인 요소
- float
  - float 된 요소는 항상 브라우저의 가장 왼쪽이나 오른쪽에 배치
    - float 속성이 right 면 그 요소는 가장 오른쪽으로 배치되고 뒤따르는 요소는 바로 왼쪽으로 배치. left 속성은 그 반대
- position
Flex 속성
- 1차원 레이아웃 모델
- 요소 간 공간 배분과 정렬 기능을 통해 효율적으로 요소 배치
- flex-direction
  - row : 왼쪽에서 오른쪽
  - column: 위에서 아래
- justify-content와 align-items
  - main axis를 기준 정렬 : justify-content
  - cross axis를 기준 정렬 : align-items
Grid 속성
- 2차원 레이아웃 모델
- 열과 행 설정을 통해 격자 형식으로 요소 배치

2.9 자바스트립트 소개

자바스트립트 특징
- 인터프리터 언어 : 브라우저가 소스코드를 해석하며 실행
- 동적 타이핑 : 변수 선언 시가 아닌 할당 시 타입 결정
  - 타입스크립트 : ES6 확장으로 정적 타이핑 지원
- 객체 기반 언어
  - 객체 선언과 생성 동시 처리
- 함수는 자체로 객체

2.10 자바스크립트 자료형

자바스크립트 변수
- 값을 저장하는 저장소
- 변수 선언에는 자료형 지정 x
- var : 재할당, 같은 변수명 재선언 가능
- let : 재할당 가능, 재선언 불가
- const : 재할당, 재선언 불가
기본형
- 숫자(number) : 정수 실수
- 문자열(string)
- Boolean : true, false

2.11 자바스크립트 함수

2가지 종류 함수
- 자바스크립트 내장 함수
- 사용자 정의 함수
  - 함수 선언식 : function 선언하고 함수명 기재, 호이스팅 가능
  - 함수 표현식 : 변수 선언하고 함수 대입, 호이스팅 불가
화살표 함수
- 매개변수가 한 개인 경우 소괄호 생략 가능
- 처리를 한 행으로 반환하는 경우 return 생략 가능
콜백 함수
- 함수는 다른 함수의 매개변수로 전달 → 콜백 함수
스코프 : 변수와 함수가 접근 가능한 범위

2.12 문서객체모델(DOM)

DOM
- 브라우저는 HTML 문서를 해석해서 요소(element)들을 트리(tree) 형태로 구조화
- 브라우저는 DOM 객체를 통해 각 요소에 접근 및 변경 후 화면에 렌더링
- DOM 트리의 최상위 노드가 document 객체
- 프론트엔드의 객체는 브라우저 / 백엔드는 Node.js가 최상위 객체
- BOM : 웹 브라우저를 객체로 표현한 것

2.13 이벤트

이벤트
- 웹 페이지에서 사용자와의 상호작용이 발생하면 이벤트가 일어남
- 마우스 이벤트
- 키보드 이벤트
- 윈도우, 문서 이벤트

2.14 BOM

브라우저 객체 모델
- 웹 브라우저와 관련된 객체의 집합
- Window 객체 : 브라우저 기반 자바스크립트 최상위 객체

2.15 비동기 통신

XMLHttpRequest : WEB API
- 콜백함수 형식
Promise
- Promise 형식
Fetch API
- Promise 형식
async/await 문법
- Promise 기반이지만 문장 구조 다름
JSON
- 텍스트 기반의 데이터 교환 형식
REST API
- REST 아키텍처를 기반으로 구현한 서비스 API
- 자원, 행위, 표현 3가지 요소
  - 자원 : URI (리소스 표현)
  - 행위 : HTTP 요청 메서드 (POST, GET..)
  - 표현 : 페이로드 (전송되는 데이터)

2.16 TypeScript

TypeScript
- 자바스크립트 + 정적 타입 문법 추가

3장 JSP 서블릿 구조

3.1 JSP 개요

JSP와 서블릿
- JSP : HTML 내에 자바 코드를 삽입하여 동적 페이지를 생성하는 스크립트 언어
- 서블릿 : 자바를 이용한 동적 페이지를 생성하는 서버 프로그래밍 기술
  - 서블릿을 위해서는 서블릿 컨테이너 필요 (톰켓)
JSP
- HTML 문서 사이 JSP 문법 코드가 삽입된 형태
- JSP 내 HTML 코드는 웹 브라우저로 그대로 전송
  - JSP 문법 코드는 실행되고 그 결과인 HTML 코드만 웹 브라우저 전송
- 자바 코드 삽입 방식 기준
  - 지시자
    - <%@ 시작 %> 끝
    - 웹 컨테이너가 JSP 페이지를 서블릿 클래스로 변환할 때 필요한 정보 기술
  - 스크립트릿
    - JSP 문서 내에 자바 코드를 기술하는 부분
    - <% 시작 %> 끝, 사이에는 자바 명령문
  - 표현식
    - <%= 시작 %> 끝, 사이에는 상수 또는 변수, 리턴값이 있는 메서드 호출식
    - JSP 페이지 내 자바 식 표현
JSP 특징
- JSP 또는 다른 서블릿 간 데이터 쉽게 공유
- 자바의 모든 기능과 자바 컴포넌트(Beans) 사용가능
- 다양한 프레임워크와 결합하여 개발 가능

3.2 스크립트 태그

JSP 태그
- 스크립트 태그
  - 자바 코드를 넣어 프로그램이 수행하는 기능 구현
  - JSP를 서블릿 클래스로 변환
  - 컨테이너(톰켓)은 자바 코드 삽입되어있는 스트립트릿 태그 처리, 나머지 HTML 코드는 일반 텍스트 간주
- 선언문 태그
- 메서드나 전역변수 선언하기 위한 구문
- <%! %>는 JSP 페이지에서 멤버변수와 메서드 선언을 가능하게 함
- 구조적으로 JSP에서 자바코드 사용 권장 x → 선언문도 권장 x
- 서블릿 프로그램으로 변환될 때 _jspService() 메소드 외부에 배치
스크립트릿 태그
- JSP 문서 내에서 자바 코드를 기술하는 부분
- 메서드 없이 변수만 선언
- 서블릿 프로그램으로 변환될 때 _jspService() 메소드 내부에 배치
표현식 태그
- <%= %>를 사용해서 간단한 데이터 출력이나 메서드 호출 등에 이용
- 기본 데이터 타입(숫자, 문자, 불)과 자바 객체 타입 사용 가능
- 메서드 호출, 변수출력, 사칙연산 및 문자열 결합 가능
- 각 행이 세미콜론으로 종료 못함
- 표현식 보다는 표현언어 사용 권장
디렉티브 태그
- JSP에 대한 정보를 컨테이너에 제공
액션 태그
- XML 형태의 태그로 JSP 페이지 간 제어 (JSP연동)
- jsp: 로 시작

3.3 JSP 처리 과정의 이해

웹 프로젝트 디렉터리 구조
- Context Root
  - 웹 어플리케이션의 메인 접속 경로
  - JSP 실행을 위한 기본 URL 적용
- Content Directory
  - JSP, HTML, 이미지등 기본 웹 컨텐츠 위치한 디렉터리
  - src/main/webapp 폴더가 기본값
JSP가 서블릿으로 컴파일되고 실행되는 과정
- JSP는 컨테이너에 의해 자바 소스로 변환되고 다시 클래스 파일로 컴파일
- HelloWorld.jsp -> HelloWorld_jsp.java -> HelloWorld_jsp.class
JSP 내장 객체
- HelloWorld_jsp.java 에 있음
- 내장객체는 서블릿으로 변환된 JSP에서 별도의 선언 없이 접근 가능한 객체
- jsp 파일에서 스크립트릿 등을 이용해 바로 사용할 수 있는 객체
개발자가 작성한 JSP 코드 부분
- JSP 파일에서 개발자가 작성한 코드는 모두 out.write() 형태로 처리

3.4 JSP 프로그램 유형

JSP 프로그램 유형 비교
- 유형 1
  - 빈즈 클래스를 사용하지 않고 스크립트릿만을 사용
- 유형 2
  - 빈즈 클래스( → 자바의 객체를 호출하여 사용)와 액션 태그 사용
- 자바 빈즈
  - 특정한 일을 동립적으로 수행하는 컴포넌트
- JSP 빈즈
  - JSP와 연동되어 사용되는 자바 빈즈

3.5 서블릿 개요

서블릿
- 자바를 기반으로 하는 웹 어플리케이션 기술
- JSP는 서블릿 기반의 웹 스크립트 언어로 내부적으로 서블릿으로 변환되어 실행
서블릿의 장점
- 자바를 기반으로 자바 API 모두 사용 가능
- 웹 어플리케이션에서 효율적인 자료 공유 방법 제공
- 다양한 개발도구, 오픈소스 사용 가능
웹 어플리케이션 개발 시 서블릿 사용 이점
- MVC 패턴 쉽게 적용, 컨테이너와 밀접한 프로그램 개발 가능
- MVC 패턴 적용 시 콘텐츠와 비즈니스 로직 분류 → 컨트롤러와 뷰가 역할 분담
MVC 패턴
- 모델
  - 뷰에 필요한 비즈니스 로직 처리
- 뷰
  - 비즈니스 영역에 대한 결과화면 담당
- 컨트롤러
  - 사용자의 입력 처리와 화면의 흐름 제어 담당 → Servlet
서블릿 컨테이너
- 서블릿 실행 환경을 제공하는 서버 소프트웨어
서블릿 개발과 실행 과정
- 서블릿은 개발자가 소스 작성 후 컴파일 과정을 거쳐 컨테이너에 배치하게 되면 컨테이너에 의해 실행되어 관리한다
- 서블릿은 url을 책임진다 (url mapping은 서로 달라야함 →하나의 서블릿당 하나의 url)
- 브라우저의 요청에 따라 스레드 단위로 실행되며 필요한 작업(데이터 베이스 연동 등) 수행 후 처리 결과를 브라우저에 HTML 형식으로 전달

3.6 서블릿 구조와 생명주기

서블릿 동작 과정
- 서블릿 컨테이너가 서블릿 생명주기 관리 (서블릿 생성부터 죽음까지)
- 서블릿 생성
  - init()
- 서블릿 죽음
  - destory()
- 요청
  - service() →doGet(), doPost()
서블릿 구조와 API
- 서블릿은 일반적으로 자바 클래스 구조
- 서블릿은 컨테이너에 의해 실행 → 개발자가 임의로 프로그래밍x, 특정 클래스를 상속 받아야한 구현 가능
- 서블릿 API는 서블릿과 서블릿 컨테이너 사이의 인터페이스 정의
  - 일반적으로 서블릿은 jakarta.servlet.http.HttpServlet 클래스를 상속해서 구현
jakarta.servlet.http.HttpServlet 동작 구조
- HttpServlet도 jakarta.servlet.GenericServlet을 상속
- 메서드가 post로 오면 doPost
- 메서드가 get으로 오면 doGet
Get 방식
- 서버에 있는 정보를 가져오기 위해 설계된 데이터 전달방법 (일반 정보)
- 서버에 전달하는 데이터 크기 제한 → 240Byte
- ‘?’ 이후의 값들은 서버에서 QUERY_STRING을 통해 전달
  - 속성=값 형태로 사용
  - &는 여러 속성을 전달할때 연결해주는 문자열
- URL 노출로 인한 보안 문제
POST 방식
- 서버로 정보를 올리기 위해 설계된 방법
- 정보를 메세지 바디에 포함시켜 전달
- URL에 매게변수 포함x → 보안 기능 (개인정보)
- 서버에 전달하는 데이터 크기 제한 x
서블릿 생명주기
- 서블릿 초기화 : init() 메서드
  - 서블릿 실행 시 호출되는 메서드 초기에 한번 실행
- 요청/응답 : service() 메서드
  - 사용자의 요청에 따라 스레드로 실행되는 메서드
  - HttpServletRequest 와 HttpServletResponse 를 통해 요청 처리
  - doGet, doPost
- 서블릿 종료 : desport() 메서드
  - 컨테이너로부터 서블릿 종료 요청이 있을 때 호출되는 메서드
  - 한번 실행

3.7 서블릿 예제

서블릿 클래스 선언
- @WebServlet : 컨테이너가 서블릿임을 알리는 애너테이션
- urlPatterns={“/HelloWorldServlet”} : 서블릿 실행을 위한 요청 URL
HttpServlet 클래스의 개요
- doGet 메서드와 doPost 메서드
- HttpServletRequest와 HttpServletResponse 매개변수는 서블릿과 클라이언트 사이를 연결해주는 중요한 객체 → HttpServlet 클래스의 특징

Twitter Facebook LinkedIn

Lim Seungje

📘 웹서비스 프로그래밍 2,3장 정리

2장 프론트엔드 기초

2.1 구성 요소

2.2 기본 태그

2.3 입력 양식

2.4 CSS 개요

2.5 선택자

2.6 CSS 선언 방법

2.7 박스 모델

2.8 레이아웃

2.9 자바스트립트 소개

2.10 자바스크립트 자료형

2.11 자바스크립트 함수

2.12 문서객체모델(DOM)

2.13 이벤트

2.14 BOM

2.15 비동기 통신

2.16 TypeScript

3장 JSP 서블릿 구조

3.1 JSP 개요

3.2 스크립트 태그

3.3 JSP 처리 과정의 이해

3.4 JSP 프로그램 유형

3.5 서블릿 개요

3.6 서블릿 구조와 생명주기

3.7 서블릿 예제

공유하기

참고

📘 웹서비스 프로그래밍 4,5,6장 정리

📘 웹서비스 프로그래밍 1장 정리

📘 소프트웨어공학 9 10 11장 정리

📘 소프트웨어공학 6 7 8장 정리