TIL : 리액트와 인사하기 - 1

 

리액트에 대해서 무엇이라고  말하는가?

 리액트  공식문서에 따르면  A JavaScript library for building user interfaces  입니다. 

 

이말은  즉 리액트는  사용자가 보는  웹 또는 앱 화면을 구축하는데 사용되는 라이브러리 라는 것입니다. 

 

 

SPA는  무엇이고  , 그전에는 어땠는가?

   갑자기 왠  SPA???   , 리액트   위키백과에 따르면  SPA 와  모바일 어플리케이션 개발에 이용된다고 들었습니다.

     

그래서  SPA는  무엇인가요 . 그전에는  어떤 방식으로 했나요 

 

SPA는  싱글 페이지 어플리케이션의  약자이며  ,  영어 그대로  보여지는  페이지(ihtml)가 하나라서  SEO에 약함니다. 하지만 ,  우리가  좋아요를  눌러도  새로고침없이 반영되기 때문에  그 점은  좋습니다.

 

그 전에는    웹페이지에서  좋아요를 누르면   페이지가 갱신이 됨과  동시에  서버에서  데이터를  불러오면서  깜박거렸습니다.  그래서  사용자 경험적인 면에서 좋지 못했습니다.

 

참고로 , 모바일 어플리케이션은  리액트 네이티브를  이용한다고 알고있습니다.

 

 

리액트  세팅

 

같이  리액트 프로젝트를  만들어봅시다. 

 

 

1. 그러기 전에  다음과  같이 nodejs 라는 것이 필요합니다. 저는 이미가 설치가 되어있어서  설치 사이트를  남길게요 

 

 

2. 설치가 끝나셨으니  리액트 프로젝트를  설치하겠습니다.  저는  참고로  npx를 이용하겠습니다.

npx
npm 5.2버전부터 npx가  기본 패키지로 제공되는데   패키지를  설치없이  바로 적용할수 있습니다.

 

 

바로 아래 주소는   리액트 프로젝트 생성 명령어를 제공하는  npm   주소입니다. 

저는 또한  이 명령어가 있어서 좋은 점이  리액트 프로젝트를  일일히 세팅할 필요가 없고  간편하다는 점이 너무

좋았습니다. 

 

https://www.npmjs.com/package/create-react-app

create-react-app

 > 	npx create-react-app [프로젝트 이름]

 

- 왜  npx죠?

 

npm은  전역으로 설치하면  한번  설치한 버전만  계속 사용하기 때문에  업데이트나 개선 사항 활용하기 어렵습니다ㅠㅠ

npx는  패키지를  설치없이  바로 적용할수 있고, 또한 , 항상 최신버전의  패키지를  사용할수 있다는 점에서  npx라 골랐습니다.

 

-  그러면  npm 과  npx 의 차이는 무엇인가요?  

 

npm은  패키지를  실행 , 삭제 , 업데이트 하는  관리자이고 , 

 npx는  로컬  또는 원격 패키지 실행기라는  점에서  차이가 있다고 봅니다.

 

 

설치 성공했습니다. 그렇다고 해서  끝난것이 아닙니다.

 

다음과 같이  npm start 했을 때 리액트 샘플 프로젝트가  나타난다면 성공입니다.!!!!!

 

 

찾아주셔서 감사합니다.