IT/React9 리액트 서버(serve) 설치시 에러 : npm ERR! A complete log of this run can be found in:~ 리액트 서버 설치 명령어 실행시, 아래와 같은 에러 발생 문제 원인 : 권한 문제로 발생하는 것으로 보입니다. 전역으로 패키지를 설치하려고 할 때 시스템 디렉토리에 접근 권한이 없어서 발생하는 문제 해결 : npm 설치 위치 변경 npm config set prefix ~/.npm 이후 다시 서버 설치 진행 npm install -g serve 설치 완료 서버 실행 serve -s build 2024. 3. 6. 리액트 훅(Hook)에 대해서( useState(), useEffect(), useMemo(),useRef() ) Hook의 네이밍 규칙은 use~가 반드시 붙어야 한다. Hook useState() : state를 사용하기위한 훅 useEffect() : 사이드 이팩트를실행하기 위한 훅, 라이프사이클 함수 기능 수행 useMemo() : 연산량이 많이 드는 호출을 저장해두었다가 이전에 저장해놓은 호출결과를 반환하는 훅 useEffect() useEffect(() => { // 컴포넌트가 마운트 된 이후 실행됨 // 의존성 배열에 있는 변수들 중 하나라도 값이 변경되었을 때 실행됨 // 의존성 배열에 빈 배열 ([])을 넣으면 마운트와 언마운트시에 단한번씩만 실행됨 // 의존성 배열 생략시 컴포넌트 업데이트 시마다 실행됨 return () => { // 컴포넌트가 마운트 해제되기 전에 실행됨 } }, [의존성 변수1.. 2024. 3. 5. 리액트 애플리케이션 만들고 실행 1. 애플리케이션 만들기 npx create-react-app 옆에 프로젝트가 app이름으로 생긴게 확인 가능 2. 애플리케이션 실행 npm start 아래와 같은 화면이 뜨면 실행 정상 3. 필요한 패키지 설치 react-router-dom v6 : 리액트 앱에서 페이지 전환을 위해 사용하는 패키지 , 모든 리액트에 필수적 styled-components v5 : 스타일링을 위한 라이브러리 아래 명령어 실행 000@munhuijaeui-MacBookPro mini-blog % npm install --save react-router-dom styled-components 설치 완료 화면 pakage.json 파일에서 아래와 같이 버전 및 설치확인 가능 2024. 3. 4. 리액트 어플리케이션 설치 및 실행 명령어 create react app은 npx 명령어로 실행이 가능하다 npx는 npm패키지를 설치한 이후 곧바로 실행(excute)까지 해주는 명령어이다. 새로운 react application을 만들기 위해서 아래와 같은 명령어 입력 npx create-react-app 애플리케이션 실행 명령어는 npm start 2024. 3. 4. Node.js & npm 설치 링크 / VSCode 설치 링크 Node.js 설치 Node.js 를 설치하면 npm은 자동으로 같이 설치가 된다. 아래 링크에서 설치 가능 https://nodejs.org/en Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 위 링크에서 LTS 버전을 설치해 준다 Node.js 버전 확인 터미널 실행 후, 버전 확인 명령어 입력 버전확인이 되면 설치 완료다 npm확인 위와 같이 npm도 버전을 확인해준다. VS Code 설치 링크 https://code.visualstudio.com/download Download Visual Studio Code - Mac, Linux, Windows Visual Studio Cod.. 2024. 3. 4. 리액트 크롬 툴 소개 ( react developer tool ) 리액트를 사용할 때 웹에서 보는 것 보다 더 유용하게 확인 가능한 툴을 소개한다 리액트 개발자 툴 ( react developer tool ) 기존에 이렇게 별로 나눠서 보이던 것들이 컴포넌트(Components) 탭 내에서 트리구조로 확인이 간편하다. 이런 트리구조로 볼 수있는데, 여기서 제일 위에 NotificationList를 클릭하면, 이렇게 리액트 상태값과 props가 확인이 가능하다 그리고 프로파일러(Profiler) 탭 을 통해서는 컴포넌트들이 랜더링 되는 과정들을 단계별로 사용할 수있다 이 기능을 이용하여 랜더링되는 컴포넌트와 랜더링 시간, 왜 다시 랜더링 되었는지를 확인할 수 있다. 불필요한 랜더링과 무거운 것들을 찾아서 성능향상이 가능하다고 한다. 구글에는 " react develope.. 2024. 2. 26. 이전 1 2 다음
