현재 패캠에서 프론엔드 웹개발 관련 인강을 듣고 있어서 해당 인강에서 배운 내용을 토대로 복습하는 중입니다.
복습노트 겸 혹시라도 도움이라도 조금 될 수 있을까 하고 블로그에도 같이 글을 작성 중입니다.프로젝트는 추후 프로젝트 카테고리를 생성해서 내용을 정리할 예정입니다.
1. Axios
API 통신을 위해 사용되는 라이브러리이다.
fetch를 사용해서 통신을 해도 되지만 fetch는 response가 json 형식이 아니라 json으로 변경해 줘야 되는 부분이 있는데 fetch가 많이 없을 때는 괜찮지만 fetch가 많아지고 하면 복잡해지고 하기 때문에 axios를 사용한다.
fetch에 관해서는 복습을 하지 않아 기억이 잘 나지 않아 조만간 다시 공부해야 될 것 같다.
fetch('http://example.com/movies.json')
.then((response) => response.json())
.then((data) => console.log(data));위는 fetch에서 사용하는 방식이고
axios('/user/12345');
아래는 axios 방식이다.
두 가지 방식도 공부를 한 뒤 회사에서 프로젝트를 하는 방식에 맞게 사용하면 될 거 같다.
자세한 방식은 이번에 인강에서 작업하게 될 디즈니플러스 앱 만들기에서 사용할 것 같다.
디즈니앱 만들기 프로젝트도 추후에 작성을 진행할 예정이다.
2. Styled Component
Css in JS라고 하는 리액트에서 사용할 수 있는 라이브러리이다.
우리가 평소에 사용하는 css는. css라는 파일을 만들어서 선택자를 디자인하는 방식인데
styled componet는 우리가 js파일 안에 컴포넌트를 하나 만들어서 스타일을 지정하는 방식이다.
장점이라면 props를 받아서 다양한 상황에서 유연하게 변경 가능하다는 것이다.
그리고 class 문법의 상속 같은 개념같이 이미 만들어진 styled를 상속해서 특정 스타일만 추가해 중복되는 css도 많이 줄일 수 또 있다.
그 외에도 다양한 상황에서 적용이 가능한 방식이다. 아직 나는 프린이기에 자세히 알지는 못하겠지만 추후 다양한 프로젝트에 응용해서 사용해 봐야겠다.
위의 내용은 현재 진행 중인 프로젝트의 예시 코드이다.
위의 방식같이 컴포넌트에 스타일을 작업할 수 있으며 props도 전달이 가능해 그에 맞는 상황에 스타일을 변화될 수 있다.
2. 동기? 비동기?
디즈니 프로젝트를 진행 중에 API 데이터 작업을 진행도중 콘솔을 찍었더니 아래와 같이
Promise가 나왔다 그래서 Promise가 무엇이지 찾아보니 남아있는 계류 중인 이라는 뜻이라고 하는데
우리가 데이터 통신 작업 중에 동기와 비동기가 있는데 동기는 우리가 요청을 보내면 그 요청건에 대해 작업 완료 후 다음 요청 작업이 들어가는데
비동기는 우리가 요청을 보내고 완료를 하지 않더라도 새로운 새로운 작업을 보낼 수 있다.
저 말이 조금 이해가 안 될 수가 있는 거 같은데 콘솔에 데이터가 아닌 Promise가 나오는 것은 우리가 요청을 했지 그 요청에 대한 답을 얻지 못했다는 거 같다. 아래는 Promise의 상태를 작성한 내요이다.
Promise는 다음 중 하나의 상태를 가진다.
- 대기(pending): 이행하거나 거부되지 않은 초기 상태.
- 이행(fulfilled): 연산이 성공적으로 완료됨.
- 거부(rejected): 연산이 실패함.
즉 우리는 아직 response를 하지 않아 값이 이행되지 않아서 생기는 문제이다.
이제 여기서 fetch, then을 사용해서 데이터를 가져올 건지 await를 사용해서 가져올 건지 정해 response 해서 값을 가져오면 된다.
나는 async 랑 await를 사용해서 코드를 수정해 줬다
이제 제대로 된 데이터를 불러오는 것을 볼 수 있다.
앞으로 저런 문제가 생겼을 때는 내가 제대로 된 결괏값도 가져오는 코드를 작성하지 않아서 생긴 문제라는 걸 알 수 있을 것 같다.
'공부일지 > React' 카테고리의 다른 글
| 비전공자의 공부일지 - Redux, Reducer, Provider, reduxToolkit (0) | 2023.05.04 |
|---|---|
| 비전공자의 공부일지 - reactContext (1) | 2023.05.03 |
| 비전공자의 공부일지 - firebase, LocalStorage, firebase를 이용해서 웹, 앱 배포하기 (0) | 2023.05.02 |
| 비전공자의 공부일지 - React Router Dom, useDebounce (0) | 2023.04.28 |
| 비전공자의 공부일지 - 리액트란 무엇인가, 리액트의 컴포넌트란?, 가상돔?? (0) | 2023.04.27 |
