Wondershare EdrawMind
마인드 맵 갤러리 웹서비스프로그래밍
- 1
웹서비스프로그래밍
이 마인드 맵는 EdrawMind를 사용하여 작성되었으며, 웹서비스프로그래밍에 관한 다양한 주제와 내용을 분류하고 정리하였습니다. JSP의 개요, 스크립트 요소, 내장 객체, 쿠키와 세션, JDBC 프로그래밍, MVC 아키텍처 등의 주요 항목으로 나누어 각각의 개념, 사용 방법, 예제 등을 상세히 기재함으로써, 웹서비스프로그래밍의 전반적인 이해와 학습에 도움을 줍니다.
2022-09-28 23:25:43에 편집됨
- 추천 사항
- 개요
웹서비스프로그래밍
Chapter 01. JSP의 개요 : 원리를 이해하고 개발 환경 구축하기
복습
큰 목차 - 웹 환경과 기술 이해?
1.2 웹 프로그래밍 언어와 주요 기술
웹에 사용되는 기초 기술
프론트 엔드
웹 페이지를 주로 다루며 UI/UX가 이에 해당됨
백 엔드
웹 페이지의 뒷 단에서 데이터를 동적으로 생성하고 앞 단으로 전달한다.
프레임워크와 종류
프레임워크란?
라이브러리의 모음집으로 여러가지 편리한 기능을 제공한다
프레임워크 종류
java
jsp
spring
python
django
서브 주제
ruby
js
Vue.js((프론트엔드)
Angular.js
React.js
node.js
express.js(벡엔드)
OO 중심 개발
전통
백엔드 중심 개발
의미
서버에서 대부분을 수행해서 클라이언트에 전송하는 방식 전통적인 웹 개발 모델
특징
예전에는 중심형 레포지토리 형태의 서버였다면
지금은 분산형 마이크로 아키텍쳐로 변경 중
현대
프론트엔드 중심 개발
의미
클라이언트가 HTML을 가지고 있거나 받은 HTML을 가지고 서버에서 받은 데이터와 함께 렌더링한다 이렇게 클라이언트에서 데이터를 받아 렌더링하는 것을 CSR(Client Side Rendering)이라고 한다
특징
데이터만 받아서 렌더링 하면 되기 때문에 필요한 데이터를 받아서 렌더링하면 되기 때문에 페이지 전체를 렌더링 할 필요는 없지
최근에는 프론트엔드 중심 개발이 트렌드
HTML을 갖고있거나 최소한의 HTML을 받고 나머지 데이터는 동적으로 받아서 직접 렌더링하여 웹 페이지를 제작한다
1.3 웹 트렌드와 변화
언어 트렌드 변화 새로운 대안 언어 등장
안드로이드 자바 대신 코틀린
서버는 go
데이터 분석은 scala
백엔드 개발 및 운영 환경 변화
자바 표준 spring 등장
모놀로식 아키텍처에서 분산 마이크로 아키텍처로 변화
나머지 3개는 어렵다
프론트엔드 개발이 가속화되면서 서버 프로그램이 간결화됨
프론트엔드 중심 개발로 변화
트렌드가 웹 -> 모바일로 이동하면서 서버 사이드 렌더링(SSR) -> 클라이언트 사이드 렌더링(CSR)로 이동
HTML, CSS, Javascript
HTML
개요
HTML5로 변경함
HTML 편집기
메모장으로도 HTML을 편집할 수 있음
구성요소
HTML
문서를 구성하는 언어? 웹 페이지를 작성하기 위해 사용하는 언어?
HTML5
플랫폼 의존도를 줄여서 플래시나 어도비 를 설치할 필요가 사라짐
그 다음은 뭐가 특징이지?
요소
시작태그와 종료태그로 이루어진 문서 작성의 구성요소 요소는 시작태그 + 컨텐츠 + 종료태그 로 이루어져있다.
속성
요소에 추가적인 정보를 제공하는 방법 시작태그에 이름:"값" 을 추가하여 사용한다
기본 태그
하이퍼링크
단락
리스트
경계선
div
입력양식 form
form
form 은 클라이언트가 작성한 정보를 서버로 보낼 때 의 입력 양식을 의미함
CSS
개요
구성요소
양식
{ 속성 : "값" ; }
CSS 적용 방법
외부에서 적용
외부에서 적용하기 위해선 <head> 태그에 URL을 추가하여 사용
내부에서 적용
내부에서 사용하기 위해선 <head> 부분에 <style> 태그 안에서 작성해야함
인라인으로 적용
<body> 부분에 하나의 요소의 시작태그에 속성으로 css 정보를 추가하는 방식
CSS 세부 속성
색깔
색깔 지정 방법
이름으로 지정
red
FF0000
RGB 사용
GRB(125,225,099)
RGB(50%, 25%, 12%)
폰트
폰트 사이즈
박스모델
요소들은 모두 마진, 경계, 패딩을 가진 박스 형태로 이루어져 있는 것 을 박스 모델이라 한다.
블록 모델
인라인 모델
인라인 블록 모델
레이아웃
요소들의 위치에 대한 부분
서브 주제
위치 설정
absolute
부모 요소에 대해 절대적인 위치
fixed
웹 브라우저에서 고정적인 위치
static
디폴트 위치 레이아웃으로 요소들의 순서에 따라 배치가 이루어진다
relative
static일 때 자신의 원래 자리를 기준으로 움직인 상대적인 위치
Javascript
Chapter 02. 스크립트 태그 : 시작 페이지 만들기
Chapter 03. 디렉티브 태그 : 한글 출력 및 페이지 모듈화하기
기초 세팅
Chapter 04. 액션 태그 : 상품 목록 표시하기
Chapter 05. 내장 객체 : 상품 상세 정보 표시하기
Chapter 07. 파일 업로드 : 상품 이미지 등록하기
상품 표시
Chapter 06. 폼 태그 : 상품 등록 페이지 만들기
Chapter 09. 다국어 처리 : 상품 등록 페이지의 다국어 처리하기
상품 등록
Chapter 08. 유효성 검사 : 상품 등록 데이터의 유효성 검사하기
Chapter 10. 시큐리티 : 상품 등록 페이지의 보안 처리하기
Chapter 11. 예외 처리 : 예외 처리 페이지 만들기
Chapter 12. 필터 : 로그 기록하기
보안
Chapter 13. 세션 : 장바구니 페이지 만들기
Chapter 14. 쿠키 : 주문 처리 페이지 만들기
캐시 사용으로 편의성 증대
Chapter 15. 데이터베이스 개발 환경 구축 : 상품 관리 테이블 생성 및 상품 등록하기
Chapter 16. JDBC로 데이터베이스와 JSP 연동 : 상품 조회, 등록, 수정, 삭제하기
데이터베이스 추가
Chapter 17. JSP 표준 태그 라이브러리 : 회원 가입, 수정, 탈퇴하기
Chapter 18. 웹 MVC : 게시판 만들기
심화
웹서비스프로그래밍
기초세팅
Chapter 01. JSP의 개요 : 원리를 이해하고 개발 환경 구축하기
1.1 네트워크, 인터넷, 웹
1.2 웹 프로그래밍 언어와 주요 기술
웹에 사용되는 기초 기술
프론트엔드 기술
기본적으로 브라우저에 의해 처리되는 요소 - 화면 구성(HTML5), 스타일(CSS3), 동적 처리: 사용자 상호작용 담당(JavaScript) HTML : HTML은 하이퍼텍스트(텍스트 이상의 것들 이미지, 동영상 등등의 미디어)도 다룰 수 있는 언어다
백엔드 기술
동적인 컨텐츠 생성을 위한 스크립트 언어 필요 : 실행 결과로 HTML 파일을 생성 • HTML내 스크립트 언어를 통해 비즈니스 로직 코드를 삽입
프레임워크
프레임워크란
소프트웨어적 구조와 라이브러리가 포함된 소프트웨어 개발 환경을 의미 라이브러리란? 클래스에서 정의한 것을 토대로 메모리(실제 저장공간)에 할당된 것으로 프로그램에서 사용되는 데이터 또는 식별자에 의해 참조되는 공간을 의미하며, 변수, 자료 구조, 함수 또는 메소드가 될 수 있다.
프레임워크 종류
교수님의 조언
미래는 융합이고 이제는 해당 전공자가 파이썬을 통해서 코딩을 하기 때문에 언어만 아는 컴퓨터공학자는 쓸모가 없어진다 그렇기 때문에 한 분야(ex금융)의 전문 지식을 갖추어야 한다.
PHP
laravel
Codeigniter
자바스크립트
프론트엔드
Angular
React
Vue(Front-end)
백엔드
Node
Express(Back-End)
파이썬
Django
Flask
루비
Ruby on Rails
자바
Spring
C#
.Net
OO엔드 중심 개발
전통적인
백엔드 중심 개발
의미
전통적인 웹 개발 모델 서버에서 모든 것을 담당하는 방식 특히 자바 서블릿/JSP는 가장 인기있는 백엔드 개발 기술임
특징
REST API와 클라우드 인프라가 보편화 로 기존 대규모의 모놀리식 아키텍처 방식보다는 소규모 서버를 연결하는 MSA(Micro Service Architecture) 방식이 확신되고 있음
현대적인
프론트엔드 중심 개발
의미
클라이언트에서 HTML을 가지고 있거나 서버에서 HTML만 받아오고 화면 구성에 필요한 데이터만 자바스크립트로 받아와 데이터와 화면을 조합해 보여줌 이러한 방식CSR(Client Side Rendering) 이라고도 함
15p 클라이언트에서는 HTML이 아닌 렌더링을 중심으로 변화되고 있다 - 부가적인 이해 필요 - 이해 완료
렌더링 : 데이터 -> HTML 옜날에는 서버 지금은 클라이언트에서 하는게 대세
특징
필요한 데이터만 갱신이 가능하기 때문에 페이지 전체를 서버로부터 받아올 필요가 없음 실시간 데이터 갱신이 자유로움 SPA(Single Page App), PWA(Progressive Web App) 등의 구현에 적용 가능 React.js, Vue.js 등 다양한 라이브러리/프레임워크 사용 가능 프론트 엔드 중심 개발이라고 해도 데이터를 제공하기 위한 서버는 필요함(그럼 서버리스는 뭐야?)
1.3 새로운 웹 개발 트렌드
"변화"를 중점적으로 보기
대안 언어 등장
안드로이드에 자바 대신 코틀린
서버 전용 고
데이터 전용 스칼라
백엔드 개발 및 운영 환경의 변화
스프링 프레임워크의 등장
개발 및 운영환경 변화
스프링 프레임워크 표준 등장
모놀리식 아키텍처 중심 -> 소규모 분산 서비스 방식(MSA)
프론트엔드 중심의 개발이 가속화되면서 서버 프로그램이 간결화됨
벡엔드는 서버에만 집중하면 되는 구조로 점점 변경
REST API 형태의 개발이 주를 이루기 때문
다양한 구조의 데이터베이스(관계형, NoSQL) 연동 및 활용이 매우 중요해 짐
서버리스 환경도 보 편화되고 있음
프런트엔드 중심 개발로의 이동
웹에서 모바일로 이동하면서 서버 사이드 렌더링(SSR) -> 클라이언트 사이드 렌더링(CSR) 발전하는 계기가 됨
모바일은 컴퓨터보다 성능이 안좋으니 서버에서 다 만들어놓은 HTML만 받아오는 백엔드 개발 중심으로 가야 맞는 방향 아닌가요? 모바일이라는 클라이언트가 급격히 증가해서 서버 부하 문제로 인해 프론트 중심 개발이 이루어진 건가요?
HTML CSS Javascript
1장 HTML5
1.1 개요
HTML
웹 페이지의 내용은 HTML5로 작성
CSS3
웹 페이지의 스타일은 CSS3로 지정
css
엘리먼트에 어떤 속성을 줄지
자바스크립트
웹 페이지의 상호작용은 자바스크립트로 작성
javascript
엘리먼트를 동적으로 변화를 주는 엘리먼트에다가 반영할 데이터? 다루는?
HTML, CSS, Javascript, 웹 브라우저의 타임 라인

1.2 HTML 편집기
메모장에서도 가능
1.3 구성요소
HTML
HTML5 특징
웹 페이지의 플랫폼 의존성 제거
액티브 X / 플래시 등 플러그인 없이 작동 가능
웹 페이지를 기술하기 위한 마크업(markup)언어
태그를 이용해서 문서의 구조를 표현
ex) <body>, <head>, <title>, <table>, <img>
HTML은 태그로 이루어진 요소로 구성된다
태그는 대소문자를 구별하지 않는다
HTML 기본 구조
1. 브라우저는 <!DOCTYPE>을 통해 HTML 문서로 인식한다 +12p 웹 페이지에 사용된 HTML의 종류와 버전을 지정 2. <html>로 시작해서 </html>로 끝난다. 3. HTML 문서는 <head>와 <body>요소로 구성된다
요소(element)
요소(element) : 시작태그와 종료태그로 이루어진 문서(HTML, CSS, Javascript?)의 구성요소 요소 = (시작 태그 + 콘텐츠 + 종료 태그)
엘리먼트 종류
줄바꿈
줄바꿈 되는 블록 요소
한 줄을 다 차지
• <h>, <p>, <ul>, <ol>, <li>, <table>
• <div> : 공간을 분할하는 영역을 정의, 태그들을 묶어 그룹화
줄바꿈 안 일어나는 인라인 요소
요소를 표시한 이후에도 줄바꿈이 일어나지 않는다
• <a>, <img>, <strong>, <em>, <input>, <i>, <b>, <sub>, <sup>, <ins>, <del>
• <span> : 공간을 분할하는 영역을 정의, 태그들을 묶어 그룹화
요소와 태그의 차이
중요하다 생각해서 따로 토글을 만듦 태그와 요소의 관계 태그는 요소의 시작과 끝을 표시하는 문법 기호
속성(attribute)
속성(attribute) : 속성은 요소에 대한 추가적인 정보를 제공 속성은 항상 시작태그에 이름="값" 형태로 기술된다. CSS는 :, ; 콜론, 세미콜론 (예쁜 것들) HTML은 = " " 는 땡땡 (투박한 것들)
속성 이름
=
"값"
1.4 기본 태그
글자 태그
13p
글자 굵기 변경
<h1> ~ <h6>
heading : 제목 의 준말
<b>
bold 의 준말
<strong>
글자 기울이기
<i>
<i> 태그는 기본 텍스트와는 다른 분위기나 음성을 위한 텍스트 영역을 정의할 때 사용합니다.
<em>
emphasis : 강조 글자를 기울이는데 사용
글자 줄 긋기
<ins>
insert 의 준말 밑줄 긋는데 사용
<del>
delete 의 준말 취소선 긋는데 사용
<hr> - 수평줄
horizen : 수평선의 준말 수평 줄을 긋는데 사용됨
줄바꿈
<br>
break 의 준말
<b><i> 와 <strong><em>의 차이
<b> 태그는 굵게 <strong> 태그는 굵게 + SpeechSynthesizer가 볼륨이나 톤을 강하게 발음해줌 <i> 는 이탤릭체로 <em> 은 이탤릭체로 + SpeechSynthesizer가 볼륨이나 톤을 강하게 발음해줌 b와 i 는 웹 브라우저에서만 굵고, 이탤릭체로 표시되는 것 즉, em과 strong을 사용한 경우 음성 읽기 도구에서 강조하여 읽어준다.
리스트 태그
말 그대로 리스트를 만드는 태그
<ol> - ordered list
번호 있는 리스트
<ul> - unordered list
번호가 없는 리스트
<li> - list
목록 항목 태그 <ol> 이나 <ul> 안에 사용되는 <li> (list) 태그이다
하이퍼링크 태그
<a> anchor 의 약자 링크를 뜻한다
target 속성
_blank
부모 프레임에서 새로운 페이지를 연다
_parent
부모 프레임에 새로운 페이지를 적재한다? 현재 프레임의 부모 프레임에서 새웹페이지가 열립니다.만약 어떤 창 A에서 창 B를 새로 열었습니다. 그런데 창 B에서 _parent로 창을 열면 창 A에서 열리게 되는 것이죠.
_self
현재 윈도우에서 새로운 페이지를 적재한다
_top
모든 프레임을 취소한다 현재 열려있는 최상위 인터넷 창(부모 창과 반대인 child 창)에다가 페이지를 연다.
이미지 태그
웹 문서에 이미지 삽입 <img> 태그 사용
alt 속성
브라우저가 어떠한 이유로 이미지를 화면에 표시하지 못했을 경우에 표시하는 "대체 텍스트(alternative text)"를 지정
문제점
이미지가 계속 엑스박스만 뜨니까 alt 텍스트밖에 못 봄 문제점 해결 시작 1. 구글링 이미지 문제의 9할은 경로 문제인 듯 함 (나도 예전에 vscode python 할 때 vsc가 인식하는 경로가 일반적이지 않아서 사진이 안나왔었음) ./ 넣고 ch01 밑에 img 파일 생성해서 그 안에 사진 파일을 넣어준 후 ./img/imgTest.jpg 하니까 됨
이미지 경로 잘 설정하기
테이블 태그
<table>...</table> : 테이블의 시작과 끝을 알려주는 태그
너비, 테두리 속성
너비 속성 (width attribute)
표의 전체 너비 디폴트는 셀 안의 내용에 따라 달라진다 <table border="1" width="90%">
테두리 속성 (border attribute)
표의 테두리 지정 0 이면 그리지 않음
행, 열, 열 제목 태그
행 태그 (table raw)
열 태그 (table colum)
열 제목 (table header)
테이블 행, 열 병합
가로 병합
colspan
가로 병합 1열 2열 병합! 이런 느낌
세로 병합
rawspan
세로 병합 1행2행 병합! 이런 느낌
미디어 태그
오디오 태그
비디오 태그
주의점 파일 이름에 [ ] 와 같은 대괄호가 들어가면 문제가 됨
[T타임] 당신이 무엇을 검색할지 웹 3.0은 알고 있다.mp4 이건 안됨
asdf.mp4 이건 됨
asdf ㄱㄱ 안녕.mp4 이건 됨
asdf () ㄱㄱ 안녕.mp4 이건 됨
속성
autoplay 속성
<video>, <audio> 태그의 autoplay 속성은 비디오가 실행될 준비가 끝나는 대로 자동으로 실행됨을 명시합니다. autoplay 이슈 - 결론은 2018년 4월 이후에 업데이트된 자동재생 정책 변경으로 인한 오류인것 한마디로 1) 자동재생을 하지 말 것 2) 자동재생을 할거면 음소거를 할 것 이것뿐이다.
브라우저 정책상 autoplay 막아놓음
video 태그에 autoplay가 작동하기 위해서는 muted 요소와, playsinline 요소(iOS에서)가 추가되어야 한다.
controls 속성
이 속성이 존재하면, 소리 조절(volume), 동영상 탐색(seek), 일시 정지(pause)/재시작(resume)을 할 수 있는 컨트롤러를 제공합니다.
muted
인라인 프레임
현재 html 페이지 내 영역에 다른 html 페이지를 출력한다.
추가적으로 내가 알아본 태그
주석 태그
<!-- contents --> HTML 에서만 됨 CSS에서는 안되던데
띄어쓰기 태그
  nbsp는 'Non-breaking Space'의 약자   를 사용하면 띄어쓰기를 사용할 수 있다.
<br> 과 <br /> 차이
HTML4 : <br>만 허용 HTML5 : <br> 선호, <br/> 및 <br /> 사용 가능 XHTML : <br /> 선호, <br/> 및 <br></br> 사용 가능
엘리먼트 종류
줄바꿈
줄바꿈 되는 블록 요소
한 줄을 다 차지
• <h>, <p>, <ul>, <ol>, <li>, <table>
• <div> : 공간을 분할하는 영역을 정의, 태그들을 묶어 그룹화
줄바꿈 안 일어나는 인라인 요소
요소를 표시한 이후에도 줄바꿈이 일어나지 않는다
• <a>, <img>, <strong>, <em>, <input>, <i>, <b>, <sub>, <sup>, <ins>, <del>
• <span> : 공간을 분할하는 영역을 정의, 태그들을 묶어 그룹화
1.5 입력 양식(form)
사용자가 입력한 내용을 서버에 보낼 때 사용한다
클라이언트에서 서버로 데이터를 보내는 방식 2가지
HTTP GET 방식
URL 주소 뒤에 파라미터를 붙여서 데이터를 전달하는 방식
HTTP POST 방식
HTTP Request 헤더에 데이터를 포함시켜서 전송하는 방식 길이 제한이 없으며, 보안이 유지된다.
form 태그에 사용되는 기본 속성
HTML에서 사용자 입력 양식을 만드는데 사용
name 속성
폼의 이름을 지정
action 속성
어디에 보낼 건지
method 속성
폼 데이터를 웹 서버로 전송하는 방식 GET? or POST?
<form></form> 태그 사이에 사용되는 요소 종류
굉장히 여러가지
입력 요소
<input> 요소
여러가지인데 대부분< input type="속성"> 의 문법으로 진행된다
ex) <input type="text" name="userid">
ex) <input type="submit" value="제출">
ex) <input type="reset" value="초기화">
HTML5에 새로 추가된 <input> 속성
autocomplete
자동으로 입력을 완성한다
autofocus
자동으로 입력 포커스 갖춤
placeholder
입력 힌트를 희미하게 보여줌
readonly
required
pattern
정규식으로 정의해서 입력을 제어 국가에서 권장하는 비밀번호 양식을 맞출 때 사용할 수 있겠다
<select> 요소
메뉴를 표시하고 사용자로 하여금 선택 selected 속성을 이용해 특정 항목을 초기에 선택할 수 있다 
입력 요소를 그룹핑
<fieldset> 태그
입력 요소를 그룹핑하는 데 사용되는 태그 legend 태그를 사용하면 그룹에 제목을 붙일 수 있다.  빨간색 동그라미가 <fieldset> 태그 파란색 동그라미가 <legend> 태그
2장 CSS
2.1 개요
정의
(Cascading Style Sheets) : 문서의 스타일을 지정한다 스타일이 적용되는 방식이 단계적으로(Cascading) 적용된다고 해서 붙여진 이름이고, 여기서 스타일이란 html 문서의 글꼴이나 색상 등을 의미한다.
특징
1. HTML 문서에 적용하기 위해 W3C 웹 컨소시엄에서 개발한 표준 스타일시트 언어 2. HTML 문서뿐만 아니라 XML 문서에도 적용 가능 3. 화면 구성이나 표현 형식 등 디자인 부분은 HTML 대신에 CSS에 위임함으로써 문서 구조와 문서 표현을 자연스럽게 분리할 수 있다.
문법
ex) p { background-color: yellow; } 하면 paragragh 요소인 p 엘리먼트는 모두 노란색이 된다
선택자
선택자(selector) : 스타일을 변경하고 싶은 HTML 요소를 선택 선택자 종류 34p
{ 속성: 값; }
CSS는 :, ; 콜론, 세미콜론 (예쁜 것들) HTML은 = " " 는 땡땡 (투박한 것들)
속성
:
값
;
주석
/* */ 을 사용한다.
2.2 선택자
타입 선택자(type selector)
HTML 요소 이름을 사용 ex) p { background-color : red ; }
전체 선택자(universal selector)
페이지 안의 모든 요소를 선택 * { ~ } ex) * { color : green ; }
아이디 선택자(id selector)
id는 많은 엘리먼트 중에 오직 하나만 선택하기위해 사용하는 요소 특정한 요소를 선택 <p id="target"> 을 사용하여 엘리먼트에 id를 부여한 뒤 특정한 id에 대해 #을 통해 선택할 수 있다
하나의 엘리먼트에 하나의 선택자를 만들 때
1 : 1
클래스 선택자(class selector)
여러 개의 엘리먼트에 같은 클래스 이름을 붙여도 됨 여러 개의 요소를 하나의 클래스로 묶어서 스타일을 지정하여 사용한다. 클래스가 부여된 요소를 선택 ex) .target { color: red; } 쩜 을 사용하여 클래스 선택자 사용
여러 개의 엘리먼트에 하나의 선택자를 만들 때
N : 1
속성 선택자(attribute selector)
그룹 선택자
선택자 그룹 이라고나와있는데 그룹 선택자라고 하네, 의미가 더 와닿기도 하고 각 선택자에 의하여 선택된 요소의 합을 의미한다 h1, h2, h3 { ~ ;} 이면 h1,h2,h3 모두 적용
자손, 자식 선택자 or 결합자
42p
자손 결합자
ul ul { border : 2px solid pink;} 이 코드의 의미 조상으로 정한 <ul> 밑에 후손(앞보다 하위 요소이면 됨)으로 있는 <ul> 태그를 지정하는 태그 사진 예시 어떤 태그의 모든 하위 태그에 적용하고 싶으면 자손 선택자를,
자식 결합자
어떤 태그의 자식 태그에만 적용하고 싶으면 자식 선택자를 선택하면된다.
의사 선택자(pseudo-class)
정의 : 클래스가 정의된 것처럼 간주 특징 : CSS 표준에 만들어진 선택자로 콜론(:)을 사용하여 표기한다, 동적으로 스타일을 적용할 수 있다. ex) a:hover { color:red"} 사용시 해당 링크에 마우스를 가져가면 글씨가 빨간색이 된다.
2.3 CSS 선언 방법
CSS 선언 방식
외부 스타일 시트
외부 스타일 시트는 스타일 시트를 외부에 파일로 저장하는 것 CSS를 외부 파일로 저장하는 것 많은 페이지에 동일한 스타일을 적용하려고 할 때 좋은 방법
내부 스타일 시트
내부 스타일 시트는 HTML 안에 CSS를 정의하는 것 CSS를 HTML 안에 정의하는 것 <style> 태그 사용. <head> 요소 안에 작성
인라인 스타일 시트
각각의 HTML 요소마다 스타일을 지정하는 것 2개 이상의 선언이 있다면 반드시 끝에 ; 을 적어 준다 ex) <h1 style="color:red">This is a headline</h1> ex) <h2 style="color:red; background-color:black; width:380px;">css 인라인 스타일 시트 선언 방법</h2>
외부, 내부, 인라인 스타일 우선순위
1. 인라인 > 2. 내부 > 3. 외부
2.4 CSS 속성
많이 사용되는 속성
50p 표가 있음 
색상을 표현
이름으로 표현
"red"
16진수로 표현
#FF0000 #FF6347 - 토마토 색
#
16진수 2개
16진수 2개
16진수 2개
R, G, B 값 각각 16진수 2개로 나타낸다
왜냐하면 (R, G, B) 는 숫자로 (0~255, 0~255, 0~255) 이고 각 256가지이다 그렇다면 2^8이 된다 16진수는 2^4 이므로 2^8을 16진수로 표현하기 위해서는 2^4 이 두 개 필요하다
RGB 값으로 표시하기
10진수로 표현
rgb(255,0,0)
퍼센트로 표현
rgb(100%, 0%, 0%)
폰트
동일한 스타일의 크기와 모양을 갖춘 한 벌 전체 font는 foundary(활자 주소소)의 'found(녹이다, 주조하다)' 에서 유래했습니다
나중에 쓸 때 공부하기
텍스트
다양한 텍스트 장식 기능을 제공 : 정렬, 색상, 장식, 변환등이 가능하다. 53p
text-align
left
center
right
리스트
54p
어렵네 나중에 쓸 때 공부하자
테이블
55p
얘는 이것저것 많네 나중에 쓸 때 공부하자
2.5 박스 모델
웹 브라우저는 HTML 요소들을 박스(사각형) 형태로 간주하고 그린다. 요소를 박스형태로 그리는 것
박스 모델 속성
각 박스는 마진 -margin 경계 - border 패딩 - padding 을 가진다  요소를 박스 형태로 그리는 것을 박스 모델이라 부름
박스 크기 설정
width
너비, 폭 가로
height
높이 세로
박스 모델 3 영역(파트)
margin
경계선 주위의 영역 투명함 60p
border
경계선을 의미
padding
패딩은 컨텐츠와 경계선 사이의 간격이다 투명하다
maring, padding 각 변 설정
OO-위치
ex) margin, padding 중 margin으로 예를 들어보겠음 각 변 설정 margin-top : 10px; margin-bottom : 30px; margin-right : 20px; margin-left : 40px; 경계선 바깥의 외부 여백(위쪽, 오른쪽, 아래쪽, 왼쪽) (= 시계방향) 크기를 한번에 지정 margin: 10px 20px 30px 40px;
정렬
수평정렬(인라인 요소를 수평정렬)
인라인 요소를 중앙정렬하려면 블록 수준의 컨테이너 안에서 중앙정렬한다.
수평정렬(블록 요소를 수평정렬)
<h1>, <h2>, <p>, <table>, <div>와 같은 블록 요소를 중앙 정렬하려면 왼쪽 마진 과 오른쪽 마진을 auto로 설정하면 된다. 블록 요소의 중앙정렬을 설정하고 width를 지정해야만 효과를 확인할 수 있다. ex) <p style="margin-left: auto; margin-right: auto; width: 50%"> My Text </p>
2.6 레이아웃
웹페이지에서 HTML 요소의 위치, 크기 등을 결정하는 것
모양
기본 요소 모양
사진 녹두색이 설명에 해당하는 그림 
블록 요소
인라인 요소
인라인 블록 박스
레이아웃 관련 속성 display
기본 요소 모양
display : 요소 모양
display:block : 블록(block) display:inline : 인라인(inline) display:inline-block : 인라인 블록 ( 블록 안에 있는 인라인 요소)
특이점
display:none
display:none : 없는 것으로 간주됨 (요소도 제거)
visibility:hidden
visibility:hidden : 화면에서 감춰짐 (요소는 존재)
위치 설정
요소 위치 설정 방식
요소의 위치 잡는 방식 4가지
absolute
상위 부모 엘리먼트를 기준으로 위치 지정
fixed
웹 브라우저 창을 기준으로 위치 지정
static (표준방식)
웹 문서에 나열된 엘리먼트 순으로 위치 지정(표준 방식)
relative
엘리먼트 자신의 원래 정적(static) 위치를 기준으로 상대적인 위치 지정
float 속성
보통 브라우저의 크기를 조정하면 요소의 위치가 변경되기 쉽다 float 된 요소는 항상 브라우저의 가장 왼쪽이나 오른쪽에 배치한다.
OO 요소 이용 레이아웃
div 요소 이용 레이아웃
태그는 논리적 섹션을 의미하지만 자체적으로는 아무 의미가 없다
시멘틱 요소 이용 레이아웃
문서의 구조와 의미만을 표현하며 위치, 모양은 CSS를 통해 별도로 정의한다 그러니까 그냥 "시멘틱 요소는 기본 디폴트 모드니까 알아서 꾸며라" 이거지 맞나요?
3장 Javascript
Chapter 02. 스크립트 태그 : 시작 페이지 만들기
2.1 JSP 개요
JSP(Java Server Page)와 서블릿(Servlet)
JSP(Java Server Page)
그니까 즉, 언어임 언어
정의
HTML 내에 자바 코드를 삽입하여 동적 페이지를 생성하는 스크립트 언어
JSP 특징
JSP는 HTML문서 사이에 JSP 문법 코드가 삽입되는 형태로 작성 JSP 페이지에 있는 HTML코드는 웹 브라우저로 그대로 전송되지만 JSP 문법의 코드는 실행되고 그 결과인 HTML코드만 웹 브라우저로 전송
웹 브라우저로 HTML코드만 전송
HTML코드만 웹 브라우저에 전송하고 JSP 문법 코드는 실행되고 그 결과인 HTML만 웹 브라우저에 전송됨
JSP 또는 다른 서블릿 간에 데이터를 쉽게 공유할 수 있다
자바의 모든 기능과 빈즈(Beans)라는 자바 컴포넌트(자바 객체)를 사용할 수 있다.
JSP내 자바 코드 사용으로 인한 구조적 복잡, 반복적 사용으로 인한 일부 비효율성 으로 JSTL(JSP Standard Tag Library) 및 EL(Expression Language)이 도입됨
JSP 태그 종류
모두 <% ... %> 를 사용
디렉티브(Directive) 태그
JSP 페이지에 대한 정보를 컨테이너에 제공 형식 : <%@ ~ > 사용 include 혹은 page 사용 ex) <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
스크립트(Script) 태그
자바 코드를 넣어 프로그램이 수행하는 기능을 구현
선언문(declaration)
스크립틀릿(scriptlet)
표현문(expression)
액션(Action) 태그
XML 형태의 태그로 JSP 페이지 간 제어 서버나 클라이언트에게 어떤 행등을 하도록 명령하는 태그 XML 형식 <jsp: .../> 사용
서블릿(Servlet)
서블릿 이해에 도움을 주신 분들
서블릿에 대한 이해 - 블로그 1
정의 2 설명 단계 1
클라이언트의 요청을 처리하고, 그 결과를 반환하는 Servlet 클래스의 구현 규칙을 지킨 자바 웹 프로그래밍 기술 간단히 말해, 자바를 사용하여 웹을 만들기 위해 필요한 기술 좀 더 자세히 말해, 클라이언트가 어떠한 요청을 하면 그에 대한 결과를 다시 전송해주어야 하는데, 이러한 역할을 하는 자바 프로그램 ex) 어떠한 사용자가 로그인을 하려고 할 때. 사용자는 아이디와 비밀번호를 입력하고, 로그인 버튼을 누릅니다. 그때 서버는 클라이언트의 아이디와 비밀번호를 확인하고, 다음 페이지를 띄워주어야 하는데, 이러한 역할을 수행하는 것이 바로 서블릿(Servlet)입니다. 클라이언트가 아이디 비번을 입력하면 그 결과를 전송해주는 역할의 자바 프로그램
CGI?
CGI(Common Gateway Interface) 별도로 만들어 놓은 프로그램에 HTML의 Get or Post 방법으로 클라이언트의 데이터를 환경변수로 전달하고, 프로그램의 표준 출력 결과를 클라이언트에게 전송
정의를 추상적 -> 구체적으로 생각해보기
자바를 통해 웹을 만들기 위한 프로그래밍 기술
클라이언트가 로그인했을 때 그에 대한 결과를 전송해주는 역할의 자바 프로그램
동작방식
1. 사용자(클라이언트)가 URL을 입력하면 HTTP Request가 Servlet Container로 전송합니다. 2. 요청을 전송받은 Servlet Container는 HttpServletRequest, HttpServletResponse 객체를 생성합니다. 3. web.xml을 기반으로 사용자가 요청한 URL이 어느 서블릿에 대한 요청인지 찾습니다. 4. 해당 서블릿에서 service메소드를 호출한 후 클리아언트의 GET, POST여부에 따라 doGet() 또는 doPost()를 호출합니다. 5. doGet() or doPost() 메소드는 동적 페이지를 생성한 후 HttpServletResponse객체에 응답을 보냅니다. 6. 응답이 끝나면 HttpServletRequest, HttpServletResponse 두 객체를 소멸시킵니다. 
그럼 서블릿 컨테이너는?
정의
서블릿을 관리해주는 컨테이너 서블릿이 어떠한 역할을 수행하는 정의서라고 보면, 서블릿 컨테이너는 그 정의서를 보고 수행한다고 볼 수 있다 ex) 대장간에서 칼을 만드는 기술, 대장장이 기술 등을 사용한다고 할 수 있듯이 서블릿은 자바를 사용하여 웹을 만드는 기술이라고 할 수 있고 서블릿 컨테이너는 서블릿 기술을 사용한다, 수행한다고 볼 수 있습니다
예시
톰캣
서블릿 컨테이너는 클라이언트의 요청(Request)을 받아주고 응답(Response)할 수 있게, 웹서버와 소켓으로 통신하며 대표적인 예로 톰캣(Tomcat)이 있습니다. 톰캣은 실제로 웹 서버와 통신하여 JSP(자바 서버 페이지)와 Servlet이 작동하는 환경을 제공해줍니다.
역할
1. 웹서버와의 통신 지원
서블릿 컨테이너는 서블릿과 웹서버가 손쉽게 통신할 수 있게 해줍니다. 일반적으로 우리는 소켓을 만들고 listen, accept 등을 해야하지만 서블릿 컨테이너는 이러한 기능을 API로 제공하여 복잡한 과정을 생략할 수 있게 해줍니다.그래서 개발자가 서블릿에 구현해야 할 비지니스 로직에 대해서만 초점을 두게끔 도와줍니다. 출처: https://mangkyu.tistory.com/14 [MangKyu's Diary:티스토리]
2. 서블릿 생명주기(Life Cycle) 관리
서블릿 컨테이너는 서블릿의 탄생과 죽음을 관리합니다. 서블릿 클래스를 로딩하여 인스턴스화하고, 초기화 메소드를 호출하고, 요청이 들어오면 적절한 서블릿 메소드를 호출합니다. 또한 서블릿이 생명을 다 한 순간에는 적절하게 Garbage Collection(가비지 컬렉션)을 진행하여 편의를 제공합니다. 즉, 서블릿을 객체로 만들어주고, 다 쓴 객체에 알아서 가비지 컬렉션을 진행한다
사진

과정
1. 클라이언트의 요청이 들어오면 컨테이너는 해당 서블릿이 메모리에 있는지 확인하고, 없을 경우 init()메소드를 호출하여 적재합니다. init()메소드는 처음 한번만 실행되기 때문에, 서블릿의 쓰레드에서 공통적으로 사용해야하는 것이 있다면 오버라이딩하여 구현하면 됩니다. 실행 중 서블릿이 변경될 경우, 기존 서블릿을 파괴하고 init()을 통해 새로운 내용을 다시 메모리에 적재합니다. 2. init()이 호출된 후 클라이언트의 요청에 따라서 service()메소드를 통해 요청에 대한 응답이 doGet()가 doPost()로 분기됩니다. 이때 서블릿 컨테이너가 클라이언트의 요청이 오면 가장 먼저 처리하는 과정으로 생성된 HttpServletRequest, HttpServletResponse에 의해 request와 response객체가 제공됩니다. 3. 컨테이너가 서블릿에 종료 요청을 하면 destroy()메소드가 호출되는데 마찬가지로 한번만 실행되며, 종료시에 처리해야하는 작업들은 destroy()메소드를 오버라이딩하여 구현하면 됩니다.
3. 멀티쓰레드 지원 및 관리
서블릿 컨테이너는 요청이 올 때 마다 새로운 자바 쓰레드를 하나 생성하는데, HTTP 서비스 메소드를실행하고 나면, 쓰레드는 자동으로 죽게됩니다. 원래는 쓰레드를 관리해야 하지만 서버가 다중 쓰레드를생성 및 운영해주니 쓰레드의 안정성에 대해서 걱정하지 않아도 됩니다. 요청이 올 때마다 새로운 자바 쓰레드를 생성하고 자동으로 죽게 된다.
4. 선언적인 보안 관리
서블릿 컨테이너를 사용하면 개발자는 보안에 관련된 내용을 서블릿 또는 자바 클래스에 구현해 놓지 않아도 됩니다.일반적으로 보안관리는 XML 배포 서술자에 다가 기록하므로, 보안에 대해 수정할 일이 생겨도 자바 소스 코드를 수정하여 다시 컴파일 하지 않아도 보안관리가 가능합니다. 이건 이해가 어렵다
그럼 JSP는?
정의
Java 코드가 들어가 있는 HTML 코드
특징
1. 자바 소스코드로 작성된 부분은 웹 브라우저로 보내는 것이 아닌 웹 서버에서 실행되는 부분
2. 웹 프로그래머가 소스코드를 수정 할 경우에도 디자인 부분을 제외하고 자바 소스코드만 수정하면 되기에 효율을 높여줍니다.
3. 또한 컴파일과 같은 과정을 할 필요없이 JSP페이지를 작성하여웹 서버의 디렉토리에 추가만 하면 사용이 가능합니다
4. 서블릿 규칙은 꽤나 복집하기 때문에 JSP가 나오게 되었는데 JSP는 WAS(Web Application Server)에 의하여 서블릿 클래스로 변환하여 사용되어 집니다.
JSP 동작 구조
 웹 서버가 사용자로부터 서블릿에 대한 요청을 받으면 서블릿컨테이너에 그 요청을 넘깁니다. 요청을 받은 컨테이너는 HTTP Request와 HTTP Response 객체를 만들어, 이들을 통해 서블릿 doPost()나 doGet()메소드 중 하나를 호출합니다. 만약 서블릿만 사용하여 사용자가 요청한 웹 페이지를 보여주려면 out 객체의 println 메소드를 사용하여 HTML 문서를 작성해야 하는데 이는 추가/수정을 어렵게 하고, 가독성도 떨어지기 때문에 JSP를 사용하여 비지니스 로직과 프레젠테이션 로직을 분리합니다. 여기서 서블릿은 데이터의 입력, 수정 등에 대한 제어를 JSP에게 넘겨서 프레젠테이션 로직을 수행한 후 컨테이너에게 Response를 전달합니다. 이렇게 만들어진 결과물은 사용자가 해당 페이지를 요청하면 컴파일이 되어 자바파일을 통해 .class 파일이 만들어지고, 두 로직이 결합되어 클래스화 되는것을 확인할 수 있다. 즉, out객체의 println 메소드를 사용해서 구현해야하는 번거로움을 JSP가 대신 수행해줍니다 이해가 잘 안가네요...ㅎㅎ
Servlet과 JSP에 대한 이해 - 블로그 2
서블릿 설명 단계 4
(servlet)서블릿은 서버에서 웹페이지 등을 동적으로 생성하거나 데이터 처리를 수행하기 위해 자바로 작성된 프로그램이다. 서블릿은 java코드 안에 HTML태그가 삽입되며 자바언어로 되어있다 .java가 확장자이다 의미를 쉽게 다시 풀어보면 "클라이언트의 요청을 처리하고 그 결과를 다시 클라이언트에게 전송하는 서블릿 클래스의 구현 규칙을 지킨 자바 프로그램" 이라고 이해하면 좋다 그럼 그 서블릿 클래스 구현 규칙이 뭘까? 바로 여기 나와있습니다 서블릿은 자바언어로 웹 어플리케이션을 개발하기 쉽게 하기 위해 만든 API(라이브러리, 클래스 들)이며 이 규약에 맞는 라이브러리나 클래스들을 상속 및 구현하여 만든 클래스들을 서블릿이라고 한다 아 그럼 이렇게 이해할 수 있겠네! 클라이언트가 요청한 4+5 의 정답 요청을 처리하고 -> 4+5 =9 의 로직을 처리하고 다시 클라이언트에게 그 결과(9)를 전송하는 클래스(객체)구나! 그럼 그 객체, 그 클래스가 어떻게 동작하는지 어떻게 생겼는 코드로 본다면 더 자세히 이해할 수 있겠지?
JSP
HTML을 코딩하기 너무 어렵고 불편해서 HTML 내부에 Java 코드를 삽입하는 형식이 JSP이다 다시 말해 서블릿의 단점을 보완하고자 만든 서블릿 기반의 스크립트 기술 서블릿을 이용하게 되면 웹프로그래밍을 할 수 있지만 1. 자바에 대한 지식이 필요 2. 화면 인터페이스 구현에 너무 많은 코드를 필요로 하는 등 비효율적인 측면들이 있다 때문에 서블릿을 작성하지 않고도 간편하게 웹프로그래밍을 구현하게 만든 기술이 JSP(Java Server Pages)이다 조금 더 알아보자면 JSP는 서블릿 기반의 서버 스크립트 기술 서버 스크립트 기술이란 ASP, PHP처럼 미리 약속된 규정에 따라 간단한 키워드를 조합하여 입력하면 실행 시점에 각각의 키워드에 매칭되어있는 어떤 코드로 변환후에 실행되는 형태
서블릿과 JSP의 역할
초기에 웹 개발은 서블릿을 이용한 개발이였다. 이후 JSP 기술이 발표되면서 JSP 형태의 개발이 유행하게 되고 지금에 와서 각각의 역할을 나누어 서블릿 + JSP 형태의 개발이 이루어지고 있다 JSP는 JSP기술의 장점을 최대한 활용 할 수 있는 웹 어플리케이션 구조에서 사용자에게 결과를 보여주는 프레젠테이션 층을 담당 서블릿은 서블릿 기술의 장점을 최대한 활용할 수 있는 사요자의 요청을 받아 분석하고 비즈니스 층과 통신하여 처리하고 처리 결과를 다시 사용자에게 응답하는 컨트롤러 층을 담당 
MVC 패턴의 JSP와 Servlet
얼마전까지만 하더라도 JSP만 이용한 개발이 유행하다 현재는 유지보수단계에서 많은 단점을 느껴 각각의 역할을 나누어 서블릿과 JSP를 동시에 사용하여 개발하는 방식으로 개발 JSP는 HTML태그 사용이 용이 / 자바코드 사용이 불편 -> 사용자에게 결과를 보여주는 View(Client)를 담당 서블릿은 자바코드 작성이 편리 -> 주로 화면과 통신하여 자료를 받아 가공하고 가공한 자료를 다시 화면에 전달하는 Controller 역할을 하고 있다
Servlet과 JSP에 대한 이해 - 블로그 3
서블릿이란? 설명 단계 3
웹 어플리케이션(웹 애플리케이션(web application) 또는 웹 앱은 소프트웨어 공학적 관점에서 인터넷이나 인트라넷을 통해 웹 브라우저에서 이용할 수 있는 응용 소프트웨어)을 구현하기 위해 작성해야하는 코드 -> 서블릿 클래스 그러니까 화면에 나와있는 웹 페이지 뒷편에 응용 소프트웨어가 돌고있다고 생각해봐 - 서블릿 클래스는 클래스 상태 그대로 실행되는 것이 아니라 일단 서블릿으로 만들어진 다음 실행됨 - 서블릿은 서블릿 클래스로부터 만들어진 객체 따라서 웹 컨테이너는 서블릿 클래스를 가지고 서블릿 객체를 만든 다음에 그 객체를 초기화해서 웹 서비스를 할 수 있는 상태로 만드는데, 이런 작업을 거친 서블릿 객체만을 서블릿이라 한다 서블릿클래스가 서블릿이 되기 위해 여러 작업을 해야하는데 그러한 작업은 웹 컨테이너에 의해 수행되기 때문에 우리는 정해진 규칙에 따라 서블릿 클래스를 작성하고, 컴파일하고 웹 컨테이너에 설치하고 ,등록하면 된다
CGI 설명 단계 2
CGI(Common Gateway Interface) 는 서버 측에서 수행되는 외부 프로그램간의 통신 규약으로서 정적인 HTML만으로는 실시간 급변하는 정보를 제공할 수 없기 때문에 동적으로 HTML문서를 생성해낼 수 있는 기술로 등장했다. -이런 프로그램은 C, C++, Perl 등 다양한 프로그래밍 언어로 작성할 수 있는데 이런 프로그램을 통틀어 CGI프로그램이라고 한다 -CGI를 사용하면 웹서버는 프로그램을 실행시키고 사용자의 데이터(사용자 정보, html form에서 입력한 정보)를 외부 프로그램에 전달한다 -외부 프로그램은 사용자의 데이터를 처리하고 응답을 웹서버에 전달한다 웹서버는 외부 프로그램으로부터 받은 응답을 다시 클라이언트(브라우저)에게 전달한다 - 위와 같은 동작 원리로 Java 언어를 사용하여 작성한 CGI 프로그램을 "서블릿"이라고 한다
CGI와 서블릿의 차이
1. 서블릿은 클라이언트의 요청이 있을 때마다 프로세스가 아닌 스레드를 생성
1. 일반 CGI는 클라이언트 요청이 있을 때마다 프로세스를 생성하여 CGI 프로그램을 수행함으로써 서버 측에 작업 부하를 가져오지만, 서블릿은 스레드를 생성 스레드 생성은 프로세스 생성에 비해 작업 부하 적고 속도도 빠르다
2. 메모리 사용이 적음
3. 표준 API를 제공하며 (프로젝트 진행시 표준 API이므로 원활히 진행 가능)
4. 서블릿 보안 모델 사용 가능
5. 분산객체기술을 활용할 수 있다는 장점을 가짐
서블릿 클래스 만들기 설명 5 단계
치기 어려워서 사진으로 대체 
제목 만들기
설명 6 단계 - 이클립스 소스코드 보기
1. HelloWorldServlet
2. CalcServlet
.java 파일과 .class 파일 개념
.java
소스 코드 파일
.class
바이트 코드 파일
바이트 코드
VM 이 이해할 수 있는 언어
바이너리 코드
CPU가 이해할 수 있는 언어
서블릿 이해 키워드
클라이언트 요청 받아 결과 전송 하는 프로그램
자바언어로 쓰임
서블릿은 서블릿클래스(파일)를 통해 만든 객체구나
규약(라이브러리, 클래스를 상속 및 구현)을 지킨 객체. 그래야 서블릿컨테이너가 객체로 만들어주니까
그 만들어진 객체에 대한 자세한 소스코드들은 저 3번째 블로그에 나와있고
그걸 다른 예시로 구현해본 파일의 이름 이 두개다 이클립스 켜면 나옴
1. HelloWorldServlet
2. CalcServlet
2.2 JSP 스크립트 태그
정의 or 특징
1. 자바 코드를 넣어 프로그램이 수행하는 기능을 구현 2. JSP 페이지를 서블릿 클래스로 변환할 때 컨테이너 (톰캣)는 자바 코드가 삽입되어 있는 스크립트 태그를 처리하고 나머지는 HTML 코드나 일반 텍스트로 간주 3. 모두 <% ~ %> 를 사용한다.
스크립트 태그 종류
모두 <% ~ %> 를 기반으로 사용한다.
선언문(declaration)
형식 : <%! … %> 설명 : 자바 변수나 메소드 정의 스크립틀릿 태그보다 나중에 선언해도 스크립틀릿 태그에서 사용 가능
스크립틀릿(scriptlet)
형식 : <% … %> 설명 : 자바 로직 코드를 작성
표현문(expression)
형식 : <%=… %> 설명 : 변수, 계산식, 메소드 호출 결과를 문자열 형태로 출력
주석 처리 태그
형식 : <%-- 주석 내용입니다. --%> 설명 : 주석
선언문과 스크립틀릿 태그 비교

2.3 JSP 처리 과정의 이해
이건 흐름이라
2.4 JSP 프로그램 유형
유형 1 - 빈즈 클래스를 사용하지 않고 스크립트릿만을 사용하는 방법
예시
유형 2 - 빈즈 클래스와 <jsp:useBean> 액션 태그를 사용하는 방법
예시
자바빈이란?
자바빈즈
의미
JSP에서 객체를 가져오기 위한 기법 데이터 전달 오브젝트 파일 DTO(Data Transfer Object)
특징
자바로 작성된 컴포넌트들 즉, 클래스(Class)를 일반적으로 말한다. JSP 프로그래밍에는 DTO(Data Transfer Object)나 DAO(Data Access Object)클래스의 객체를 JSP페이지에서 사용하기 위해 사용한다. Beans 에서 변수를 가져오거나 세팅할 때 사용하는 property는 재산의 의미가 아닌 필드(데이터 멤버)와 메소드 간 기능의 중간인 클래스 멤버의 특수한 유형이다. 프로퍼티의 읽기와 쓰기는 일반적으로 게터(getter)와 세터(setter) 메소드 호출로 변환된다. - https://ko.wikipedia.org/wiki/%ED%94%84%EB%A1%9C%ED%8D%BC%ED%8B%B0_(%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D)
사용 목적
JSP 페이지가 화면 표현 부분과 로직들이 같이 존재하여 복잡한 구성을 가급적 피하고, JSP 페이지의 로직 부분을 분리해서 코드를 재사용함으로써 프로그램의 효율을 높이기 위해 사용한다 즉, JSP 페이지의 로직 부분을 분리해서 복잡한 구성을 피하고 코드를 재사용함으로써 프로그램의 효율을 높이기 위해 사용 복잡한 구성 피하기, 코드 재사용
사용 방법
<jsp:useBean/> 태그
자바빈 객체를 생성하기 위한 태그. 태그의 속성은 아래와 같다 <jsp:useBean id="빈 이름" class="자바빈 클래스 명" scope="사용범위"/> id : 생성할 객체(인스턴스)의 이름을 정의 ( 생략 불가 ) class : 객체를 생성할 클래스명을 정의 (패키지명.클래스명으로 설정) scope : 자바빈 객체가 공유되는 범위를 지정 (scope 생략시 기본값은 page)
<jsp:setProperty/> 태그
자바빈 클래스의 속성 값을 설정하기 위한 태그. 속성은 아래와 같다. <jsp:setProperty name="빈 이름" property="속성명" value="설정한 값/> <jsp:setProperty name="빈 이름" property="속성명" param="파라미터명"/> name : useBean을 이용해 생성한 객체 이름을 명시 property : 값을 저장할 property 이름을 명시 value : 저장할 값을 정의
<jsp:getProperty/> 태그
자바빈 클래스의 속성값을 가져오기 위한 태그. 속성은 아래와 같다. <jsp:getProperty name="빈 이름" property="속성명"/> name : 값을 가져올 빈의 id property : 가져올 속성의 이름
자바빈 설계 규약
설계 규약을 따라야 한다. 설계 규약과 맞지 않는 경우 자바빈의 특성을 갖지 않는 클래스가 되어버린다. - 멤버변수마다 별도의 getter, setter 메서드가 존재해야한다. - get 메소드는 매개변수가 존재하지 않아야한다. - set 메소드는 반드시 하나 이상의 매개변수가 존재해야 한다. ( 당연하지 왜냐면 변수를 받아서 세팅해야하니까) - 생성자는 매개변수가 존재하지 않아야한다. - 멤버변수의 접근제어자는 private이고 각 getter, setter 메서드의 접근제어자는 public, 클래스의 접근제어자는 public 으로 정의한다.
3장 서블릿 구조
3.1 서블릿 개요
정의
자바를 기반으로 하는 웹 애플리케이션 기술
장점
자바를 기반으로 자바 API를 모두 사용할 수 있다.
운영체제나 하드웨어에 영향을 받지 않으므로, 한 번 개발된 애플리케이션은 다양한 서버 환경에서도 실행할 수 있다.
질문 - 이것도 자바를 써서의 이득? 즉 자바언어의 장점?
웹 애플리케이션에서 효율적인 자료 공유 방법을 제공한다.
다양한 오픈소스 라이브러리와 개발도구를 활용할 수 있다.
웹 앱 개발에 서블릿 사용 시 이점
MVC 패턴을 쉽게 적용할 수 있고 컨테이너와 밀접한 프로그램을 구현할 수 있다.
MVC 패턴을 적용할 때 콘텐츠와 비즈니스 로직을 분리할 수 있으며 컨트롤러와 뷰 가 역할을 분담함으로써, 웹 디자이너와 개발자 간에 작업을 원활하게 할 수 있다.
리스너 및 필터 서블릿 등 고급 프로그래밍 기법을 통해 더욱 효과적인 웹 애플리케이션을 설계할 수 있다.
MVC 패턴
어떻게 뷰와 비즈니스로직을 나눌까를 해결한 구조가 MVC 패턴
모델
뭔가를 만들어주는 뷰에 필요한 비즈니스 영역의 로직을 처리
뷰(View)
비즈니스 영역에 대한 프레젠테이션 뷰(결과 화면)를 담당
컨트롤러(Controller)
비즈니스 영역에 대한 프레젠테이션 뷰(결과 화면)를 담당
서블릿 컨테이너
서블릿 컨테이너란 : 서블릿이 실행되는 환경을 제공하는 서 소프트웨어
정의
서블릿 실행 환경을 제공하는 서버 소프트웨어
특징
JSP나 서블릿으로 만들어진 웹 프로그램을 개발하고 실행하기 위한 환경임
웹서버와 서블릿 컨테이너의 차이점
 웹 서버는 매번 디스크를 읽어 처리했구나
서블릿 개발과 실행 과정
개발과 실행 과정
1. 개발자가 소스코드 작성 후 컴파일 과정을 거쳐 컨테이너에 배치(deploy)하게 되면 컨테이너에 의해 실행되어 관리된다 2. 브라우저 요청에 따라 쓰레드 단위로 실행 3. 데이터베이스 연동 등 필요한 작업을 수행하고 처리 결과를 브라우저에게 HTML 형식으로 전달하는 구조 
서블릿 동작과정
서블릿 컨테이너가 서블릿의 생명주기를 관리한다
생명주기
서블릿이 컨테이너에 의해 실행, 서비스, 종료되는 일련의 과정
그래서 서블릿 개발은 무엇이냐!?
서블릿 개발은 해당 생명주기 메서드를 오버라이딩하거나 doGet(), doPost()와 같 은 사용자 요청 처리 메서드를 구현하는 것임. 
3.2 서블릿 구조와 생명주기
서블릿 구조
서블릿 파일의 구조가 어떻게 되어있냐 라는 의미인 듯
서블릿은 일반적인 자바 클래스 구조를 가짐
이는 서블릿이 자바 소스 구조(?) 라는 의미로 컴파일 과정이 필요함을 의미
특정 클래스를 상속 받아야만 구현할 수 있는 구조
bc 서블릿은 컨테이너에 의해 실행되므로
따라서 서블릿 프로그램을 하려면 서블릿 클래스의 상관 관계나 API의 기본 구조를 이해해야 한다.
서블릿 API
서블릿 API는 서블릿과 서블릿 컨테이너 사이의 인터페이스를 정의
일반적으로 서블릿은 javax.servlet.http.HttpServlet 클래스를 상속해서 구현
javax.servlet.http.HttpServlet 동작 구조
데이터 전달 방법
GET 방식
서버에 있는 정보를 가져오기 위해 설계된 데이터 전달방법
특징
서버에는 최대 240Byte까지 데이터를 전달할 수 있다
QUERY_STRING 환경변수를 통해서 서버로 전달되는데, 다음 형식을 따른다.
?
? 이후의 값들은 서버에서 QUERY_STRING을 통해 전달된다.
‘ 속성=값 ’ 형태로 사용
ex) num1=45&num2=5 그래서 url을 만들어보면 ~~~?num1=45&num2=5&operator=*
&
& 는 여러 속성 값을 전달할 때 연결해주는 문자열
URL이 노출되기 때문에 보안에 문제가 생길 수 있다
POST 방식
서버로 정보를 올리기 위해 설계된 방법
특징
서버에 전달 할 수 있는 데이터 크기에는 제한이 없다.
HTML 폼에 입력한 내용을 서버에 전달하기 위한 요청이며 정보를 메시지 바디(body)에 포함시켜 전달한다.
URL에는 매개변수가 표시되지 않는다 -> GET 방식보다 보안 우수
생명주기
서블릿 초기화 : init() 메서드
서블릿 실행시 호출되는 메서드로 초기에 한 번만 실행된다
초기에 한 번만 실행
공통적인 필요 작업 등 수행
요청/응답 : service() 메서드
사용자 요청에 따라 스레드로 실행되는 메서드
service() 메서드를 통해 doGet() 혹은 doPost() 메서드가 호출된다.
파라미터인 HttpServletRequest 와 HttpServletResponse 를 통해 요청을 처리한다.
서블릿 종료 : destroy() 메서드
컨테이너로부터 서블릿 종료 요청이 있을 때 호출되는 메서드
init()와 마찬가지로 한 번만 실행되며
서블릿이 종료되면서 정리할 작업이 있다면 destroy() 를 오버라이딩해서 구현함
3.3 서블릿 예제
서블릿 클래스 선언
@WebServlet : 컨테이너에 서블릿임을 알리는 어노테이션(anotation)
description = "HelloWorld 간단한 서블릿" : 설명을 의미
urlPatterns={“/HelloWorldServlet”} : 서블릿 실행을 위한 요청 URL
javax.servlet.http.HttpServlet 클래스를 상속해서 필요한 라이프사이클 메서드를 구현
HttpServlet 클래스의 개요
doGet 메서드와 doPost 메서드
HttpServletRequest와 HttpServletResponse 매개변수는 서블릿과 클라이언트 사이 를 연결해주는 중요한 객체들로, HttpServlet 클래스의 특징이 된다
HttpServletRequest 클래스의 주요 메소드
GetParameter(name)
getCookies()
setCharacterEncoding()
HttpServletResponse 클래스의 주요 메소드
setContentType(type)
setHeader(name, value)
sendRedirect(url)
MVC 패턴 적용 실습
Model
Calc.java
View
calculate.html
result.jsp
Controller
CalcController.java
수업 중 배운 거
request 객체
특수문자 URL 인코딩 자료
변수값 저장 : request.setAttribute(~)
4장 JSP 디렉티브와 액션 태그
디렉티브 태그
JSP 페이지에 대한 정보를 컨테이너에 제공
4.1 지시어 개요 디렉티브 태그
 JSP 파일의 속성을 기술하는 JSP 문법 JSP 페이지에 대한 정보를 컨테이너에 제공
디렉티브 태그 종류
page
jsp 페이지에 대한 정보를 설정
include
jsp 페이지의 특정 영역에 다른 문서를 포함 합쳐서 하나의 jsp 파일을 만들 때 사용
taglib
jsp 페이지에서 사용할 태그 라이브러리 설정
4.2 page 지시어
jsp 페이지에 대한 정보를 설정
page 지시어 속성

pageEncoding 속성
컨테이너 자체에서 JSP 파일 자체 문자 인코딩 방식 즉, 내 페이지를 컨테이너가 돌릴 때 문자 인코딩 방식
다시 한번 보기 정확한 의미
contentType 속성
클라이언트에서 처리하기 위한 콘텐츠 유형을 지정하는 부분.
charset 속성
브라우저가 받을 HTTP 응답 페이지의 문자 인코딩 방식을 설정 즉 줄때 문자 인코딩 방식 charset=UTF-8"
contentType 속성
클라이언트에서 처리하기 위한 콘텐츠 유형을 지정하는 부분. 바로 안열고 다운 시키면 지정된 이름의 어플리케이션이 없다고 인식된 거임 ex) text/html; - text/html 이 아니라 application/msword 로 지정할 경우 브라우저는 서버가 전달하 는 콘텐츠를 ms word 문서로 인식해 처리할 것은 사용자에게 요청함
import 속성
JSP에서 사용할 자바 클래스 또는 패키지를 설정하는 데 사용
자동으로 import 하는 패키지
errorPage, isErrorPage 속성
errorPage
현재 페이지에 오류 발생시 호출할 페이지를 지정하는 속성
isErrorPage
"나는 에러 페이지입니다" 를 알려주는 page 지시어 속성
의미만 알면 되는 속성
session 속성
세션은 웹 브라우저와 웹 서버가 지속적인 클라이언트 인식을 위해 필요한 정보를 임시로 저장해두는 방법 기본 값 true 이므로 제제할 게 아니라면 별도 설정 안해도 됨 ex) 장바구니, 로그인 유지
buffer 속성
결과 html 들을 buffer에 채워서 보내준다 그 버퍼 크기를 조절하는 속성
autoFlush 속성
autoFlush는 버퍼를 자동으로 비울 것인지를 지정하는 속성으로 기본 값은 true다
isThreadSafe 속성
JSP 페이지에서 멀티스레드의 동작을 제어하는 데 사용 기본값 true
info 속성
pageEncoding 속성
extends 속성
안알아도 됨
isELIgnored 속성
JSP 페이지의 표현 언어(expression language) 사용 여부를 설정. JSPL 등이 ㅣㅆ다 $로 시작하는 언어임
isScriptingEnabled 속성
스크립트 태그(선언문, 스크립트릿, 표현식) 사용 여부를 설정
4.3 include 지시어
jsp 페이지의 특정 영역에 다른 문서를 포함 합쳐서 하나의 jsp 파일을 만들 때 사용 정적으로 합친 코드를 사용하는 거고 액션태그에서 사용하는 include 는 동적으로 합친 코드를 사용 나중에 두 include 를 비교한다
사진 덧붙이기
 이런 포털 사이트처럼 여러 정보의 조합으로 한 화면을 구성할 때 유용하게 사용됨 기능 혹은 화면을 모듈화할 수 있어 화면 구성이나 재활용이 가능하다
나중에 액션태그의 include 랑 비교할 수 있어야함
4.4 taglib 지시어
jsp 페이지에서 사용할 태그 라이브러리 설정
질문 : 왜 page 속성에 import 로 사용하지 않나요?
답변 : 성격이 다르기 때문에 page 지시어의 import로 사용하지 않는다 page 지시어의 속성으로 넣어주지 않고 taglib라는 지시어를 따로 만들었다 왜냐면 page 속성값은 해당 페이지에 대한 속성을 붙이는 것이기 때문 근데 내가 생각한 이유 jsp 가 만들어지고 그 이후에 JSP의 단점을 보완하고자 JSTL이 만들어졌기 때문에 jsp페이지의 정보를 서블릿 프로그램에 넘겨줄 때 page import가 아닌 taglib 태그로 따로 만들어 추가하는 듯 기존에 있던 것에다가 낑겨서 추가하기 어려우니
커스터마이징한 태그 를 사용하기 위한 지시어
그 예시가 JSTL
액션 태그
XML 형태의 태그로 JSP 페이지 간 제어 서버나 클라이언트에게 어떤 행등을 하도록 명령하는 태그 XML 형식 <jsp: .../> 사용
4.5 액션 태그 개요

무조건 생성하는 것이 아니고 없으면 생성하고 있으면 만들어진 참조 변수를 사용
액션태그
자바 빈즈 연동 및 동적 페이지 관리를 위한 기능을 제공
주요 기능

jsp 페이지 간 흐름 제어
include
forward
param
자바 빈즈 컴포넌트 상호작용
useBean
setProperty
getProperty
자바 애플릿 지원
Plugin
액션태그 종류
4.6 include 액션태그
외부 페이지의 내용을 포함하고나 페이지를 모듈화합니다
이 두개는 정적 라이브러리, 동적 라이브러리 개념을 알아야 더 정확하게 이해할 수 있을 듯
include 액션태그는 여러개의 서블릿을 만들어 사용
실행 시점에서 해당 파일을 호출하여 그 결과를 포함
include 지시어는 하나의 서블릿을
해당 파일을 포함시킨 후 컴파일
param 태그를 통해 전달
서블릿 코드를 살펴보면 어떻게 전달되는지 더 정확하게 알 수 있음
4.7 forward 액션태그
다른 페이지로의 이동과 같은 페이지 흐름 제어
forward 사용한 서블릿의 자바 코드를 보면
forward로 해당 footer.jsp 페이지에 데이터를 전송하고 그 파일의 출력이 끝나면 그냥 return으로 forward_action.jsp 페이지도 끝내버림
그럼 이 경우에 footer_action 서블릿을 만들다 말고 footer 서블릿만 만들어서 웹 브라우저에 전송하는 건가요?
4.8 param 액션태그
<jsp:forward>나 <jsp:include> 태그에 인자(argument)를 추가한다
의미
현재 JSP 페이지에서 다른 페이지에 정보를 전달하는 태그
특징
단독으로 사용되지 못하며 <jsp:forward>나 <jsp:include> 태그의 내부에 사용
다른 페이지에 여러 개의 정보를 전송해야 할 때는 다중의 param 액션 태그를 사용
4.9 자바 빈즈 액션태그
jsp 페이지에 자바빈즈를 설정합니다
이 설명은 꼭 듣기 저번에 설명을 안해주심
여기서부터 할 차례
JSP와 연동하기 위해 만들어진 컴포넌트 클래스
Chapter 03. 디렉티브 태그 : 한글 출력 및 페이지 모듈화하기
상품표시
Chapter 04. 액션 태그 : 상품 목록 표시하기
Chapter 05. 내장 객체 : 상품 상세 정보 표시하기
Chapter 07. 파일 업로드 : 상품 이미지 등록하기
상품 등록
Chapter 06. 폼 태그 : 상품 등록 페이지 만들기
Chapter 09. 다국어 처리 : 상품 등록 페이지의 다국어 처리하기
보안
Chapter 08. 유효성 검사 : 상품 등록 데이터의 유효성 검사하기
Chapter 10. 시큐리티 : 상품 등록 페이지의 보안 처리하기
Chapter 11. 예외 처리 : 예외 처리 페이지 만들기
Chapter 12. 필터 : 로그 기록하기
캐시 사용으로 편의성 증대
Chapter 13. 세션 : 장바구니 페이지 만들기
Chapter 14. 쿠키 : 주문 처리 페이지 만들기
데이터베이스 추가
Chapter 15. 데이터베이스 개발 환경 구축 : 상품 관리 테이블 생성 및 상품 등록하기
Chapter 16. JDBC로 데이터베이스와 JSP 연동 : 상품 조회, 등록, 수정, 삭제하기
심화
Chapter 17. JSP 표준 태그 라이브러리 : 회원 가입, 수정, 탈퇴하기
Chapter 18. 웹 MVC : 게시판 만들기
용어 정리
서블릿(Servlet)?
자바 서블릿(Java Servlet)은 자바를 사용하여 웹페이지를 동적으로 생성하는 서버측 프로그램 혹은 그 사양을 말하며, 흔히 "서블릿"이라 불린다.
JSP?
자바 서버 페이지(영어: JavaServer Pages, JSP) HTML내에 자바 코드를 삽입하여 웹 서버에서 동적으로 웹 페이지를 생성하여 웹 브라우저에 돌려주는 서버 사이드 스크립트 언어이다.
서버 사이드 스크립트 언어?
서버 사이드 스크립트 언어(server-side script 言語) (또는 서버 사이드 스크립트, 영문 명칭 server-side scripting)란 웹에서 사용되는 스크립트 언어 중 서버 사이드에서 실행되는 스크립트 언어를 말한다.
OO 사이드?
좋은 설명이 담긴 블로그
클라이언트 사이드?
클라이언트(사용자) 측에서 처리하는 것 클라이언트(사용자) 측에서 수행되는 것들 혹은 애플리케이션(언어 등)
이와 관련된 개발자를 프론트엔드
서버 사이드?
서버 측에서 처리하는 것 서버(제공자) 측에서 수행되는 것들 혹은 애플리케이션(언어 등) 서버 사이드는 클라이언트에게 보낼 웹 페이지(HTML, Javascript)를 만들며, 중요한 작업들(사용자 유효성, DB관련 등)을 수행한다.
이와 관련된 개발자를 백엔드
OO 언어?
인터프리터 언어?
스크립트 언어?
스크립트 언어(scripting language)란 응용 소프트웨어를 제어하는 컴퓨터 프로그래밍 언어를 가리킨다. 스크립트 프로그래밍 언어라고도 한다. 스크립트 언어는 언어의 사용처가 어플리케이션, SW인 언어를 말합니다. -> 딱 이해 됐어~ 언리얼 엔진의 스크립트언어는 C++(컴파일 언어)입니다. 유니티의 스크립트 언어는 C#(인터프리터 언어)입니다 대표적인 스크립트 언어인 javascript는 웹 브라우저의 스크립트 언어로 그 목적이 고정되어 있어서 스크립트언어라고 칭합니다.
컴파일 언어?
컴파일 언어 실행 전 소스코드를 컴파일하여 기계어로 변환 후 해당 파일을 실행 이미 기계어로 변환된 것을 실행하므로 비교적 빠름 문법적 제약이 일반적으로 많음 운영체제에 따라 다르게 작업해야 함
차이점
우리가 작성한 코드(프로그래밍 언어)를 컴퓨터가 알아들을 수 있게 기계어(0,1)로 바꿔주는(번역하는) 작업이 필요한데 그 과정을 언어에 따라 컴파일(compile), 인터프릿(interpret) 이라고 하고 각각을 실행하는 변환기를 컴파일러, 인터프리터 라고 한다.
서블릿과 JSP의 차이점
JSP는 HTML안에 자바 코드를 포함하는 반면 서블릿은 자바 코드안에 HTML을 포함한다.
JDK, JRE, JVM?

JDK
JDK는 자바 개발도구(Java Development Kit)의 약자이다. JDK는 JRE + 개발을 위해 필요한 도구(javac, java등)들을 포함한다. 
JRE
JRE는 자바 실행환경(Java Runtime Environment)의 약자이다. JRE는 JVM 이 자바 프로그램을 동작시킬 때 필요한 라이브러리 파일들과 기타 파일들을 가지고 있다. JRE는 JVM의 실행환경을 구현했다고 할 수 있다. 
JVM
JVM은 자바 가상머신(Java Virtual Machine)의 약자이다. JVM은 자바 소스코드로부터 만들어지는 자바 바이너리 파일(.class)을 실행할 수 있다. 그럼 자바 바이너리 파일을 만드는 것도 JVM으로만 가능? 다른 컴파일러로는 안되나?
아파치 톰캣?
아파치 톰캣(Apache Tomcat)은 아파치 소프트웨어 재단에서 개발한 서블릿 컨테이너(또는 웹 컨테이너)만 있는 웹 애플리케이션 서버이다. - 출처 위키피디아 웹 어플리케이션 서버(WAS)의 하나로, 서블릿 컨테이너라고도 한다.  Tomcat은 사전적 의미로 '수고양이'를 뜻한다.
웹 서버와 웹 서버 어플리케이션
웹 서버 어플리케이션?
웹 애플리케이션 서버(Web Application Server, 약자 WAS)는 웹 애플리케이션과 서버 환경을 만들어 동작시키는 기능을 제공하는 소프트웨어 프레임워크이다. 쉽게 설명하자면 다양한 서버 내 알고리즘, 비즈니스 로직, DB 조회 등 클라이언트 요청에 따라 동적인 컨텐츠를 제공하는 서버, 프로그램
웹 서버
HTTP의 요청을 받아 static contents를 제공하는 서버, 프로그램
컨테이너
1. 출처 - https://www.inflearn.com/questions/505167 WAS 는 Web Server + Web Application Server 이다. 그래서 정적 페이지를 제공하면서도 웹 컨테이너를 사용하여 내부 로직을 거쳐 동적 페이지를 제공할 수 있다. 자바 웹 구현 기술로 Servlet를 사용합니다. 이 Servlet을 관리하고 jsp 파일을 실행할 수 있게 해주는 것이 Servlet Container 입니다.
서브 주제
서브 주제
서브 주제
서브 주제
서브 주제
나중에 다시 읽고 정리
https://velog.io/@waoderboy/%EC%9B%B9-%EC%84%9C%EB%B2%84-WAS-%EC%9B%B9-%EC%BB%A8%ED%85%8C%EC%9D%B4%EB%84%88
웹 사이트/어플리케이션
지금의 웹 사이트는 댓글기능, 검색 기능, 검색어 추천 기능 등 여러 반응형 어플리케이션이 포함된 웹 사이트가 되어버렸다. 웹 사이트와 웹 어플리케이션의 경계가 사라진 것이다.
웹 사이트
웹 사이트는 기본적으로 웹 페이지의 모음으로, 대표적으론 위키피디아 가 있다. 웹 사이트는 지금과 같이 수많은 웹과 함께 콘텐츠를 제공하는 사용자와 대화하는(상호작용하는) 식의 웹이 아니었다. "과거 웹 사이트"는 글과 링크로된 순수 페이지만을 모아놓은 "순수한 웹 사이트"였다. 
웹 어플리케이션
사용자와 대화하는 식으로 이용되는 것 웹에서 다른 사용자에게 메세지를 보내거나 댓글을 다는 등의 어플리케이션이 동작해야한다. 대표적인 예로 페이스북에서 좋아요, 싫어요와 댓글, 메세지등의 사용자 대화식의 어플리케이션이 웹에서 동작하는 것이 있다. 적어도 애플리케이션이라고 하려면 입력을 받고 알고리즘을 통해 산출하여 원하는 출력 값을 얻어내야만 한다.
API
API는 Application Programming Interface(애플리케이션 프로그램 인터페이스)의 줄임말입니다 API는 정의 및 프로토콜 집합을 사용하여 두 소프트웨어 구성 요소가 서로 통신할 수 있게 하는 메커니즘
메인 주제
질문
왜 POST 함수 안에 DOGET 함수가 디폴트로 있는건지 둘의 역할은 다르지 않나요?
jsp를 서블릿으로 번역하고 그 서블릿 코드들이 객체로 바뀌어 서블릿 컨테이너를 통해 브라우저로 전달되는 거 아닌가요?
서블릿이 JSP에게 주는건가요? 그럼 서블릿이 로직을 돌려 만든 결과값을 JSP에게 주고 그 JSP가 서블릿으로 변환되어 돌아가는 건가요?
흐름
HTML만으로 코딩하면 동적인 페이지를 만들 수 없어서 CGI를 사용했음
그 중 Java언어를 사용하여 작성한 CGI 프로그램을 서블릿 이라고 한다
그래서 이 서블릿(자바 코드로 웹 페이지를 다루는 기술)으로 웹 페이지를 만들어 썼는데 서블릿으로 HTML을 작성하기 어렵다보니 JSP라는 기술이 등장했다
그래서 JSP는 서블릿 기반 스크립트 언어이고 JSP를 통해서 HTML을 쉽게 사용할 수 있어 많은 사용이 되었다
그러나 JSP만을 사용하여 웹 페이지를 만들다 보니 유지보수에 어려움이 있어 서블릿과 함께 MVC 패턴에 녹여 사용한다
질문
HTML의 특징인지 HTML5의 특징인지
웹 페이지의 플랫폼 의존성 제거 원래 HTML은 플랫폼 의존성이 있었나요? Active X, 플래시가 그 예인 것 같은데 왜 그런거죠? 보안때문에?
요소와 태그의 차이
<form></form> 태그 사이에 사용되는 요소 종류
굉장히 여러가지
입력 요소 or 입력 태그
여러가지인데 대부분< input type="속성"> 의 문법으로 진행된다
<input type="text" name="userid">
<input type="submit" value="제출">
<input type="reset" value="초기화">
HTML5에 새로 추가된 <input> 속성
autocomplete
자동으로 입력을 완성한다
autofocus
자동으로 입력 포커스 갖춤
placeholder
입력 힌트를 희미하게 보여줌
readonly
required
pattern
정규식으로 정의해서 입력을 제어 국가에서 권장하는 비밀번호 양식을 맞출 때 사용할 수 있겠다
<input> 요소
<select> 요소
메뉴를 표시하고 사용자로 하여금 선택 selected 속성을 이용해 특정 항목을 초기에 선택할 수 있다 
입력 요소를 그룹핑
<fieldset> 태그
입력 요소를 그룹핑하는 데 사용되는 태그 legend 태그를 사용하면 그룹에 제목을 붙일 수 있다.
태그는 요소의 시작과 끝을 알리는 문법 기호
css의 선택자는 html에 속성으로 짚어넣는데 그럼 css 선택자는 html의 속성인가요? 그럼 html에 속하는 건가요?
그럼 css를(문서 스타일)을 위해서 css와 html이 상호작용 하는건가요?
장점
자바를 기반으로 자바 API를 모두 사용할 수 있다.
운영체제나 하드웨어에 영향을 받지 않으므로, 한 번 개발된 애플리케이션은 다양한 서버 환경에서도 실행할 수 있다.
질문 - 이것도 자바를 써서의 이득? 즉 자바언어의 장점?
웹 애플리케이션에서 효율적인 자료 공유 방법을 제공한다.
다양한 오픈소스 라이브러리와 개발도구를 활용할 수 있다.
톰캣은 JVM이 필요하기 때문에 경로를 JVM에다 맞춰줘야한다
어느 순간에 JDBC를 쓰고 어느 순간에 프레임 워크를 쓸껀지 알 수 있어야한다
그러려면 장단점 각각의 특징 을 잘 알아야 겠다.
질문
용어정리 - 서블릿 - 노트 - 자바를 사용하여 서버를 동적으로 생성하는? 1. 동적 할당으로 페이지를 생성? 2. 정적(읽기만) 페이지가 아니라 동적(읽고 쓰고 상호작용하는) 페이지를 생성?? 서버에서 요청받은 jsp에서 톰캣을 통해 서블릿을 생성하고 전달해주는데(클라이언트에게?) 그 서블릿이 없으면 동적으로 생성해서 전달해준다는 의미 - 해결 ----------------------------------------0907---------------------------------------------------------
용어정리 - 서블릿 - 노트 - 자바를 사용하여 서버를 동적으로 생성하는?의 의미 - 이해 완ㄹ
15p 클라이언트에서는 HTML이 아닌 렌더링을 중심으로 변화되고 있다 - 부가적인 이해 필요 - 이해 완료
2.6 레이아웃
웹페이지에서 HTML 요소의 위치, 크기 등을 결정하는 것
모양
기본 요소 모양
사진 녹두색이 설명에 해당하는 그림 
블록 요소
인라인 요소
인라인 블록 박스
레이아웃 관련 속성 display
기본 요소 모양
display : 요소 모양
display:block : 블록(block) display:inline : 인라인(inline) display:inline-block : 인라인 블록 ( 블록 안에 있는 인라인 요소)
특이점
display:none
display:none : 없는 것으로 간주됨 (요소도 제거)
visibility:hidden
visibility:hidden : 화면에서 감춰짐 (요소는 존재)
위치 설정
요소 위치 설정 방식
요소의 위치 잡는 방식 4가지
absolute
상위 부모 엘리먼트를 기준으로 위치 지정
fixed
웹 브라우저 창을 기준으로 위치 지정
static (표준방식)
웹 문서에 나열된 엘리먼트 순으로 위치 지정(표준 방식)
relative
엘리먼트 자신의 원래 정적(static) 위치를 기준으로 상대적인 위치 지정
float 속성
보통 브라우저의 크기를 조정하면 요소의 위치가 변경되기 쉽다 float 된 요소는 항상 브라우저의 가장 왼쪽이나 오른쪽에 배치한다.
OO 요소 이용 레이아웃
div 요소 이용 레이아웃
태그는 논리적 섹션을 의미하지만 자체적으로는 아무 의미가 없다
시멘틱 요소 이용 레이아웃?
문서의 구조와 의미만을 표현하며 위치, 모양은 CSS를 통해 별도로 정의한다 그러니까 그냥 "시멘틱 요소는 기본 디폴트 모드니까 알아서 꾸며라" 이거지 맞나요?
노마드코인
뭐하지
웹서비스프로그래밍
Chapter 01. JSP의 개요 : 원리를 이해하고 개발 환경 구축하기
01. 웹과 JSP 프로그래밍 이해하기
02. JSP 개발 환경 구축하기
03. 프로젝트 생성하기
Chapter 02. 스크립트 태그 : 시작 페이지 만들기
01. 스크립트 태그의 개
02. 선언문 태그의 기능과 사용법
03. 스크립틀릿 태그의 기능과 사용법
04. 표현문 태그의 기능과 사용법
05. 시작 페이지 만들기
Chapter 03. 디렉티브 태그 : 한글 출력 및 페이지 모듈화하기
01. 디렉티브 태그의 개
02. page 디렉티브 태그의 기능과 사용법
03. include 디렉티브 태그의 기능과 사용법
04. taglib 디렉티브 태그의 기능과 사용법
05. 한글 출력 및 페이지 모듈화하기
Chapter 04. 액션 태그 : 상품 목록 표시하기
Chapter 05. 내장 객체 : 상품 상세 정보 표시하기
Chapter 06. 폼 태그 : 상품 등록 페이지 만들기
웹서비스프로그래밍
Chapter 07. 파일 업로드 : 상품 이미지 등록하기
Chapter 08. 유효성 검사 : 상품 등록 데이터의 유효성 검사하기
Chapter 09. 다국어 처리 : 상품 등록 페이지의 다국어 처리하기
Chapter 10. 시큐리티 : 상품 등록 페이지의 보안 처리하기
Chapter 11. 예외 처리 : 예외 처리 페이지 만들기
Chapter 12. 필터 : 로그 기록하기
웹서비스프로그래밍
Chapter 13. 세션 : 장바구니 페이지 만들기
Chapter 14. 쿠키 : 주문 처리 페이지 만들기
Chapter 15. 데이터베이스 개발 환경 구축 : 상품 관리 테이블 생성 및 상품 등록하기
Chapter 16. JDBC로 데이터베이스와 JSP 연동 : 상품 조회, 등록, 수정, 삭제하기
Chapter 17. JSP 표준 태그 라이브러리 : 회원 가입, 수정, 탈퇴하기
Chapter 18. 웹 MVC : 게시판 만들기