😀어떻게 해야할까요? 간혹 그런 경우가 있습니다. get 요청을 특정 이벤트가 발생했을때만 보내는 기능이 필요할때가요! 그러나 reactquery의 useQuery는 기본적으로 호출한 시점에 바로 데이터 가져오기를 시도합니다. 따라서 이 기본 동작을 멈추고 사용자가 특정 행동을 하였을때에만 데이터를 페칭해오는 로직이 필요하기도 합니다. 그런데 useQuery는 바로 데이터가져오기를 시도하니까 특정한 경우에만 사용하려면 useMutation을 사용해야할까요? 그러려고 생각해보니 get 요청에 mutation을 사용하는 것이 이상하게 느껴집니다. 다행히 리액트쿼리는 이러한 유즈케이스를 적절한 옵션으로 지원하고 있습니다. https://tanstack.com/query/v4/docs/react/referenc..
👱♂️간헐적 회고 나오늘 뭐했냐 요즘은 이력서, 포트폴리오를 수정하는 나날이 계속 되고 있다. 대략 5일 정도가 된 것 같은데 굉장히 답답하다. 코드를 작성하고 싶은데 글만 적고 있으려니 답답하기도 하고 공부할 시간을 빼앗긴다는 생각이 많이 드는 것 같다. 글쓰기도 하나의 역량이고 자기자신을 잘 포장하는 것도 능력이라지만 정답 없는 글짓기를 계속 하고 있으려니 조금 스트레스를 받는 것 같다. 그와 별개로 윈도우 환경에서 슬슬 개발이 답답한 경우가 생기고 있어 맥북을 적극적으로 활용하고 싶다는 생각이 들어 맥용 모니터를 구매했다. 앞으로는 글쓰기 (키보드가 훨씬 편하다.) 마우스가 필요한 작업만 윈도우에서 진행하고 개발은 맥북으로 하지 않을까 싶다. 모니터는 주연 테크의 V28UE 제품을 쿠팡에서 구매하..
⛑주의!!! swiper 메이저버전이 10으로 올라갔습니다. (2023.07.31 기준) 메이저 버전이 10으로 올라감에 따라 아래 제 포스트를 따라했을 때 잘 동작하지 않을 수 있습니다. 본 포스트의 swiper 버전은 ^9.3.2 입니다 😙라이브러리의 도움을 받아 캐러셀 구현하기 캐러셀 같은 경우 처음 코딩을 시작했을 때 구현을 시도했던 기능인데 그당시에는 자바스크립트만 이용해서 이래저래 구글링하면서 해결했던 기억이 납니다. 지금 간단히 기억나는 느낌으로는 overflow되는 것들을 보이지않게 처리하고 일정주기 혹은 클릭이벤트가 발생할때마다 보여지는 이미지의 위치를 전환하는 식으로 구현했던 것 같습니다. 다만 이번 프로젝트에서 필요로하는 캐러셀은 요구되는 기능이 많았습니다. 따라서 이 기능들을 하나하..
😎너무 좋은 블로그 https://velog.io/@thdrldud369/Vite-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EC%97%90-jest-%EC%B6%94%EA%B0%80%ED%95%98%EA%B8%B0 Vite 프로젝트에 Jest 추가하기 Vite로 만들어진 React 프로젝트에 Jest를 추가하는 방법에 대한 설명 velog.io 전적으로 이 블로그를 참고하면서 포스트를 진행했습니다. https://github.com/XionWCFM/vite-mui GitHub - XionWCFM/vite-mui: vite-mui vite-mui. Contribute to XionWCFM/vite-mui development by creating an account on GitH..
jira는 협업툴이다. 그럼 뭐 슬랙 비슷한거려나...? 정도의 인식을 갖고 있었는데 jira안쓰는 회사가 없더라구요.. 멘토링 받을때 멘토님이 사용하는 것을 언뜻언뜻 보긴했는데 조금 찾아보니 다양한 기능을 제공하는 만큼 사용법도 꽤 까다롭다해서 미리 찍먹을 좀 해볼까합니다. https://www.youtube.com/watch?v=Vwa7BQ6WFYw 마침 유튜브에 좋아보이는 동영상도 있네요 동영상 중간에 이런 사진이 있는데 이 그림이 굉장히 마음에 들었습니다. 누구나 평탄하고 따라가기만 할 것 같은 계획을 세우지만 현실은 다양한 어려움들이 존재하죠! 그래서 Agile 하게 일하면 짧은 스프린트들을 이어나가는 형태로 평지만 달리는 것 같이 일할 수 있다라고 하는 것 같은데 애자일을 제대로 해보지도 않은..
https://im-developer.tistory.com/186 Webpack, React, Typescript, Jest 환경에서 Alias 적용하기 (절대 경로 import) 프로젝트의 크기가 커지고 복잡해질수록 상대 경로로 module을 import하기 힘들어진다. 여기 저기 왔다 갔다 하면서 나한테 필요한 파일들을 찾아내야하는데 여간 귀찮은 일이 아닐 수 없다. import R im-developer.tistory.com 이 블로그에서 구원을 얻었습니다.. jest.config.ts export default { testEnvironment: 'jsdom', transform: { '^.+\\.tsx?$': 'ts-jest', }, moduleNameMapper: { '^.+\\.svg$': '..
😎mui는? mui는 css 스타일링을 도와주는 라이브러리입니다. 공식문서에 따르면 디자인을 신속하게 배치하는 것을 위한 css 유틸리티의 모음집이라고 생각할 수 있다고 하네요 확실히 스타일을 지정하는 것은 피로도가 높은 작업입니다. 하나의 스타일을 지정하는데에만도 꽤 많은 공수가 들어가고 당연하게 쓰이는 기능들을 위해 수많은 보일러플레이트가 들어가니까요 예컨대 가운데 정렬을 위한 css 스타일링을 다음과 같습니다. display: flex; justify-content: center; align-items: center; 이 외에도 너무 긴 텍스트를 막게해주는 css.. 무슨 기능을 위한 css 유저 인터페이스를 위한 css 특히 ui기능을 구현하려고하면 굉장히 많은 수고가 들어가게되고 hover / ..
백엔드분들과 소통을 하다보면 자연스럽게 DTO라는 이야기를 많이 하게됩니다. 뭐..데이터... 뭐... 그런거.. 어... 그래요... 대충 느낌은 알것같습니다 하고 넘어가긴했는데 마침 클린 코드에서도 DTO에 대한 이야기가 나와서 DTO 이야기를 좀 정리해볼까 합니다. 디미터 법칙(LoD) 디미터 법칙은 휴리스틱으로 모듈은 자신이 조작하는 객체의 속사정을 몰라야한다는 법칙입니다. 반대로 말하면 객체는 자신의 내부 구조를 외부에 노출(공개)시켜서는 안된다는 의미로도 볼 수 있습니다. Law of Demeter라고 표기하며 "최소한의 지식 원칙"으로도 알려져있다고하네요 이러한 디미터 법칙은 어떤 객체가 다른 객체에 대해 지나치게 많은 정보를 알고 있는 경우 서로에 대한 결합도가 높아지며 이로 인해 좋지 못..
