[REACT] 리액트로 프로젝트 시작하기

리액트는 프론트엔드에서 사용하는 기술 중 하나이다. 

 

리액트를 시작하기에 앞서 먼저 node.js를 검색하여 LTS버전으로 다운로드를 해야한다. 최신버전보다 안정적으로 사용할 수 있기 때문에 홈페이지에서도 추천하는 버전이라고 써져있다. 본인의 환경에 맞는 버튼을 누르면 자동으로 깔린다.

https://nodejs.org/ko/download/

잘 깔렸는지 확인하는 방법은 터미널을 열어 node -v를 입력해보면 된다. node와 npm의 버전을 둘 다 확인해보자. 

이렇게 나온다면 잘 설치된 것이다.

---

IDE에 폴더를 하나 만들고 터미널에 npm init react-app . 를 입력하면 시작이다.

위의 코드를 입력하고 엔터를 누르게되면 설치할꺼냐는 질문이 나오는데 y를 입력하면 다운로드가 시작되고 프로젝트가 생성된다.

마지막에 해피해킹이 나온다면 생성성공!

 

생성이 성공되면 이렇게 폴더와 파일들이 깔려있을 것이다.

---

그 다음 다시 터미널에 npm run start 를 입력하면 새로운 브라우저가이 자동으로 생긴다.

이를 개발모드라고 하는데, 장고의 런서버라고 생각하면 편하다.(장고를 안다면!)

리액트 프로젝트와 실행까지 끝!

---

여기서 scr폴더 -> app.js에 가보면 자바스크립트지만 뭔가 HTML스러운 코드들을 볼 수 있다. 여기 8번째 줄에 h1태그로 안녕 리액트! 라고 적어보았다. 

저장 후 다시 브라우저를 보면 

따란~ 바로 적용된 모습을 볼 수 있다.

---

이제 프로그램을 종료하는 것은 장고의 서버종료와 같이 ctrl+c를 눌러주면 된다. 이를 누르고 브라우저로 다시 돌아가면

 

이렇게 연결이 끊긴 것을 볼 수있다. 

 

정리하자면,

1. 폴더를 먼저 생성한 후, 프로젝트 생성 npm init react-app .

2. 개발모드 실행 npm run start

3. 개발모드 종료  ctrl+c