Client에서 받은 요청을 객체로 바인딩하기 위해 사용하는 방법에는 총 @RequestBody, @RequestParam, @ModelAttribute 총 3가지가 있다. 

🥑 @RequestParam

@RequestParam은 1개의 HTTP 요청 파라미터를 받기 위해서 사용한다.(HTTP 요청 파라미터를 @RequestParam이 쓰고있는 메서드의 변수로 Mapping해준다.) @RequestParam은 필수여부가 true이기 때문에 기본적으로  해당 파라미터가 전송되어야 한다. (전송되지 않으면 400 Error가 발생한다) 반드시 필요한 변수가 아니라면 required의 값을 false로 설정할 수 있으며 해당 Parameter를 사용하지 않고 요청을 보낼 경우 default로 defaultValue 옵션을 통해 값을 설정할 수 있다.

- value

- required

- defaultValue

🥑 @RequestBody

클라이언트가 전송하는 Json(application/json) 형태의 HTTP Body 내용을 Java 객체로 변환시켜주는 역할을 한다. 그렇기 때문에 Body가 존재하지 않는 HTTP GET 메서드에 @RequestBody를 사용할 경우 에러가 발생하게 된다. @RequestBody로 받은 데이터는 Spring에서 관리하는 MessageConverter들 중 하나인 MappingJackson2HttpMessageConverter를 통해 Java 객체로 변환된다.

Spring은 메시지를 변환하는 과정에서 객체의 기본 생성자를 통해 객체를 생성하고 내부적으로 Reflection을 사용해 값을 할당하므로 @RequestBody에는 값을 주입하기 위한 생성자나 Setter가 필요없다.

Json 데이터를 변환하기 위해서는 Jackson 라이브러리가 사용되는데, Jackson 라이브러리 내부적으로는 Getter나 Setter, @JsonInclude 등을 통해 필드에 있는 변수들의 이름을 찾고, Reflection을 이용해 값을 할당한다.

* Reflection

inspect or/and modify runtime attributes of classes, interfaces, fields, and methods.

자바에서 기본적으로 제공하는 API, 구체적인 클래스 타입을 알지 못해도 그 클래스의 정보(메서드, 변수 등등)에 접근이 가능하다.

🥑 @ModelAttribute

@ModelAttribute는 Client가 전송하는 multipart/form-data 형태의 HTTP Body 내용과 HTTP 파라미터의 값들을 생성자나 Setter를 통해 주입하기 위해 사용된다. @ModelAttribute에는 매핑시키는 파라미터의 타입이 객체의 타입과 일피하는지를 포함한 다양한 검증(Validation) 작업이 추가적으로 진행된다. 예를 들어 게시물의 번호를 저장하는 int형 index 변수에 1번이라는 String형을 넣으려고 한다면 BindException이 발생하게 된다. 즉, Json이나 XML과 같은 형태의 데이터를 MessageConverter를 통해 변환시키는 @RequestBody와 달리, @ModelAttribute는 multipart/form-data 형태의 HTTP Body와 HTTP 파라미터들을 생성자나 수정자로 주입시킨다는 차이가 있다.

> @ModelAttribut와 @RequestBody를 보다 극단적으로 설명하자면, @ModelAttribute는 바인딩하는 값들을 주입해주는 생성자나 Setter가 없다면 매핑이 되지 않는다. 하지만 @RequestBody는 요청받은 데이터를 변환시키는 것이기 때문에, 생성자나 Setter함수가 없어도 값이 매핑된다.

@ModelAttribut 어노테이션을 활용해서 특정 Parameter만 받아올 수도 있다. 

[출처]

https://mangkyu.tistory.com/72

https://www.baeldung.com/java-reflection

https://maivve.tistory.com/298

React에서는 JSX를 javascript로 변환하기 때문에 javascript 문법을 사용하기 위해서는 따로 mark를 해주어야 한다. => { }

Javascript 코드

<div className="card__top--weather">{weather}</div>

weather은 javascript 변수이다.

{ tags.map((tag, index) => {
    return (
        <div key={index} className="card__tags--tag">{tag}</div>
    );
 }) 
}

map이 javascript 함수이기 때문에 {}로 둘러싸여져 있다.

inline style

import React from 'react';
import Hello from './Hello';

function App() {
    const name = 'react';
    const style = {
        backgroudColor: 'black',
        color: 'yellow',
        fontSize: 24, // 기본단위 px
        padding: '1rem' // 다른 단위 사용 시 문자열로 설정
    };
    
    return (
        <>
            <Hello />
            <div style={style}>{name}</div>
        </>
    );
}

인라인 스타일은 javascript 객체 형태로 작성해야 한다. 따라서 javascript 객체인 style을 {style}로 사용하는 것이다.

import React from 'react';
import Hello from './Hello';

function App() {
    const name = 'react';
    
    return (
        <>
            <Hello />
            <div style={{
                backgroudColor: 'black',
                color: 'yellow',
                fontSize: 24, // 기본단위 px
                padding: '1rem' // 다른 단위 사용 시 문자열로 설정
             }}>
                 {name}
             </div>
        </>
    );
}

import / export

const a = 1;
const b = 3;
export {a};
export const c = 2;
export default b;

=> import b, {a, c} from './Example';

예) import React, { useState } from 'react';

export default로 export된 것은 {}로 감싸지 않고 Import를 하고, 나머지는 {}로 감싸서 import한다.

WHAT IS DOM?

HTML 문서의 구성요소들을 객체로 구조화하여 나타낸 것

웹 브라우저 내부에서 HTML 태그들은 객체 형태로 실행된다. 이 객체들을 DOM 객체라고 부른다. 즉, DOM 객체는 웹 브라우저 내부의 태그 객체이다.

* DOM과 HTML의 차이점

- HTML: 화면에 보이고자 하는 구조를 문서로 만든 것으로 단순 텍스트

- DOM: HTML 문서의 내용과 구조가 객체 모델로 변화되어 다양한 프로그램에서 사용

DOM의 특징

- 객체 지향적 설계

- HTML 문서 내의 모든 요소를 객체화해서 표현하고 접근하도록 함.

- 문서를 '트리 구조'로 표현

- HTML 문서를 텍스트가 아닌, 트리 구조를 갖는 객체들의 계층적 구조로 표현

- Javascript와 같은 script 언어를 통해 동적 제어 기능을 제공 (등록, 삭제, 수정, 이벤트 처리 등) - Javascript에 의해 수정될 수 있는 동적 모델

DOM은 어떤 형태일까?

DOM은 원본 HTML 문서의 객체 기반 표현 방식이다. 둘은 서로 비슷하지만, DOM이 가지고 있는 근본적인 차이는 단순 텍스트로 구성된 HTML 문서의 내용과 구조가 객체 모델로 변환되어 다양한 프로그램에서 사용될 수 있다는 점이다.

DOM 객체 구조는 "노드 트리"로 표현된다.

HTML 예시에서

<!DOCTYPE HTML>
<html lang="ko">
    <head>
    	<title>My blog</title>
    </head>
    <body>
        <h1>Hello, world!</h1>
        <p>How are you?</p>
    </body>
</html>

아래와 같은 노드 트리로 표현된다.

노드 트리를 자바스크립트 객체로 표현할 수 있다.

{
    type: 'body',
    props: {},
    children: [
        {
            type: 'h1',
            props: {},
            children: ['Hello, world!']
        },
        {
            type: 'p',
            props: {},
            children: ['How are you?']
        }
    ]
}

웹 브라우저 Workflow

웹 브라우저가 원본 HTML 문서를 읽어들인 후, 스타일을 입히고 대화형 페이지로 만들어 뷰 포트에 표시하기까지의 과정을 거친다. 

-> DOM tree 생성

브라우저가 HTML을 전달받으면, 브라우저의 렌더 엔진이 이를 파싱하고 DOM 노드로 이뤄진 트리를 생성한다 각 노드는 HTML 요소들과 연관되어 있다.

-> CSSOM tree 생성

* CSSOM(Cascading Style Sheets Object Model) tree: 요소들과 연관된 스타일 정보의 구조화된 표현

-> Render tree 생성

외부 CSS 파일과 각 요소의 inline 스타일을 파싱한다. 스타일 정보를 사용해 DOM tree에 따라 새로운 트리인 Render Tree를 생성한다.

-> 브라우저에 그려짐 (Layout, Printing)

레이아웃 과정을 거쳐 각 노드들의 스크린 좌표가 주어지고 paint() 메서드를 호출하여 스크린에 원하는 정보를 브라우저에 출력한다.

node가 변경될 때마다 위 과정을 새롭게 하기 때문에 속도가 느려진다.

Virtual DOM 동작 방식

1. 데이터가 업데이트되면, 전체 UI를 Virtual DOM에 리렌더링한다.

2. 이전 Virtual DOM에 있던 내용과 현재의 내용을 비교한다.

3. 바뀐 부분만 실제 DOM에 적용된다.

Virtual DOM의 특징

- DOM의 가벼운 복사본

- In-memory에 존재, 실제로 렌더링되지 않음

- Javascript 객체로 이루어진 tree data structure

- React와 같은 UI 라이브러리에서 많이 쓰임

Virtual DOM이 렌더링 횟수를 줄여주는 예시

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <div id="root">
            <ul class="list">
                <li>red apple</li>
                <li>yellow banana</li>
                <li>orange mandarin</li>
            </ul>
        </div>
    </body>
</html>

비효율적 업데이트 (DOM)

const root = document.querySelector('#root');
const liTags = roo.querySelectorAll('li');

// 화면 렌더링 발생 1
liTags[0].textContext = 'red apple';
// 화면 렌더링 발생 2
liTags[1].textContext = 'yellow banana';
// 화면 렌더링 발생 3
liTags[2].textContext = 'orange mandarin';

효율적인 업데이트 (Virtual DOM)

const root = document.querySelector('#root');
const virtualDOM = document.createElement('ul');
virtualDOM.classList.add('list');

const appleLI = document.createElement('li');
appleLI.textContext = 'red apple';

const bananaLI = document.createElement('li');
bananaLI.textContext = 'yellow banana';

const mandarinLI = document.createElement('li');
mandarinLI.textContext = 'orange mandarin';

virtualDOM.appendChild(appleLI);
virtualDOM.appendChild(bananaLI);
virtualDOM.appendChild(mandarinLI);

// 한 번 렌더링
root.replaceChild(virtualDOM, root.querySelector('ul');

* 위의 virtualDOM 변수가 실제 Virtual DOM을 의미하지는 않는다.

Reconciliation(재조정)

Virtual DOM이 변경된 부분만 알아내는 방법

- 전체 DOM 트리를 탐색하고 비교하는 알고리즘 (diff algorithm)이 있지만, 이 알고리즘은 O(n^3)의 복잡도

=> React는 두 가지 가정을 기반하여 O(n) 복잡도의 휴리스틱 알고리즘을 구현하였다.

Reconciliation 두 가지 가정

1. 서로 다른 타입의 두 엘리먼트는 서로 다른 트리를 만들어 낸다. 엘리먼트가 다르면 비교하지 않는다.

2. 개발자가 key prop을 통해 여러 렌더링 사이에서 어떤 자식 엘리먼트가 변경되지 않아야할지 표시해줄 수 있다.(key를 통해 비교)

=> 부모 노드의 타입이 다르면 자식 노드는 비교하지 않는다.

Virtual DOM은 정말 빠른가?

react는 실제 DOM의 복사본을 메모리에 저장한다. DOM을 수정하면 먼저 이러한 변경사항을 메모리 내 DOM에 적용하고 변화된 부분을 파악한다. 변경사항을 일괄 처리하고 호출을 통해 한 번에 실제 돔에 적용하여 리플로우와 리페인트를 최소화한다.

🐥 MySQL 5.7

> show create table [table명];

출처

https://stackoverflow.com/questions/2433133/how-to-get-a-table-creation-script-in-mysql-workbench

JSX

html 태그를 생성하는 자바스크립트 소스코드를 간결하게 입력할 수 있도록 자바스크립트 문법이 확장된 것

1) JSX 문법 예 

var s = <div><img src="image.png"/></div>;

=> React에서 다음과 같이 쓰인 코드는 @babel이라는 자바스크립트 컴파일러를 통해 다음과 같이 변환된다.

2) 위 jsx 문법 예제를 자바스크립트 소스코드로 변환한 결과

var s = React.createElement("div", null,
	React.createElement("img", {src: "image.png"})
);

프로젝트를 빌드할 때, 빌드 도구가 jsx 문법의 소스코드를 자바스크립트 소스코드로 자동 반환해준다.

확장자

jsx 문법을 포함하는 자바스크립트 파일의 확장자가 옛날에는 *.jsx, 최근은 *.js

DOM 객체 (Document Object Model)

웹 브라우저 내부에서 html 태그들은 객체 형태로 실행된다. 이 객체들을 DOM 객체라고 부른다. 즉, DOM 객체는 웹 브라우저 내부의 태그 객체이다.

VirtualDOM 객체

jsx 문법으로 구현된 자바스크립트 코드에서 생성한 html 태그 객체를 VirtualDOM 객체라고 부른다. 이 객체는 웹 브라우저 내부의 DOM 객체와 다르다. 

자바스크립트 코드에 의해서 생성된 VirtualDOM 객체들과 동일한 구조로, 웹 브라우저 내부 DOM 객체들을 변경하는 작업이 react.js 엔진에 의해 실행된다. 이 작업에 의해 jsx 문법으로 구현된 내용이 웹 브라우저 창에 그려지게 된다.