[React] 생활코딩 part .1 기본 개념

OFFDUTYBYBLO·2020년 6월 8일
0

React 

목록 보기
1/14
post-thumbnail

1. 리액트란?

  • 페이스북에서 만든 라이브러리
  • front 언어들이 어려워지고 복잡해진다.
  • 복잡해진 코드를 밖으로 빼서 정리하고 싶어진다.
  • 복잡한 코드를 정리해서 다시 전송한다.
  • 사용자 정의 component 기능
    1) 가독성이 좋다.
    2) 재사용성이 높아진다.
    3) 유지보수가 훨씬 편리해진다.

2. 오리엔테이션

필요한 부분, 쉬운 부분부터 시작한다.

1) 개발환경 세팅 : coding
2) 실행 :run
3) 디플로이 : deploy

3. 개발환경 세팅

4. npm을 이용해서 create-react-app 설치

- node.js설치
- npm 설치
- react 설치 : sudo npm install -g create-react-app

5. create react app을 이용해서 개발환경 만들기

  • react-app이라는 폴더를 생성
  • 폴더에 react개발환경 구축
  • 터미널에서 폴더 위치로 이동
  • 명령어 : create-react-app .

6. 샘플 웹앱 실행

  • react-app폴더로 위치 이동
  • 명령어: npm run start
  • 리액트 개발환경이 실행된다.
  • 실행을 종료하는 명령어: ctrl+c

7. JS 코딩하는 법

  • react에서 JS 코드를 수정하는 과정
  • react component를 사용해서 코드를 사용하고 수정
  • public 디렉토리 안에 있는 index.html 파일의 id가 root인 div에 컴포넌트를 적어주면 화면에 렌더가 된다.
  • src 디렉토리 안에 있는 파일들을 수정해서 컴포넌트를 수정하고 생성
  • src 디렉토리에 대부분의 파일들을 보관
  • app.js : 'app'component가 어떤 기능을 가지고 있는지 설정
  • index.js : app.js에서 만든 컴포넌트를 import 해서 'html.div.id:root'에 연결시켜준다.
  • index.html : app component의 기능을 적용해 화면에 보여준다.

8. CSS 코딩하는 법

  • import된 경로에 맞는 css파일을 수정해주면 된다.
  • 방법이 딱히 다르지 않다.

9. 배포하는 법

  • 개발자 모드로 리액트를 만들면 용량이 무겁다.
  • 사용자들에게 보여주는 리액트는 production mode(build)할 때는 build 디렉토리에서 작업해야한다.
  • 빌드할때는 'npm run build' 명령어 사용
  • build 모드에서는 불필요한 데이터를 없애고 압축한 상태
  • 실제로 서비스할 때는 'build'안에 있는 파일을 사용하면 된다.
  • 웹서버의 document.root 최상위 디렉토리에다가 build파일들을 위치하면 서비스 환경 완료
  • 'serve'를 통해서 서버환경 구축, 명령어 : npm install -g serve
  • 'npx serve -s build' 명령어를 사용하면 서비스환경에서 서버가 오픈
profile
블로그 운영 x

0개의 댓글