작은 동작을 브라우저에서 실행할때 한 버튼을 클릭하면 화면전체가 새로 고침 된다는 불필요한 단점이 존재
-> 사이트가 이동될때 중복되는 부분은 내비두고, 다른 부분만 지우고 새로만들 수 있는 필요 증가
React
: 웹 UI를 구성하기 위한 프론트엔드 자바스크립트 라이브러리.
: 사용자 인터페이스를 만드는 데 사용되는 컴포넌트 기반의 라이브러리
: 사용자 인터페이스를 구축하기 위한 인기 있는 JavaScript 라이브러리
- 웹사이트를 동적으로 사용할 수 있도록 하기 위해 개발된 언어로, 기본적으로 웹 브라우저에 내장된 자바스크립트 엔진에 의해 동작한다.
브라우저 안에서 작동하는 언어가 크게 html, css, js이 존재
-> 많은 사람들이 js은 무조건 개발하게 되어있음 !!!
-> 대부분 사람들이 js 언어를 능숙하게 이용할 수 있게 되어 js를 이용해 모든 것을 개발할 수 있었음 좋겠다는 필요성이 증가하게 된것 !!
-> 그래서 나온것이 node.js!!!
node.js
: javascript 실행 프로그램
- 웹 서버와 같은 네트워크 프로그램을 만들기 위해 고안된 자바스크립트 런타임
- React 프론트엔드와 통신할 수 있는 백엔드 API를 쉽게 생성
- 백엔드, 프론트, 게임 개발등 다양한 것을 javascript만을 이용해 개발 할 수 있게 되었다.
React와 node.js의 관계
: Node.js는 React.js에서 필요로 하는 모듈을 간편하게 다운받을 수 있도록 도와주는 npm 서비스를 제공
: 즉 Node.js 라는 서버 위에서 돌아가는 프로그램이 React.js이다.
- React(프론트엔드), node.js(백엔드) => 프론트엔드는 데이터를 가져오거나 전송하기 위해 백엔드에 요청을 보낸다. Node.js가 React 앱이 사용할 수 있도록 노출하는 API, 특히 REST API를 통해 이루어짐
예를 들어 React 포트가 3000번에서 실행 되고, node.js가 5000번 포트에서 실행될때 React는 데이터를 가져오거나 전송하기 위해 http://localhost:5000/에 요청을 보내게 된다.
React 백엔드 설정 방법
1. Node.js 서버에 라우트를 설정
- 라우트를 axios나 fetch API와 같은 패키지를 사용하여 React 애플리케이션에서 호출
React는 프론트엔드를, Node.js는 백엔드를 담당. 둘 다 JavaScript로 작성되었지만, 서로 다른 목적과 사용 사례를 가지고 있다는거 명심 !!!
npm
: node pakage manager의 줄임말로 javascript로 만들어진 기능들을 사용할 수 있다.
- node.js를 다운받으면 npm은 자동으로 같이 설치 된다.
- npmjs.com에 내가 만든기능을 올릴수도 다른 사람이 만든 기능을 다운 받을 수 있다.
- npm pulish: 내가 만든기능을 올리기
- npm install: 다른 사람이 만든기능을 가져오기
but 느린 속도의 문제가 발생!!!!
yarn
- npm 의 느린 속도 문제를 해결하기 위해 페이스북에서 만듬
- yarn을 이용해 빠른 속도로 기능을 다운 받을 수 있다.
- node.js 설치 -> 2. npm 자동 설치 3. npm install yarn을 통해 yarn을 설치
내 컴퓨터에 설치
-
vscode
-
Node.js
-
yarn 설치
폴더에 설치
-
Next.js
-
Emotion
-
Apollo-Client, Graphql
-
Axios
-
Ant-Design
설치를 위한 CLI 명령어
-
GUL: Grapihic User Interface
-
CLI: Command LineInterface
현재위치를 알아보는 명령어 : pwd (print working directory)
폴더를 만드는 명령어 : mkdir class
현 폴더에 안에 목록 확인 : ls
-al: 숨겨져있는 숨긴 파일과 더 자세한 정보
경로를 이동하는 명령어 : cd (change directory)
- cd ../: 한 칸 위로 올라가는 명령어
폴더를 복사하는 명령어 : cp (copy directory)
-r : 안에 있는 폴더를 순환해 폴더 안의 내용을 전부 복사함
삭제하는 명령어 : rm
버전을 확인 하는 명령어 : --version
