반응형 리액트9 리액트로 BottomSheet 개발하기: 가이드와 팁 프로젝트를 하던 중에 디자이너분께서 바텀시트 기능이 추가되어 개발을 하게되었다.사실 처음에는 라이브러리가 있을 줄 알고 큰 걱정안하고 기간안에 가능하다고 답변을 드렸다.하지만 찾아보니 라이브러리가 없는 상황이어서 내가 직접 개발해야 되는 상황이 됐다.일단 나의 영원한 친구 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. (React)카운터 Redux로 만들기 - 5 가장 기본 예제인 카운터를 redux를 이용해 만들어 볼 거다 항상 리덕스를 사용할 줄 모르는 것에 부끄러움이 가득했는데 이번 기회에 타파할 예정이다. 참고 유데미 강의 React 완벽 가이드 with Redux, Next.js, TypeScript (React)카운터 Redux로 만들기 - 4 가장 기본 예제인 카운터를 redux를 이용해 만들어 볼 거다 항상 리덕스를 사용할 줄 모르는 것에 부끄러움이 가득했는데 이번 기회에 타파할 예정이다. 참고 유데미 강의 React 완벽 가이드 with Red sancho216.tistory.com 그전 코드는 위에 글을 가면 확인할 수 있습니다. 이번글에서 카운터를 보여줬다고, 숨겼다가 하는 기능을 추가할 예정이다. Counter.js import { legac.. 2022. 6. 24. 이전 1 2 다음 반응형
