728x90 반응형 react13 [React/리액트] Vite 설치 및 사용 Vite 란? 모던 웹 프로젝트 개발에 초점을 맞춰 만들어진 빠르고 간결한 빌드 도구로, CRA 의 단점을 해결하기 위해 Esbuild 를 기반으로 만들어진 빌드툴이다. CRA 는 자바스크립트로 구성된 Wepack 을 사용하는데, 다소 속도가 느린 편이다. 평소에는 체감하지 못할 수 있지만, 코드의 양이 많아질수록 느린 속도를 체감할 수 있다. (참고로 Esbuild 는 Go 언어로 작성된 자바스크립트 빌드툴로 속도가 빠르다.) Vite 사용하기 아래 순서대로 따라하면 된다. - $ npm init vite- 프로젝트 이름 설정 - 프레임워크 설정 - variant 설정 -> 타입스크립트를 선택할 것인지 여부 - $ cd 프로젝트 이름- npm install- npm run dev $ npm .. 2024. 6. 22. [React+JS/리액트] 웹 스터디 8주차 Redux -1여러 컴포넌트가 공유하는 상태 관리를 자바스크립트 상태관리 라이브러리리액트와 사용하기 위해서는 RTK(React Tool Kit) 설치 필요 redux 를 사용하면 props 없이 state를 공유할 수 있게 해준다. 자바스크립트 파일을 하나 만들어서 state 들을 보관하고 모든 컴포넌트들은 자바스크립트 파일 안에 있는 state 들을 직접 꺼내쓸 수 있다. 프로젝트 사이즈가 커져서 컴포넌트가 많아졌을 때 사용하기 좋다. 그래서 요즘은 개발자 구인시에도 redux 같은 라이브러리의 숙련도를 대부분 요구한다고 한다. - redux toolkit 설치 redux 사용을 위해 터미널에서 아래와 같이 입력 redux toolkit 설치시 npm install @reduxjs/toolkit@1.. 2024. 6. 12. [React+JS/리액트] 웹 스터디 7주차 탭 UI 만들기 버튼 3개와 박스 3개를 미리 만들어놓고 버튼을 누를 때 마다 그에 맞는 박스를 보여주는 탭 UI 를 만들어보려고 한다. 다시 상기시켜보는 동적 UI 만드는 방법1. html, css 디자인 미리 완성시켜 놓고2. UI 의 현재 상태를 저장할 state 만들기3. state 에 따라서 UI 가 어떻게 보일지 작성 - html, css 로 디자인 미리 완성하기 리액트 부트스트랩 사이트에서 아래의 코드를 복사해서 가져오고, Nav 를 import 하기여기서 defaultActiveKey 는 페이지 로드시 어떤 버튼에 눌린 효과를 줄지 결정하는 부분으로 원하는 버튼을 넣으면 된다. import { Nav } from 'react-bootstrap'; 버튼0 .. 2024. 6. 5. [React+JS/리액트] 웹 스터디 6주차 컴포넌트의 Lifecycle 과 useEffect - 1 useEffect() 나 componentDidMount() 같은 함수를 쓰기 위해서는 컴포넌트의 lifecycle 을 알아야 한다. 컴포넌트의 인생을 알아야 컴포넌트 인생 중간에 간섭을 할 수 있기 때문이다. 컴포넌트의 인생은 3가지로 나뉜다.1. 생성 (mount)2. 재렌더링 (update)3. 삭제 (unmount) 컴포넌트의 인생에 간섭을 하려면 'Hook' 이라는 걸 달아야 한다. 훅 안에 실행할 코드를 넣으면 mount / update / unmount 시에 코드를 실행해주는데 Lifecycle hook 이라고 부른다. 옛날 리액트에서 Lifecycle hook 쓰는 법 예전 class 문법으로 컴포넌트를 만들 때, 안에 함수명.. 2024. 6. 3. 이전 1 2 3 4 다음 728x90 반응형
