Front-End

    recoil을 사용한 전역 모달 관리(with TypeScript)
    Front-End/React

    recoil을 사용한 전역 모달 관리(with TypeScript)

    이전 포스팅에서 context API, redux를 사용한 모달 관리에 대해서 소개했었다. // store/modalSlice.js import { createSlice } from "@reduxjs/toolkit"; const initialState = []; export const modalSelector = (state) => state.modal; export const modalSlice = createSlice({ name: "modal", initialState, reducers: { openModal: (state, action) => { const { type, props } = action.payload; return state.concat({ type, props }); }, clos..

    react-query는 어떻게 작동할까
    Front-End/React

    react-query는 어떻게 작동할까

    QueryClient react-query를 프로젝트에 셋팅할 때, 가장 먼저 하는 것은 앱의 최상위에서 QueryClientProvider로 우리의 앱을 감싸주는 일이다. import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; ... const queryClient = new QueryClient(); function Root() { return ( ); } 우리는 먼저 새로운 QueryClient인스턴스를 생성하고, QueryClientProvider를 통해 앱 전체에서 생성한 QueryClient에 접근 가능하도록 해준다. 이 QueryClient는 단순하게 표현하자면 QueryCache와 MutationCache를 담는 ..

    React-saga를 통해 axios 호출 취소하기
    Front-End/React

    React-saga를 통해 axios 호출 취소하기

    회사 프로젝트에서 특정 수치를 조회하기 위해 사용하는 API가 있다. 이 API는 상황에 따라서 호출 시간이 오래 걸리고, 조회 항목이 많아질수록 호출 시간이 길어진다. 만약 사용자가 수치를 조회하는 중 화면을 나간다면, 수치 조회 API는 여전히 Pending 중이기 때문에 그 영향으로 새로 렌더링 되는 화면의 로딩이 길어지게 된다. 수치 조회 API의 응답을 기다리는 중 현재 페이지가 unmount된다면, 해당 API 호출을 취소하여 불필요한 데이터 호출을 막고, UX를 개선하려 한다. 현재 프로젝트에서 비동기 통신 라이브러리는 axios 사용, 비동기 로직은 react-saga 로 관리 중이다. 따라서 이 글에서는 이 두 라이브러리를 사용하여 API 호출을 취소하는 방법을 다룬다. Axios의 취소..

    [React] CRA에서 Path alias 설정하기
    Front-End/React

    [React] CRA에서 Path alias 설정하기

    (2022.02.14 수정) 이전 프로젝트에서는 괜찮았으나, 이번 React-Query 프로젝트에서는 Atomic system에서 착안한 새로운 폴더 구조를 시도해본 만큼 코드 상단의 무수한 ../../../ 들이 신경 쓰이기 시작했다. 그동안 미뤄왔던 path alias를 설정을 드디어 프로젝트에 적용했고, 그 과정을 여기에 기록해보려 한다. (‘미루고 미루다가 드디어 적용한 것’이라 말하니 뭔가 엄청난 작업을 해야 할 것 같지만 사실 설정은 매우 간단하다.) Path Alias란 path alias는 경로에 별칭을 붙인다는 뜻으로, path alias를 사용하면 "../../../hooks/quires/useMovieDetail"과 같은 경로를 "@hooks/quires/useMovieDetail" ..

    [React] 효율적으로 모달 관리하기
    Front-End/React

    [React] 효율적으로 모달 관리하기

    무려 3개월 만에 돌아왔습니다... 이 글은 Portal을 사용한 모달창 만들기에서 이어집니다. 모달을 필요한 컴포넌트에서 그때그때 렌더링 하는 방법은 불필요한 코드를 늘리며, 각각의 컴포넌트에서 모달에 관련된 로직까지 담당하게 되어 컴포넌트의 단일 책임 원칙을 위반한다. 모달의 상태를 전역으로 관리하여 필요한 곳에서 호출만 해주면 되도록 변경한다면 위에서 언급한 문제점들을 해결할 수 있다. 먼저 context API를 사용한 방법, 그리고 Redux를 사용한 방법에 대해서 차례대로 알아보자. 1️⃣ context API를 사용한 모달 관리 // context/ModalProvider.js import React, { useState } from "react"; export const ModalState..

    [React] 다크모드 적용하기 ( with. Styled-component, Context API)
    Front-End/React

    [React] 다크모드 적용하기 ( with. Styled-component, Context API)

    다크 모드는 어두운 배경을 중심으로 전반적인 요소를 어두운 색상 체계로 구성한 low-light UI를 지칭한다. 스마트폰과 같은 디바이스의 사용량이 증가면서, 눈의 피로를 덜어주고 집중력을 높여준다는 이유로 다크모드가 등장하였다. 현재는 수많은 웹사이트들이 다크모드를 옵션으로 제공하고 있으며, 이제는 모든 서비스들의 필수 항목처럼 되어가고 있다. 이 글은 기존 프로젝트에 styled-component와 context API를 사용하여 다크모드 옵션을 추가하는 과정을 담고 있다. 추가로 다크모드를 적용하기 전에, 지켜야 할 규칙과 가이드라인을 살펴본다. 다크모드 가이드라인 다크모드를 개발하기 전에, 먼저 가이드라인을 찾아보았다. Material Deisgn의 다크모드 가이드라인을 참고하여 특히 주의해야 ..

    recoil과 비동기 데이터 호출 (+ 선언적 프로그래밍)
    Front-End/React

    recoil과 비동기 데이터 호출 (+ 선언적 프로그래밍)

    💡 이 글은 'React스러운 상태관리 라이브러리, Recoil을 알아보자' 에서 이어집니다. React스러운 상태관리 라이브러리, Recoil을 알아보자 이제까지의 프로젝트에는 상태 관리 라이브러리로 항상 Redux를 사용했었는데, 그 이유는 단순하게 대부분의 사용자들이 redux를 사용했고, 사용자들이 가장 많이 사용하는 라이브러리 = 좋은 라 leego.tistory.com recoil에서는 selector 를 사용하여 비동기 데이터를 처리한다. redux에서 비동기 처리를 할 때는 redux-thunk나 redux-saga와 같은 미들웨어를 통해 action을 중간에 인터셉트하여 추가 동작을 수행하였다. 하지만 recoil에서 비동기 처리는 React의 일반 state의 흐름을 벗어나지 않고 거의..

    React스러운 상태관리 라이브러리, Recoil을 알아보자
    Front-End/React

    React스러운 상태관리 라이브러리, Recoil을 알아보자

    이제까지의 프로젝트에는 상태 관리 라이브러리로 항상 Redux를 사용했었는데, 그 이유는 단순하게 대부분의 사용자들이 redux를 사용했고, 사용자들이 가장 많이 사용하는 라이브러리 = 좋은 라이브러리라는 생각이 있었기 때문이다. Redux는 한때 너무 많은 양의 보일러 플레이트 코드를 작성해야 한다는 단점을 가지고 있었지만, Redux-toolkit의 등장으로 그 단점을 많이 보완되었다. 그럼에도 불구하고, 어떤 프로젝트에서는 전역 상태 관리를 위해 Redux를 설치하는 것이 너무 과하다고 느껴질 때가 있다. 다른 대안, context API 라이브러리를 추가적으로 설치하지 않고 context API를 사용하는것은 어떨까? context API는 일일히 props를 넘겨주지 않고도 컴포넌트 트리 전체에..

    [React] Portal을 사용한 모달창 만들기
    Front-End/개발일지

    [React] Portal을 사용한 모달창 만들기

    모달이란, 다이얼로그 실행 시 포커스와 제어권을 독점하여 다이얼로그를 종료하기 전까지 기존의 화면을 제어할 수 없는 기능을 뜻한다. 따라서 모달은 항상 화면의 최상위에 위치해야 하며, 모달이 열려있을 때는 기존 화면의 제어가 불가능해야 한다. 일반적인 방법으로 모달을 띄우는 방법은 다음과 같다. import Modal from './Modal'; const App = () => { const [isOpen, setOpen] = useState(false); const onClick = () => { setOpen(true); }; return ( open Modal ); }; export default App; 필요한 컴포넌트 안에서 모달 컴포넌트를 랜더링 하면 된다. 하지만 이 방법은 모달이 언제나 최..

    Toast UI Editor 이미지 첨부하기
    Front-End/개발일지

    Toast UI Editor 이미지 첨부하기

    Toast 에디터는 따로 설정해주지 않아도 에디터에 이미지를 첨부할 수 있다. 기본적으로 이미지 파일을 첨부하면 이미지가 base64로 인코딩 되어 삽입되는데, 그 길이가 매우 매우 상당하기 때문에 base64로 인코딩 된 이미지 그대로 DB에 넣어준다면 문제를 초래시킨다. 위처럼 이미지 하나를 첨부한 뒤, getHTML()을 통해 contents를 살펴보면, 엄청난 양의 텍스트가 들어있는것을 볼 수 있다. (너무 길어 콘솔에도 다 찍히지 않는다😳) 그러므로 우리는 이미지 첨부시 로직을 바꿔줄 필요가 있다. addImageBlobHook을 사용하자 이미지 첨부 로직은 hooks 옵션의 addImageBlobHook 를 통해서 커스텀할 수 있다. 잠깐 구조를 살펴보면 export type HookMap =..

티스토리툴바