React

반응형 UI를 간단히 구현하기 위해 Tailwind CSS를 설치해보자. https://tailwindcss.com/ Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML. tailwindcss.com ⭐️ 설치 npm install -D tailwindcss 여기서 -D 옵션을 사용하는 이유는 프로덕션 환경에서는 사용하지 않고, 프로젝트의 디자인을 하는 개발 도구로 사용하겠다는 의미이다. 이런걸 개발 의존성으로만 설치한..

⭐ react-hook-form? 로그인, 회원가입 등 form을 사용해서 기능을 구현해 본 경험이 다들 있을 것이다. useState도 계속 사용해야 하고, onChange로 input 값을 확인하는 등 ... 번거롭고 은근 까다로운 작업이다. 이런 작업들을 react-hook-form 라이브러리를 사용하면 간단하고 효율적으로 할 수 있다! 공식문서는 아래 링크 첨부! https://react-hook-form.com/ ⭐ 설치방법 npm install react-hook-form or yarn add react-hook-form 위의 명령어로 설치해주고 import { useForm } from "react-hook-form"; 사용하고 싶은 곳에서 import 해주면 됨! ⭐ useForm 객체 r..

⭐ Redux-Logger란? Redux를 통해 개발할 때, reducer 실행 전후 값을 로그로 확인할 수 있게 해주는 미들웨어 ⭐ 설치방법 npm i redux-logger ⭐ 사용방법 간단하게 스토어에 logger를 추가해주기만 하면 된다. import { createStore } from "redux"; import { combineReducers } from "redux"; const rootReducer = combineReducers({}); const store = createStore(rootReducer); export default store; 위의 코드에서 아래처럼 수정만 해주면 된다. import { createStore, applyMiddleware } from "redux";/..

⭐ 설치방법 npm i redux react-redux npm i redux ✔️ 프로젝트 구조 redux 폴더 - 리덕스 관련 파일 저장 config 폴더 - 리덕스 설정 관련 파일 저장 configStore - 상태 관리하는 곳. rootReducer 존재함 modules 폴더 - 기능별로 나눠서 저장 ⭐기본세팅 ✔️ /src/redux/config/configStore.js import { createStore } from "redux"; import { combineReducers } from "redux"; const rootReducer = combineReducers({}); const store = createStore(rootReducer); export default store; cre..

⭐ Redux와 React Redux에 대해 설명하기 전에 Redux와 React의 관계에 대해 먼저 알고 가자! Redux는 상태 관리 라이브러리이다. 지금까지 "Redux는 React에서 쓰는 라이브러리다"라고 알고 있었는데 잘못된 지식이였다.. Redux는 JavaScript의 상태 관리 라이브러리 중 하나일뿐, React에 종속된 기술이 아니다!! React Redux라는 React 전용 상태 관리 라이브러리가 따로 존재한다. 이 글에서는 React Redux에 대해 설명할 것이다. 아래에서 Redux라 부르는 것은 모두 React Redux다!! ⭐ 그래서 Redux란? React에서 state는 컴포넌트 안에서 관리 되는데, 자식 컴포넌트끼리는 데이터를 주고 받을 수 없어서 부모 컴포넌트를 거..

Axios란? React에서 AJAX를 구현하려면 JS 내장객체인 XMLRequest를 사용하거나, 다른 HTTP Client를 사용해야함 (HTTP Client - HTTP 상에서 커뮤니케이션하는 자바 기반 컴포넌트) (AJAX - JS를 사용한 비동기 통신, 클라이언트와 서버 간에 XML 데이터를 주고받는 기능) HTTP Client 라이브러리에는 Fetch API, Axios가 있음 Axios 사용법 • GET: 입력한 URL에 존재하는 자원에 요청 axios.get(url[, config]) 주소에 있는 쿼리스트링을 활용해서 정보를 전달, 값이나 상태를 바꿀 때 사용 X www.server.com/login?id=a&pw=123 이런 식으로 쿼리스트링이 붙여짐 • Post: 새로운 리소스를 생성할..