사실 총정리까진 아님 ㅋㅋ;;ㅎㅎ;;ㅈㅅ;😉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판과 달리 대부분의 예제가 자바스크립트로 작성되어있는 책입..
😙과제테스트... 너.. 좀.. 싫다..? 부트캠프를 들으면서 틈틈히 이력서를 돌렸습니다. 감사하게도 과제 테스트를 수행해볼 수 있는 경험들을 얻게되었는데 과제 테스트를 수행할 때마다 느끼는 것은 제 부족함인 것 같습니다. 다만 일반적으로 제가 봤던 과제테스트에는 대체로 공통점들이 존재했는데 1. mui , emotion 기반 2. 서버는 msw 모킹으로 대체 3. form 다루고 데이터 전송 , 페칭로직이 들어감 세세한 부분들은 차이가 있지만 대부분 저 세가지는 꼭 들어갔던 것 같습니다. msw는 이전에 실습해보면서 익숙하게 다루니까 괜찮고.. 데이터 전송 , 페칭은 알아서.. 나머지는 다 괜찮은데 mui , css-in-js가 제게 너무 안익숙한게 문제인 것 같습니다. 서버사이드에선 mui가 제약이 ..
😊에러 전문 Parsing error: ESLint was configured to run on `/.eslintrc.cjs` using `parserOptions.project`: /tsconfig.json However, that TSConfig does not include this file. Either: - Change ESLint's list of included files to not include this file - Change that TSConfig to include this file - Create a new TSConfig that includes this file and include it in your parserOptions.project See the typescript-..
