frontend

frontend

Barrel export 패턴으로 깔끔한 import 관리

를 할 수 있습니다. https://basarat.gitbook.io/typescript/main-1/barrel Barrel - TypeScript Deep Dive Instead of exporting *, you can choose to export the module in a name. E.g., assume that baz.ts has functions: basarat.gitbook.io 타입스크립트 딥다이브에서도 확인할 수 있는 패턴인데 사실 유사한 형태로 관리해본 경험에서 이야기하자면 import 할 때는 행복한 대신 export 할 때 귀찮은 작업이 추가된다는 단점이 있습니다. 작성패턴은 아주 쉽습니다. 주로 내보내기 할 파일들이 모여있는 폴더내부에서 index.ts 파일을 생성해 준 뒤 ..

frontend

프론트엔드 CORS 에러 핸들링 빠르고 강한 정리

사실 총정리까진 아님 ㅋㅋ;;ㅎㅎ;;ㅈㅅ;😉CORS의 기본적인 이해https://xionwcfm.tistory.com/235 CORS / SOP가 머임🐕 SOP (Same - origin - policy) 동일 출처 정책 동일 출처 정책은 웹 애플리케이션의 중요한 보안 모델입니다. 동일 출처 정책은 같은 출처(Origin)의 리소스만 공유가 가능하다는 정책인데 인간이 보기xionwcfm.tistory.com이전에 나름대로 잘 정리해둔 포스트가 있으니 자세하게 알아보고 싶으신 분은 이 포스트를 읽어주시기 바랍니다. 이미 CORS에 대해 개념적으로 알고계신 분들 역시 지나치셔도 좋습니다. 간단하게 CORS를 이야기해보면 Cross Origin Resource Sharing 한국어로 바꿔 교차 출처 리소스 공..

frontend

Parsing error: ESLint was configured to run on

😊에러 전문 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-..

frontend

nextjs 13 typescript 환경에서 eslint airbnb 에 husky, gitmoji, lint-staged까지?

😡 왜그러시죠? 제가 화난 사람처럼 보이나요? 항상 그렇지만 환경설정이 제일 어려운 것 같습니다. 미래의 제가 또 같은 일을 해야할 상황이 빈번할 것 같아 미리 기록을 남겨둡니다. 윈도우환경에서는 대체로 문제없이 돌아가는것같습니다. 다만 맥에서는 추가로 설정을 조금 만져줘야하네요 장황한 개념 설명은 다른 게시물들이 충분히 잘해주었다고 생각합니다. 따라서 간단하게 각각 어떤 역할을 수행하는지 간략하게만 보겠습니다. 사실 eslint와 prettier는 익숙하신 분들이 더 많을 것이라 생각됩니다. 특히 eslint는 cra, vite 등 대부분의 보일러플레이트에서 기본적으로 제공하기도 하니까요 eslint : 코드의 문제를 찾고 수정하는데 도움을 줍니다. prettier : 코드를 좀 더 pretty하게 바..

frontend

ts react vite mui 보일러플레이트 만들기

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..

frontend

CloudFlare를 이용해 Next.js 프로젝트 Static하게 배포하기

😊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..

frontend

next.js를 활용해 자체 블로그 만들기

를 하려고 했으나 시행착오를 두번 겪고 방황하고 있는 상태 내가 원하는 기능은 다음과 같다. 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..

frontend

Critical Rendering Path 보기

😐Critical Rendering Path란? MDN의 정의에 따르면 Critical Rendring Path는 브라우저가 HTML, CSS , JavaScript를 화면의 픽셀로 변환하기 위해 거치는 일련의 단계를 뜻합니다. 이 Critical Rendering Path를 최적화하면 렌더링 성능이 향상됩니다. 또한 Critical Rendering Path에 해당되는 것으로는 DOM , CSSOM, 렌더링트리, 레이아웃이 있습니다. 😑DOM?? Document Object Model의 줄임말로 HTML이 파싱될때 생성됩니다. HTML은 JavaScript를 요청할 수 있고 JavaScript는 차례로 DOM을 변경할 수 있습니다. 🤣Critical Rendering Path에 대한 이해 웹의 성능을 ..

냠냠맨
'frontend' 카테고리의 글 목록 (4 Page)