‘React.js’는 SPA 기반의 프론트엔드 개발 프레임워크 중 하나로서, 컴포넌트 단위의 독립적인 블록을 이용한 개발 방법을 이용합니다. 비슷한 프레임워크인 AngularJS, VueJS보다 선호도가 좋다.
SPA(Single Page Application) 아키텍쳐
Single Page Application, 한 개의 페이지로 이루어진 애플리케이션이라는 의미로 MPA(Multi Page Application)과는 상반된 개념이다.
기존 MPA의 문제점(super easy version)으로 리렌더링(re-rendering) 즉, 페이지가 갱신되는 상황이 엄-청나게 많기 때문에 사용감에 불편함이 있을 수 있는데 이를 보완하는 방안으로써 SPA를 사용할 수 있다.(부분적인 요소만 살짝 바꿔주는 개념으로 이해)
특징과장점 딱 한개의 페이지(Single Page)로 구성된 웹 앱이다 서버에 1회 리소스를 요청한다. -> 그 이후에는 필요할 때, 필요한 데이터만 받아와서 기존 페이지를 ‘수정’해주는 방식으로 화면을 수정 자연스러운 UX(User Experience)를 구현할 수 있다. 비슷한 기술들로는 Angular, Vue있다.(구현의 차이는 각각 존재해요)
단점 SEO(Search Engine Organization)을 위해서 html페이지 전체가 필요한데, SPA의 html은 단 하나로 검색엔진 즉, 로봇이 찾을 수가 없다.(페이지가 많은 MPA는 가능한 부)
SPA 프레임워크의 종류 ReactJS VueJS AngularJS
node 설치 확인하기
node -v
npm 이란?
NPM(Node Package Manager)은 무수히 많은 third-party 패키지들이 모여있는 집합소이다. 우리는 npm에서 여러 패키지를 다운받아 활용할 수 있다.
애플의 앱스토어, 구글의 플레이스토어처럼, 전 세계의 많은 개발자들이 본인들이 만든 유용하고 다양한 패키지들 또는 프로그램을 ‘온라인 데이터베이스’에 올려놓는. 그걸 쉽게 설치하고 삭제할 수 있도록 도와주는 관리자
<차이점> NPM node.js를 설치할 때 자동으로 생성(npm을 가지고 yarn을 설치한 것) Node Package Manager의 약자로 NPM platform 자체이다.
YARN 2016년에 페이스북에서 개발한 패키지 관리자 npm과의 호환성이 좋고, 속도나 안정성 측면에서 npm보다 월등히 좋다.
요약 속도 : Yarn👍 보안 : Yarn👍
런타임이란 프로그래밍 언어가 구동(running)되는 환경(environment)
1. 브라우저(ex : Chrome, Microsoft Edge, Firefox, Internet Explorer) 2. node환경
즉, javascript 파일을 실행할 수 있는 방법이 2가지가 있다는 이야기
CRA(Create React App)
한 줄의 명령어 입력으로 React 프로젝트 개발에 필수요소를 자동으로 구성하는 방법
React 프로젝트를 구성하기 위해 필요한 것들은 상당히 많은데 WebPack, babel, eslint 등 이러한 것들을 신경쓰지 않아도 됨 → 보일러플레이트
💫CRA로 프로젝트 생성하기
리엑트로 프로젝트를 생성하고 싶은 폴더에 해줘야
ls #현재 내가 위치하고 있는 곳이 어디인지 확인해보세요.
cd 폴더이름 #리액트 프로젝트를 생성하고 싶은 폴더로 들어갑니다.
yarn create react-app week-1 # week-1프로젝트 생성!
yarn create react-app . # 현 위치에 프로젝트 생성!
이런식으로 구조가 갖춰져 있어야함 파일 경로 잘 확인할 것
cd week-1 # week-1 폴더로 이동
yarn start # 프로젝트 시작
👌준비완료! 이제는 src/App.js 파일을 수정하고 저장하면 새로고침이 없어도 UI가 자동 업데이트 된다.
cd # 맨 처음의 경로로 돌아감
cd 폴더이름 #리액트 프로젝트를 생성하고 싶은 폴더로 들어감
yarn create react-app 폴더이름 #프로젝트를 시작할 폴더와 프로젝트 생성이 동시에 진행됨
yarn create react-app # 폴더 생성과, 경로가 올바르게 지정되었다면 바로 프로젝트를 생성