react

[React] 파일 경로를 깔끔하게 정리하기

프로젝트의 규모가 커지다보면 가장 먼저 드는 생각이 파일들의 효율적인 정리이다. 정리할 수 있는 유용하지만 간단한 방법을 알아보자. 부모 폴더가 같은 Components import { SignInModalBox } from "./SignPage/SignInModal"; import { SignUpModalBox } from "./SignPage/SignUpModal"; import { useTable } from "./Hooks/useTable"; import { useConfiguration } from "./Hooks/useConfiguration"; 이 처럼 부모 폴더가 같은 컴포넌트를 사용할 때, 컴포넌트 하나 당 import 구문이 한 줄씩 추가된다. 이를 정리하기 위해 index.js(ts)..

[React] Redux Thunk (미들웨어)

MiddleWare MiddleWare는 Redux의 핵심적인 기능으로 액션과 Reducer 프로세스 사이에 위치하며, 액션이 dispatch 된 후 MiddleWare를 통해 비동기 작업을 처리하고 이 후 Reducer로 작업 결과를 보내준다. 쉽게, 본래 dispatch는 액션만을 받을 수 있지만, MiddleWare를 사용하면 함수를 입력받을 수 있다. 기본 형태 import { createStore, applyMiddleware } from 'redux'; const middleWare = (store) => (next) => (action) => { //다음 MiddleWare로 액션을 전달해준다. //만약 다음 MiddleWare가 없다면 Reducer로 액션을 전달한다. //next()를 사..

[React] Redux 이해하기

Redux는 Context API를 기반으로 만들어진 상태 관리 라이브러리로 reducer와 action이라는 개념 또한 존재해 상당히 유사하다. 프로젝트의 규모에 따라 Context API만으로도 충분하다. Context API와의 차이점 Context API와의 주된 차이점은 미들웨어이다. 미들웨어는 Action 객체가 Reducer에서 처리되기 전에 원하는 작업을 수행할 수 있다. 액션이 무시되게 하거나 액션 발생시 다른 액션을 발생, 서버에 로깅 등을 하는 등 비동기 처리를 할 수 있게 한다. 그리고 useSelector, useDispatch, useStore와 같은 Hooks를 사용할 수 있다. 마지막으로 Context API와는 다르게 모든 글로벌 상태를 하나의 객체에서 관리할 수 있다. 구..

웹사이트 성능 최적화하기 with LightHouse

웹 개발 에서는 특히 성능이 중요하다. 어떤 부분이 개발한 웹에서 부족한지, 보완할 점은 무엇인지를 알기 위해 성능 측정을 해보자. LightHouse 구글에서 개발한 웹 성능 측정기이다. 크롬의 개발자도구에 기본으로 내장되어 있어 F12 - LightHouse로 작동시킬 수 있다. 성능 측정 한창 프로젝트로 진행 중인 웹사이트를 측정해보았다. 성능과 접근성이 상당히 낮게 나온다. 아래쪽에서 원인과 해결 방법을 상세하게 알려준다. 따라서 한번 수정해보자. 성능 향상 Reduce unused JavaScript React는 기본적으로 SPA(Single Page Application)이다. 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 변경하며 표현하는 것이다. 이러한 동작을 위해 하나의..

[React] 최신 Firebase Real-Time DB 사용하기

Firestore와 Real-Time DB의 차이점은 아래 글에 간략하게 정리되어있다. [React] 최신 Firebase Firestore 사용하기 Firebase의 기본 설정이 필요하다면 아래 글을 참고하길 바란다. [React] 최신 Firebase에서 로그인 구현하기 React의 Firebase 라이브러리가 업데이트 되면서 함수를 호출하는 방식이 바뀌었다. 거의 필수 muhly.tistory.com Real-Time DB는 doc, collection 두 가지가 존재하는 Firestore와는 다르게 ref라는 하나의 함수만 사용한다. 경로 선언 import { push, ref, limitToLast, onValue, orderByChild, query, remove, } from "@fireba..