😎너무 좋은 블로그 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 프로젝트는 근 한달동안 진행된 프로젝트입니다. 연습을 하는 느낌이었던 프리프로젝트에 비해 좀 더 정성을 들여 만들었다는 느낌이 들어서 애정이 가는 프로젝트입니다. 저는 프론트엔드 측의 보안, 에러처리 전반 그리고 로그인..
사실 총정리까진 아님 ㅋㅋ;;ㅎㅎ;;ㅈㅅ;😉CORS의 기본적인 이해https://xionwcfm.tistory.com/235 CORS / SOP가 머임🐕 SOP (Same - origin - policy) 동일 출처 정책 동일 출처 정책은 웹 애플리케이션의 중요한 보안 모델입니다. 동일 출처 정책은 같은 출처(Origin)의 리소스만 공유가 가능하다는 정책인데 인간이 보기xionwcfm.tistory.com이전에 나름대로 잘 정리해둔 포스트가 있으니 자세하게 알아보고 싶으신 분은 이 포스트를 읽어주시기 바랍니다. 이미 CORS에 대해 개념적으로 알고계신 분들 역시 지나치셔도 좋습니다. 간단하게 CORS를 이야기해보면 Cross Origin Resource Sharing 한국어로 바꿔 교차 출처 리소스 공..
😉 이메일 인증은 한번만.. 사용자일때 이런 경우가 발생하면 굉장히 사소하지만 스트레스를 받았던 기억이 있습니다. 어떤 인증코드를 입력해야할지 감이 안잡히고 맨 마지막에 있는 메일의 인증코드가 대체로 잘 동작하지만 그렇지 않은 경우에는 귀찮은 인증코드 확인을 두번이나 해야하는 게 마음에 들지 않았어요 또한 사용자는 버튼을 친절하게 한번만 클릭해주지 않습니다. 상호작용 결과가 반환될 때 까지 버튼을 열심히 누르는 사용자가 많다고 생각해요 그래서 자연스럽게 이 문제를 해결하기 위해서 여러가지 방법을 고려해보게 되었습니다. 1. 요청을 디바운스한다. 나쁘지 않은 발상이라고 생각했습니다. 확실히 디바운싱을 걸어두면 사용자가 아무리 요청을 많이 보내려고 해도 계속 요청을 지연시키면서 한번의 요청만 보낼것으로 예상..
😐Radix UI는? 흔하게 Headless UI 라이브러리라고 부르곤 하는 라이브러리입니다. 쉽게 이야기하면 디자인 없이 기능만 제공해주는 라이브러리라고 생각할 수 있습니다. 기능 없이 디자인만 제공해주는 라이브러리들의 대척점에 있다고도 생각할 수 있어요 다양한 UI/UX 기능들을 높은 퀄리티로 어떤 CSS 도구와도 통합할 수 있게 제공해주는 Radix UI는 개발자의 생산성을 크게 향상시켜줄 수 있는 도구입니다. https://www.radix-ui.com/docs/primitives/overview/getting-started Getting started – Radix UI A quick tutorial to get you up and running with Radix Primitives. www...
