node.js 설치

• npm 사용을 위해 node.js 다운로드

  vs code 설치 및 익스텐션 설치

• 에디터 설치 후
• 익스텐션
  • Vetur
  • Vue 3 Snippets
  • HTML CSS Support

vs 터미널

1. vue 설치

   npm install -g @vue/cli

2. 파일 생성

   vue create 파일명

에러

vue 파일 생성중 에러

• 대충 권한이 없다고 하고 error 메세지중에 밑의 코드를 입력하라고 안내가 되어있었다.

sudo chown -R 501:20 "/Users/내맥북이름/.npm" 그 결과, 설치 성공!!

const debounce = (func, wait = 500, immediate = false) => {
  let timeoutId;
  let promise;
  let resolvePromise; 

  const setPromise = () => {
    if(resolvePromise) {
      resolvePromise();
      resolvePromise = null;
    }
  }

  const debounced = () => {
    const later = () => {
      timeoutId = null;
      if (!immediate) {
        func();
        setPromise();
      }
    }
    clearTimeout(timeoutId);

    if (!promise) {
      promise = new Promise(resolve => {
        resolvePromise = resolve;
      });
    }
    if (immediate) {
      func();
      setPromise();
    }
    timeoutId = setTimeout(later, wait);

    return promise;
  };

  debounced.cancel = () => {
    clearTimeout(timeoutId);
    timeoutId = null;
    setPromise();
  };

  return debounced;
}

이 코드에서 만약 지정된 시간에 디바운스가 실행이 안되면 최대 지정 시간에는 실행되게 하라는 추가사항이였다...

그렇다면 maxWait을 인자로 받고 받은 인자를 이용해서 만들면 될거라고 생각했다. 여기까지는 좋았으나 갑자기 웬걸 setTimeout에 너무 집중하는 바람에 setTimeout에 인자를 추가한다고 했다. setTimeout을 재 설정해서 인자에 추가한다고 했어야됐는데.... 코드로 보면

const debounce = (func, wait = 500, immediate = false, maxWait = 1000) => {
  let timeoutId;
  let maxTimeoutId;// 새로운 변수 선언해줌
  let promise;
  let resolvePromise; 

  const setPromise = () => {
    if(resolvePromise) {
      resolvePromise();
      resolvePromise = null;
    }
  }

  const debounced = () => {
    const later = () => {
      timeoutId = null;
      if (!immediate) {
        func();
        setPromise();
      }
      maxTimeoutId = null; 
      clearTimeout(maxTimeoutId);
    }
    clearTimeout(timeoutId);
    clearTimeout(maxTimeoutId);//이전 setTimeout이 할당된 maxTimeoutId를 클리어 해줌

    if (!promise) {
      promise = new Promise(resolve => {
        resolvePromise = resolve;
      });
    }
    if (immediate) {
      func();
      setPromise();
    }
    timeoutId = setTimeout(later, wait);
    maxTimeoutId = setTimeout(()=>{
      if(timeoutId){
        later();
    }}, maxWait);

    return promise;
  };

  debounced.cancel = () => {
    clearTimeout(timeoutId);
    timeoutId = null;
    setPromise();
  };

  return debounced;
}

실행 과정

1. maxWait을 인자로 받음
2. setTimeout()에 의해 maxWait 시간이 지난 후 later가 실행되게 설정
3. 만약 later가 wait만 기다렸다가 실행이 되면 함수는 promise를 완료상태로 만들고 max를 clear 해준다.
4. 만약 later가 실행이 안되면 setTimeout에 의해 max시간이 지나고 later가 실행돼서 max를 clear해서 초기화 해준다.

이 블로그 참고 많이 했습니다 감사합니다 ㅠㅜㅠㅜ https://velog.io/@wkahd01/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EB%A9%B4%EC%A0%91-%EB%AC%B8%EC%A0%9C-%EC%9D%80%ED%96%89-HTML-%EC%A7%88%EB%AC%B8-%EB%8B%B5%EB%B3%80

https://beomy.github.io/tech/javascript/javascript-runtime/

자바스크립트란?

• 자바스크립트는 싱글 스레드, 논 블로킹 언어입니다.

  싱글 스레드

• 하나의 힙 영역과 하나의 콜스택을 가집니다. 한번에 한가지 일밖에 하지 못합니다.

  콜스택

• 함수가 실행되는 순서를 기억합니다. 함수를 실행하려면 스택의 가장 위에 해당함수를 넣게 되고, 함수에서 리턴이 일어나면 스택의 가장 위쪽 함수에서 함수를 꺼냅니다.

  블로킹

• 싱글 스레드는 스택이 하나밖에 없기 때문에 한가지 일만 할 수 있습니다. 웹 브라우자에서 코드가 실행되는데 코드가 종료될 때까지 유저가 클릭해도 어떤 반응을 하지 않는 상태가 됩니다. 콜 스택이 멈춘 상태를 블로킹 상태라고 합니다.

  논 블로킹

• 비동기 콜백으로 블로킹 문제를 해결합니다. 하나의 요청이 완료될 때까지 기다리지 않고 동시에 다른 작업을 수행합니다.

  비동기

• 특정 코드의 실행이 끝날때까지 기다려주지 않고 나머지 코드를 먼저 실행하는 것입니다. 대표적으로 promise, async/await이 있습니다.

  브라우저 렌더링 과정

1. 서버에 HTML, CSS 파일을 요청 후 응답으로 받음
2. DOM, CSSOM 생성
3. DOM과 CSSOM을 합쳐서 렌더트리 생성
4. 각 요소의 위치나 크기를 계산 후 계산한 요소들을 paint한다.

   호이스팅

• 모든 선언이 코드의 선두로 끌어 올려진 것

  클로저

• 부모 함수 내의 자식 함수에서 부모 함수에 선언된 변수에 접근이 가능하게 해주고 외부에서 함수 내의 변수에 조작을 하지 못하게 은닉하는 것

  REST API

• 클라이언트가 서버로 데이터를 요청할 때 브라우저 주소처럼 작성된 루트로 HTTP 메서드를 활용해 CRUD를 요청하고 HTTP 응답코드를 사용해 서버의 상태를 나타내는 것

  RESTful

• REST API를 제공하는 우베 서비스를 RESTful 이라고 한다.

  SPA

• 최초 한번 페이지 전체를 로딩한 후 데이터만 변경해서 사용(하나의 페이지에서 실행됨)

  CSR

• 사용자가 접속하면 서버는 빈 HTML 파일에 어떤 자바 스크립트 파일이 필요한지 적어서 보낸다.

• 클라이언트는 HTML을 받아 자바스크립트를 다운 받고 렌더링을 한다.

• 최초 로드 시 필요한 파일을 전부 받고 사용자의 필요에 따라 클라이언트 단에서 받아와 렌더링 하는 방식

  장점 : 렌더링 속도가 빠름 단점 : 초반 뼈대만 다운 받기 때문에 SEO에 취약, 초기 렌더링 속도가 느리다

  SSR

• 사용자가 접속하면 웹 어플리케이션은 서버로 요청을 보내고 서버는 HTML, CSS, JS 렌더링을 마친 후 클라이언트로 보내준다.

• 새로 고침이 일어날때마다 새로운 페이지에 대한 요청을 하는 방식

• SEO 측면에서 유리하다.

  장점 : 초기 렌더링 속도가 빠르다, SEO에 최적화 단점 : 매 렌더링마다 서버를 거침, 속도가 느림

  쿠키, 세션, 로컬

• 쿠키 : 크기가 매우 작고 보안에 취약

• 세션 : 브라우저가 유지 되는 동안 데이터를 보관, 브라우저 닫으면 데이터 소멸 -> 장바구니 데이터

• 로컬 : 데이터를 저장하면 영구적으로 저장. -> 자동 로그인 데이터

  이벤트 전파

• 생성된 이벤트 객체는 이벤트를 발생시킨 DOM 요소인 이벤트 타깃을 중심으로 DOM트리를 통해 전파

  이벤트 버블링

• 이벤트가 하위요소에서 상위요소로 전파

  이벤트 캡쳐링

• 이벤트가 상위요소에서 상위요소로 전파

  이벤트 위임

• 부모 요소에 이벤트를 부여해 버블링을 통해 하위 요소를 동작시킬대 해당 이벤트를 발생시킬 수 있다.

  타입스크립트

• 정적 타입을 명시하여 타입 관련 오류를 미리 잡아낼 수 있다.

• 코드에 목적을 명시하고 목적에 맞지 않은 타입의 변수나 함수들에서 에러를 발생시켜 에러를 사전에 제거할 수 있다.

• 뒷 단계에서 버그를 발견했을 때 처리 비용이 기하 급수적으로 늘어남

  실행 컨텍스트

1. 전역 실행 컨텍스트 생성/소스코드 실행

• var로 선언한 전역 변수는 객체 환경 레코드에 저장됨.
• const, let으로 선언한 전역 변수는 선언적 환경 레코드에 저장됨.

2. edit 함수 실행 컨텍스트 생성/소스코드 실행

• 전역 환경 레코드와 달리 함수 환경 레코드는 분리되지 않고, 한 장소에서 var,const,let 모두를 처리한다.

HTTP

• 웹에서 정보를 주고 받기 위한 프로토콜

  HTTPS

• 보안되지 않은 HTTP를 보완하기 위해 등장, 암호화하여 민감한 정보를 보호하는 보안 프로토콜

디바운스

• 일정 시간안에 같은 요청이 여러번 반복되면 그룹화해서 일정 시간 지난 후 한번만 호출

  쓰로틀링

• 마지막 함수가 호출된 후 일정시간이 지난 후 다시 호출

1. 브라우저는 HTML, CSS, jS 등 렌더링에 필요한 리소스를 요청 -> 서버로부터 응답
2. 브라우저의 렌더링 엔진은 서버로부터 응담된 HTML과 CSS를 *파싱하여 DOM, CSSOM을 생성하고 결합하여 렌더 트리를 생성
3. 브라우저의 자바스크립트 엔진은 서버로부터 응답된 자바스크립트를 파싱 AST 생성 바이트코드(?)로 변환, 이때 자바스크립트는 DOM API를 통해 DOM과 CSSOM을 변경할 수 있다. 변경된 DOM과 CSSOM은 다시 렌더 트리로 결합된다.
4. 렌더트리를 기반으로 HTML 요소의 레이아웃을 계싼 후 브라우저 화면에 HTML 요소를 페인팅

파싱 : 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 들이기 위해 텍스트 문서의 문자열 토큰으로 분해. 쉽게 해석이라고 생각하면 된다.

뭔가 이해가 안되는 것 같아서 다시 찾아봤다....

브라우저의 동작 원리
1. HTML 마크업을 처리하고 DOM 트리를 빌드한다. ("무엇을" 그릴지 결정한다.)
2. CSS 마크업을 처리하고 CSSOM 트리를 빌드한다. ("어떻게" 그릴지 결정한다.)
3. DOM 및 CSSOM 을 결합하여 렌더링 트리를 형성한다. ("화면에 그려질 것만" 결정)
4. 렌더링 트리에서 레이아웃을 실행하여 각 노드의 기하학적 형태를 계산한다. ("Box-Model" 을 생성한다.)
5. 개별 노드를 화면에 페인트한다.(or 래스터화)

참고 자료 : 모던 자바스크립트 딥 다이브 참고 자료 : https://github.com/JaeYeopHan/Interview_Question_for_Beginner/tree/main/FrontEnd#%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%9D%98-%EB%8F%99%EC%9E%91-%EC%9B%90%EB%A6%AC

디바운스

• 짧은 시간 발생하는 이벤트를 그룹화해서 마지막에 한번만 이벤트 핸들러가 호출되도록 하는 기법
• EX) input 이벤트가 짧은 시간 연속으로 발생하는 경우에 사용

  // 디바운스 예시
  <script>
    const $input = document.querySelector("input");
    const $text = document.querySelector(".text");
    const debounce = (callback, delay) => {
        let timeId;
        // debounce 함수는 timeId를 기억하는 클로저를 반환
        return event => {
        // delay가 경과하기 이전에 이벤트가 발생하면 이전 타이머를 취소 -> 새로운 타이머 재설정
        // delay보다 짧은 간격으로 이벤트가 발생하면 callback은 호출 안됨
            if(timeId) clearTimeout(timeId);
            timeId = setTimeout(callback, delay, event);
        };
    };
    // debounce 함수가 반환하는 클로저가 이벤트 핸들러 등록
    // 300ms보다 짧은 간격으로 이벤트 발생하면 debounce 함수의 콜백 호출 안함
    // 300ms 동안 input 이벤트가 발생하지 않으면 debounce 함수 호출!
    $input.oninput = debounce(e => {
        $text.textContent = e.target.value;
     }, 300)
  </script>

  주로 resize이벤트, input 요소에 입력된 값으로 ajax 요청하는 자동완성 기능, 버튼 중복클릭 방지 처리 등에 사용된다.

  Underscore의 debounce 함수나 Lodash의 debounce 함수를 권장

스로틀

• 짧은 시간동안 이벤트가 연속해서 발생하더라도 일정 시간 간격으로 이벤트 핸들러가 최대 한번만 호출된다.

• 일정 시간 단위로 이벤트 핸들러가 호출되도록 호출 주기를 만든다.

  // 스로틀 예시
  <script>
    const $container = document.querySelector(".container");
    const $text = document.querySelector(".text");
  
    const throttle = (callback, delay) => {
        let timeId;
        // throttle 함수는 timeId를 기억하는 클로저를 반환
        return event => {
        // delay가 경과하기 이전에 이벤트가 발생하면 아무 것도 하지 않음
        // delay 간격으로 callback 호출
            if(timeId) return;
            timeId = setTimeout(() => {
                  callback(event);
                timeId = null;
            }, delay, event);
        };
    };
  
    $container.addEventListener("scroll", throttle(() => {
        $text.textContent = ++ throttle;
    }, 100));
  </script>

  주로 scroll 이벤트 처리나 무한 스크롤 구현에 쓰인다.

  Underscore의 throttle 함수나 Lodash의 throttle 함수를 권장

프론트 설계 및 기획의 부재

• 프로젝트 내에서 프론트엔드 개발자들이 취준생에 개발 경력이 없던 사람들이 모여 프론트 설계 및 기획을 거치지 않고 개발을 진행
• 가지각색의 폴더 및 파일명
• 통일되지 않은 컴포넌트 패턴들
• 검증하지 않고 PR을 실행 등으로 인해 반복적인 충돌
• 이로 인해 서로간의 코드리뷰 및 소통의 부재로 이어짐

  코드리뷰의 부재

• 팀 프로젝트의 강점이자 장점이 다른 개발자들의 코드를 보며 많이 배운다고 생각
• 코드 컨벤션, 커밋 컨벤션, 브랜치 관리 등 모든 것들의 약속이 없는 상태에서 코드리뷰는 불가능하다고 생각
• 각자만의 코드 스타일로 가독성이 떨어짐
• 코드리뷰를 진행하지 않으니 서로의 소통의 부재로 이어짐

  소통의 부재

• 앞서 설명한 이유로 소통의 부재가 진행
• 매번 회의 및 PR 시 충돌 해결의 시간이 필요
• 협업의 효율이 현저히 떨어짐

협업 시 CI/CD의 중요성, 소통의 중요성을 한번 더 느낌

나에 대한 아쉬움

• 성능 최적화를 고려하지 않고 코드 작성
  • 코드의 용량 및 이미지 최적화 적용 필요
• 컴포넌트 수의 증가에 따른 폴더구조 혼잡
• 가독성을 고려하지 않은 코드 작성
• 복잡한 파일구조

아직 위와 같은 부분들이 부족한 점과 고쳐 나가야할 점이라고 생각

아직 부족한 것도 많고 배울 것도 많지만 긍정적으로 꾸준히 하다보면 기회가 올거라 믿습니다! 파이테잉..!

Redux?

• 앱 전체 상태를 쉽게 관리하기 위한 라이브러리.
• Redux의 많은 개념들이 Flux pattern에서 차용됨.
• 주로 React 앱과 같이 사용.
• redux.js.org에서 수많은 문서를 참고할 수 있고, 웹상에 Redux를 활용한 앱 구축 사례가 많음.

  언제 사용??

• 앱 전체의 상태 관리가 필요할 때.
• 복잡한 비동기 처리가 있는 상태 관리가 필요할 때.
• 앱의 상태가 복잡하고, 이를 체계적으로 관리하고 싶을 때.
• 상태 관리 패턴을 도입하여, 여러 개발자와 협업하고 싶을 때.
• logger, devtool 등을 활용하여 상태를 관리할 필요가 있을 때.

  원칙

• Single source of truth - Store는 단 하나이며, 모든 앱의 상태는 이곳에 보관됨.
• Immutability – 상태는 오로지 읽을 수만 있다. 변경하려면 모든 상태가 변경 되어야 함.
• Pure function – 상태의 변경은 어떠한 사이드 이펙트도 만들지 않아야 함.

  02. Redux의구조

  구조

• redux는 자유롭게 확장하여 사용할 수 있음.
• 내부적으로 action과 데이터가 어떻게 흐르는지 이해하고, middleware, enhancer 등을 이용하여 redux를 확장함.

  middleware

• action은 dispatch 이후 모든 middleware를 먼저 통과한 후에 reducer에 도달.
• redux-thunk, redux-logger 등의 라이브러리를 적용.

  enhancer

• action은 dispatch 이후 모든 middleware를 먼저 통과한 후에 reducer에 도달.
• redux devtools 등의 라이브러리를 적용.

  03. redux-toolkit 활용

  04. Redux를 React에 연결하기

  05. Redux를 이용한 비동기 처리

useState, useEffect, fetch를 중점적으로 공부하자! useReducer 몰라도 된다!!

이전 코드 복습

• counter 기능 구현하기!
  • input에 있는 값만큼 더하기
  • button 누를 때 마다 더하기!

버튼을 클릭하지 않아도 숫자가 늘어나는 기능

• setInterval()

  //interval 실행
  id = setInterval(() => {
  console.log(1);
  }, 1000);
  
  

// 끌때 clearInterval(id)

> useEffect의 첫번째 파라미터는 콜백함수, 콜백함수의 리턴값은 함수고, 그 함수는 컴포넌트가 제거될 때 호출된다.

## 클로저

a = () => { let id = 1; return () => { console.log(id); } } a()//() => { console.log(id); }

b = a()

## 자동으로 숫자가 올라가는 기능에서 start, stop 기능 추가해보기~!
## MUI 복습!
- Container
- Grid
- ButtonGroup
- Button
  - variant="contained"(색이 차있는 버튼 /  없으면 색 없는 버튼)
- theme로 색상 변경하기!

import { blue, grey } from "@mui/material/colors";
const darkThema = createTheme({
    palette: {
    primary: grey,
  },
});




<ThemeProvider theme={darkThema}>
   <Counter4UseEffect />
</ThemeProvider>

- 위와 같이 Theme태그 안에 있는 태그들의 버튼은 다 grey 컬러로 바꼈다.
- context API로 인해 변경되었다는데... 이해가 안된다,....ㅎ
### context API
> https://www.youtube.com/watch?v=JQ_lksQFgNw


- 잘쓰면 고수소리 듣는다!!

// 기본 구조 import React from "react";

export function ContextAPI() { return (

- useContext를 이용해서 자식의 속성들(디자인속성)을 덮어 씌어버릴 수 있다.
- useContext는 useContext를 구독하고 있는 컴포넌트들만 동적으로 렌더링이 된다.총 5개의 컴포넌트 중에 3개만 가지고 있다면 3개만 재렌더링 된다.
### useReducer

const [변경될 값, 바꾸라고 하는 명령] = useReducer(값을 변경하는 함수, 기본값); function 값을변경하는함수(oldCount:number, action:string):number{ if(action === "UP"){ return oldCount + 1; } else if(action === "DOWN"){ return oldCount - 1; } else if(action === "RESET"){ return 0; } }

- useState의 경쟁자
- 똑같은 일을 함
- 근데 취지가 좀 다름
- useState의 장점 = 이해하기 쉬움
- useReducer의 장점 = 상태를 이해하면 쉬움!

오오ㅗ옹 개신기해!!

function MyUseReduce() { // const [count, setCount] = useState(0); function countReducer(oldCount: number, action: string): number { console.log(oldCount, action); return oldCount; } const [count, countDispatch] = useReducer(countReducer, 10); return (

- console.log로 값을 확인했으면 이제 useRedecer을 이용해 값을 변경해보자!

function MyUseReduce() { // const [count, setCount] = useState(0); function countReducer(oldCount: number, action: string): number { console.log(oldCount, action); if (action === "UP") { return oldCount + 1; } else if (action === "DOWN") { return oldCount - 1; } else if (action === "RESET") { return 0; } return oldCount; } const [count, countDispatch] = useReducer(countReducer, 10); return (

**_출처 : 엘리스 아카데미_**

지난 시간 counter 함수들 복습!!

MUI 사용

container

• 설치

  • 터미널에 npm install @mui/material @emotion/react @emotion/styled

• import하자!

  • import { Container } from "@mui/material";

• 코드 사용

  • ```function App() { return ( ); }``` #### Grid

• import

  • import Grid from "@mui/material/Grid";

• 사용

  • ``` function App() { return ( ); }```

• 그리드를 이용하기!!

  function App() {
  return (
    <Container>
      <Grid container spacing={1}>
        <Grid item xs={12} sm={6} md={4}>
          <Counter></Counter>
        </Grid>
        <Grid item xs={12} sm={6} md={4}>
          <Counter></Counter>
        </Grid>
        <Grid item xs={12} sm={6} md={4}>
          <Counter></Counter>
        </Grid>
      </Grid>
    </Container>
  );
  }

  toggle 버튼 만들기

  function Counter2() {
  const [open, setOpen] = useState(false);
  return (
    <div style={{ border: "10px solid black", padding: 20 }}>
      <h1>Counter - Dialog</h1>
      <Button
        variant="contained"
        onClick={() => {
          setOpen(true);
        }}
      >
        Run
      </Button>
  
      <div style={{ display: open ? "block" : "none" }}>
        <h2>Dialog Counter</h2>
        <button>+</button> 0
        <Button
          variant="contained"
          onClick={() => {
            setOpen(false);
          }}
        >
          close
        </Button>
      </div>
    </div>
  );
  }

  토글을 Dialog로 만들기!

  import Dialog from "@mui/material/Dialog";
  

... function Counter2() { const [open, setOpen] = useState(false); return ( <div style={{ border: "10px solid black", padding: 20 }}>

Counter - Dialog

  <Dialog open={open}>// 여기 바꿔줌!!
    <h2>Dialog Counter</h2>
    <button>+</button> 0
    <Button
      variant="contained"
      onClick={() => {
        setOpen(false);
      }}
    >
      close
    </Button>
  </Dialog>
</div>

); }

### dialog 이용해보기

import Dialog from "@mui/material/Dialog"; import DialogTitle from "@mui/material/DialogTitle"; import DialogContent from "@mui/material/DialogContent"; import DialogActions from "@mui/material/DialogActions";

...

function Counter2() { const [open, setOpen] = useState(false); return ( <div style={{ border: "10px solid black", padding: 20 }}>

Counter - Dialog

  <Dialog
    open={open}
    onClose={() => {
      setOpen(false);
    }}
  >
    <DialogTitle>Dialog Title</DialogTitle>
    <DialogContent>
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
      <button>+</button> 0
    </DialogContent>
    <DialogActions>
      <Button
        variant="contained"
        onClick={() => {
          setOpen(false);
        }}
      >
        close
      </Button>
    </DialogActions>
  </Dialog>
</div>

); }

### random 컬러 리턴해주는 함수!

function getRandomColor() { const letters = "0123456789ABCDEF"; let color = "#"; for (let i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)]; } return color; }

• db.json 파일 생성된 것 확인!!
• http://localhost:9999/posts 를 입력하면 화면이 뜬다!

  fetch API

• Promise를 사용함~!
• fetch를 사용할때 첫번째 파라미터는 URL
• then에는 모두 함수가 들어간다!
• 첫번째 then에 (resp)=>resp.json()
• 두번째 then (result) =>{ console.log(result)}

fetch('http://localhost:9999/counter')
    .then((resp)=>resp.json())
    .then((result)=>{
        console.log(result.value);
    })

useEffect를 사용해보기

• 컴포넌트가 실행될 때 마다 실행됨.
• 마지막에 빈 배열을 추가해주면 최초 1회만 실행하게 된다!

  useEffect(() => {
    fetch("http://localhost:9999/counter")
      .then((resp) => resp.json())
      .then((result) => {
        console.log(result);
        setCount(result.value);
      });
  }, []);

• 위의 코드는 서버의 값을 변경하지 않는다.

  fetch("http://localhost:9999/counter", {
            method: "PATCH",
            body: JSON.stringify({ value: count + 1 }),
            headers: {
              "Content-Type": "application/json",
            },
          })
            .then((resp) => resp.json())
            .then((result) => {setCount(result.value)});

• 이러면 서버값도 바뀜!!!!
• 오오 개신기해!!

출처 : 엘리스 아카데미

상태 관리

• 상태 관리 기술이란 앱 상에서의 데이터를 메모리 등에 저장하고 하나 이상의 컴포넌트에서 데이터를 공유하는 것.
• 한 컴포넌트 안에서의 상태, 여러 컴포넌트 간의 상태, 전체 앱의 상태 관리를 모두 포함.

  MPA와 SPA에서의 상태 관리

• MPA에서는 서버의 데이터를 이용해 페이지를 렌더링하므로, 클라이언트의 데이터와 서버의 데이터가 큰 차이를 가지지 않음.
• SPA에서는 자체적으로 데이터를 갖고, 서버와의 동기화가 필요한 데이터만을 처리. 그 외의 데이터는 Client만의 데이터로 유지.

  상태 관리 기술의 도입

• 상태가 많지 않거나, 유저와의 인터렉션이 많지 않다면 매 작업 시 서버와 동기화 하더라도 충분함.
• 앱이 사용하는 데이터가 점점 많아지고, 유저와 인터렉션 시 임시로 저장하는 데이터가 많아지는 경우 상태 관리를 고려.
• FE 뿐만 아니라, BE와의 데이터 통신도 충분히 고려해야 함.

  장점

• 높은 품질의 코드를 작성하는 데 유리
• 성능 최적화, 네트워크 최적화 등에 유리
• 데이터 관리의 고도화

단점

• Boilerplate 문제.(외부 라이브러리를 적용할 경우)
• 파악해야 할 로직과 레이어가 많아짐.
• 잘못 사용할 경우, 앱의 복잡도만을 높이거나, 성능을 악화.

2. 상태 관리 기술이 해결하는 문제

데이터 캐싱과 재활용

• SPA에서 페이지 로딩 시마다 모든 데이터를 로딩한다면, 사용자 경험 측면에서 MPA를 크게 넘어서기 힘듦.
• 오히려네트워크요청수가많아져더느릴수도있음.
• 변경이 잦은 데이터가 아니라면, 데이터를 캐싱하고 재활용함.
• 변경이 잦다면, 데이터의 변경 시점을 파악해 최적화.
  • ex)일정 시간마다 서버에 저장, 타이핑 5초 후 서버에 저장

    Prop Drilling

• 컴포넌트가 복잡해지는 경우, 상위 부모와 자식 컴포넌트 간의 깊이가 커짐.
• 최하단의 자식 컴포넌트가 데이터를 쓰기 위해 최상위 컴포넌트부터 데이터를 보내야 하는 상황이 발생.
• Context API 등을 활용, 필요한 컴포넌트에서 데이터를 가져올 수 있음.
• 컴포넌트 간의 결합성을 낮춤.

3. Flux pattern

• MVC Pattern
  • MVC Pattern이란 애플리케이션을 Model, View, Controller로 분리하여 개발하는 소프트웨어 디자인 패턴 중 하나입니다.
• Flux Pattern
  • 하나의 유저 인터렉션이 무조건 하나의 업데이트만 만들 수 있는 것은 아닙니다. 예를 들어 특정 버튼을 클릭했을 때 여러개의 액션을 만들 수 있기 때문입니다.
• MVC 패턴의 경우, 하나의 유저 인터렉션 발생 시 그 인터렉션으로 발생한 업데이트가 다른 연쇄 업데이트를 만들어낼 수 있습니다. 따라서 업데이트의 근원을 추적하기 힘든 반면 Flux 패턴은 연쇄 업데이트가 아닌 단방향 업데이트만을 만들어낼 수 있습니다.

Flux pattern?

• 2014년에 Facebook에서 제안한 웹 애플리케이션 아키텍처 패턴.
• Unidirectional data flow를 활용, 데이터의 업데이트와 UI 반영을 단순화.
• React의 UI 패턴인 합성 컴포넌트와 어울리도록 설계.
• redux, react-redux 라이브러리의 Prior art.

  Flux Pattern vs MVC Pattern

• MVC 패턴에서는, View에서 특정 데이터를 업데이트하면 연쇄적인 업데이트가 일어남.
• 특정 유저의 인터렉션이 여러 UI 컴포넌트가 사용하는 데이터에 영향을 줄 때, MVC만으로는 앱의 복잡도를 낮추거나 업데이트의 흐름을 따라가기 어려움.
• Flux는 하나의 유저 인터렉션 당 하나의 Update만을 만들도록 함.
• data와 업데이트가 한 방향으로 흐르므로 UI의 업데이트를 예측하기 쉬움.

  Flux 구조

• Action -> Dispatcher -> Store -> View 순으로 데이터가 흐름.

  4. useState, useRef, useContext, useReducer

  상태 관리에 사용되는 훅

• 외부 라이브러리 없이 React가 제공하는 훅 만으로 상태 관리를 구현하기 위해 사용.
• 함수형 컴포넌트에 상태를 두고, 여러 컴포넌트 간 데이터와 데이터 변경 함수를 공유하는 방식으로 상태를 관리하게 됨.

  useState

• 단순한 하나의 상태를 관리하기에 적합함.
• const [ state, setState ] = useState(initState | initFn)
• state가 바뀌면, state를 사용하는 컴포넌트를 리렌더함.
• useEffect와 함께, state에 반응하는 훅을 구축.

  useRef

• 상태가 바뀌어도 리렌더링하지 않는 상태를 정의함.
• 즉, 상태가 UI의 변경과 관계없을 때 사용. ex) setTimeout의 timerId 저장
• uncontrolled component의 상태를 조작하는 등, 리렌더링을 최소화하는 상태 관리에 사용됨. ex) Dynamic Form 예시

  useContext

• 컴포넌트와 컴포넌트 간 상태를 공유할 때 사용.
• 부분적인 컴포넌트들의 상태 관리, 전체 앱의 상태 관리를 모두 구현.
• Context Provider 안에서 렌더링되는 컴포넌트는, useContext를 이용해 깊이 nested 된 컴포넌트라도 바로 context value를 가져옴.
• context value가 바뀌면 내부 컴포넌트는 모두 리렌더링됨.

  useReducer

• useState보다 복잡한 상태를 다룰 때 사용.
• 별도의 라이브러리 없이 flux pattern에 기반한 상태 관리를 구현.
• const [state, dispatch] = useReducer(reducer, initState)
• nested state 등 복잡한 여러 개의 상태를 한꺼번에 관리하거나, 어떤 상태에 여러 가지 처리를 적용할 때 유용.
• 상태 복잡하다면, useState에 관한 callback을 내려주는 것보다 dispatch를 prop으로 내려 리렌더링을 최적화하는 것을 권장.

  5. useState를 활용한 상태 관리

• 상위 컴포넌트에서 state와 state 변경 함수를 정의하고, 그 state나 변경 함수를 사용하는 컴포넌트까지 prop으로 내려주는 패턴.
• state가 변경되면, 중간에 state를 넘기기만 하는 컴포넌트들도 모두 리렌더링됨.
• 상태와 상태에 대한 변화가 단순하거나, 상대적으로 소규모 앱에서 사용하기에 적합.

  6. useContext를 활용한 상태 관리

• Provider 단에서 상태를 정의하고, 직접 상태와 변경 함수를 사용하는 컴포넌트에서 useContext를 이용해 바로 상태를 가져와 사용하는 패턴.
• useReducer와 함께, 복잡한 상태와 상태에 대한 변경 로직을 두 개 이상의 컴포넌트에서 활용하도록 구현 가능.
• state는 필요한 곳에서만 사용하므로, 불필요한 컴포넌트 리렌더링을 방지.
• Prop Drilling(Plumbing)을 방지하여 컴포넌트 간 결합도를 낮춤.

출처 : 엘리스 아카데미

등장

• 초기 웹 환경에서는, 서버에서 모든 데이터를 로드하여 페이지를 빌드했으므로 자바스크립트에는 별도의 비동기 처리가 필요하지 않았음.
• Ajax 기술의 등장으로 페이지 로드 없이 client-side에서 서버로 요청을 보내 데이터를 처리할 수 있게 됨.
• XMLHttpRequest라는 객체를 이용해 서버로 요청을 보낼 수 있게 됨.

  자바스크립트와 비동기

• 자바스크립트는 single-threaded language이므로, 만일 서버 요청을 기다려야 한다면 유저는 멈춰있는 브라우저를 보게 될 것.
• 따라서 동기가 아닌 비동기 처리를 이용해 서버로 통신할 필요가 있음.
• 비동기 요청 후, main thread는 유저의 입력을 받거나, 페이지를 그리는 등의 작업을 처리.
• 비동기 응답을 받으면, 응답을 처리하는 callback 함수를 task queue에 넣음.
• event queue는 main thread에 여유가 있을 때 task queue에서 함수를 꺼내 실행.

  동기

• 해당 코드 블록을 실행할 때 thread의 제어권을 넘기지 않ㅇ고 순서대로 실행하는 것을 의미

  비동기

• 코드의 순서와 다르게 실행
• 비동기 처리 코드를 감싼 블록은 task queue에 넣어짐
• main thred가 동기 코드를 실행한 후에 제어권이 돌아왔을 때 event loop가 task queue에 넣어진 비동기 코드를 실행함.

2. 자바스크립트 비동기2

비동기 처리를 위한 내부 구조

• 브라우저에서 실행되는 자바스크립트 코드는 event driven 시스템으로 작동.

  • (이벤트 드리븐 ? = task queue에 이벤트를 넣어 하나씩 실행하는 시스템을 말한다.)

• 웹앱을 로드하면 브라우저는 HTML document를 읽어 문서에 있는 CSS code, JS code를 불러옴.

• 자바스크립트 엔진은 코드를 읽어 실행.

• 브라우저의 main thread는 자바스크립트 코드에서 동기적으로 처리되어야 할 코드 실행 외에도, 웹 페이지를 실시간으로 렌더링하고, 유저의 입력을 감지하고, 네트워크 통신을 처리하는 등 수많은 일을 처리.

• 비동기 작업을 할당하면, 비동기 처리가 끝나고 브라우저는 task queue에 실행 코드를 넣음.

• main thread는 event loop를 돌려, task queue에 작업이 있는지 체크.

• 작업이 있으면 task를 실행.

  3. Promise

  Callback pattern vs Promise

• 비동기 처리 후 실행될 코드를 Callback function으로 보내는 것.

  • setTimeOut()

• 비동기 처리가 고도화되면서, Callback hell 등이 단점으로 부각됨. - Promise를 활용하여 비동기 처리의 순서 조작, 에러 핸들링, 여러 비동기 요청 처리 등을 쉽게 처리할 수 있게 됨.

  promise

• Promise 객체는, 객체가 생성 당시에는 알려지지 않은 데이터에 대한 Proxy.

• 비동기 실행이 완료된 후에, .then, .catch, .finally 등의 핸들러를 붙여 각각 데이터 처리 로직, 에러 처리 로직, 클린업 로직을 실행.

• then 체인을 붙여, 비동기 실행을 마치 동기 실행처럼 동작하도록 함.

  returnPromise()
  .then(num => {
  console.log("First random number : ", num) })
  .catch(error => {
    console.error("Error occured : ", error)
  })
  .finally(() => {
    console.log("Promise returned.")
  })

  상태

• Promise 객체는 pending, fulfilled, rejected 3개의 상태를 가짐.

• fulfilled, rejected 두 상태를 settled 라고 지칭.

• pending은 비동기 실행이 끝나기를 기다리는 상태.

• fulfilled는 비동기 실행이 성공한 상태.

• rejected는 비동기 실행이 실패한 상태.

  다중 promise 핸들러

• Promise.all()은 모든 프로미스가 fulfilled 되길 기다림. 하나라도 에러 발생시, 모든 프로미스 요청이 중단됨.

• Promise.allSettled()는 모든 프로미스가 settled 되길 기다림.

• Promise.race()는, 넘겨진 프로미스들 중 하나라도 settled 되길 기다림.

• Promise.any() - 넘겨진 프로미스 중 하나라도 fulfilled 되길 기다림.

  4. async/await

• Promise 체인을 구축하지 않고도. promise를 직관적으로 사용할 수 있는 문법.

• try...catch 문으로 에러를 직관적으로 처리

• async function을 만들고, promise를 기다려야하는 표현 앞에 await을 붙임.

  여러 개의 await

• 여러 개의 await을 순서대로 나열하여, then chain을 구현할 수 있음.

• try... catch 문을 자유롭게 활용하여 에러 처리를 적용.

  5. POSTMAN, Open API, CORS

  postman

• 서버와의 통신을 위해 API를 활용하는 경우 활용

• API를 테스트하기 위한 도구

• 포스트맨 짱짱맨!

  open API

• RESTful API를 하나의 문서로 정의하기 위한 문서 표준

  CORS

• Cross-Origin Resource Sharing.

• 브라우저는 모든 요청 시 Origin 헤더를 포함.

• 서버는 Origin 헤더를 보고, 해당 요청이 원하는 도메인에서부터 출발한 것인지를 판단.

• 다른 Origin에서 온 요청은 서버에서 기본적으로 거부함.

• 웹사이트에 악성 script가 로드되어, 수상한 요청을 하는 것을 막기 위함.

• 반대로, 익명 유저로부터의 DDos공격 등을 막기 위함.

• 서버에 직접 CORS 설정을 할 수 없다면, Proxy 서버 등을 만들어 해결.

• SPA(Single Page Application)은 하나의 페이지 요청으로 전체 웹앱을 사용하는 방식
• 유저는 웹페이지를 사용하며 모바일 앱 같은 경험을 느낌.

  특징

• Client-side routing 기술을 활용, 페이지 진입 시 리로드없이 라우팅함.
• AJAX 기술을 활용, 페이지 이동 시 서버에 데이터만 요청하여 자바스크립트로 페이지를 만듦.
• MPA와 다르게, 여러 페이지를 하나의 앱의 구성요소로 보고 여러 페이지 간의 스타일, 컴포넌트를 재활용하는 방향으로 구현.
• 자바스크립트만을 활용해 전체 페이지를 만들기에, 첫 요청 시 빈 페이지를 받게 됨.

  장점

• 서버에서 페이지를 만들 필요가 없으므로 CDN에 캐싱이 가능.
• 매번 페이지 요청을 할 필요가 없어 네트워크 요청이 줄어듦.
  • 마찬가지로 데이터 요청 등을 캐싱하여 재사용하는 등 제약 조건이 줄어듦.
• 웹사이트를 개별 페이지보다는 하나의 앱으로 보는 설계로 고도의 소프트웨어 설계와
  • 패턴을 적용할 수 있음.

    단점

• MPA방식 보다는 Search Engine Optimization에 불리함.
• 하나의 자바스크립트 앱이 지속하므로, 메모리 관리와 성능, 데이터 활용 등이 중요.
• 여러 페이지를 전송받는 것 보다, 하나의 거대한 자바스크립트 앱을 전송받아야 하므로 코드가 많아질수록 로드 속도가 느려짐.

  SPA에서 라우팅

• 주로 History API 혹은 URL Hash를 이용해 페이지 리로드 없는 페이지 전환을 구현.
• history, location 등 HTML5 API를 활용.
• visibilitychange, popstate, beforeunload 등 window event를 활용하여 페이지 전환 등의 이벤트 시 핸들러를 등록.
• react-router, reach-router 등의 라이브러리를 활용하면, 라우팅 관련 기능을 쉽게 사용할 수 있음.

  MPA

• MPA(Multi Page Application)은 서버에 미리 여러 페이지를 두고, 유저가 네비게이션 시 요청에 적합한 페이지를 전달.
• 미리 서버에서 전체 페이지를 빌드해 브라우저로 전송됨.
• 서버에 라우팅을 처리하는 기능이 있고, 서버에서 여러 페이지를 관리함.
• 페이지 요청마다 모든 리소스를 다시 받아오므로, 페이지 간 데이터를 재활용하기 힘듬.

  react-router

  react-router

• Declarative routing for React.(imperative와 다른 패턴!)
• React의 JSX를 이용하거나, History API를 사용하여 라우팅을 구현. - 웹에서는 react-router-dom을 사용.
• 적용 시, 서버의 모든 path에서 같은 앱을 서빙하도록 해야 함.

  기능

• React 컴포넌트를 특정 path와 연결하면, 해당하는 path로 진입 시 컴포넌트를 렌더링하게 함.
• query, path variable 등 URL parameter를 얻어 활용함.
• 조건에 맞지 않을 경우 redirect 함.
• 페이지 이동 시, 이벤트 핸들러를 등록함.
• /posts/my-post-1 등의 nested route를 구현함.

  사용

• <BrowserRouter> 로 감싸 Router Context를 제공해야 함.
• Route로 path를 정의하고, 그 안에 렌더링하고자 하는 컴포넌트를 넣음.
• Link로 특정 페이지로 이동 시, 리로드 없이 페이지가 이동함.
• Switch로, 매칭되는 라우트 하나를 렌더링하게 함.

// App.jsx
import { BrowserRouter, Route, Switch } from 'react-router-dom'
export function App() {
  return (
    <BrowserRouter> 
      <Switch>
        <Route path="/about"><AboutPage /></Route>
        <Route path="/contact"><ContactPage /></Route>
        <Route path="/"><HomePage /></Route>
      </Switch>
    </BrowserRouter>
) }

• path="/"를 맨 마지막에 넣은 이유는 맨 위에 있다면 계속 홈페이지만 렌더링 해주기 떄문에 맨 아래에다가 넣는다~!

  // HomePage.jsx
  import { NavLink } from 'react-router-dom'
  function HomePage() {
  return (
    <div>
        <nav>
            <NavLink to="/">Home</NavLink>
            <NavLink to="/about">About</NavLink>                 <NavLink to="/contact">Contact</NavLink>
        </nav>
        <div>Home 페이지</div>
    </div>
  ) }

  //AboutPage.jsx
  import { NavLink } from 'react-router-dom'
  function AboutPage() {
  return (
    <div>
        <nav>
            <NavLink to="/">Home</NavLink>
            <NavLink to="/about">About</NavLink>                 <NavLink to="/contact">Contact</NavLink>
        </nav>
        <div>About 페이지</div>
    </div>
  ) }

  react-router 컴포넌트

  BrowserRouter

• HTML5의 History API를 사용하여, UI와 URL의 싱크를 맞추는 역할. - 모든 URL에 대해 동작하게 하기 위해서는 서버 설정 필요.
• 모든 path 앞의 basename을 지정할 수 있음. ex) basename="/ko"
• forceRefresh로, 페이지 이동 시 리프레시할 것인지 지정할 수 있음.

  Switch

• 여러 Route 중 매치되는 Route 위에서부터 하나 선택하여 렌더링함.
• 매칭되는 Route가 없으면 아무것도 보여주지 않음.
  • fallback용으로 404 Not Found Page를 추가함.
• path="/"의 경우 모든 path에 매칭되므로 exact 키워드를 추가하거나 가장 아래로 내림.

  Route

• path와 컴포넌트를 매칭함.
• 매칭되는 컴포넌트는 children으로 넣어주거나 component prop으로 넘김.
• exact 키워드로 정확하게 매칭하는 path를 설정함.
• Route로 렌더링 되는 최상위 컴포넌트는 match, location, history를 prop으로 받음.
• render prop으로, 매칭되었을 때 실제 어떤 컴포넌트를 렌더링할지 통제함.

  Redirect

• Link와 비슷하나, 렌더링되면 to prop으로 지정한 path로 이동함.
• Switch 안에서 쓰일 경우, from, to를 받아 이동하게 만듦. ex) from="/" to="/login"

  Link, NavLink

• to prop을 특정 URL로 받아, 클릭 시 네비게이션 함.
• anchor tag를 래핑함.
• NavLink의 경우, 매칭 시 어떤 스타일을 가질지 등의 추가 기능이 있음.
• to에 location object나 함수를 받을 수 있음.

  seHistory, useLocation, useParams, useRouteMatch

• 최상위 컴포넌트가 아니더라도, hook으로 react-router 관련 객체에 접근할 수 있음.
• history, location, params, match 객체에 접근함.

React-router 응용

Private Route 만들기

• 특정 조건이 충족되지 않았을 때 다른 페이지로 Redirect 하도록 하는 기능.

• 유저의 상세 페이지, 개인정보 변경 페이지등을 만들 때 사용됨.

  function PrivateRoute({ component: Component, ...props }) {
  return <Route {...props} render={props => {
    const isLoggedIn = !!getUserInfo()
    if (!isLoggedIn) {
      return <Redirect to="/login" />
    }
    return <Component {...props} />
  }}
  }

• 오오 이거 써봐야겟따!!!

  query string 활용하기

• URL의 query string 정보를 활용해 앱을 구성할 수 있음.

• URLSearchParams API를 활용함.

출처 : 엘리스 아카데미

setState를 callback함수로 전해줄 수 있다.

const [count, setCount] = useState<number>();
function up () {
    setCount((prevState) => {
        return prevState + 1;
    });
}

• 이렇게~!

  const [count, setCount] = useState<number>(0);
  function up () {
  setCount(count+3);
  setCount(count+2);
  setCount(count+1);
  }
  //1

• 이렇게 하면 맨 마지막에 가져온 + 1만 실행이 된다!
• 그런데 set함수에 callback함수로 전달해주면 기능이 달라진다!

  const [count, setCount] = useState<number>(0);
  function up () {
    setCount((prevState) => {
        return prevState + 1;
    });//1
    setCount((prevState) => {
        return prevState + 1;
    });//2
    setCount((prevState) => {
        return prevState + 1;
    });//3
  }

• State값을 새로운 값으로 만들어서 리턴해줌!!

리액트에서 set을 다루는 방법
1. state를 바로 넣어서 다루기
 setter를 함수안에 여러개 넣으면 의도하지 않은 동작이 일어날수 있다


 function up(){setCount(count+1)}


2. 콜백함수로 감싸서 다루기
이전 state 값을 사용해서 새로운 값을 만들고 싶다면 콜백함수로 감싸는게 안전!


  function up(){
    setCount((prev)=>{
      return prev + 1
    })
  }

두번째 예제(클릭 시 현재 시간 출력)

• 배열이나 객체 방식의 데이터를 다룸!
• Counter2에서 li태그를 넣을때 key값을 주지 않으면 에러를 받게 된다.*
• 이를 해결하기 위해 추가되는 Li태그에 key값을 부여한다!!

  function Counter2() {
  const [times, setTimes] = useState<String[]>([]);
  console.log('component - times', times);
  function up() {
    const newTimes = [...times];
    newTimes.push(getCurrentTime());
    setTimes(newTimes);
  }
  return (
    <>
      <h1>카운터2</h1>
      <button onClick={up}>+</button>
      <ol>
        {times.map((value, index) => {//index를 받고
          return <li key={index}>{value}</li>;// key에 넣어줌!!!
        })}
      </ol>
    </>
  );
  }

  여태까지 배운거 짬뽕해보자~!

  예제 2번 따라서 해보기!

  function Counter4() {
  const [step, setStep] = useState(1);
  const [count, setCount] = useState<countType[]>([]);
  console.log('count', count);
  return (
    <>
      <h1>Counter4</h1>
      <input
        type="number"
        value={step}
        onChange={(e) => {
          setStep(Number(e.target.value));
        }}
      />
      <button
        onClick={() => {
          const newCount = [...count];
          newCount.push({ time: getCurrentTime(), step: step });
          setCount(newCount);
        }}
      >
        +
      </button>
      <ul>
        {count.map((value, index) => {
          return (
            <li key={index}>
              {value.time}, {value.step}
            </li>
          );
        })}
      </ul>
      0
    </>
  );
  }

• 현재 시간 출력과 입력 값의 합을 구하는 코드!

  function Counter4() {
  const [step, setStep] = useState(1);
  const [count, setCount] = useState<countType[]>([]);
  console.log('count', count);
  let total = 0;
  for (let i = 0; i < count.length; i++) {
    total = total + count[i].step;
  }
  return (
    <>
      <h1>Counter4</h1>
      <input
        type="number"
        value={step}
        onChange={(e) => {
          setStep(Number(e.target.value));
        }}
      />
      <button
        onClick={() => {
          const newCount = [...count];
          newCount.push({ time: getCurrentTime(), step: step });
          setCount(newCount);
        }}
      >
        +
      </button>
      {total}
      <ul>
        {count.map((value, index) => {
          return (
            <li key={index}>
              {value.time}, {value.step}
            </li>
          );
        })}
      </ul>
    </>
  );
  }

• 흠... 보면서 해석하고 쓰는건 가능한데 직접 만드는게 문제다...

  debugger

• debugger를 호출하면

reduce를 이용해서 현재시간과 누적 값 출력하기

배열.reduce((누적된값, 현재순번의원소)=> return 누적된값 + 현재순번의원소},0)

count.reduce((acc, cur) => {
        console.log(acc, cur);
        return acc + cur.step;
      }, 0)

ul를 테이블로 바꿔서 출력~!

• ul > li의 태그를 table > tr > td로 바꿔서 출력!!

    <table>
        {count.map((value, index) => {
          return (
            <tr key={index}>
              <td>{value.time}</td>
              <td>{value.step}</td>
            </tr>
          );
        })}
      </table>

  번외 : 원격 저장소 코드들 저장해보기~!

• vs코드에서 버튼으로 pull, push 하는 것을 보았다~!

다시 돌아와서 우리가 만든 코드 css 적용해보기!

인라인 스타일로 넣었다. 그런데 css를 다른 컴포넌트에서도 활용하게 해보자!

인라인 스타일을 사용하면?

• 해당 컴포넌트에만 적용이 된다.
• 모듈화가 된다.
• 코드와 가깝기 때문에 찾기에 쉽다.
• 다른 곳에서 재활용하기 까다롭고 CSS의 문법이 아니다.

  파일로 쪼개면?

• 재사용하기 좋다!
• 만약 다른 컴포넌트에 이름이 중복된 클래스가 있다면 그 친구때문에 간섭이 생긴다.

  style.module.css 사용해보기

  새 파일(App.module.css)을 만들고 간단한 style 태그를 작성!

  .layout {
  border: 10px solid blue;
  }
  

### 번외 : 리팩토링 해보기
- 옮기고 싶은 컴포넌트를 드래그해서 마우스 오른쪽 클릭 > 리팩토링 > new file 클릭! > 신세계~
그럼 우리가 만든 코드가 모듈이 된다~! 

### 번외 : import React,{useState} from 'react'; 에서 {}가 있고 없고의 차이를 알아보자
- export default와 export의 차이
- export default
  - export default를 사용하면 export한 파일의 대장을 끌고 온다.
  - 그러면 import 할 때 중괄호{}를 사용하지 않는다.
- export
  - 이건 대표가 아니니까 이름을 명확하게 입력해야된다.

export contentType ~

import {contentType} from './~';

  이름 정확하게 입력!!!!

## MUI
>https://mui.com/

- 부트스트랩 같은 거!! 다른 사람이 만들어 놓은거 가져다 쓸 수 있다!

새 터미널 열고! npm install @mui/material @emotion/react @emotion/styled

``` package.json에서 설치된 것을 확인!

• <Container></Container>를 입력한 후 저 태그 안에 여태까지 만든 컴포넌트들을 넣으면 화면을 확대해도 가운데 정렬을 자동으로 한다~! 개꿀!

출처 : 엘리스 아카데미

이고잉 코치님이 주신 선물~~ https://stackblitz.com/

스택블리츠에서 지난 주에 했던거 구현~

프리티어 설정하는 방법

vsCode에서 설치하는 것: 혼자 개발한다면 이것도 좋습니다. prettierrc에 설정 담아놓기: 여러사람들과 코드를 공유한다면 이렇게 해야합니당 컨벤션을 맞추는 것을 저장할 때마다 강제하기 위해서!

https://velog.io/@dum6894/%EA%B0%9C%EB%B0%9C%ED%99%98%EA%B2%BD-vscode-prettier-%EC%84%A4%EC%B9%98-%EB%B0%8F-%EC%82%AC%EC%9A%A9%EB%B2%95

Counter2 만들기

현재 시간을 출력하는 버튼 만들기!

// 현재 시간을 구하는 함수
function getCurrentTime() {
  const now = new Date();
  const hours = String(now.getHours()).padStart(2, '0');
  const minutes = String(now.getMinutes()).padStart(2, '0');
  const seconds = String(now.getSeconds()).padStart(2, '0');

  return `${hours}:${minutes}:${seconds}`;
}

console.log(getCurrentTime());

• 현재 시간을 구해주는 함수를 챗지피티로 만들어보았다~!
• 컴포넌트에 getCurrentTime함수 호출해서 적용해보기~!

  // Counter2 컴포넌트
  function Counter2() {
  const [times, setTimes] = useState([]);
  function up() {
    times.push(getCurrentTime());
    console.log('up-times', times);
    setTimes(times);
  }
  return (
    <>
      <h1>카운터2</h1>
      <button onClick={up}>+</button>
      <ol></ol>
    </>
  );
  }

  - 상태의 데이터 타입이 배열이나 객체면 복제하고 복제본을 수정한다!!

  function Counter2() {
  const [times, setTimes] = useState([]);
  console.log('component - times', times);
  function up() {
    const newTimes = [...times];
    newTimes.push(getCurrentTime());
    setTimes(newTimes);
  }
  return (
    <>
      <h1>카운터2</h1>
      <button onClick={up}>+</button>
      <ol></ol>
    </>
  );
  }

• 새로운 배열을 복제해서 복제한 배열을 수정하는 코드! 여기까지 커밋!

TypeScript 제네릭 타입 설명!

• 위의 코드를 보면 매개변수에 타입을 지정하지 않아서 any타입으로 출력이 되는 것을 볼 수 있다!

그럼 타입을 지정해보자!

function containNumber(a:number,b:number){
    return[a,b]
}
console.log(containNumber(10,20))
//const a:number[] = [1,2] // 숫자만 들어오는 배열이다!!!

• 이렇게 타입을 명시해줘서 내가 원하는 타입을 지정할 수 있다!

• 제네릭 : 데이터 타입을 넘버로 특화시킨 함수를 일반화해서 어떤 데이터 타입도 수용할 수 있게 하겠다. 그러면서 타입 안정성을 놓치지 않겠다!

  function containGeneric<T>(a:T,b:T):T[]{
    return [a,b];
  }
  console.log(containGeneric<number>(1,2));//number부분을 string으로 바꾸면 string타입을 받게 된다!!

• 함수 선언 부분에서는 아직 들어올 타입을 모르겠다!

• 함수 호출 부분에서 데이터 타입을 명시해줘서 타입을 알려준다!!

• 함수 호출 부분에서 <데이터타입>을 생략해줄 수 있다. console.log(containGeneric(1,2));

다시 카운터 돌아와서! 오류 해결하기!!

• 타입에 대해서 이야기 하고있다!!
• 지금 Counter2의 useState의 타입은 never이다.
• never란 ?

  • 보통 state의 intialState에 들어가는 값을 보고 타입을 자동적으로 추론하는데(따라서 안써도 되는 경우가 있음), []이렇게 빈 배열의 경우는 추측할 수 없기 때문에 never[]로 인식합니당

void는 없다! 이고 never는 추측할 수 없어요 입니당

(void는 return값이 없다는 뜻!)

const [times, setTimes] = useState(['']);
// const [times, setTimes] = useState<String[]>([]);
// string[]이 들어온다는 것을 명시해주자!!

• 위의 코드를 적용하면 에러 사라짐!!

  근데 콘솔 왜 두번씩 실행됨?

• 개발 단계(환경)이라서 콘솔이 두번씩 실행 된다!! 실제 서버는 한번 실행!!

  이제 브라우저에 출력할 수 있게 해보자!

• 맵 메소드를 이용할 것인데 map()이란?

  a = [1,2,3]
  b = a.map((value) => {
    return value * 2
  }
  )
  console.log(a,b);//[1,2,3] [2,4,6];

  function Counter2() {
  const [times, setTimes] = useState<String[]>([]);
  console.log('component - times', times);
  function up() {
    const newTimes = [...times];
    newTimes.push(getCurrentTime());
    setTimes(newTimes);
  }
  return (
    <>
      <h1>카운터2</h1>
      <button onClick={up}>+</button>
      <ol>
        {times.map((value) => {
          return <li>{value}</li>;
        })}
      </ol>
    </>
  );
  }

• ol태그 안에 map 함수를 이용해서 출력을 하게 했다!!

form

• input의 값을 받아와서 새로운 state로 변경 되어야 input의 value로 들어가고 계산이 된다!

  function Counter3() {
  const [count, setCount] = useState<number>(0);
  const [step, setStep] = useState<number>(1);
  return (
    <>
      <h1>Counter3</h1>
      <input
        type="number"
        value={step}
        onChange={(e) => {
          setStep(Number(e.target.value));
        }}
      ></input>
      <button onClick={() => setCount(count + step)}>+</button>
      {count}
    </>
  );
  }

끝내기 전에 확장 기능 소개~! https://react.dev/learn/react-developer-tools

출처 : 엘리스 아카데미

• 자바스크립트 파일 안에 스타일을 정의하고, React 컴포넌트처럼 활용.
• 자바스크립트 코드와 긴밀히 연계하여 다양한 코드를 작성할 수 있음.
• 별도의 CSS 파일을 만들지 않고 하나의 파일 안에 스타일을 관리하고 싶을때 유리.
• 스타일 코드와 컴포넌트 코드 간의 결합을 나누고 싶을때 유리.
• tagged template literal이라는 문법을 활용.
• CSS 코드에 post-css, minification, Sass 적용.
• CSS 코드를 겹치지 않게 처리.
  • 클래스 이름 자체가 hash.

출처 : 엘리스 아카데미

• HTML element를 하나의 상자로 간주하고, 그 안에서 어떻게 내부 item을 배열할 것인가를 스타일 하는 모델.

• 1차원의 레이아웃을 디자인하는 데 사용.

• responsive design에 유리.

• 가운데 정렬,비율로 정렬 등을 처리할때 유리.

  FlexBox 기본 개념

• flex container - Flexbox 아이템을 담는 컨테이너.

• Flex Item - 컨테이너 안에 담긴 아이템.

• Flex axis - flex 아이템의 방향을 결정하는 축.

  Flexbox properties - container

• flex-direction

  • row, column 등의 방향을 결정.

• justify-content

  • main axis에서의 정렬을 결정

• align-items

  • cross axis에서의 정렬을 결정.

• flex-wrap

  • flex container가 내부 item의 width를 합친 것보다 작아질 때, 어떻게 정렬할 것인지를 결정.

    Flexbox properties - item

• flex-grow

  • flex container가 커질 때 item이 얼마만큼 늘어날 것인지를 결정.

• flex-shrink

  • flex container가 줄어들 때 item이 얼마만큼 줄어들 것인지를 결정.

• flex-basis

  • 기준점이 되는 item의 크기.

• justify-self

  • 한 아이템을 main-axis에 따라 어떻게 정렬할 것인지를 결정.

• align-self

  • 한 아이템을 cross-axis에 따라 어떻게 정렬할 것인지를 결정.

• order

  • flex container에서 item의 순서를 결정.

    예시

    .container {
    display: flex; flex-direction: column;
    }
    .wrapper {
      width: 100%;
    }
    .three {
      display: flex;
    }
    .four, .five {
      flex: 1;
    }

    

  출처 : 엘리스 아카데미

• CSS layout의 기본이 되는 모델
• content-box, padding-box, border-box, margin-box 순으로 하나의 엘리멘트를 감싸고 있다.
• bo의 타입은 inline, block enrkwl
• display:inline, display:inline-block, display:block으로 서로 다른 box type을 적용 가능

position

• static
  • position의 default 값으로, element는 normal flow를 따라 위치함.
• relative
  • normal flow를 따라 위치하되, 자기 자신에 상대적으로 위치함.
• absolute
  • normal flow에서 벗어나 가장 가까운 ancestor에 상대적으로 위치함.
• fixed
  • normal flow를 벗어나 viewport에 상대적으로 위치함.
• sticky
  • normal flow에 따라 위치하되, 가장 가까운 scrolling ancestor에 상대적으로 위치함.

    units

• px, pt, cm, in
  • 절대적인 길이를 표현하는 unit.
• rem, em, %
  • 특정 값에 상대적인 길이를 표현하는 unit.
• vw, vh, vmin, vmax
  • viewport에 상대적인 길이를 표현하는 unit.

    Sass

• Syntactically Awesome Style Sheets. CSS Preprocessor.
• SCSS, Sass 문법을 지원함.
• 모듈, 믹스인, nested style, 변수, 조건문, 반복문 등의 기능으로 CSS를 프로그래밍 언어적으로 활용하도록 확장.
• styled-components는 Sass를 기본적으로 지원함.

  Sass &

• &는 자기 자신을 나타내는 placeholder.
• 기존 CSS의 selector 문법을 응용하여 복잡한 스타일을 적용.

  Sass variable

• 믹스인, partial 와 함께 Sass가 제공하는 코드 관리 방법 중 하나.
• 색상, 사이즈등 자주 등장하는 값을 주로 변수로 사용함.

  $color-red: red;
  $color-white: #fff;
  .reset-button { 
    color: $color-red; 
    &:hover {
        color: $color-white;
      }
  }

  Sass nested style

  $color-red: red;
  $color-white: #fff;
  .reset-button {
    color: $color-red;
    &:hover {
        color: $color-white;
      }
    > button {} 
  }

• 위의 코드에서 hover부분처럼 작성할 수 있음

  Sass mixins, import, include

• mixins - 여러 스타일을 한꺼번에 묶어서 사용할 수 있다고 정의할 수 있다.

  @mixins font-style-1 {
  font-size: 36pt;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: -0.05;
  }

• import, include - 컴포넌트처럼 사용 가능~!

  @import './font-styles.scss'
  

.button { @include font-style-1; background: red; }

```

출처 : 엘리스 아카데미

• CSS 파일을 import 해서 사용
• 필요한 모든 css 스타일을 하나의 파일에 작성하여, 자바스크립트 파일과 코드 분리 가능

  css import 장단점

• 단순히 css파일만을 import하여 사용할 수 있어 편리
• 컴포넌트가 많지 않을 경우 하나의 CSS 파일에 코드를 관리하는 것도 가능
• CSS 파일은 분리할 수 있으나, namespace를 나눌 수 없음.
• 만일 스타일이 겹칠 경우 cascading rule에 따라, 마지막에 나온 룰이 덮어 씌어짐

  CSS module

• 하나의 CSS module 파일 안에 작성한 스타일은 하나의 파일 namespace로 관리.
• class name 뒤에 겹치지 않는 hash를 붙임
• 스타일이 겹치는 상황을 해결
• 두 단어 이상의 경우, class명을 camelCase로 이름을 지음.

  import styles from "./input-with-button.module.css";
  

export function InputWithButton() { return (

```

CSS-in-JS

• 별도의 CSS 파일을 만들지 않고 하나의 컴포넌트 파일 안에서 스타일을 작성
• 자바스크립트 문법을 그대로 활용하여 코드를 작성(자주 활용하는 색상 변수로 선언 후 호출 가능!)
• React 컴포넌트를 사용하는 것 처럼 사용
• Sass 문법 활용 가능

출처 : 엘리스 아카데미

스타일링은 왜 중요할까?

• 사용자가 한 눈에 알아보게 하기 위해!

  좋은 앱을 만들려면?

• 번들 사이즈에 대한 고려
  • CSS코드가 차지하는 사이즈는 무척 중요한 요소
• 앱 성능에 대한 고려
  • animation, transition 등 유저와의 상호작용에서 스타일 코드의 성능이 중요
• 사용자에게 유리한 UI/UX를 고려
  • 스타일링에 대한 지식으로, 고급 테크닉을 적용하여 더 나은 UI/UX를 반영
• 자바스크립트를 이용한 다양한 스타일 기법
  • 토글링, 애니메이션, 다크모드 복잡한 컴포넌트 등은 자바스크립트에 대한 지식만으로 구현하기 힘듬
• 유지보수가 용이하고 확장 가능한 코드를 작성
  • 스타일에 관련된 코드를 어떻게 작성하고 관리하는가에 대한 지식이 필요

출처 : 엘리스 아카데미