생활코딩 리액트 강의(이고잉님 thㅏ랑해요) -> https://www.youtube.com/playlist?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi
React
=페이스북이 만든 자바스크립트 ui 라이브러리
=사용자 정의 태그를 만들어주는 기술 중 하나
컴포넌트
='사용자 정의 태그'라고 생각
index.html
<html>
<body>
<Top></Top>
<Sidebar></Sidebar>
</body>
</html>
sidebar.html
~
사이드바 만드는 겁나 긴 코드
top.html
~
top 유아이 만드는 겁나 긴 코드 index.html 파일을 보면 부분이나, 와 같은 태그를 '내가' 적어주면 웹 브라우저에게 전달될 때는 저절로 sidebar.html과 top.html로(겁나 긴 코드) 바뀔 수 있다면? 겁나 편리.
- 이하 장점 들 정리
-가독성 정리 (=겁나 길고 복잡한 코드를 내가 정의한 컴포넌트로 표현할 수 있다는 것)
-재사용성(= 이라고 한 번 정의해놓으면 다른 곳에서도 여러 번 재사용 가능함)
-유지보수 편리(=top.html에서 수정할 것이 생겼다면, top.html 파일 한 곳에서만 고쳐주면 을 해놓은 모든 파일에도 같이 업데이트가 됨)
->컴포넌트 중심으로 웹 에플리케이션을 만드는 방법을 만들어보자!
->나도 컴포넌트 만들 수 있고, 남들이 만든 수많은 컴포넌트 써먹을 수 있다!
리액트 공식 문서 -> https://reactjs.org
개발환경 구축
나는 vs code말고 atom 쓰기로 함
*버전 확인
node -v
9.11.2
npm -v
6.4.1
사용자 이름 한글이지만 이미 구축해 논 거 다시 하기 귀찮기 때문에 패스. 미래의 내가 해결하겠지1
React와 Atom 명령어
*새로운 리액트 앱 만들 때 cmd 명령어
cd C:\Users\내한글이름\Desktop\react-app
create-react-app hello-react*리액트 앱 시작할 때 cmd 명령어
C:\Users\내한글이름\Desktop\react-app
cd hello-react(이름)
yarn start
또는
C:\Users\내한글이름\Desktop\react-app
npm run start/ npm start*리액트 끌 때
ctrl + c*확인 브라우저 uri
localhost:3000*아톰 에디터 단축키
프로젝트 창 열기
Ctrl + \
사라진 메뉴바 다시 살리기
alt+v 누르고 view에서 toggle menu bar 클릭*create-react-app 에러 날 때 환경변수 설정해주기
*내 리액트 앱들 위치
생코 강의들으며 실습한 앱들은 여기에
C:\Users\내한글이름\Desktop\react-app
예전 스터디할 때 실습한 앱들은
c:\Users\내한글이름/
(codesplitting, hello-react, new-react-counter, redux-starter-kit, react-router-tutorial)*react-app폴더로 디렉터리 정하기
cmd에서
cd C:\Users\내한글이름\Desktop\react-app
create-react-app .- npm
=node.js를 이용해서 만들어진 여러 앱들을 명령어 환경에서 손쉽게 설치할 수 있는 도구. (=node.js계의 앱스토어 느낌?)
- npx
react 앱 만들 때 (리액트 깃헙) 이렇게 하는 방식도 있음
npx create-react-app my-app
cd my-app
npm startcreate-react-app을 일회용으로 설치하고 지워버림.
장점) 항상 최신 버전. 실무에선 이거 쓰기~
create-react-app 기본 웹 뜯어 살펴보기
[index.html -> index.js -> App.js]
react 실행 후 뜨는 웹 페이지의 주소는 localhost:3000
사실 이건 http://localhost:3000/index.html
제일 메인이라고 볼 수도 있는 index.html부터 보고 연관되어 있는 코드들 연이어 설명 (중요 코드 위주)
index.html
<div id="root"></div>(이 부분이 바로 위에서 리액트 장점 설명할 때 말한) 컴포넌트들을 이 root안에 들어가도록 create-react-app은 약속하겠다!라는 뜻을 가진 코드 한 줄.
실제로 개발자 도구 들어가서 보면
물론, root 말고 iloveapple로 바꾸어도 무방
그렇다면 root 안에 들어가는 컴포넌트들을 수정할 때는 어떤 파일을 열어야 할까??
=> src 디렉터리 안에 있는 파일들!!
그중 엔트리 파일은 index.js 파일을 살펴보면,
index.js
import App from './App';=이 이라는 실제 컴포넌트가 구현되어 있는 곳은 './App'에 있어~
App은 컴포넌트 이름(컴포넌트 이름 첫 글자는 대문자) ./App은 컴포넌트를 구현한 파일 이름(.js는 생략되어 있)
ReactDOM.render(<App />, document.getElementById('root'));바로 저기에 써져있는 가 컴포넌트
=id값이 root인 태그를 선택해~
App.js (함수 타입 x, 클래스 타입 o)
import React, {Component} from 'react';
import './App.css';
class App extends Component {
render() {
return (
//반드시 리액트는 하나의 태그 안쪽에 나머지 태그들이 있어야함
//즉, 제일 바깥쪽에는 태그 하나가 있어야 함.
<div className="App">
Hello, React~~
</div>
);
}
}
export default App;실제 App 컴포넌트의 구현은 여기 있다 이 말.
실제 저 태그의 내용은
<div className="App">
Hello, React~~
</div>요거다.
CSS 수정해보기
index.js 에는
import './index.css';App.js에는
import './App.css';해당 js파일을 멋들어지게 해주는 css 파일들. 일단 지금은 css 필요 없기에 js에서 import문 보고 css 파일 타고 들어가서 안에 내용 다 삭제.
배포해보기
개발환경의 앱은 겁나 무거움(암 것도 안 한 기본 앱이 1.7mb). 우리 개발자가 편리하게 개발하기 위해 첨가된 많은 것들이 있기에!
그러나 , 배포한 후의 앱은 보이는 화면은 똑같으나, 용량이 줄어있음(125kb).
리액트가 알아서 필요 없는 것들은 다 없애고 우리가 만든 src안의 여러 파일들을 create-react-app이 알아서 조합해서 build 디렉터리 안의 index.html이 로드할 수 있도록 처리해줌.
그래서인지 build안의 index.html 보면 띄어쓰기? 들여 쓰기 같은 것들 다 없어짐.
*배포 명령어
npm run build=> 실제 서비스할 때는 build안의 파일들을 사용하면 됨
=> 웹 서버 다큐먼트 root(=웹 서버가 문서를 찾는 최상위 디렉터리) build 디렉토리 안에 있는 파일들 위치시키면 됨
- npm install -v serve 또는 npx serve -s build
serve라는 명령어를 통해 어디서든지 웹 서버를 설치할 수 있음
헤헤ㅔㅎ,,
'JAVASCRIPT > React' 카테고리의 다른 글
| [생활코딩 React 강의 3] State란? state 사용해보기 (0) | 2019.04.26 |
|---|---|
| [생활코딩 React 강의2] 컴포넌트 만들기, Props, 컴포넌트 파일로 쪼개기 (0) | 2019.04.26 |
| DOM조작 & react_router (0) | 2019.01.05 |
| 1_추가 내용 (0) | 2018.12.17 |
| 1_props & state (0) | 2018.12.17 |
Comments