UMC 9주차

Simple·2021년 12월 4일

UMC 1기 Server

목록 보기

9/9

1. 학습 목표

Ajax를 이용해 웹페이지에서 서버와 비동기 통신하는 방법 대해 알아본다.
Bootstrap, OPEN API 등을 활용해서 자신의 웹페이지를 만들어본다.

2. 9주차 수업 후기

💡 6주차 수업 듣고 느낀점 이야기, 각자 진행상황 공유

목표: API 및 DB 개선에 중점을 둔다. 그대신 확실한 변화가 있도록

💡 웹페이지에서 서버와 비동기 통신하는 것도 흥미롭지만, 이것은 방학때 스스로 진행하고 API에 더 집중을한다

3. 실습

과제 체크리스트

앱런칭 프로젝트 전 부족한 부분 복습하기
하고싶은 것
- DB 구조(일부변경완료)
- 쿼리실력(특히 서브쿼리) →메세지 조회 기능에서 완료!
API 설계 및 구현 과제 보충해서 더 발전시키기

변화

페이징 처리 기존 ResponseEntity → BaseResponse로 변경 (상태 코드 보여주기 위함)

ex) isSuccess, code, message와 같은 것

{
"isSuccess": true,
"code": 1000,
"message": "요청에 성공하였습니다.",
"result": {
"result": [
    {
    "postIdx": 6,
    "caption": "LastTest",
    "userIdx": 6
    }
    ],
"pageInfo": {
    "hasNext:": true,
    "currentPage:": 2,
    "totalPages:": 8
    }
}
}

다중 Insert

Post, Post_Media, Media 의 3단 구조에서 Post를 주 테이블, Media를 서브 테이블로 변경하여 Media가 Post를 참조하도록 변경

start transaction;
INSERT INTO Post (caption,userIdx)VALUES("StellaTest",6);
INSERT INTO Media (postIdx,fileData,thumbNail) VALUES(last_insert_id(),"Photo",1);
commit;

다중쿼리를 한 줄 씩 수행하기 위해 DB에서 TRANSACTION수행
postIdx는 Post테이블의 primary key이자 AUTO_INCREMENT 이기 때문에 last_insert_id()를 통해 Media 테이블에 입력

한계점: 한 게시물에 여러 사진 및 동영상을 넣을경우 Insert 문을 어떻게 처리할 것인가?

DM내용조회

서브쿼리를 이용해서 원하는 데이터 추출
(기존)인덱스를 이용하여 직관적이지 못함 → 인스타 닉네임을 조회하여 더 직관적이게!

(기존)

select Message.roomIdx,Message.content
from Room
inner join Message
ON Message.roomIdx = Room.roomIdx
where Room.roomIdx=?
ORDER BY Message.content DESC;

(변화)

SELECT User.nickname, Message.content
FROM User
INNER JOIN Message
ON Message.sender = User.userIdx
WHERE (sender, content) IN (select sender, content
FROM Room
INNER JOIN User as u1
ON Room.user_1 = u1.userIdx
INNER JOIN User as u2
ON Room.user_2 = u2.userIdx
INNER JOIN Message
ON Message.roomIdx = Room.roomIdx
WHERE u1.nickname="test2" AND u2.nickname="97_csh")
ORDER BY Message.createAt DESC;

(선택) 자신이 만든 API 또는 OPEN API 활용해서 웹페이지 만들기

🔥 트러블 슈팅(실패한 경험도 성장을 위한 경험!)

트러블 슈팅 양식 [ 문제 원인 ] Error Code: 1452. Cannot add or update a child row: a foreign key constraint fails (Instagram.Media, CONSTRAINT Media_post_ID FOREIGN KEY (postIdx) REFERENCES Post (postIdx) ON DELETE CASCADE ON UPDATE CASCADE)
- post가 주 테이블, media가 서브 테이블로 media가 postIdx를 참조하고 있어서 insert할 때 참조무결성 에러
- tagIdx도 Tag 테이블의 primary key 이고, media의 서브 테이블이기 때문에 default or idx값을 넣어줘야함
  
  [ 해결 방안 ]
- 트랜잭션 쿼리
```
start transaction;
INSERT INTO Post (caption,userIdx)VALUES("StellaTest",6);
INSERT INTO Media (postIdx,fileData,thumbNail) VALUES(last_insert_id(),"Photo",1);
commit;
```
- Media테이블의 tagIdx의 default 를 '0'으로 설정
  
  [ 참고 자료 ]

4. 핵심 키워드

정적 / 동적 웹페이지
- 정적 웹페이지: 서버에 저장된 HTML/CSS 를 그대로 보는 것( 변화가 일어나지 않고, 변화가 있을시 HTML 자체를 수정해야해서 번거로움)
- 동적 웹페이지: 상황에 따라 서버에 저장되어있는 HTML에 데이터 추가/가공을 해서 보여주는 방법(예: 사용자의 요청에 따라 홈페이지를 새로고침 하지 않아도 변화를 보여줄 수 있다.)
  
  동적 웹 페이지란?
HTML DOM

문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스입니다.

이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공합니다.

HTML DOM

HTML DOM은 HTML 문서를 조작하고 접근하는 표준화된 방법을 정의합니다.

모든 HTML 요소는 HTML DOM를 통해 접근할 수 있습니다.
웹 브라우저 렌더링
- 렌더링 엔진의 역할은 요청받은 내용을 브라우저 화면에 나타내는 일입니다. HTML, CSS, JavaScript 등의 파일을 브라우저가 화면에 표시할 수 있도록 변환하여 픽셀 단위로 나타냅니다.
```
![브라우저구조.jpg](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/703c1a4e-2f8e-49f7-b390-b23394f41308/브라우저구조.jpg)

![브라우저마다 다른 구조.jpg](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/c742dbce-7896-4dc4-832b-0a988338de6f/브라우저마다_다른_구조.jpg)
```
  [Browser] 브라우저 렌더링
  
  브라우저 렌더링과 최적화 - chanyeong
Ajax
- Ajax 란 ? Ajax란 Asynchronous JavaScript and XML의 약자입니다. Ajax는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법의 하나입니다. Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있습니다. 즉 Ajax를 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있습니다. 이때 서버와는 다음과 같은 다양한 형태의 데이터를 주고받을 수 있습니다.
  - JSON
  - XML
  - HTML
  - 텍스트 파일 등
- Ajax 장점
  1. 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있습니다.
  2. 웹 페이지가 로드된 후에 서버로 데이터 요청을 보낼 수 있습니다.
  3. 웹 페이지가 로드된 후에 서버로부터 데이터를 받을 수 있습니다.
  4. 백그라운드 영역에서 서버로 데이터를 보낼 수 있습니다.
- Ajax 한계
  1. Ajax는 클라이언트가 서버에 데이터를 요청하는 클라이언트 풀링 방식을 사용하므로, 서버 푸시 방식의 실시간 서비스는 만들 수 없습니다.
  2. Ajax로는 바이너리 데이터를 보내거나 받을 수 없습니다.
  3. Ajax 스크립트가 포함된 서버가 아닌 다른 서버로 Ajax 요청을 보낼 수는 없습니다.
  4. 클라이언트의 PC로 Ajax 요청을 보낼 수는 없습니다.
- 프레임워크
  - Prototype
  - script.aculo.us
  - dojo
  - jQuery
동기 / 비동기
- 동기식은 요청 후 응답을 받아야지만 다음 동작이 이루어진다. 비동기식에서는 요청을 보낸 후 응답과는 상관없이 동작하는 방식이다.

[서버 측 JS - 동기와 비동기 1 : 개요](https://www.youtube.com/watch?v=jjypeFGJC3c)

SPA(Single Page Application)
- 대표 프레임워크 React, Vue/Angular
- SPA형태는 브라우저에 최초에 한번 페이지 전체를 로드하고, 이후부터는 특정 부분만 Ajax를 통해 데이터를 바인딩하는 방식
- 기존 vs SPA
```
![SPA cycle.png](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/db371aa0-2dde-46ce-9ff7-8eb2e4e836b1/SPA_cycle.png)
```
  웹 SPA(Single Page Application) 에 대해서