<React> 0. React 란 & 프로젝트 셋팅하기

출처 & 강의 (https://youtu.be/KkHrsjyqbYg)  추천!!

 

소플의 처음 만난 리액트(소문난 명강의)

이 책은 오픈소스 자바스크립트 라이브러리인 리액트를 처음 배우는 개발자를 위한 책이다. 먼저 웹 서비스를 위해 알아야 할 리액트의 필수 개념을 짚어 본다. 그리고 간단한 실습을 통해 리액트 사용법을 익힌 뒤 마지막으로 미니 프로젝트(미니 블로그 만들기)를 통해 직접 프로젝트 기획부터 개발까지 경험해 본다. 리액트의 핵심 개념을 기초부터 탄탄히 익히고 실제 업무에 도움을 줄 수 있는 프로젝트 진행을 통해 체계적인 학습을 할 수 있도록 구성했다.

저자

이인제

출판

한빛미디어

출판일

2022.05.31

 

가.  React는 무엇인가?

 a. 라이브러리

  -  javascript 기반의 SPA(싱글페이지 어플리케이션)를 좀 더 편하게 만들기 위해 도와주는 UI 라이브러리이다.  

 

 b. Vue는 프레임워크인데 React는 라이브러리? 

  -  항상 React를 검색할때 따라오는 친구(?)가 Vue인데 왜 같은 친구끼리 누구는 라이브러리이고 누구는 프레임워크인지 궁금해진다. 

  -  먼저 프레임워크와 라이브러리의 차이는 제어권에 있다 제어권이 개발자인지 아니면 프로그램인지에 따라 나누어진다고 볼 수 있다.

       => 개인적인 생각으로는 React도 약간 프레임워크에 가깝지 않은가라는 생각이 들긴한다..

 

 c.  장점

  -  가상 DOM을 활용하여 변경된 부분만 실제 DOM에 업데이트 하므로 렌더링 속도가 빠르다.

        => 여기서 DOM은 Document Object Model의 약자로 웹페이지를 정의하는 객체이다. 

  -  컴포넌트 단위로 페이지를 구성하여 재사용성 및 유지보수 하기 편리하다.

  -  전세계 가장 많은 사용자를 보유하고 있기 때문에 커뮤니티가 잘 형성 되어있다. (== 구글링하기 쉽다.)

 

 

나.  프로젝트 셋팅하기

 a.  node.js & npm 설치

  - node.js 란 javascript로  네트워크 어플리케이션을 개발할 수 있게 해주는 환경이다.

  - npm이란 Node Package Manager로 node.js 로 만들어진 외부 모듈들(package)의 버전과 의존성을 관리 및 설치 삭제를 도와주는 역할을 한다.

  - 아래 링크를 통해 node.js를 설치하면 npm도 사용할 수 있다. (mac 이면 brew로 설치해도 된다.)

     =>  https://nodejs.org/ko/ 

Node.js

 

 b. 터미널 활용

  -  터미널에 npx create-react-app [프로젝트명] 으로 간단하게 React 프로젝트를 생성할 수 있다.

     => 여기서 npx는 execute npm package로 node packag를 다운 받고 바로 실행할 수 있도록 해준다.

           == 1. npm install -g create-react-app ,  2. create-react-app [프로젝트명] 이랑 동일하다고 보면 된다.

typescirpt 로도 바로 생성이 가능하다.

 

 c.   인텔리제이

  -  인텔리제이의 경우 간단하게 GUI를 통해서 생성이 가능하다. 아래처럼 생성해주면 된다.

 

다.  실행하기

 a. VSCode 

  -  VSCode 의 터미널을 이용해 위와 같이 프로젝트 생성 및 실행이 가능하다. 생성한 프로젝트가 있는 경우 open 하여 쓸 수 있다.  

    => 열린 터미널에서 npm start 명령어를 입력하여 실행하면 된다. 

 

 b. 인텔리제이

  -  단순 실행 버튼을 눌러서 실행이 가능하다.

  -  no such file or directory / no executable found in $PATH 가 발생하여 프로젝트 생성할때 Node interpreter를 Download Node로 선택했다.

    => 인텔리제이 예전버전을 써서 그런가 싶은데 node가 설치 되어있는데도 인식하지 못했고 node 경로를 변경해도 동일하게 오류가 발생했다.

     

 c.  실행화면

  -  두 방법 모두 실행 시 아래와 같이 React index 페이지 화면이 잘 나와야한다.