✏️ 무엇을 배웠나
1. Promise.all()
렌더링이 되자마자 실행시켜줘야 할 서버 통신 관련 함수가 3개여서, 각자 useEffect를 썼다. 렌더링이 좀 이상하게 꼬이길래 1개의 useEffect 안에 함수 3개를 넣어줬더니 작동은 했다. 그런데 함수가 늘어나니까 코드도 길어지고 각 함수의 비동기처리가 완료될 때마다 후처리를 따로해줘야 해서 뭔가 비효율적이라고 생각했다.
useEffect(()=> {
function1();
function2();
function3();
}, [])이런 상황에서 유용하게 쓸 수 있는 메서드를 알게 되어 남겨본다.
Promise.all은 프로미스를 반환하는 여러 함수가 있고 그 반환값들을 모두 가지고 뭔가를 처리해줘야 할 때 좋다.
Promise.all([promise1, promise2, promise3]
.then((values)=>{
console.log(values);})
)예시 코드에서 보는 것처럼 배열 안에 들어 있는 프로미스들이 모두 실행된 후에 특정 프로미스를 반환한다. 이 중에 하나가 rejected인 경우에는 반환하지 않음. 하나라도 통과 안 하면 안 되는 경우에 쓸 수 있겠음.
아래 코드는 Promise.all 메서드로 다시 짠 코드다.
// Promise.all을 이용해 기존 통신 함수들을 하나로 묶어버렸음.
const getData = async () => {
await Promise.all([getNowPlayings(), getTopRated(), getUpcomings()]);
setIsLoading(false);
};
// useEffect 부분 간소화
useEffect(()=> {
getData();
}, [])코드의 유지보수 측면에서 유용하게 사용할 수 있을 것 같다.
2. xcode로 ios simulator 다루기
Reative Native로 앱을 만들고 있는데, expo로 앱으로 결과 확인하는 게 은근히 귀찮고 불편했다. 자꾸 연결도 끊고 언짢음. 맥북에서는 쉽게 문제를 해결할 방법이 있었다. xcode 설치하고 dev tool 열어서 VSC로 ios simulator 실행했더니 컴퓨터 화면에서 바로 볼 수 있다! 역시 불편한 게 있으면 그때그때 찾아봐야 함. 이렇게 편한 걸 이제야 하다니. 대단한 건 아니지만 새로운 거 알게 되서 재밌었다.
🏷️ 오늘의 코멘트
앱 만드는 거 재밌다. 웹이랑 다르게 더 경험적인 측면이 있다고 느껴짐. 오픈 api 가져와서 재밌는 거 많이 만들어보고 싶다.
