본문 바로가기

리액트10

ESLint( 뜻,기능,사용하는 이유,자주 사용 규칙,플러그인,airbnb ESLint) 총정리 JavaScript 개발에서 깨끗하고 일관된, 오류 없는 코드를 유지하는 것은 매우 중요합니다.이때 ESLint가 큰 도움을 줄 수 있습니다. ESLint는 개발자가 JavaScript 코드를 검사하고 문제를 찾아내며, 최선의 관행과 코딩 표준을 준수하도록 돕는 강력한 오픈 소스 도구입니다. ESLint란 무엇인가요?먼저 ESLint는 ES 와 Lint를 합친 것입니다.ES는 Ecma Script로서, Javascript를 의미합니다.Lint는 에러가 있는 코드에 표시를 달아놓는 것을 의미합니다. ESLint는 JavaScript 생태계에서 사용되는 정적 코드 분석 도구입니다.JavaScript(또는 JSX, TypeScript)를 분석하여 오류, 잠재적 버그, 스타일 문제를 찾아내고, 특정 코딩 관행을.. 2024. 8. 19.

React에서 바텀시트(Bottom Sheet) 구현하기: 상세 가이드 프로젝트를 하던 중에 디자이너분께서 바텀시트 기능이 추가되어 개발을 하게되었다.사실 처음에는 라이브러리가 있을 줄 알고 큰 걱정안하고 기간안에 가능하다고 답변을 드렸다.하지만 찾아보니 라이브러리가 없는 상황이어서 내가 직접 개발해야 되는 상황이 됐다.일단 나의 영원한 친구 GPT의 도움을 받아 어찌저찌 구현은 성공했는데 뭔가 부족해서 없애고 구글링으로 서칭 후 재 개발 하게됐다. 이글은 나 같은 분들이 조금이나마 개발의 편의를 제공하기 위해 쓴다.먼저 구현하는데 큰 도움을 주신 개발자 Boris님, Wayne Kim 그리고 최종 문제에 인사이트를 주신 스터디를 같이 하고 있는 B님께 먼저 감사말씀을 올립니다. 나는 두분이 올려주신글을 참고하여 구현에 성공할 수 있었다.두분이 올려주신 코드를 고대로 활용.. 2024. 6. 30.

사내 칸반보드 개발 프로젝트 -3 스타트업 프론트개발자의 칸반보드 풀스택개발기 사내 칸반보드 개발 프로젝트 -22024.05.15 - [개발] - 사내 칸반보드 개발 프로젝트 -1포부를 밝혔던 1편에이어 이제 진짜 코드가 들어가는 2편이 시작된다.빠르게 설명부터 들어가자 칸반보드의 핵심의 첫번째는 바로 드래그앤sancho216.tistory.com 오늘은 칸반보드의 글을 작성하는 글을 넣어본다 !!그래서 editor를 찾아보았는데 제일 많이 사용하는 에디터인 React-Quill 를 선택했다.내가 사용해보기도 만족도가 높았던 에디터였다. react-quillThe Quill rich-text editor as a React component.. Latest version: 2.0.0, last published: 2 years ago.. 2024. 5. 22.

사내 칸반보드 개발 프로젝트 -2 2024.05.15 - [개발] - 사내 칸반보드 개발 프로젝트 -1포부를 밝혔던 1편에이어 이제 진짜 코드가 들어가는 2편이 시작된다.빠르게 설명부터 들어가자 칸반보드의 핵심의 첫번째는 바로 드래그앤 드롭 기능 구현이다.구글링 해보니 대부분 라이브러리 react-beautiful-dnd 를 사용해서 구현하고 있었다.나는 라이브러리를 사용하기 보다 직접 구현하고 싶어 사용하지 않기로 했다.나에게는 chat gpt가 있으니 말이다.코드를 보여주기전에 나의 스택을 나열하면 1. react2. tailwind3. style-components를 사용했다. css 라이브러리를 특이하게 두개나 사용하는데 taillwind 는 보통 엘레멘트 css 용도로 사용하고 스타일 컴포넌트는 컴포넌트를 만들때 주로 사용한다... 2024. 5. 16.

리액트 버전 변경하기 프로젝트 진행 중 에러가 발생했는데, 리액트 버전 때문에 발생한 에러였다. 일단 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.

이전 1 2 다음

티스토리툴바