본문 바로가기
Function

[웹앱 만들기] React 리액트 시작하기

by 공대생 교블 2019. 8. 20.
728x90

요즘 정말 인기있는 프론트엔드의 라이브러리, 프레임워크인 리액트! 

웹사이트를 만들기 위해서는 단순히 정적페이지를 만들때에 HTML, CSS를 사용하여 만들고 거기에 자바스크립트를 더해주면 동적으로 화면을 보여줄 수 있게 되쥬?

그런데 요즘의 웹은 단순히 웹 페이지가 아닌 웹 애플리케이션입니다. 브라우저 상으로도 정말 자연스러운 효과나 많은 것들을 할 수가 있습니다.

프론트엔드 대표 프레임워크로 React, Angular, Vue가 있습니다. 저는 그 중에 React를 선택! React는 "컴포넌트"라는 개념에 집중이 되어있는 라이브러리입니다. 컴포넌트를 간략하게 설명하자면, 데이터를 넣으면 우리가 지정한 유저 인터페이스를 조립해서 보여주는것

페이스북 개발자들이 라이브러리의 성능과 개발자 경험을 개선하기 위해 많은 연구를 하여 만든 프레임워크로 알려져있습니다! 그리고 대중적으로 많이 사용되고 있으니 리액트로 공부해보는게 낫겠다고 생각했기에 공부해보려고 합니다 :)

 

1. React 시작하기

시작 하기전에, 다운로드 받아야 할 것들

Node.JS https://nodejs.org/ko/

 

Node.js

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

nodejs.org

Yarn https://yarnpkg.com/lang/en/

 

Yarn

Fast, reliable, and secure dependency management.

yarnpkg.com

코드에디터 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 에는 React code Snippets ( 리액트 관련 스니펫 모음) 을 다운로드 받아주세요.

728x90