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...
react-error-boundary란? https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary Component – React The library for web and native user interfaces react.dev https://ko.legacy.reactjs.org/docs/error-boundaries.html 에러 경계(Error Boundaries) – React A JavaScript library for building user interfaces ko.legacy.reactjs.org 공식문서에서는 여기에서 찾아볼 수 있습니다. react-error-boundary ..
😎 restful.. 이번 프로젝트에서는 보안과 restful 에 대해 고민이 있었습니다. 완벽하진 않더라도 최대한 restful한 구조를 가질 수 있도록 노력했고 그 과정에서 이러한 상황이 발생했습니다. A : 로그인 요청에 대한 응답은 토큰만 발급해주어야하지 않을까? B : 맞는것 같읍니다. A : 그럼 로그인 요청은 토큰을 발급하고 토큰이 있으면 유저정보를 가져올 수 있게 B : 맞는 것 같읍니다. 그런데 이렇게 플로우가 흐르게되면 문제점이 조금 생깁니다. 토큰을 발급받는것은 로그인 이후의 상황이라는 것이 문제가 되는데 그말인즉슨 1. 로그인 요청을 한다 2. 로그인 요청에 대한 응답을 액세스토큰과 함께 받는다. 3. 유저정보를 get하기 위해 2에서 받은 토큰을 요청헤더에 담아서 보낸다. 4. 유..
😎리팩터링 2판 서평 https://product.kyobobook.co.kr/detail/S000001810241 리팩터링 | 마틴 파울러 - 교보문고 리팩터링 | 개발자가 선택한 프로그램 가치를 높이는 최고의 코드 관리 기술마틴 파울러의 『리팩터링』이 새롭게 돌아왔다.지난 20년간 전 세계 프로그래머에게 리팩터링의 교본이었던 이 책 product.kyobobook.co.kr 교보문고에서 전자책으로 구매했습니다. 책내용과는 좀 별개의 이야기이긴 한데 교보문고도 과거의 악명에 비해서는 나름 mac os 지원을 해주긴 해준다는 감상을 받았습니다. 편하다고 하기는 양심에 찔리지만 너무 불편해서 못써먹겠다 정도까진 아니었던 것 같아요 리팩터링 2판은 1판과 달리 대부분의 예제가 자바스크립트로 작성되어있는 책입..
