콜라 빈 병 2개를 가져다주면 콜라 1병을 주는 마트가 있다. 빈 병 20개를 가져다주면 몇 병을 받을 수 있는가?

단, 보유 중인 빈 병이 2개 미만이면, 콜라를 받을 수 없다.

문제를 풀던 상빈이는 콜라 문제의 완벽한 해답을 찾았습니다. 상빈이가 푼 방법은 아래 그림과 같습니다. 우선 콜라 빈 병 20병을 가져가서 10병을 받습니다. 받은 10병을 모두 마신 뒤, 가져가서 5병을 받습니다. 5병 중 4병을 모두 마신 뒤 가져가서 2병을 받고, 또 2병을 모두 마신 뒤 가져가서 1병을 받습니다. 받은 1병과 5병을 받았을 때 남은 1병을 모두 마신 뒤 가져가면 1병을 또 받을 수 있습니다. 이 경우 상빈이는 총 10 + 5 + 2 + 1 + 1 = 19병의 콜라를 받을 수 있습니다.

문제를 열심히 풀던 상빈이는 일반화된 콜라 문제를 생각했습니다. 이 문제는 빈 병 a개를 가져다주면 콜라 b병을 주는 마트가 있을 때, 빈 병 n개를 가져다주면 몇 병을 받을 수 있는지 계산하는 문제입니다. 기존 콜라 문제와 마찬가지로, 보유 중인 빈 병이 a개 미만이면, 추가적으로 빈 병을 받을 순 없습니다. 상빈이는 열심히 고심했지만, 일반화된 콜라 문제의 답을 찾을 수 없었습니다. 상빈이를 도와, 일반화된 콜라 문제를 해결하는 프로그램을 만들어 주세요.

콜라를 받기 위해 마트에 주어야 하는 병 수 a, 빈 병 a개를 가져다 주면 마트가 주는 콜라 병 수 b, 상빈이가 가지고 있는 빈 병의 개수 n이 매개변수로 주어집니다. 상빈이가 받을 수 있는 콜라의 병 수를 return 하도록 solution 함수를 작성해주세요.

📜문제 풀이

아리까리 그 잡채였던 알고리즘 ㅠㅠ... 다른 분들 풀이를 보고 이해를 했다는...^^(씁쓸..)

• 마트에 주는 빈 병 a , 마트에서 주는 콜라 병 b, 상빈이가 가진 빈 병n
• 1 ≤ b < a ≤ n ≤ 1,000,000

function solution(a, b, n) {
    let result = 0
    for(let i=a; i<=n; i+=a) {
        result += b
        n += b
    }
    return result
}

> ```
function solution(a, b, n) {
    let result = 0;
>
    while (a <= n) {
        let recycle = Math.floor(n / a) * b;
        result += recycle;
        n = (n % a) + recycle;
    }
>
    return result;
}

💚문제 풀이

function solution(seoul) {
   for(let i=0; i<=seoul.length; i++){
       if(seoul[i] === "Kim"){
           return `김서방은 ${i}에 있다`
       }
   }
}

<br><br>

> ```
function solution(seoul) {
    let kim = seoul.indexOf("Kim")
    return `김서방은 ${kim}에 있다`
}

이번 알고리즘은 문제부터 어려워서 다른분들 정리한거 읽으면서 이해했따능>< 데헷큥! 구글링을 하다보면 천재님들이 참 많다! 쌍따봉과 박수갈채를 보냅니다👏🏻👏🏻

😊문제 풀이

function solution(sizes) {
    let w = []
    let h = []

for(let i=0; i<sizes.length; i++){
    let max = Math.max(sizes[i][0],sizes[i][1])
    let min = Math.min(sizes[i][0],sizes[i][1])
    w.push(max)
    h.push(min)
}
return Math.max(...w) * Math.max(...h)

}

- 가로와 세로를 나타내는 배열을 만들고
- `sizes`의 길이만큼 도는 for문을 작성
- `sizes`의 최대, 최소일 때 값들을 구하고, 가로와 세로를 나타내는 배열에 push를 해준다
- 그리고 `Math.max` 를 통해 가로와 세로의 최댓값을 곱해준다

***
### 😊다른 풀이
> ```
function solution(sizes) {
    let w = 0;
    let h = 0;
    sizes.forEach(s => {
        const [a, b] = s.sort((a,b) => a-b);
        if (a > h) h = a;
        if (b > w) w = b;
    });
>
    return w * h;
}

function solution(sizes) {
    const newSizes = sizes.map(e => e.sort((a, b) => a - b));
    return Math.max(...newSizes.map(e => e[0])) * Math.max(...newSizes.map(e => e[1]));
}

문제 설명 어떤 정수들이 있습니다. 이 정수들의 절댓값을 차례대로 담은 정수 배열 absolutes와 이 정수들의 부호를 차례대로 담은 불리언 배열 signs가 매개변수로 주어집니다. 실제 정수들의 합을 구하여 return 하도록 solution 함수를 완성해주세요.

제한사항 absolutes의 길이는 1 이상 1,000 이하입니다. absolutes의 모든 수는 각각 1 이상 1,000 이하입니다. signs의 길이는 absolutes의 길이와 같습니다. signs[i] 가 참이면 absolutes[i] 의 실제 정수가 양수임을, 그렇지 않으면 음수임을 의미합니다.

✏️문제 풀이

function solution(absolutes, signs) {
    let sum = 0;
    for(let i=0; i<absolutes.length; i++){
        if(signs[i] === true){
            sum = sum + absolutes[i]
        } else {
            sum = sum - absolutes[i]
        }
    }
    return sum
}

- 맨 처음에 `i<=absolutes.length` 로 작성했는데 계속 에러가 남..등호 주의해야겠다ㅠ

- `absolutes`의 길이만큼 도는 for문을 작성!
- 문제에 나와있듯이 조건에 따른 `if-else` 조건문을 작성! (`signs[i]` 가 참이면 `absolutes[i]` 의 실제 정수가 양수임을, 그렇지 않으면 음수임을 의미합니다.)
<br><br>

***

### 👀다른 사람의 풀이


1. `reduce()` 메서드 사용

> ```
function solution(absolutes, signs) {
>
    return absolutes.reduce((acc, val, i) => acc + (val * (signs[i] ? 1 : -1)), 0);
}

2. 삼항연산자 사용

function solution(absolutes, signs) {
    let answer = 0;
    for (let i = 0; i < absolutes.length; i++) {
        signs[i] ? answer += absolutes[i] : answer -= absolutes[i]
    }
    return answer;
}

```

두 정수 left와 right가 매개변수로 주어집니다. left부터 right까지의 모든 수들 중에서, 약수의 개수가 짝수인 수는 더하고, 약수의 개수가 홀수인 수는 뺀 수를 return 하도록 solution 함수를 완성해주세요.

(제한사항) 1 ≤ left ≤ right ≤ 1,000

✏️문제 풀이

function solution(left, right) {
    let result = 0
    for(let i=left; i<=right; i++){
        let divisors = []
        for(let j=1; j<=i; j++){
            if(i%j === 0) divisors.push(j)
        }
        divisors.length % 2 ===0 ? result += i : result -=i
    }
    return result
}

```

• left~right까지의 숫자를 도는 for문을 작성함
• 약수들을 담을 배열 divisors를 만듦
• 1부터 i까지 도는 for문을 하나 더 만들어서 나머지가 0으로 떨어지면 약수 배열에 push를 해줌
• 약수의 개수가 짝수면 + 를, 홀수면 - 를 함 => 삼항연산자 활용

새로 생긴 놀이기구는 인기가 매우 많아 줄이 끊이질 않습니다. 이 놀이기구의 원래 이용료는 price원 인데, 놀이기구를 N 번 째 이용한다면 원래 이용료의 N배를 받기로 하였습니다. 즉, 처음 이용료가 100이었다면 2번째에는 200, 3번째에는 300으로 요금이 인상됩니다. 놀이기구를 count번 타게 되면 현재 자신이 가지고 있는 금액에서 얼마가 모자라는지를 return 하도록 solution 함수를 완성하세요. 단, 금액이 부족하지 않으면 0을 return 하세요.

제한사항

• 놀이기구의 이용료 price : 1 ≤ price ≤ 2,500, price는 자연수
• 처음 가지고 있던 금액 money : 1 ≤ money ≤ 1,000,000,000, money는 자연수
• 놀이기구의 이용 횟수 count : 1 ≤ count ≤ 2,500, count는 자연수

👀문제 풀이

• count 숫자만큼 for문을 돌면서 총 이용금액(totalPrice)에 price*i를 더한다
• 놀이기구를 count번 타게 되면 현재 자신이 가지고 있는 금액에서 얼마가 모자라는지를 return 하도록 solution 함수를 완성하세요. 단, 금액이 부족하지 않으면 0을 return 하세요.

function solution(price, money, count) {
    let totalPrice = 0;
    for(let i=1; i<=count; i++){
        totalPrice += price * i
    }
    return money > totalPrice ? 0 : totalPrice-money
}

<br><br>

한국중학교에 다니는 학생들은 각자 정수 번호를 갖고 있습니다. 이 학교 학생 3명의 정수 번호를 더했을 때 0이 되면 3명의 학생은 삼총사라고 합니다. 예를 들어, 5명의 학생이 있고, 각각의 정수 번호가 순서대로 -2, 3, 0, 2, -5일 때, 첫 번째, 세 번째, 네 번째 학생의 정수 번호를 더하면 0이므로 세 학생은 삼총사입니다. 또한, 두 번째, 네 번째, 다섯 번째 학생의 정수 번호를 더해도 0이므로 세 학생도 삼총사입니다. 따라서 이 경우 한국중학교에서는 두 가지 방법으로 삼총사를 만들 수 있습니다.

한국중학교 학생들의 번호를 나타내는 정수 배열 number가 매개변수로 주어질 때, 학생들 중 삼총사를 만들 수 있는 방법의 수를 return 하도록 solution 함수를 완성하세요.

🐾나의 풀이

1. 맨 처음에 배열의 합을 더하는 메서드를 찾다가 reduce() 라는 메서드를 찾음

   https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

Array.prototype.reduce()

reduce()** 메서드는 배열의 각 요소에 대해 주어진 **리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다..

const array1 = [1, 2, 3, 4];

// 0 + 1 + 2 + 3 + 4 const initialValue = 0; const sumWithInitial = array1.reduce( (previousValue, currentValue) => previousValue + currentValue, initialValue );

console.log(sumWithInitial); // expected output: 10

### _But 계속 에러가 남^^...._ => 다른 방법 찾기 ㄱㄱ

<br><br>
2. 냅다 `if문` ㄱㄱ

> ```
function solution(number) {
    let arr = [0,0,0,0,0]
    if(number.length <= 13) {
        return 5
    }
}

🤩3가지 테스트 중 테스트2는 통과함!

그러나... 이 이상 문제를 어떻게 풀어 나가야 할지 생각이나질 않았다... 그래서 가장 익숙한 for문을 사용해봄

function solution(number) {
    let sum = 0
    if(number.length <= 13) {
        return 5
    } 
    for(let i=0; i<number.length; i++){
        for(let j=i+1; j<number.length; j++){
        } sum += 1;
    }
    return sum
}

### 역시나... ERROR ^^
구글의 도움으로 다른 분들의 정답을 보고 풀 수 있었다고 한다..

<br><br><br>

***

## <정답 코드>
> ```
function solution(number) {
    let sum = 0
    for(let i=0; i<number.length; i++){
        for(let j=i+1; j<number.length; j++){
            for(let k=j+1; k<number.length; k++){
                if(number[i]+number[j]+number[k]===0){
                    sum += 1
                }
            }
        }
    }
    return sum
}

• 삼총사가 될 수 있는 경우의 수를 sum(배열의 3가지 요소 더해서 0이 되는 경우)
• number의 요소 세가지를 더해야 하니까 for문 3개를 중첩시킴

✏️문제 설명

자연수 n이 매개변수로 주어집니다. n을 x로 나눈 나머지가 1이 되도록 하는 가장 작은 자연수 x를 return 하도록 solution 함수를 완성해주세요. 답이 항상 존재함은 증명될 수 있습니다.

제한사항 3 ≤ n ≤ 1,000,000

입출력 예 n result 10 3 12 11

입출력 예 설명 입출력 예 #1 10을 3으로 나눈 나머지가 1이고, 3보다 작은 자연수 중에서 문제의 조건을 만족하는 수가 없으므로, 3을 return 해야 합니다.

입출력 예 #2 12를 11로 나눈 나머지가 1이고, 11보다 작은 자연수 중에서 문제의 조건을 만족하는 수가 없으므로, 11을 return 해야 합니다.

👀나의 풀이 과정

• 나머지가 1 이어야하고 (n%x ===1)
• n은 숫자 3 이상
• n%x를 했을 때 나머지가 가장 작은 수 x를 return 해야함
  

function solution(n) {
    for(let x=2; x<n; x++){
        if(n%x===1) return x
    }
}

//n은 최솟값이 3이고 나머지가 1이 돼야하니까 x=2를 기본값으로 설정하고 for문을 돌림. //x=0해도 테스트 통과됨!

```

🔎일단 useParams가 뭐냐묘온~

<출처-https://reactrouter.com/en/main/hooks/use-params>

useParams후크는 에 의해 일치된 현재 URL에서 동적 매개변수의 키/값 쌍의 객체를 반환 합니다 . 자식 경로는 부모 경로에서 모든 매개변수를 상속합니다.

(말이 조금 어색해보이는건 영어로 소개된걸 냅다 구글 번역기로 바꿨기 때문^^)

import * as React from 'react';
import { Routes, Route, useParams } from 'react-router-dom';

function ProfilePage() { // Get the userId param from the URL. let { userId } = useParams(); // ... }

function App() { return ( <Route path=":userId" element={} /> ); }

위의 예시처럼 사용하면 된다고 한다. _어렵Neo.._💧💧💦

  <br><br>

  ### 프로젝트에서 `useParams` 사용한 코드로 다시 보자🙂 


> ```
const ProductDetail = () => {
  let { id } = useParams();
  const [product, setProduct] = useState(null);
  const getProductDetail = async () => {
    let url = `http://localhost:5000/products/${id}`;
    let response = await fetch(url);
    let data = await response.json();
    console.log(data);
    setProduct(data);
  };

• 일단 위 페이지는 상품 상세페이지이다. 미리 만들어 둔 db.json 에 있는 아이템들의 id값을 읽어와야함

• id는 동적인 값을 읽을 수 있어야해서 템플릿리터럴 형식!

• 공식 문서 코드 예시처럼 useParams를 선언함(let {id} = useParams())

• let url = http://localhost:5000/products/${id}; => id 값에 해당하는 아이템을 들고옴

  
  

🔎useSearchParams란?

** => url에서 쿼리값을 가져오는 함수**

useSearchParams후크는 현재 위치에 대한 URL의 쿼리 문자열을 읽고 수정하는 데 사용됩니다 . React의 useState후크 useSearchParams 와 마찬가지로 현재 위치의 검색 매개변수와 이를 업데이트하는 데 사용할 수 있는 함수라는 두 가지 값의 배열을 반환합니다 . React의 useStatehook 과 마찬가지로 기능 업데이트 setSearchParams 도 지원합니다. 따라서 업데이트된 버전을 가져와 반환하는 함수를 제공할 수 있습니다.

import * as React from "react";
import { useSearchParams } from "react-router-dom";

function App() { let [searchParams, setSearchParams] = useSearchParams();

function handleSubmit(event) { event.preventDefault(); // The serialize function here would be responsible for // creating an object of { key: value } pairs from the // fields in the form that make up the query. let params = serializeFormQuery(event.target); setSearchParams(params); }

return (

 **_ 오..어렵Neo..222...._**💧💦💧💦
  <br>

**  난 `useSearchParams`를 검색창에 검색하는 기능에 사용을했다. 코드를 통해 알아보자 ㄱㄱ**
  <br> 


>   ```
  const [productList, setProductList] = useState([]);
  const [query, setQuery] = useSearchParams();
  const getProducts = async () => {
    let searchQuery = query.get("q") || ""; //=>q로 시작하는 아이템을 가져와서 searchQuery에 넣어줘라. 값이 없으면 빈 스트링을 넣어주겠다
    console.log("쿼리값은?", searchQuery);
    let url = `http://localhost:5000/products?q=${searchQuery}`;
    let response = await fetch(url);
    let data = await response.json();
    setProductList(data);
  };
>

  - `const [query, setQuery] = useSearchParams();` 
  => 먼저 useSearchParams를 선언한다.
  -  `let searchQuery = query.get("q") || "";`
  => q로 시작하는 아이템을 가져와서 searchQuery에 넣어줘라. 값이 없으면 빈 스트링을 넣어주겠다.
  -  let url = `http://localhost:5000/products?q=${searchQuery}`;
###  ✨_검색창(`input`)에 '와이드' 라고 입력하면 url 쿼리 부분이 와이드로 바뀐것을 확인할 수 있다._✨

 ![](https://velog.velcdn.com/images/kimhyesu-_-/post/7d114dbf-3fed-4d7c-9689-1e579fe2c23d/image.png)

<br><br>

  - 이제 url이 변경되는 것은 확인을 했으니 화면에 보여줘야함.
  - `useEffect`를 사용해서 `query`값이 바뀔 때마다 화면에 바뀐 값을 보여준다


>   ```
  useEffect(() => {
    getProducts();
  }, [query]); //query값이 바뀔때마다 화면에 보여줘!

먼저 나의 근황 한 스푼~🥄

부트캠프 수료 이후, 같은 포지션(FE)인 동기들 몇명과 함께 스터디를 진행 중이다. 오늘이 마침 온라인 회의를 하는 날이었는데 라이프사이클이 꽤나 중요한 주제이고 면접에서도 종종 나온다고 했다. 하지만 단번에 이해가 될 내용이 아니었다? sks..나..난 천재가 아니라느뇽..! 난 한번에 이해를 할 수 없었다^^... 그래서 따로 정리를 해보겠다(당당) 라이프사이클... 다 외워버려ㅡㅡ 이해해버려ㅡㅡ 👊🏻

🍉 클래스 컴포넌트 liftcycle

✅Mounting - Updating - Unmounting

<1. Mounting>

1. contructor: 첫 번째로 실행되는 라이프사이클 함수.
   • 컴포넌트가 실행될 때 constructor 먼저 호출한다. (앱이 실행되자마자 해줘야 하는 작업들을 이 곳에 넣는다)
   • state를 만드는 곳
   • 주의사항❗ constructor() 내부에서 setState()를 호출하면 안 됩니다.  컴포넌트에 지역 state가 필요하다면 생성자 내에서 this.state 에 초기 state 값을 할당하면 됩니다.

2. render: UI 그려주는 함수

3. componentDidMount: UI가 세팅이 완료되면 우리에게 알려줌 ("낰낰 UI 준비 완") 주로 API를 부른다. 왜냐? render 끝나고 바로 호출되는 함수니까!

<2. Updating>

1. render: state가 업데이트 되거나, props가 업데이트 되거나 또는 업데이트가 강요되는 상황일 때! render가 발생한다.

2. componentDidUpdate: state가 업데이트 된 후에 해야하는 작업들(ex.counter 값 바뀌는거)

• componentDidUpdate() 는 갱신이 일어난 직후에 호출됩니다. 이 메서드는 최초 렌더링에서는 호출되지 않습니다. (출처-React 공식문서)

<3. Unmounting>

1. componentWillUnmount: 컴포넌트 마운트 해제됨. 컴포넌트가 사라짐

🍉함수형 컴포넌트 liftcycle

🎶useEffect

: 매개변수를 두개 받음(콜백함수,배열)

useEffect(()=>{
    console.log("useEffect1 Fire")
},[])
: 배열에 아무것도 없으면 componentDidMount()처럼 작동
    (처음에만 렌더됨)

<br>

> ```
useEffect(()⇒{
console.log(”useEffect2 fire”)
},[counter2]) 
>
: 배열 안에 state가 있으면 componentDidMount()+ componentDidUpdate() 
counter2 값 바뀔때마다 ”useEffect2 fire”

const [value1,setValue1]=useState(0)
const [value2,setValue2]=useState(0)

useEffect(()=>{ console.log("hey") },[value1,value2])

const updateValue =()=>{ setValue1(1) // 1개의 state만 업데이트 됨 }

// 콘솔 결과는 hey 한번만 프린트 됨

=========================================================

const [value1,setValue1]=useState(0) const [value2,setValue2]=useState(0)

useEffect(()=>{ console.log("hey") },[value1,value2]) const updateValue =()=>{ setValue1(1) // 2개의 state가 동시에 업데이트 됨 setValue2(1) }

// 콘솔 결과는 hey 한번만 프린트 됨

<br><br><br>

** : 데이터를 관리하는 방법. 여러 component간에 데이터 전달과 이벤트 통신을 한 곳에서 관리하는 것.**

🖐🏻상태 관리가 필요한 이유?

** 1. 데이터가 바뀌어도 페이지가 렌더링 되지 않게 하기 위해 2. 상태(state)들이 복잡하게 얽혀있다면, 상호간에 의존성이 많아지게 되어서 UI가 어떻게 변하는지 알기 어렵기 때문에 효율적인 관리가 필요하다.**

✅상태 관리 라이브러리 종류: redux,MobX,Overmind.js,recoil

🖐🏻Redux의 장점을 알아보자

1. 모든 component가 props 없이 state를 직접 꺼내서 쓸 수 있다.

2. 상태 관리가 용이하다. (버그가 나도 추적이 쉬움. 버그는 store.js에서 찾으면 됨)

(출처-유튜브 코딩애플 https://youtu.be/QZcYz2NrDIs)

_<state 관리하는 component에서 state 수정하는 코드(reducer) 작성>_

_<component에서 state 수정 요청 할때엔 dispatch 사용>_

ㄴ ㅏ 의,, React 기본기 다지기는 끝날 때까지 끝난 것이...아..ㅏ아..니다..

코딩알려주는누나 강의를 듣다 보면 좋은 정보들이 참 많은데 기록하지 않으면 잊어버리니까 벨로그에 정리-⭐(개인 공부하는거임..)

✅state를 const로 선언하는 이유?

✔️example

const [counter,setCounter] = useState(0)

=> state는 일반 변수와 달리 `setState` 함수를 이용하여 값을 변경한다. (이렇게 함수 내부의 변수가 함수 수명이 끝나더라도, 변수의 참조가 계속된다면 그 변수의 수명은 계속된다. 이것을 `클로저`라고 한다. 이렇게 우린 컴포넌트가 render가 되더라도 state를 기억할 수 있다.

<br>

허나, let을 사용하게되면 `counter2 = 100`과 같은 변수 형식의 할당이 가능해진다. 따라서 이를 방지하고 `setState`를 사용한 변수 변경만 허락하기위해 `const`로 선언한다. (const로 선언하면 변수 형태의 재할당을 막을 수 있다.)

<br>

***

<br>

# ✅이벤트 처리하기
기존에 HTML에서 이벤트를 처리할 때는 함수를 문자열 형태로 전달을 해주었다.

> ```
<button onclick="activateLasers()">
    Activate Lasers
</button>

onClick안에서 HTML에서 전달해 준 것처럼 activateLasers() 이렇게 전달을 하면 이는 함수를 실행하는 문장이기 때문에 이벤트가 발생하지 않았음에도 불구하고 처음에 render 시 바로 호출되버린다. 따라서 ⭐함수를 콜백형태로 전달해 주는 것이 중요하다.⭐

✔️전달해 줄 매개변수가 있는 경우

<button onClick={()=>activateLasers("some value")}>
  Activate Lasers
</button>

Swag 넘치게 ㅅ ㅣ작~

✅Promise?

- 자바스크립트에서 제공하는 비동기를 간편하게 처리할 수 있는 object

• 정상 수행: 성공메세지와 함께 처리된 결과값을 전달한다.(resolved)
• 실패: 에러를 전달한다.(rejected)
• 프라미스는 성공 또는 실패만 한다.
• promise 이전에 비동기 통신을 할 때 사용되는 콜백함수의 단점을 보완하기 위해 promise 객체가 생겨나게 됨

😯callback 함수란?

특정 함수 내에서 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출하는 함수

• 콜백 패턴을 사용하여 처리 순서를 보장하기 위해 중첩으로 인한 복잡도가 증가하였다. (비동기 통신 → 요청 → 응답 → 콜백 함수 수행 → 요청 → 응답 → 콜백함수 수행으로 발생하는 '무한 반복 콜백 현상'이 발생한다.)
• 어떤 구문에서 에러가 발생하였을 때 에러 위치를 찾기가 어렵다.
• 예외처리를 하는 데 있어서 어려움을 가지고 있다.

✔️무한 반복 콜백 현상

// 1초마다 숫자에 10을 더해준다.
const _number10Add = (num, callback) => {
    setTimeout(() => {
        callback(num + 10);
    }, 1000);
};

// 1초마다 숫자에 20을 더해준다. const _number20Add = (num, callback) => { setTimeout(() => { callback(num + 20); }, 1000); };

// 1초마다 숫자에 30을 더해준다. const _number30Add = (num, callback) => { setTimeout(() => { callback(num + 30); }, 1000); };

// 결과값을 콘솔에 출력한다. const _numberLog = (number) => new Promise(() => { setTimeout(() => console.log(number), 1000); });

// 최종 연산 값을 출력한다. => 반복 콜백 문제 발생 const resultConsole = () => { _number10Add(0, (callbackNum1) => { _number20Add(callbackNum1, (callbackNum2) => { _number30Add(callbackNum2, (callbackNum3) => { _numberLog(callbackNum3); }); }); }); }; resultConsole();

<br>


### ✔️Promise 함수로 변경한 예시
> ```
// 1초마다 숫자에 10을 더해준다.
const _number10Add = (num) => {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(num + 10);
        }, 1000);
    });
};
>
// 1초마다 숫자에 20을 더해준다.
const _number20Add = (num) => {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(num + 20);
        }, 1000);
    });
};
>
// 1초마다 숫자에 30을 더해준다.
const _number30Add = (num) => {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(num + 30);
        }, 1000);
    });
};
>
// 결과값을 콘솔에 출력한다.
const _numberLog = (number) =>
    new Promise(() => {
        setTimeout(() => console.log(number), 1000);
    });
>
// 최종 연산 값을 출력한다.
const resultConsole = () => {
    _number10Add(0)
        .then((res) => _number20Add(res))
        .then((res) => _number30Add(res))
        .then((res) => _numberLog(res));
};

❗여기서 동기, 비동기의 차이란 무엇이냐면

• 동기: 순서대로
• 비동기: 순서X. 비동기적으로 간단 설명 끝

그런데 왜 ? ?ㅇㅙ,,wHy,, 비동기적인 처리가 필요할까???

ex) youtube 켬-> 데이터 불러오는 약 2초동안 화면에 아무것도 안뜸->사용자 입장에선 불편함😑..

=> 비동기적인 처리가 필요함

✔️new Promise(executor) ->(promise의 형태)

- Promise를 생성하게되면 executor(실행함수)가 바로 실행된다.

• executor resolve 및 reject 인수를 전달할 실행 함수. 실행 함수는 프로미스 구현에 의해 resolve와 reject 함수를 받아 즉시 실행됩니다(실행 함수는 Promise 생성자가 생성한 객체를 반환하기도 전에 호출됩니다). resolve 및 reject 함수는 호출할 때 각각 프로미스를 이행하거나 거부합니다. 실행 함수는 보통 어떤 비동기 작업을 시작한 후 모든 작업을 끝내면 resolve를 호출해 프로미스를 이행하고, 오류가 발생한 경우 reject를 호출해 거부합니다. 실행 함수에서 오류를 던지면 프로미스는 거부됩니다. 실행 함수의 반환값은 무시됩니다.

- Promise는 클래스 문법과 같이 new 키워드와 생성자를 사용해 만든다.

• Promise 객체는 new 키워드와 생성자를 사용해 만듭니다. 생성자는 매개변수로 "실행 함수"를 받습니다. 이 함수는 매개 변수로 두 가지 함수를 받아야 하는데, 첫 번째 함수(resolve)는 비동기 작업을 성공적으로 완료해 결과를 값으로 반환할 때 호출해야 하고, 두 번째 함수(reject)는 작업이 실패하여 오류의 원인을 반환할 때 호출하면 됩니다. 두 번째 함수는 주로 오류 객체를 받습니다.

const myFirstPromise = new Promise((resolve, reject) => {
  // do something asynchronous which eventually calls either:
  //    (=둘 중 하나를 부르는 비동기적인 일을 한다)
  //   resolve(someValue)        // fulfilled(성공)
  // or
  //   reject("failure reason")  // rejected(실패)
});

**- Promise를 즉시 실행할 수도 있고 `then`으로 호출하여 필요시에 사용할 수도 있다.**

<br>

**📖 Example(출처-https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise/Promise)**

> ```
function myAsyncFunction(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest()
    xhr.open("GET", url)
    xhr.onload = () => resolve(xhr.responseText)
    xhr.onerror = () => reject(xhr.statusText)
    xhr.send()
  });
}

✅Promise에서 가장 중요한 state ⭐⭐⭐

1. pending(대기): 초기 상태
2. Fulfilled(이행): 성공적으로 완료된 상태
3. Rejected(실패): 실패 상태

- 5초 뒤 안녕찍히면서 상태 변함

✅Promise를 소비(사용)하는 .then .catch finally

promise
    .then((result)=>{  
  console.log(result) // 성공(정상작동일때 then메소드에서 값을 처리)
})
    .catch((error)=>{
  console.log(error) // 실패(오류를 잡음)
})
    .finally(()=>{
  console.log('성공이든 실패든 실행된다')
})

***

<br><br><br>

### _✍🏻코드로 Promise 이해해보기_
> ```
const getApple = () => 
  new Promise((resolve,reject)=>{
    setTimeout(()=> resolve('🍎'), 1000)
  })
>
const getBanana = (apple) =>
    new Promise((resolve,reject)=>{
    setTimeout(()=>resolve(`${apple} => 🍌`), 1000)
  })
>
const getTrain = (banana) =>
    new Promise((resolve,reject)=> {
      setTimeout(()=> resolve(`${banana} => 🚈`), 1000)
  })
>
// getApple()
//     .then((banana)=> getBanana(banana))
//     .then((train)=> getTrain(train))
//     .then((result)=> console.log(result))
>
getApple()
    .then(getBanana)
    .then(getTrain)
    .then(console.log)
//'🍎 => 🍌 => 🚈'

✔️ getApple() 위쪽은 Promise를 제공하는 곳! .then()부분은 Promise를 소비하는 곳!

✍catch 사용해서 에러 잡는법

const getApple = () => 
  new Promise((resolve,reject)=>{
    setTimeout(()=> resolve('🍎'), 1000)
  })

const getBanana = (apple) => new Promise((resolve,reject)=>{ setTimeout(()=>reject(new Error (${apple} => 🍌)), 1000) }) //getBanana 함수에서 Error를 입력함

const getTrain = (banana) => new Promise((resolve,reject)=> { setTimeout(()=> resolve(${banana} => 🚈), 1000) })

getApple() .then(getBanana) .catch((error)=> { return '🍍' }) //return 값으로 파인애플을 입력함 .then(getTrain) .then(console.log) //"🍍 => 🚈" (사과와 바나나는 없어지고 파인애플과 기차만 남음)

<br>

***

## ✅Promise.all과 Promise.race
- `all`은 제일 늦게 끝나는 것 기준
- `race`는 제일 빨리 끝나는 것 기준

<br>

### ✔️Promise.all 
> ```
function timer(time) {
  return new Promise((resolve,reject)=> {
    setTimeout(()=>{
      resolve(time)
    },time)
  })
} //비동기 로직으로 성공적으로 완료되어 time의 숫자를 결과값으로 반환한다.
>
console.time('all')
Promise.all([timer(1000), timer(2000), timer(3000)]).then((result)=> {
  console.log('result', result)
  console.timeEnd('all')
})
//'result' [ 1000, 2000, 3000 ]
//'all: 3001ms'

✍🏻Promise.all 특징

• 순서대로 실행되지만, 앞의 함수를 기다리지 않는다.

• 무조건 비동기 방식에서만 사용한다. (그래서 비동기식으로 사용하지 않으면 그 데이터는 불러오지 못했기 때문에 pending상태로 불려짐)
• 하나라도 reject에 해당된다면 결과값은 reject값이 된다. (ex. 하나라도 누락되면 페이지 안보여줄때 사용함)
• 모든 promise를 실행한 후 진행되는 하나의 promise를 반환함✔️

✔️Promise.race

function timer(time) {
  return new Promise((resolve,reject)=> {
    setTimeout(()=>{
      resolve(time)
    },time)
  })
} //비동기 로직으로 성공적으로 완료되어 time의 숫자를 결과값으로 반환한다.

console.time('all') Promise.race([timer(1000), timer(2000), timer(3000)]).then((result)=> { console.log('result', result) console.timeEnd('all') }) //'result' 1000 //'all: 1009ms'

```

❗정리

• 동시에 트리거가 된다(약간의 차이 있음)

• promise.all: 마지막 기준
• promise.race: 처음 기준

-어느쪽에서 렌더링을 하는지에 따라 다름

🥨SSR과 SSG

-서버에서 요청 시에 즉시 만드느냐 미리 다 만들어 놓느냐

🥨SSR

-요청할 때 즉시 만드니까 데이터가 달라져서 미리 만들어두기 어려운 페이지에 적합

🥨SSG

-미리 다 만들어두니까 바뀔 일이 거의 없는 페이지에 적합

1. CSR(Client Side Rendering)

: 사용자 요청에 따라 필요한 부분만 응답 받아서 렌더링함.

✅장점

1. 초기 로딩 이후에 페이지 일부를 변경할 때 서버에 해당 데이터만 요청하면 되기 때문에 이후 구동 속도는 빠르다
2. 서버가 빈 뼈대만 있는 HTML을 넘겨주는 역할만 수행하면 됨 ==> 서버측에 부하가 적음
3. 클라이언트 측에서 연산, 라우팅 등을 모두 직접 처리하기 때문에 반응 속도가 빠르고 UX도 우수함

❌단점

1. 사용자가 첫 화면을 보기까지 시간이 오래 걸릴 수 있다.(초기 로딩 속도 느림)
2. 썩 좋지 않은 SEO : html의 body는 대부분 텅텅 비어져있음. 웹크롤러는 html을 읽어서 검색 가능한 색인(페이지,목록)을 만들어냄. 근데 웹크롤러봇 입장에서 본 html은 텅텅 비어있음. 검색엔진이 색인할만한 컨텐츠가 존재하지 않음.
3. 검색엔진에 불리하다는 치명적인 단점

2. SSR(Server Side Rendering)

: 서버로부터 완전하게 만들어진 HTML 파일을 받아와서 페이지 전체를 렌더링

✅장점

1. CSR을 사용했을 때보다 첫 번째 페이지로딩이 빨라짐(서버에서 필요한 데이터를 모두 가져와서 html 파일을 만들기 때문에)
2. 모든 컨텐츠가 html에 담겨져 있기 때문에 조금 더 효율적인 SEO(Search Engine Optimization)를 할 수 있다.

❌단점

1. 깜빡임 이슈 존재 : 사용자가 클릭-> 전체적인 웹사이트를 다시 서버에서 받아옴==> 썩 좋지 않은 UX
2. 서버 과부하 : 특히 사용자가 많은 제품일수록 사용자가 클릭을 할 때마다 서버에서 요청해서 서버에서 필요한 데이터를 가지고 html을 만들어야하므로
3. TTV와 TTI 간극이 발생(가장 치명적인 단점) : 동적으로 데이터를 처리하는 js를 다운받는동안 사용자가 여기저기 클릭했는데도 아무런 반응이 없는 경우 발생..

• 서버/클라이언트 모델에 따라 데이터를 주고 받기 위한 프로토콜.
• 80번 포트를 사용한다.
• 프로토콜은 약속, 규약이라는 의미

But ❗❗❗

HTTP는 암호화되지 않은 데이터를 전송하는 프로토콜이어서 HTTP로 주민번호나 비밀번호를 주고 받으면 제 3자가 정보를 조회할 수 있었음. 그래서 이 문제를 해결하기 위해서 HTTPS가 등장함

📌HTTP + Secure = HTTPS

• HTTP에 데이터 암호화가 추가된 프로토콜. 보안을 위해 나타남(암호화 O)
• 443번 포트를 사용한다.
• 네트워크 상에서 중간에 제 3자가 정보를 볼 수 없다.

🔒주소창에 자물쇠 모양이 있으면 HTTPS가 적용된 사이트이다.

✅HTTPS 동작원리 그림으로 알아보기(made by 와타시)

*내가 서버로 전달한 정보는 매우 안전하게 지켜짐

⭐HTTPS에서는 회사 서버에서 2개의 암호키를 가지고 있다는 것이 핵심이다.

• 개인key로 암호화 된 정보=> 공개key로 암호를 품
• 공개key로 암호화 된 정보=> 개인key로 암호를 품

✔️ 위처럼 하지 않으면 공개key를 가진 누군가가 내 정보를 해독할 수 있게돼서 암호화가 의미가 없어짐! 공개key는 말그대로 공개된 key. 누구나 가질 수 있음.

1. CRA 설치

npx create-react-app (폴더명)

<br>

## 2. Router 설치

> ```
npm install react-router-dom --save

3. Sass 설치 (선택)

npm install sass --save

<br>

## 4. Styled-component + reset 설치 (선택)

> ```
npm install --save styled-components styled-reset

5. polyfill 설치 (Cross-browsing issue)

npm install react-app-polyfill

<br>

## 6. Eslint + Prettier 한번에 깔기

> ```
npm install -D prettier eslint-config-prettier eslint-plugin-prettier

7. Mac용 .eslinttrc 작성

{
    "extends": ["react-app", "plugin:prettier/recommended"],
    "rules": {
      "no-var": "warn", // var 금지
      "no-multiple-empty-lines": "warn", // 여러 줄 공백 금지
      "no-console": ["warn", { "allow": ["warn", "error"] }], // console.log() 금지
      "eqeqeq": "warn", // 일치 연산자 사용 필수
      "dot-notation": "warn", // 가능하다면 dot notation 사용
      "no-unused-vars": "warn", // 사용하지 않는 변수 금지
      "react/destructuring-assignment": "warn", // state, prop 등에 구조분해 할당 적용
      "react/jsx-pascal-case": "warn", // 컴포넌트 이름은 PascalCase로
      "react/no-direct-mutation-state": "warn", // state 직접 수정 금지
      "react/jsx-no-useless-fragment": "warn", // 불필요한 fragment 금지
      "react/no-unused-state": "warn", // 사용되지 않는 state
      "react/jsx-key": "warn", // 반복문으로 생성하는 요소에 key 강제
      "react/self-closing-comp": "warn", // 셀프 클로징 태그 가능하면 적용
      "react/jsx-curly-brace-presence": "warn", // jsx 내 불필요한 중괄호 금지
      "prettier/prettier": [
        "error",
        {
          "endOfLine": "auto"
        }
      ]
    }
  }

<br>

## 8. Window용 .eslintrc 작성

> ```
{
  "extends": ["react-app", "plugin:prettier/recommended"],
  "rules": {
    "no-var": "warn", // var 금지
    "no-multiple-empty-lines": "warn", // 여러 줄 공백 금지
    "no-console": ["warn", { "allow": ["warn", "error"] }], // console.log() 금지
    "eqeqeq": "warn", // 일치 연산자 사용 필수
    "dot-notation": "warn", // 가능하다면 dot notation 사용
    "no-unused-vars": "warn", // 사용하지 않는 변수 금지
    "react/destructuring-assignment": "warn", // state, prop 등에 구조분해 할당 적용
    "react/jsx-pascal-case": "warn", // 컴포넌트 이름은 PascalCase로
    "react/no-direct-mutation-state": "warn", // state 직접 수정 금지
    "react/jsx-no-useless-fragment": "warn", // 불필요한 fragment 금지
    "react/no-unused-state": "warn", // 사용되지 않는 state
    "react/jsx-key": "warn", // 반복문으로 생성하는 요소에 key 강제
    "react/self-closing-comp": "warn", // 셀프 클로징 태그 가능하면 적용
    "react/jsx-curly-brace-presence": "warn", // jsx 내 불필요한 중괄호 금지
    "prettier/prettier": [
      "error",
      {
        "endOfLine": "auto"
      }
    ]
  }
}

9. .prettierrc 작성

{
  "tabWidth": 2,
  "endOfLine": "lf",
  "arrowParens": "avoid",
  "singleQuote": true
}

<br>

## 10. .gitignore에 추가

> ```
.eslintcache

11. index.js

import 'react-app-polyfill/stable';
import React from 'react';
import ReactDOM from 'react-dom';
import GlobalStyle from './Styles/globalStyle';
import theme from './Styles/theme';
import { ThemeProvider } from 'styled-components';
import Routes from './Routes';

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

<br>

## 12. Routes.js

> ```
import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import 컴포넌트명 from './Page/컴포넌트명';
>
function Routes() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={() => <컴포넌트명 />} />
      </Switch>
    </Router>
  );
}
>
export default Routes;

13. Styles 폴더 > globalStyle.js

import { createGlobalStyle } from 'styled-components';
import reset from 'styled-reset';

const GlobalStyle = createGlobalStyle` ${reset} *{ position: relative; margin: 0; padding: 0; box-sizing: border-box; position: relative; }

body{ font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Nanum Gothic', 'Malgun Gothic', sans-serif; box-sizing: border-box; position: relative; }

button:hover{ cursor: pointer; } `;

export default GlobalStyle;

<br>

## 14. Styles 폴더 > theme.js (edit)

> ```
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;",
};
>
export default theme;

15. git repository 연결

git add . 
git commit -m "(커밋 메시지)"

// Push an existing repository from the command line git remote add origin (깃헙주소) git remote -v git push origin main

<br><br><br>
***

const callAPI = async() =>{
    let url = new URL(`url주소`)
    let header = new Headers({헤더내용}) // 이건 필요한 경우만
    let response = await fetch(url,{headers:header})
    let data = await response.json()
}

• 하나의 웹 사이트에서 PC, 스마트폰, 태블릿PC 등 접속하는 디스플레이 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법을 말한다. 따라서 유지보수가 효율적이다. 사용자 입장에서도 기기에 구애받지 않고 항상 최적의 화면을 경험할 수 있다는 측면에서 반응형 웹의 장점이 고스란히 나타난다.

• 반면 이러한 특징때문에 발생하는 단점이 있는데, 모바일 사이트에 비해서 무겁다는 점이다. 이는 사이트 속도와 직결되는 문제로, 사용자 입장에서는 불편하게 느낄 수도 있다. 반응형 웹 디자인은 모바일 사이트보다 읽어들이는 소스가 많아서 불필요하게 많은 데이터를 소비할 수도 있고, 데스크톱 사이트와 모바일 사이트의 용도가 다른 사이트의 경우 이러한 반응형 웹 디자인은 걸림돌이 될수 있다. 또한 IE8 이하에서 깨진다는 단점이 있다.(요즘은 IE8이하 쓰는 사람 거의 없음)

✅Doctype?

• 문서 형식 선언(Document Type Declaration) 쉽게 말하자면 내가 작성하려는 HTML 문서가 어떤 문서 형식을 갖고 있는지 선언해주는 것을 말한다.

• 웹 브라우저에서 문서 형식 선언이 없으면 쿼크모드로 렌더링을 해서 각 브라우저마다 다른 형태의 결과물을 보여주게 되는데 이것을 방지하기 위해서 문서 형식 선언을 하고 그로인해 HTML 문서를 표준모드로 렌더링 할 수 있게된다.

📌쿼크모드 : 오래된 웹 페이지의 하위 호환성 유지를 위해 사용되며, W3C나 IETF의 표준을 엄격하게 준수하지 않는다. 같은 코드라도 웹 브라우저마다 다르게 해석해서 다른 결과물을 보여준다.

• Doctype 무선언 -> 쿼크모드로 렌더링 -> 브라우저마다 다른 결과물 출력
• Doctype 선언 -> 표준모드로 렌더링 -> 브라우저별로 같은 레이아웃으로 결과물 출력

React-Sass 요약 링크 https://velog.io/@kimhyesu-_-/React-Sass

✍🏻CSS, SASS, SCSS?

1. CSS: Cascading Style Sheets

• 종속형 시트/HTML을 꾸며줌/.css
  

2. SASS: Syntactically Awesome Style Sheets

• 문법적으로 어썸한 스타일시트/.sass
• 기존의 CSS의 유지보수의 불편함을 해결
• 코드 중복을 줄일 수 있다.
• 유효범위를 들여쓰기로 구분함
• @import, @include, @mixin 등 다양한 함수 및 변수를 제공함
  

3. SCSS: Sassy CSS

• 문법적으로 짱 멋진(Sassy) CSS/.scss
• CSS보다 간단한 표기법. 유지보수 편의성 향상
• CSS와 비슷함. {}중괄호와 ;세미콜론을 그대로 사용함
• 유효범위를 중괄호로 구분함
• 중첩(nesting)

✔️SASS와 SCSS 문법

/* SASS */
.main
  .side
    display:block
    text-align:center
    p
      color:#333
    a
      display:inline-block
      font-weight:bold

/* SCSS */ .main { .side { display: block; text-align:center; p{color:#333} a{display: inline-block;font-weight: bold;} } }

<br><br>

## 🗨️결론
1. SCSS와 SASS는 CSS를 편리하게 이용할 수 있도록 도와주는 역할이며 추가 기능이 있는정도로 생각하면 좋을듯. SCSS와 SASS는 기능적으로는 유의미한 차이가 없음. 문법적인 방식에 차이가 있음.
2. SASS보다 SCSS가 뒤에 나왔고 문법 차이가 있지만 **SCSS가 더 넓은 범용성과 가독성이 좋고 CSS의 호환성등의 장점으로 SCSS를 사용하기를 권장하고 있다.**

<br><br><br>

***

## ✍🏻styled-components란?

* **동일한 컴포넌트에서 컴포넌트 이름을 쓰듯 스타일을 지정**하는 것을 styled-components라고 부른다. css 파일을 밖에 두지않고, 컴포넌트 내부에 넣기 때문에 **css가 전역으로 중첩되지 않도록 만들어주는 장점**이 있다. 하지만** 빠른 페이지로드에 불리하다는 단점이 있다.**

<br>

### ✔️환경설정

> ```
npm install styled-components

📌wecode yakurt 프로젝트 캡쳐(스타일컴포넌트 사용)

✅Styled-components와 SCSS의 차이점

1. SCSS

• css in css 문법으로 .js파일과 분리(이미 html 문서에 읽혀져 있는 상태라 처음엔 스타일 정보를 가져오는 양이 많더라도 추가적인 렌더링은 상대적으로 스타일컴포넌트보다 적음)
• 다른 컴포넌트의 상태값이 변하더라도 반응하기 쉽지 않음
• 브라우저에 보이지 않는 컴포넌트까지 읽기 때문에 불필요한 컴파일과정이 추가됨

2. Styled-components

• css in js 방식으로 컴포넌트가 렌더링 될 때만 해당 스타일 정보를 읽음
• 동적인 이벤트가 많은 사이트=> 컴포넌트가 자주 렌더링 될 때 그만큼 스타일 정보도 다시 읽어와야 됨