moya의 웹다이어리

모델2 웹 애플리케이션 개발 수업 2일차 (오전)

list 형태의 데이터 추가

---------

jsp 메뉴 자동화 처리 -> 템플릿 페이지

실무면접... -> 게시판

XML -> mybatis -> ajax -> jquery -> 쇼핑몰

- XML (오전)

원래의 내용에 대해 추가적인 정보를 표시하기 위한 언어를 의미한다.

html은 정해진 태그만 사용할수있지만 XML은 필요에 의해 태그를 추가하여 사용할 수 있다.

xml은 메타언어로서 새로운 마크업 언어를 개발하기 위한 언어이다.

 - 특징

단순성, 개방성, 확장성

내용과 표현의 분리

계층적 구조

유니코드 사용

SGML과 HTML의 장점

SGML : 새로운 언어를 만들수 있다.

HTML : 모든 브라우저에서 사용가능

SGML / HTML / XML 비교

- XML의 용도

구조화된 텍스트 데이터저장 및 응용 프로그램간 데이터 송수신

고로 HTML에 비해 문법이 타이트하게 동작한다.

브라우저에는 XML파서가 내장되어있다.

- DTD(Document Type Definition)

마크업 문서에 대한 논리적 구조를 정의하기 위한 언어

 - 장점

문서 교환에서의 호환성 향상

응용 프로그램에서 문서 처리의 동일한 규칙 적용

Model2 웹 애플리케이션 개발 시작!!

웹 개발은 크게 모델1, 모델2를 사용하여 개발한다.

저번주에 진행하였던 개인홈페이지 프로젝트가 모델1 형태의 개발방식이다.

모델1 (기존 모델)

초창기에 주로 사용된 개발모델, 초기 개발속도가 빠르고 누구나 쉽게 다다룰수 있는 개방 방식, 모델1의 핵심은 JSP가 핵심이다. 1:1 방식, 모든 브라우저의 요청을 JSP에서 처리, 이런 특징으로 JSP가 중심이된느 개발방식이된다. 

단점 - JSP안에 프리젠테이션 로직(html, css)과 비즈니스 로직(자바 DB연결등등..)이 혼재되어있어 규모가 커지면 JSP 가독성이 현저하게 떨어져 요구사항의 추가나 변경의 대응이 용이하지않다. 

모델2 (MVC 디자인 패턴 적용 모델)

Model, View, Controller로 분리(캡슐화)하여 개발하는 방식으로 MVC 디자인 패턴 기반 웹 애플리케이션 개발 모델또는 3-Tier 아키텍처 기반 웹 애플리케이션 개발 모델이라 한다.

Controller - 요청 분석 및 처리

Model - 비즈니스 및 데이터 처리

View - 화면 출력

요청 -> 컨트롤러 -> 뷰(화면출력)

-> 모델(자바빈, 클래스들)

 - 장점

각각의 역할을 독립적으로 분리함으로서 디자이너와 개발자의 역할분담이 확실하고 모듈별 유지보수가 용이하다.

표준의 개발이 이루어지므로 공통작업등이 용이하고, 확장성이 뛰어나다.

뷰 기술로 사용되는 JSP의 경우 프리젠테이션 로직만으로 가지므로 가독성과 유지보수가 쉬워진다.

JSP 외에 다른 뷰 기술로 ~~~~ 기술이 사용될 수 있다.

- 단점

모델1에 비해 초보 개발자가 이해하고 프로그래밍 하기에는 다소 어려움이 따를 수 있다.

개발 과정이 복잡해 초기 개발 속도가 늦어질 수 있다.

 - 모델2에 적용되는 다른디자인 패턴들

모든 요청을 단일 진입점(중앙 집중형)컨트롤러를 프리젠테이션 계층의 제일 앞에 둬서 웹 서버로 들어오는 클라이언트 요청을 먼저 받아 처리(요청 분석 및 공통 작업 제어) 한 후 적절한 세부 컨트롤러를 이용하여 비즈니스 로직을 처리한 후 클라이언트에게 응답할 뷰를 선택해서 최종 결과를 생성하는 동의 작업을 수행한다.

위의 단일 진입점 컨트롤러에서 세부 컨트롤러로 요청 종류에 따라 분배해준다.

프론트 컨트롤러의 디자인에서 요청에 대한 분석 방법이 2가지 있다.

1. 요청의 URI를 분석하여 구분한다.

Command 패턴을 적용하여 일관된(단일한) 메서드 호출이 가능하도록 (인터페이스) 커맨드 패턴을 적용한 클래스로 작성한다.

3티어 아키텍처

웹클라이언트 < - > 프리젠테이션 레이어 < - > 비즈니스 로직 레이어 < - > 데이터 접근 레이어 < - > 데이터 레이어

프리젠테이션 레이어 : 기존의 서버사이드에서 처리하던 데이터 로직을 프리젠테이션 사이드로 이동하고있다. (JSP + 서브 컨테이너)

비즈니스 로직(서비스) 레이어 : 객체지향설계원칙이 적용된 핵심비즈니스 로직을 잘 담아야한다. 이상적인 서비스 계층은 프리젠테잇녀 계층과 데이터 엑세스 계층의 기술이 모두 변경되더라도 서비스 계층이 그대로 유지될 수 있게 작성되는 것이다.

한글날로 인해 4일까지

JSTL 커스텀 태그를 사용할수있다. (교육과정에선느 안하는걸로... 배우기 벅차다)

JSTL 2일차

<c:if /> 태그

else를 지원하지않은 단순 if문

보통 바디의 유무에 따라 다른대 바디가 있는 경우를 많이 쓴다.

개인 홈페이지 프로젝트 제출일

기능완료

부가적인 홈페이지 디자인 & 방명록 스티커메모형식 CSS 미완

테스트 미완

----------

표현언어(EL - Expression Language)

JSP파일에 자바 코드를 빼고 깔끔하게 만들기 위해 있는 방법이다.

${ EL 표현식 } <-- 와 같은 형태로 사용한다.

디폴트 객체가 11개 제공

자바 인스턴스 메서드 및 클래스(static) 메서드 호출 가능 (굳이 그렇게 쓰지않는다)

액션 태그의 속성으로 사용할 수 있다.

<jsp:include page="/module/${skin.id}/header.jsp"/>

자바스크립트에서 ["프로퍼티명"]으로 해야 할때가 있다

프로퍼티명에 특수문자가 포함됬을경우는 위와같이 접근해야한다. 

기본적으로는 객체명.프로퍼티명 형태의 자바형태로 접근할 수 있다.

자동형변환이 숫자가 문자에 비해 높다. 숫자와 문자를 연산하면 숫자로 형변환된다.

EL에서 사용 가능한 디폴트 객체 (11개)

- pageScope : pageContext 속성<키, 값> 매핑을 저장한 Map 객체

- requestScope : request 속성<키, 값> 매핑을 저장한 Map 객체

- sessionScope : session 속성<키, 값> 매핑을 저장한 Map 객체

- applicationScope : application 속성<키, 값> 매핑을 저장한 Map 객체

위 Scope 객체를 내부적으로 Map형태로 저장한걸 복사해서(생성해서) 가지고 있다.

- param 요청 파마리터의 <파라미터이름, 값> 매핑을 저장한 Map 객체

request.getParameter("파라미터이름")의 결과와 동일

- paramValues : 요청 파마리터의 <파라미터이름, 값qoduf> 매핑을 저장한 Map 객체

request.getParameterValues("파라미터이름")의 결과와 동일

1. 답글쓰기

2. 조회수 올리기 [ 완 료 ]

3. 게시판 번호 바꾸기 [ 완 료 ]

4. 페이징 [ 완 료 ]

5. 검색

6. CSS 마무리

개인 홈페이지 프로젝트 4일차

-------------- 월요일 작업 내용

- 소개

1. 메인화면 꾸미기

- 방명록

1. 방명록 CSS 추가작업

- 게시판

1. 처음으로, 끝으로

2. 이전 목록으로, 다음 목록으로

3. 이전 페이지로, 다음 페이지로

4. 검색

5. 답글쓰기

- 자료실

개인 홈페이지 프로젝트 2일차

방명록 UI까지 완성

15.09.30 작업 순서도

1. 회원가입 DB연결 [완 료]

2. 회원가입 비밀번호 확인 유효성 검사(JS) [완 료]

3. 회원가입 빈 텍스트 필드 유효성 검사(JS) [완 료]

4. 로그인 유효성 검사, DB와 비교(서브밋쪽의 프로세스에서 처리한후에 history.back) [완 료]

5. 로그인 쿠키로 구현 [완 료]

6. 로그아웃 [완 료]

7. 방명록 UI구현 [ 구현중 ] 30일 여기까지 약 50% 완성

8. 방명록 DB연결 [완 료]

10. 01 작업목록

1. 방명록 UI 추가 완성[완 료]

2. 방명록 DB연결[완 료]

3. 게시판UI [완 료]

4. 회원가입 중복 체크 [미 완]

10. 02. 작업 목록

1. 게시판 리스트 뿌리기

2. 게시판 쓰기

3. 게시판 읽기

-- 금요일 완료 목록

게시판 기본기능

리스트, 읽기, 쓰기

-------------- 월요일 작업 내용

- 소개

1. 메인화면 꾸미기

- 방명록

1. 방명록 CSS 추가작업

- 게시판

1. 처음으로, 끝으로

2. 이전 목록으로, 다음 목록으로

3. 이전 페이지로, 다음 페이지로

4. 검색

5. 답글쓰기

- 자료실

개인 홈페이지 프로젝트 2일차

방명록 UI까지 완성

15.09.30 작업 순서도

1. 회원가입 DB연결 [완 료]

2. 회원가입 비밀번호 확인 유효성 검사(JS) [완 료]

3. 회원가입 빈 텍스트 필드 유효성 검사(JS) [완 료]

4. 로그인 유효성 검사, DB와 비교(서브밋쪽의 프로세스에서 처리한후에 history.back) [완 료]

5. 로그인 쿠키로 구현 [완 료]

6. 로그아웃 [완 료]

7. 방명록 UI구현 [ 구현중 ] 30일 여기까지 약 50% 완성

8. 방명록 DB연결

10. 01 작업목록

1. 방명록 UI 추가 완성

2. 방명록 DB연결

3. 게시판

4. 회원가입 중복 체크

추석 연휴로 인해 수요일부터 시작

홈페이지 방명록에 쓰일 스티커메모형식 CSS

http://cdn.tutsplus.com/net/uploads/legacy/771_sticky/step1.html

테이블

팟수넷 게시판 참조

Table로 만들기 

테이블 페이지 내이션

http://codepen.io/Polanco08/pen/aosvC

--------------

개인 홈페이지 구축

1. 회원가입

- 가입

- 로그인

- 로그아웃

2. 방명록 - 간단하게 글 하나 남기기(작성자, 글)

3. 다중게시판 - 

4. 자료실

순수 JSP만 가지고 만들기, 액션태그까지

애플리케이션 이름은 "/" 루트

우선 해야될것들

메뉴자동화(include)jsp로 해두기

애러 페이지 처리

welcome file list

JSP 2일차 

애러페이지 설정 -> 지시어를 활용 하는방법이있는대 이것은 모든 페이지 상단에 지시어를 넣어야되는 문제가 있다.

이것을 해결하기위해 서버사이드에서 해결한다. web.xml파일에 "<error-page>" 태그를 활용하여 지정해주면 서버사이드에서 처리해준다.

500번대 애러 코드는 서버사이드에서 문제가 생기고

404쪽은 브라우저쪽의 문제이기때문에 따로 처리해준다.

 - 표준 액션 태그

JSP 스크립트 원소를 사용하지않고 JSP를 쉽게 작성할수 있도록 웹 컨테이너가 지원하는 표준 태그(기능이 구현되어 있는 태그)를 말한다.

주의사항

XML 형식을 따르며, 대소문자를 구분한다.

태그명 앞에 jsp라는 접두어(prefix)를 붙여 사용하여야 한다.

시작태그와 끝나는 태그가 있어야한다.

<jsp:forward />

자바 디스패치 포워드를 간편하게 쓸수있는 기능이다.

포워드 태그 안에 파라미터(쿼리스트링)을 만들어줘야할때

내부적으로 <jsp:param name, value>를 써서 설정해준다.

<jsp:include />

포함할 페이지의 결과값을 가져와서 해당 위치 밑으로 포함시켜준다.

<jsp:param />

include나 forward의 서브태그로 value와 name으로 쿼리스트링으로 만들어서 보내준다.

<jsp:useBean>

자바빈이란 데이터 저장을 목적으로 사용되는 재사용 가능한 컴포넌트를 말한다.

디폴트 생성자와 공개된 속성(프로퍼티)을 제공해야 한다.

= 일반 자바클래스

<jsp:useBean id="빈 이름" class="빈 클래스이름" [scope = "빈이 저장될 스코프 객체"]/>

setProperty, getProperty를 통해 bean을 생성된 객체에 대해 접근한다.

useBean은 처음에 컨택스트에 저장되어있는 맵에서 키값(user)으로 검색하고 없으면 생성한다. 무조건 생성하는것이 아니다.(session과 비슷하다)

setProperty에서 프로퍼티명을 "*"으로 줄수도 있다.

------- 

다음주중에 JSP, DB연결, html5, css3를 활용하여 홈페이지 구현

일주일짜리 홈페이지

다음주 수요일부터 시작

금요일까지 기본틀 완성을 목표

연휴중에 기본틀 만들어두기(DB연결 제외한 모든 구성)

그외 추가적으로 기능 만들어보기

설계적인 측면도 생각해보기