쪼렙이 만렙될때까지

리액트 프로젝트 시작`~~~~

목표는 리액트로 todoList만들 수 있을 때까지 해볼까합니다.

리액트로  todolist만들면 정말 기초적인 기능은 다 할 수 있다고 생각해도 됩니다.

오늘은 첫 시간으로 프로젝트 만들기 

os는 windows10을 사용할껍니다.

먼저 준비물~~

<필수 준비물>

1.node.js : https://nodejs.org/ko/

필수 필수 필수~~~ 버전은 최신 버전보다 LTS버전을 사용하시는걸 추천합니다.

2.EDI :개발툴입니다. 이클립스, 아톰, 인텔리제이, 등등이 있는데 우리는 visual Studio code를 사용할 거예요.

쓰기 편한거 쓰시면 되요(우리는 visual Studio code를  vscode로 부를겁니다.)

vscode :https://code.visualstudio.com/

솔직히 요것만 있으면 되는데.... 

그래도 좀더 편하게 하기 위해서 몇가지를 더 설치할거예요.

<편의성을 위해서 설치하자>

1. git for windows

요게 있어야 좀더 편하게 프로젝트를 받아올수 있어요.

뭐 요즘  윈도우에 powershell인가 있어서 사용 가능 하긴 한데 기능적인 면이나

뽀대(상당히 컬러 컬러해요) 

다운로드는 여기서 : https://git-scm.com/

2.yarn

이건 정말 깔아도 되고 안깔아도 되요. 우리가 나중에  패키지를 받아올때 npm 명령어를 써서 받아 와야 하는데

yarn을 쓰면 더 빠르고 명령어도 더 간결해서 사용하기 좋아요. 개인적으로는 강추 강추(없어도되요)

다운로드:https://classic.yarnpkg.com/en/

설치가 완료되었으면  vscode를 실행 시켜주세요.

vscode를 실행하면 

요런 사진이 떠요. 한글이 안되시는분들은  왼쪽에서 5번째 매뉴에서 korean으로 검색해서 한글 플러그인 설치 하시면 됩니다.

그다음 왼쪽 상단의 파일을 누르시고 폴더 열기를 눌러주세요.

원하는 위치에 폴더를 만들고  폴더 열기를 해줍니다.

다시  맨위의 메뉴중에 터미널을 클릭하시고 새 터미널을 눌러주세요. 

그러면 아래와 같이 터미널이 열려요. 그러면 아래와 같이 명령어를 입력해주세요.

npx create-react-app .

여기서 마지막에 .을 해주면 방금 만든 폴더에 리액트 프로젝트를 설치하겠다는 의미이고

만약 .말고 아무거나 단어를 쓰면 현재 폴더 안에 그 단어로 폴더가 생성되며 그 안에 프로젝트가 설치 됩니다.

편한대로 하세요 ㅎㅎ

이렇게 하면 무언가 엄청 많이 설치 됩니다.

마지막에 happy hacking!이라고 뜨면 패키지 설치가 완료~~

그럼 잘 설치 되었나 확인해볼까요?

우리는 yarn을 설치했다면 yarn start 라고 입력합니다.

만약 설치 안했으면 npm start이라고 입력하고 엔터~~~

그럼 다음과 같은 화면이 뜹니다.

이러면 성공입니다. 

그리고 서버를 끄고 싶다면 다시 터미널 클릭하고 컨트롤 c를 두번 누르면 실행 서버를 끌 수 있습니다.

다음 시간은 리액트의 핵심 기술인 컴포넌트 사용법에 대해서 알아볼게요.