react

이번 프로젝트에서 인스타그램과 비슷한 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 위의 명령어를 입력하면..

지난 프로젝트에서 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..

리액트와 타입스크립트 환경에서 캘린더를 구현할 때 FullCalendar 라이브러리를 이용하여 개발하게 되었다. https://fullcalendar.io/ FullCalendar - JavaScript Event Calendar Open Source... With over 10 years of open source and over 120 contributors, FullCalendar will always have a free and open source core. Learn more fullcalendar.io 기본적인 컴포넌트 구성을 파악하고 적용해 보고자 한다. 기본 제공 템플릿의 UI다 나는 Monthly 페이지만 필요했기 때문에 필요 없는 상단 버튼들은 삭제하여 주는 등 커스텀 하여 사용 할 ..

반려동물의 하루 일지를 기록하는 웹 서비스를 기획중인 JellyDiary 젤리 다이어리 줄여서 젤다 에서는 매일 작성 되는 일지를 달력 형식으로 보여줄 필요성이 있었다. 프론트엔드 멘토링을 통해 직접 구현하는 것을 추천하지만 실무에서는 이미 만들어진 라이브러리를 가져다 쓰는 경우가 대부분이라고 한다. 그래서 이번 프로젝트에서도 잘 맞는 라이브러리가 있으면 사용해 보고자 여러 레퍼런스들을 찾아보았다. 리액트와 타입스크립트로 캘린더 라이브러리 사용해 보기 우선 아래와 같이 와이어 프레임을 짜 보았다. 내가 필요 한 기능은 1. 월(Monthly) 형식의 달력 포멧을 제공할 것 2. 일 별로 추가되는 일지를 달력에 리스트로 보여줄 수 있을 것 3. 일지 추가 버튼을 생성하고 일지를 추가하면 달력에 추가 할 수..

스크롤은 동작하지만 좁은 범위에서 스크롤이 일어나야 해서 스크롤 자체의 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 "...

리엑트에서 화면 스크롤 이동이 가능하다. 1. scroll to top 함수 만들기 스크롤을 화면 가장 상단으로 올리는 부분은 scrollTo 를 사용하여 위치를 가장 상단인 0으로 지정한 뒤 이동시킬 수 있다. const scrollToTop = () -> { window.scrollTo({ top:0, behavior: 'smooth' }) }; behavior 옵션은 auto 와 smooth 로 설정 가능하며 auto는 바로 이동, smooth는 말 그대로 부드럽게 이동시킨다. 2. useRef 저장공간(변수 관리), DOM 요소에 접근을 위해 사용되는 훅이다. useState와 동일하게 컴포넌트 내부에서 렌더링이 일어나도 변경 가능한 상태 값을 저장한다. 또한, 객체 내부에 있는 'current'..

같은 네트워크에 프론트단과 백단 서버를 같이 운영 중이라면 한번쯤은 만날 CORS관련 오류를 해결하는 방법을 정리해 보고자 한다. (우선 개발 서버에서만 가능하고, 배포 후에는 다른 방법을 써야하는 경우도 있다.) 프록시 설정을 위해 미들웨어를 사용하기도 하는데 오늘은 간단한 방법으로 package.json 을 수정하여 처리하는 방법을 소개해 보고자 한다. 1. Axios 란? node.js와 브라우저를 위한 Promise 기반 HTTP클라이언트이다. 리엑트에서는 GET, POST, PUT, DELETE 등의 메소드를 지원하기 때문에 쉽게 사용이 가능하다. 주로 백엔드 서버 단으로 API를 호출할 경우에 사용하며 config를 미리 지정해 놓고 인스턴스를 생성해 재사용성을 높일 수 있다. 2. CORS ..

todolist 앱 개발 멘토링 중 백엔드와 연결을 하는 와중에 axios로 RESTAPI 호출을 하며 정말 다양한 오류들을 만나고 있다. 그 중 가장 먼저 해결 해야 했던 부분이, 정말 간단하게 axios를 사용해서 값을 useState로 넣어주려 했는데, 비동기 통신으로 데이터를 받아와 버리니 웹이 뜨자마자 오류가 폭발했다. 자바스크립트는 비동기통신을 하기 때문에 요청을 보내고 기다리지 않는다. 그렇기 때문에 이를 동기화 하여 통신하게끔 처리해 주어야 하는데 그때 async, await이 사용된다. 동기 통신(Synchronous)은 요청을 완료 하길 기다렸다 결과값을 받아와서 사용할 수 있기 때문에 순차적으로 진행이 필요할때 사용하게 된다. axios 하지만 axios는 promise 기반 비동기통..