리액트 왜 쓰나요?
바로 web app을 만들기 위해서!
web app이란,
다른 페이지로 넘어가거나, 포스팅을 발행하거나 이런 행동을 할 때에도
새로고침 되지않고 스무스하게 동작함.
흡사 모바일 앱!
- UX가 뛰어나서 좋은 사용자경험을 제공하니까
- HTML 관리가 편해지고
- 구매전환율도 높아지고
- 리액트 문법으로 iOS/Android 모바일 앱제작도 가능하고
- 서버개발자가 편해져서
그럼 빠르게 환경 세팅부터 해봅시다
셋팅 1. 작업용 폴더를 만든다. > shift+우클릭으로 PowerShell/터미널 열기
셋팅 2. 열린 터미널에 npx create-react-app 프로젝트명
셋팅 3. vscode로 open folder
셋팅 4. 미리보기 띄우기는 터미널 켜서 npm start
💡 npx로 설치하기
리액트 쓰려면 폴더에 직접 만들수도 있지만, 귀찮아요... 예 ...
create-react-app라는 사이트에서 리액트사용에 필요한 패키지들을 모아 만들어놓은 패키지 한번에 npm으로 가져올랍니다.
오류가 뜬다면 이걸보세요
오류 1. "npx command not found ~" 에러
- 터미널 다시 껐다 키기 국룰
- nodejs 제대로 설치 안했거나 옛날 버전아닌지요.
- 맥북) brew 그런거 쓰지 말고 다운받기.
- 윈도우) C 드라이브에 설치하기.
- 리눅스는 알아서 nodejs 설치나 버전 업데이트 명령어 잘 입력하기
오류 2. 윈도우) "허가되지 않은 스크립트 입니다~" 에러
윈도우 하단 검색메뉴에서 Powershell 검색 > 우클릭 > 관리자 권한으로 실행한 뒤
Set-ExecutionPolicy Unrestricted
y | n 선택창 나오면 > y
생성된 폴더, 파일 설명
- node_modules폴더 : 라이브러리 코드 보관함
- public 폴더 : 사용될 이미지와 같은 static 파일 모아두는 곳.
- src 폴더 : 코드짜는 곳. 특히 app.js가 우리가 작업할 메인이다.
- package.json : 프로젝트 정보.
- package-lock.json : 우리가 가져온 패키지도 사실상 다른 패키지, 모듈들로 이뤄져 개발된거겠지? 그렇기 때문에 그로인한 숨겨진 패키지들의 내용을 가져온 파일이라고 보면됨.
FE Studying