[1] 생활코딩 React 공부 시작

class 기반의 객체 지향 프로그래밍을 기본으로 수업을 진행할 예정.

 

웹사이트는 매우 빠르게 복잡해진다. html 코드로 구현을 하려면 정말 정말 복잡해진다.

복잡한 코드를 정리하고 싶어지는 욕망에 따라 리액트를 사용하면 구현 시에 큰 도움이 될 것이다.

이것이 우리가 리액트를 배워야 하는 이유이다.

 

리액트는 컴포넌트로 이루어져 있다. '컴포넌트'를 이용하는 것이 기본이자 최대의 장점이다.

가독성, 재사용성, 유지보수 면에서 큰 장점을 가지고 있다. 남들이 만든 컴포넌트를 사용하여 더 많은 UI를 개발할 수 있다.

 

coding -> run -> deploy 방식으로 진행할 예정이다. 공식 문서에 익숙해지는 것이 좋다.

 

1. 개발환경 세팅하기

https://ko.reactjs.org/docs/getting-started.html

시작하기 – React

여기서 플레이그라운드라는 아래의 링크를 이용하면, 바로 리액트를 이용하여 웹사이트를 만들어보고, 그 결과를 눈으로 바로바로 확인해 볼 수 있다.

https://codesandbox.io/s/new

React - CodeSandbox

또한 ToolChains이라는 것이 있는데, 우리는 여기서 create react App 부분을 사용할 것이다. 

위의 링크에서 깃허브 사이트를 들어가면, 이것을 사용하는 방법이 위와 같이 나와있다.

하지만 우리는 저 방법을 사용하지 않고 create react app이라는 프로그램을 설치할 예정이다.

이것을 설치하기 위해서는 npm이라는 프로그램이 필요한데, 이것은 node js를 이용하여 만들어진 앱을 간단하게 설치하고 실행하기 위해 필요한 소프트웨어이다.

 

예전에 깔려있던 node js가 있어서 지우고 최신 안정화 버전으로 깔았다. cmd 창에서 확인한 결과 잘 깔린 것으로 확인했다.

이  npm을 이용해서 create-react-app도 잘 깔린 것을 확인할 수 있다. 아무것도 명시를 하지 않으면 최신 버전이 깔리는데 현재 생활코딩의 수업을 계속 따라가기 위해서 동일 버전인 2.1.8버전을 설치했다. 배우고 나서는 최신 버전으로 바꿔서 사용해 볼 예정이다.

2. 개발 환경을 어느 디렉토리에 설치해야 할 것인가?

 

cmd를 이용하여, 그 폴더에 cd로 접근한 다음에 create-react-app .을 하면 설치를 완료하면 환경이 준비된 것이다.

이제 본격적으로 리액트를 배워보자.