시작하기 전에 부족한 부분은 언제든 지적해주세요. 틀린 내용이 있을 수 있습니다. 공부한 내용을 정리한 글이니 참고만 해주세요. 프로젝트를 진행하면서 시간상 빠르게 기능을 만들다 보니 좋은 코드인지 나쁜 코드인지 생각하기도 전에 일단 만들고 이상이 없다면 진행했던 프로젝트가 많은 거 같습니다. 그러니 만들었던 프로젝트를 돌아보면서 리팩토링도 하고 버그도 수정하는 과정이 필요하겠죠. 예전에 작성했던 코드를 보는 것은 왜 이렇게 했을까? 이게 내가 한거였나?하는 생각을 하게 돼서 재밌는거 같습니다. MUI의 Data Grid와 Select를 사용해서 데이터를 보여주고 필터링하는 페이지가 있었는데 해당 코드를 리팩토링 해봅시다. 레거시 코드 filter()는 파라미터 userData, globalFilterS..
시작하기 전에 부족한 부분은 언제든 지적해주세요. 틀린 내용이 있을 수 있습니다. 공부한 내용을 정리한 글이니 참고만 해주세요. web front로 공부하거나 토이프로젝트를 하다보면 server와 네트워크 통신(fetch)를 해야 하는 경우가 생기는데 대부분은mock data를 사용하기만 해도 크게 문제가 되지 않았다. 그러나 실제 통신이 필요할 때가 있었는데 지금까지 그냥저냥 어떻게든 넘겨왔다. 이게 한두번도 아니고 너무 반복되니 슬슬 짜증이 나기 시작해서 나중에 공부하려 했던 `server`를 간단하게 공부해서 만들어보았다. 왜 Node.js ? node.js를 선택한 이유는 딱 1가지, javascript를 사용하기 때문입니다. 지금 당장 깊게 공부하기 위한 것이 아니고 불편함을 없애기 위해서 빠르..
시작하기 전에 부족한 부분은 언제든 지적해주세요. 이 글은 답이 아니고 옳은 길을 제시하지도 않습니다. 공부한 내용을 정리한 글이니 참고만 해주세요. + 기존에 작성된 글에서 틀린 부분을 수정하여 작성하였습니다. 제가 만들려는 Router는 아래의 표와 같은 기능을 수행합니다. 라우터 조건 페이지 예시 PrivateRoute 옵션1 : 로그인을 안했을 때만 접근 가능한 페이지 로그인 페이지 옵션2 : 로그인 해야만 접근 가능한 페이지 관리자 & 유저 페이지 AuthorityRoute 옵션1 : token에 권한이 있을 때 접근 가능한 페이지 관리자 페이지 옵션2 : token에 권한이 없을 때 접근 가능한 페이지 유저 페이지 기본 Route 어떠한 제약 없이 항상 접근 가능한 페이지 위의 기능을 [ 사이..
시작하기 전에 해당 글의 내용은 잘못된 내용을 포함하고 있습니다. 아래 링크의 다시 작성한 글을 참고해주세요. https://moro-yong.tistory.com/10 이 글은 react-router을 사용하여 login user의 권한에 따른 페이지 접근 승인/거절 기능을 만드는 것입니다. + 라우터 라이브러리는 React-router v6를 기준입니다. v5와는 다소 다르니 변경사항은 공식문서를 참고해 주세요. React-Router 공식문서 필요한 기능 정리 로그인했을 경우와 로그인하지 않았을 때 접근 가능한 페이지를 나누고 로그인을 했다면 권한이 있는지에 따라 접근 가능한 페이지를 한번 더 나누고 접근이 안된다면 기존의 페이지로 이동시키는 기능입니다. 위의 내용을 정리하면 아래와 같습니다. 1...
시작하기 전에 부족한 부분은 언제든 지적해주세요. 이 글은 답이 아니고 옳은 길을 제시하지도 않습니다. 공부한 내용을 정리한 글이니 참고만 해주세요. 함수형 컴포넌트를 사용하는 react 개발자라면 hooks를 많이 사용했을 것입니다. react에서 기본적으로 제공하는 hooks는 많은 편의를 가져다주지만 때로는 새로운 기능의 hooks가 필요하기도 합니다. 이런 상황에서 react팀은 우리에게 hooks를 만들어서 사용할 수 있다고 말합니다. * usefetch를 만들기 위해 useEffect, useReducer, useRef 3개의 hooks와 typescript를 사용하기에 앞의 것들을 잘 모르겠다면 먼저 공식문서와 다른 글들을 보고 오시는 것을 추천합니다. useHooks를 왜 만들어야 하는가?..
개발자 커뮤니티를 들락날락 하면서 글을 읽다보면 정말 빠르게 그리고 많은 기술들이 날아오르기도 묻히는 느낌을 받는다. 최근에 사용하기 시작한 tailwind.css도 처음 출시된 것은 17년 말쯤으로 꽤 나이가 있는 프레임워크이고 제가 알기론 얼마전까지만 해도 그렇게까지 인지도가 높은 프레임워크는 아니였다고 알고 있는데 npm trends에서 비교하면 재대로 알 수 있다. npm trends에서 5년간의 styled-components와 다운로드 횟수 비교를 보면 22년 초까지도 1.5배 정도로 차이가 있었는데 22년 5월부터 조금씩 tailwind의 다운로드가 올라가더니 22년 말에는 거이 동일선상에 있다고 해도 될정도로 많은 횟수의 다운로드를 기록하고 있는 모습이다. 최근에도 격차를 좁힌 상태가 유지..
* 여기서 소개되는 styled-components, tailwind를 작성하기 편하게 라이브러리라고 하겠습니다. 최근 개발자 커뮤니티에서 tailwind의 인기가 무섭게 오르고 있다는 글을 읽었는데 관련 글이나 영상들이 눈에 자주 보이는 것을 그 인기를 간접적으로 느낄 수 있는 거 같습니다. npm trands에서 22년 초까지만 해도 styled-components에게 다소 약한 모습을 보여주었지만 22년 말부터는 거이 동일한 다운로드 횟수를 보여주고 있습니다. 이를 보면 인기와 함께 사용률이 많이 올랐다는 것을 알 수 있습니다. 예전부터 taillwind를 알고 있었지만 sass와 styled-components를 먼저 사용해 왔고 그중에서 편리했던 styled-components를 사용하고 있었습..