기록창고

1. 개요 얼마 전에 작성하였던 엑셀 다운로드 기능에 이어서, 엑셀 업로드 기능을 간단히 구현해보았다. 2. 작성한 코드 및 실행 흐름 엑셀 업로드 기능을 구현하기 위해 react-dropzone 라이브러리와 xlsx 라이브러리를 이용하였다. 2-1. 엑셀 업로드import { cloneDeep, isUndefined } from "lodash";import { Dispatch, SetStateAction, useState } from "react";import Dropzone, { Accept } from "react-dropzone";import styled from "styled-components";import * as XLSX from "xlsx";import { IData } from "../..

1. 개요 리액트로 작업할 때, 만들어진지 좀 된 컴포넌트를 수정해야하는 경우가 자주 있다. 그리고 이런 컴포넌트들 중에는 함수형 컴포넌트가 아닌, 클래스형 컴포넌트로 구성된 것들이 꽤나 많다. 리액트의 생명주기, 생명주기 메서드에 대해서 이론적으로 배운 적은 있어도 실제로 클래스형 컴포넌트를 접하고 작업한지는 오래되지 않았기에, 가끔 각 메서드에 대해 헷갈릴 때가 있다. 그렇기에 자주 사용되는 메서드를 간단하게 기록해보려고 한다. 2. componentDidMount() 컴포넌트가 마운트된(처음 화면에 렌더링된) 직후 실행된다. 즉, 처음 한 번만 실행된다.주로 API 요청을 보내거나, DOM을 조작하거나, 여러 비동기 작업을 실행하거나, 이벤트 리스너를 등록하는 데에 이용된다.예시 코드class My..

HTML 삽입 미리보기할 수 없는 소스 리팩토링을 위해 React 프로젝트에 MongoDB와 AWS S3를 적용하기로 하였다. 기존에는 로컬에 저장을 했었는데 아무리 봐도 이건 좀 아니다 싶었다. 그래서 이미지는 S3에, 나머지는 MongoDB에 저장할 것이다. 이를 위해 구글링으로 관련 글들을 찾아본 후 연결에 성공했다. 이 글은 적용하기까지의 과정을 기록하는 글이다. 1. MongoDB 적용하기 1-1. 데이터베이스 만들기 우선 몽고db에서 데이터베이스를 만들어야 한다. 나는 이미 만들어져 있던 데이터베이스를 이용하였다. 처음부터 데이터베이스를 만드는 과정은 이 글의 제일 하단의 '참고한 글'에서 확인할 수 있다. 데이터베이스를 만들었다. 이제 서버와 이것을 연결해야 한다. 서버는 Express를 이..

1. Redux Redux는 상태 관리 라이브러리 중 하나. 전역 상태를 관리할 수 있는 저장소인 Store를 제공함. Redux의 상태 관리 순서 (Action -> Dispatch -> Reducer -> Store) 상태가 변경되어야 하는 이벤트가 발생하면, 변경될 상태에 대한 정보가 담긴 Action 객체가 생성됨. 이 Action 객체는 Dispatch 함수의 인자로 전달됨 Dispatch 함수는 Action 객체를 Reducer 함수로 전달해줌 Reducer 함수는 Action 객체의 값을 확인하고, 그 값에 따라 전역 상태 저장소 Store의 상태를 변경함 상태가 변경되면, React는 화면을 다시 렌더링함. 2. Store 상태가 관리되는 오직 하나뿐인 저장소 역할 createStore 메..

1. 상태관리 상태(state): UI에 동적으로 표현될 데이터 Side Effect: 함수의 입력 외에도 함수의 결과에 영향을 미치는 요인. 예를 들어 네트워크 요청, API 호출 등이 있다. React의 주요 개발 원칙 중 하나는 UI를 페이지 단위가 아닌 컴포넌트 단위로 보는 것(컴포넌트 우선 개발 방식)이다. 로컬 상태: 특정 컴포넌트 안에서만 관리되는 상태 전역 상태: 프로덕트 전체 혹은 여러 컴포넌트에서 관리되는 상태 데이터 무결성: 데이터의 정확성을 보장하기 위해 데이터의 변경이나 수정 시 제한을 두어 안정성을 저해하는 요소를 막고 데이터 상태를 항상 옳게 유지하는 것. Single source of truth, 동일한 데이터는 항상 같은 곳에서 데이터를 가지고 온다. 데이터 무결성을 위해 ..