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 GitHub. github.com next.js 보일러플레이트를 만든것에 이어 cra 환경에서 사용할 보일러 플레이트를 만들어보았습니다. mui, emotion을 이용하는 것이 코어 컨셉입니다. 그 외에 zod, react-hook-form, msw, react-query , react-router-dom 등 프로젝트에 일반적으로 필요한 라이브러리들을 install 해두었고 lint-staged , husky , svgr , path..
https://xionwcfm.tistory.com/356 너무 복잡도가 높은 컴포넌트는 어떡하면 좋을까? 😙 놀랍게도 이 질문에 대한 답은 구글에도 나와있지 않다. 그래서 질문을 올렸습니다. 이메일 인증이 포함 되어야하고 인증을 받을 때와 요청할 때에는 서버와의 통신이 필요했습니다. 또한 xionwcfm.tistory.com 이전 게시물에 대한 답변 쿼리셀렉터로 직접 돔제어를 하는 부분은 조금 사연이 있었는데 이 이야기를 하자면 useForm 이야기를 하지 않을수가 없다. useForm이 반환하는 register 함수의 반환값은 총 네가지로 onChange, onBlur, ref, name이 있는데 이 register가 반환한 ref를 기반으로 원하는 인풋엘리먼트에 접근할 방법을 도저히 모르겠는것이다...
😀NestJS Express를 이용해 backend를 구축해서 프론트, 백을 모두 내가 한 프로젝트를 만들고 싶었는데 express를 typescript와 함께 사용하는 좋은 강의를 찾기가 힘들었습니다. 또한 express는 Next.js와 같이 개발에 필요한 초기세팅을 제공해주지 않아서 일일히 tsconfig를 작성하고 여러가지 설정들을 만져줘야하는 번거로움이 있었어요 그러던 중 이럴바에는 그냥 TypeScript를 기본으로 사용하는 NestJS를 공부해서 적용하면 어떨까? 싶었습니다. 마침 NestJS를 다루는 좋은 서적이 있다는 이야기를 듣고 교보문고 Ebook을 통해 허겁지겁 구매한 참입니다. 구매한 책은 https://ebook-product.kyobobook.co.kr/dig/epd/ebook..
😙 놀랍게도 이 질문에 대한 답은 구글에도 나와있지 않다. 그래서 질문을 올렸습니다. 이메일 인증이 포함 되어야하고 인증을 받을 때와 요청할 때에는 서버와의 통신이 필요했습니다. 또한 닉네임도 signup 했을 때 서버로부터 닉네임이 중복되었다는 응답을 받으면 중복되었다는 에러메시지도 띄워주어야했어요 이런식으로 로직이 복잡해지고 Input뿐만아니라 버튼도 필요한 경우가 생기다보니 분명 공통적으로 쓰이는 마크업들이 있기는 한데 이것을 추상화하기가 난감했습니다. 하려면 할수는 있겠지만 시간도 많이 소모하고 복잡한 객체를 담은 배열을 만들게 될 것 같았어요 그래서 결국 인풋들을 하나 하나 작성 하는 방식을 택했습니다. 이런 경우에는 어떻게 하면 좋을까요? 참고를 위해 제가 작성한 코드를 첨부합니다. 주석을 포..
🙂회고는 오랜만이라 마지막 회고를 적은게 5월7일이니 벌써 마지막 회고를 한지 두달이 지났습니다. 시간이 정말 빠르네요 2월달 중순에 코드스테이츠를 시작했는데 벌써 7월인게 믿기지 않을 정도입니다. 회고를 안했다고 마냥 논 건 아니고요.. 큼지막하게 한 일들을 정리하면 다음과 같을 것 같습니다. pre-project 스택 오버플로우 클론하기 main-project -> 진행 중 자체 블로그 구축 -> 진행 중 pre project의 경우에는 회원가입 / 로그인 로직을 맡아 개발을 진행했는데 zod / react-hook-form의 조합을 통해 유효성검사를 하는 코드를 깔끔하게 짤 수 있었습니다. 다만 서버와 통신하는 과정에서 여러가지 문제점이 발생했어요 예컨대 서버측에서 access-control-all..
좀 더 어려운 페이지네이션 구현하기 https://xionwcfm.tistory.com/350 react-query에서 제공해주는 기본적인 페이지네이션 예제는 다음 링크에서 확인하실 수 있습니다. 이번에는 앞서 쌓은 선수지식을 기반으로 좀 더 그럴듯한 페이지네이션을 구현해봅시다. 앞선 포스트와 마찬가지로 코드 분리는 지양하면서 최대한 적은 파일만 보고도 구현가능하게 코드를 작성하겠습니다. QueryClient 및 Provider , Suspense 설정에 관련된 부분은 위 링크를 참고해주세요 이미 알고있다면 자신이 편한 세팅으로 변경해주시면 되겠습니다. 완성된 화면을 보고 시작해봅시다. prev button, next button은 다음 / 이전 페이지로 점프할 수 있으며 각 버튼을 클릭하면 해당하는 페..
pagenation이란? 페이지네이션은 일정한 갯수로 아이템을 보여주는 것을 의미할 수 있습니다. 페이지네이션을 위한 간단한 알고리즘이 존재하니 기억해두시면 좋습니다. 그렇게 어렵지는 않은데 버튼을 일정하게 유지시켜주기 위해서 필요한 알고리즘입니다. 예컨대 1부터 10까지의 페이지를 보여주는 위 그림과 같은 페이지버튼이 있다고 가정해보면 1 2 3 4 5 6 7 8 9 10 이 나열되어야 하고 11페이지로 넘어가게되면 11 12 13 14 15 16 17 18 19 20이 나열되어야 할 것입니다. 이를 위해서 사용되어야하는 알고리즘입니다. const [listSize, setListSize] = React.useState(20); const [activePage, setActivePage] = React..
😊Why CloudFlare?프리플랜도 정적 요청에 대해 트래픽 제한이 없다는 장점이 있습니다. 보통 vercel , netlify와 같은 서비스들은 서버리스함수를 지원해주기는 하지만 트래픽 제한이 월 100gb로 걸려있는 것과는 대비되는 부분이네요 물론 cloudflare도 서버리스를 지원하는 형태로 배포할 수도 있습니다. worker라는 서비스를 이용하면 가능한데 자세한 정보는 https://developers.cloudflare.com/pages/framework-guides/deploy-a-nextjs-site/#deploy-a-nextjs-site Deploy a Next.js site · Cloudflare Pages docsNext.js is an open-source React framew..
를 하려고 했으나 시행착오를 두번 겪고 방황하고 있는 상태 내가 원하는 기능은 다음과 같다. 1. 비용이 들지 않을 것 2. 트래픽 제한이 느슨할 것 3. 코드하이라이팅이 가능할 것 내가 포기할 수 있는 것은 다음과 같다. 1. 서버 2. 글 작성의 편의성 우선 여러가지 자료들을 찾아보면서 나름대로 만들어보려고 했는데 hygraph를 이용 https://hygraph.com/ The Next Generation GraphQL Content Platform Hygraph is the next generation GraphQL-Native Federated Content Platform. Integrate all your services with our unique content federation appr..
회원가입 회원가입 / 로그인 기능은 대부분의 웹사이트에서 제공하는 기능입니다. 회원가입을 하는 로직을 작성하기 위해 필요한 것은 다음과 같이 나열할 수 있습니다. 1. post 요청을 보내야하니 일반적인 경우 cors 설정이 필요합니다. 2. 적절한 아이디, 이메일, 비밀번호를 입력받아야하므로 validation이 필요합니다. 3. 여러개의 input을 관리하며 모든 입력이 마쳐졌을 때 요청을 보내야합니다. 4. 작은 단위로 나뉜 컴포넌트 및 input들이 하나의 form에 종속되어야합니다. 5. 회원가입이 완료되면 적절히 리다이렉팅해주어야합니다(로그인페이지로 리다이렉팅 등) 사용하는 개발 환경은 다음과 같았습니다. react / typescript / react-query / zod / react-ho..
