본문 바로가기
[WEB]/React

React - 사전 준비

by hi_kmin6 2020. 2. 28.

React 

 

React – A JavaScript library for building user interfaces

A JavaScript library for building user interfaces

reactjs.org

리액트에 관한 글 작성을 시작하겠습니다.

 

 

 

https://academy.nomadcoders.co/

 

Academy

% Complete

academy.nomadcoders.co

위의 NomadCoders에서 제가 수강한 'ReactJS로 웹 서비스 만들기'를 바탕으로 React글을 작성할 계획입니다. 무료 강의임에도 불구하고 배워가는 것이 많았습니다.

 

해당 카테고리의 글들은 배운 내용의 단순 정리가 아닌 To Do List 서비스를 만들어보며 정리해나갈 생각입니다. 

 


 

이번 글은 React를 시작하기 위해서 설치할 프로그램들과 설치 및 확인 방법입니다.

 

# 1. Node.js https://nodejs.org/ko/

 

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

 

위의 사이트에 가서 LTS(안정적 버전) 혹은 최신 버전을 본인의 선택에 따라 설치해주시면 됩니다.

 

설치가 되었는지 확인하는 방법은 cmd 창을 띄워 주시기 바랍니다.

그리곤 다음을 입력해 주세요.

 

node -v

node.js 버전 확인

이는 node.js의 버전을 확인하는 코드입니다.

 

제가 글을 작성한 날짜 기준 node.js의 안정화 버전은 12.16.1이며, 최신 버전은 13.9.0입니다.

저는 과거에 설치를 해놨기에 현재 10.16.3이 나오고 있습니다.

 

더보기

추후 node.js의 업데이트 방법 글을 작성해 보겠습니다.

 

2. npm https://www.npmjs.com/

 

npm | build amazing things

Build amazing things We're npm, Inc., the company behind Node package manager, the npm Registry, and npm CLI. We offer those to the community for free, but our day job is building and selling useful tools for developers like you. Take your JavaScript devel

www.npmjs.com

 

npm은 위의 페이지에 방문해서 설치하실 필요 없습니다.

npm은 node.js와 함께 오기 때문에 별도로 설치하실 필요 없이 다음의 코드를 입력해 설치 확인만 해주시면 됩니다.

 

npm -v

npm 설치확인

제 현재 버전은 6.13.7이 나오고 있습니다.

 

 

3. npx  https://www.npmjs.com/package/npx

 

npx

execute npm package binaries

www.npmjs.com

npx는 위의 node.js와 npm이 잘 설치된 것을 확인하신 뒤 설치해주세요.

npx의 설치는 다음의 코드를 입력해주시면 됩니다.

 

npm install npx -g

저는 이미 설치해 두어 따로 cmd창 캡처는 진행하지 않았습니다.

 

 

4. 코드에디터 (VScode) https://code.visualstudio.com/

 

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.  Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

code.visualstudio.com

 

다른 코드 에디터들도 많지만 VScode를 설치한 이유는,

확장팩들이 많아 커스터마이징도 쉽고 코드에디터임에도 IDE급 성능을 발휘해주기 때문입니다.

 

본인의 취향에 맞는 에디터를 사용해주시면 됩니다.

 

 

5. Git  https://git-scm.com/

 

Git

 

git-scm.com

깃은 제 생각에 필수는 아닙니다.

 

하지만 깃에서는 일정 수준 내의 HTML, CSS, JavaScript로 작성된 프로젝트에

무료로 서버를 제공하고 있기에, React Application을 만들어 로컬에서만 보이게 하기보다

주변 사람들에게도 보여 줄 수 있는 기회를 만들면 더욱 도움이 될 것 같습니다.

 

설치 방법은 위의 링크로 이동해서 자신의 운영체제에 맞는 것을 선택해 설치해주시면 되겠습니다.

 

설치의 확인은 다음의 코드를 입력해주시면 됩니다.

git --version

 

git 설치 확인

git version은 2.23.0으로 나오고 있습니다.

더보기

<Git>

깃에 관해서도 현재 공부 중이기 때문에 글을 작성하고 있으니,

혹시 깃을 잘 모르신다면 참고해주시면 되겠습니다.

 

 


작성 록

2020/02/28

 

JavaScript를 배우고, React를 배우며 차근차근 글을 정리했다면 좋았을 걸이라는 생각이 듭니다.

뭐든지 배우면 다시 곱씹으며 정리하는 습관을 들여야 할 것 같습니다.

 

감사합니다.

'[WEB] > React' 카테고리의 다른 글

React - To Do Item 삭제  (0) 2020.03.12
React - To Do Item 추가 기능  (0) 2020.03.11
React - ToDoTemplate Component 추가  (0) 2020.03.09
React - 시계 Component 추가  (0) 2020.03.05
React - React App 만들기&비우기  (0) 2020.03.04