react 2

[프로젝트] 날씨 칵테일 | 2. 리덕스 툴킷으로 비동기 통신 하는 법 (axios, createAsyncThunk)

리액트 리덕스 툴킷에서 비동기 통신하는 법은 두 가지가 있다: 첫번째는 일반적인 axios(또는 fetch)를 활용하는 것이고, 두번째는 createAsyncThunk를 활용하는 것이다. 본 글에서는 두 가지를 모두 이용하여 그 차이점을 설명하고자 한다. 비동기 통신하기 (1) axios 활용하기 // GetWeather.tsx // 중략... useEffect(() => { const getCurrentWeather = async () => { try { const position = await getLocation(); const { latitude, longitude } = position.coords; const weatherData = await fetchWeatherData(latitude, ..

[프로젝트] 날씨 칵테일 | 0. redux-toolkit 활용 리팩토링 시작

[리팩토링 배경] 팀 프로젝트로 Open API를 활용한 날씨에 어울리는 칵테일 추천 서비스를 3주간 제작했었다. 당시 React-redux 소양이 부족하여 redux 없이 프로젝트를 구현했었는데, 이번 기회에 react-redux-toolkit 를 활용해 version.02로 프로젝트를 업그레이드 해보고, 리팩토링을 시도하며 얻게 된 인사이트를 정리해보고자 한다. 당시 구현한 기능과 본인이 담당한 기능은 다음과 같다: 1. 메인페이지 - 본인 참여 - 날씨에 어울리는 랜덤 칵테일 추천(재추천 기능 포함) - 칵테일 정보 구글 검색 연동 2. 메인페이지 칵테일 제조법 상세 페이지 3. 옵션 별 랜덤 칵테일 추천 페이지 4. 날씨 별 칵테일 모아보기 페이지 5. 칵테일 퀴즈 페이지 [개발환경] React...

728x90
LIST