<현록/>

사용자에게 로딩이 진행되고 있다는 것을 보여주는 것은 중요하다. slice에서 addCase를 통해 정의된 로딩 상태에 따라 컴포넌트의 렌더링 여부를 결정하는 로직을 구현하였다. 위의 이미지에서 '재추천받기' 버튼을 눌렀을 때 '칵테일 추천 중..' 이라는 문구를 띄우고자 한다. 컴포넌트 return 값은 삼항연산자를 활용하여 조건부를 작성하였다. '칵테일 추천 중..' 문구는 status가 loading 단계일 때 잠깐 등장한다. 이내 status가 succeded되고 payload로 cocktailInfo가 업데이트되면 해당 state를 불러온다. cocktailInfo가 없는 경우(즉, status가 failed)이면 '연결 오류: 칵테일 정보 수신 불가' 메세지를 띄운다. 아래는 상세한 코드이다:..

(진행배경) cocktail 정보를 Open API를 통해 렌더링함에 그간 문제가 없었는데 어느날은 SyntaxError가 발생하였다. 코드를 고치지 않았는데도 문제가 발생한 것으로 보아 일단은 CocktailDB 서버 자체 문제로 간주되었다. 혹여 클라이언트의 문제인지 체크하기 위해 아래와 같이 API 주소를 주소창에 직접 입력해보니 데이터베이스 연결에 실패하고 있다는 에러 메세지를 반환하였다. https://www.thecocktaildb.com/api/json/v1/1/filter.php?g=Coffee_mug [문제-SyntaxError: Unexpected token '

리액트 리덕스 툴킷에서 비동기 통신하는 법은 두 가지가 있다: 첫번째는 일반적인 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, ..

(진행배경) GetCocktail 컴포넌트 내부에서 dispatch를 사용하자 fetchCocktail(weatherName) 부분에서 'AsyncThunkAction' 형식의 인수는'AnyAction' 형식의 매개 변수에 할당될 수 없다는 타입에러가 발생하였다. 다음은 컴포넌트의 코드와 문제가 발생한 fetchCocktail 함수가 포함된 cocktailSlice 파일의 코드이다: // GetCocktail.tsx function GetCocktail({ weatherName }: GetCocktailProps) { const { cocktailInfo, status } = useSelector( (state: RootState) => state.cocktail ); const dispatch = us..

[Redux 개요] Redux는 Action, Store, Reducer, Dispatch를 통해 상태를 관리한다. 각 역할은 아래와 같다. - Store : 상태를 저장하는 장소 - Reducer : 현재 Store의 상태와, 발생한 Action의 payload를 받아 새로운 상태를 반환 (상태가 어떤식으로 변경되는 지를 정의함) - Dispatch : Action을 발생시킴 - Action : 상태를 변경시키고 싶을 때 생성하는 객체(type 과 payload를 가진다) [state 동작원리] 이제 state가 어떤 순서를 거쳐 갱신되는 지 그 여정을 되짚어 보자. 아래 순서는 store 구축 순서를 포괄하니 코드 입력 시에도 동일한 순서로 진행하면 된다. 1. slice 구성하기 // weather..

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

(진행배경) 지난 글에 이어 재 배포를 실시하였으나 이번에는 아래와 같은 Mixed Content 에러가 발생하였다. 금방 끝날 줄 알았던 배포가 점점 길어지니 답답할 노릇이었다. [문제 - Mixed Content 에러] (문제 상황) 해당 에러문은 하나의 웹 페이지 안에서 일부는 https로 가져오고, 일부는 http로 리소스를 가져올 때 발생하는 문제라고 한다. (문제 원인) 아래와 같이 로컬 파일에서 API를 요청하는 주소를 모두 살펴본 결과, 소스코드 하나가 http로 리소스를 가져오고 있었다. (해결 방법) 해당 주소를 https로 변경해 주고 다시 git push 하였다. Netlify에서 자동 재배포 된 사이트를 확인하니 정상 로드되었다. (배운점) Mixed Content 문제 예방을 위..

(진행배경) 기존 팀프로젝트로 로컬에서 작업한 웹 애플리케이션을 누구나 접속할 수 있도록 Nelify로 배포하는 작업을 진행하였다. 팀원 모두가 프론트엔드 직무를 희망하면서 단기간에 웹 화면 구현 스킬을 늘리는 데 초점을 뒀던터라, 따로 배포는 진행하지 않아 끝내 아쉬움이 남았었다. 프로젝트 종료 후 3개월이 지난 지금 스스로 배포까지 해보는 경험이 필요할 것 같아 다시 프로젝트를 켰다. 배포가 가능한 사이트는 아주 다양한데 그 중 간편하기로 소문난 Netlify 서비스를 체험해봤다. Netlify 깃허브와 연동하면 내 레포지터리를 모두 불러오고 그 중 원하는 것 선택 배포가 가능해 매우 간편하다. 도메인 주소 변경 역시 가능하다. 배포 방법은 아래 과정을 참고하여 진행하였다. [문제 - 401 에러] ..