React를 사용하는 이유
요즘 웹 어플리케이션을 보면, 규모가 상당히 커지고 UI/UX도 다양하고 복잡하게 구현되어 있는 것을 알 수 있다. 이러한 복잡한 어플리케이션을 개발하면서 생산성을 향상시키고 코드의 유지보수를 편리하게 하기 위해 보다 발달된 프론트엔드 프레임워크(라이브러리)가 등장하게 되었다.
- 리액트는
Frontend[프레임워크/라이브러리]
Angular
구글에서 개발한 프레임워크로, TypeScript에 기반해 매우 안정적이고 다양한 기능들이 내장되어 있지만 무겁고 배우기 어렵다는 단점 존재.
Vue
Evan You 라는 개인이 개발한 프레임워크, 깔끔한 코드작성이 가능하고 배우기 쉬워 가장 나중에 생겼으나 그 성장 속도가 매우 빠르다.
React
지속적으로 데이터가 변화하는 대규모 애플리케이션을 구축하는 것을 목표로 Facebook에서 개발한 라이브러리 MVC(Model-View-Controller) 구조인 Angular,Vue와는 달리 리액트는 Only View만 담당한다.
때문에 내장된 기능들이 부족히 third-party 라이브러리 (ex React-router,Redux)를 함께 사용한다. 이용자가 상당히 많고 커뮤니티가 활성화 되어 있어 자료 얻기가 상대적으로 용이하다.
그럼 React가 뭘까??
페이스북에서 개발하고 관리하는 사용자 인터페이스를 만들기 위한 Javascript 라이브러리. 리액트는 가상 돔(Virtual Dom)을 통해 UI를 자동적으로 빠르게 업데이트 한다. 여기서 가상 돔이란 이전의 UI상태를 메모리에 유지해 수정된(변경된) UI를 최소화 시키는 기술이다.
파일 setting
CRA = React로 프로젝트를 시작하는데 필요한 개발 환경을 세팅해주는 도구 (toolchain)
-
node.modules
- CRA를 구성하는 모든 패키지 소스 코드가 존재하는 폴더
-
package.json
- CRA 기본 패키지 외 추가로 설치된 라이브러리/패키지 정보(종류,버전)가 기록되는 파일
- 모든 프로젝트에는 package.json이 존재
dependencies
- 리액트를 사용하기 위한 모든 패키지 리스트, 버전 확인 가능
-실제 코드는 node.modules 폴더에 존재
-node.modules와 package.json에서 이중으로 패키지를 관리하는 이유
협업 시 github에 불필요한 node.modules는 올리지 않는다. 다른 사람이 pull 받아서npm install만 하면 package.json에 기록되어 있는 패키지를 버전에 맞게 자동으로 설치한다.
- scripts
- run : 실행을 위한 명령어npm run start
-build : 프로젝트 배포 모드 실행을 위한 명령어. 서비스 상용화
-
.gitignore
- .gitignore 파일에는 github에 올리고 싶지 않은 폴더와 파일을 작성할 수 있다.
폴더 convention
-
public 폴더
- index.html
- images 폴더
- data 폴더 : mock data 관리
-
src 폴더
-
components 폴더 : 모두가 사용하는 공통의 컴포넌트 관리 (ex navbar)
-
pages : 페이지 단위의 컴포넌트 폴더로 구성 (ex login/main )
-
style 폴더 : reset.scss, common.scss ( 공통적으로 사용하는 css 팡리)
-
components 폴더에는 여러 페이지에서 동시에 사용되는 컴포넌트들을 담는다. Page 폴더에는 해당 페이지 내에서만 사용되는 컴포넌트들을 하위 폴더들로 관리하게 된다.
