<현록/>

(진행배경) 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...

(진행배경) 아래 코드와 같이 localStorage에서 데이터 파싱을 시도하자 위와 같은 cannot read properties of null(reading 'notes') 에러가 나타났다. 'notes' 값을 읽어오지 못하고 있는 것이다. // 파싱한 데이터를 화면에 그리기 function showNotes() { const showData = parseSavedData(); console.log('showData', showData); for (let i = 0; i < showData.notes.length; i++) { const note = showData.notes[i]; const solution = showData.solutions[i]; const select = showData.se..

딴짓을 하게된 계기를 기록하고 대처하는 차원에서 딴짓 원인을 기록하기로 하였다. 사용자는 아래와 같이 3가지 항목중 하나를 드롭박스 옵션에서 골라 선택할 수 있다. 내부계기(딴짓을 하게 된 원인이 나로부터 발생한 경우: 피로감, 스트레스 등) 외부계기(딴짓을 하게 된 원인이 외부로부터 발생한 경우: 스마트폰 알림, 전화 등) 잘못된 계획(딴짓을 하게 된 원인이 잘못된 계획으로부터 발생한 경우) [배운점] 1. 콜백함수의 선언과 호출 // createNote.js // 메모 레이아웃 그리기 export function createNote(noteValue, selectValue) { const notesContainer = document.querySelector('.notesContainer'); // ..

내가 한 딴짓을 검색할 수 있는 기능을 추가해보았다. 검색기능은 이전부터 꼭 학습하고 싶은 영역이었는데 이번 기회에 구현할 수 있게 되었다. 검색 키워드와 저장 키워드가 일치하는 경우에는 키워드를 포함하는 요소의 부모요소(즉 개별 메모 컨테이너)를 삭제할 수 있게끔 구현했다. function filter() { let searchValue = searchInput.value.toLowerCase(); // 대소문자를 구분하지 않는 검색을 위해 소문자 변환 let notes = document.querySelectorAll('.inputDiv'); for (let i = 0; i < notes.length; i++) { if (notes[i].innerHTML.toLowerCase().includes(se..

메모앱 생성시간을 기록 할 수 있는 타임스탬프 기능을 구현해 보았다. 기록 시간이 7:08 와 같이 한 자리수로 떨어질 때는 앞에 0을 붙여서 언제나 두 자리수로 출력되게끔 구현하였다. 타임스탬프는 수정 권한이 없게 하기 위해 지난시간 배운 contenteditable 속성을 활용해 false 값으로 주었다. // ...(중략) let timeBox = document.createElement('div'); timeBox.innerHTML = timeStamp(); // timestamp 호출 timeBox.setAttribute('contenteditable', 'false'); timeBox.className = 'timeStamp'; function timeStamp() { const today =..

(진행배경) 메모를 추가하고 엔터 버튼을 누른 뒤 창을 새로고침하면, 메모 컨테이너 안에 있던 이미지가 아래 사진과 같이 밖으로 벗어나는 오류가 발생하였다. [문제 - Enter 이벤트 발생에 따른 요소 간 충돌문제] (문제 상황) 엔터를 치지 않았을 때는 해당 문제가 발생하지 않고, 엔터를 치고 웹을 재로드 하면 문제가 발생하는 것으로 보아 엔터 이벤트 발생과 관련된 오류인 것으로 추정되었다. (문제 원인) 원인은 사용자가 내용을 편집할 때 'Enter' 키를 누르면 웹 브라우저는 내부적으로 태그를 삽입하여 줄 바꿈을 처리하는 문제였다. 메모를 기록하고 엔터를 치면 로컬스토리지에 해당 내용이 저장 되도록 소스 코드를 작성해 놨는데, 이 과정에서 이미지를 감싼 div가 p태그 내부에 새롭게 만들어지며 충..