[5주차] 리액트입문: React 프로젝트 처음 생성하기

Git bash 명령어 정리

git bash 명령어 정리

---

1. ls 를 눌러, 현재 내가 위치한 곳 파악하기

2. cd 파일명 을 입력해서 내가 새로운 파일 폴더를 만들려는 위치까지 가기

3. mkdir 폴더명 을 입력해서 프로젝트폴더 만들기

4. cd 폴더명 을 입력해서 폴더 안까지 들어가기

5. yarn create react-app 프로젝트파일명 을 입력해서 프로젝트파일 생성하기

-MacBookAir ~ % cd Desktop
-MacBookAir Desktop % cd Github
-MacBookAir Github % cd sparta
-MacBookAir sparta % ls   
Icon?				button_hover_animation
JS 보충반			dropdown_sample
JS 보충반2			frontend
JS종합반			naver_gnb
React 입문			spartaflix
album				webpublishing button
-MacBookAir sparta % mkdir react1
-MacBookAir sparta % cd react1
-MacBookAir react1 % yarn create react-app week-1

모두 끝나면 아래와 같이 뜬다.

 

 

 

6. 이제 vscode에서 새로 만든 폴더를 연다.

아래처럼 다양한 파일들이 들어있어야 성공적으로 create react application 이 된것이다.

 

 

 

7. 프로젝트 시작하기 : 다시 터미널로 돌아가서, 만든 프로젝트파일로 들어가고, yarn을 실행한다

(아래 명령어들을 한줄씩 차례대로 넣어준다)

 

 

8. 프로젝트 시작된 모습

 

 

9. 어떻게 작동하는 지 보기

src 안에 App.js 를 누르고 <header></header>를 지우고 대신 <p>Hello React!</p>라고 넣은 다음

-> 파일을 저장하면, 새로고침 없이 바로 브라우저에서 업데이트가 된 것을 확인할 수 있다.

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <p>Hello React!</p>
    </div>
  );
}

export default App;

수정이 반영된 화면

 

10. 프로젝트 구조

public > index.html → src > index.js → src > App.js

 

실질적인 개발자의 플레이그라운드는 App.js 가 된다!

 

 

 

11. 상대경로(././...) 에서 절대경로로 바꿔주기 선택사항

• root 경로에 (public 안에) jsconfig.json 파일 만들기
• 아래 코드 넣어서 저장하기

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

=> 이렇다면, 같은 폴더 안에 있는 파일간 export, import 주소는 ./ 없이 파일명만 써주면 된다!

**만약 에러가 난다면, 터미널에서 clear -> yarn start 해주면 된다.

 

 

12. 스니펫 사용하기

vscode 익스텐션에서 ES7+ React/Redux 설치하기

App.js 에서 rfce 또는 rfc 엔터!

import React from 'react'

function App() {
  return (
    <div>App</div>
  )
}

export default App

 

 

13. JSX 문법이 들어간 .js 파일은 확장자를 .jsx 로 바꿔주기