React(1) MAC OS 리액트 개발환경 세팅

개발 환경 세팅

(실행환경은 MacOS에서, Visual Studio Code로 진행하였다.)
(윈도우도 자세히는 아니지만 알려 줄 예정)

node.js 설치

※ 엥! 저는 react를 하고 싶어서 왔는데요!! 왜 갑자기 node.js?? :
- Node.js는 JavaScript runtime environment다. 기본적으로 자바스크립트의 런타임(=실행할 수 있는) 환경은 브라우저이다. 
각 브라우저들은 자바스크립트를 읽고 해석하기 위해 엔진들을 가지고 있는데, 그 중 구글 크롬에서 사용되었던 v8 자바스크립트 구동엔진을 따로 떼어내서 Node.js를 출시하였다.
- 즉, 브라우저 위에서 자바스크립트 엔진을 돌리는 것에서 벗어나, 로컬 PC에서 바로 자바스크립트를 읽고 해석할 수 있게 된 것이다.
- 또한, Node.js를 설치하면 NPM(Node Package Manager)이 함께 설치되는데, 이 NPM을 통해 다양한 모듈(패키지)들을 다운받아 사용할 수 있다.
- react도 하나의 패키지이므로, npm을 통해 설치 할 수 있다.
(html 파일에 직접 리액트 설치해도되는데, 복잡하므로, create react app이라는 라이브러리로 설치하려고한다.
(이는 npm을 사용해야함) )

※ 엥! 그렇다면 npm만 설치하면 안 될까?
- React는 클라이언트 기반 라이브러리기 때문에, 그냥 NPM만 설치해도 react와 react-dom 라이브러리를 사용할 수 있다. 하지만 Node.js가 있으면 babel(바벨) 이라는 컴파일러 도구를 추가로 다운받아 JS 대신 JSX를 사용할 수 있다.
또한 ES6 문법을 ES5로 변환하는 기능을 갖고 있어, React를 다양한 브라우저 환경에서 실행시키는 것이 가능해진다.

※ JSX가 뭔데요?
JSX는 자바스크립트에 XML을 추가한, 확장된 문법으로, 리액트로 프로젝트를 개발할 때 사용된다. 즉 공식적인 문법은 아니다. 브라우저에서 실행되기 전에 앞서 말한 babel을 사용하여 일반 자바스크립트 형태의 코드로 변환되어야 한다. 물론 React 개발에서 JSX가 필수는 아니다.

• 구글에 node.js를 검색 후, 사이트에 접속한다.

https://nodejs.org/ko

Node.js

• LTS버전을 클릭하고 다운로드 받는다.
  (필자는, 제일 최신 버전보다는 안전하게 많이 사용된 LTS버전을 선호한다. . . )

---

프로젝트 생성

• 자신이 react를 작업할 폴더에, 작업용 폴더를 만들도록 하자
• 자신이 작업할 작업용 폴더에 오른쪽 클릭을 눌러, 서비스 탭의 "폴더에서 새로운 터미널 열기"를 클릭한다.
  (윈도우에서는 작업용 폴더에 Shift + 우클릭 후, "여기에 PowerShell 창 열기"를 클릭)

• 열린 터미널에, npx create-react-app [프로젝트명] 을 타이핑 후 엔터
  (Success 어쩌구하는 문구들이 나오면 닫아도 된다.)
  

※ 이때 나올 수 있는 에러 : "npx command not found ~~" 에러
- 대부분 nodejs 제대로 설치 안해서 그렇다. (옛날 버전을 다운받아서 그럴 수도 있다.)
- 터미널을 껐다 다시 켜보자.
- Mac OS : brew 쓰지 말고 그냥 다운 받자.
- Windows : C 드라이브에 얌전히 설치하자.

※ 이때 나올 수 있는 에러 : "permission이 없다~~ " or "허가되지않은 스크립트~~" 에러
- Mac OS : 터미널에 "sudo npx create-react-app [프로젝트명]" 입력
- Windows : 윈도우 누르고 검색에서 Powershell 검색 -> 우클릭 -> 관리자 권한으로 실행한 뒤 ->
"Set-ExecutionPolicy Unrestricted" 라고 입력 후 엔터

※ 이때 나올 수 있는 에러 : "The engine "node" is incompatible with this module" 에러 
npx로 설치시 이런 에러가 있을 수 있다. nodejs 버전이 낮거나 너무 높다는 뜻이며 nodejs를 요구하는 버전으로 재설치하면 된다. 

• vscode에서 작업폴더란 가져와서 코딩을 하면 된다!
• 바로바로 홈페이지 미리보면서 코딩하기 -> 화면 상단의 탭의, "터미널"탭에서 -> "new terminal"클릭 -> "npm start"치기

(이 때, 작업 폴더으로 terminal에서 CLI(Command Line Interface)로 명령어를 입력해서 컴퓨터를 조작 접근을 해야한다.)

※ CLI(Command Line Interface) : 명령어를 입력해서 컴퓨터를 조작하는 방법.
- 우리가 흔히 사용하느라 자각하지못했던 방법인 GUI(Graphical User Interface)는,
마우스로 클릭하거나 터치스크린으로 터치를 해서 컴퓨터를 조작하는 방식이다.
하지만, 많은 개발환경을 구성해야하는 개발자라면, 미리 작성된 명령어 한 세트만 입력해두고 딴짓 좀 하다 오면 필요한 프로그램이 자동화되어 설치되고 각종 시스템 파라미터가 구성이 끝난 상태로 만들 수 있어서, CLI를 가끔 사용한다.
- 현재 일반적으로 많이 쓰이는건 bash이고
맥 최신버전은 기본 쉘이 zsh이다.

---

 

참고 문서 :

왜 npm과 node.js를 이용해서 react? : https://velog.io/@gyutato/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EA%B3%B5%EC%8B%9D-%EC%9E%90%EC%8A%B5%EC%84%9C-%EB%94%B0%EB%9D%BC%ED%95%98%EA%B8%B0-1.-%EA%B0%9C%EB%B0%9C-%ED%99%98%EA%B2%BD-%EC%85%8B%ED%8C%85

[React][공식문서] node와 npm부터 이해하기