import { ImageBackground } from "react-native"

<ImageBackground resizeMode="cover|contain|repeat|...">

- 웹 css의 object랑 같은 개념!
- 이미지를 화면크기에 맞게 꽉차게 보여줄지, 반복해서 보여줄지 등 설정하는 것!

<br>

> ```
<ImageBackground imageStyle={}>

• ImageBackground컴포넌트는 style={}도 적용할 수 있고, imageStyle={}도 적용할 수 있다.
• 차이는 style={}은 <View>와 같이 한 공간에 전체적으로 스타일을 적용한 것 이라면, imageStyle={}은 오직 이미지에만 스타일을 적용하는 것이다.

📓 예시 📓

imageStyle={} 적용 전

<ImageBackground
    source={require("./assets/images/image.png")}
    resizeMode="cover"
    style={styles.rootScreen} // rootScreen은 flex:1만 들어가 있는 상태
>

imageStyle={} 적용 후

<ImageBackground
    source={require("./assets/images/image.png")}
    resizeMode="cover"
    style={styles.rootScreen}
    imageStyle={styles.backgroundImage} // opacity: 0.15
>

2. SafeAreaView

import {SafeAreaView} from 'react-native'

애플은 맨 위에 노치에 가려 입력한 데이터들이 안 보일 수도 있다. 이 컴포넌트로 감싼 태그들이 노치에 가리지 않도록 자동적으로 자리를 설정해주는 컴포넌트이다.

<SafeAreaView> 적용 전

<SafeAreaView> 적용 후

<SafeAreaView style={styles.rootScreen}> // rootScreen => flex:1 
    {children}
</SafeAreaView>

• 해당 컴포넌트를 <SafeAreaView>로 감싸주기만 하면 끄읏-! 🤓
• 굳이 padding을 쓰지 않고도 하나의 컴포넌트로 해결이 가능해서 깔끔하고 좋다.
• App컴포넌트 전체style에 적용하면 한번만 넣어주고 끄읏!!

<ScrollView>와 <FlatList>의 차이점

둘다 'react-native'에서 기본적으로 제공되는 기능들이다.

import {ScrollView , FlatList} from 'react-native'

데이터가 화면 밖을 벗어났을 때 스크롤 기능이 작동되는 기능들이지만 차이점이 있다.

<ScrollView>는 모든 하위 데이터를 한번에 렌더링 한다.

즉 list가 10개 정도면 그나마 괜찮은데 많약 100개 이상이 넘어간다고 하면 한번에 100개 이상의 데이터를 렌더링하기 때문에 불필요하기도, 속도도 저하되기도 한다. 출력해야하는 데이터가 고정적이고 데이터양이 많지 않을 때 사용이 권장되는 컴포넌트이다.

<FlatList>는 화면에 보여지는 부분만 렌더링한다.

데이터 양을 알 수 없고 데이터 길이가 고정되지 않은 상황에 사용하도록 권장하는 컴포넌트이다. 덕분에 불필요한 렌더링이 실행되지 않아 더욱 효율적이다.

<FlatList> 사용예제

<View style={styles.goalsContainer}>
    <FlatList
        data={courseGoals} 
        renderItem={(itemData) => {
            return (<GoalItem text={itemData.item.text} id={itemData.item.id}]/>)}} 
          // 모든 항목에서 key를 가져오려고 호출하는 함수
        keyExtractor={(item, index) => {
            return item.id}}
     />
</View>

// 여기 item은 FlatList가 내부적으로 생성한 객체이다!!
// 데이터 배열 내 개별 데이터 항목으로 감싸 준 객체

• react-native 공식 문서에 적힌 내용!! https://reactnative.dev/docs/scrollview

문제설명 사분면은 한 평면을 x축과 y축을 기준으로 나눈 네 부분입니다. 사분면은 아래와 같이 1부터 4까지 번호를매깁니다.

• x 좌표와 y 좌표가 모두 양수이면 제1사분면에 속합니다.
• x 좌표가 음수, y 좌표가 양수이면 제2사분면에 속합니다.
• x 좌표와 y 좌표가 모두 음수이면 제3사분면에 속합니다.
• x 좌표가 양수, y 좌표가 음수이면 제4사분면에 속합니다.

x 좌표 (x, y)를 차례대로 담은 정수 배열 dot이 매개변수로 주어집니다. 좌표 dot이 사분면 중 어디에 속하는지 1, 2, 3, 4 중 하나를 return 하도록 solution 함수를 완성해주세요.

제한사항

• dot의 길이 = 2
• dot[0]은 x좌표를, dot[1]은 y좌표를 나타냅니다
• 500 ≤ dot의 원소 ≤ 500
• dot의 원소는 0이 아닙니다.

입출력 예

입출력 예 설명

입출력 예 #1

• dot이 [2, 4]로 x 좌표와 y 좌표 모두 양수이므로 제 1 사분면에 속합니다. 따라서 1을 return 합니다.

입출력 예 #2

• dot이 [-7, 9]로 x 좌표가 음수, y 좌표가 양수이므로 제 2 사분면에 속합니다. 따라서 2를 return 합니다.

📓 문제 해석하기 📓

• 각자 위치가 다르고 값이 다르다.
• 다름을 이용해서 조건문을 사용해 결과값을 리턴하도록 하자!

// 풀이

function solution(dot){
  let num = 0;

    dot[0] > 0 && dot[1] < 0 ? num = 4 
        : dot[0] < 0 && dot[1] < 0 ? num = 3 
        : dot[0] < 0 && dot[1] > 0 ? num = 2 
        : dot[0] > 0 && dot[1] > 0 ? num = 1
        : num = 0

  return num;

}

💡 여기서 포인트 💡

• if문은 되도록 사용하지 않고 삼항연산자를 이용하려고 했다.
• 동일하게 삼항연산자를 한 줄로 해결할 수 있는 방법을 발견했다.

// 풀이

function solution(dot){
    return dot[0] > 0 ? dot[1] > 0 ? 1 : 4 : dot[1] > 0 ? 2 : 3;
}

화면에 1~10까지 적은 후 11을 입력했지만 11을 볼 수 없었다. 왜냐하면 스크롤 기능이 들어가 있지 않기 때문이다. react-native에서는 scroll기능을 추가해줘야 한다.

💡React-Native에서 제공하는 전용 컴포넌트가 있다!

💻 ScrollView 💻

<View>를 비롯한 컨테이너 요소에 스크롤이 가능한 속성을 제공한다.

import { ScrollView } from 'react-native';


<ScrollView style={styles.goalsContainer}>
      <View style={styles.Wrapper}>
          {arr.map((goal, index) => 
              <View style={styles.Item} key={index}>
                <Text style={styles.Text}>{goal}</Text>
              </View>)}
      </View>
</ScrollView>

<ScrollView>를 적어준 후 앱을 확인해보면,,

• 잡아놓은 css가 망가져있다..??
• 근데 스크롤은 된다...
• 그저 Scroll감싼 것 뿐인데 왜 이렇게 되는 걸까?

이러한 이유는 스크롤이 가능한 영역은 부모 요소가 결정하기 때문이다.

☝🏻 즉..!!

<View>로 감싼 후 <View> 높이를 제한하고 <View>의 style을 적용하면 된다!

import { ScrollView } from 'react-native';


<View style={styles.goalsContainer}>    // <- 이 부분을 추가! <View>로 <ScrollView>를 감싸줌!!
  <ScrollView>
        <View style={styles.Wrapper}>
            {arr.map((goal, index) => 
                <View style={styles.Item} key={index}>
                  <Text style={styles.Text}>{goal}</Text>
                </View>)}
        </View>
  </ScrollView>
</View>

💻 <View>로 감싸준 후 모습!

style도 처음 설정한대로 잘 나오고, scroll로 잘 된다.

▶️ docs에 보면 ScrollView관련 기능들이 있다.

아래로 내려보면 사용 방법들이 있는데 그중 alwaysBounceVertical은 스크롤 바운스를 boolean값에 따라 실행이 될 수도 안 되게 할 수 도 있다.

사용 예제

<ScrollView alwaysBounceVertical={false}>                      // 넘나 간단,,

적용된 모습 전,후

적용 전

적용 후

• 스크롤을 내려도 bounce기능이 사라짐!

중앙값은 어떤 주어진 값들을 크기의 순서대로 정렬했을 때 가장 중앙에 위치하는 값을 의미합니다. 예를 들어 [1, 2, 7, 10, 11]의 중앙값은 7입니다. 정수 배열 array가 매개변수로 주어질 때, 중앙값을 return 하도록 solution 함수를 완성해보세요.

제한사항

• array의 길이는 홀수입니다.
• 0 < array의 길이 < 100
• 1,000 < array의 원소 < 1,000

입출력 예

입출력 예 설명

입출력 예 #1

• 본문과 동일합니다.

입출력 예 #2

• 9, -1, 0을 오름차순 정렬하면 -1, 0, 9이고 가장 중앙에 위치하는 값은 0입니다.

📓 문제 해석하기

• 배열을 우선 오름차순으로 정렬해야한다.
• 배열의 중간값을 구해야한다.

// 풀이

    function solution(array) {

        return array.sort((a,b) => a - b)[Math.floor(array.length / 2)]
}

💡 여기서 포인트 💡

오름차순 먼저, 그 다음 배열의 중간값 구하기!

• 먼저 오름차순으로 만들어야 값을 바로 한줄에 적을 수 있다!

    array.sort((a-b) => a - b)
  
  

// 내림차순은 b - a로 바꿔주면 된다. array.sort((a-b) => b - a)

- 배열은 **홀수**라고 조건에 나와있으니 배열을 2로 나누면 나머지를 제외시키고 몫으로 중간값을 구할 수 있다.

--- 

<br><br>

## 문제2 | 배열 원소의 길이
문자열 배열 `strlist`가 매개변수로 주어집니다. `strlist` 각 원소의 길이를 담은 배열을 retrun하도록 solution 함수를 완성해주세요.

<br>

**제한사항**
- 1 ≤ `strlist` 원소의 길이 ≤ 100
- `strlist`는 알파벳 소문자, 대문자, 특수문자로 구성되어 있습니다.

<br>

**입출력 예**

|strlist|result|
|:----|:----|
|["We", "are", "the", "world!"]|[2, 3, 3, 6]|
|["I", "Love", "Programmers."]|[1, 4, 12]|

<br>

**입출력 예 설명**

입출력 예 #1
- ["We", "are", "the", "world!"]의 각 원소의 길이인 [2, 3, 3, 6]을 return합니다.

입출력 예 #2
- ["I", "Love", "Programmers."]의 각 원소의 길이인 [1, 4, 12]을 return합니다.
---

<br>

### 📓 문제 해석하기
- 배열 안에 있는 요소 하나하나를 건들여야 한다.
- 처음에는 for문으로 해결할 방법을 생각했음.

``` javascript
// 풀이

function solution(strlist) {

     let arr = [];

     for(let i=0; i<strlist.length; i++) {
         arr.push(strlist[i].length )
     }

     return arr;
}

• 이 방법도 정답으로 나왔지만 좀 더 길이를 줄일 수 있는 방법을 생각했음!
• 많이들 쓰는 map()를 이용하는 것!

// map()으로 풀이

function solution(strlist) {
   return strlist.map(el => el.length)
}

• 10줄에서 3줄로 코드길이가 훨씬 짧아졌다.

💡 여기서 포인트 💡

배열이라면 for문 말고도 map(), filter() ... 를 써보자.

배열 함수를 알고있지만 for문이 익숙해서 계속 for문을 쓰게 되는 것 같다. 문제를 해석하고 map(), filter()... 메서드를 사용할 수 있는지 먼저 생각하는 습관을 기르자..!

문자열 my_str과 n이 매개변수로 주어질 때, my_str을 길이 n씩 잘라서 저장한 배열을 return하도록 solution 함수를 완성해주세요.

제한사항

• 1 ≤ my_str의 길이 ≤ 100
• 1 ≤ n ≤ my_str의 길이
• my_str은 알파벳 소문자, 대문자, 숫자로 이루어져 있습니다.

** 입출력 예**

📓 문제 해석하기

- result는 배열로 나와야 한다. - n씩 자르고 배열에 넣은 후, 문자열에 남아 있으면 안된다. (즉 길이에 영향을 미치면 안된다. 라고 생각) - 반복문이 필요함!

// 풀이
function solution(my_str, n) {

    let arr = [];

    for(let i=0; i < my_str.length; i+=n){
        arr.push(my_str.slice(i,i+n))
    };
        return arr;
};

💡 여기서 포인트 💡

for문의 i로 n의 갯수마다 증가하는 값을 구해야 함.

• for(let i=0; i < my_str.length; i+=n) 이 부분에서 n의 갯수만큼 반복해서 늘어나도록 for문 증감식에 i = i + n 으로 적어줌.

• n = 3 이라면 i값은 0 ▸ 3 ▸ 6 으로 늘어나게 된다.

• slice(stateIndex, endIndex) 함수와 n을 이용하여 n의 갯수만큼 잘라준다!

• 그 다음 arr.push()를 이용하여 배열에 넣어주면 끝!

✚ str.slice(startI, endI)는 endIndex값은 안 들어간다는 것 잊지말기!

let str = 'abcdef'

str.slice(1,4)
// 예상 output: 'bcde'

// 하지만 endIndex의 값은 안 들어가기 때문에,
// 실제 output: 'bcd'

faker라이브러리

npm i @faker-js/faker

가짜 데이터를 만들어주는 라이브러리이다. 하드코딩으로 하면 시간도, 코드 길이도 길어지기 때문에 간편하게 사용이 가능하다.

💻 적용 💻

• faker라이브러리로 만든 랜덤 이름
• 20명의 이름을 하나하나 적어준 게 아니다!

// 사용 코드

import {faker} from '@faker-js/faker'

export function createRandomUser() {
    return{
        userName: faker.internet.userName(),
          email: faker.internet.email(),
          Images: [{
            src: faker.image.imageUrl()
        }],
          contents: faker.lorem.sentence()
    };
};

// output: {name: "kalepoul", email: "naver@gmail.com", ...}

• faker.범주.함수() 형태로 사용 가능하다

• faker npm에 나와있는 범주들!

언어도 변경 가능하다 🔄

기본값은 영어이고, 한국어도로 변경 가능!

import {faker} from '@faker-js/faker'

// 맨 위에 적어주기
faker.locale = "ko";

🖐 잠 깐 !

https://www.npmjs.com/package/faker

• 이름은 같은데 이 위에 라이브러리로는 설치 놉!!
• 제작자가 6버전부터 라이브러리를 망쳐버렸다고 한다!!

event.Target

*내가 선택한 태그 그 자체!만 선택이 된다. *

• div1 위에 div2가 있고, div2위에 div3있는 상황이다.
• event.target은 부모로부터 이벤트가 위임되어 발생하는 자식의 위치, 즉 내가 클릭한 자식 요소를 반환한다.

event.currentTarget

이벤트 핸들러가 부착된 부모요소가 반환된다.

• 클릭이 일어난 요소부터 상위로 올라가며 이벤트 핸들러가 등록된 요소를 가리킨다.
• 3을 클릭하면 div3의 상위요소로 올라 타고 타고 타고(이벤트 버블링) 올라가서 부모요소(div1)를 가리킨다.

target, currentTarget 또 다른 예시

▶️ <button>확인</button> 을 눌렀을 때!

• current.target은 전체를 감싸고 있는 <div id={1}> ... </div> 반환하고,
• target은 선택한 그 요소!인 <button>을 반환한다.

▶️ <span>이벤트는 무엇?</span> 을 눌렀을 때!

• 마찬가지로 current.target은 맨 위의 부모 요소인 <div id={1}> ... </div> 를 반환하고,
• target은 클릭 당한, 내가 선택한 그 요소 그 잡채!! <span>이벤트는 무엇?</span>을 반환한다.

이벤트 버블링 (Event Bubbling)

div3 한 개만 클릭했을 뿐인데 왜 div1이 클릭되는 걸까? 그 이유는 브라우저가 이벤트를 감지하는 방식때문이다!!!

브라우저는 이벤트가 발생했을 때 그 이벤트를 최상위에 있는 화면 요소까지 이벤트를 전파시킨다.

• 3 => 2 => 1 순서로 div태그에 등록된 이벤트들이 실행된다.
• 마찬가지로 2를 클릭했으면 2 => 1 순으로 이벤트가 동작한다.

하위에서 상위 요소로 이벤트 전파 방식을 이벤트 버블링이라고 한다.

이벤트 캡쳐링 (Event Captuaring)

이벤트 버블링과 반대로 움직인다. 상위에서 하위 요소로 내려간다!

• 클릭한 이벤트 요소에서 최상위에서부터 훑고 내려오는 것이다!!!
• 만약 div1안에 div2, div2 안에 div3 이 있다고 한다면,
• div3을 클릭해도 콘솔창에는 div1 ▶️ div2 ▶️ div3 순으로 반환된다!
• 상위에서 하위로!!

도움 출처 :https://velog.io/@edie_ko/JavaScript-event-target%EA%B3%BC-currentTarget%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90

[상황]

• react-hook-form과 yup으로 작성했다.
• input창에 값이 올바르게 다 들어오면 버튼 배경색을 테마색으로 채워주고 싶었다.
• state와 onChange함수로 했을 때는 값이 들어와 있는지 없는지 알 수 있었는데,
• react-hook-form으로 적었을 때는 값이 들어와 있는지 없는지 확인 방법을 몰랐다.

[해결방법]

다행히도 formState 에 보면 isValid라는 기능이 있다.

hookform으로 지정한 input들 값이 에러없이 다 잘 들어가 있으면 true을 반환하고, 그렇지 않으면 false를 반환한다.

사용 방법으로는

// container파일에서
    <S.SignUpBtn isActive={formState.isValid}>회 원 가 입</S.SignUpBtn>

/* css 파일에서 */
    background-color: ${(props:BackColorProps) => props.isActive ? "rgba(30, 130, 76)" : "white"};

이렇게 하면 잘 작동된다! useState를 사용했을 때보다 코드 길이도 훨씬 줄어들고 state값을 일일이 저장하지 않아 속도도 빠르다.

• board의 댓글list를 DetailPresenter에 넣고 스타일을 이것저것 바꾸려고 하는데
• 터미널에서 undefined 뜨면서 적용이 안 된다.

[해결방법]

(사실 한번에 해결한 게 아니라 이곳저곳에서 하나하나씩 고치다 보니 해결이 됐다.)

• 경로나 파일명 바꿀 때 바로바로 업데이트가 안 되는 것 같았다. UsedItem.tsx 파일을 usedItem.tsx 파일명으로 앞자리만 바꿨는데 계속 오류에는 대문자로 나와있었다. (Used파일은 이제 없는데,,) vscode를 몇 번 껐다켰는데도 오류창에는 이전 파일명이 나와있었다. ▶️ 오타나 파일명을 잘 확인하기.

• Typescript를 사용하니 타입이 하나라도 안 넣거나 틀리면 퉷-! 해버림,,ㅠ 답답한 오류창을 보면 그.나.마 조금 해결이 됨,, ▶️ 빨간 줄을 따라가자..!

🛠 수정 전

🛠 수정 후

• local3000을 열어보니 데이터가 1도 없어졌음..
• 이게 뭐지,, 하다가 건들인 부분을 하나하나 고쳐가며 수정하고 있었는데
• credentials부분에 뒤에 처음에는 's'가 붙는 줄 알고 넣었던 부분이 잘못 되었던 것,,

credentials

credentials는 백엔드와 쿠키를 주고 받을 때 "쿠키에 담겨져 있는 내용은 중요하다."라고 알리는 기능. 이 부분이 있어야 백엔드와 주고 받을 수 있다. 그 의미로 "include"를 넣는다.

's'하나 붙였다고 데이터가 안 뜨는 게 참으로 무습다,, 진짜 토시 하나 제대로 안 썼다고 데이터 안 보여주는 심보보소,,8-8

여러 컴포넌트가 있고, 각 컴포넌트들이 공유할 수 있는 global state가 있다고 가정해보자. 만약 Apollo-client로 global state를 만들게 된다면 Apollo-Cache라는 곳에 state값이 저장된다.

예를들어

1. [2번 컴포넌트]에서 UseQuery를 한 다음
2. 받아온 데이터가 Apollo-Cache에 저장된 후 [2번 컴포넌트]로 들어가게 됩니다.
3. 이후 [3번 컴포넌트]에서 같은 데이터요청을 하게 되면 Apollo-Cache에 먼저가서 찾고자 하는 데이터가 있는지 확인하고, 있으면 백엔드에 요청을 하지 않고 바로 컴포넌트로 보내주게 된다.

이를 Apollo-client의 fetchPolicy라고 합니다.

fetchPolicy에는 여러가지 기능들이 있으며 변경이 가능합니다.

fetchPolicy의 기능

• cache-first : 캐시에 데이터가 있는지 먼저 확인
• network-only : 캐시에 있든 없든 무조건 백엔드에 요청.

자바스크립트는 Error 생성자 함수를 포함해 7가지의 에러 객체를 생성할 수 있는 Error생성자 함수를 제공한다고 한다!

1 @ 1;  // output: SyntaxError: Invalid or unexpected token
foo(); // output: ReferenceError: foo is not defined
null.foo(); // output: TypeError: Cannot read property 'foo' of null
new Array(-1) // output: RangeError: Invalid array length
decodeURIComponent('%') // output: URIError: URI malformed

출처: 모던 자바스크립트 Deep Dive 책

물론 다 그런 건 아니지만 만약 500에러가 뜨면 변수명이나 key값이 동일한지, 올바른 key값을 적었는지 확인하기. 500에러 뜰리가 없는데 떠서 '왜지..'했는데 props로 불러오는 key값을 잘못 적었다ㅎㅎ (엣큥-!)

• //g // : 뒤에 g가 붙으면 문장 안에 있는 모두, g를 빼면 첫 번째 것만 선택된다.
  - . (점) : 한 글자
  
• .+1 : 모든 글자가 선택된다.
  
• [ ] : 괄호 안에 글자를 쓰면 그 글자만 선택된다.
  
• [^ ] : ^가 붙으고 그 뒤에 글자를 제외하고 선택된다.
  
• \s : 공백
  

Saga

export default function* Saga{

  return(

    )
}

특징

thunk는 예를들어 setTimeout()을 직접 하나하나 적어야 하는 부분이 있지만, saga는 이미 이런 이벤트들이 만들어져있다. (편하다는 소리)

generator(*) : 중단점이 있는 함수

• 1. *yield *: 중단점을 지정해주는 것 일반함수로는 중간에 중단하는 것이 불가능하다. 하지만 yield를 중간에 중단시점을 지정한 곳에 넣으면 함수가 중단이 된다.
     

• 2.** 절대 중단하지 않는 함수**

        const gen = function*() {
                while(true){
                    yield '무한';                
                }
           }

• yield를 적으면 무한반복되지 않고 중단이 된다!!*

• yield를 붙이는 이유 중 하나는 테스트하기가 정말 편안하기 때문이다. 왜냐하면 yield를 넣으면 한줄한줄 멈춤으로 한줄한줄 잘 작동하는지 확인을 할 수 있기 때문이다.

• 3. 이벤트 리스너를 만들 수 있다. ex. 버튼을 누를 때 특정 이벤트를 활성하도록!!

    function* watchLogIn() {
        yield take('LOG_IN') // 해석 : 'LOG_IN'이라는 액션을 실행될 때까지 기대리겠다.
    }

그리고

3.    function logInAPI() {
      // [주의] 이 함수는 *(generator)를 붙이지 않는다.

      return axios.post('/api/login')
}

2.    function* logIn() {
    try{
        const result = yield call(logInAPI)        // logInAPI 요청 결과 담기
        yield put({
            type : 'LOG_IN_SUCCESS',
              data : result.data
        })   
    } catch (err) {
        yield put({
            type: 'LOG_IN_FAILURE',
            data: err.response.data
        })
    }
}


1.    function* watchLogIn() {
        yield take('LOG_IN', logIn)
          // 해석 : "'LOG_IN'이라는 액션이 실행되면, logIn 함수를 실행하겠다" 라는 뜻.
    }

saga effects

take, takeEvery

• take effects는 일회성이다. 즉 한번 로그인->로그아웃하고 다시 로그인하려고 하면 안된다. 한번만 로그인 하고 끝이난다. 이를 해결하기 위해서 while!!

• while, take는 동기적으로 동작하지만, takeEvery는 비동기로 동작한다는 차이가 있다.

1. function* watchLogIn() {
          while(true){
            yield takeEvery('LOG_IN_REQUEST', logIn)
    }
 }


2. function* watchLogIn() {
        yield takeEvery('LOG_IN_REQUEST', logIn) 
  }

1번 while문으로 쓴 것은 약간 직관적이지 않는다. 2번은 takeEvery는 길이도 짧아지고 좀더 직관적으로 간결하게 사용할 수 있다.

takeLastest

하지만 takeEvery 를 사용한다면, 만약 클릭을 연속 3번을 눌렀다고 하면 3번 다 요청이 들어간다. 이를 방지하기 위해서 takeLastest를 사용하면 된다. 그렇다면 99번 눌러도 나머지 98번은 무시되고 마지막 99번째 딱 한번만 요청이 들어가게된다.

(사용예제)

     function* watchLogIn() {
        yield takeLastest('LOG_IN_REQUEST', logIn) 
  }

Throttle

여기에도 치명적인 단점이 있다. 응답을 취소하는 거지 요청을 취소하지 않는 것. 즉 서버쪽에서는 요청을 2번 받는 것이다. 프론트 쪽에서는 단 하나의 응답만 받지만 백엔드는 요청 2개를 받는다. 그래서 takeLastest만으로는 안되고, Throttle 를 사용한다.

     function* watchLogIn() {
        yield throttle('LOG_IN_REQUEST', logIn, 2000) 
  }

'2초동안 logIn 요청을 한번만 할 수 있도록 한 것' '2초동안 100번을 연속해서 눌러도 한번만 요청이 들어간다.'

fork와 call의 차이점 fork는 비동기 함수 호출 , call은 동기 함수 호출이다.

같이 스터디하는 분이 물어보셨던 건데 div에 nth-child()를 사용해서 각각 다른 색상을 채워야 했다. (사실 저도 1도 몰라요,,,,)

코드

        <div class="color__container-colors">

                <div class="color__container-color">
                    <div class="color__names">
                        <h3 class="color__name">Tomato</h3>
                        <span class="color__value">#FF6347</span>
                    </div>
                </div>

                <div class="color__container-color">
                    <div class="color__names">
                        <h3 class="color__name">Teal</h3>
                        <span class="color__value">#008080</span>
                    </div>
                </div>


                <div class="color__container-color">
                    <div class="color__names">
                        <h3 class="color__name">Burlywood</h3>
                        <span class="color__value">#DEB887</span>
                    </div>
                </div>


                <div class="color__container-color" id="backColor">
                    <div class="color__names">
                        <h3 class="color__name">Thistle</h3>
                        <span class="color__value">#D7BFD7</span>
                    </div>
                </div>

        </div>

1. 처음에는 다 감싸고 있는 .color__container-colors에

.color__container-colors:first-child{
    backgroundcolor : red;
}


.color__container-colors:nth-child(2){
    backgroundcolor : yellow;
}
.
.
.

하면 될 거라고 생각했다.

하.지.만

...?

예상으로는 color__container-colors 안에 4개의 color__container-color가 각각 순서대로 배경색이 입혀질 줄 알았는데 그것이 아니라 nth-child가 div안으로 타고타고 들어가서 div안의 각 첫 번째, 두 번째 자녀에 다 색기 입혀지는 것이었다.. (워매)
곰곰이 생각해보고, 이리저리 해보다가 제일 큰 div에 할 것이 아니라 배경색을 넣으려는 동일한 class이름의 div에 넣어보았다.

.color__container-color:first-child {
    background-color: red;
}

.color__container-color:nth-child(2) {
    background-color:yellow;
}

.color__container-color:nth-child(3) {
    background-color:green;
}

.color__container-color:nth-child(4) {
    background-color:blue;
}

과..연..

쨔잔-!!!!

예상대로 되었다아하~! 처음에는 눈에 보이는 형태대로 첫 번째, 두 번째로 해서 넣으면 당연히 되겠지? 생각했지만 css와 나와의 생각은 달랐던 것이었다. (어쩌겠어,,, 콤퓨타님한테 맞춰야디,,)

• -colors 안의 순서가 아니라
• 동일한 이름의-color의 적힌 순서 첫 번째(first-child)
• 그 다음 적힌 -color의 적힌 순서 두 번째(:nth-child(2))
• 다음에도 동일하게 적으면 된다.

제일 중요한 것!

선택자 :nth-child()를 쓸 때 class이름이랑 띄어쓰기 X

- 맞게 쓴 부분
.color__container-color:nth-child(2){
    backgroundcolor: tomato
}

- 틀리게 쓴 부분
.color__container-color :nth-child(2){
    backgroundcolor: tomato
}

띄어쓰기를 해버리면 -color의 두 번째 자식이 선택되기 때문이다.

비동기 실행 방식에서 동기 실행 방식으로 변경해주기 위해서 async/await이 필요한 것이다.

둘이 같이 실행하는 이유

둘 다 동기 통신을 위해서 사용한다. 만익 await가 없다면 updateBoard가 비동기 처리를 하는동안 기다려주지 않고 바로 다음 줄로 넘어가기 때문에 DB에 저장되기 전에 "수정이 완료되었습니다." 라고 뜬다.. 따라서 updateBoard를 동기처리를 해서 등록할 때까지 기다리도록 해주는 것이 await의 역할이다.

즉, await를 사용함으로써 비동기처리 함수인 updateBoard를 동기처리 함수로 바꿔주어 제대로 등록이 될 때까지 기다려주는 역할이다.

호이스팅

호이스팅이란 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다.

즉, 호이스팅은 변수의 선언과 초기화를 분리하여 선언만 코드의 최상단으로 끌어올려주는 것이다. 따라서 변수를 정의하는 코드보다 사용하는 코드가 앞서 등장할 수 있다.

catName("철수")

function catName(name) {
    console.log('고양이 이름은' + name + '입니다.')
}

// output : 고양이 이름은 철수 입니다.

오류1

1. input창에 글자를 입력하는 순간

2. [object, Object]로 바뀌었다..!

• 이런 경우 어디선가 문자열이 배열로 바뀌고 있다는 것이다.

너무 단순한 실수,,, setText자리에 onChangeText로 적혀있었다.. 🤦‍♀️ (이런 실수가 처음이라 저 오류를 한번도 본적이 없었다..놀람쓰..)

📝 수정부분

📝 수정화면

1 . 콜백함수란?

'Call' : 부르다, 호출(실행)하다. 'back' : 뒤돌아오다, 되돌다
되돌아 호출해달라 라는 뜻! 어떤 함수X를 호출하면서 '특정 조건일 때, 함수Y를 실행해서 알려달라'
이 요철을 받은 함수X는 해당 조건이 갖춰졌는지 여부를 판단 한 후 함수Y를 직접 호출한다.

이처럼 콜백함수는 다른 코드(함수or메서드)에게 인자로 남겨줌으로써 그 제어권도 함께 위임하는 함수이다. 콜백함수를 위임받은 코드는 자체적인 내부 로직에 의해 이 콜백함수를 적절한 시점에 실행한다.

2 . 제어권

4-2-1 호출시점

    var count = 0;
    var timer = setInterval(function() {
        console.log(count);
        if(++count > 4) clearInterval(timer)
    },300)

var intervalID = scope.setInterval(func, delay[, param1, param2, ...])

setInterval()의 구조
scope : 스코프에는 window객체, worker의 인스턴스가 들어올 수 있다. func은 함수이고, delay는 밀리초(ms) 단위의 숫자. 세 번째부터는 선택적인데 func함수를 실핼 때 매개변수로 전달할 인자이다.
setInterval를 실행하면 반복적으로 실행되는 내용자체를 특정할 수 있는 고유한 ID값으로 반환된다.
timer의 ID를 int형태로 반환함!
다른 예제

    var count = 0;
    var cbFunc = function() {
        console.log(count)
        if(++count > 4) clearInterval(timer)
    }

    var timer = setInterval(cbFunc, 300)

• timer변수에는 setInterval의 ID 값이 담긴다.
• setInterval에 전달한 첫 번째 인자인 cbFunc함수(이 함수가 곧 콜백함수이다)는 0.3초마다 자동으로 실행된다.
• 콜백 함수의 내부에서는 count값을 출력하고, count + 1를 한 다음 값이 4보다 크면 반복 실행을 종료하라고 한다.

4-2-2 인자

예제)

    var newArr = [10,20,30].map(function(currentValue, index) {
        console.log(currentValue, index)
        return currentValue + 5;
    })

    console.log(newArr)

    // output
    // 10 0
    // 20 1
    // 30 2
    // [15,25,35]

map함수의 작동원리를 먼저 알아보자

    Array.prototype.map(callback[, thisArg])
    Callback : function(currentValue, index, array)

• map 메서드는 첫 번째 인자로 callback함수를 받는다.
• 생략이 가능한 두 번째 인자로 콜백 함수 내부에서 this로 인식할 대상을 특정할 수 있다.
  (thisArg를 생략할 경우에는 일반적인 함수와 마찬가지로 전역객체가 바인딩된다.)
• 첫 번째 인자에는 배열 요소 중 현재값, 두 번째 인자에는 현재값의 인덱스, 세 번째 인자에는 map메서드의 대상이 되는 배열 자체가 담긴다.

예제 설명으로 다시 돌아가자면

• 배열 [10,20.30]의 각 요소를 처음부터 하나씩 꺼내어 콜백함수를 실행한다.
• 첫 번째 (인덱스 0)에 대한 콜백함수는 currentValue에 10, index는 0이 담긴 채 실행된다.
• 위 2개의 값을 출력한 다음 15(10 + 5)를 반환한다.

이렇게 세 번째 배열까지 실행된 후 return값 ([15,25,35])이 나오게 된다.

3. 콜백함수는 함수다.

'콜백함수는 함수이다' 당연한 말이지만 의미를 좀더 생각해보자. 콜백함수로 어떤 객체의 메서드를 전달하더라도 그 메서드는 메서드가 아닌 함수로서 호출된다.

예제) 메서드를 콜백함수로 전달한 경우

    var obj = {
        vals : [1,2,3] ,
        logValues : function(v,i) {
            console.log(this, v, i)
        }
    };

obj.logValues(1,2);
    // output : {vals: [1,2,3] , logValues: f} 1 2


[4,5,6].forEach(obj.logValues)
    // forEach의 콜백함수로 전달
    // output : Window { ... } 4 0
    // output : Window { ... } 5 1
    // output : Window { ... } 6 2

• obj객체의 logValues는 메서드로 정의되었다.

• 151번줄은 이 메서드 이름 앞에 점이 있으니 메서드로서 호출한 것이다. 따라서 this는 obj를 가리키고, 인자로 넘어온 1,2가 출력된다.

  
  

• 155번줄은 forEach의 콜백함수로써 전달했다.

• obj를 this로 하는 메서드를 그대로 전달한 것이 아니라, obj.logValues가 가리키는 함수만 전달한 것이다.

• 이 함수는 obj와 직접적인 연관이 없어진다.

• forEach에 의해 콜백이 함수로서 호출되고, 별도로 this를 지정하는 인자를 지정하지 않았음으로 함수 내부에서의 this는 전역객체를 바라보게 된다.

어떤 함수의 인자에 객체의 메서드를 전달하더라도 이는 결국 메서드가 아닌 함수일 뿐입니다. 이 차이를 정확히 이해하는 것이 중요!!!

콜백 함수 내부의 this에 다른 값 바인딩하기

Q. 콜백 함수 내부에서 this가 객체를 바라보게 하고 싶다면 어떤 방법이 있을까?
전통적으로 this를 다릉 변수에 담아 콜백 함수로 활용할 함수에서는 this대신 그 변수를 사용하게 되고, 이를 클로저로 만드는 방식이 많이 쓰였다.

예제1) 콜백 함수 내부의 this에 다른 값을 바인딩하는 방법(1) - 전통적인 방식

    var obj1 = {
        name : 'obj1',
        func : function() {
            var self = this;
            return function() {
                console.log(self.name)
            };
        }
    };

    var callback = obj1.func();
    setTimeout(callback, 1000);

• 198번 줄에서 obj1.func를 호출하면 앞서 선언한 내부함수가 반환되어 callback변수에 담긴다.

• 199번 줄에서 이 callback을 setTimeout함수에 인자로 전달하면 1초(1000ms) 뒤 callback이 실행되면서 'obj1'을 출력한다.

  
  
  

하지만 이 방식은 실제로 this를 사용하지도 않고 번거롭기도 하다. 다음 게시글에서 콜백함수 내부에서 this를 좀더 살펴보자!

Action

주문서 같은 개념이다. 만약 true 값을 false값으로 바꾼다던지, user.name을 '철수'에서 '길동'으로 바꿀 때 변경할 내용을 적는 곳이다.

// 초기 state
const initialState = {
    user : {
        isLoggedIn : false,
        user: null,
        signUpData: {},
        loginData: {},
    }
};

• 로그인을 했을 때 state값을 true 하고, 로그아웃을 했을 때 false로 값이 변경되는 동작을 만들어 보자.
  

• 주문서(action)을 만들어 주면 된다. 이 action또한 함수형으로 만들 수 있다!

export const loginAction = (data) => {
    return{
        type: 'LOG_IN',
          data,
    }
}

여기서 기억해야 할 2가지! 1. type은 action의 이름이다. 2. return문을 왜 {} 로 적는가?

return문을 왜 {} 로 적는가?

{} === {} 의 결과는 false로 나온다. 왜냐하면 같은 모양이더라도 각자 개인의 주소를 가지고 있기 때문이다. 모양이 같다고, 객체 안에 프로퍼티가 둘 다 없다고 해도 다르다!

redux는 github처럼 이전 코드를 다시 가져올 수 있다는 장점이 있다. 이전 코드들을 다시 불러 올 수가 있다. 배포를 하기 전 이전 코드와는 오류가 안나는지 확인해볼 수 있는 기회를 가질 수 있다.

만약

const a = {name : "코난"};
const b = a;

b.name = "미란"

으로 한다면 a.name도 '미란'으로 변할 것이다. 그러면 이전 코드가 어땠는지, 값이 무엇이었는지 알 수 없다. 그렇기 때문에 return문에 {} 넣어 이전 코드를 참조할 수 있도록 해주는 것이다.

const prev = {name : "코난"}
const next = {name : "미란"}

이렇게 해야 기록에 남는다.

그렇기 때문에 return문에 {}로 만드는 것이다.

1. 터미널에서

npm install redux-devtools-extension --save
yarn add redux-devtools-extension --save

(각자 사용하는 패키지로) 설치해주고

2. createStore을 선언하는 파일에

import { composeWithDevTools } from 'redux-devtools-extension';

임폴트를 하고

3. 추가해주면 된다.

const store = createStore(rootReducer,composeWithDevTools());

그럼 처음에는 안 나오는 창이 나오게 된다!!

구글링 해보니 여러 방법들이 나와있지만 이 방법이 제일 간단한 것 같다!

출처 : https://seungyooon.tistory.com/83