Today I Learned - 17

졍이🥨·2022년 12월 12일
TILToday I learned회고
0

개발일지

목록 보기
29/38

2022-12-12 (월)

만들어진 팀깃에 내가 작성한 코드를 올리려고 git add .를 했을 때

$ git add .
warning: in the working copy of 'package.json', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/App.css', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/App.js', LF will be replaced by CRLF the next time Git touches it
위 내용의 오류가 뜸

👇오류 요약 
warning: in the working copy of '(여러가지)', LF will be replaced by CRLF the next time Git touches it

위 warning이 떴음.

해결방법은 ? 👇👇

🌟LF will be replaced by CRLF the next time Git touches it 오류 발생🌟

  1. '(여러가지)'에 해당하는 파일을 열어 Ctrl+S 로 저장 후 새로고침해본다.

  2. 밑의 방법을 실행해본다.

LF(Line-Feed)
Mac, Linux (Unix 계열) 줄바꿈 문자열 = \n
ASCII 코드 = 10
커서 위치는 그대로 두고 종이의 한라인 위로 올리는 동작
현재 위치에서 바로 아래로 이동
종이를 한칸올리기

CR(Carriage-Return)
Mac 초기 모델 줄바꿈 문자열 = \r
ASCII 코드 = 13
커서 위치를 맨앞으로 옮기는 동작
커서 위치를 앞으로 이동

CRLF (Carriage-Return+Line-Feed)
Windows, DOS 줄바꿈 문자열 = \r\n
CR(\r) + LR(\n) 두 동작을 합쳐서 (\r\n)
커서를 다음라인 맨앞으로 옮겨주는 동작

이렇게 플랫폼(OS)마다 줄바꿈을 바라보는 문자열이 다르기에
형상관리를 해주는 Git이 바라볼 땐 둘 중 어느 쪽을 선택할지 몰라 경고 메세지를 띄워준다

git config --global core.autocrlf true

커맨드에 명령어를 입력하면 CRLF로 자동으로 변경되게 설정이 가능하다

redux-toolkit 설치

툴킷 설치 코드

yarn add react-redux @reduxjs/toolkit

json-server 연결

yarn add json-server

yarn json-server --watch db.json --port 3001
//이 db.json을 db로 삼아서 3001번 포트에서 서버를 시작하겠다.

AXIOS(악시오스) ?
:브라우저와 node.js를 위한 Promise 기반 HTTP 클라이언트 라이브러리

CRUD ?
CRUD는 대부분의 컴퓨터 소프트웨어가 가지는 기본적인 데이터 처리기능인 Create(생성), Read(읽기), Update(갱신), Delete(삭제)를 묶어서 일컫는 말.
사용자 인터페이스가 갖추어야 할 기능(정보의 참조/검색/갱신)을 가르키는 용어로서도 사용됨

axios의 method 4가지

$ yarn add axios
  • GET(read) : 조회할 때, 값을 가져올 때
  • POST(create) : server에 data를 추가할 때, 클라이언트의 data를 body형태로 서버형태로 보낼 때
  • DELETE(delete) : data를 삭제할 때
  • PATCH(update) : 어떤 데이터를 수정하고자 서버에 요청을 보낼 때

POST&PUT과 PATCH의 차이점

POST(create)는 기존에 없던 데이터를 추가하는 개념
PATCH(update)는 이미 존재하는 데이터를 수정할 때 사용되는 개념

  • 비슷한 PUT 메소드는 업데이트를 할 때 resource의 모든 것을 업데이트,
    PATCH의 경우 요청하는 부분만 업데이트를 진행

path variable

정해져있는 id같은 것들을 사용해서 넘겨주는 경우에 path variable을 사용해서 API명세서를 작성
ex)
GET /posts
GET /posts/1
POST /posts
PUT /posts/1
PATCH /posts/1
DELETE /posts/1

query

검색기능 또는 특정한 값을 찾을 때에는 보통 쿼리를 통해서 사용하게 됨
만약 query말고 path variable로 보내게되면 뒤('/1')에 title을 쓴다면 보내는 그 값이 title인지 작성자인지 key값이 없게 검색하게 되어 어떤 것에 대한 검색인지 잘 모르게 됨.
ex)
GET /posts?title=json-server&author=typicode
GET /posts?id=1&id=2
GET /comments?author.name=typicode

비동기에 대한 개념

자바스크립트에서는 비동기 처리를 다룰 수 있는 방법에는 여러가지가 있다. 주로 callback, Promise, async/await 를 활용한다.
그 중에서도 요즘 특히 많이 사용되는 Promise, async/await의 특징 및 간단한 사용 예시와 둘의 차이점을 정리해보고자 한다.

*Promise

Promise는 자바스크립트에서 비동기 처리에 사용되는 객체이다.
내용은 실행 되었지만 결과를 아직 반환하지 않은 객체라고 이해해도 좋다.

Promise 에는 3가지 상태가 있는데

  • Pending (대기)
  • Fulfilled (이행)
  • Rejected (실패)

비동기 처리가 완료 되지 않았다면 Pending, 완료 되었다면 Fulfilled, 실패하거나 오류가 발생하였다면 Rejected 상태를 갖는다.

Promise 사용 예시

const condition = true;
const promise = new Promise((resolve, reject) => {
  if (condition) {
    resolve('resolved');
  } else {
    reject('rejected');
  }
});

promise
  .then((res) => {
    console.log(res);
  })
  .catch((error) => {
    console.error(error);
  });

condition 값의 따라 promise의 반환 값이 결정 되고 있다.

값이 참이면 resolve 를 호출하고, 아닐시에는 reject 를 호출한다.
resolve 한 반환 값에 대해서는 then() 을 통해 결과 값을 반환 받을 수 있고 reject 의 반환 값에 대해서는 catch() 를 통해 반환 받는다.

then() 과 catch() 문의 체이닝을 통해 비동기 로직의 성공 여부에 따른 분기 처리가 가능하다.

*async / await

가장 최근의 나온 비동기 처리 문법으로 기존의 callback 이나 Promise 의 단점을 해소하고자 만들어졌다.

callback 이나 Promise 의 경우에 단점은 꼬리에 꼬리를 무는 코드가 나올 수도 있다는 부분이다. 흔히들 콜백 지옥, then() 지옥이라고 부른다.

await 를 통해 Promise 반환 값을 받아 올 수 있다.

const variable = await promise;
// promise의 반환 값을 받아 variable
하지만 async/await 를 사용하기 위해서는 선행되어야 하는 조건이 있는데,
🌟await 는 async 함수 안에서만 동작한다.

async / await 사용예시

(async () => {
  const condition = true;
  const promise = new Promise((resolve, reject) => {
    if (condition) {
      resolve('resolved');
    } else {
      reject('rejected');
    }
  });

  try {
    const result = await promise;
    console.log(result);
  } catch (err) {
    console.error(err);
  }
})();

위의 Promise 사용 코드를 async/await 를 사용하여 코드를 변경하였다.
익명 함수 패턴을 활용하였다. async 함수 내의 await 를 통해 Promise 의 반환 값을 result 변수에 담아 콘솔에 출력하는 코드이다.

그리고 주의할 점은 async/await 은 Promise 와는 다르게 에러를 핸들링 할 수 있는 기능이 없다. 따라서 try-catch() 문을 활용하여 에러를 핸들링 하여 주어야 한다.

차이점

  • 에러 핸들링
    - Promise 를 활용할 시에는 .catch() 문을 통해 에러 핸들링이 가능하지만, async/await 은 에러 핸들링 할 수 있는 기능이 없어 try-catch() 문을 활용해야 한다
  • 코드 가독성
    - Promise의 .then() 지옥의 가능성
    - 코드가 길어지면 길어질수록, async/await 를 활용한 코드가 가독성이 좋다.
    - async/await 은 비동기 코드가 동기 코드처럼 읽히게 해준다. 코드 흐름을 이해 하기 쉽다.

redux Middleware


이미지 출처 : 벨로퍼트 모던 리액트 깃북

🌟redux의 흐름

리덕스에서 dispatch를 하면 action 이 리듀서로 전달이 되고, 리듀서는 새로운 state를 반환한다.
그리고 🌟Middleware를 사용하면 이 과정 사이에 우리가 하고 싶은 작업들을 넣어서 할 수 있다.

만약 counter 프로그램에서 더하기 버튼을 클릭했을 때 바로 +1를 더하지 않고 3초를 기다렸다가, +1이 되도록 구현하려면 미들웨어를 사용하지 않고서는 구현할 수 없습니다. 왜냐하면 dispatch가 되자마자 바로 action이 리듀서로 달려가서 새로운 state를 반환해버리기 때문이죠. 즉 여기서 “3초를 기다리는 작업(=비동기처리)" 이 작업을 미들웨어가 해주는 것 입니다. (특정시간을 기다리는 작업은 서버와의 통신에서 비동기 처리를 할 때 사용됨)

보통 우리가 리덕스 미들웨어를 사용하는 이유는 서버와의 통신을 위해서 사용하는 것이 대부분이고, 또한 그 중에서도 많이 사용되고 있는 리덕스 미들웨어는 Redux-thunk 라는 것이 있습니다.

Redux-thunk

thunk ?
thunk를 사용하면 우리가 dispatch를 할때 객체가 아닌 함수를 dispatch 할 수 있게 해준다.
즉, 🌟🌟🌟dispatch(객체) 가 아니라 dispatch(함수)를 할 수 있게 된다!

그래서 중간에 우리가 하고자 하는 작업을 함수를 통해 넣을 수 있고, 그것이 중간에 실행이 되는 것. 그래서 아래 흐름과 같이 실행이 됨. 그리고 이 함수를 thunk 함수라고 부릅니다.

dispatch(함수) → 함수실행 → 함수안에서 dispatch(객체)

redux-toolkit에서 thunk함수를 생성할 때는
createAsyncThunk 함수를 이용한다.

export const __addNumber = createAsyncThunk(
  //createAsyncThunk은 toolkit api

  "addNumber", // 첫번째 인자 : action value

  (payload, thunkAPI) => { // 두번째 인자 : 콜백함수
    setTimeout(() => {
      thunkAPI.dispatch(addNumber(payload));
    }, 3000); //setTimeout 3000은 3초를 기다리라는 말
  }
);// 두번째 함수로 들어가는 함수에서 2개의 파리미터를 꺼내서 사용할 수 있는데
//첫번째 인자는 component에서 보내준 payload, 두번째 인자는 thunk에서 제공하는 여러가지 기능이다.

참고자료💟
Git warning.CRLF 에러
Axios Config 공식문서
json-server 공식문서
promise와 async/await 차이점

profile
졍이🥨
Front-End :)
이전 포스트

Weekly I Learned - 04

다음 포스트

Today I Learned - 18

0개의 댓글