[React] 프로젝트 셋팅

 

 

저는 JS와 부트스트랩으로 웹사이트를 만들어본 경험이 있는데

쌩 HTML, CSS, JS로 프론트를 관리하다보면... 만든사람만 알게되는 구조가 되고

심지어 만든사람조차 이게 어디서 호출되는 함수인지 알수없는 현상이 발생하더라구요

그래서.. 프론트엔드 개발자가 사용하는 가장 유명한 라이브러리, React를 배워보려합니다!

 

 

React가 뭘까?!

간단하게 말해서 웹사이트를 만들 수 있는 자바스크립트 라이브러리.

동적으로 웹사이트를 변화시키려면 수많은 작업이 필요한데, 이 수많은 작업을 쌩 Javascript로만 관리하기엔 복잡하고 어려워서 나오게 된것이 리액트입니다.

 

 

React 프로젝트 셋팅하기 

1. Node.Js 설치

https://nodejs.org/en/  해당 사이트에 접속해서 LTS 버전 설치 (2023.01.05 기준 18.12.1버전)

 

 

[finish]가 나올때까지 모두 [next]를 눌러주면된다

 

 

 

 

 

2. 프로젝트 폴더 생성

cmd창을 열고 원하는 폴더로 이동합시다.

이제 cmd창에 아래 명령어를 입력합니다. 저는 프로젝트 폴더명을 "begin"으로 정했습니다

npx create-react-app [프로젝트폴더명]

Ok to proceed? (y) 가 나오면 y를 입력해주자

기다렸다가 맨 마지막에 Happy hacking!이 나오면 성공

 

 

 

 

프로젝트 폴더로 이동하고, [npm start] 입력하면 localhost:3000 주소의 홈페이지가 하나 새로 뜬다

Edit src/App.js and save to reload

 

 

 

 

프로젝트 폴더를 VSCode로 열고, src/app.js 파일을 수정해보자

 

 

 

 

이걸로 프로젝트 셋팅은 끝!