⛑주의!!! 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라고 표기하며 "최소한의 지식 원칙"으로도 알려져있다고하네요 이러한 디미터 법칙은 어떤 객체가 다른 객체에 대해 지나치게 많은 정보를 알고 있는 경우 서로에 대한 결합도가 높아지며 이로 인해 좋지 못..
TypeError : window.matchMedia is not a function 정말 like dog같은 에러였습니다. 이게 저같은 경우에는 jest 파일 안에서 window.matchMedia를 사용하려는게 아니라 외부 컴포넌트에서 window.matchMedia를 사용하고있었기에 대부분의 솔루션들이 동작하지 않았습니다. https://github.com/ant-design/ant-design/issues/21096 4.0.0-rc.1 TypeError: window.matchMedia is not a function in Jest · Issue #21096 · ant-design/ant-design I have searched the issues of this repository and beli..
https://github.com/codestates-seb/seb44_main_012 GitHub - codestates-seb/seb44_main_012 Contribute to codestates-seb/seb44_main_012 development by creating an account on GitHub. github.com https://plip.netlify.app/ 코벤저스 파이탱~!!! plip.netlify.app 코드스테이츠 프론트엔드 캠프의 메인 프로젝트로 PliP 프로젝트는 근 한달동안 진행된 프로젝트입니다. 연습을 하는 느낌이었던 프리프로젝트에 비해 좀 더 정성을 들여 만들었다는 느낌이 들어서 애정이 가는 프로젝트입니다. 저는 프론트엔드 측의 보안, 에러처리 전반 그리고 로그인..
