spread

ES6 에서 도입된 문법이다.

• "펼치다","퍼뜨리다" 라는 뜻의 spread
• 이 문법을 사용하면, 객체 or 배열을 펼칠(?)수 있다. ( "새로운 복제" 정도로 이해했다. )
• 기존의 객체 or 배열을 건드리지 않고, 새로운 객체 or 배열을 만들고, 거기에 추가적인 작업이 들어가는 것

React 에서, spread 문법을 쓸 일이 많아서, 한 번 정리하고 가야 될 것 같아서, 정리해봤다.

1. Array.map( )

• map : 배열 안의 각 원소를 변환 할 때 사용. 새로운 배열을 만든다.

2. Array.filter( )

• filter : 배열에서 특정 조건을 만족하는 값들만 따로 추출해서 새로운 배열을 만든다.

3. Array.forEach( )

• forEach : 배열이 있을 때, for문 대신, 배열전체에 대해서 작업시 편리

4. Array.indexOf( )

• indexOf : 기본자료형(숫자,문자(문자열), Boolean)들의 배열의 경우, 찾는 값이 존재하는, 배열의 인덱스 반환

5. Array.findIndex( )

• findIndex : 배열 안에, 요소들이 배열 or 객체일때, 해당 조건을 만족하는 요소의 인덱스 반환

6. Array.find( )

• find : findIndex랑 비슷한데, 찾아낸 값이 인덱스가 아니라, 값 자체를 반환

7. Array.concat( )

• concat : arr1, arr2 가 있을 때, 두 배열에 변화를 주지않고, 두 배열을 합친 결과를 반환

8. Array.reduce( )

• reduce : 두개의 파라미터를 전달한다. ( 1. 콜백함수, 2. reduce함수에서 사용 할 초기값 )
• 어떤 상황에서 사용 ?
  • 가장 간단한 예 = (정수)배열 내 원소의 값들의 합을 구하기
  • 배열 원소의 합을 구하는 방법은 여러 개가 있을 수 있다. ( forEach, 그냥 for문 돌리면서.. 등등 )
  • 다만, reduce 함수를 사용시, 이런 비슷한 작업을 할 때 유용

📝 컴포넌트

컴포넌트(Component) : 앱의 기능을 단위별로 캡슐화하는 React의 기본 단위

HTML 요소를 반환하는 함수나 클래스와 같다고 생각해도 된다.
따라서, 컴포넌트는 독립적이고, 재사용 가능한 코드의 조각이다.

컴포넌트의 종류로는, 1. 함수형 컴포넌트, 2. 클래스형 컴포넌트가 있다.

💡 함수형 컴포넌트

간단한 예로, 함수형 컴포넌트 형태를 보자.

function Introduce() {
  return <h2>Hi, I am elice!</h2>;
}

ReactDOM.render(<Introduce />, document.getElementById('root'));

💡 클래스형 컴포넌트

함수형 컴포넌트와 비교했을 때, 약간 구조만 다른 정도다.
다만, class 선언 시, React.Component의 메소드들을 사용하기 위해, extends를 이용해, React.Component를 상속
render( ) 함수안에, 반환 할, HTML 요소를 return 으로 반환
간단한 예로, 클래스형 컴포넌트 형태를 보자.

class Introduce extends React.Component {
  render() {
    return <h2>Hi, I am elice!</h2>;
  }
}

ReactDOM.render(<Introduce />, document.getElementById('root'));

💡 이 둘은 각각, 언제 사용하는가 ?

함수형 컴포넌트

• 단순히 HTML UI를 반환하는 간단한 자바스크립트 함수로 자주 사용한다.
• 단순히, 데이터를 받고, 렌더링 하면 끝이지 때문에, 비상태형 컴포넌트라고도 한다.

클래스 컴포넌트

• 클래스 컴포넌트는, "상태(State)"를 구현할 때 사용한다.
• 여기서, "상태(State)"란, React의 State를 의미하며, 쉽게 말하면, 컴포넌트의 현재 저장된 값
• 이런, "상타(State)"를 가지는, 클래스 컴포넌트를, 다른 말로, 상태형 컴포넌트라고도 한다.
• HTML을 반환하는 render( ) 메소드가 구현되어, 복잡한 UI 로직을 구현할 때 클래스형 컴포넌트를 사용한다.
• 특히, State를 사용할 때, 반드시(?) 클래스형 컴포넌트로 구현이 되어야 한다.

그러나, 기술이 발달 되면서, 이제는, 사실, 클래스 컴포넌트에서만, 다룰 수 있던, 컴포넌트의 상태(State)를, 함수형 컴포넌트에서도 다룰 수 있게 되었고, 그러한 기술을 우리는, "훅(hook)" 이라고한다.

이것은, 뒤에서 설명하려고 한다. ( 아주 중요하기 때문 ! )

그리고, 요즘은 사실, 클래스형 컴포넌트보단, hook을 이용한, 함수형 컴포넌트로 React를 구현하는 것이 추세라고 한다.

📝 JSX

JSX는 자바스크립트 XML의 약자.
즉, JSX는 자바스크립트를 확장한 문법이며, 그런 만큼, 자바스크립트와 사용법이 많이 비슷하다.
HTML을 React에서 쉽게 쓰기 위해 사용한다.

React는 JSX 문법을 이용해 마크업 언어와 코드의 로직을 따로 분리하지 않고, 두 가지를 포함한 "컴포넌트"를 사용

💡 표현식

JSX에서는 "중괄호( { } )"를 이용해, 사용 가능한 표현식들이 있다.

• 먼저, 중괄호를 이용해, HTML 내에 변수를 표현할 수 있다.

const name = 'elice';
const element = <h1> Hello, {name}! </h1>;

• 중괄호를 이용해, 함수 표현식을 넣는 것도 가능하다.

function greeting(){
  return "Hello, elice!";
}

const element = <h1>{greeting()}</h1>;

• 함수 내에서 표현식을 적용할 수도 있다.

function formatGreeting(name){
  return "Hello" + ' ' + name;
}

function getGreeting(user) {
  return <h1>Hello, {formatGreeting("elice!")}!</h1>;
}

💡 속성

• 큰 따옴표를 이용해 JSX의 속성을 지정할 수 있다.

const element = <a href = "https://kdt.elice.io/explore">엘리스로 이동</a>;

💡 자식 정의

• 자식 태그가 여러개 포함된 코드를 저장하기 위해서는, 자식 태그를 부모 태그로 감싸야 한다.

const element = (
  <div>
    <h1>Hello,</h1>
    <h2>elice!</h2>
  </div>
);

// <div> = 부모 태그
// <h1>,<h2> = 자식 태그

• 모든 태그는 반드시 닫혀야 한다. 다만, 원래 태그 이름을 맞춰서 </input> 처럼 닫아야 하지만
  이름은 생략하고 />만 이용해서 닫아도 괜찮다.

const element = <input type="text" />;

💡 객체 표현

React.createElement( ) 메소드를 이용하면, JSX 문법을 이용하지 않고, 객체로 표현할 수 있다.
두 코드는 문법이 다르지만, 같은 내용을 담고 있다.

• HTML 직접생성

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

• React.createElement( ) 로 생성

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

📝 엘리먼트 렌더링

Element ( 엘리먼트 ) : React 앱의 가장 작은 단위, 컴포넌트(Component의 구성요소)

쉽게 말하면, HTML 요소라고 할 수 있다.

Rendering( 렌더링 ) : 이러한 element를 화면에 그리는 것

💡 ReactDOM과 렌더링

• React는 가상(Virutal) DOM과 실제로, 표시되는 DOM을 유지한다.
• React는 실제 DOM을 추상화하여, 가상 DOM에 만들어두고, 데이터가 업데이트되면 한 번에 렌더링한다.
• 결과적으로, 계속해서 DOM을 렌더링하는 것보다 속도가 빠르다.

ReactDOM.render( ) : 렌더링 함수

• HTML 파일 안에 Id가 root인 요소가 있다고 해보자.

<div id="root"></div>

• 해당 HTML에 텍스트를 넣기 위해, ReactDOM.render( )을 이용해, 다음과 같이 렌더링 한다.

const element = <h1>Hello, elice</h1>;
ReactDOM.render(element, document.getElementById('root'));

// ReactDOM에 렌더링 할꺼다. element를, id = root 인 요소에다가 ~

💡 엘리먼트 업데이트

• 엘리먼트는 한 번 생성되면, 수정이 불가능한 불변 객체이다.
• 값을 변경하고 싶으면, 새로운 엘리먼트를 만들어 업데이트 해야 한다.

만약, 시간을 출력하는 기능을 구현하고 싶다면, 매 초마다 렌더링을 해줘야 할 것이다.

function tick() {
  const element = (
    <div>
      <h1>{new Date().toLocaleTimeString()}</h1>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);

Date 객체의 toLocaleTimeString( ) 메소드를 이용하면, 시간을 반환해주는데, 실제로 시간이 변하는 것을 확인하기 위해서는 setInterval( ) 콜백을 이용해 tick을 계속 호출해야한다.
setInterval( )의 매개변수인 1000은 1초를 의미한다.

📝 개요

React(리액트)란 사용자 인터페이스를 구축하기 위한 자바스크립트 라이브러리

• React는 선언적이고, 효율적이고, 유연하다.
• 컴포넌트(Component)라는 요소를 이용하면 복잡한 UI를 독립적인 단위로 쪼개어 구현할 수 있다.

💡 React를 왜 사용할까 ?

무엇보다, 동적(Dynamic)인 웹페이지를 만들기 위해서이다.
웹 페이지는 각 페이지마다 페이지를 관리해줘야 하고, 사용자의 응답에 따라 인터페이스가 지속적으로 변해야 한다.

한 마디로, React를 사용하는 이유를 정리하자면,,

" 사용자(User)와의 소통을 UI로 쉽게 구현하고 대규모의 웹페이지를 관리하기 위해 사용한다. "

• React의 Virtual DOM은 사용자 경험을 향상하고 개발자의 작업 속도를 높인다.
  Virtual DOM이란 가상적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 실제 DOM과 동기화하는 프로그래밍 개념이다.
• React 컴포넌트의 재사용은 개발 시간을 크게 절약한다.
• 단방향 데이터 흐름을 통해 안정적인 코드를 제공한다.
  단향향 데이터 흐름은 데이터는 항상 일정한 장소에 있고, 그 장소에서만 변경이 가능한 것을 의미한다.
• 오픈소스이며, 페이스북 라이브러리이기 때문에 지속해서 개발되고 커뮤니티에 공개된다.
• Hooks 이란 것을 이용해, 컴포넌트의 상태(State)를 쉽게 관리할 수 있다.

💡 React 파일 구조

📝 React 와 자바스크립트의 차이점

React는 앱 작성 방식을 정의하는 라이브러리다. 이는 데이터가 앱에 사용되는 방식과 그 데이터가 변화하는 결과에 따른  UI 변경 방법에 대해 명확한 규칙을 설정하여 수행한다.

반면 자바스크립트는 규칙을 설정하지 않는 스크립트언어이기 때문에, 이러한 순수 자바스크립트로 작성된 앱은 자유로울수는 있지만, 그만큼 정해진 것이 없기 때문에, 코드를 작성하다 길을 잃어버리기 쉽다.

이 둘의 대표적인 차이점을 잠깐 정리하자.

💡 1. 사용자 인터페이스를 처음 만드는 방법

• JS에서는 보통 다음과 같이 HTML을 요소를 구현한다. 따로 추가적인 코드가 필요하지 않는다.

<div>
    <h1>Grocery List</h1>
    <ul>
        <li>Milk</li>
        <li>Bread</li>
        <li>Eggs</li>
    </ul>
</div>

• 반면 React는 JSX로 반환되는 컴포넌트를 통해 UI를 정의한다.
• JSX는 HTML 처럼 보이지만, 실제로는, 자바스크립트다.

/*
다음은 GroceryList 라는 컴포넌트는 
이후 React DOM 라이브러리에 의해 "랜더링(Rendering)"되어 화면에 출력될 수 있다.
*/

function GroceryList(props) {
    return (
        <div>
            <h1>Grocery List</h1>
            <ul>
                <li>Milk</li>
                <li>Bread</li>
                <li>Eggs</li>
            </ul>
        </div>
    )
};

💡 앱에서 기능이 분할되는 방식

• JS는 앱의 기능 또는 UI의 요소를 분할하는 방법에 대한 특별한 요구사항이 없다.
  기본적인 출력은 HTML 파일에 정의한다.

<div>
    <h1>Grocery List</h1>
    <ul id="grocery-list">
        <li>Milk</li>
        <li>Bread</li>
        <li>Eggs</li>
    </ul>
</div>

그리고 목록을 업데이트하는 코드를 자바스크립트 파일(.js)에 넣어야 한다.

function addItemToList() {

  // Add item

}

이렇게 작성되어야 하는 이유는 관심사 분리 원칙에 따라, 화면에 출력을 하는 HTML과 기능을 구현하는 자바스크립트가 분리되도록 설계하였기 때문이다.
하지만 이러한 방식은, 앱이 점차 방대해지고, 복잡해짐에 따라, 컨트롤 하기 어려울 수 있다.

• 반면, React는 위의 기능을 구현하는데 필요한 코드를 하나의 파일로 유지가 가능하다.

function GroceryList(props) {
    function addItem() {
        // Add Item
    }

    return (
        <div>
            <h1>Grocery List</h1>
            <ul>
                <li>Milk</li>
                <li>Bread</li>
                <li>Eggs</li>
            </ul>
        </div>
    )
};

이렇게 사용하면, 앱이 방대해지고, 복잡해져도, 쉽게 이해할 수 있고, 만들어 놓은 컴포넌트를 앱 전체가 공유할 수 있으므로 코드의 재사용이 가능해진다.

💡 3. 브라우저에 데이터가 저장되는 방법

• JS에서는 사용자 데이터는 일반적으로 DOM에 저장된다.
  DOM은 브라우저 자체에서 만들고, 유지 관리하며, 전체 HTML을 나타낸다.
  예를 들면, 다음과 같이 텍스트 박스를 정의하고, 사용자가 입력하면, 해당 내용이 브라우저에 저장된다.

<input type="text" placeholder="Enter an item" id="item-input" />

그리고 사용자가 값을 입력할 때, 개발자가 먼저 DOM에서 값을 찾은 다음 추출하여, 해당 입력 상자에 값을 수동으로 입력해야 한다.

const input = document.getElementById("item-input"); console.log(input.value);

지금은, 작은 예라, 편리해보이지만, 입력이 여러 개일 때 문제가 될 수 있다.
만약 id가 다른 입력 텍스트 박스가 여러개라면, id 별로 자바스크립트 코드를 모두 관리해야 한다.

• 반면, React는 사용자의 입력을 기반으로 자신의 상태(State)를 관리하고, 업데이트 하는 제어 컴포넌트를 이용해 사용자 입력 시, 자바스크립트 객체의 텍스트 값을 설정한다. 이를 위해 먼저 상태를 정의해야 한다.

const [itemInput, setItemInput] = useState("");		// 형식 확인하기

입력이 변경될 때마다 설정이 되어야 하므로, HTML 코드는 조금 복잡해질 수 있다.

<input type="text" placeholder="Enter an item" value={itemInput} onChange={e => 
setItemInput(e.target.value)} />

하지만, 자바스크립트에서는 다음과 같이, 간단하게 텍스트 박스의 현재 값을 훨씬 쉽게 알 수 있다.

console.log(itemInput);

현재 앱의 상태(State)를 저장하기 위해 DOM에 의존하지 않음으로써, React가 사용자 데이터를 관리하는 이점은 앱이 성장할수록(커질수록) 그 효과는 커진다.

자바스크립트 변수에 앱의 상태를 저장하는 것은 React가 자바스크립트에 비해 얻을 수 있는 가장 큰 이점 중 하나이며 앱이 복잡할수록 해당 이점이 커진다.

💡 4. UI 업데이트 방법

마지막은, 이벤트 발생 시, 앱이 사용자에 반응하는 방식과 새로운 변경 사항을 반영하는 UI 업데이트 방식이다.

• JS에서는 텍스트 박스 옆에 다음처럼 버튼을 추가할 수 있다.

<input type="text" placeholder="Enter an item" id="item-input" /> <button id="add-button">Add</button>

그런 다음, 해당 버튼을 누른 것에 응답하기 위해 DOM에서 버튼을 찾는다.

const addButton = document.getElementById("add-button");

그리고, 그 버튼에 click listener를 설정한다.

addButton.addEventListener("click", function() {

  // Append item

})

그런 다음, 리스너 내부에서, 먼저 이전과 동일한 방법을 사용하여, 입력 상자의 값을 가져올 수 있을 것이다.
그런 다음, 식료품 목록에 새 항목을 추가하려면, DOM에서 목록을 찾고, 추가 할 새 항목을 만든 다음, 마지막으로 목록 끝에 추가해야 할 것이다. ( 이렇게만 봐도, 상당히 복잡함을 알 수 있다. )

• 반면, React는 자바스크립트 변수의 전체 상태를 유지한다.

const [items, setItems] = useState(["Milk", "Bread", "Eggs"]);

그리고 변수의 각 항목을 매핑(Mapping)한 후, 그에 대한 목록 요소를 반환하여 JSX에 표시한다.

// 형식, 확인하기

<ul>
    {items.map(item => (
        <li key={item}>{item}</li>
    ))}
</ul>

그런 다음, 버튼을 누르는 기능을 정의한다. click listener는 필요하지 않고, onClick 버튼 자체에 속성을 추가 할 수 있다.

<button onClick={addItem}>Add React</button>

이 함수에 추가할 것은 setItem 함수를 사용하여, 기존 항목에 새 항목을 추가하는 것이다.

function addItem() { console.log(itemInput); setItems([...items, itemInput]); }

이로써, React는 목록이 변경되었음을 자동으로, 등록하고, UI를 자동으로 업데이트한다.

이 업데이트 기능은 React가 가진, 위대함 중 하나이다.

📝 DOM

DOM(Document Object Model)
: 객체 지향 모델로써 구조화된 문서를 표현하는 형식

• DOM은 XML이나 HTML 문서의 프로그래밍 인터페이스
• 문서의 구조화된 표현을 제공하여 프로그래밍 언어가 문서 구조, 스타일 ,내용 등을 변경할 수 있도록 한다.

HTML DOM
:HTML 문서를 조작하고 접근하는 표준화된 방법, 모든 HTML 요소는 HTML DOM을 통해 접근 가능

Document객체

• Document 객체는 웹 페이지를 의미
• 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때는 반드시, Document 객체부터 시작해야 한다.

Document 메소드
: HTML 요소와 관련된 작업을 도와주는 다양한 메소드를 제공

• HTML 요소의 선택
• HTML 요소의 생성
• HTML 이벤트 핸들러 추가
• HTML 객체의 선택

Document 메소드 참고자료 👇

📝 이벤트(event)

이벤트(event)란 웹 브라우저가 알려주는 HTML 요소에 대한 사건을 발생을 의미

웹 페이지에 사용된 자바스크립트는 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있다.
따라서, 클라이언트 측 자바스크립트를 비동기식 이벤트 중심(event-driven)의 프로그래밍 모델이라고도 한다.

💡 이벤트 타입

이벤트 타입은 발생한 이벤트의 종류를 나타내는 문자열로, 이벤트 명(event name)이라고도 한다.
가장 많이 사용하는 키보드, 마우스, HTML DOM, Window 객체 등을 처리하는 이벤트가 폭넓게 제공된다.

💡 이벤트 명세

예전에는 onload, onclick, onmouseover와 같이 기본적이고도 단순한 이벤트만을 사용했으나..
현재는 이보다, 많은 이벤트를 위한 명세가 존재한다.

📝 Node 객체

HTML DOM은 노드로 계층적 단위에 정보를 저장
HTML DOM은 이러한 노드들을 정의하고, 그들 사이의 관계를 설명해 주는 역할은 한다.

• HTML 문서의 정보는 노드 트리(node tree)라고 불리는 계층적 구조에 저장된다.
• 이러한 노드 트리는 노드들의 집합이고, 노드 간의 관계를 보여준다.
• 자바스크립트에서는 HTML DOM을 이용하여 노드 트리에 포함된 모든 노드에 접근할 수 있다.

HTML은 여러가지 입력 가능한 태그를 제공한다.

이런 태그를 서로 조합하면, 사용자가 내용을 채우고, 웹사이트나 어플리케이션에 제출할 수 있다.

그리고, 서버는 그런 데이터를 조작해서 생산성있고, 상호작용이 가능한 무언가를 만들 수 있을 것이다.

📝 <button>

클릭 가능한 버튼을 담당한다.
버튼은 양식 내부는 물론, 간단한 표준 버튼 기능이 필요하면 어디든 배치할 수 있다.

📢 예시

<button name="button">눌러보세요</button>

🔊 결과

눌러보세요

📌 필요시 추가정보

📝 <form>

정보를 제출하기 위한 대화형 컨드롤을 포함하는 문서 구획을 담당한다.

📢 예시

<!-- Form which will send a GET request to the current URL -->
<form>
  <label>Name:
    <input name="submitted-name" autocomplete="name">
  </label>
  <button>Save</button>
</form>

<!-- Form which will send a POST request to the current URL -->
<form method="post">
  <label>Name:
    <input name="submitted-name" autocomplete="name">
  </label>
  <button>Save</button>
</form>

<!-- Form with fieldset, legend, and label -->
<form method="post">
  <fieldset>
    <legend>Title</legend>
    <label><input type="radio" name="radio"> Select me</label>
  </fieldset>
</form>

🔊 결과

📌 필요시 추가정보

📝 <input> 태그

웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨들롤을 담당한다.
사용자에 따라서 다양한 종류의 입력 데이터 유형과 컨트롤 위젯이 존재한다.
입력 유형과 특성의 다양한 조합 가능성으로 인해, <imput>요소는 가장 강력하면서도 복잡한 태그 중 하나다.

<input> 태그는 속성 및 옵션이 정말 많으니, 필요시 참고문서를 꼭 확인하자.

📢 예시

<!-- A basic input -->
<input type="text" name="input" value="Type here">

<!-- A common form that includes input tags -->
<form action="getform.php" method="get">
    <label>First name: <input type="text" name="first_name" /></label><br />
    <label>Last name: <input type="text" name="last_name" /></label><br />
    <label>E-mail: <input type="email" name="user_email" /></label><br />
    <input type="submit" value="Submit" />
</form>

🔊 결과

📌 필요시 추가정보

📝 <textarea> 태그

멀티라인 일반텍스트 편집 컨트롤을 담당한다.

📢 예제

<textarea name="textarea" rows="10" cols="50">Write something here</textarea>

🔊 결과

Write something here

📌 필요시 추가정보

💡 마무리

이 외에도..

<datalist> :  다른 컨트롤에서 고를 수 있는 가능한, 혹은 추천하는 선택지를 나타내는 <option> 요소 여럿을 담는다.
<label> :  웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성한다.
<fieldset> :  웹 양식의 여러 컨트롤과 레이블(<label>)을 묶을 때 사용합니다.

등등 몇 가지 더 많은 HTML 양식 태그들이 존재하니 필요시 관련 문서를 참고하자.

시맨틱 요소는 요소에 대한 의미가 정확하게 드러도록 정의할 수 있다.

비의미적 요소의 예 : <div> 나 <span> 등등
의미적 요소의 예 : <form>, <table> 및 <article> 등등

HTML에는 웹 페이지의 다른 부분을 정의하는 데 사용할 수 있는 몇 가지 의미 요소가 있다.

• <article>
• <aside>
• <details>
• <figcaption>
• <figure>
• <footer>
• <header>
• <main>
• <mark>
• <nav>
• <section>
• <summary>
• <time>

뭐 이런 것들이 있는데, 이 중 몇 가지 정도 정리해볼려 한다.

📝 <section> 태그

<section> 태그는 문서의 섹션을 정의한다. 제목이 있는 주제별 콘텐츠 그룹정도를 나눈다 생각한다.
예를 들어, 웹 페이지의 일반적으로, 소개, 내용 및 연락처 정보를 위한 섹션으로 나눈다.

📢 예시

<section>
  <h1>section 1</h1>
  <p>section 1 : 소개 ... </p>
</section>

<section>
  <h1>section 2</h1>
  <p>section 2 : 내용 ... </p>
</section>

📝 <article> 태그

<article> 태그는 독립적인 자체에 포함된 내용을 담당한다.
말 그대로, 기사는 그 자체로 의미가 있어야하며, 나머지 웹 사이트와 독립적으로 배포 할 수 있어야 한다.

<article> 요소를 사용할 수 있는 위치의 예

• 포럼 게시물
• 블로그 게시물
• 신문 기사

📢 예시

<article>
  <h2>기사 1</h2>
  <p>김 아무개씨가 오늘 아침 식사를 했다고 합니다. 아주 맛있었다고 합니다.</p>
</article>

<article>
  <h2>기사 2</h2>
  <p>김 아무개씨가 오늘 점심 식사를 했다고 합니다. 아주 별로였다고 합니다.</p>
</article>

<article>
  <h2>기사 3</h2>
  <p>김 아무개씨가 오늘 저녁 식사를 했다고 합니다. 아주 아주 맛있었다고 합니다.</p>
</article>

🔊 결과

📝 <header> 태그

<header> 태그는 일반적으로, 소개 내용이나, 탐색 링크의 집합에 대한 컨테이너를 담당한다.
<header> 태그는 일반적으로

• 하나 이상의 제목 요소 (<h1>-<h6>)
• 로고 또는 아이콘
• 저자 정보

정도의 정보를 담는다.

📢 예시

<article>
  <header>
    <h1>header h1</h1>
    <p>header의 paragraph</p>
  </header>

  <p>header 바깥부분 article paragraph</p>
</article>

🔊 결과

📝 <main> 태그

<main> 태그는 문서의 주요 내용을 담당한다.

<main> 태그 내부의 콘텐츠는 주로 문서여야 한다. 사이드 바, 탐색 링크, 저작권 정보, 사이트 로고 및 검색 양식과 같은 문서에서 반복되는 콘텐츠를 포함해서는 안된다.

둘 이상의 <main> 태그가 있어서는 안된다.
<main> 태그는 <article>, <aside>, <footer>, <header>, or <nav> 같은 요소 자식요소가 아니어야 한다.

📝 <footer>

<footer> 태그는 문서나 구역의 바닥 글을 담당한다.
<footer> 태그는 일반적으로

• 저자 정보
• 저작권 정보
• 연락 정보
• 사이트 맵
• 맨 위로 링크
• 관련된 문서

정도의 정보를 담는다.

📢 예시

<footer>
    <p>페이지 하단부를 의미하는 footer</p>
    <p><a href="링크">hello@email.com</a></p>
</footer>

🔊 결과

📝 <nav> 태그

<nav> 태그는 탐색 링크의 집합을 담당한다.

문서의 모든 링크가 <nav> 태그 안에 있어야하는 것은 아니다. 주요 탐색 링크 블록에만 사용한다. (일반적)

📢 예시

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>

🔊 결과

📝 <aside> 태그

<aside> 태그는 본문 내용을 제외하고, 간접적으로 주위의 내용과 관련있는 담당을 한다.

CSS를 적용해야, 의미가 더욱 확실히 보인다.

📝 <figure> 및 <figcaption> 태그

<figure> : 그림, 도표, 사진, 코드목록과 같은 태그를 지정 자체에 포함된 내용을 담당한다.

<figcaption> : <figure> 요소에 대한, 작은 부수설명 담당이라 생각한다.

📢 예시

<figure>
    <img src="www.w3schools.com/html/pic_trulli.jpg" alt="trulli">
   <figcaption>fig-1 trulli</figcaption>
</figure>

🔊 결과

📝 본문 소제목 태그

<h1></h1> ~ <h6></h6> 까지 6단계의 소제목을 표현한다.

📢 예시

<h1>h1 소제목</h1>
<h2>h2 소제목</h2>
<h3>h3 소제목</h3>
<h4>h4 소제목</h4>
<h5>h5 소제목</h5>
<h6>h6 소제목</h6>

🔊 결과

h1 소제목

h2 소제목

h3 소제목

h4 소제목

h5 소제목

h6 소제목

📝 단락 태그

<p> : paragraph의 p로 표현, 단락 태그가 끝나면 자동으로 개행된다.

📢 예시

<p>paragraph p Tag 입니다.</p>
<p>자동으로 개행이 됩니다.</p>

🔊 결과

paragraph p Tag 입니다.

자동으로 개행이 됩니다.

📝 텍스트 구분 태그 몇 가지

<i> : 텍스트에서 어떤 이유로 주위와 구분해야하는 부분을 나타낸다.
<em> : 텍스트 강세를 나타낸다. <em> 중첩하면 더 큰 강세를 뜻한다.

📢 예시

<p>Get out of bed <em>now</em>!</p>
<p>We <em>had</em> to do something about it.</p>
<p>This is <em>not</em> a drill!</p>

<p>I looked at it and thought <i>This can't be real!</i></p>

🔊 결과

Get out of bed now!

We had to do something about it.

This is not a drill!

I looked at it and thought This can't be real!

📝 구분선 태그 & 줄 바꿈 태그

<hr> : 수평선을 삽입 할 수 있는 태그, 종료태그(/)가 없어도 된다.
<br> : 줄바꿈을 삽입 할 수 있는 태그, 종료태그가 없어도 된다.

<hr>
<br>

🔊 결과

사이에 <br> 태그로 공백 넣은 것입니다. 

📝 목록 태그

<ul> : 순서 없는 목록 (unordered list)
<ol> : 순서 있는 목록 (ordered list)
<dl> : 정의 목록 (definition list)
<li> : 위에 큰 3가지 목록 스타일 안에 각각의 list 행

📢 예시

<ul>
  <li>ul 리스트 li 1</li>
  <li>ul 리스트 li 2</li>
</ul>
<ol>
  <li>ol 리스트 li 1</li>
  <li>ol 리스트 li 2</li>
</ol>
<ul>
  <li>dl 리스트 li 1</li>
  <li>dl 리스트 li 2</li>
</ul>

🔊 결과

• ul 리스트 li 1
• ul 리스트 li 2

1. ol 리스트 li 1
2. ol 리스트 li 2

• dl 리스트 li 1
• dl 리스트 li 2

📝 컨데이너 태그

<div> : 아무의미 없는 태그, 어떤 컨텐츠들끼리 목적에 따라 묶어야 할 때 사용한다. ( 줄바꿈 O = block 요소 )

<span> : 아무런의미 없는 태그, <div>와 같이, 어떤 목적에 따라 묶어야 할 때 사용한다. ( 줄바꿈 X = inline요소 )

📢 예시
<div>
... 컨텐츠1 ....
</div>

<div>
...컨텐츠2...
</div>

<p><span>Some text</span></p>

📝 테이블 태그

<table> : 테이블 컨테이너이며, 테이블의 시작과 끝에 삽입
<caption> : 테이블의 제목
<thead> : 테이블의 헤드 셀 그룹
<tbody> : 테이블의 데이터가 들어가는 셀 그룹
<tfoot> : 테이블의 바닥 셀 그룹

<tr> : 행 그룹, td와 th를 포함
<th> : 제목 셀
<td> : 데이터 셀

📢 예시

<table><caption>테이블 제목</caption>
  <thead>
    <tr>
      <th>thead 제목 셀</th>
      <td>thead 데이터 셀1</td>
      <td>thead 데이터 셀2</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>thead 제목 셀</th>
      <td>thead 데이터 셀1</td>
      <td>thead 데이터 셀2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>thead 제목 셀</th>
      <td>thead 데이터 셀1</td>
      <td>thead 데이터 셀2</td>
    </tr>
  </tfoot>
</table>

🔊 결과

📝 하이퍼링크 태그

<a href="" target=""> : href 속성을 이용해 URL 또는 HTML페이지로 이동가능하다. 

target 옵션

_blank : 새 윈도우
_self : 현재 윈도우
_parent : 부모 윈도우
_top : 브라우저 윈도우

📢 예시

<a href="www.google.com" target="_blank">구글로 이동</a>

🔊 결과

구글로 이동

📝 이미지 태그

<img src="주소" alt="대체 텍스트">

📢 예시

<img src="www.dog-zzang.co.kr/dog_board_f5/photo/80738700dog14.jpg" alt="허스키사진">

🔊 결과

📝 인용문 태그

<blockquote> : 안쪽의 텍스트가 긴 인용문임을 나타낸다. 주로 들여쓰기를 한 것으로 그려진다. (외형 변형 가능)

📢 예시

<p>Words can be like X-rays, if you use them properly—they’ll go through anything.
You read and you’re pierced.</p>
</blockquote>

🔊 결과

Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.

📝 REST API 란 ?

REST API : REST 기반으로 서비스 API(Application Interface) 를 구현한 것을 REST API 라고 한다.

최근 OpenAPI (누구나 사용할 수 있도록 공개된 API), 마이크로 서비스 등을 제공하는 기업에서는 대부분 REST API를 제공한다.

💡 REST API 특징

• REST 기반으로 시스템을 분산하여 확장성과 재사용성을 높여 유지보수를 편리하게 할 수  있다.
• REST는 HTTP 표준을 기반으로 구현하고, HTTP를 지원하는 프로그램 언어로 클라이언트,서버를 구현할 수 있다.

따라서, REST API를 구현하면, 클라이언트 뿐만 아니라, JAVA, C#, WEB 등을 이용해서 클라이언트를 제작할 수 있다.

💡 REST API 규칙

REST에서 가장 중요한 기본적인 규칙은 두 가지이다.
URI는 자원을 표현하는 데 집중학, 행위에 대한 정의는 HTTP Method를 통해 하는 것이 REST API를 설계하는 핵심이다.

1. URI는 정보의 자원을 표현해야 한다.

• 리소스명은 동사보다는 명사를 사용한다.
• URI는 자원을 표현하는 데에 중점을 두어야한다.
• GET같은 행위에 대한 표현이 들어가서는 안된다.

#안 좋은 예시
GET /getTodos/3
GET /todos/show/3

#좋은 예시
GET /todos/3

2. 자원에 대한 행위는 HTTP Method(GET, POST, PUT, DELETE 등)으로 표현한다.

주로 5가지의 Method(GET, POST, PUT, DELETE , PATCH)를 사용해서 CRUD를 구현한다.

#안 좋은 예시
GET /todos/delete/3

#좋은 예시
DELETE /todos/3

📝 RESTful 이란 ?

• RESTful은 일반적으로 REST라는 아키텍처를 구현하는 웹 서비스를 나타내기 위해 사용되는 용어이다.
• 따라서 REST API를 사용하는 웹 서비스를 우리는 "RESTful하다"고 할 수 있다.
• RESTful은 REST를 REST답게 쓰기 위한 방법으로 누군가가 공식적으로 발표한 것이 아니다.
• REST의 원리를 따르고 사용하는 시스템을 RESTful이라는 용어로 칭하게 된다.

💡 RESTful의 목적은 무엇인가 ?

이해하기 쉽고 쉬운 REST API를 만드는 것이다.

• RESTful한 API를 구현하는 근본적인 목적이 성능 향상이 중점이 아니다.
• API의 이해도와 호환성을 높이는 것이 주된 목적이다.
• 따라서, 성능이 중요한 상황에서는 굳이 RESTful한 API를 구현할 필요가 없다.

📝 REST API 설계 기본 규칙

1. URI는 정보의 자원을 표현해야 한다.

• 자원은 동사보다는 명사를 사용
• 자원은 대문자보다는 소문자 사용
• 자원의 도큐먼트 이름으로는 단수 명사를 사용
• 자원의 컬렉션 이름으로는 복수 명사를 사용
• 자원의 스토어 이름으로는 복수 명사를 사용

#안 좋은 예시
GET /Student/3

#좋은 예시
GET /students/3		# 소문자,복수명사 사용

2. 자원에 대한 행위는 HTTP Method(GET, POST, PUT, DELETE 등)로 표현한다.

- URI에 HTTP Method가 들어가면 안된다.

#안 좋은 예시
GET /students/delete/3

#좋은 예시
DELETE /students/3

- CRUD 기능을 나타내는 것은 URI에 사용하지 않는다.

#안 좋은 예시
GET /students/show/3
GET /students/insert/4

#좋은 예시
GET /students/3
POST /students/4

• : id 는 하나의 특정 자원을 나타내는 고유값이다.
  
  ex) student를 생성하는 route : POST/students
  ex) id=12인 student를 삭제하는 route: DELETE/students/12

🔊 용어

• 도규먼트 : 객체 인스턴스나 데이터베이스 레코드와 유사한 개념
• 컬렉션 : 서버에서 관리하는 디렉터리라는 자원
• 스토어 : 클라이언트에서 관리하는 자원 저장소

📝 REST API 설계 규칙

1. 슬래시 (/) 는 계층 관계를 나타내는 데 사용한다.

ex) https://academy.elice.io/classroom/teach 

2. URI 마지막 문자로 슬래시 (/) 를 포함하지 않는다.

ex) https://academy.elice.io/classroom/teach/ ← ( X )

• URI에 포함되는 모든 글자는 자원의 유일한 식별자로 사용되야 한다.
• URI가 다르다는 것은 불러오는 자원이 다르다는 뜻이고, 반대로 자원이 다르면 URI도 달라져야 한다.
• REST API는 분명한 URI를 만들어 통신을 해야 하기 때문에 혼동을 주지 않도록 URI 경로의 마지막에는
  슬래시 (/) 를 사용하지 않는다.

3. 하이픈 (-) 은 URI 가독성을 높이는데 사용한다.

4. 밑줄 ( _ ) 은 URI에 사용하지 않는다.

5. URI 경로에는 소문자를 사용한다.

6. 파일확장자는 URI에 포함하지 않는다.

ex) https://academy.elice.io/classroom/teach/111/python.png ← ( X )
ex) GET / classroom/teach/111/python HTTP/1.1 Host: academy.elice.io Accept: image/png ← ( O )

7. 자원 간에 연관 관계가 있는 경우 다음과 같이 작성한다.

/자원명/자원ID/관계가 있는 다른 자원명
ex) GET : /students/{studentid}/classroom

📝 REST API : CRUD 구현해보기

앞선 포스팅 ( Flask 1~ 6 )을 보면, render_template( ) 메소드를 이용해서, html에 출력 결과를 띄워 값들을 확인했었다.그리고 html에서는 jinja2 문법으로 해당 내용을 받아서 html에 띄울 수 있었다.

하지만, 이는 "API 서버"를 개발한 것이 아닌, Flask를 활용해서 "웹 어플리케이션"을 개발한 것이다.

REST API 서버를 개발 할 때는, 서버단에서 직접 렌더링(Rendering)해서 페이지를 보여주는 것이 아니라
웹 페이지를 구성하는데 필요한 "정보를 반환" 해주도록 구현해야 한다.

따라서, 백엔드 서버는 클라이언트(프론트 엔드) 와 데이터를 주고 받음으로써 통신을 하게 되는 것이다.

🔊 웹 상에서 가장 많이 쓰이는 데이터 형식은 JSON 형식의 데이터를 주고 받는다.

🔊 [Tips] REST API를 위해 구현되는 CRUD의 메소드와 URL의 이름은 CRUD에 맞추는 것이 일반적이다.

from flask import Flask, render_template, request, redirect, url_for
import json

app = Flask(__name__)

board = []  # 실제 DB가 아닌, 예제를 위한 board 리스트

# root 경로 
@app.route('/')
def index():
    return render_template("Boards.html", rows = board)

# POST : CREATE (C)
@app.route("/create", methods=["POST"])
def create():
    name = request.form["name"]
    context = request.form["context"]
    board.append([name,context])

    return json.dumps( { "status":200, "result" : { "id" : len(board)} } )  # json.dumps({ HTTP 상태, 반환할 결과 }) = 데이터를 json 형태로 변환해준다.


# GET : READ (R)
@app.route("/read", methods=["GET"])
def read():
    return json.dumps({"status":200, "result":board})


if __name__ == '__main__':
    app.run()

<!-- ./templates/Boards.html -->

<!doctype html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="Generator" content="EditPlus®">
        <meta name="Author" content="">
        <meta name="Keywords" content="">
        <meta name="Description" content="">
        <title>게시판 등록</title>
        <style type="text/css">
            body{ text-align: center; }
        </style>
     </head>
    <body>
        <h1>게시판</h1>
        <h4>추가</h4>
        <form action = "/create" method = "POST">
            이름<br>
            <input type = "text" name = "name" /><br>
            내용<br>    
            <textarea name = "context" cols="50" rows="10"></textarea><br><br>
            <input type = "submit" value = "게 시" /><br>
        </form>
        <h4>목록보기</h4>
        <table class="table" border="1" width = 600 style = "word-break:break-all" style="table-layout: fixed" align="center">
        <thread>
            <th width="4%">목차</th>
            <th width="15%">이름</th>
            <th width="25%">내용</th>
        </thread>
        {% for row in rows %}
        <tr>
            <td>{{ loop.index }}</td>
            <td>{{ row[0] }}</td>
            <td>{{ row[1] }}</td>
        </tr>
        {% endfor %}
        </table>
    </body>
</html>

💡 CREATE : POST

💡 READ : GET

📌 UPDATE(PUT)와 DELETE(DLEDTE)는 앞선, CREATE(POST), READ(GET)과 달리, Ajax를 이용해서 구현되기도 한다.

📝 Ajax : 비동기식(Asynchronous)  JavaScript + XML 이다.

Ajax 는 REST API를 손쉽게 구현하기 위해 사용되는 "프레임워크"이며, html 파일에서 간단히 사용하는 방법을 해보자.
( 이번에는, html 파일을 더, 주의깊게 보자. ( Ajax 부분 ) )

# Ajax_Example.py

from flask import Flask, render_template, request, jsonify  # Flask의 내장된 jsonify = json.dump() 와 같은 기능이다. json 형태로 데이터 반환

app = Flask(__name__)

board = []  # 임시 DB 개념 (사실,리스트)

# root
@app.route("/")
def index():
    return render_template("ajax_index.html", rows=board)

@app.route("/ajax", methods=["POST"])
def ajax():
    data = request.get_json()   # request.get_json() = POST 요청을 통해 얻은 데이터 -> json 형식으로 얻기 위한 메소드
    board.append(data)

    return jsonify(result="success", result2=data)  # json_dumps({}) 와 기능은 같다.

if __name__ == '__main__':
    app.run()

<!--ajax_index.html-->

<html>

<head>
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>
</head>

<body>
    <p id="example">AJAX</p>
    <input type="text" id="id1" placeholder="id">
    <input type="text" id="name1" placeholder="name">
    <input type="text" id="context1" placeholder="context">
    <input type="button" id="execute" value="execute">


    <script>
        $('#execute').click(function () {
            var id = $('#id1').val();
            var name = $('#name1').val();
            var context = $('#context1').val();

            var postdata = {
                'id': id, 'name': name, 'context': context
            }
            
            // ajax 형식으로 -> ajax example.py로 데이터 전송
            $.ajax({
                type: 'POST',
                url: '{{url_for("ajax")}}',
                data: JSON.stringify(postdata),		// 서버로 데이터를 넘길때는, JSON.stringify(데이터)로 String형식으로 넘겨준다.
                dataType: 'JSON',
                contentType: "application/json",
                success: function (data) {
                    alert('성공! 데이터 값:' + data.result2['id'] + " " + data.result2['name'] + " " + data.result2['context'])
                },
                error: function (request, status, error) {
                    alert('ajax 통신 실패')
                    alert(error);
                }
            })
        })
    </script>
    <table border=1 width="600">
        <thead>
            <td>목차</td>
            <td>이름</td>
            <td>내용</td>
        </thead>

        {% for row in rows %}
        <tr>
            <td>{{ loop.index }}</td>
            <td>{{ row['name'] }}</td>
            <td>{{ row['context'] }}</td>
        </tr>
        {% endfor %}
    </table>

</body>

</html>

💡 UPDATE & DELETE ( PUT & DELETE )

from flask import Flask, render_template, jsonify, request

app = Flask(__name__)

board = [{"id": 1, "name": "elice", "context": "test"}]

@app.route('/')
def index():
    return render_template('index.html', rows = board)

@app.route('/create', methods=['POST'])
def create():
    data = request.get_json()
    board.append(data)
    return jsonify(result = "success", result2= data)


@app.route('/delete', methods=['POST'])
def delete():
    del board[-1]

    return jsonify(result="success")
    

@app.route('/put', methods=['POST'])
def put():
    
    data = request.get_json()
    board.append(data)

    return jsonify(result="success",result2=data)

<!--index.html-->

<html>
<head>
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
    <p id="example">AJAX</p>
    <input type="text" id="id1" placeholder="id">
    <input type="text" id="name1" placeholder="name">
    <input type="text" id="context1" placeholder="context">
    <input type="button" id="create" value="create">
    <input type="button" id="update" value="update">
    <input type="button" id="delete" value="delete">
    
    
    <script>
    	// POST (CREATE)
        $('#create').click(function(){
            var id = $('#id1').val();
            var name = $('#name1').val();
            var context = $('#context1').val();

            var postdata = {
                'id':id, 'name':name, 'context':context
            }
            $.ajax({
                type: 'POST',
                url: '{{url_for("create")}}',
                data: JSON.stringify(postdata),
                dataType : 'JSON',
                contentType: "application/json",
                success: function(data){
                    alert('성공! 데이터 값:' + data.result2['id']+" " + data.result2['name']+ " " + data.result2['context'])
                },
                error: function(request, status, error){
                    alert('ajax 통신 실패')
                    alert(error);
                }
            })
        })
        
        // PUT (UPDATE)
        $('#update').click(function(){
            var id = $('#id1').val();
            var name = $('#name1').val();
            var context = $('#context1').val();

            var postdata = {
                'id':id, 'name':name, 'context':context
            }
            $.ajax({
                type: 'POST',
                url: '{{url_for("put")}}',
                data: JSON.stringify(postdata),
                dataType : 'JSON',
                contentType: "application/json",
                success: function(data){
                    alert('성공! 수정된 데이터 값:' + data.result2['id']+" " + data.result2['name']+ " " + data.result2['context'])
                },
                error: function(request, status, error){
                    alert('ajax 통신 실패')
                    alert(error);
                }
            })
        })
        
        // DELETE (DELETE)
        $('#delete').click(function(){
            $.ajax({
                type: 'POST',
                url: '{{url_for("delete")}}',
                contentType: "application/json",
                success: function(){
                    alert('성공! 데이터 삭제 완료')
                },
                error: function(request, status, error){
                    alert('ajax 통신 실패')
                    alert(error);
                }
            })
        })
    </script>
	<table border=1 width="600">
        <thead>
        <td>목차</td>
		<td>이름</td>
		<td>내용</td>
		</thead>
        
    {% for row in rows %}
		<tr>
            <td>{{ loop.index }}</td>
			<td>{{ row['name'] }}</td>
			<td>{{ row['context'] }}</td>
		</tr>
	{% endfor %}
	</table>
</body>
</html>