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

12월 넷째 주를 보내며 날씨가 어마무시하게 추워진 이번 주.. 목요일부터 프로젝트가 시작되었다. 크리스마스와 프로젝트가 겹치다니 너무나... 🥺 벌써 캠프 기간의 반절이 되어가다니 시간이 정말 날아가는 것 같다.. 👀 Fact JSON-server로 데이터를 저장하는 선발대 시험과제를 해냈다! 프로젝트를 시작했다. 심화 주차 강의를 들었다. 프로젝트 시작까지 알고리즘을 풀었다. 🙂 Feeling 선발대 과제 코드리뷰에서 '일하고 있는 신입 개발자같다'는 칭찬을 들었다. 처음 받은 코드리뷰였는데 뿌듯 🙂 새롭게 알게 된 지식들이 많다. 재밌게 배우는 중! 리액트 쿼리를 다시 집중해서 공부해봐야겠다는 생각.. 쉽지 않다. 팀장으로서 잘 하고 있는걸까? 하는 생각이 종종 든다. 🤔 🔍 Finding JSON..

페이지네이션? 무한 스크롤? 프로젝트를 진행하며 게시글 콘텐츠 수가 너무 많아질 경우를 대비해서 페이지네이션이나 무한스크롤을 적용해보기로 했다. 게시글 특성상, 하단에 글쓰기 버튼이 항상 있어야 하기 때문에 무한스크롤보다는 페이지네이션이 더 적합하겠다는 생각으로!.. 페이지네이션을 구현해보기로 했다. 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 ..

프로젝트 술렁 2일 차 특강이나 캠프 내 크리스마스 이벤트 등 일정이 좀 있던 하루여서 생각보다 작업 시간이 길지 않았던 것 같은 하루! 우선 오늘 오후까지 UI 작업을 마무리하기로 했었고, 완벽히는 아니지만 대부분의 UI 작업이 마무리되었다. UI 작업이 마무리된 후 바로 기능 구현을 다들 시작!.. 이번 프로젝트도 gitflow 방식으로 협업하고 있어서, dev 브랜치에 각자의 브랜치에서 작업한 것을 PR 넣는 방식으로 진행되고 있다. 2일 차에 진행된 PR들은 이렇다! 오늘의 이슈가 있었다면, 기능 구현이 벅찬 팀원들에게 많은 기능이 배분된 게 아닌가 싶어서 상의를 통해 살짝 덜어낸 점이 있겠다. 또 주류별 리스트를 렌더링 하는 과정에서 UI 컴포넌트가 조금 복잡하게 짜여서 map을 여러 번 돌릴 ..

프로젝트 술렁 1일 차 새로운 프로젝트가 시작되었다. 이번 프로젝트는 리액트와 리덕스, JSON-server를 이용해서 CRUD를 만드는 것~ 주제, 주요 기능 주제는 여러 가지가 나왔었는데, 내가 제안한 주류 커뮤니티가 선택되었다. 애주가들의 커뮤니티! 주요 기능은 이렇다. 술 종류를 아티클로 소개 술에 대해 평점을 댓글로 남길 수 있음 커뮤니티 이용자들끼리 게시글과 댓글을 작성할 수 있음 와이어 프레임 완성된 와이어 프레임은 이렇다. 프로젝트 이름 겸 서비스 이름에 관해서도 많은 아이디어가 나왔다가, 아무 생각 없이 입력한 술렁술렁이 채택됐다 (ㅋㅋ) 후다닥 빠르게 만들어본 로고 1안, 2안중 2안이 선택되었다. 라이브러리, DB 우리는 이번에 좀 더 기능 구현에 집중하기 위해 많이들 사용한다는 Ma..

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 공식 문서는 이쪽에서 확..