[React] # 1 Why React?

About React

웹 애플리케이션의 규모가 커지고 다양한 UI(보여지는 것), UX(할 수 있는 것)를 구현하기 위해서는 이전의 Vanilla JS를 활용한 방법(DOM, jQuery)으로는 개발과 유지보수 하는 것이 어려워졌습니다.

규모가 커지고 복잡한 애플리케이션을 개발하며 많은 양의 데이터 관리와 코드 유지 보수를 더욱 편리하게 하기 위해 다양한 Frontend Framework(Library)가 등장하게 됩니다.

라이브러리

재사용이 필요한 경우, 반복적인 코드 작성을 없애기 위해 언제든지 필요한 곳에서 호출하여 사용할 수 있도록 Class나 Function으로 만들어진 것입니다. 사용 여부는 코드 작성자 선택사항이며 새로운 라이브러리 제작 시에도 엄격한 규칙이 존재하지 않습니다. 제작 의도에 맞게 작성하면 됩니다.

• Angular
  Google에서 개발. TypeScript 기반으로 매우 안정적이고 탄탄한 Frontend App 개발이 가능하며 Framework답게 다양한 기능이 내장. 하지만, 진입장벽이 높음.

• Vue
  Evan You라는 개인이 개발. 코드가 깔끔하고 배우기 쉽기 때문에 가장 나중에 생겼지만 성장 속도가 정말 빠름.

• React

  • “지속적으로 데이터가 변화하는 대규모 애플리케이션 구축하는 것” 을 목표로 Facebook에서 개발. MVC(Model-View-Controller) Architecture (ex. Angular, Vue)와는 다르게 리액트는 오로지 View만 담당.
  • 기능을 보완하기 위해 third-party 라이브러리(ex. React-router, Redux)를 함께 사용(전역 상태 관리, 페이지 라우팅 등).
  • 페이스북의 지속적인 관리와 함께 생태계가 활성화 되어 있으며 다양한 자료, 그리고 React Native의 사용으로 인해 사용자가 꾸준히 증가 중.

작업 환경 설정

Node.js & NPM

Node.js 는 자바스크립트가 브라우저 밖(ex. 서버)에서도 동작하게 하는 환경을 의미합니다. 프로젝트를 개발하는 데 필요한 주요 도구들이 Node.js 기반이기에 Yarn 혹은 NPM(node package manager)을 통하여 패키지 도구를 설치하고 버전을 관리할 수 있습니다.

툴 체인

리액트라는 라이브러리는 UI 기능만 제공합니다. 따라서 개발자가 직접 구축해야하는 것들이 많습니다. 전반적인 시스템을 직접 구축할 수 있으니 원하는 환경에 맞게 최적화할 수 있습니다.

하지만, 직접 개발환경을 구축하는 소요를 줄이기 위하여 bundler, compiler 등의 패키지를 통합하여 프로젝트를 시작하는데 필요한 기본적인 환경을 세팅하는 Create-React-App이라는 도구(toolchain)를 페이스북에서 배포하였습니다. 이 외에도 Next.js(서버 사이드 렌더링), Gatsby(고정적인 콘텐츠 지향) 등이 있습니다.

기본 구성

• Yarn 혹은 npm같은 package 매니저는 서드파티 패키지의 방대한 생태계를 활용할 수 있게 하며, 쉽게 설치하고 업데이트할 수 있게 합니다.
• webpack, Parcel과 같은 bundler는 코드를 모듈방식으로 작성할 수 있게 하고 이를 작은 단위로 묶어서 로딩 시간을 최적화할 수 있습니다.
• Babel 같은 compiler는 최신 JavaScript 코드를 구형 브라우저에도 실행되게 도와줍니다.

Setting

CRA를 이용하여 프로젝트를 설치하기 위해서는 :

1. 시작하고자하는 폴더 진입
   cd Desktop/폴더 이름
2. npm을 통한 프로젝트 설치
   npx create-react-app 프로젝트 이름
3. 설치된 프로젝트 진입
   cd 프로젝트 이름
4. 로컬서버 시작
   npm start
5. 필요 없는 파일 및 코드 정리

세팅의 구성

1. Modules

   • node.modules : 모든 패키지 소스 코드가 존재하는 폴더
   • package.json : 기본 패키지 외 추가로 설치된 라이브러리/패키지 정보(종류, 버전)가 기록되는 파일
     • dependencies : 리액트를 사용하기 위한 모든 패키지 리스트, 버전 확인 가능, 실제 코드는 node.modules 폴더에 존재
     • script :
       • start : 프로젝트를 development mode(개발 모드) 실행을 위한 명령어(npm run start)
       • build : 프로젝트 production mode(배포 모드) 실행을 위한 명령어. 서비스 상용화.
   • .gitignore : .gitignore 파일에 github 에 올리고 싶지 않은 폴더와 파일을 작성 가능. push 를 해도 .gitignore 파일에 작성된 폴더와 파일은 올라가지 않음.

2. Page & Component

   • public - index.html : <div id="root"></div>
   • src - index.js : React의 시작 (Entry Point)
     • ReactDOM.render( <App /> , document.getElementById('root'))
       ReactDOM.render 함수의 인자(화면에 보여주고 싶은 Comp, 첫 번째 인자의 DOM 위치)
   • src - App.js : 현재 화면에 보여지고 있는 초기 Comp

3. Folder

   • public 폴더 : SPA, images, data
   • src 폴더 : 공통 컴포넌트, page 단위 컴포넌트, styles

node.modules 와 package.json 에서 이중으로 패키지를 관리하는 이유

• 실제 내가 작성한 코드, 설치한 패키지는 내 로컬에만 존재.
• github 에 올릴 때 내가 작성한 코드와 함께 package.json(추가로 설치한 패키지 정보) 넘김.
• 다른 사람이 그것을 pull 받아서 npm install 만 입력하면 package.json 에 기록되어 있는 패키지의 이름과 버전 정보를 확인하여 자동으로 설치.
• 이때, github 에 올릴 때, node.modules 는 업로드하지 않음(불필요한 용량 차지),
• .gitignore 파일에 github 에 올리고 싶지 않은 폴더와 파일을 작성 가능.

새로운 라이브러리(패키지) 설치 시 주의사항

• 누군가 만든 소스코드를 다운받는 것.
• npm으로 설치 (ex. npm install slider).
• 설치 시 node modules 에 자동으로 설치.
• 하지만 package.json - dependencies 에 추가 자동으로 되는 건 아님.
• 따라서, npm install slider —-save 처럼 —-save 까지 작성해야 dependencies 에 추가.
• npm 버전이 업그레이드 됨에 따라 자동으로 추가되는 경우가 많지만 여전히 불안한 패키지들이 존재하기 때문에 패키지 설치 시 —-save 까지 입력하는 것을 권장.

배포(Diploy)

• npm run start로 실행된 웹 앱은 무거운 resource를 가지고 있기에 다른 사람들이 사용할 수 있도록 배포할때는 파일의 무게를 가볍게 줄여주어야 합니다.
• 터미널에서 npm run build 를 입력하면 build 라는 디렉토리가 생성됩니다. 그 안에 생성된 index.html 파일을 열어보면 공백이 전혀 없는 것을 볼 수 있습니다.
• 실제로 서비스를 할때는 build 안에 있는 파일을 사용하여 npx serve -s build 명령어를 통하여 파일을 서버에 올립니다.