오늘은 지난 포스트에서 설명했듯 useQuery와 useMutation에 대해 작성해 볼 것이다. Queries쿼리는 고유 키와 연결된 비동기 데이터 소스에 대한 선언적 의존이다. 쿼리는 서버에서 데이터를 가져오기 위해 Promise 기반 메서드(예: GET 및 POST)를 사용한다. 데이터를 수정하는 메서드에는 Mutations를 사용하는 것이 좋다. 서버에서 데이터를 가져올 때 -> useQuery 데이터를 수정할 때 -> useMutaion useQuery 사용법 queryKey : 쿼리의 고유 키 , 캐시를 관리하기 위한 키 값으로 배열 형태로 사용 queryFn : promise 를 반환하는 함수 import { useQuery } from '@tanstack/react-query'funct..
리액트
오늘 포스트는 Tanstack Query 공식문서를 읽고 Tanstack Query에 대한 개념과 사용방법에 대해 작성해 볼 것이다. 공식문서에 대한 포스트는 양이 많아질 것으로 예상되어 여러 포스트로 작성될 예정이다 ! TanStack Query란?(React Query)TanStack Query( 이전에는 React Query)는 웹 애플리케이션의 데이터 패칭 라이브러리로, 서버 상태를 쉽게 패칭, 캐싱, 동기화 및 업데이트할 수 있도록 해준다. 한마디로 강력한 비동기 상태관리 툴. 공식문서에서는 기존에 존재하는 다른 상태 관리 라이브러리(redux, zustand, recoil..)는 클라이언트 상태를 다루기에는 좋지만, 비동기나 서버 상태를 다루기에는 적합하지 않다고 설명되어 있다. ..
문제점 : 배포를 했는데 다크모드가 자동으로 적용 되어 CSS 가 깨져서 나온다. ex) 하얀색 배경 폼 -> 검정색 배경 폼으로 변경 , 폰트 컬러를 지정해주지 않은 글 -> 하얀색으로 변경 등 저번 프로젝트와 이번 프로젝트를 진행하면서 로컬 환경에서는 문제가 없었지만 배포를 하고 테스트를 하는 과정에서 웹 이용자가 다크모드를 사용할 때 자동적으로 글씨 색상이나 폼 배경 색깔이 변경되는 문제점을 겪었다. 해결은 간단하게 할 수 있었다. index.css 파일 :root 에서 color-scheme 부분이 light dark 로 설정되어 있는데 light only 로 바꿔주면 된다. :root { font-family: Inter, system-ui, Avenir, Helvetica, Arial, san..
MaMaMeMo 시력저하로 작은 글씨를 못보는 어머니를 위해 개발된 웹사이트 입니다. 메모장 기능과, 메모장을 커스텀할 수 있습니다. 아이디어 구상 및 기획 MaMaMeMo는 어머니를 위한 웹사이트이다. 어머니가 예전에는 시력이 좋으셨지만 컴퓨터를 보는 업무를 몇년동안 해오시며 시력이 급격하게 안좋아지셨고 핸드폰으로 보이는 글씨를 못읽어 나에게 읽어달라고 하시는 일이 종종있었다. 이럴때마다 가슴이 찡해지며 어머니가 사용하시는 웹이나 앱 들은 왜 다 글씨가 작은지 의문이 들었다. 어머니가 기억해둬야할 것들은 모두 메모장에 저장을 해두시는데 이를 볼 때마다 잘 안보여 나아게 읽어달라고 할 때가 많았다. 따라서 나는 어머니를 위해 어머니가 자주 이용하시는 메모장을 개발해보려고 한다. 최대한 기존에 있는 웹사이..
블로깅 챌린지 3주차가 다가왔다 ! 사실 코드스테이츠를 수강하면서 처음부터 프로젝트를 구현해본적은 없던 것 같다. 항상 짜여진 틀에 알맞은 코드를 작성해 테스트케이스를 통과하는 것이 끝이었다. 그래서 막상 처음부터 리액트로 코드를 짤 수 있을까 ? 하는 생각이 들었던 것 같다. 그래서 이번 블로깅 챌린지 주제로는 '리액트로 간단한 컴포넌트를 구현하기'로 정했다. 리액트를 사용하기 위해선 node.js 가 필요하고 node.js 설치를 완료 하였으면 npm을 이용하여 자바스크립트 라이브러리를 관리할 수 있다. 나는 실습을 통해 node.js를 설치하였으므로 여기까지는 성공적이다. 리액트 앱 생성하기 리액트가 제공하는 create-react-app을 활용하여 리액트 프로젝트를 생성할 수 있다. 터미널에 간단..
오늘은 블로깅 챌린지 두번째 날이 다가왔다 ! 오늘은 최근에 배웠던 Redux에서 상태 관리 라이브러리로 잠깐 소개만 되었던 리액트 Context에 대해 공부해보았다. 처음 접하는 개념이라 어려웠지만 알아두면 좋을 것 같다 Context 란? 전역적으로 데이터를 공유하기 위한 기능임 일반적으로 React 애플리케이션에서 props를 이용해 데이터를 컴포넌트에 전달하는데 컴포넌트의 깊이가 깊어질수록 매번 props 를 사용해 데이터를 전달하는 것이 번거롭고 복잡해질 수 있음 따라서 이 경우 Context를 사용하면 중간 컴포넌트를 건너 뛰고 데이터를 바로 전달할 수 있음 Context 요소 Provider Consumer 데이터를 제공 데이터를 사용 Context 사용 import React from 'r..
프론트엔드 개발에서 상태관리를 보다 더 효율적으로 하기 위한 라이브러리인 Redux에 대해 공부하였다. 상태관리를 공부하면서 등장하는 다양한 개념들도 익혀두면 좋을 것 같다. 프론트엔드 개발에서의 상태관리 상태란 ? UI에 동적으로 표현될 데이터 상태를 다룰 때에 Side Effect는 주요 고려 대상임 상태의 두가지 구분 로컬 전역 특정 컴포넌트안에서만 관리되는 상태 프로덕트 전체 혹은 여러 컴포넌트에서 관리되는 상태 서로 다른 컴포넌트가 사용하는 상태의 종류가 다르면 , 전역 상태일 필요는 없음 (출처가 달라도 됨) 그러나 서로 다른 컴포넌트가 동일한 상태를 다룬다면 출처는 오직 한 곳이어야 함 데이터 무결성? 데이터의 정확성을 보장하기 위해 데이터의 변경이나 수정 시 제한을 두어 안정성을 저해하는 ..
Redux 란 ? javaScript 애플리케이션에서 상태를 관리하는 라이브러리 중 하나 데이터 흐름을 예측 가능하게 만들어 애플리케이션의 상태 변화를 추적하고 디버깅하기 쉽게 해줌 Redux 구성요소 액션(Action) 리듀서(Reducer) 스토어(Store) 디스패처(Dispaatcher) 상태를 변경하기 위한 정보를 가지고 있는 메세지 , 액션은 객체 형태로 작성되며 필수적으로 'type' 프로퍼티를 가지고 있어야 함 상태를 변경하는 로직을 담당함. 리듀서는 이전 상태와 액션을 받아서 새로운 상태를 반환하는 순수함수임 상태를 저장하고 관리함. 스토어는 애플리케이션의 상태를 담고 있으며, 상태를 변경하는 유일한 방법은 액션을 디스패치하는 것임 액션을 전달하는 역할을 수행 . 디스패처는 단 하나만 존..
오늘은 리액트로 프론트엔드를 구축할 때 , 구조적으로 코드를 작성하는 방법에 대해 작성해 볼 것이다. CDD 란? Component Driven Development 부품 단위로 UI 컴포넌트를 만들어 나가는 개발 방법 같은 UI 컴포넌트를 공유 즉 재사용할 수 있는 UI 컴포넌트를 개발하기 위해 고안됨 CSS-in-JS 컴포넌트 단위의 개발은 캡슐화의 중요성을 불러옴 CSS는 컴포넌트 기반의 방식을 위해 만들어진 적이 없음 그래서 탄생한 것이 CSS-in-JS CSS도 컴포넌트 영역으로 불러들이겠다 ! 대표적 예 ) Styled-Component Styled-Component 기능적 혹은 상태를 가진 컴포넌트로부터 UI를 완전히 분리해 사용할 수 있는 단순한 패턴을 제공 CSS를 컴포넌트화 시켜주는 라..
