https://taejinii.tistory.com/65 React - 리액트 달력(Calender) 구현하기 with "date-fns" 위 사진은 현재 진행중인 사이드 프로젝트의 디자인시스템 입니다. 위 사진은 디자인 시스템에 있는 datepicker 가 사용되고있는 디자인 시안입니다. 이제 해당 캘린더를 캘린더 라이브러리 없이 taejinii.tistory.com 컴포넌트가 짤리는 문제 발견 해당 달력을 캘린더 라이브러리 없이 직접 구현을 했었습니다. 듀얼모니터로 작업을 했었는데 듀얼모니터는 화면이 커서 문제가 없었지만 작은 맥북화면으로 옮겨보니 캘린더의 밑부분이 잘리는 현상이 발생했습니다. 이 UI 문제점은 치명적이기 때문에 바로 수정하는 작업을 진행하였습니다. 개선을 어떻게 하였나? // 기존코..
위 사진은 프로젝트에 신청한 지원자 및 프로젝트 팀원을 전체적으로 관리하는 모달 입니다. 첫번째로 지원현황,팀원관리 에 따라 모달의 뷰가 바뀌어야하며 포지션별로도 화면이 바뀌어야하기 때문에 초기 구상당시에는 구현이 약간 어려울지도 모르겠다고 생각이 들었었습니다. 서버데이터 양식은 크게 객체안에 포지션별로 있고 포지션별객체안에는 각 지원자들 그리고 총 지원자들의 수가 있습니다. 모달에서 백엔드포지션을 누르면 백엔드를 지원한 지원자들의 데이터만 보여주어야 하기때문에 한번에 받아오는 데이터를 적절하게 걸러줄 필요성이 있었습니다. 저는 이를 해결하기위해 useQuery 안에 내장되어있는 select 를 사용하여 해결하였습니다. 기본적으로 useQuery 를 사용하여 서버데이터를 fetch 하는양식은 이와 같습니..
백엔드없이 사이드 프로젝트 구현 2탄 은 로그인,회원가입 기능 구현하기입니다! 만약 처음 이 게시글을 보시는분이시라면 1탄을 보고 오시면 더욱더 이해가 편합니다! https://taejinii.tistory.com/5 1탄링크입니다. 백엔드없이 사이드 프로젝트 + 배포 with Vercel,json-server,glitch 백엔드 없이 프론트엔드 혼자 사이드 프로젝트 배포까지! 많은 프론트엔드 개발자 분들이 지금까지 배운 내용들을 복습하는 개념으로 처음부터 끝까지 혼자 해보고 싶으신분들이 계실겁니다! taejinii.tistory.com 본론으로 넘어와서... 저는 로그인 기능구현을위해 json-server-auth 라는 라이브러리를 추가로 사용하였습니다. https://www.npmjs.com/pack..
제 사이드프로젝트에서 아이템 추가를 할때 모달을 통해 아이템을 추가하게 됩니다. 아이템을 추가한 후에 아이템이 자동으로 화면에서 최신화업데이트를 하려면 React-query를 쓰기 전까진 데이터를 불러오는 함수를 사용해서 최신화를 시켜주었습니다. post 요청을한후 요청이 잘됐다면 then 을 통해 아이템추가되었다는 알람토스트를 띄우고, getItem 함수 즉 데이터를 불러오는 함수를 사용하여 추가된 데이터를 화면단에서 바로바로 업데이트할수있게 해주었습니다. ItemEditorModal 은 InventoryPage 에 종속되어있었고 InventoryPage 에서 setItems 를 ItemEditorModal 로 props 내려 주어 사용하였습니다. 문제는 여기서 발생하였습니다. 모달을 확장성을 고려하여..
