[React] React?

 

1. 배우는 이유

 

사용 이유

• Single Page Application을 만들기 위해서!
  • html 파일을 1개만 쓰고
  • 다른 페이지를 보여주고 싶을 때 html 부분만 갈아치워 보여준다.
• Vibe, Instargram 등 페이지 전환 없이 부드럽게 동작하는 것
• html을 함수, array, object 이런 곳에 보관하고 재사용할 수 있어서 html 관리가 편해진다.
• React Native를 쓰면 같은 리액트 문법으로 모바일 앱개발도 가능

 

라이브러리

• JavaScript로 SPA를 구축할 수 있지만 코드가 길어진다 
• 따라서, JS의 라이브러리인 React를 사용하자

또한, 많은 회사에서 React 역량을 요구~ 열심히 배우자!!

 

 

사전 학습

• web 개발이므로 HTML, CSS 를 알고 보면 좋다!
• js 라이브러리이므로 JavaScript의 기초 문법 정도는 알고 해보자!

 

 

---

2. React 설치와 개발환경 셋팅

 

• 구글에 Nodejs 검색해서 LTS 버전 설치
  • 경로 그대로
  • 13버전이하 아니면 17버전으 NONO
• Visual Studio Code 에디터도 설치
• 이후 작업용 폴더 하나 생성
  
  • 폴더에 shift + 우클릭해서 powershell 열기

• blog 대신 프로젝트명 기입하면 생성 완료!

 

npm

• nodejs를 설치하면 딸려온다.
• 명령어들 모아둔 라이브러리!

 

window에서 설치 오류

 

1. npx command not found~

• 터미널 껏다 켜보기
• nodejs가 제대로 설치안되어서 그럼

 

2. 허가되지 않은 스크립트~

• 윈도우 메뉴에서 Powersell 검색 - 우클릭 - 관리자 권한 실행
• Set-ExecutionPolicy Unrestricted 오타 없이 그대로 입력
• 이후 y 입력하여 허가

 

프로젝트 생성 후

• 폴더 우클릭 후 -> vs 코드에서 열기
• 또는 vs code 실행 후 file - open folder 누른 후 생성한 프로젝트 폴더 선택

 

App.js가 메인페이지

• 내 사이트를 브라우저로 미리보기 띄우고 싶으면
• Terminal - New Terminal
• npm start 입력 후 엔터
• 또는  localhost:3000  크롬에서 직접 입력

 

---

3. 폴더 구조

프로젝트 생성 후 폴더의 구조를 살펴보자.

 

 

node_modules

• 프로젝트 구동에 필요한 모든 라이브러리의 소스 코드를 보관
• 따라서 건드릴 필요 xx

 

public

• html 파일
• 이미지 파일 등
• Static 파일 보관함

 

src

• 제일 중요!!
• 소스 코드 짜는 곳
• App.js
  • 메인 페이지
  • 여기서 div 등의 내용이 -> index.html 로 적용시켜준다.

 

package.json

• 프로젝트 정보
• 버전 등