하이고니의 개발 스토리

아래 사진과 같은 구조의 React 애플리케이션이 있다고 하자. 이 애플리케이션에는 컴포넌트 3, 컴포넌트 6에서만 사용되는 상태가 있다. 그렇다면 이 상태는 어느 컴포넌트에 위치시켜야 할까? React 데이터 흐름에 따르면, 상태를 최상위 컴포넌트에 위치시키는 것이 가장 적절할 것이다. 하지만 이런 상태 배치는 다음과 같은 이유로 다소 비효율적으로 느껴질 수 있다. 1. 해당 상태를 직접 사용하지 않는 최상위 컴포넌트, 컴포넌트 1, 컴포넌트 2도 상태 데이터를 가짐 2. 상태 끌어올리기, Props 내려주기를 여러 번 거쳐야 함 3. 애플리케이션이 복잡해질수록 데이터의 흐름도 복잡해짐 4. 컴포넌트 구조가 바뀌면, 지금의 데이터 흐름을 완전히 바꿔야 할 수도 있음 Redux는 전역 상태를 관리할 수 ..

Modal 모달은 기존에 이용하던 화면 위에 오버레이되는 창을 말한다. 닫기 버튼, 혹은 모달 범위 밖을 클릭하면 모달이 닫히는 것이 일반적이며, 모달을 닫기 전에는 기존 화면과 상호작용할 수 없다. 1. ModalBtn을 클릭하면 ModalBackdrop + ModalView가 보여야 한다. 1-1. isOpen으로 열리고 닫히는 상태를 관리한다. 1-2. openModalHandler라는 함수로 isOpen 의 boolean 값을 관리한다. 2. ModalView는 ModalBackdrop에 포함된 요소다. 3. ModalView의 x버튼을 누르거나, ModalBackdrop을 누르면 모달창이 꺼진다. import { useState } from "react"; import styled from "s..

데이터베이스는 없음. 서버에 데이터 두고 axios로 GET, POST, PUT, DELETE 요리조리 해봤다. 서버부터 복기해봅시다. 서버 app.js const express = require('express'); const app = express(); const cors = require('cors'); const morgan = require('morgan'); app.use(morgan('tiny')); app.use(cors()); app.use(express.json()); const port = 4000; const discussionsRouter = require('./router/discussions'); const { addHook } = require('dompurify'); ap..