한 걸음씩

CSR(Client-Side Rendering) : JavaScript, React 장점 동적 경험: 웹 애플리케이션 초기 로딩 시에는 최소한의 HTML과 JavaScript만 전송되고, 그 후에 클라이언트 측에서 데이터를 가져와서 렌더링하는 방식이다. 사용자와 상호작용하는 동안 빠른 페이지 전환과 부드러운 애니메이션을 제공할 수 있다. 서버 부하 감소: 서버 측에서는 초기 로딩에 대한 요청만 처리하면 되므로 서버 부하가 상대적으로 낮아진다. 개발 용이성: 프론트엔드와 백엔드를 독립적으로 개발할 수 있어, 개발 팀 간의 협업이 용이해진다. 단점 SEO 문제: 초기 로딩 시에는 검색 엔진의 크롤러가 페이지의 내용을 인식하기 어려울 수 있습니다. 이로 인해 SEO에 불리할 수 있다. 초기 로딩 속도: 초기에..

리액트 기반의 프레임워크 Gatsby는 리액트 라이브러리를 기반으로 한 프레임워크이다. 이를 통해 리액트의 강력한 기능을 활용하여 웹사이트를 구축할 수 있다. 정적 웹사이트와 데이터 포함 Gatsby는 정적 웹사이트를 생성하는데 주로 사용된다. 이는 블로그, 전자상거래 사이트, 콘텐츠 업로드가 없는 경우에 적합하다. 웹사이트는 최초 렌더링 시 이미 데이터를 포함한 HTML 형태로 제공되어 로딩 속도를 향상시킨다. CMS(콘텐츠 관리 시스템) 연동 Gatsby는 CMS에서 가져온 콘텐츠를 빌드 시점에 웹사이트에 포함하여 미리 생성된 웹사이트를 제공한다. 데이터 레이어 다루기 Gatsby는 다양한 데이터 소스로부터 데이터를 가져올 수 있다. 이를 통해 원하는 방식으로 데이터를 관리하고 통합할 수 있다. 사전..

https://www.framer.com/motion/ Documentation | Framer for Developers An open source, production-ready motion library for React on the web. www.framer.com ▶ Basic Animation import styled from 'styled-components' import { motion } from 'framer-motion' const Wrapper = styled.div` height: 100vh; width: 100vw; display: flex; justify-content: center; align-items: center; ` // styled-components와 motion..

npm i react-beautiful-dnd npm i --save-dev @types/react-beautiful-dnd 드래그 앤 드롭: https://github.com/atlassian/react-beautiful-dnd 드래그 앤 드롭이 동작하지 않을 경우: https://github.com/atlassian/react-beautiful-dnd/issues/2350 // index.tsx import React from "react"; import ReactDOM from "react-dom/client"; import { RecoilRoot } from "recoil"; import { createGlobalStyle, ThemeProvider } from "styled-components"..

◈ 사용자가 분을 입력하면 자동으로 시간으로 변환하거나 시간을 입력하면 분으로 변환하는 간단한 시간 변환기 ◈ React Recoil을 사용하여 상태를 관리하고 컴포넌트 간의 상호작용을 처리하는 방법을 보여준다. ▶ atoms.tsx minutesState: 시간을 분 단위로 나타내는 atom을 정의한다. 기본 값은 0이다. hourSelector: 분을 시간으로 변환하는 Selector를 정의한다. get함수: minutesState의 값을 가져와 분을 시간으로 변화하여 반환한다. set함수: 입력된 시간을 분으로 변환하여 minutesState를 업데이트한다. // atoms.tsx import { atom, selector } from 'recoil' export const minutesState ..