😐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-..
👱♂️간헐적 회고 나오늘 뭐했냐 내가 잘 모르는게 많다는 것이 많이 체감된다. 공부해볼 게 넘쳐나서 신나기도하면서 공부기간을 좀 더 오래잡고 싶다는 욕구가 생기는 것 같다. 아는 것보다 모르는게 당연히 더 많겠지만 지금 당장 공부하고 싶어서 시도하고 있는 것들만 해도 24시간이 모자란 느낌이다. 1. Error Boundary를 통한 선언적 에러 핸들링 -> 에러 핸들링 코드들은 테스팅 하는 데에 공수가 많이 든다. 하나하나 일일히 에러 코드들을 띄워보는게 오래걸리기 때문이다. 따라서 테스트 코드가 절실해졌다. 2. 테스트 코드 라이브러리 -> 1에서 겪은 문제와 더불어 폼의 유효성 검증을 하는 것도 일일히 테스트 해보는 게 굉장히 오래걸렸다. 잘 작성된 테스트 코드가 있으면 좋을 것 같다는 생각이 들..
😁왜 그렇게 생각했지? reactquery onerror deprecated https://tkdodo.eu/blog/breaking-react-querys-api-on-purpose Breaking React Query's API on purpose Why good API design matters, even if it means breaking existing APIs in the face of resistance. tkdodo.eu 라고 하면 리액트쿼리를 다루는 블로그 중 가장 인지도가 높.(다고생각하는) tkdodo의 블로그에서 이 글을 읽었기 때문인 것 같다. 그런데 그때는 너무 스르륵 읽듯이 읽어서 본질을 파악하지 못했는데 결론적으로 말하면 useQuery의 onSucces, onSettled..
👱♂️간헐적 회고 나오늘 뭐했냐 열심히 프로젝트를 하는 나날을 보내고 있습니다. 그런 와중에 틈틈히 하고 있는 건 mui 공부하기 / 클린코드, 리팩터링 읽기를 곁들인 nestjs도 공부하고 있었는데 한번에 머리에 다 들어오진 않네요.. 일단 보류하고있습니다. 클린코드 , 리팩터링은 읽어보기전까진 별 생각 없었는데 막상 읽으니까 평소에 답답한데 물어보긴 뭐한 부분들을 시원하게 풀어줘서 너무 좋습니다. mui는 조금..많이 낯설긴한데.. 사실 sass 문법과 css-in-js 문법이 익숙하지 않아서 더 그런 것 같습니다. tailwindcss를 열심히 쓰면서 이제는 테일윈드로는 속성이 생각나는데 기본 css로는 버퍼링이 한번 걸리는 정도까지 와서 다시 돌리려면 시간이 좀 필요할 것 같네요 그래도 하다보니..
😡 왜그러시죠? 제가 화난 사람처럼 보이나요? 항상 그렇지만 환경설정이 제일 어려운 것 같습니다. 미래의 제가 또 같은 일을 해야할 상황이 빈번할 것 같아 미리 기록을 남겨둡니다. 윈도우환경에서는 대체로 문제없이 돌아가는것같습니다. 다만 맥에서는 추가로 설정을 조금 만져줘야하네요 장황한 개념 설명은 다른 게시물들이 충분히 잘해주었다고 생각합니다. 따라서 간단하게 각각 어떤 역할을 수행하는지 간략하게만 보겠습니다. 사실 eslint와 prettier는 익숙하신 분들이 더 많을 것이라 생각됩니다. 특히 eslint는 cra, vite 등 대부분의 보일러플레이트에서 기본적으로 제공하기도 하니까요 eslint : 코드의 문제를 찾고 수정하는데 도움을 줍니다. prettier : 코드를 좀 더 pretty하게 바..
