[JSP] 부록_3-2 중간고사 예상 문제 정리(~3장)

프론트엔드 기술 3가지 설명 (html, css, js)?

html

웹페이지를 기술하기 위한 마크업 언어

태그를 이용해서 문서의 구조를 표현

html은 태그로 이루어진 요소로 결정된다

css

문서의 스타일을 지정하는 표준 스타일시트 언어

화면 구성이나 표현 형식 등 디자인 부분은 html 대신에 css에 위임함으로써 문서 구조와 문서 표현을 자연스럽게 분리할 수 있다

js

동적인 웹 페이지를 작성하기 위해 사용되는 언어

모든 웹브라우저들은 자바스크립트를 지원

---

html의 요소?

시작태그와 종료태그로 이루어진 문서의 구성요소

• 요소 = (시작태그 +콘텐츠 + 종료 태그)

속성: 요소에 대한 추가적인 정보를 제공

• 속성은 항상 시작 태그에 이름="값" 형태로 기술

---

블록 라인, 인라인 라인, 둘의 차이점

html 요소에는 블록 요소와 인라인 요소가 있다

• 블록요소: 한 줄을 다 차지  => <h>, <p>, <ul> 등
• 인라인 요소:  요소를 표시한 후에도 줄바꿈이 일어나지 않음 => <a>, <img>, <input> 등

---

form 태그에 대한 설명과 각 속성 및 기능

form 태그: html에서 사용자 입력 양식을 생성하는데 사용

• name 속성 : 폼의 이름을 지정
• action 속성 : 폼 데이터를 처리할 웹 서버 스크립트의 주소 지정
• method 속성 : 폼 데이터를 웹 서버로 전송하는 형식

<form name="input" action="http://www.tukorea.ac.kr" method="get">
//폼의 이름은 'input' 한국공학대학교 사이트로 폼 데이터 전송하며 get방식으로 전송한다
	<input type="text" name="userid">
    <input type="submit" value="제출"> // submit은 브라우저가 폼 데이터를 서버로 전송
    <input type="reset" value="초기화"> // reset은 입력 필드에 입력한 값이 모두 초기화
</form>

---

css 선택자와 그 용도

css 선택자 : 스타일을 변경하고 싶은 html 요소를 선택하는 것

//선택자 { 속성: 값; }
p{background-color:yellow;}

1. 타입 선택자
2. 전체 선택자
3. 클래스 선택자
4. 아이디 선택자
5. 속성 선택자
6. 의사 선택자

1. 타입 선택자 : html 요소 이름을 사용

h1{ color: green; }
//모든 h1 요소를 선택

2. 전체 선택자: 페이지 안의 모든 요소를 선택

*{ color:green; }
//전체 요소를 선택

3. 아이디 선택자: 특정한 요소를 선택

-요소의 id 앞에 #을 붙이면 된다

#target { color:red; }
//id가 target인 요소를 선택

<p id="target"> hello world </p>
//<p>요소의 id를 target으로 지정

4. 클래스 선택자: 클래스가 부여된 요소를 선택

-아이디 선택자는 하나의 요소만을 선택하여 사용하도록 하는데 반해 클래스 선택자는 몇 개의 요소를 하나의 클래스로 묶어서 스타일을 지정

-클래스 선택자는 .을 이용하여 정의

.target{ color:red; }
//클래스가 target인 요소를 선택

<p class="target"> hello world </p>
//p요소의 클래스를 target으로 지정

5. 선택자 그룹: 각 선택자에 의하여 선택된 요소의 합을 의미

-선택자를 콤마로 분리하여 나열할 수 있다

h1, h2, h3{ font-family: sans-serif; }
//h1,h2,h3 요소를 선택

 

선택자	설명
s1 s2	s1 요소에 포함된 s2 요소를 선택한다(후속 관계)
s1 > s2	s1 요소의 직계 자식 요소의 s2를 선택한다(자식 관계)

 

body em{ color:red; } -> body안의 em 후손 관계
body > h1 { color:blue; } -> body 안의 h1 자식 관계 요소

 

6. 의사 클래스: 클래스가 정의된 것처럼 간주

-  ':' 을 사용하여 표기

- 문서 트리의 외부에 있는 정보에 기반을 두어서 요소를 선택하는 방법을 제공하거나 보통의 선택자로 나타낼 수 없는 정보를 선택하는 방법을 제공하여 동적으로 스타일을 적용 가능

- a:link 라고 하면 <a> 요소에 클래스 link가 선언된 것처럼 생각하고 선택자를 만든다

-하이퍼 링크가 방문 전과 방문 후의 색상이 다르게 할 수 있다

a:link { color:blue; } //아직 방문되지 않을 경우
a:visited { color:red; } //방문된 링크
a:hover { color:green; } //사용자가 링크 위에 있을 때
a:active { color:orange; } //활성화 되었을 때

---

박스 모델

• 웹 브라우저는 html 요소들을 박스 형태로 간주하고 그린다
• 각 박스는 마진, 경계, 패딩을 가진다

마진

경계 주위의 영역

마진의 각 변 설정은 margin-top: 10px로 이루어짐

 

패딩

패딩은 컨텐츠와 경계 사이의 간격

패딩의 각 변 설정도 padding-top: 10px로 이루어짐

---

수평정렬

인라인요소

• 모든 요소에 대한 align 속성을 삭제
• 중앙정렬하려면 블록 수준의 컨테이너 안에서 중앙정렬

 

블록요소

• 왼쪽 마진과 오른쪽 마진을 auto로 설정
• 블록 요소의 중앙정렬을 설정하고 width를 지정

<p style="margin-left: auto; margin-right: auto; width: 50%">

 

---

jsp 태그와 각 용도

• 스크립트 태그 : 자바 코드를 넣어 프로그램이 수행하는 기능을 구현
• 디렉티브 태그(지시어) : jsp 페이지에 대한 정보를 컨테이너에 제공
• 액션 태그 : xml 형태의 태그로 jsp 페이지 간 제어

---

컨텍스트 루트

• 웹 애플리케이션의 메인 접속 경로, 해당 애플리케이션 메인 디렉토리
• http://localhost:8080/jspbook과 같이 jsp 실행을 위한 기본 url에 적용됨

 

컨텍스트 디렉토리

• jsp, html, 이미지 등 기본 웹 컨텐츠가 위치하는 디렉토리
• ex) src/main/wepapp

---

프레임워크란?

• 프로그램의 규모가 확대 되며 높은 생산성, 쉬운 유지 보수 등 개발 기술이 필요
• 소프트웨어적으로 프레임워크는 목적에 맞게 잘 설계된 구조와 미리 구현된 공통 라이브러리가 포함된 소프트웨어 개발환경을 의미
• 프레임워크를 사용하면 정해진 규격에 따라 프로그램 구조를 만들어야하며, 개발자가 신경 쓰거나 처리해야 할일을 프레임워크가 처리

---

http 프로토콜에서 GET, POST 차이

http란? : 웹 서비스에 사용되는 통신 규격

프로토콜 : 네트워크에 연결된 컴퓨터들 간의 통신 규약

GET방식

• 서버에 있는 정보를 가져오기 위해 설계된 데이터 전달방법, 최대 240바이트 전달 가능
• URL이 노출되기 때문에 보안에 문제가 생길 수 있다

POST방식

• 서버로 정보를 올리기 위해 설계된 방법, 데이터 크기에 제한 없다
• URL에 매개변수가 표시되지 않는다
• POST 방식은 전송할 데이터를 HTPP 메시지 body 부분에 담아서 서버로 보냄

---

서블릿, 서블릿 컨테이너의 정의

서블릿

• 자바를 기반으로 하는 웹 애플리케이션 기술
• jsp는 서블릿 기반의 웹 스크립트 언어로 내부적으로 서블릿으로 변환되어 실행
• 클라이언트의 요청을 받아 결과를 다시 전송

서블릿 컨테이너

• 서블릿들을 관리해주는 툴
• jsp나 서블릿으로 만들어진 웹 프로그램을 개발하고 실행하기 위한 환경(아파치 톰캣)
• 클라이언트 요청시, 컨테이너는 HttpServletRequest, HttpServletResponse 객체 생성

---

서블릿 실행 과정, 서블릿 컨테이너 생명주기

• 서블릿 컨테이너가 서블릿의 생명주기를 관리
• 생명주기? : 서블릿이 컨테이너에 의해 실행, 서비스, 종료되는 일련의 과정

실행과정

1.  jsp는 컨테이너에 의해 자바 소스로 변경 -> 클래스 파일로 컴파일 (ex) a.jsp -> a_jsp.java -> a_jsp.class
2.  서블릿 클래스 로딩 되며서블릿 객체 생성
3.  서버는 init()을 호출해 서블릿 초기화
4.  service() 를 호출
5.  service() 는 doGet(), doPost() 호출
6.  HttpServletRequest, HttpServletResponse 를 통해 요청 처리
7. 서버는 destroy() 호출 후 서블릿 제거

 

---

form 에서 변수 값을 받아 서블릿 페이지로 전달하는 방법

===> request.getParameter(" ");

 

---

서블릿에서 뷰 페이지 호출하는 방법, 정보 전달 방법

• @WebServlet : 컨테이너에 서블릿임을 알리는 것
• urlPatterns={"/helloservlet"} : 서블릿 실행을 위한 요청 url

정보 전달 방법

1. request.setAttribute{"output",  result};
2. RequestDispacter view = request.getRequestDispatcher("result.jsp");
3. view.forward(request, response);

 

---

mvc 모델이란?

모델 : 뷰에 필요한 비즈니스 영역의 로직 처리

뷰 : 비즈니스 영역에 대한 프레젠테이션 뷰(결과 화면) 담당

컨트롤러 : 사용자의 입력 처리와 화면의 흐름 제어 담당

 

---

웹 애플리케이션 개발시 jsp 스크립트릿 vs jsp 자바 빈즈 vs mvc

• 스크립트릿 : jsp에 뷰와 로직이 혼재되어 복잡도가 높음 => 유지보수 어려움
• mvc : 콘텐츠와 비즈니스 로직을 분리할 수 있음, 컨트롤러와 뷰가 역할 분담
• 자바 빈즈 : 동적 컨텐츠 개발 위해 자바 클래스로 로직을 작성하는 방법
  • jsp와 연동하기 위해 만들어진 컴포넌트 클래스
  • 데이터 처리와 공용화된 기능을 제공하기 때문에 빈즈를 잘 활용하면 프로그램의 중복을 줄이고 더욱 쉽게 유지보수 가능