서버 주소를 노출시키지 않기 위해 .env 파일을 이용해서 환경변수를 적용해보기로!.. 자주 쓰는 경로나 값이 있다면 환경변수를 이용해서 편하게 가져다 쓸 수 있다. 먼저 .env 파일을 만들어서 변수를 만들어준다. 변수 선언 리액트에서 사용해주려면 앞에 REACT_APP 키워드를 꼭 붙여주어야 한다. url 주소를 넣는다면 굳이 따옴표로 감싸주지 않아도 된다! 변수 사용 아래와 같이 process.env.[변수이름]으로 사용하면 된다. await axios.patch(`${process.env.REACT_APP_API_URL}/articleComment/${id}`,{...comment,}); 처음에는 아래처럼 사용했었는데 계속 404 오류가 떴다.. 😇 선언한 변수명 그대로 넣어줘야 하는듯! awai..

페이지네이션? 무한 스크롤? 프로젝트를 진행하며 게시글 콘텐츠 수가 너무 많아질 경우를 대비해서 페이지네이션이나 무한스크롤을 적용해보기로 했다. 게시글 특성상, 하단에 글쓰기 버튼이 항상 있어야 하기 때문에 무한스크롤보다는 페이지네이션이 더 적합하겠다는 생각으로!.. 페이지네이션을 구현해보기로 했다. MUI의 Pagination 컴포넌트 MUI에서 페이지네이션 컴포넌트를 검색하면 다양한 스타일의 페이지네이션 컴포넌트를 확인할 수 있다. https://mui.com/material-ui/react-pagination/#main-content React Pagination component - Material UI The Pagination component enables the user to select ..

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..