React 초기세팅 해보자!

React를 시작하기전에!

여러 사람에 의해 공유되어 사용될 목적으로 통합하여 관리되는 데이터의 집합을 말한다. 현대적인 의미의 데이터베이스는 몇개의 자료파일을 조직적으로 통합하여 자료 항목의 중복을 없애고 자료를 구조화하여 기억시켜놓은 자료의 집합체로 데이터를 저장 및 보존하는 시스템이다. 프로그램을 개발하다보면 사용자에 의해 성생된 데이터와 개발자에 의해 프로그램에 넣은 데이터가 쌓이게 된다. 데이터베이스를 사용하지 않으면 이 데이터들은 프로그래을 종료하는 순간 전부 날아가게 된다. 이런 형상을 방지하기 위해 데이터들을 데이터베이스에 넣고 보관하는 방식을 사용한다.

 

 

---

 

 

 REACT 시작! 

 

 

1. Node.js 설치하기 (Node.js링크)

: 먼저 Node.js를 설치한다. 사용하는 운영체제에 맞춰 설치를 해주면 된다. 설치가 완료되었으면, 터미널 또는 cmd, git bash을 실행시킨다. 설치했던 node 패키지 환경에 따라 작성방법이 다르다.

 

npm을 사용하는 경우

 

yarn을 사용하는 경우

 

2. CRA 초기 세팅 구성

 

: 초기세팅에서 불필요한 파일이나 주석은 삭제 처리 후 필요한 폴더들을 추가한다. [public], [src]가 새로 생성한 폴더다. 초기세팅을할 때 아래의 요소들을 이해하는것이 좋다.

 

 

---

 

1. node.modules - package.json - .gitignore

[node.modules]는 node에서 설치된 모든 모듈이 들어있다. 해당부분은 개발할때 따로 손댈 필요는 없다. 깃허브에 올릴때 해당 파일은 용량이 너무 크기 때문에(불필요한 용량차지) 올리지 않는다. 깃허브에 올릴때는 .gitignore에 올리고 싶지 않은 파일을 작성하면 된다.

 

[package.json]는 라이브러리/패키지 세팅 리스트 정보(종류, 버전) 들어있는 파일이다. 모든 프로젝트마다 package.json은 하나씩 존재하고 설치한 패키지는 내 로컬에만 존재하니 프로젝트로 공유할때 내가 작성한 코드 + package.json(설치한 패키지 정보) 넘겨야한다. 깃허브에서 클론을 복사했다면 꼭  npm installnpm install slider —-save 를 입력하여 package.json에 정보가 있는 관련 모듈 전부 다운로드 하자!

 

dependencies안에 리액트를 사용하기 위한 모든 패키지 리스트, 버전 확인 가능하다. 실제코드는 node.modules에 있다. 

 

[package.json]는 라이브러리/패키지 세팅 리스트 정보(종류, 버전) 들어있는 파일이다. 모든 프로젝트마다 package.json은 하나씩 존재하고 설치한 패키지는 내 로컬에만 존재하니 프로젝트로 공유할때 내가 작성한 코드 + package.json(설치한 패키지 정보) 넘겨야한다. 깃허브에서 클론을 복사했다면 꼭 패키지정보를 확인하고 설치를 진행하자.

"scripts" 

run : 프로젝트를 development mode(개발 모드) 실행을 위한 명령어(npm run start)

build: 프로젝트 production mode(배포 모드) 실행을 위한 명령어.

 

 

---

 

2. index.html - index.json - app.js

 

초기 폴더를 세팅할때 [public],[src]를 제작한다.  [src] - [Compornent] & [images] & [Style] 기억하기 쉽게 순서대로 제작하자! 

 

[index.html]는 기본메인html로 안에 <div id="root"></div>가 있는지 확인한다.

 

[index.json]는 실제로 React가 시작하는 곳(r구동장소)이며, React, ReactDOM이 세팅되어있는지 확인한다. 파일명이나 변수명을 함부로 수정하지 말자.

 

[app.js]는 컴포넌트등 실제 리엑트돔 내용을 구현하는 곳이다.

 

 

 

참고문서 : https://joonsikyang.github.io/posts/react-foundation-cra-default-setting

[React] Foundation - 3. CRA default Settings - Joon Sik Yang

참고문서 : https://lktprogrammer.tistory.com/72

[JavaScript][React] CRA (Create-React-App)을 통해 쉽게 React 개발 환경을 구성하자

참고문서 : https://velog.io/@ceres/TLI-26.-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EA%B3%B5%EB%B6%80%EC%83%9D%ED%99%9C%EC%BD%94%EB%94%A9

TIL #26. 리액트-CRA