클라이언트/React (47) 리스트형 [리액트(React)] Gatsby - Contentful // Contentful- 컨텐츠를 관리하는 시스템- 공식 사이트: https://www.contentful.com/ Where content drives business momentum | ContentfulBusiness moves faster when teams producing content have a platform that empowers them to collaborate, innovate, and deliver impactful experiences at scale.www.contentful.com// Content 모델 생성 회원가입 후 Content 모델을 생성한다.처음 가입하면 샘플들이 여러 개 있는데 싹 다 지워버렸다. content type의 Name을 정하고 Create를 누른.. [리액트(React)] Gatsby // Gatsby- 정적 사이트를 구축하는 리액트 기반 프레임워크- 기존 리액트에서 작업하는 것과 동일하게 작업하고, 빌드 후 배포할 때 모든 리액트요소를 html로 변환해준다.- 데이터를 편리하게 가져올 수 있도록 GraphQL을 사용한다.- 공식 사이트 :https://www.gatsbyjs.com/ The Best React-Based Framework | GatsbyGatsby is a React-based open source framework with performance, scalability and security built-in. Collaborate, build and deploy 1000x faster on Netlify.www.gatsbyjs.com▪ 설치npm install -g.. [리액트(React)] Vercel로 React 프로젝트 배포하기 간단한 프로젝트는 github pages로 배포하는 편인데, 이번엔 좀 제대로 관리하고 싶은 프로젝트라 vercel로 배포하기로 했다. 전에 Next 프로젝트를 Vercel로 배포한 적이 있어서 딱히 고민하지 않았던 것 같다 ㅎㅎ * 공식 홈페이지: https://vercel.com/ Vercel: Build and deploy the best Web experiences with The Frontend Cloud – Vercel Vercel's Frontend Cloud gives developers the frameworks, workflows, and infrastructure to build a faster, more personalized Web. vercel.com Vercel은 깃허브와 연동.. [리액트(React)] 드래그 앤 드롭(drag & drop) // 드래그 앤 드롭, drag & drop - 마우스나 터치스크린을 이용해서 객체를 이동시킬 수 있게 하는 기술 // react-beautiful-dnd - drag & drop 을 구현하기 위한 라이브러리 - DragDropContext, Droppable, Draggable의 세 가지 주요 컴포넌트로 구성되어 있다. DragDropContext : 전반적인 프레임워크 Droppable : 드롭 가능한 영역 Draggable : 드래그 가능한 각 요소 1. 설치 npm install react-beautiful-dnd 타입스크립트를 사용한다면 @types도 추가로 설치한다. npm install --save-dev @types/react-beautiful-dnd 2. DragDropContext 사용.. [리액트(React)] Github page 배포 전에 바닐라 JavaScript로 코딩해서 직접 Github 사이트에서 설정을 통해 배포한 적이 있는데, React는 배포가 훨씬 간편하다. 먼저 gh-pages를 설치해준다. npm install gh-pages 다음으로는 루트 하위에 .env.production 파일을 생성하여 배포 사이트 주소를 적어준다. PUBLIC_URL=https://github이름.github.io/repository명 깃허브 사이트의 주소 규칙은 따로 도메인을 설정하지 않는 한 항상 일정하다. router v6 를 사용하는 경우, basename도 따로 설정해주어야 한다. const router = createBrowserRouter( [routes들], { basename: process.env.REACT_APP_PROF.. [리액트(React)] react-hook-form // react-hook-form - form을 쉽게 조작할 수 있도록 도와주는 React 라이브러리 - 코드를 간결하게 유지할 수 있다. - 불필요한 리렌더링을 줄일 수 있고, validation 체크가 용이하다. 1. 설치 npm install react-hook-form 2. 사용 import { useForm } from 'react-hook-form'; const { register, handleSubmit, formState: { errors }, setError, setValue } = useForm(); const onValid = (data: 타입) => { if(조건) { setError('식별자', { message : '메시지' }) } }; register : 입력 필드(input.. [리액트(React)] 리코일(Recoil) // 리코일, Recoil - React 앱의 상태 관리(state management)를 위한 라이브러리 - 전역 상태 관리 라이브러리 - React의 기본 원리를 적용하고 있어서 구성이 용이하다. - Redux보다 더 간단하게 사용할 수 있다. - 가장 작은 단위인 atom을 생성하여 값을 저장한 후, 그 값이 필요한 component와 atom을 연결하여 값을 가져올 수 있다. 1. 설치 npm install recoil 2. index.tsx 파일 설정하기 const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement, ); root.render( , - 컴포넌트로 감싼다. // Atom - Recoil 상태 관리의.. [리액트(React)] 차트(Chart) 사용하기 // 차트, Chart - 데이터를 시각화해서 나타낸다. - 많은 js 라이브러리들이 존재한다. // ApexCharts.js - 공식 문서: https://apexcharts.com/docs/react-charts/ React-ApexChart - A React Chart wrapper for ApexCharts.js Create React Charts using a React Chart component for ApexCharts. Build beautiful and interactive visualizations in your react applications. apexcharts.com 1. 설치 npm install --save react-apexcharts apexcharts 2. 사용 imp.. < 1 2 3 4 ··· 6 >
