크롬 V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임으로서, 웹 브라우저 환경이 아닌 곳에서도 자바 스크립트를 사용하여 연산할 수 있다. node js를 설치하면 리액트 프로젝트를 만들 때 필요한 npm도 같이 설치가 된다.
React에 시작하기 앞서, Node js와 React js의 관계를 알 필요가 있다. React를 개발할 때 Node js가 필수로 같이 개발되는 것을 볼 수 있었을 것이며 나 또한 React를 개발하기 위해서는 Node js가 꼭 필요한 줄 알았다. 하지만 React를 사용하여 개발할 때 Node js가 꼭 필요한 것은 아니다. Node js는 자바스크립트 런타임 환경이며, React js는 DOM을 조작할 수 있는 프론트엔드 프레임워크이다. Node js는 React js를 더 편하게 쓰기 위해 필요한 도구를 제공하는 오픈소스이다. 따라서 React를 개발할 때 이미 구현해놓은 편리하고 필요한 모듈과 라이브러리 등을 사용하고 다운받기 위해 Node js를 사용하는 것이다. 그러므로 React를 시작하기 위해 Node js 설치 방법을 간단히 알아보고자 한다.
2. 설치가 완료되면 명령 프롬프트(cmd)창에서 설치된 node js의 버전이 확인 가능하다.
예전에 설치를 하여 위의 버전과 다름
node js를 설치하면 npm이 함께 설치된다. 이 npm을 통해 다양한 모듈을 다운받아 사용 가능하다.
2. React 시작
성공적으로 node js의 설치를 마치고 본격적으로 React 프로젝트를 생성해 개발을 시작해볼 것이다.
그전에 리액트가 무엇인지 알아야 한다.
★ 리액트란? ★
어플리케이션의 뷰를 책임지는 라이브러리로 넷플릭스, 인스타그램 등 여러 회사에서 사용되고 있다.
리액트는 여러 컴포넌트로 구성되어 있다. 컴포넌트가 여러 개로 나눠져 있어 하나의 컴포넌트를 여러 곳에서 사용할 수 있다. 또한 여러 명이 각자 맡은 컴포넌트를 동시에 수정할 수 있다.
리액트는 가상 돔을 사용하기 때문에 다른 자바스크립트 프레임워크에 비해 빠른 성능을 보여준다. 이때 가상돔이란 메모리 상에 실제 돔을 가볍게 복사해둔 것이다. 리액트는 메모리에 복사해놓은 가상 돔과 현재의 가상 돔을 비교해 바뀐 부분만을 실제 돔에 적용한다. 이런 방식을 사용해 인터렉션이 많은 웹사이트에서 훨씬 더 나은 성능을 보여준다.
리액트는 유저 인터페이스를 위해 JSX(JavaScript Syntax eXtension) - 자바스크립트를 확장한 문법을 사용한다. JSX는 자바스크립트를 사용하는 파일 안에 HTML 문법을 사용하여 시각적으로 더 도움을 준다.
VS Code를 사용하여 프로젝트를 만들고자 하는 폴더를 생성한다.
명령 프롬프트 혹은 vs code 터미널 창에서 프로젝트를 만들 폴더로 이동한다.
cd react-project //리액트 프로젝트를 생성하기 위해 react-project 폴더로 이동
3. "npx create-react-app ..."을 사용해 리액트 프로젝트를 생성한다.
// first-react-project이름의 프로젝트를 만들 것이다.
npx create-react-app first-react-project
4. 모든 과정이 완료된 후 여러 파일들이 생성된 것을 볼 수 있다. 각각의 파일의 역할은 다음 글에서 알아볼 것이다. 생성된 리액트 프로젝트를 실행하기 위해서는 VS Code 터미널에서 "npm run start" 혹은 "npm start"를 입력하면 리액트가 실행되는 것을 볼 수 있다. 이때 주의할 점은 리액트 프로젝트를 만든 파일이 위치한 경로 혹은 package.json파일이 위치한 경로까지 간 후에 해당 프로젝트를 실행해야 한다. 아니면 오류가 발생할 것이다.
npm run start(npm start)
< 리액트를 크롬에서 실행하기 >
※ 참고로 리액트 프로젝트를 실행할 때 크롬에서 실행하고 싶지만, 마이크로 소프트 엣지나 다른 브라우저에서 실행되는 분들이 있을 것이다. 원하는 브라우저에서 리액트를 실행시키고 싶다면, 기본 프로그램을 크롬으로 변경하면 해결된다.
[React JS] 설치 및 프로젝트 생성 방법
1. node js 설치
Node js란?
크롬 V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임으로서, 웹 브라우저 환경이 아닌 곳에서도 자바 스크립트를 사용하여 연산할 수 있다. node js를 설치하면 리액트 프로젝트를 만들 때 필요한 npm도 같이 설치가 된다.
React에 시작하기 앞서, Node js와 React js의 관계를 알 필요가 있다. React를 개발할 때 Node js가 필수로 같이 개발되는 것을 볼 수 있었을 것이며 나 또한 React를 개발하기 위해서는 Node js가 꼭 필요한 줄 알았다. 하지만 React를 사용하여 개발할 때 Node js가 꼭 필요한 것은 아니다. Node js는 자바스크립트 런타임 환경이며, React js는 DOM을 조작할 수 있는 프론트엔드 프레임워크이다. Node js는 React js를 더 편하게 쓰기 위해 필요한 도구를 제공하는 오픈소스이다. 따라서 React를 개발할 때 이미 구현해놓은 편리하고 필요한 모듈과 라이브러리 등을 사용하고 다운받기 위해 Node js를 사용하는 것이다. 그러므로 React를 시작하기 위해 Node js 설치 방법을 간단히 알아보고자 한다.
1. https://nodejs.org/ko/ 윈도우 환경을 사용하고 있다면 다음 링크로 들어가 node js를 설치한다.
2. 설치가 완료되면 명령 프롬프트(cmd)창에서 설치된 node js의 버전이 확인 가능하다.
node js를 설치하면 npm이 함께 설치된다. 이 npm을 통해 다양한 모듈을 다운받아 사용 가능하다.
2. React 시작
성공적으로 node js의 설치를 마치고 본격적으로 React 프로젝트를 생성해 개발을 시작해볼 것이다.
그전에 리액트가 무엇인지 알아야 한다.
★ 리액트란? ★
어플리케이션의 뷰를 책임지는 라이브러리로 넷플릭스, 인스타그램 등 여러 회사에서 사용되고 있다.
리액트는 여러 컴포넌트로 구성되어 있다. 컴포넌트가 여러 개로 나눠져 있어 하나의 컴포넌트를 여러 곳에서 사용할 수 있다. 또한 여러 명이 각자 맡은 컴포넌트를 동시에 수정할 수 있다.
리액트는 가상 돔을 사용하기 때문에 다른 자바스크립트 프레임워크에 비해 빠른 성능을 보여준다. 이때 가상돔이란 메모리 상에 실제 돔을 가볍게 복사해둔 것이다. 리액트는 메모리에 복사해놓은 가상 돔과 현재의 가상 돔을 비교해 바뀐 부분만을 실제 돔에 적용한다. 이런 방식을 사용해 인터렉션이 많은 웹사이트에서 훨씬 더 나은 성능을 보여준다.
리액트는 유저 인터페이스를 위해 JSX(JavaScript Syntax eXtension) - 자바스크립트를 확장한 문법을 사용한다. JSX는 자바스크립트를 사용하는 파일 안에 HTML 문법을 사용하여 시각적으로 더 도움을 준다.
3. "npx create-react-app ..."을 사용해 리액트 프로젝트를 생성한다.
4. 모든 과정이 완료된 후 여러 파일들이 생성된 것을 볼 수 있다. 각각의 파일의 역할은 다음 글에서 알아볼 것이다. 생성된 리액트 프로젝트를 실행하기 위해서는 VS Code 터미널에서 "npm run start" 혹은 "npm start"를 입력하면 리액트가 실행되는 것을 볼 수 있다. 이때 주의할 점은 리액트 프로젝트를 만든 파일이 위치한 경로 혹은 package.json파일이 위치한 경로까지 간 후에 해당 프로젝트를 실행해야 한다. 아니면 오류가 발생할 것이다.
< 리액트를 크롬에서 실행하기 >
※ 참고로 리액트 프로젝트를 실행할 때 크롬에서 실행하고 싶지만, 마이크로 소프트 엣지나 다른 브라우저에서 실행되는 분들이 있을 것이다. 원하는 브라우저에서 리액트를 실행시키고 싶다면, 기본 프로그램을 크롬으로 변경하면 해결된다.
'Front-End > React JS' 카테고리의 다른 글