본문 바로가기
클라이언트/React
 (48)
[리액트(React)] Webpack 설정하기 리액트 공부를 하면서 CRA와 Vite를 주로 사용해서 프로젝트를 생성했다.CRA와 Vite 중 뭘 사용할까 고민해본 적은 있지만, Webpack으로 직접 설정해볼까 고민해본 적은 없다.(※ CRA는 webpack을 사용하고 있고  Vite는 개발 단계에서는 ESM을, 빌드 단계에서는 Rollup을 사용한다.)좋은 기회를 얻어서 Webpack을 사용하여 프로젝트를 생성해보게 되었다.// WebpackWebpack이란, 자바스크립트의 정적 모듈 번들러(Static Module Bundler)이다.자바스크립트 애플리케이션의 개발 단계에서 여러 개의 모듈을 하나의 파일이나 여러 파일로 결합하는 역할을 한다.설정이 자유로워 높은 확장성과 유연성을 가진다.webpack 버전 4.0.0 이후로는 설정 파일이 없어도..
[리액트(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 상태 관리의..

티스토리툴바