1일차 : 수업소개, 실습환경 구축

1일차 : 수업소개, 실습환경 구축

 

 

수업소개

 

이 수업은 리액트 입문자를 위한 수업으로 리액트의 기본 문법과 핵심 개념을 익할 수 있습니다.

 

리액트는 사용자 정의 태그를 만드는 기술입니다.

 

복잡하고 긴 코드에 이름을 붙여서, 단순한 태그로 만들면 좋겠죠?

복잡한 코드들은 숨겨버리고 단순한 태그만 보여주는 것이죠.

사용자 정의 태그를 만들면, 이것이 가능해집니다.

 

리액트를 만드는 방법은 두 가지 방법이 있습니다. 바로 class 문법을 사용하는 것과 function 문법을 사용하는 것입니다.

요새는 대부분 함수 문법을 사용해서 리액트를 만들기 때문에, 이 수업에서는 함수를 사용할 예정입니다.

 

 

실습환경 구축

 

리액트를 이용하기 위해서 다운받아야 하는 것들이 꽤 있습니다.

 

만약 컴퓨터에 개발환경을 구축하기 어렵고 실습만 하시려는 분들은 온라인 플레이그라운드를 이용하세요.

리액트를 검색하고 설치하러 가면 온라인 플레이그라운드라는 것이 나옵니다.

jQuery에서 cdn을 이용한 것처럼, CodePen이나 CodeSandbox, Stackblitz와 같은 사이트들을 이용할 수 있습니다.

선생님은 Stackblitz를 추천해주시네요.

 

 

 

React (forked) - StackBlitz

 

그럼 이제 본격적으로 개발환경 구축을 시작해 봅시다. 

 

 

리액트를 만들려면 npx를 깔아야하는데, 이걸 실행시키려면 node.js가 필요합니다.

 

 

두개 중 원하는 것을 설치하고 비주얼 스튜디오로 넘어갑시다.

 

react-app이라는 폴더를 만들어주고, 프로젝트에서 새 프로젝트를 선택합니다.

그리고 터미널을 새로 열어줍니다.

Terminal - New Terminal 혹은 ctrl+shift+'로 실행시켜주면 됩니다.

 

 

거기에 npx create-react-app . 을 입력해줍니다.

계속하겠는지 물어보는게 나오면 y 로 대답해주면 됩니다.

 

저는 다운받고 바로 하려니까 안되서 컴퓨터 재부팅을 해줬어요.

 

 

이걸 입력하면 뭐가 엄청 분주하게 움직입니다. 다 설치가 될 때까지 기다려야 해요.

 

다 끝나면 아래와 같은 화면이 나옵니다.

 

 

첫번째 npm start를 쳐서 리액트 개발환경을 시작해 봅시다.

 

 

여기서 에러가 나는 분들도 있는데 그건 3천번 포트를 이미 사용중이라 그렇다고 하네요.

그런 경우에는 바로 3001번을 사용할건지 물어보니까 그냥 y로 대답하고 넘어가면 됩니다.

이렇게 성공적으로 마친 경우에는 오른쪽 그림과 같은 웹 브라우저가 뜹니다.

 

여기까지 오셨으면 실습 환경 구축은 끝입니다!! (짝짝)