Web Study/React 관련16 Vite - 플러그인 사용하기 https://ko.vitejs.dev/guide/using-plugins.html Vite Vite, 차세대 프런트엔드 개발 툴 ko.vitejs.dev 플러그인 추가하는 법 플러그인을 사용하려면 devDependencies 에 플러그인을 추가하고 vite.config.js 설정 파일의 plugins 배열에 해당 플러그인을 포함시켜야 한다. plugins 에는 여러 플러그인을 하나의 요소로 묶는 사전 설정을 포함시킬 수 있으며 프레임워크 통합과 같은 여러 플러그인을 사용하여 구혀되는 복잡한 기능을 구현할 때 사용될 수 있다. 내부적으로 배열은 Flatten 연산을 거친다고 한다. Flatten 연산이란? 다차원 배열을 1차원 배열로 평탄화 하는 것 추가로 다른 플러그인을 쉽게 활성화하거나 비활성화 시킬.. 2023. 6. 19. CRA 와 Vite CRA 의 사용을 최소화해야 한다는 컬럼과 공식문서에서 추천하지 않는다는 것을 보고 직접 설정을 할 줄 알아야겠구나 싶어서 CRA 가 무얼 해주는지 먼저 알아야겠어서 정리해본다. CRA (Create React App) 손쉽게 최신 리액트 앱을 설정할 수 있도록 하는 명령 초기 환경을 일일히 설정하지 않고도 리액트 프로젝트를 시작할 수 있도록 셋업을 해준 틀과 같다. npx create-react-app 프로젝트명 으로 만들어주었다. Less to Learn - 자동 최적화 Only One Dependency - 복잡한 버전 불일치 없이 원활하게 작동하는지 확인 No Lock-In - ESLint, Webpack, Babel 등 다양한 패키지를 포함 HMR(Hot Module Reloading) - 코.. 2023. 6. 19. 노마드코더 React Hooks - 2 useEffect 를 활용한 커스텀 훅들 useEffect 란? componentWillMount, componentDidMount, componentWillUpdate 의 클래스 컴포넌트의 생명주기 함수의 기능을 함수형 컴포넌트로 수행 useEffect(function, array); 첫번째 매개변수는 useEffect 이 실행될 때마다 실행될 콜백함수를 넣어준다. 두번째 매개변수는 의존성 배열 (deps) 로 해당 배열에 지정해준 그 값이 변경될 때마다 useEffect 를 실행시킬 수 있게 지정할 수 있다. 이미 알고 있는거지만 복습 겸 기초를 다진다 생각하고 다시 정리한다. useEffect(콜백함수, []); // Mount 됐을 때 1번 실행 useEffect(콜백함수); // Mount와 U.. 2023. 6. 13. 노마드코더 React Hooks - 1 강의를 들으며 만들게 될 Hooks Hooks Description useTitle 리액트 document의 title을 몇 개의 hooks와 함께 바꾸는 것 useInput input 역할 usePageLeave 유저가 페이지를 벗어나는 시점을 발견하고 함수를 실행시킬 수 있는 훅 useClick 요소를 클릭하는 시점을 감지 useFadeIn 어떤 요소든 애니메이션을 요소 안으로 서서히 사라지게 만들어줌 useFullScreen 요소를 풀스크린으로 만들거나 일반 화면으로 돌아가게 함 useHover 어떤 요소가 hover 될 때를 감지 useNetwork 온라인 또는 오프라인 상태인지 감지 useNotification notification API를 사용할 때 유저에게 알림을 보내줌 useScroll .. 2023. 6. 11. 이전 1 2 3 4 다음
