#0 React 설치 및 세팅

daramG 2023. 1. 18. 16:20

해당 게시글은 위 링크의 강의를 보고 해당 내용을 정리한 게시글입니다!

리액트 -> ajax -> 데이터 변경 감지 -> UI가 자동 업데이트

리액트는 변경을 감지하는 엔진(Daemon), 그래서 서버처럼 계속 돌아야한다.

즉 리액트를 계속 동작하게 할 수 있는 서버가 필요하다. 이 서버가 Node.js 서버이다.

실행하게되면 리액트는 Node.js 위에서 계속 동작한다.

우선 VSCode 를 킨 후 reackwork 이름 폴더 만들어 열어주자

Node.js가 없다면 Node.js를 설치해주자

터미널에 node --version 명령어를 치면 Node.js가 제대로 설치되었는지 확인할 수 있다.

그리고 React를 설치해주자 ( 그 전에 npx가 설치되어있는지 확인하고 안되어있다면 설치하자 )

npm : 라이브러리를 다운 - 빌드 -> 프로젝트 3개 (프로젝트 로컬에 다 다운받아서 중복되는 것들이 생김)

npx : 라이브러리를 다운 - 빌드 -> 프로젝트 3개 (전역적으로 다운 받은 것이 있다면 그것을 재사용, 없으면 다운)

-> 실행 -> 삭제

npm install -g create-react-app
npx create-react-app my-app

터미널에 해당 명령어를 입력해 React를 설치한다.

둘 다 입력해야한다!

그리고 다음 명령어를 입력하자

cd my-app

npm start

그러면 서버가 열리게 된다.

이제 다시 서버를 끄자 ctrl + c 누르면 끌 수 있다.

(글꼴 변경 : 파일 - 기본 설정 - 설정 - (좌측에서) 텍스트 편집기 - 글꼴)

나의 경우 강의 영상과 똑같은 쿠키런 폰트를 적용시켜 주었다.

React 문법을 검사해주는 확장 프로그램,

코드 자동 정렬 확장 프로그램,

React 코드 자동완성 확장 프로그램을 각각 설치한다.

그리고 파일 - 기본 설정 - 설정에 들어가서

그리고 .prettierrc 파일을 만들어 다음 코드를 작성해준다.

{
    "singleQuote": true,
    "semi": true,
    "tabWidth": 2,
    "trailingComma": "all",
    "printWidth": 80
}

다시

파일 - 기본 설정 - 설정에 들어가서

설치가 끝났다면 VSCode를 껐다가 다시 켜주자

이제 폴더 열기를 reactwork 안에 있는 my-app으로 하자 (이렇게 안하면 cd my-app 일일히 쳐서 들어가야 하므로)

실행 결과 )

+ 콘솔창에 두 번씩 찍히는 것 해결

index.js

index.js에서 해당 코드를 삭제한다.

이게 작성되어 있으면 개발모드에서 두 번씩 렌더링된다. (오류 잘 잡기 위해서)