전체 글39 Redux Redux Redux는 JavaScript 상태 관리 라이브러리이다. Redux의 본질은 Node.js 모듈이다. Redux의 기본 원칙 1. Single source of truth 동일한 데이터는 항상 같은 곳에서 가지고 온다. 스토어라는 하나뿐인 데이터 공간이 있다는 의미이다. 2. State is read-only 리액트에서는 setState를 활용해야만 상태 변경이 가능하다. 리덕스에서도 액션이라는 객체를 통해서만 상태를 변경할 수 있다. 3. Changes are made with pure functions 변경은 순수함수로만 가능하다. 리듀서와 연관되는 개념이다. Store(스토어) – Action(액션) – Reducer(리듀서) Store Store에서 상태를 관리하고 오직 하나만 존재한.. 2022. 12. 20. MySQL 연동 1. MySQL Workbench 설치 https://dev.mysql.com/downloads/workbench/ MySQL :: Download MySQL Workbench Select Operating System: Select Operating System… Microsoft Windows Ubuntu Linux Red Hat Enterprise Linux / Oracle Linux Fedora macOS Source Code Select OS Version: All Windows (x86, 64-bit) Recommended Download: Other Downloads: Windows (x86, 64-bit), M dev.mysql.com 2. Node.js(Express)와 연동 2022. 9. 20. MVC 디자인 패턴 MVC란 Model View Controller의 약자로 애플리케이션을 세 가지의 역할로 구분한 개발 방법론이다. 사용자가 Controller를 조작하면 Controller는 Model을 통해서 데이터를 가져오고 그 정보를 바탕으로 시각적인 표현을 담당하는 View를 제어해서 사용자에게 전달하게 된다. 1. Model 데이터 처리 역할이다. Database와 소통한다. Controller에게 데이터를 전달한다. View와 직접 소통하는 일은 없다. 2. View 유저에게 화면을 보여주는 역할이다. 데이터를 받고 그리는 역할을 수행한다. Model과 소통하지 않고 Controller와 소통한다. Controller에게 액션이나 데이터를 전달하고 전달받기만 한다. 3. Controller View에서 액션과.. 2022. 9. 20. Express 연동 Express는 Node.js의 핵심 모듈인 http와 connect 컴포넌트를 기반으로 하는 웹 프레임워크로, 개발을 빠르고 손쉽게 할 수 있도록 도와주는 역할을 한다. 이는 미들웨어 구조 때문에 가능한 것. 미들웨어 함수는 요청 오브젝트(req)와 응답 오브젝트(res), 그리고 애플리케이션 요청-응답 사이클 도중 그다음의 미들웨어 함수에 대한 액세스 권한을 갖는 함수이다. 간단하게 말하면 미들웨어란 클라이언트에게 요청이 오고, 그 요청을 보내기 위해 응답하려는 중간(미들)에 목적에 맞게 처리를 하는, 거쳐가는 함수들이라고 볼 수 있겠다. 1. Express 환경설정 Node.js 설치 https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime .. 2022. 9. 15. Day 6 1. Refactoring HomeHeader.jsx Before /Home/Header.jsx import { useEffect, useState } from "react"; import { Link, useNavigate } from "react-router-dom"; import { Grid, Typography } from "@mui/material"; import IconButton from '@mui/material/IconButton'; import AddCircleIcon from '@mui/icons-material/AddCircle'; import { getDocs, query, collection, where } from "firebase/firestore"; import {db} f.. 2022. 8. 25. React-Query 1. React-Query란 React-Query는 서버에서 데이터를 클라이언트에 가져오거나, 캐싱, 값 업데이트, 에러핸들링 등 비동기 과정을 더욱 편하게 하는데 사용된다. 2. React-Query 장점 여러가지 장점이 있지만 주로 아래와 같이 프론트 개발자가 구현하기 귀찮은 일들을 수행한다. 캐싱 get을 한 데이터에 대해 update를 하면 자동으로 get을 다시 수행한다. (예를 들면 게시판의 글을 가져왔을 때 게시판의 글을 생성하면 게시판 글을 get하는 api를 자동으로 실행 ) 데이터가 오래 되었다고 판단되면 다시 get (invalidateQueries) 동일 데이터를 여러번 요청하면 한번만 요청한다. (옵션에 따라 중복 호출 허용 시간 조절 가능) 무한 스크롤 비동기 과정을 선언적으로 .. 2022. 8. 25. 이전 1 2 3 4 5 6 7 다음
