React/리액트를 다루는 기술

● Vite 환경에서 eslint, prettier 적용해보기 (airbnb 모드로 설정하기) 먼저 vite 프로젝트를 설치해주었습니다. npm create vite@latest ❍ eslint 적용하기 vite를 설치하고 나니까 기본적으로 eslint가 적용되어 있었는데요, eslint의 기본설정인 eslint:recommended와 react환경과 관련된 플러그인들이 extends에 설정되어있었습니다. eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-react-refresh 대체 이 플러그인들이 무엇인가.. 현타가 왓읍니다.. eslint:recommended는 초기 설정입니다. eslint-plugin-react : eslint에 대한 리..

솔로 프로젝트 리팩토링 중, 리듀서 함수는 순수해야하기 때문에 useEffect에서 fetch를 통해 처음에 데이터를 받아오고 성공 했을 시, 리듀서함수에 액션에 데이터를 담아 dispatch 해주었습니다. export default function useFetch(initialUrl: string){ const dispatch = useDispatch(); const [url, setUrl] = useState(initialUrl); const [data, setData] = useState([]); const fetchData = async () => { fetch(url)// .then(res => res.json()) .then(data => { const newData = getLocalStor..

진짜오늘 종일 CRA구축하는 거만 했네욤.. 계속 에러뜨고 이쥐랄 나서.. 힘들었습니다. 최대한 자세히 적으려고 했고.. 좋은 블로그.. 디테일한 설명들을 찾아서 포스팅해봅니다.. 먼저 프로젝트가 될 디렉토리를 만들고, npm init -y를 해준다. npm init -y 그러면 package.json 파일이 생기게 된다. ● 작업에 필요한 폴더 만들기 먼저 리액트 환경과 매우 비슷하게 만들 것이므로, src, public, 그리고 빌드가 되었을 때 파일이 저장될 dist 파일을 만든다. mkdir src public dist src : react 작업을 할 폴더 public : 정적 파일이 위치할 폴더 dist : 빌드한 작업물이 들어갈 폴더 → 배포란 뜻으로 distribute를 의미한다 다음 pub..

빌드 하셨어염? 우리는 리액트 프로젝트를 완성하고, 사용자에게 제공할 때는 빌드 과정을 거쳐서 배포를 하게 됩니다. 빌드를 하는 과정 속에는 자바스크립트 파일 안에 불필요한 공백, 주석, 경고메시 등을 제거해 파일 크기를 최소화하기도 하고 JSX 문법이나 최신 자바스크립트 문법이 원활하게 실행되도록 Babel을 활용해 트랜스 파일 작업도 할 수 있죠. 이 작업은 웹팩이라는 도구가 담당하고 있습니다. 웹팩에서 별도의 설정을 하지 않으면 프로젝트에서 사용 중인 모든 자바스크립트 파일이 하나로 합쳐지게 됩니다. CRA(create-react-app)로 프로젝트를 빌드할 경우 기본 웹팩 설정에는 SplitChunks라는 node_modules에서 불러온 파일, 일정 크기 이상의 파일, 여러 파일 간에 공유된 파..

이제.. redux-saga를 맛봐야할 차례가 되엇네염.. 어제 thunk를 공부하면서 도무지 이해가 되지않아.. 그리고 왜 success니 failure니 뭐니 이딴거를 왜 설정하니.. 이해가 되지 않아.. 포기하고싶었으며.. 이해가 되지 않았으며.. 버리고싶었읍니다.. 그래.. 리듀서 함수 내에서 비동기 로직 못쓰니까 thunk 쓰는구나. 그래 알겟는데 왜.. success, failure 이런 성공 실패 구분을 나누지? 싶었습니다. 하지만 비동기 로직을 짤 때 원래 try와 catch문을 쓰는 것은 일반적인 로직이고.. thunk에서 dispatch를 받아오는 이유와 (왜받아와서 왰즤?라는의문이 들었었기에..) 그리고 Promise의 구현을 thunk에서 하는 것이라고 깨우치고 난 뒤 조금 이해가 ..

리덕스.. 부터 react-redux, RTK까지 .. 오느라 참 힘들었씁니다.. 이게 2주나 걸릴 줄이야.. 우리는 리덕스의 3가지 규칙을 배웠습니다. 상태는 read-only이다. 하나의 애플리케이션에는 스토어가 1개이다. (리듀서도.. 1개이다. 실은combine해주니까) 리듀서는 순수 함수이다. 우리는 store에 상태를 변환시키기 위한 로직을 리듀서 함수내에서 적어줬었죠, 툴킷을 쓰기 이전에는 switch 문으로 action.type을 나눠서 로직을 적고, 툴킷을 쓰게 된다면 reducers라는 객체에 로직을 적어주었습니다. 하지만 리듀서함수는 순수함수여야한다고 했습니다. 따라서 비동기적인 로직은 리듀서 함수에 적을 수 없습니다.. 않의 그럼 어케 이거 비동기 처리 할 수 있다는 고임? 따라서 ..