2023.02.09_1~8교시

[복습]

앞서 이전 시간에는 ajax를 javascript와 jquery를 이용해서 테스트해봤다.

1. get방식과 post방식의 큰 차이?

2. javascript이용시 1~4개의 순서에 따른 진행순서와 진행 단계별 내용을 아는지?

(XML객체 생성/onreadystatechange 속성에 콜백 함수를 지정/open()메소드 호출/send()메소드 호출)

---

1교시

 기존의  form태그로 포스트요청을 하면 기본적으로는 한글이 깨지니까 호스트에서 꺼내기 전에  호출 전에 인코딩을 추가했었다.

 그런데 jquery를 이용해서 ajax를 테스트할 때는 요청시 헤더에 charsetUTF-8을  POST에 보내기 때문에 Override아래에 인코딩을 추가하지 않아도 깨지지 않는 것을 확인 가능하다. 따라서 별도의  request.setCharachterEncoding을 생략할 수 있다.

request.setCharacterEncoding이 주석처리 되어도 response,setContentType

• request(요청)  => 클라이언트가 받을 때 어떤 형식을 받을 것인지에 해당하는 부분
• response(응답) => 서버에서 응답하는 타입을 지정하는 부분

요즘은 프로미스기반으로 ajax통신을 하는 경우가 많다. 다양한 방식으로 ajax통신이 가능하고, 그 중 수업 때 배운건 일부에 해당한다.

 

jquery  포인트 및 장점 상기하기

- 필요한 정보들을 알려주는 방법 알기

- 오류일 경우 알려주는 방법 알기

- 헤더 설정도 내부에서 알아서 처리된다.(그래서 기존 방식보다 편하다.)

 

jquery가 모든 화면이 다 로드가 된 다음에 실행이 될 수 잇게 ready메소드 지정해서 사용한다.

btnid를 가진 요소를 선택해서 클릭이벤트가 발생하도록 지정

ajax라는 함수를 통해서 ajax를 요청

전송방식, 데이터를 객체 형식을 get이든post방식이든 똑같이 지정

콜백 응답받아서 특정아이디를 가진 함수가 실행되도록 지정

 

 

---

2교시 json 실습

라이브러리 다운로드, 

 

JSON(JavaScript Object Notation)

자바스크립트 객체 표현법의 약자

 

간단한 포맨

 괄호{}내에 key:value쌍으로 구성 -> {"key":value}

...

 

JSON특징

1. ajax통신에서 Objsct타입의 데이터 전송 시 다른 것과 비교해서  XML대비 용량이 적다.
2. 속도가 빠르다.(경량 데이터 교한 방식)
3. 순수 TEXT기반으로 TEXT형식이 구조화되어 있다.
4. 대부분의 프로그래밍 언어에서 JSON포맷 데이터를 핸들링 할 수 있는 라이브러리를 제공해 시스템 간 객체 교환에 용이하다.
5. json- > javascript 또는 javascript -> json

 

GSON (Google JSON)

1. toJson(Object, Appendable) : 매개변수오브젝트를 제이슨을 변환해서 Append,,,
2.  

 

---

JSON 실습

1. User패키지, 클래스생성
2. 객체생성
3. json형식으로 변환
4. 클라이언트 js형식으로

jquery 변수 '$'로 표현

 

MIME 타입

MIME 타입의 구조는 매우 간단합니다; '/'로 구분된 두 개의 문자열인 타입과 서브타입으로 구성됩니다. 스페이스는 허용되지 않습니다. type은 카테고리를 나타내며 개별(discrete) 혹은 멀티파트 타입이 될 수 있습니다. subtype 은 각각의 타입에 한정됩니다. MIME 타입은 대소문자를 구분하지는 않지만 전통적으로 소문자로 쓰여집니다.

 

MIME 타입이란 클라이언트에게 전송된 문서의 다양성을 알려주기 위한 메커니즘입니다: 웹에서 파일의 확장자는 별 의미가 없습니다. 그러므로, 각 문서와 함께 올바른 MIME 타입을 전송하도록, 서버가 정확히 설정하는 것이 중요합니다. 브라우저들은 리소스를 내려받았을 때 해야 할 기본 동작이 무엇인지를 결정하기 위해 대게 MIME 타입을 사용합니다.

 

확장자별 MINE타입 확인해서 사용하면 된다.

https://developer.mozilla.org/ko/docs/Web/HTTP/Basics_of_HTTP/MIME_types

MIME 타입 - HTTP | MDN

---

3교시

 

 받아간 문자열을 자바스크립트 객체로 만들어서 콘솔에 출력해본다.

실습3)  서버에 데이터 전송 후 응답을 객체로 받기

자바객체를 자바스크립트에 주면 몰라서 제이슨 형태의 문자로 처리한 것.

서로 다른 언어로 작성된 객체 표현을 자바->제이슨으로 처리한것.

자바스크립트->제이슨으로 처리한 것인데 불편해서 라이브러리를 추가해서 실습할 것이다.

 

Maven은 대부분의 라이브러리들을 다 가지고 있다.

지금은 이걸 쓰는 게 아니라 따로 라이브러리를 직접 받아서 사용할 것이다.

https://mvnrepository.com/

https://mvnrepository.com/artifact/com.google.code.gson/gson/2.10.1

• 라이브러리 복사해서 넣는 순간 오류나면 webapp-WEB-INF-lib안에 라이브러리들이 들어간 경로를 확인하자.
• 옮길 때 control + c , v해야 붙여지고, 드래그앤 드롭으로는 옮겨지지 않는다.

---

4교시

json형태로 많이 작업할 예정

 

조회된 정보가 없으면 콘솔에 null값 띄워주기

 

실습4)서버에 데이터 전송 후 응답을 리스트로 받기

 

---

5교시

실습4)서버에 데이터 전송 후 응답을 리스트로 받기 이어서 진행

 

ajax로 비동기 통신 하는 실습 종료-

 

여러 api를 주고 받는 경우 json 형태로 주고 받게 될 것을 대비해서 알아두기.

 

[오전 수업 상기하기]

MVC패턴 기본세팅

---

6교시

MVC패턴

• 디자인 패턴 중 하나이다. (  장점: 유지보수성, 애플리케이션 확장성, 유연성 문제 해결)
• 클라이언트(사용자)가 보는 페이지, 데이터 처리, 컨트롤러를 분담해서 하나의 애플리케이션  각각 부분에 대한 집중도 쉽고 만들 때 문제가 생기면 찾고 수정하기도 쉽다.

Model

• VO(Value Object) : 계층 간 데이터 교환을 위한 객체이다.
• DTO(Data Access Object) : DB에 접근하기 위한 용도이다.
• Service : DB에서 전달받은 데이터 혹은 DB에 전달할 데이터들을 가공처리 (비즈니스 로직)

View

전달받은 데이터들을 클라이언트(사용자)에게 전송해서 보여준다.

Controller

모델과 뷰를 연결하는 역할을 한다.

Service(로직)처리 후 전달 받은 데이터를 뷰로 전송하거나 뷰에서 사용자가 입력한 값을 전달받는다.

 

---

<실습할 내용>

회원

-로그인, 로그아웃

-회원가입, 수정, 회원탈퇴

게시판

-목록조회, 상세조회, 작성

-수정, 삭제

 

+a 댓글, 관리자

---

[실습시작]

-db에 필요한 정보처리

-접근해서 조회해오기

---

7교시

 

1. 오라클 WEB 계정 생성

CREATE USER WEB IDENTIFIED BY WEB;

GRANT RESOURCE, CONNECT TO WEB;

 

2.

테스트- 저장 -접속

 

...

 

---

https://github.com/kh-study-cloud/kh/blob/main/99.%20%EB%B3%B4%EC%B6%A9/03.%20JDBC%EA%B0%9C%EC%9A%94.pdf

 

JDBC(Java Data Base  Connectivity) 

자바에서 데이터베이스에 접근할 수 있게 해주는 프로그래밍 API

 

할일

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

등록

실제 디비 연결

쿼리

결과가져오기

 

DriverManager

데이터 원본에 JDBC드라이버를 통해 커넥션을 만드는 역할Class.forName() 메소드를 통해 생성되며 꼭 예외처리해야함직접 객체 생성 불가능 getConnection()메소드 써서 객체 생성 가능

 

Connection

특정 데이터 원본과 연결된 커넥션이다.

Connection객체를 사용해서 create()메소드를 호출해서 생성한다.

SQL문장을 실행시키기 전에 먼저 Connection객체가 있어야 한다.

 

Statement

디비 쿼리문 수행시키는 객체

Connection객체에 의해 프로그램에 리턴되는 객체에 의해 구현되는..

 

ResultSet

쿼리문 결과에 해당하는 객체

SELECT문을 사용한 질의 성공 시 result set 반환

커서로 특정 행의에 대한 조작

 

PreparedStatement

..

 

 

---

JDBC 코딩 절차 설명

DriverManager에 해당 DBMS Driver등록

- 반복문을 통해서 조회된 행을 수행한다.

- select가 아닌 update, insert, delete했을 때 영향받은 행의 수를 보여준다.

---

[실습 시작]