• 하나의 함수, 변수, 클래스, 컴포넌트에게 한번에 너무 많은 일(concerns)을 부여하게 되면 그 코드를 읽는 사람은 혼란스러울 수 있다.
• 가장 간단한 해결책은 한번에 한 가지 걱정만 하도록 단위를 잘게 나누는 것이다. 즉, 코드는 단위 별로 하나의 관심사만 갖도록 하고 그 관심사에 대해서만 충실히 동작하도록 만들어야 한다.
• 그렇게 되면 어떤 문제가 생겼을 때 전체 기능을 파악하기 위해 읽어야 하는 코드의 단위가 줄어들게 되고, 코드에 대한 파악이 빨라지므로 문제를 효과적으로 해결할 수 있다.Divide & Conquer (분할 - 정복)의 용이
• 또한 하나의 수정사항으로 인해 전체가 수정되는 것이 아니라, 해당 사항이 있는 일부분만 변경시키기 때문에 변화에 대해서도 내구성을 갖추게 된다.
• 컴퓨터 공학에서는 이렇게 '한번에 한 가지만 걱정해도 괜찮도록' 각각의 관심사에 따라 코드를 분리하는 기법을 관심사의 분리 라고 부른다.
• 관심사의 분리가 적절히 구현된 코드에서는 Loose Coupling (낮은 결합도, 각각의 코드가 서로 얽혀있지 않고 독립적으로 잘 분리되어 있음)과 High Cohesive (높은 응집도, 유사한 내용끼리 비슷한 위치에 잘 모여 있음)와 같은 특성을 발견할 수 있다.

관심사의 분리 장점

• 코드가 더욱 명료해짐 : 자신이 어떤 일을 하고, 어떤 목적을 가지고 설계된 코드인지 보다 잘 드러나게 됨.
• 코드 재사용성이 올라감 : 여러 역할이 엉켜있는 코드보다, 역할 별로 잘 분리되어 있는 코드를 재사용하기가 쉬움.
• 유지 보수가 용이함 : 변경 사항이 발생했을 때 해당 관심사에 연관된 코드만 수정하면 됨.
• 테스트 코드를 작성하기 쉬워짐 : 얽혀있는 로직보다 분리되어 있는 로직에 대한 테스트가 보다 더 간단해짐

  예시

  const loginForm = document.getElementsByClassName('loginForm')[0];
  const loginBtn = document.getElementById('loginBtn');
  

function handleInput() { const idValue = document.getElementById('id').value; const pwValue = document.getElementById('pw').value;

const isIdValid = idValue.length > 1; const isPasswordValid = pwValue.length > 1; const isLoginInputValid = isIdValid && isPasswordValid;

loginBtn.disabled = !isLoginInputValid loginBtn.style.opacity = isLoginInputValid ? 1 : 0.3; loginBtn.style.cursor = isLoginInputValid ? 'pointer' : 'default'; }

const init = () => { loginForm.addEventListener('input', handleInput); };

init();

```javascript
function $(selector) {
  return document.querySelector(selector)
}

const loginForm = $('.loginForm');
const loginBtn = $('#loginBtn');

const validator = {
  id: (id) => id.length > 1,
  password: (password) => password.length > 1,
}

function validateForm(form, validator) {  
  for (const key in form) {
    const value = form[key]
    const isValid = validator[key](value)

    if (!isValid) return false
  }

  return true
}

function handleButtonActive(button, isFormValid) {
  button.disabled = isFormValid ? false : true;
  button.style.opacity = isFormValid ? 1 : 0.3;
  button.style.cursor = isFormValid ? 'pointer' : 'default';  
}

function handleInput() {
  const isFormValid = validateForm({
    id: $('.id').value,
    password: $('.pw').value
  }, validator)

  handleButtonActive(loginBtn, isFormValid)
}

function init() {
  loginForm.addEventListener('input', handleInput);
};

init();

View와 Logic의 분리

• '관심사의 분리'를 프론트엔드 개발에 적용할 수 있다.

• Redux와 Create React App의 창시자로 React 생태계에서 아주 유명한 Dan Abramov는 2015년 본인의 블로그에 Presentational - Container 패턴으로 React 컴포넌트를 관리하는 방법을 제안했다. (본문 링크)

• Presentational Component : UI Only 컴포넌트 (View)

    const UserList = ({ users }) => {
        return (
            <ul>
                {users.map(user => {
                    return <li key={user.id}>{user.name}</li>
                })}
            </ul>
        )
    }

  • state, effect 등 로직 없음 → 화면을 렌더링하는 데 필요한 코드만 존재 (갖더라도 UI에 대한 상태만)
  • 함수 컴포넌트로 구현

• Container Component : Logic Only 컴포넌트 (Logic)

    class UserListContainer extends React.Component {
        state = {
            users: []
        }
  
        componentDidMount() {
            fetchUsers("/users")
                .then(res => res.json())
                .then(res => this.setState({ users: res.users }))
        }
  
        render() {
            return <UserList users={this.state.users}>
        }
    }

  • 데이터 호출, state, 필터링 등 복잡한 로직을 처리하는 코드만 존재 (UI 관련 코드를 가져서는 안됨)
  • 클래스형 컴포넌트로 구현

• 이 패턴이 제안될 당시에는 Hooks가 존재하지 않았다. 그래서 함수 컴포넌트는 State와 Effect를 처리할 수 없었고, UI를 그리는 데만 제한적으로 사용되었다. 반면 클래스형 컴포넌트는 State와 Life Cycle API(Effect에 대응됨)를 사용해 React의 모든 기능을 구현할 수 있었다. => 이렇게 View와 Logic을 분리함으로써 컴포넌트는 더 작은 영역에 대해 더 확실한 책임을 지는 여러 개의 컴포넌트로 분할된다.

• View에 집중하는 Presentational Component는 단순히 주입 받은 정보를 렌더링할 뿐(ex. (state, props) ⇒ UI)이다. 주입 받은 정보만 올바르다면 컴포넌트는 항상 올바른 UI를 리턴하게 된다. 로직과 분리되었기 때문에 여러 곳에서 재활용하기도 쉽고, 여러 가지 Container Component와 조합하기도 쉽다.

• 하지만 Hooks의 등장으로 더이상 이 패턴을 권장하지 않는다.

Custom Hook

• Custom Hook은 이름이 use로 시작하는 자바스크립트 함수다.
• Custom Hook을 사용하면 지금까지 컴포넌트 내부에 한 덩이로 결합하여 사용했던 State와 Effect를 다음과 같이 분리하여 사용할 수 있다. 마치 여러 벽돌을 끼워 맞춰 건물을 만들듯이 React 컴포넌트를 여러 Hook을 조합하는 방식으로 개발할 수 있게 된다.
• 또한 로직을 독립적인 함수로 분리함으로서 하나의 로직을 여러 곳에서 반복적으로 재사용할 수 있다.

const UserList = ({ users }) => {
    const [users, setUsers] = useState([])

    useEffect(() => {
        fetchUsers("/users")
            .then(res => res.json())
            .then(res => setUsers(res.users))
    }, [])

    return (
        <ul>
            {users.map(user => {
                return <li key={user.id}>{user.name}</li>
            })}
        </ul>
    )
}

• View와 Logic을 분리해보면 아래와 같다.

const UserList = ({ users }) => {
    // Logic
    const users = useGetUserList()

    // View
    return (
        <ul>
            {users.map(user => {
                return <li key={user.id}>{user.name}</li>
            })}
        </ul>
    )
}

const useGetUserList = () => {
    const [users, setUsers] = useState([])

    useEffect(() => {
        fetchUsers("/users")
            .then(res => res.json())
            .then(res => setUsers(res.users))
    }, [])

    return users
}

• UserList 의 내용을 파악해야 하는 입장에서 적절하게 지어진 Custom Hook의 이름과, 그 Hook이 리턴하는 user 라는 이름의 변수를 통해 세부 구현사항은 모르겠지만, 어쨌든 저것이 유저들에 대한 정보라는 사실은 어렵지 않게 알 수 있게 된다.
• 이제 유저의 정보를 가져오는 세부 구현 사항에 관해서는 UserList 라는 컴포넌트를 살펴보지 않고 useGetUserList hook만 집중하여 살펴보면 된다.

여러 기능이 포함된 컴포넌트의 분리

• 사용자에게 input을 받고, 해당 내용을 서버로 전송하는 기능과 화면의 스크롤 높이, 위치 등을 받아오는 기능이 모두 들어있는 경우

const UserInput = () => {
    const [size, setSize] = useState({ width: 0, height: 0 })
    const [position, setPosition] = useState({ x: 0, y: 0 })
    const [userInfo, setUserInfo] = useState({
        username: "",
        id: "",
        password: "",
        email: ""
    })

    const handleUserInput = (e) => {
        const { name, value } = e.target

        setUserInfo(prev => ({ ...prev, [name]: value }))
    }

    useEffect(() => {
        const handleDocumentSize = () => { ... }

        document.addEventListener("resize", handleDocumentSize)
        return () => {
            document.removeEventListener("resize", handleDocumentSize)
        }
    }, [])

    useEffect(() => {
        const handleDocumentPosition = () => { ... }

        document.addEventListener("resize", handleDocumentPosition)
        return () => {
            document.removeEventListener("resize", handleDocumentPosition)
        }
    }, [])

    return (
        <div>
            <input name="username" onChange={handleUserInput} />
            <input name="id" onChange={handleUserInput} />
            <input name="password" onChange={handleUserInput} />
            <input name="email" onChange={handleUserInput} />
        <div />
    )
}

• 두 가지 Custom Hook으로 나누어 분리해보면, 먼저 UserInput 에 Logic을 추출하여 View 만 남았고, 유저 정보와 관련된 useUserInput 과 화면 크기 조절시마다 문서의 크기와 위치를 리턴하는 useDocumentResize 두 가지 로직으로 분리되어 있음을 확인할 수 있다.

const UserInput = () => {
    const { userInfo, handleUserInfo } = useUserInput()
    const { size, position } = useDocumentResize()

    return (
        <div>
            <input name="username" onChange={handleUserInput} />
            <input name="username" onChange={handleUserInput} />
            <input name="username" onChange={handleUserInput} />
            <input name="username" onChange={handleUserInput} />
        <div/>
    )
}

• 원래 UserInput 에 한덩어리로 있던 유저 정보 입력 관련한 로직이 useUserInfo 로 분리되었다.

const useUserInfo = () => {
    const [userInfo, setUserInfo] = useState({
        username: "",
        id: "",
        password: "",
        email: ""
    })

    const handleUserInput = (e) => {
        const { name, value } = e.target

        setUserInfo(prev => ({ ...prev, [name]: value }))
    }

    return { userInfo, handleUserInput }
}

• 이전에 UserInput 에 한덩어리로 있던 화면 리사이즈 관련한 로직이 useDocumentResize 로 관심사에 따라 분리되었다.

const useDocumentResize = () => {
    const [size, setSize] = useState({ width: 0, height: 0 })
    const [position, setPosition] = useState({ width: 0, height: 0 })

    useEffect(() => {
        const handleDocumentSize = () => { ... }

        document.addEventListener("resize", handleDocumentSize)
        return () => {
            document.removeEventListener("resize", handleDocumentSize)
        }
    }, [])

    useEffect(() => {
        const handleDocumentPosition = () => { ... }

        document.addEventListener("resize", handleDocumentPosition)
        return () => {
            document.removeEventListener("resize", handleDocumentPosition)
        }
    }, [])

    return { size, position }
}

• 모든 경우에 대해 무조건적으로 이런 식의 분리가 권장되는 것은 아니다. 섣부른 추상화는 오히려 코드를 여기저기로 분리시켜 변경을 힘들게 만든다. 추상화가 필요한 경우와 그렇지 않은 경우를 잘 판단하여 코드를 분리해야 한다.

참고

1) Custom Hook의 이름은 use로 시작되어야 한다.

• React에서 Hook의 동작을 처리하는 내부적인 규칙과도 관련이 되어 있고, 공식적인 컨벤션이기 때문에 Custom Hook을 작성할 때는 꼭 use- 로 시작하는 이름을 지어야 한다.

2) Hook 안에서 다른 Hook을 호출할 수 있다.

• Hook은 State, Effect를 포함할 수 있는 자바스크립트 함수이고, 또 다른 Hook 역시 동일하게 State, Effect를 포함하고 있는 자바스크립트 함수이기 때문에 Hook과 Hook이 중첩 호출될 수 있다.

import { useParams } from "react-router-dom"

const useGetUserList = () => {
    const [users, setUsers] = useState([])
    **const { id } = useParams()**

    useEffect(() => {
        fetchUsers(`/users/${id}`)
            .then(res => res.json())
            .then(res => setUsers(res.users))
    }, [])

    return users
}

3) 같은 Hook을 사용하는 두 개의 컴포넌트는 state를 공유하지 않는다.

• 두 Custom Hook은 서로 호출되는 위치와 타이밍이 다르며, 애초에 서로 다른 스코프(유효범위)를 생성하기 때문에 컴포넌트를 여러번 호출하는 것처럼 완전히 독립적으로 작동한다.

Use Cases of Cumstom Hook

1) useToggle

• boolean 타입의 state를 toggle하는 기능 예시.

    export const useToggle = (initialValue = false) => {
      const [state, setState] = useState(initialValue);
  
        const handleToggle = () => {
            setState(prev => !prev)
        }
  
      return [state, handleToggle]
    };

2) useLockBodyScroll

• Modal이 띄워져 배경 스크롤을 막아둬야 할 때 사용합니다.

    const useLockBodyScroll = () => {
      useLayoutEffect(() => {
        document.body.style.overflow = 'hidden';
        return () => {
          document.body.style.overflow = '';
        };
      }, []);
    };

3) useOutsideClick

• 특정 DOM의 바깥 지점이 클릭 되었는지를 파악하기 위해 해당 DOM의 ref를 인자로 넘기고, 클릭이 일어났을 때의 동작을 두 번째 인자로 정의해둡니다.

    import { useState, useEffect, useRef } from "react";
  
    function App() {
      const ref = useRef();
      const [isModalOpen, setModalOpen] = useState(false);
  
        // 활용 예시
      **useOnClickOutside(ref, () => setModalOpen(false));**
  
      return (
        <div>
          {isModalOpen ? (
            **<div ref={ref}>**
              👋 Hey, I'm a modal. Click anywhere outside of me to close.
            </div>
          ) : (
            <button onClick={() => setModalOpen(true)}>Open Modal</button>
          )}
        </div>
      );
    }

    // Custom Hook이 Side Effect만 일으키고 return 값이 없으면
    // 굳이 리턴 값을 정의해주지 않아도 됩니다!
    function useOnClickOutside(ref, handler) {
      useEffect(
        () => {
          const listener = (event) => {
            if (!ref.current || ref.current.contains(event.target)) {
              return;
            }
            handler(event);
          };
  
          document.addEventListener("mousedown", listener);
          document.addEventListener("touchstart", listener);
          return () => {
            document.removeEventListener("mousedown", listener);
            document.removeEventListener("touchstart", listener);
          };
        },
  
        [ref, handler]
      );
    }

4) useFetch

• 특정 url에 대한 GET 요청에 대해 loading, data, error 세 가지 값을 리턴하도록 하는 Custom Hook
• loading: 데이터가 요청 중일 때는 true, 그 이외의 경우에는 false를 리턴
• data: 서버에서 가져온 값. 초기값은 undefined, 완료된 후에는 해당 값을 리턴
• error: 요청 도중 error가 일어났을 때 에러 객체를 리턴하고, 그 이외의 경우에는 false를 리턴

//usefetch.js
import { useState, useEffect } from "react";

//url을 인자로 받아온다.
const useFetch = url => {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    setTimeout(() => {
      fetch(url)    
        .then(res => {
          if (!res.ok) {
            throw Error("could not fetch the data for that resource");
          }
          return res.json();
        })
        .then(_data => {
          setData(_data);
          setIsPending(false);
          setError(null);
        })
        .catch(err => {
          setIsPending(false);
          setError(err.message);
        });
    }, 1000);
  }, [url]);

  return { data, isLoading, error };
};

export default useFetch;
    export default function Component() {
      const url = "http://jsonplaceholder.typicode.com/posts"
      const { loading, data, error } = useFetch(url)

      return <div>{status}</div>
    }

백앤드로부터 데이터를 받아오려면 api를 호출하고 데이터를 응답 받는다. 이 때 자바스크립트 Web API fetch() 함수를 쓰거나 axios 라이브러리를 사용할 수 있다. Web API는 클라이언트 측에서 사용할 수 있는 자바스크립트 내장함수로 현업에서는 axios를 많이 사용한다.

fetch() 함수 기본

fetch('api 주소')
  .then(res => res.json())
  .then(res => {
    // data를 응답 받은 후의 로직
  });

fetch('api 주소')
  .then(function(res) {
    return res.json();
  })
  .then(function(res) {
    // data를 응답 받은 후의 로직
  });

• 위 코드에서 변수의 scope는 각 함수이므로 첫 번째 then와 두 번째 then 안에 있는 res 값은 서로 다르다.

fetch() - method 'get'

• fetch() 함수의 default method는 get이다.

  //api 명세
  설명: 유저 정보를 가져온다.
  base url: https://api.google.com
  endpoint: /user/3
  method: get
  응답형태:
    {
        "success": boolean,
        "user": {
            "name": string,
            "batch": number
        }
    }
  

// 호출하기 fetch('https://api.google.com/user/3') .then(res => res.json()) .then(res => { if (res.success) { console.log(${res.user.name} 님 환영합니다); } });

- api 주소를 상황에 맞게 유동적으로 바꿔야 할 경우 
```javascript
import React, { useEffect } from 'react';

function User(props) {
  useEffect(() => {
      const { userId } = props;
        fetch(`https://api.google.com/user/${userId}`)
          .then(res => res.json())
          .then(res => {
            if (res.success) {
                console.log(`${res.user.name}` 님 환영합니다);
            }
        });      
    }, []);
  ...
}

fetch() - method 'post'

• fetch() post인 경우에는 fetch() 함수에** method 정보를 인자로 넘겨주어야 한다.**

  설명: 유저를 저장한다.
  base url: https://api.google.com
  endpoint: /user
  method: post
  요청 body:
    {
        "name": string,
        "batch": number
    }
  

응답 body: { "success": boolean }

fetch('https://api.google.com/user', { method: 'post', body: JSON.stringify({ name: "kayoung", batch: 1 }) }) .then(res => res.json()) .then(res => { if (res.success) { alert("저장 완료"); } })

1. 두 번째 인자에 method 와 body를 보내준다.
2. method는 post
3. body는 JSON형태로 보내기 위해 JSON.stringfy() 함수에 객체를 인자로 전달하여 JSON형태로 변환한다.
- **fetch 함수는 post로 데이터를 보낼 때 JSON.stringfy를 해주어야 하는 반면, axios는 객체를 그대로 작성해도 되는 장점**이 있다. 이렇듯 axios는 소소한 편의성을 제공해주고, 요청과 응답에 대한 확장성 있는 기능을 만들 수도 있습니다.
## fetch() - method 'get'에 parameter 전달
- path parameter가 아닌 query string으로 넘겨줘야 할 경우, api 주소 뒤에 붙여준다.
```javascript
설명: 유저 정보를 가져온다.
base url: https://api.google.com
endpoint: /user
method: get
query string: ?id=아이디
응답형태:
    {
        "success": boolean,
        "user": {
            "name": string,
            "batch": number
        }
    }

fetch('https://api.google.com/user?id=3')
  .then(res => res.json())
  .then(res => {
    if (res.success) {
        console.log(`${res.user.name}` 님 환영합니다);
    }
  });

res.json()

fetch('https://api.google.com/user', {
    method: 'post',
    body: JSON.stringify({
        name: "kayoung",
        batch: 1
    })
  })
  .then(res => {       // 첫 번째 then
    console.log(res);  

    return res.json();
  })
  .then(res => {       // 두 번째 then
    if (res.success) {
        alert("저장 완료");
    }
  })

• 첫 번째 then 함수에 전달된 인자(res)는 http 통신 요청과 응답에서 '응답'의 정보를 담고 있는 객체로, Response Object라고 한다.
• 응답으로 받은 JSON 데이터를 사용하기 위해서는 Response Object 의 json 함수를 호출하고, return 해야하는데, 두 번째 then 함수에서 응답 body의 데이터를 받을 수 있다.

에러 처리 - 첫 번째 then 함수에 로직 추가

설명: 유저를 저장한다.
base url: https://api.google.com
endpoint: /user
method: post
요청 body:
    {
        "name": string,
        "batch": number
    }

응답 body:
    1. 제대로 저장했으면 status code를 200 전달. 응답 body는 없음
    2. 권한 오류가 생기면 status code를 403으로 전달하고. 응답 body는 아래와 같음
        {
            success: false,
            message: "권한이 없습니다"
        }

fetch('https://api.google.com/user', {
    method: 'post',
    body: JSON.stringify({
        name: "kayoung",
        batch: 1
    })
  })
  .then(res => {
    if (res.status === 200) {
        alert("저장 완료");
    } else if (res.status === 403) {
        return res.json();
    }
  })
  .then(res => {
    console.log("에러 메시지 ->", res.message);
  })

컴퓨팅적 방법론과 모델을 통해 우리는 혼자서는 만들 수 없는 시스템을 설계하고 어려운 문제를 해결할 수 있을 거라는 자신감을 어을 수 있다. 컴퓨팅적 사고를 한다는 것은 컴퓨터 공학의 기본 개념을 끌어와 문제를 해결하고, 시스템을 설계하고, 인간의 행동을 이해할 수 있다는 것이다. - Computational Tinking M.Jeannette

개발자란?

=> 세상의 문제를 코딩(기술)으로 해결하는 사람이라고 할 수 있다. 하지만 개발자가 하는 일의 범위는 아래와 같이 넓다.

컴퓨팅 사고

• 컴퓨터(사람이나 기계)가 효과적으로 일을 수행할 수 있도록 문제를 정의하고, 그에 대한 답을 기술하는 것이 포함된 사고 과정 일체

• '인형 뽑기'를 예로 들어보자. 인형 뽑기 위해 수행해야 하는 작업은 아래와 같다. 인형뽑기 기계를 본다 -> 달려간다 -> 천원을 넣는다 -> 천원을 잃는다

• 하지만, 여기에서 우리가 생각하지 못한 변수, 좀더 세분화된 단계가 있다. 레버를 오른쪽으로 움직인다-> 레버를 뒤쪽으로 움직인다 -> 선택 버튼을 누른다 -> 집게가 인형에 제대로 걸렸는가?-> 뽑기 성공 or 뽑기 실패

• 이를 위와 같이 구조화할 수 있다. '컴퓨터 사고'는 즉, '문제 해결 능력'이라고 할 수 있다.

  컴퓨팅 사고를 위한 방법

  <클린코드> 모든 컴퓨터 프로그래밍은 3가지 키워드로 이루어진다.

• 순차 : 코드는 순차적으로 읽힌다.

• 분기 : 조건문 (if, while문..)

• 반복 : for문..

• 문제를 이해하고, 문제를 작게 분해해서, 어떻게 해결할지 생각해보자 => 컴퓨터가 알아듣게 생각하고 코드로 옮기는 것

• 문제 해결 능력을 키우려면? => 학습량, 검색, 생각을 먼저할 것

참고

• https://www.cs.columbia.edu/~wing/ct-korean.pdf
• https://brunch.co.kr/@brunchjwshim/43#:~:text=%EC%BD%94%EB%94%A9%EC%9D%84%20%ED%95%98%EB%A0%A4%EB%A9%B4%20%EB%B0%98%EB%93%9C%EC%8B%9C%20%EC%95%8C%EC%95%84%EC%95%BC,%EB%AC%B8%EC%A0%9C%EB%93%A4%EA%B3%BC%20%EC%96%B4%EB%96%BB%EA%B2%8C%20%EC%97%B0%EA%B2%B0
• Flow Chart 만들기: https://app.diagrams.net/

• 백엔드에서 가지고 있는 데이터는 많고, 그 데이터를 한 화면에 전부 보여줄 수 없는 경우에 사용. 모든 데이터를 한번에 보여줄 수 없다면 일정 길이로 끊어서 전달해야 한다. (ex: 게시판의 "이전/다음 페이지"를 끊어 보여주는 기능)
• 프론트엔드에서 현재의 위치(Offset)과 추가로 보여줄 컨텐츠의 수(Limit)를 백엔드에 전달, 백엔드에서는 그에 해당하는 데이터를 끊어 보내주는 방식으로 구현한다.

Query Parameter

• 이 과정에서 Query Parameter(혹은, Query String, 쿼리 스트링)를 사용한다.

• 쿼리 스트링이란 말 그대로 해당 엔드포인트에 대해 질의문(query)를 보내는 요청을 뜻한다.

• 예를 들어, localhost:8000/products?limit=10&offset=5 라는 주소가 있다고 가정했을때, API 뒷 부분에 붙어있는 ? 로 시작하는 텍스트가 쿼리스트링이다.

• ?limit=10&offset=5 의 경우, *"limit이 10이면서 offset이 5일 경우의 product 페이지를 보여달라"* 는 요청으로 해석된다.

• ? : 쿼리스트링의 시작. url 에서 ? 기호는 유일무이

• limit : 한 페이지에 보여줄 데이터 수

• offset : 데이터가 시작하는 위치(index)

• parameter=value 로 필요한 파라미터의 값을 적습니다.

• 파라미터가 여러개일 경우 &를 붙여서 여러개의 파라미터를 넘길 수 있다.

useLoacation().search

동적 라우팅 vs 페이지네이션

• 동적 라우팅

1. 리스트 페이지에서 카드를 클릭
2. url 이동. 이때, 카드의 고유한 id 값이 url 에 포함됩니다.
3. 이동한 페이지에서, url 에 담겨있는 id 값을 useParams 훅을 이용하여 가져온다.
4. 가져온 id 값을 이용하여 데이터를 요청한다.

• 페이지네이션

1. 리스트 페이지에서 페이지 이동 버튼을 클릭
2. url 이동. 이때 url 에는 각 버튼에 해당하는 쿼리스트링이 포함
3. 이동한 페이지에서, url 에 담겨있는 쿼리스트링을 useLocation 훅을 이용하여 가져온다.
4. 가져온 쿼리스트링을 이용하여 데이터를 요청한다.

• Path Parameter 에 대한 정보가 useParams 훅이 반환한 객체 안에 담겨있었듯이, 쿼리스트링에 대한 정보는 useLocation 훅이 반환한 객체의 search 프로퍼티 안에 담겨있다. ```jsx
• // current url -> localhost:3000/products?offset=10&limit=10*

function ProductList() { const location = useLocation();

**console.log(location.search) // ?offset=10&limit=10

return (
    ...
)**

}

* limit, offSet은 네이밍으로 바뀔 수 있다. (ex: pageNumber)
- 이를 통해 url 에서 쿼리스트링 정보를 받아와서, 해당 정보를 통해 데이터를 요청할 수 있다.

```jsx
fetch(`${API}${location.search}`)
    .then(res => res.json())
    .then(res => ...)

// index.html
<!DOCTYPE html>
  <head>
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

// index.js
ReactDOM.render(<Router />, document.getElementById("root"));

// Router.js
const Router = () => {
  return (
    <BrowserRouter>
            <Nav />
      <Routes>
        <Route path="/" element={<App />} />
        <Route path="/users" element={<Users />} />
        <Route path="/products" element={<Products />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
            <Footer />
    </BrowserRouter>
  );
};

• index.html : public/index.html에 위치하며 React 페이지 로드 시 가장 먼저 호출되는 영역
• index.js : React 앱을 렌더하고 index.html의 div#root 이하에 끼워넣는 역할
• Router.js : React 앱이 경로에 따라 어떤 컴포넌트를 보여줄지 결정하는 역할 (화면 바꿔 끼우기)

정적 라우팅(Static Routing)이란?

"/"         => <App />
"/users"    => <Users />
"/products" => <Products />

동적 라우팅(Dynamic Routing)이란?

• 일반적인 웹 사이트는 전체 아이템이 보여지는 리스트 페이지와 해당 아이템의 디테일 한 정보로 구성된상세 페이지로 구성된다.
• 도메인 주소 끝에 해당 아이템의 id값이 추가되어 페이지를 이동하고, 이동한 페이지에서는 id값에 해당하는 데이터가 보여지는 것을 볼 수 있다.

• url 을 살펴보면 url 마지막에 특정 id 값이 들어가고(/32692, /53424), 해당 id 값에 따라 서로 다른 상세 페이지 정보가 화면에 그려지는 것을 볼 수 있다.

• id 값에 따라 무수히 많은 url 이 나타날 것이고, 각각의 모든 url 에 대해 미리 경로의 형태와 갯수를 결정할 수 없게 된다.*
• 즉, URL에 들어갈 id를 변수처럼 다뤄야 할 필요성이 생긴 것입니다.
• 이처럼 정적이지 않은, 동적일 수 있는 경로에 대하여 라우팅을 하는 것을 동적 라우팅(Dynamic Routing)이라고 한다. => 라우트 경로에 특정 값을 넣어 해당하는 페이지로 이동할 수 있게 하는 것을 동적 라우팅이라고 한다.

동적인 라우팅을 처리하는 방법: Path Parameter, Query Parameter

• 동적인 경로를 처리할 수 있는 방법은 Path Parameter와 Query Parameter가 있다. 1) Path Parameter

  // Bad
  "/users/1" => <Users id={1} />
  "/users/2" => <Users id={2} />
  "/users/3" => <Users id={3} />
  "/users/4" => <Users id={4} />
  "/users/5" => <Users id={5} />
  
  // Good
  "/users/:id" => <Users /> // useParams().id

  2) Query Parameter

  // Bad
  "/search?keyword=리액트"    : <Search keyword="리액트" />
  "/search?keyword=라우팅"    : <Search keyword="라우팅" />
  "/search?keyword=쿼리스트링" : <Search keyword="쿼리스트링" />
  "/search?keyword=SPA"     : <Search keyword="SPA" />
  
  // Good
  "/search?keyword=something" : <Search /> // useLocation().search

  Path Parameter

  localhost:3000/product/2
  localhost:3000/product/45
  localhost:3000/product/125

• 라우트 경로 끝에 들어가는 각기 다른 id 값들을 저장하는 매개 변수

  <Router>
  <Switch>
    <Route exact path='/product/:id' component ={producitDetail} />
  </Switch>
  </Router>

• :는 Path Parameter가 올 것을 의미

• id는 해당 Path Prameter의 이름

동적 라우팅 흐름

1. 카드를 클릭하면, onClick 이벤트시 발생하는 navigate 함수를 통해 /product/1 로 이동. URL 이 /product/1 로 변하면, Router 컴포넌트에 정의되어 있는path='/product/:id' 에 따라, ProductDetail 컴포넌트 마운트
2. ProductDetail 컴포넌트에서는 백엔드에 id 가 1 인 아이템에 대한 정보 요청
3. 응답으로 받은 정보를 setData 함수를 통해 data 라는 state에 저장하고, 이를 통해 상세 페이지 UI가 그려진다.

useNavigate, useLocation, useParams Hook

• React Router 에서는 useNavigate, useLocation, useParams 라는 라우팅 관련한 훅을 제공한다.

  useNavigate Hook

  function Product(props) {
  const navigate = useNavigate();
  
  const goToDeatil = () => {
    navigate(`/product/${props.id}`);
  }
  
  return (
        <div className="productContainer" onClick={goToDetail}>
            ...
        </div>
    )
  }

• useNavigate 훅을 실행하면 페이지를 이동시키는(url을 변경시키는) 함수를 반환한다. 위 예제 코드에서 해당 함수를 navigate 라는 변수에 할당했다. 따라서, navigate()와 같은 방식으로 함수를 호출할 수 있습니다.

• navigate() 함수의 인자에 이동하고자 하는 url(ex. /products)을 전달하면, 해당 url로 화면을 이동한다.

  navigate('/product/1'); // '/product/1' 로 이동

• 인자에 정수값을 넣어주면 브라우저 방문 기록에 남아있는 경로들을 앞 뒤로 탐색할 수 있다.

  navigate(-1); // 뒤로 가기
  navigate(-2); // 뒤로 2페이지 가기
  navigate(1);  // 앞으로 가기

  useLocation Hook

  function ProductDetail(props) {
    const location = useLocation();
  
    console.log(location);
  
  return (
        ...
    )
  }

• useLocation 훅을 실행하면 경로 정보를 담고 있는 객체 를 반환한다. 위 코드에서 해당 객체를 location 이라는 변수에 할당해 주었다. location 변수를 콘솔로 출력해 보면 다음과 같은 로그가 출력 된다.

  {
  pathname: '/product/1',  //현재 경로 값
  search: '', // 현재 경로의 query parameter 값
  hash: '', 
  state: null, 
  key: 'default'
  }

useParams Hook

// 현재경로: /product/1

function ProductDetail(props) {
  const params = useParams();

  console.log(params);

  return(
    ...
   )
    }

//반환 
{
  id: 1 //id 프로퍼티 키 네임은 Router에서 :id로 표기해준 값
}

• url에 담겨있는 path parameter에 대한 정보를 가져올 수 있다.
• 정보는 parameter 객체로 반환하고, route에서 지정한 key 이름으로 반환한다.

  <BrowserRouter>
    <Routes>
        <Route path='/product/:id' element={<ProductDetail />} />
    </Routes>
  </BrowserRouter>

  useParams().id

• URL에 담긴 id 값을 가져올 때 useParam 훅을 이용한다. Path Parameter 로 명시해둔 값은 useParams 훅이 리턴하는 객체에 담기기 때문이다.

  // ProductDetail.js
  // current url -> localhost:3000/product/1
  

function ProductDetail() { const params = useParams();

console.log(params.id) // 1

return (
    ...
);    

}

- 따라서 `useEffect` 훅에서 해당 `id` 값을 통해 서버에 요청을 보내는 것을 통해 원하는 정보를 받아올 수 있다.
```javascript
useEffect(() => {
  fetch(`${API}/${params.id}`)
        .then(res => res.json())
        .then(res => setData(res));
},[]);

정리

• 리스트 페이지의 개별 상품을 클릭 → navigate("/product/1") 로 상세 페이지로 이동한다.

• 상세 페이지로 이동하면 url은 "http://localhost:3000/product/1" 과 같이 변경되어 있다.

• 페이지에 필요한 데이터를 useEffect 에서 fetching 한다.

• 필요한 id는 URL에 존재하므로 useParams().id 에서 가져올 수 있다.

• 해당 id를 가지고 백엔드에서 만들어준 API를 호출한다.

    ```jsx
    function ProductDetail() {
      const params = useParams();
  
      useEffect(() => {
        const productId = params.id;
            **fetch(`http://123.456.789:8000/products/${productId}`) // 1**
                .then(res => res.json())
                .then(res => setData(res));
      },[]);
  
      return (
        ...
      )
    }
    ```

• 서버에서 가져온 데이터(res)를 컴포넌트의 data state 에 저장해준다.

• state 에 담긴 데이터로 컴포넌트 UI 를 render 해준다.

import React, { useState } from "react";

const options = ["Bell Pepper", "Sausage", "Pepperoni", "Pineapple"];
// Static data = does not change. 정적 데이터는 리렌더링될 필요가 없기 떄문에 함수 밖에 쓴다. 

export default function PersonalPizza() {
  const [selected, setSelected] = useState([]);
  //selected array, dynamic data = it changes, based on user's action.

  const toggleTopping = ({target}) => {
    const clickedTopping = target.value;
    setSelected((prev) => {
     // check if clicked topping is already selected
      if (prev.includes(clickedTopping)) {
        // filter the clicked topping out of state
        return prev.filter(t => t !== clickedTopping);
      } else {
        // add the clicked topping to our state
        return [clickedTopping, ...prev];
        //When updating an array in state, we do not just add new data to the previous array. We replace the previous array with a brand new array. This means that any information that we want to save from the previous array needs to be explicitly copied over to our new array.
      }
    });
  };

  return (
    <div>
      {options.map(option => (
        <button value={option} onClick={toggleTopping} key={option}>
          {selected.includes(option) ? "Remove " : "Add "}
          {option}
        </button>
      ))}
      <p>Order a {selected.join(", ")} pizza</p>
    </div>
  );
}

예제 - Grocery Cart

• item 클릭 시 cart에 담기고, 담긴 item 클릭시 삭제

  import React, { useState } from "react";
  import ItemList from "./ItemList";
  import { produce, pantryItems } from "./storeItems";
  

export default function GroceryCart() { // declare and initialize state const [cart, setCart] = useState([]);

const addItem = (item) => { setCart((prev) => { return [item, ...prev] }) };

const removeItem = (targetIndex) => { setCart((prev) => { return prev.filter((item, index) => index !== targetIndex) }) };

return (

## Object in State
- 연관된 변수의 묶음은 객체로 처리한다. 
```javascript
export default function Login() {
  const [formState, setFormState] = useState({});

  const handleChange = ({ target }) => {
    const { name, value } = target;
    setFormState((prev) => ({
      ...prev, //{...oldObject, newKey: newValue}
      [name]: value
    }));
  };
  // 이전 값을 기준으로 state 업데이틀 위한 state setter callback function 사용
 // JavaScript that our curly brackets refer to a new object to be returned. We use ..., the spread operator, to fill in the corresponding fields from our previous stat

  return (
    <form>
      <input
        value={formState.firstName}
        onChange={handleChange}
        name="firstName"
        type="text"
      />
      <input
        value={formState.password}
        onChange={handleChange}
        type="password"
        name="password"
      />
 // reuse our event handler across multiple inputs by using the input tag’s name attribute to identify which input the change event came from
    </form>
  );
}

예제 - Edit Profile

import React, { useState } from "react";

export default function EditProfile() {
  const [profile, setProfile] = useState({});

  const handleChange = ({ target }) => {
    const {name, value} = target;
    setProfile((prev) => ({
      ...prev,
      [name]: value
    }));
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(JSON.stringify(profile, '', 2));
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={profile.firstName || ''}
        name="firstName"
        type="text"
        placeholder="First Name"
        onChange={handleChange}
      />
      <input
        value={profile.lastName || ''}
        type="text"
        name="lastName"
        placeholder="Last Name"
        onChange={handleChange}
      />
      <input
        value={profile.bday || ''}
        type="date"
        name="bday"
        onChange={handleChange}
      />
      <input
        value={profile.password || ''}
        type="password"
        name="password"
        placeholder="Password"
        onChange={handleChange}
      />
      <button type="submit">Submit</button>
    </form>

  );
}

웹 사이트를 만들다 보면 화면에 보일 수 있는 데이터를 서버에서 받아오기도 해야 하고, state가 바뀔 때마다 함수를 실행시키거나, 이벤트 리스너를 달았다가 해제하는 등의 동작이 필요할 수 있다. useEffect hook은 바로 이럴 때 유용하게 쓸 수 있다.

• Hooks가 나오기 이전에는 함수 컴포넌트는 props 폼의 데이터를 받아오거나 렌더되는 JSX를 리턴하는 역할에 그치지 않았다. 그러나, State Hook은 함수 컴포넌트의 컴포넌트 state 폼 안에서 dynamic data를 처리할 수 있게 해주었다.
• Effect Hook은 다음과 같이 자바스크립트 코드가 실행된 후 작동한다.
  • 백엔드 서버에서 데이터를 fetching 할 때
  • 데이터의 스트림을 subscribing 할 때
  • 타이머, 인터벌을 매니징할 때
  • DOM에서 변화하는 요소를 읽어낼 때
• 위와 같은 요소에서 각각의 렌더링 후 일어나는 이유는 'side effects(부수 효과)' 때문이다.
• Effect Hook이 사용되는 세가지 key moments

1. 컴포넌트가 DOM에 처음으로 추가/마운트 되서 렌더링 될 때
2. state/props가 바뀌어서 컴포넌트가 재렌더링될 때
3. 컴포넌트가 DOM에서 지워지거나/언마운트될 때

//Class.js
import React, {Component} from 'react';

export default class PageTitle extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: ''
    };
  }

  componentDidMount() {
    document.title = this.state.name;
  }

  componentDidUpdate() {
    document.title == `Hi, ${this.state.name}`;
  }

  render() {
    return (
      <div>
        <p>Use the input field below to rename this page!</p>
        <input 
          onChange={({target}) => this.setState({ name: target.value })} 
          value={this.state.name} 
          type='text' />
      </div>
    );
  }
}

//Function.js
import React, {Component} from 'react';

export default class PageTitle extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: ''
    };
  }

  componentDidMount() {
    document.title = this.state.name;
  }

  componentDidUpdate() {
    document.title == `Hi, ${this.state.name}`;
  }

  render() {
    return (
      <div>
        <p>Use the input field below to rename this page!</p>
        <input 
          onChange={({target}) => this.setState({ name: target.value })} 
          value={this.state.name} 
          type='text' />
      </div>
    );
  }
}

• class형에서 componentDidMount()``componentDidUpdate()로 구분해서 세팅된 것이 함수형에서는useEffect()로 한번에 처리할 수 있어 효율적이다.

The Effect Hook - useEffect()

• useEffect를 react 라이브러리에서 import 한다. import React, {useEffect} from 'react';
• Effect Hook은 우리가 안에 있는 다른 함수를 호출하기 위해 사용하기 때문에 useEffect() 함수를 호출할 때는 아무것도 리턴하지 않는다.
• useEffect() 함수에 첫번째 인자는 우리가 리액트 컴포넌트가 리턴될 때 부르고 싶은 콜백 함수다.

  import React, { useState, useEffect } from 'react';
  

function PageTitle() { const [name, setName] = useState('');

useEffect(() => { document.title = Hi, ${name}; });

return (

- 위의 예시에서 effect는 `() => { document.title = name; }`가 된다.

effect안에서 현재 state는 어떻게 사용될까?
- effect가 컴포넌트가 렌더링 된 후 에 일어난다고 하더라도 함수 컴포넌트 스코프에 접근이 가능하다.
- 리액트가 컴포넌트를 렌더링하면 DOM이 업데이트 되고, 그 후 effect가 일어난다. => 처음부터 끝까지 모든 렌더링에서 발생한다.

### Clean up Effects
- 이벤트 리스너를 여러개 붙일 때는 Effect를 제거해주는 것이 필요하다.
이벤트를 제거해줌으로써 불필요한 메모리가 낭비되는 것을 막을 수 있다.
- clean up fuction을 설정해주지 않으면 새로운 이벤트 리스너가 컴포넌트가 재렌더링 될 때마다 DOM의 document object에 붙는다. 
=> 버그를 유발하거나 퍼포먼스가 감소할 수 있다.
- effect는 모든 렌더링 후에 발생하기 때문에 cleanup 함수 또한 각각의 재렌더링 때마다, 언마운팅 전에 일어난다.
- 모든 effect가 함수를 리턴하기 때문에 useEffect() Hook은 항상 cleanup function으로 인식한다. cleanup function은 선택사항이지만, 메모리 손실이 큰 코드의 경우 써주는 것이 좋다.
```javascript
useEffect(()=>{
  document.addEventListener('keydown', handleKeyPress);
  return () => {
    document.removeEventListener('keydown', handleKeyPress);
  };
})

Control When Effects are Called - dependency array([])

• useEffect()에서 첫번째 인자 함수가 호출될 때 컴포넌트가 렌더링 될 때마다 실행된다.
• effect가 첫번째 렌더링 이후에만 호출되기를 원한다면 두번째 인자에 빈 배열을 넣어준다. 이를 dependency array(의존성 배열)이라고 부른다.
• 빈 의존성 배열은 1) 컴포넌트가 처음 마운트될 때 effect를 불러오고, 2) 컴포넌트가 언마운트 될 떄 cleanup function이 effect에 의해 리턴될 때 호출한다.

  useEffect(() => {
  alert("component rendered for the first time");
  return () => {
    alert("component is being removed from the DOM");
  };
  }, []); 

• 위의 예시에서 빈 배열이 없다면, alerts은 컴포넌트가 렌더링 될 때마다 실행된다.

  Fetch Data

• 컴포넌트에서 데이터를 받을 때도 빈 배열을 넣어주면, 첫 렌더링 이후 데이터를 fetch 할 수 있다.
• 서버로부터 응답을 불러올 때, state Hook에서 state setter를 설정해 로컬 컴포넌트에 있는 서버의 response의 데이터를 저장할 수 있다. => State Hook과 Effect Hook을 함께 사용하면 매 렌더링마다 불필요한 새로운 데이터를 fetching해 오는 것을 막을 수 있다.

  useEffect(() => {
  document.title = `You clicked ${count} times`;
  }, [count]); 
  // Only re-run the effect if the value stored by count changes

• 빈 배열의 의존성 배열은 의존할 요소가 없기 때문에 다시 실행될 필요가 없다. 즉, effect가 바뀌지 않고 한번만 호출되면 된다는 것이다.
• 빈 배열이 아닌 의존성 배열은 의존성 배열의 변수 값이 변화하면 재실행되고, 그렇지 않으면 실행되지 않는다. 즉 변화가 일어나면 effect는 다시 호출된다.

  Rules of Hooks

  Hooks을 쓸 때는 두 가지의 규칙이 있다. 1) top level에 쓴다.
  • React에서 Virtual DOM을 빌드할 떄, 라이브러리는 유저 인터렉션에 따라 우리가 정의한 컴포넌트를 계속해서 정의한다. React는 정의된 컴포넌트의 함수에서 Hook으로 불러온 데이터를 계속 추적한다. 이러한 이유로, Hook을 가장 위에서 호출해야 한다.
  • loops, conditions, nested functions 안에 쓸 수 없다.

    if (userName !== '') {
    useEffect(() => {
    localStorage.setItem('savedUserName', userName);
    });
    }
    

useEffect(() => { if (userName !== '') { localStorage.setItem('savedUserName', userName); } });

``` 2) React 함수형으로 쓴다.

• Hooks는 클래스형에서 쓸 수 없고, 함수형 컴포넌트에서 쓸 수 있다.
• 다른 곳에서 쓸 수 있는 유일한 경우는 custom hooks로 쓸 때다.

React의 Class형 컴포넌트로 모든 프로그래밍을 하던 시절, 개발자들은 React팀에 다음과 같은 feedback을 던진다.

• "Class형은 컴포넌트 간 재사용하기 어려워요!"
• "Class형은 복잡하고 테스트하는데 시간을 많이 잡아먹어요!"
• "Class형은 많은 개발자들이 혼란을 겪고, 버그도 엄청 많이 나와요!" => 이러한 피드백을 반영해 React팀은 React 16.8+ 버전에서 'Hooks'을 선보였다. Hooks의 등장으로 간단한 함수형 컴포넌트만으로 클래스형 컴포넌트로만 할 수 있었던 온갖 아름다운 동작들을 구현할 수 있게 되었다!

Hooks

React Hooks는 함수에서 컴포넌트의 내부 states와 post-rendering side effetcts를 관리할 수 있게 해주었다.

• Hooks는 클래스 안에서는 작동하지 않는다. 함수형 컴포넌트와 hooks는 클래스 컴포넌트의 대체제가 아니라, "선택사항"이다.
• React는 내장 hooks 기능을 제공한다. useState(), useEffect(), useContext(), useReducer(), useRef()... full list

The State Hook - useState()

• 함수형 컴포넌트의 state를 업데이트할 때 쓰는 hook으로 react component를 구성하기 위해 가장 흔하게 사용하는 hook이다.
• useState를 react 라이브러리에서 import 한다. import React, {useState} from 'react';
• useState()는 react 내부의 JavaScript 함수 정의로, 두 가지의 값을 갖는 배열로 리턴된다. const [current state, state setter] = useState();
  • current state : this state의 현재 값
  • state setter: this state 값이 업데이트 되어서 사용할 수 있는 함수

    import React, {useState} from "react";
    

function Toggle() { const [toggle, setToggle] = useState();

return (

- `setToggle()`은 `onClick` 이벤트 리스너로 호출된다.
- `toggle`값과 컴포넌트를 새로운 값으로 재렌더링하기 위해서는 `setToggle()` 함수를 다음 스테이트 값과 함께 argument처럼 호출해주기만 하면 된다. 
(class 인스턴스로 함수를 바인딩하고, constructor를 쓰고, this 키워드를 쓰고.. 따위는 신경쓰지 않아도 된다! 그저 State Hook으로 간단하게 스테이트를 업데이트 할 수 있게 된 것!🤭)
> React에 state setter 신호를 호출한다는 것은 컴포넌트의 재렌더링(re-render)과 이에 따라 컴포넌트 정의에 따른 전체 함수가 다시 호출되어야한다는 것을 의미한다. 
`useState`를 쓰면 React 컴포넌트에서 다른 부분으로 넘어갈 때 **현재 스테이트의 값을 계속 추적할 수 있다.**
### State 초기화
- State Hook으로 stiring을 포함한 원시 데이터 타입, 배열, 객체까지 관리할 수 있다.
- state를 초기화하기 위해서는 useState() 함수 호출에 초기값을 argument로 전달해준다.  
```const [isLoading, setIsLoading] = useState(true);```
1) 첫번째 렌더링에서 초기값이 사용된다. 
2) 두번째 state setter(setIsLoading)가 호출되면 React는 초기값을 무시하고, 새로운 값을 사용한다. 
3) 컴포넌트가 재렌더링되면, React는 이전 렌더링에 사용했던 값을 계속 사용한다.
> 초기값을 설정하지 않으면 undefined가 뜬다. 동작하는데는 문제가 없으나 코드를 명확하게 하기 위해서는 명시해주는 것이 좋다. 만약 첫 렌더링에서 보여줄 값이 없으면 null처리를 해주는 것이 좋다.
### JSX 외부에서 State setter 사용하기
- 이벤트 핸들러를 붙여줄 때 해당 로직을 분리해주면 가독성 높고 효율적인 코드를 작성할 수 있다.
```javascript
const handleChange = (event) => {
  const newEmail = event.target.value;
  setEmail(newEmail);
}

=> const handleChange = (event) => setEmail(event.target.value);

//Object destructing
=> const handleChange = ({target}) => setEmail(target.value);

이전 state로부터 setting 하기

• 다음에 나올 state 값이 현재 state에서 계산이 되어야 하는 경우가 있다. 이때, 가장 좋은 방법은 콜백 함수를 지정해 두는 것이다.

  import React, { useState } from 'react';
  

export default function QuizNavBar({ questions }) { const [questionIndex, setQuestionIndex] = useState(0);

// define event handlers const goBack = () => setQuestionIndex((prevQuestionIndex) => prevQuestionIndex - 1); const goToNext = () => setQuestionIndex((prevQuestionIndex) => prevQuestionIndex + 1); // determine if on the first question or not const onFirstQuestion = questionIndex === 0; const onLastQuestion = questionIndex === questions.length - 1;

return (

• REpresentational State Transfer의 약자로 웹상의 여러 리소스(이미지, 동영상, 데이터)에 고유한 URI를 부여해 자원에 대한 주소를 지정(HTTP Method)하는 방법론, 규칙을 의미한다.
• API 시스템을 구현하기 위한 아키텍쳐 중 가장 널리 사용되는 형식 (Graphql, GRPC, REST..) => RESTful API는 REST 특징을 지키면서 API를 제공한다는 의미이다. 결국, HTTP 요청을 보낼 때 어떤 URI, 어떤 HTTP method를 사용할 것인가에 대한 약속 장점: self-descriptiveness, 지정된 형식이 있어 요청 자체만으로 API 목적이 쉽게 이해된다. 단점: 표준규약이 없어 안티패턴(*실제 많이 사용되는 패턴이지만 비효율적이거나 비생산적인 패턴)으로 작성되는 경우가 흔하다.

  기본 배경 지식

• URI(Uniform Resource Identifier)*
• 해당 사이트의 특정 자원의 위치를 구조와 함께 나타내는 유일한 주소
• https://finace.naver.com/login에서 'https:// ~ com'은 URL, /login은 URI다.
• HTTP Method*
• HTTP request가 의도하는 action(GET, POST, DELETE, PUT)을 정의한 것
• Payload*
• HTTP request에서 server로 보내는 데이터 (body)

  RESTful API

• 웹 데이터 전송 방식 중 하나로 API의 엔드포인트 구조를 구현하는 방식이다.
• API에서 전송하는 자원(resource)을 URI로, 각 자원의 행위를 HTTP method로 정의한다.
• 엔드포인트는 리소스를 표현하는 고유한 URI를 갖고, 해당 리소스의 행위를 표현하는 HTTP method를 처리할 수 있게 한다.
• Method와 Resource 정보를 protocol과 host에 URI로 담아 request하면, 엔드포인트에 따라 해당 정보를 Reponse로 받아온다. ⚠️ 사용자가 주소창에서 보는 실제 URL이 아닌 클라이언트의 프론트엔드 개발자가 백엔드개발자에게 기능을 요청할 때 보내는 주소! 페이지 단위가 아닌 기능 단위로 구성됨을 유의!

설계 규칙

• URI 정보를 명확하게 표현한다. resource는 명사를 사용한다. GET/user/1 -> GET/users/1
• resource에 대한 행위를 HTTP Method(GET, POST, PUT, DELETE)로 표현한다. URI에 method를 포함하지 않는다. GET delete/user/1 -> DELETE/users/1 URI에 동사를 포함하지 않는다. GET/user/show/1 -> GET/users/1, POST insert/user/2 -> POST/users/2
• resource 간 관계가 있는 경우 '/'로 표현한다. /리소스/고유ID/관계 리소스 GET /users/{user_id}/profile
• 파일의 경우 payload의 포맷을 나타내기 위한 파일 확장자를 URI에 포함시키지 않는다. GET user/1/profile-photo.jpg(x) -> GET user/1/profile-photo (이때, payload의 포맷은 headers에 accept 사용)
• URI는 / 구분자를 사용해 자원의 계층 관계를 나타낸다. 따라서 마지막 문자로 /를 포함하지 않는다.
• URI가 길어지는 경우 -을 사용해 가독성을 높인다. '_', '대문자'는 사용하지 않는다.

REST API 통신

• 상황에 따라 Query parameters (GET parameters), Path parameters로 통신할 수 있다.

  Path parameters

• End-point에 경로를 지정하여 요청하는 방식
• GET Method
• POST, PATCH Method
• DELETE Method

  Query parameter

• End-point에 query문으로 요청하는 방식
• 데이터를 조건으로 거르거나(filtering), 특정 방식으로 정렬하거나(ordering), 검색(searching) 등 조건에 맞추어 정제된 결과물을 얻을 수 있다.
  
• 신상품순(-id), 가격순 등 필터링에 사용할 수 있다.

  Path parameters vs Query parameter

• Path parameter에 비해 Query parameter는 조금 더 정제된 정보 Filtering, Sorting, Searching, Pagination를 가져올 때 쓴다.
• 검색 데이터가 없을 경우, Path parameter는 오류를 출력하고, Query parameter는 빈 페이지를 보여준다.

• 유저의 identification을 확인하는 절차 (아이디, 비밀번호 확인)
• 우리 서비스를 누가, 어떻게 사용하는지 추적하기 위해 사용한다.
• 인증에는 아이디, 이메일 주소, 비밀번호* 등이 필요하다.

  비밀번호 관리

• 비밀번호는 개인정보보호법에 따라 '암호화'해서 관리해주어야 한다. (법규상 강제)
• 비밀번호는 Database에 저장 시 개인정보를 해싱(난독화)하여 복원할 수 없도록 한다.
• 통신 시 개인 정보를 주고받을 때 SSL을 적용하여 암호화한다. (HTTPS 프로토콜)

  암호화 방법

  단방향 해쉬 함수(one-way hash fuction)

• 해시(hash)함수는 자료구조에서 빠른 자료와 검색, 데이터의 위변조 체크를 위해 쓰이며, 복원이 불가능해 암호학적 용도로 사용한다. (예: MD5, SHA-1, SHA-256)
• 단방향 해시 함수는 원본 메시지를 변환하여 암호화된 메시지인 다이제스트(digest)를 생성한다. 원본 메시지를 알면 암호화된 메시지를 구하기는 쉽지만 암호화된 메시지로는 원본 메시지를 구할 수 없어서 단방향성(one-way) 이라고 한다.
• 예를 들어, "test password"를 hash256이라는 해쉬 함수를 사용하면 0b47c69b1033498d5f33f5f7d97bb6a3126134751629f4d0185c115db44c094e 값이 나온다.
• 만일 "test password2"를 hash256 해쉬 함수를 사용하면 d34b32af5c7bc7f54153e2fdddf251550e7011e846b465e64207e8ccda4c1aeb 값이 나온다. 실제 비밀번호는 비슷하지만 해쉬 함수 값은 완전히 틀린것을 볼 수 있다. 이러한 효과를 avalance라고 하는데 비밀번호 해쉬 값을 해킹을 어렵게 만드는 하나의 요소이다.
• 결과만 보고 식별이 불가능하기 때문에 완벽해보이지만, 같은 알고리즘으로 해싱하면 같은 결과가 도출되기 때문에 위험할 수 있다. (Rainbow Table attack: 가능한 경우의 수를 모두 해시값으로 만들어 판매하는 서비스) => salting, Key Streching 개발됨

  Salting & KeyStretching (소금치고 늘리기!)

  
• 솔팅(Salting)은 실제 비밀번호 이외에 추가적으로 랜덤 데이터를 더해서 해시값을 계산하는 방법이다.
• 입력한 비밀번호와 임의로 생성한 문자열을 합쳐서 해싱, 이 해싱값 결과를 저장한다.
• 비교를 위해 해시값과 솔트값을 같이 저장해야 한다.
• 키 스트레칭(Key Stretching)은 단방향 해쉬값을 계산한 후 그 해시값을 또 해쉬하는 반복 작업으로, 해커가 패스워드 무작위 대입을 통해 해시값을 계산하는데 필요한 시간을 대폭 늘려 원본 값을 유추하기 어렵게 만든다.

  bcrypt

• Salting & Key Streching 개념들을 적용해주는 대표적 라이브러리
• 처음부터 비밀번호를 단방향 암호화하기 위해 만들어진 해쉬 함수로 hash 결과값에 솔트값, 해시값 및 반복횟수를 같이 보관하기 때문에 DB 설계가 편리하다는 장점이 있다.

로그인 절차

1. 유저 아이디와 비밀번호 생성

   POST /auth HTTP/1.1
   Host: localhost:5000
   Content-Type: application/json
   

{ "username": "joe", "password": "pass" }

2. 유저 비밀번호 암호화 -> DB에 저장.
3. 유저 로그인 -> 아이디와 비밀번호 입력
4. 유저가 입력한 비밀번호 암호화 -> 암호화되서 DB에 저정된 유저 비밀번호와 비교
5. 일치하면 로그인 성공
6. 로그인에 성공하면 `access token`을 클라이언트에게 전달
```javascript
// 유저 로그인
POST /auth HTTP/1.1
Host: localhost:5000
Content-Type: application/json

{
    "username": "joe",
    "password": "pass"
}

// access token
HTTP/1.1 200 OK
Content-Type: application/json

{
    "access_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZGVudGl0eSI6MSwiaWF0IjoxNDQ0OTE3NjQwLCJuYmYiOjE0NDQ5MTc2NDAsImV4cCI6MTQ0NDkxNzk0MH0.KPmI6WSjRjlpzecPvs3q_T3cJQvAgJvaQAPtk1abC_E"
}

7. 서버에서 access token을 복호화해 유저 정보를 얻는다. 유저는 로그인 성공후 다음부터는 access token을 첨부해서 request를 서버에 전송함으로서 매번 로그인 해도 되지 않도록 한다. (HTTP를 알고 주소 쓰기 참조)

   {
   user_id = 1
   }

   JSON Web Token(JWT)

• access token을 생성하는 널리 사용되는 기술중 하나로, 유저 정보를 담은 JSON 데이터를 암호화해서 클라이언트와 서버간에 주고 받는다.

  JWT 구성

  
• 헤더(header): 토큰 타입의 해시 알고리즘 정보로 BASE64 방식으로 인코딩 되어 JWT의 가장 첫부분에 기록됨 (암호화 x) 예: {"alg":"HS256", "typ":"JWT"}
• 내용(payload): 내용에는 exp와 같이 만료시간을 나타내는 공개 클레임, 클라이언트와 서버간 협의하에 사용하는 비공개 클레임. 두가지 요소를 조합하여 작성한 뒤 BASE64 인코딩해 두번째 요소로 위치 예: {"user-id": 1, "exp":1539517391}
• 서명(signature): JWT가 원본 그대로라는 것을 확인. BASE64URL 인코드된 header와 payload 그리고 JWT secret(별도 생성)을 헤더에 지정된 암호 알고리즘으로 암호화하여 전송 (복호화 가능)
• 프론트엔드가 JWT -> 백엔드 API 서버 전송 -> JWT 서명부분 복호화하여 서버 생성 유무 확인 => header와 payload는 암호화가 아닌 BASE64 인코딩한 것이므로 누구나 원본을 볼 수 있으니 개인정보를 담아선 안된다.

  Access token을 사용하는 이유

• 무거운 bcrypt call을 받지 않고, 간단한 해쉬 만으로 퍼포먼스를 낼 수 있다.
• Client-side storage방식 쿠키와 같이 실제 ID와 패스워드가 저장되지 않고, 다른 사이트에서 재사용할 수 없기 때문에 안전하다.

인가(Authorization)

• 유저가 요청하는 request를 실행할 수 있는 권한이 있는 유저인가를 확인하는 절차다.
• 예를 들어, 해당 유저는 고객 정보를 볼 수 있는 있지만 수정할 수는 없다
• Authroization도 JWT를 통해서 구현 될 수 있다.
  • access token을 통해 해당 유저 정보를 얻을 수 있음으로 해당 유저가 가지고 있는 권한(permission)도 확인 할 수 있다.

인가 절차

1. Authentication 절차를 통해 access token을 생성한다. access token에는 유저 정보를 확인할 수 있는 정보가 들어가 있어야 한다 (예: user id).
2. 유저가 request를 보낼때 access token을 첨부해서 보낸다.
3. 서버에서는 유저가 보낸 access token을 복호화 한다.
4. 복호화된 데이터를 통해 user id를 얻는다.
5. user id를 사용해서 database에서 해당 유저의 권한(permission)을 확인하다.
6. 유저가 충분한 권한을 가지고 있으면 해당 요청을 처리한다.
7. 유저가 권한을 가지고 있지 않으면 Unauthorized Response(401) 혹은 다른 에러 코드를 보낸다.

SPA는 3세대 웹이 등장하면서 기존의 웹이 제공해주지 못했던 풍부한 UX를 구현할 수 있게 해준 중요한 개념이다. SPA는 CSR과 SSR, 두 가지 방법으로 지원할 수 있다.

SPA vs MPA

• MPA는 Multi Page Application의 약자로 정적 웹사이트로 개발된 HTML 페이지가 여러개로 구성된다. (2세대)
• SPA는 Single Page Application의 약자로 3세대 인터넷의 발달로 동적 웹을 구현할 수 있게 되면서 단일 HTML에 페이지를 바꾸지 않고 필요한 부분을 JavaScript로 바꿔줄 수 있게 되었다.
• cf. SPA vs MPA의 개념

CSR vs SSR

• SPA는 CSR과 SSR, 두 가지 방법으로 구현할 수 있는데, CSR은 밀 키트와 같은 '비조리형 배달 음식'에 SSR은 완제품으로 배달하는 '조리형 배달 음식'에 비유할 수 있다.
• 비조리형 배달 음식 (CSR)
  • 식당에서 재료만 포장하여 고객에게 배송 (index.html, index.js 등)
  • 재료를 받은 고객이 최종 조리하여 음식 완성 후 식사
  • 최종 형태를 갖추게 되는 단계는 클라이언트 단
• 조리형 배달 음식 (SSR)
  • 식당에서 모든 조리 완료 후 고객에게 배송
  • 조리가 완료된 음식을 고객이 받아 바로 식사
  • 최종 형태를 갖추게 되는 단계는 서버 단

    Client Side rendering(CSR)

• 웹 페이지의 렌더링이 클라이언트(브라우저) 측에서 일어나는 것을 의미한다.
• 브라우저는 최초 요청에서 html, js, css 확장자의 파일을 차례로 다운로드하는데, 최초로 불러온 html의 내용은 비어있다. (index.html: html, body 태그만 존재)
• JavaScript 파일의 다운로드가 완료된 다음, 해당 js 파일이 DOM을 빈 HTML 위에 그리기 시작한다.
• 백엔드 호출을 최소화 할 수 있음
  • 최초 호출 때만 html, js, css를 요청
  • 이후에는 화면에서 변화가 일어나야 하는 만큼의 데이터만 요청한다. (ex. JSON)
• 라우팅(새로운 페이지로 이동)을 하더라도 html 자체가 바뀌는 것이 아니라 JavaScript 차원에서 새로운 화면을 그려낸다.
  • 렌더링 속도가 빨라 트래픽이 많은 경우 용이하다.
• ex) Create React App (CRA)은 CSR만 제공하는 어플리케이션으로 별도의 초기 설정 없이 SPA 사이트를 구현할 수 있게 도와준다. => 그러나 CSR의 단점은 검색엔진최적화(SEO)에 취약하다는 단점이 있다.

Server Side Rendering(SSR)

• 위에서 언급했던 CSR과 SSR의 차이에서 알 수 있듯, SSR은 서버에서 첫 페이지의 렌더링을 클라이언트 측이 아닌 서버 측에서 처리해주는 방식.
• CSR과 비교하면,
  • 1) UX 측면에서 유리
    • CSR에 비해 페이지를 구성하는 속도는 늦어질 수 있지만, 전체적으로 사용자에게 보여주는 콘텐츠 구성이 완료되는 시점은 빨라진다.
    • Code Splitting (코드 분할)
      • 만약 첫 페이지 구성에 불필요한 JS 파일을 받아온다면?
      • 그 번들 파일의 크기가 크다면?
      • 불필요한 내용들은 받아오지 않고 서버 단에서 첫 페이지에 필요한 정적인 부분만 처리한 뒤 JS는 나중에 필요한 부분만 필요할 때 로드할 수 있다면?
  • 2) SEO 측면에서 유리
    • 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 보여주는 방식이기 때문에 CSR의 단점인 "첫 페이지 깡통" 상태를 극복할 수 있음.
  • 주의) 페이지를 잘못 구성할 경우 CSR에 비해 서버 부하가 커지거나 / 첫 로딩이 매우 느려질 수 있다

Search Engine Optimization(SEO)

• 웹 크롤러가 웹 페이지를 크롤링 할 때 CSR로 구성된 페이지는 빈 페이지로 인식하고 제대로 크롤링을 하지 못할 수 있다.
• CSR에서 렌더링되는 첫 페이지는 비어있는 index.html이기 때문에 JavaScript 파일이 다운로드 되어 페이지가 로드 될 때까지 빈 상태로 인식할 수 있기 때문이다. => 검색 노출 안됨!
• 반대로 SSR 방식은 첫 페이지가 로드되면 모든 정보가 담긴 전체 페이지를 보여주기 때문에 크롤링에 용이해 검색 노출이 잘 될 수 있다. => 따라서 SPA의 장점을 살리면서도 SEO도 같이 챙길 수 있는 방법을 고안해냈다. => SSR cf. 웹 사이트 도메인에 /robot.txt를 검색해보면 각 웹사이트 별 크롤링 가능/불가능 항목을 볼 수 있다.

SPA for SSR (보완책)

• CSR과 SSR을 혼합해서 쓸 수 있다.
• 1) 첫 렌더링은 SSR로 2) 이후 렌더 부터는 CSR로
• SSR의 요소
  • node.js로 구성된 프론트엔드 서버
  • pyhton, django로 되어 있는 백엔드 서버
• SSR 과정
  1. 유저가 브라우저에 /를 입력.
  2. 미리 실행되고 있는 FE 서버가 요청을 받고 SSR 실행
  3. 만들어진 HTML을 브라우저에게 보냄.
  4. 브라우저가 응답받은 HTML을 그림.
  5. HTML에 기능을 부여할 **index.js**파일을 다운로드 받음. (hydration)
  6. 다운로드가 완료된 이후, go to second 링크를 클릭.
  7. /second로 라우팅하고 second 페이지 코드를 생성.

hydration

• 서버에서 전송한 정적 문서를 데이터 변경에 반응할 수 있는 동적 형태로 변환하는 클라이언트 측 프로세스를 말한다.
• render와 동일하지만, DOM은 이미 그려져 있는 상태이기 때문에 event handler만 부착하는 식으로 작동한다.

  import React from "react";
  import ReactDom from "react-dom";
  import App from "./App";
  

const initialData = window.INITIAL_DATA;

ReactDom.hydrate( , document.getElementById("root") ); // 출처: <실전 리액트 프로그래밍>, 이재승 저

```

Next.js

• 서버사이드렌더링(SSR)과 code split 등을 지원하는 ReactJS 전용 프레임워크
• 생산성을 위해 주로 채택하며, SSR의 CRA를 간단히 구성할 수 있다.
• SSR 외에도 React App에 필요한 여러 필수 기능을 제공한다. (동적 라우팅, pre-rendering, CSS-in-JS)

현대 앱이 컴포넌트를 기반으로 발전해가면서 CSS 스타일링 방법론 또한 '컴포넌트를 기반'으로 재구성되고 있다. 이러한 발전 속에서 등장한 패러다임이 'CSS-in-JS'이며 그 중 가장 인기있는 라이브러리가 'sytled-components'이다.

CSS in JS의 등장

• 모든 기술은 문제를 해결하기 위해 등장했다. 'styled-components' 또한 이전 기술의 문제점을 보완하기 위해 등장했다.
• pure CSS의 문제점을 보완하기 위해 CSS preprocessor(전처리기)로 SASS, Scss가 등장했지만 여전히 문제점이 있다.
• CSS 클래스명을 붙이기 어렵다.
• 정해진 가이드가 없으면 구조가 복잡해진다.
• 방대한 스타일 정보로 인한 스크롤 지옥
• CSS 클래스로 조건부 스타일링의 한계
• 동적인 변화를 표현하기에 한계
• css-in-js는 2018년 이후 폭발적으로 성장해왔고, styled-components는 npm 다운로드 수 기준으로 가장 인기있는 css-in-js 라이브러리다.

  CSS-in-JS의 장점

• 클래스명을 해시값으로 자동 생성하고, 클래스명 오염을 방지한다.
• JavaScript에서 CSS 문법을 온전하게 사용할 수 있다.
• JavaScript의 동적인 값들을 온전하게 사용할 수 있다.
• 컴포넌트 단위로 추상화하여 적용하기 알맞다. => 컴포넌트와 스타일이 하나의 파일로 결합되어 모듈화가 수월해진다.

styled-components

• 설치 npm install --save styled-components
• styled-components는 '고유한 클래스 명을 자동으로 생성'해 서로 다른 스타일이 전역에서 중복 적용될 우려를 줄여주고,
• 렌더링 되는 컴포넌트에 맞는 스타일 컴포넌트를 자동으로 내보내주는 등 컴포넌트의 스타일 작성과 관리를 효율적으로 할 수 있다는 장점이 있다.

시작하기

• styled-components 라이브러리에서 import 해온 styled 객체를 이용한다.
• html 태그 이름 뒤 Tagged Template 문법을 활용해 CSS 속성을 정의한다. (Template Literals(``)의 확장)

  import styled from 'styled-components';
  

render( );

const Wrapper = styled.sectionpadding: 4em; background: papayawhip;;

const Title = styled.h1font-size: 1.5em; text-align: center; color: blue;;

## styled-components 사용하기
### Adapting based on props
```javascript
import styled from 'styled-components';

render(
  <div>
   <Button>Normal</Button>
   <Button width="100">Primary</Button>
  </div>
);

const Button = styled.button`
 background: ${props => props.width < 200 ? "blue" : "white"};
 color : ${props => props.primary ? "white" : "blue"};
`;

• props를 기반으로 삼항 연산자를 붙여 스타일의 변화를 줄 수 있다.

Extending Styles

import styled from 'styled-components';

render(
  <div>
   <Button>Normal</Button>
   <TomatoAnchorButton>Tomato Button</TomatoAnchorButton>
  </div>
);

const Button = styled.div`
 color: blue;
 font-size: 14px;
 margin: 5px;
 padding: 16px 0;
 border: 2px solid blue;
`;

const TomatoAnchorButton = styled(Button.withComponent("a"))`
 color: tomato;
 border-color: tomato;
`;

• 중복 요소가 없는 일반적인 Button 속성을 정의하고, 이 속성을 바탕으로 확장된 속성(TomatoAnchorButton)을 정해준다.
• 이때 중복되는 속성은 새로운 속성으로 덮어진다.

  Nesting

  import styled from 'styled-components';
  

render( <> Hello world! How ya doing? The sun is shining

const Thing = styled.div` color: blue;

&:hover { color: red; }

&.something

.something-else & { border: 1px solid; } `;

### Global Style & ThemeProvider
- 전역 스타일을 적용할 때 쓴다. 
- `reset` 설치, `createGlobalStyle` 에 전역 스타일을 넣고, `ThemeProvider`를 통해 자주 사용하는 폰트, 색상 등을 지정해 원하는 곳에 가져다 쓸 수 있다.
- styled-reset 설치 `npm install --save styled-components styled-reset`
```javascript
import { createGlobalStyle } from 'styled-components';
import reset from 'styled-reset';

const GlobalStyle = createGlobalStyle`
  ${reset}

    // 전역스타일

`;

export default GlobalStyle;

• index.js에 import 해준다.

  import React from "react";
  import ReactDOM from "react-dom";
  import GlobalStyle from './styles/GlobalStyle';
  import { ThemeProvider } from "styled-components";
  import Routes from "./Routes";
  import theme from "./styles/theme";
  

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

```javascript
// theme.js

const theme = {
  background: "#FFFEFC",
  white: "#FFFFFF",
  vermilion: "#ff7425",
  orange: "#FF9900",
  opacityOrange: "rgba(242,153,74,0.5)",
  yellow: "#FFD66C",
  grey: "rgba(196,196,196,0.3)",
  middleGrey: "rgba(65,65,65,0.4)",
  deepGrey: "#828282",
  lightOrange: "rgba(255,195,170,0.3)",
  fontColor: "#2D2B2B",
  fontTitle: "'Alata', sans-serif;",
  fontContent: "'Noto Sans KR', sans-serif;",
};

export default theme;

// theme 사용

const Container = styled.div`
  background-color: ${props => props.theme.background}
`;

Mixin

• CSS를 import해서 속성을 정의하고 원하는 요소에 쓸 수 있다.

  import { css } from "styled-components"
  

const Navigation = styled.navposition: fixed; left: 0; top: 0; right: 0; ${Sticky};

const Sticky = cssposition: fixed !important; background-color: white; border-bottom: 1px solid rgba(0, 0, 0, 0.11); box-shadow: 0 0 5px rgba(0, 0, 0, 0.11); transition: all 0.6s ease-in-out; color: black;;

//

const RingVariant = (radius, stroke = "10") => cssposition: absolute; border-radius: 50%; height: ${radius * 2}px; width: ${radius * 2}px; border: ${stroke}px solid rgba(0, 0, 0, 0.5);;

### Attaching additional props
```javascript
render(
  <div>
    <Input placeholder="A small text input" />
    <br />
    <Input placeholder="A bigger text input" size="2em" />
  </div>
);

//attr()의 매개변수에 객체로 속성 부여
const Input = styled.input.attrs(props => ({
  // we can define static props
  type: "password",

  // or we can define dynamic ones
  size: props.size || "1em",
}))`
  color: palevioletred;
  font-size: 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;

  /* here we use the dynamically computed prop */
  margin: ${props => props.size};
  padding: ${props => props.size};
`;

Animation

• 애니메이션 및 스타일 효과를 줄 때는 keyframes를 사용한다.

  // Create the keyframes
  const rotate = keyframes`
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
  `;
  

// Here we create a component that will rotate everything we pass in over two seconds const Rotate = styled.divdisplay: inline-block; animation: ${rotate} 2s linear infinite; padding: 2rem 1rem; font-size: 1.2rem;; render( < 💅🏾 > ); ```

• 메인 서비스
  • 맥주, 소주, 위스키 등 '술과 어울리는 숙소'를 테마로 지역별, 유형별 원하는 숙소를 검색하고, 예약할 수 있다.
  • '호스트 등록'을 서비스를 통해 내 숙소를 쉽게 등록하고 호스트가 될 수 있다.
• 프로젝트 기간 : 2021.08.02.-2021.08.13.
• 모티브 페이지: 에어비엔비
• 참여자: 총 6명. Front-end(김가영, 이나현, 배윤아, 황문실), Back-end(김도담, 박종규)
• 구현 기능 (페이지 기준)
  1. 메인 페이지 : 날짜, 지역 별 숙소 검색이 가능한 Navigation bar
  2. 소셜 로그인 : 카카오 API 활용 소셜 로그인
  3. 숙소 리스트 페이지 : 선택 숙소 리스트 및 카카오 지도 API 활용 숙소 마킹
  4. 숙소 상세 페이지 : 숙소 정보 및 예약(기간, 금액) 기능
  5. 마이 페이지 : 예약 숙소 리스트
  6. 호스트 등록 페이지 : 카카오 주소 API 활용 숙소 form(text, image, 주소) 등록
• GitHub repository : Front-end

데모 영상

!youtube[9DcR3fp_jr4]

사용 기술

Front-End

• React.js, styled-components, axios, react-google-maps/api, react-slick, moment, react-dates, react-daum-postcode, react-kakao-login

  Back-End

• Python, Django web framework, Bcrypt, My SQL

  Common

• RESTful API, trello

  직접 구현 사항

  소셜 로그인

• 카카오 API를 활용해 카카오 로그인으로 서비스를 이용할 수 있음.
• 로그인 시 navigation bar에 '로그아웃', '마이 페이지' 버튼 생성

  주요 코드

  const handleLogin = () => {
    Kakao.Auth.login({
      scope: 'profile_nickname, profile_image, birthday',
      success: function (response) {
        fetch(`${API.LOGIN}`, {
          method: 'GET',
          headers: {
            Authorization: response.access_token,
          },
        })
          .then(res => res.json())
          .then(res => {
            if (res) {
              localStorage.setItem('token', res);
              setIsLoggedIn(true);
              console.log(res);
            }
          });
      },
      fail: function (error) {
        alert('아이디와 비밀번호를 확인해주세요:)');
      },
    });
  };
  

#### 소셜 로그인 프로세스
- `Kakao.Auth.login` 함수를 사용해 카카오 로그인을 실행하고, `scope`에 필요한 정보를 가져온다. (사이트 내 프로필 등록을 위한 닉네임, 사진, 생년월일 정보를 가져옴)  
- `success` 콜백에서 카카오에서 사용자 토큰을 받아, fetch로 백엔드 서버에 넘겨준다.
- 백엔드 서버에서 우리 사이트에서 사용할 토큰을 주면, 프론트 localStorage에 저장한다.

### 호스트 등록 페이지
- 숙소 정보(text), 게스트 인원(증감 버튼), 숙소 요금, 이미지 업로드 등 다양한 form type 사용
![](https://images.velog.io/images/kykim_dev/post/a95b9d60-1dd5-4fb7-8b02-e543af804a23/%E1%84%8C%E1%85%AE%E1%84%89%E1%85%A9%E1%84%83%E1%85%B3%E1%86%BC%E1%84%85%E1%85%A9%E1%86%A8.gif)
- 카카오 주소 API, `axios`를 사용해 주소 찾기 기능 구현
![](https://images.velog.io/images/kykim_dev/post/034ec891-9b22-4f2a-9ee8-0c0001aee9fb/%E1%84%92%E1%85%A9%E1%84%89%E1%85%B3%E1%84%90%E1%85%B3%E1%84%83%E1%85%B3%E1%86%BC%E1%84%85%E1%85%A9%E1%86%A8.gif)

## 프로젝트 회고 🌟
### 프로그래밍(기술 구현) 측면
- 소셜 API 활용
이번 프로젝트에서 가장 기대했던 부분으로 여러 카카오 API를 내가 필요한 기능에 직접 구현해보고 싶었다. 
'로그인 정도야 하루면 가능하지!'라고 생각했던 초기와 달리 일주일이 걸려서야 겨우 UI 팝업을 만들어낼 수 있었고, 이후 메인 페이지와의 연결에서도 많은 어려움을 겪었다. 
➡️ **공식 문서, 개념의 중요성**을 다시 한 번 느끼게 된 계기가 되었다. 공식 문서를 제대로 보지 않고 잘 안될 때마다 구글링을 했는데, 역시 돌아와 공식 문서에서 답을 찾았다. 시간이 걸리더라도 공식 문서를 제대로 읽고, 이해하자.
➡️ 인증/인가, 로그인 구현 원리에 대해 제대로 이해한 후 코드를 짰다면 학습이 많이 되었을 것 같다. 코드를 구현하는데 급급해 원리를 이해하지 못하고 후에서야 다시 공부했다. 
- GitHub rebase
효율적인 협업을 위한 'rebase'를 진행했다. 처음 진행이라 나의 실수로 다른 분들의 코드에 피해가 갈까봐 조마조마했다. 
➡️ 깃과 깃헙은 양파같은 녀석이다. 공부하면 할수록 어려운데 또 결과는 효과적이라 매력적이다. 많이 연습하고 실패해보면서 익혀두어야겠다. 
- ReactJS function형 & Styled-Component
class형보다 function형은 JS를 더 많이 닮았고 그렇기 때문에 직관적이다. state를 관리하는 것도 class보다 단순하다. 그러나, 코드로만 봤을 때는class형이 componet간의 유기적 관계, 흐름이 잘 드러나는 것 같았다. 
styled-component는 별도의 스타일 페이지 없이 해당 component 페이지 내에서 함께 쓸 수 있어 효율적이다. 하지만 CSS, Scss에 비해 제약이 있어 스타일 설정이 어려웠다.
 ➡️ Redux, axios 등 component를 효과적으로 관리할 수 있는 프레임워크를 공부해야겠다. 

### 프로젝트 매니지먼트 측면 
- 효과적, 효율적 소통을 가능케 한 '프로젝트 기획'과 'API 정의서'
이번 프로젝트는 시작과 그 과정이 매끄러웠다. 
많은 이유가 있겠지만 가장 큰 역할은 '프로젝트 기획서'와 'API 정의서'가 했다. 
일잘러 팀원의 제안으로 구성할 페이지 별 API, 기능을 설명하는 프로젝트 기획서를 작성하고 서로 어떤 작업을 할지 공유했으며, API 정의서를 통해 프론트-백이 매번 묻지 않아도 기능별 API를 확인할 수 있었다. 
- SCRUM의 진가
매일 오전 팀 전원이 참여하는 Daily Standup Meeting은 15분 내로 간단한 인사와 함께 간략하게 '오늘의 할 일'과 'blocker'를 나누었다. 
blocker에 대해 이야기하면 팀원들이 서로 의견을 내고, 어려운 부분을 도와주거나 프로젝트 방향을 바꾸어 나갈 수 있어 프로젝트 일정을 지연시킬 수 있는 요소들을 사전에 방지할 수 있었다. 그리고 무엇보다 프로젝트에 임하면서 생기는 심리적 부담감과 스트레스를 덜어줄 수 있었다.  
- 프로젝트 나무를 보는 눈
아쉬운 점도 물론 있다. 프로젝트를 기획하는 과정에서 내가 하는 기능의 프론트 부분 뿐 아니라 백엔드와 어떻게 통신하고 연결해야하는지 등에 대한 전반적인 이해가 필요했는데 부족했다. 그 결과 잘못된 데이터 전달 형식의 코드를 멋지게 짰고, 거듭 수정해야했다. 
모르면 물어보고, 중간중간 더 자주 백엔드 개발자님과 소통해야겠다는 큰 깨달음을 얻었다. 

• SPA(Single Page Application)은 페이지가 1개인 어플리케이션을 뜻한다.
• HTML에서는 페이지 수만큼 HTML 파일이 존재하지만, React에서 .html 파일의 개수는 1개다. 즉, React는 SPA 기반으로 작동된다.
• 한 웹페이지 안에서 여러 개의 페이지를 보여줄 때 라우팅(routing)이 필요하다. 참고: https://velopert.com/3417

Routing / React Router

• 라우팅이란 다른 경로(url 주소)에 따라 다른 화면(view)을 보여주는 것을 의미한다.
• React에 내장되어 있지 않은 Third-party library로 React-router는 React의 라우팅 기능을 위해 가장 많이 사용하는 라이브러리다.
• Router는 컴포넌트 URL에서 서버에 들어오는 클라이언트의 request 경로를 결정해 '보고싶은 부분만 변화'시켜 준다.

  react-router 설치

  npm install --save react-router-dom

  Routes 컴포넌트 구현

  import React from 'react';
  import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
  import Login from './pages/Login/Login';
  import Signup from './pages/Signup/Signup';
  import Main from './pages/Main/Main';
  

class Routes extends React.Component { render() { return (