Today, What I learned? 오늘은 axios를 다루다가 만난 에러에 대해서 써보려 한다. JSON-Server로 redux-thunk를 이용해서 데이터를 CRUD 하는 작업을 하고 있었다. 추가까지는 어찌어찌했는데 삭제를 누르는 순간.. 화려한 에러가 나를 반겼다. 에러와 원인 payload와 관련해서 생긴 오류인 듯 보였다. 작성했던 코드는 이랬다. 추가했듯이 payload로 id를 보내주면 될 줄 알았는데!!... 아니었던 것. 이후에 저 공간에 data라는 객체로 감싸서 payload를 넘겨보기도 했지만 결과는 똑같았다. Axios 공식 문서를 보면 HTTP 메서드에 따라서 들어가는 인자가 조금씩 다르다. 아래와 같이 post 메서드로 보낼 경우에는 두 번째 인자인 payload가 d..

Today, What I learned? 프로젝트에 쓸 수도 있는(?) UI 라이브러리를 한번 맛보기로 사용해 보았다. 이번에 처음 알게 되었는데 Material UI는 리액트 UI 라이브러리 중 가장 유명한 것이라고!... 오늘은 간략한 설치 방법과 활용에 대해서 조금 정리해 본다. Material UI Material UI는 구글의 Material Design을 바탕으로 만들어진 리액트 라이브러리이다. 부트스트랩처럼 깔끔하고 정돈된 UI를 쉽게 사용할 수 있다. 공식 문서와 추가적인 정보는 아래 사이트에서 확인할 수 있다. https://mui.com/ MUI: The React component library you always wanted MUI provides a simple, customiza..

redux-thunk? 리덕스에 관해서 공부하다 보면 '미들웨어'라는 것을 한 번쯤 들어보았을 것이다. redux-thunk, redux-saga, 그 외에도 redux-promise-middleware 등 여러 가지가 있는데 오늘은 그중에서도 가장 많이 사용되고 있는 라이브러리 중 하나인 redux-thunk에 대하여 정리해보려 한다. 리덕스 미들웨어? 먼저 미들웨어에 대해서 알아볼까 한다. 리덕스를 사용해보았다면 위와 같은 구조로 리덕스가 새로운 state를 반환한다는 것을 알고 있을 것이다. dispatch를 통해 리듀서로 전달된 액션이 리듀서로 전달되어 state가 변경된다는 것! 리덕스 미들웨어는 여기서 액션이 디스패치되고 리듀서에 전달되기 전에 추가적인 작업을 진행할 수 있다. 보통 서버와 통..

Today, What I learned? Axios 라이브러리를 알게 되었다. 이전에도 넌지시 들어는 봤지만 이번 기회로 제대로 접하게 되었다는 말이 더 맞겠다. Axios를 알고나니 fetch와 어떤 차이가 있길래? Axios가 성능이 더 좋은가?? 같은 것들이 궁금해져서 한번 정리해보려 한다. Axios 공식문서에서는 'Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다.' 라고 소개를 하고 있다. 즉 Promise를 기반으로 HTTP를 이용해서 서버와 비동기로 통신하는 라이브러리이다. 아래와 같은 키워드로 설치할 수 있다. npm에서 사용할 경우 $ npm install axios yarn에서 사용할 경우 $ yarn add axios 공식 문서는 이쪽에서 확..

Today, What I learned? 전체적인 과제 리뷰를 듣고, 랜덤 하게 뽑힌 다른 분들의 결과물과 코드를 보다 보니 내 코드에서 고치고 싶은 부분들이 생겼다! 안 그래도 제출하고 뭔가... 부족한 이 느낌..🤔 같은 생각이 들었는데 역시 갈길이 멀다!.. 일단 우선적으로 리팩토링한 부분들을 정리해본다. TodoList에 뿌려주는 불필요한 props 제거 왜 생각하지 못했을까 싶은 부분!.. 어차피 리덕스로 상태관리를 하고 있고 리듀서로부터 todos 라는 동일한 데이터를 가져와서 뿌려주는데, 굳이 props로 넘겨줄 필요가 없었다. TodoList 컴포넌트로 useSelector 훅을 옮겨서 바로 데이터를 렌더링 할 수 있도록 변경했다. 반복되는 label, input 컴포넌트화 투두 입력 부분..

두 번째 투두 리스트 react-router-dom, styled-components와 redux에 대해 좀 더 공부한 후에 기초 투두 리스트를 업그레이드해서 다시 한번 만들어보는 시간을 가졌다. 투두 리스트를 만들며 UI/UX 적으로나, 기술적으로 고민했던 부분들과 깨달은 점.. 같은 것들을 회고해보려 한다. 완성된 투두리스트를 배포한 링크는 아래! https://todolist-redux-theta.vercel.app/ React App todolist-redux-theta.vercel.app UI/UX 지난번에 만들 때는 꽤 자유분방하게 만들어봤으니 이번에는 요구되는 틀을 유지하되 사용자의 편의를 생각해서 레이아웃을 짜보았다. 투두 하단부의 버튼은 우선순위를 따졌을 때, 유저 입장에서는 '완료'가 ..

들어가며 웹에서 데이터를 보내고 받기 위해서는 어떤 식으로 전송하고 어떤 경로(End-point)에 전달할지를 중요하게 본다. 데이터를 전송하고 받는 방식으로는 GET, POST 등의 HTTP 메서드가 있고, 관련해서 REST API라는 개념이 있다. 그보다 이번 글에서는 경로에 대해서, 그 중에서도 Query Parameter와 Path Variable에 대해서 정리해보려 한다. Query Parameter (Query String) 위 이미지는 우리가 흔하게 보는 URL의 구조이다. 여기서 ? 이후부터 시작되는 Parameters라는 부분이 바로 Query Parameter이다. 흔히 Query String, 쿼리 스트링이라고 부르기도 한다. 쿼리 파라미터와 쿼리 스트링은 같은 표현! Query St..

Today, What I learned? redux와 styled-components, react-router-dom을 이용해서 좀 더 업그레이드된 투두 리스트를 만드는 중!.. 이전보다 컴포넌트를 좀 더 세분화 하다보니 버튼 컴포넌트도 분리하게 되었다. 문제는 버튼 컴포넌트에 전달되는 여러 함수들을 어떻게 실행시킬 것이냐!.. 였는데... 리액트에서 onClick 이벤트에 매개변수가 있는 함수를 어떻게 넘겨줄 것인지를 알게 된 과정을 정리해본다. 기존의 코드 type에 따라서 props로 받아온 다른 함수들을 실행시키도록 하고 싶었다. 저기까진 좋았는데, 기능이 추가됨에 따라 타입이 추가되다 보니 삼항 연산자로는 버거운 상황이 발생.. 계속 이렇게? 줄줄이 소세지처럼? 간다고? 이렇게 쓰는 것은 삼항 ..

문제 덧셈, 뺄셈 수식들이 'X [연산자] Y = Z' 형태로 들어있는 문자열 배열 quiz가 매개변수로 주어집니다. 수식이 옳다면 "O"를 틀리다면 "X"를 순서대로 담은 배열을 return 하도록 solution 함수를 완성해주세요. 입출력 예 quiz result ["3 - 4 = -3", "5 + 6 = 11"] ["X", "O"] ["19 - 6 = 13", "5 + 66 = 71", "5 - 15 = 63", "3 - 1 = 2"] ["O", "O", "X", "O"] 풀이 =을 기준으로 왼쪽의 연산이 오른쪽의 수와 일치하는지를 따져 O, X로 결과를 반환하는 문제다. quiz 배열의 각 요소를 공백을 기준으로 split 해야겠다는 생각이 먼저 들었다. function solution(quiz..

문제 S사에서는 각 부서에 필요한 물품을 지원해 주기 위해 부서별로 물품을 구매하는데 필요한 금액을 조사했습니다. 그러나, 전체 예산이 정해져 있기 때문에 모든 부서의 물품을 구매해 줄 수는 없습니다. 그래서 최대한 많은 부서의 물품을 구매해 줄 수 있도록 하려고 합니다. 물품을 구매해 줄 때는 각 부서가 신청한 금액만큼을 모두 지원해 줘야 합니다. 예를 들어 1,000원을 신청한 부서에는 정확히 1,000원을 지원해야 하며, 1,000원보다 적은 금액을 지원해 줄 수는 없습니다. 부서별로 신청한 금액이 들어있는 배열 d와 예산 budget이 매개변수로 주어질 때, 최대 몇 개의 부서에 물품을 지원할 수 있는지 return 하도록 solution 함수를 완성해주세요. 입출력 예시 d budget resu..