본문 바로가기
반응형

react10

ESLint( 뜻,기능,사용하는 이유,자주 사용 규칙,플러그인,airbnb ESLint) 총정리 JavaScript 개발에서 깨끗하고 일관된, 오류 없는 코드를 유지하는 것은 매우 중요합니다.이때 ESLint가 큰 도움을 줄 수 있습니다. ESLint는 개발자가 JavaScript 코드를 검사하고 문제를 찾아내며, 최선의 관행과 코딩 표준을 준수하도록 돕는 강력한 오픈 소스 도구입니다. ESLint란 무엇인가요?먼저 ESLint는 ES 와 Lint를 합친 것입니다.ES는 Ecma Script로서, Javascript를 의미합니다.Lint는 에러가 있는 코드에 표시를 달아놓는 것을 의미합니다. ESLint는 JavaScript 생태계에서 사용되는 정적 코드 분석 도구입니다.JavaScript(또는 JSX, TypeScript)를 분석하여 오류, 잠재적 버그, 스타일 문제를 찾아내고, 특정 코딩 관행을.. 2024. 8. 19.
Barrel export 패턴으로 import 깔끔하게 정리하기,react 리팩토링,가독성 높이기,index로 파일관리하기 개발를 하다보면 코드가 길어지는 데 그러면 어느순간 코딩하는게 불필요한 에너지를 소모하게 된다.그럼 당연하게 생산성 저하로 이어진다.자연스럽게 효율적인 방법을 생각하고 구글링 하게 된다.import 부분을 불러오다 보면 길어지는데 템플릿을 보다가 발견한 방법이다.오늘 방법은 mui 템플릿을 쓰다가 발견한 방법이다.  패턴이름 알게된 방법사실 이 방법이 어떤 이름인지 몰라 gpt한테 물어봤더니 역시 똑똑하게 답변을 줬다. GPT 답변React 프로젝트에서 여러 컴포넌트를 한 줄로 깔끔하게 정리하여 불러오기 위해 index.js 파일을 사용합니다. 이를 통해 여러 컴포넌트를 한 파일에서 한꺼번에 불러올 수 있어 코드의 가독성과 관리가 쉬워집니다. 이런 작업을 "통합 파일" 또는 "배럴 파일(barrel fi.. 2024. 7. 27.
tailwind css prettierrc 적용하기 tailwind css prettierrc 적용기 ~ 많은 개발자들이 깔끔한 코드를 위해 prettierrc 사용하죠 ~~그리고 요즘 프론트 개발자들이 많이 사용하는 tailwind !!!단점이라면 class 에 넣다보면 규칙성 없이 적용해 지저분하죠 !! 그것을 단번에 해결할 수 있는 방법은 바로 tailwind css prettierrc 적용하면 됩니다. 일단 공식문서링크https://tailwindcss.com/blog/automatic-class-sorting-with-prettier Automatic Class Sorting with Prettier - Tailwind CSSPeople have been talking about the best way to sort your utility cla.. 2024. 5. 10.
[React] 뽀모도로 개발 일기 - 1 10년전 까까머리 고등학생들, 미국 횡단을 결정하다.모든 일이 생각보다 거창하지 않게 시작하는 경우가 많다. 이번에 가는 여행도 퇴근길에 나와 민창이 그냥 전화 한 통으로 시작됐다(믿기지 않겠지만) 통화내용은 우리가 고등학교 때부터 같이sancho216.tistory.com미국을 다녀온 후 1달이 지난 지금  원래 집중력이 좋은 사람이 아닌데 집중력이 더 약해진 것 같은 느낌이 들어환경적인요인을 강화하려고 몇가지들 결정했습니다.그리고 개발자인만큼 개발실력이 늘지않고 퇴화되는 느낌이 너무너무 강하게 들어.......정신차리자는 의미에서 뽀모도로 타이머를 직접 개발하고 배포까지 해보려고 합니다. 배포도 클라우드를 이용해서 한번 해보려고 합니다. 환경 생성1. 미국 가기전에 했던 스터디 재 참가( 심지어 카톡.. 2023. 3. 9.
리액트 버전 변경하기 프로젝트 진행 중 에러가 발생했는데, 리액트 버전 때문에 발생한 에러였다. 일단 npx-create-react-app [폴더이름] 을 통해 폴더를 만듭니다. 처음 package.json 지금 보면 react,react-dom이 17.0.2 버전인 것을 확인 할 수 있다. 버전 변경은 생각보다 한줄만 쓰면 어렵게 않게 할 수 있습니다. npm install react@^[버전 정보] react-dom@[버전 정보] 터미널에서 위의 코드를 쓰면 버전 변경이 가능합니다. 변경 후 package.json 리액트 버전이 16.14.0으로 바뀐 것을 확인 할 수 있습니다. 에러 발생 위에 사진처럼 에러 발생 해 구글링중에 버전 문제인 것을 알게되 블로그 작성까지 이끌게 되었다. 사실 지금 적용한 라이브러리가 내가 .. 2022. 7. 1.
(React)카운터 Redux로 만들기 - 6 가장 기본 예제인 카운터를 redux를 이용해 만들어 볼 거다 항상 리덕스를 사용할 줄 모르는 것에 부끄러움이 가득했는데 이번 기회에 타파할 예정이다. 참고 유데미 강의React 완벽 가이드 with Redux, Next.js, TypeScript 이번강의에서는 Redux에서 ReduxToolkit를 활용해 코드를 리팩토링 할 예정이다. ReduxToolkit은 리덕스의 몇가지 특징을 단순환 시킨 라이브러리라고 생각하면 편하다. 기존 index.js import { legacy_createStore } from 'redux'; const initialState = { counter: 0, counterShow: true }; const counterReducer = (state = initialState.. 2022. 6. 24.
반응형

티스토리툴바