https://github.com/vitejs/vite/issues/14011 Property 'div' does not exist on type 'JSX.IntrinsicElements'. · Issue #14011 · vitejs/viteDescribe the bug This problem will appear when I use vite build a react-ts project. When I write some HTML element in JSX, IDE will always prompt Property '...' does not exist on type 'JSX.Intrinsi...github.com VIte 협업 시 가끔 div 속성이 없다는 에러가 나는데해결방법이 간단하..
React
CSS 스타일의 패러다임이 최근 몇년간 굉장히 다채롭게 변화하고 있는데요. tailwind 는 당연히 강력한 CSS in JS 로 많이 사용되고 있으며, CSS 를 사용 할 때, CSS in JS 는 당연한 부분이고 여기에 추가로 TypeSafe CSS 로 관리하는 추세가 보인다. 여기에 제로 런타임인지, 확장 가능성이 있는지 등을 더 고려해 봐야 할 사항인것 같다. 0. Chakra UI https://chakra-ui.com/docs/components Chakra UI - A simple, modular and accessible component library that gives you the building blocks you need to build your React a Simple, Mod..
이번 프로젝트에서 인스타그램과 비슷한 UI를 기획하였기 때문에 피드에 무한 스크롤 기능을 추가해야 했다. 프로젝트에 이미 리액트 쿼리를 도입한 상태기 때문에 리액트 쿼리에서 제공하는 useInfiniteQuery를 사용하여 구현해 보고자 했다. 리액트 쿼리란? [React] React Query 란? 1. React Query 소개 리액트 쿼리? 서버 상태를 관리하는 라이브러리 간단하게 알아보자 Client State vs. Server State ? 클라이언트 상태란 웹 브라우저 세션과 관련된 모든 정보를 의미한다. 예를들어 유 mingnol2.tistory.com npm install @tanstack/react-query @tanstack/react-query-devtools 위의 명령어를 입력하면..
블로그 게시물을 선택할 경우 해당 게시물에 달린 댓글을 페칭해오는 과정에서 게시물을 선택해도 연관된 댓글으로 리프레쉬가 안되는 이슈가 발생하였다. 관련하여 해결한 내용들을 정리하고자 한다. 0. Problem? stale 상태인데도 리프레시 되지 않음 모든 댓글 쿼리가 같은 ['comments'] 쿼리 키를 사용하고 있었음. 이는 트리거가 있을 때만 새로 가져옴 트리거? - 컴포넌트 리마운트 - 윈도우 리포커스 - 리페치 함수 실행 - 자동 리페치 - mutation 후에 쿼리 무효화 등 이러한 트리거를 통해 클라이언트의 데이터가 서버의 데이터와 다르다고 알게됨 -> 하지만 이 트리거에 해당하는 상황이 아님 해결 방법? 1. 새 블로그 포스트 제목을 클릭할때마다 데이터를 무효화(삭제) 하는 등의 방식으로..
1. React Query 소개 리액트 쿼리? 서버 상태를 관리하는 라이브러리 간단하게 알아보자 Client State vs. Server State ? 클라이언트 상태란 웹 브라우저 세션과 관련된 모든 정보를 의미한다. 예를들어 유저가 언어 선택이나, 다크모드 라이트모드 등 테마를 선택하는 경우 → 서버에서 일어나는 일과는 관련이 없는 상태들, 단순히 사용자의 상태를 추적할때 서버 상태란 서버에 저장되며 클라이언트에 표시하는데 필요한 데이터 예를들어 데이터 베이스에서 불러오는 블로그 게시물 데이터 → 여러 클라이언트에 표시할 수 있도록 서버에 저장되는 상태들 리액트 쿼리는 어떤 문제를 해결할 수 있을까? 리액트 쿼리는 클라이언트에 있는 서버 데이터 캐시를 관리한다. 리액트 코드에 서버 데이터가 필요할 ..
지난 프로젝트에서 Vite (비트) + Typescript 로 리액트 프로젝트를 진행하며 상태관리 툴로 리액트 리덕스를 사용하였다. 타입스크립트 리액트 프로젝트에서 리덕스를 사용하는 방법을 정리하고 또 언제 리덕스를 사용하면 좋은지 작성해 보고자 한다. 지난 프로젝트 폴더 구성이다. 기능별로 store을 나누어 생성했고, index에서 관리하였다. 0. 라이브러리 설치 npm install @reduxjs/toolkit react-redux 1. store 생성 store/index.ts import { configureStore } from "@reduxjs/toolkit"; export const store = configureStore({ reducer: { }, }); export type Roo..
리덕스란? Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너! 공식 문서에서 리덕스 툴킷을 사용할 것을 추천한다.(RTK) 여러분의 앱의 상태 전부는 하나의 저장소(store)안에 있는 객체 트리에 저장됩니다. 상태 트리를 변경하는 유일한 방법은 무엇이 일어날지 서술하는 객체인 액션(action)을 보내는 것 뿐입니다. 액션이 상태 트리를 어떻게 변경할지 명시하기 위해 여러분은 리듀서(reducers)를 작성해야 합니다. 액션 객체를 생성하는 액션 생성자 부수 효과를 가능하게 하는 미들웨어 부수 효과를 가진 동기 또는 비동기 로직을 포함하는 Thunk 함수 ID로 항목 조회를 가능하게 하는 정규화된 상태 Reselect 라이브러리를 사용하여 파생된 데이터를 최적화하는 메모이제이션된 셀렉터 함..
스크롤은 동작하지만 좁은 범위에서 스크롤이 일어나야 해서 스크롤 자체의 UI는 보이지 않게 처리하고 싶었다. 이때 사용할 수 있는 방법을 정리해 보고자 한다. 1. 스크롤 생성 overflow-y: scroll; 2. 스크롤 바 안보이게 하기 scrollbar-width: none; 간단히 스크롤바의 너비를 없애서 보이지 않게 처리해 줄 수 있다. 스크롤은 가능하지만 보이지 않게 처리해서 모바일 화면과 같은 작은 범위의 상황에서 활용 가능할 것으로 보인다.
협업 프로젝트를 진행하며 여러 오류들과 만나고 있다. 이번에는 리엑트 - 타입스크립트 프로젝트를 진행하며 다른 사람의 코드를 머지했을 때 만날 수 있는 Property 'div' does not exist on type 'JSX.IntrinsicElements'. 오류에 대한 설명과 해결 방안에 대해 작성해 보도록 하겠다. 오류가 발생하는 환경은 1. React 2. Typescript 3. Vite 프로젝트를 시작하거나 수정되지 않은 템플릿을 사용했을 때 발생한다고 한다. 이에 대한 해결 방안은 1. tsconfig.json 파일 수정 "moduleResolution": "Node" 2. VS Code Typescript WorkSpace 버전 선택 3. npm Dependency 재설치 npm i 나..
리엑트에서 기본적으로 토글 버튼은 두가지 상태를 가지는 버튼이라고 생각하면 된다. 이는 삼항연산자나 조건문을 가지고 '토글' 상태를 반대로 변경 시키며 구현할 수 있고, 여기에 애니메이션 효과를 추가하여 우리가 아는 토글 버튼의 모양으로 만들 수 있다. 인라인 스타일 형식에서는 해당 애니메이션을 구현하기어렵고, true/false 의 boolean 값으로 두가지 상태를 가지게 구성하여 현재 상태에 따라 스타일을 다르게 주어 생성할 수 있다. 또한, 해당 토글 버튼을 컴포넌트로 만들어 필요할 때마다 불러내어 사용 가능하다. false true 토글 버튼 React code import React, { useState } from "react"; import { ToggleContainer } from "...