강의 링크 : https://www.youtube.com/watch?v=hdsALpVJwgU&list=PL93mKxaRDidEfLM0I_FFb-98vfAQgXT82
해당 게시글은 위 링크의 강의를 보고 해당 내용을 정리한 게시글입니다!
리액트 -> ajax -> 데이터 변경 감지 -> UI가 자동 업데이트
리액트는 변경을 감지하는 엔진(Daemon), 그래서 서버처럼 계속 돌아야한다.
즉 리액트를 계속 동작하게 할 수 있는 서버가 필요하다. 이 서버가 Node.js 서버이다.
실행하게되면 리액트는 Node.js 위에서 계속 동작한다.
우선 VSCode 를 킨 후 reackwork 이름 폴더 만들어 열어주자
Node.js가 없다면 Node.js를 설치해주자
터미널에 node --version 명령어를 치면 Node.js가 제대로 설치되었는지 확인할 수 있다.
그리고 React를 설치해주자 ( 그 전에 npx가 설치되어있는지 확인하고 안되어있다면 설치하자 )
npm : 라이브러리를 다운 - 빌드 -> 프로젝트 3개 (프로젝트 로컬에 다 다운받아서 중복되는 것들이 생김)
npx : 라이브러리를 다운 - 빌드 -> 프로젝트 3개 (전역적으로 다운 받은 것이 있다면 그것을 재사용, 없으면 다운)
-> 실행 -> 삭제
https://reactjs-kr.firebaseapp.com/docs/installation.html
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에서 해당 코드를 삭제한다.
이게 작성되어 있으면 개발모드에서 두 번씩 렌더링된다. (오류 잘 잡기 위해서)
'자바 스프링 > react & springboot' 카테고리의 다른 글
#4 React useEffect, useMemo, useRef (0) | 2023.02.12 |
---|---|
#3 React useState (0) | 2023.02.11 |
#2 React 배열, 배열 수정 (0) | 2023.01.31 |
#1 React 실행흐름, 기본문법 (0) | 2023.01.19 |