what is react ?
single page application을 제작할 수 있는 라이브러리
Atomic Design
babel webpack : react 빌드도구
react project를 만들면 그 안에 저 두개가 포함되어 있음.
* what is web development?
화면구성 -> JavsScript ->
react의 철학과 사상
- 어디에 포커스를 맞추었느냐?
: js라이브러리임 (framework-메인보드같은느낌. 흐름같은게 완성되어있음 / 라이브러리-어떤 목적을 가진 기능(리액트의 경우 목적 : "랜더링!!"))
react의 목적은 렌더링
app.js > 하나의 컴포넌트. 이 return 값을 root로 반환
Background about react
jQuery 탄생배경 > 브라우저에 독립적인 js 라이브러리를 만들자(Js는 브라우저에 종속적)
>이에 나온 도구들
>babel : 브라우저에 상관없이 js지원 할 수 있게 하는 도구
>webpack : (like maven, gradle)
Node : js가 main laguege, js를 이용해 project를 만들수 있게 하고자 함
당시엔 MVC(HTML(순수한 데이터.Model)/CSS(View)/JS(Controller))가 유행 > 무간섭 javascript
But,
>> 한꺼번에 만들어서 재사용을 하면 좋을텐데 ... ? html과 js를 분리해놨더니 재사용이 더 힘들어짐 > (이러면서 다시 재등장한 개념이 컴포넌트 : 컴포넌트를 만들어 쓴다!)
> html + js로직 > 한 단위로 묶어야 재사용이 가능함(컴포넌트-하나로써 온전한 기능을가진 단위(그 안에 html도있고 css도있고 js도있고). 결국 react의 개발방식은 이 컴포넌트를 어떻게 만들어서 잘쓰느냐가 관건) > Vue.js & REACT !
1) Vue.js > only web
- 개발형태1.
기존에 javascript로 했던것과 같은 형태의 개발 가능(But Vue가 추구하는 방식은 이게 아니라 app처럼 개발하는 것 )
- 개발형태2.
vue cli : web application을 개발하는 것 처럼 한번에 빌드해서 제작하는 형태(single page application을
제작하는 형태)
컴포넌트를 빌드해주면 vue cli가 알아서 집어넣어줌(like springboot로 개발시 체크박스 체크하면 빌드해주는
것처럼)
2) React > web + app ( & react + react native 같이 개발 가능 )
- 개발형태 1.
- 2. react cli
(react 프로젝트 대문자 사용 불가 / react native 대문자 사용해야함)
이제 더이상 web page라고 하지 않고 web application이라고 하는 이유.
react 개발환경 구성 (cmd) 이후 vs code terminal에서 명령어(뭐였지) 실행 npm start
| Microsoft Windows [Version 10.0.17763.914] (c) 2018 Microsoft Corporation. All rights reserved. C:\Users\choiy>mkdir react_ex C:\Users\choiy>cd react_ex C:\Users\choiy\react_ex>npm install -g create-react-app C:\Users\choiy\AppData\Roaming\npm\create-react-app -> C:\Users\choiy\AppData\Roaming\npm\node_modules\create-react-app\index.js + create-react-app@3.3.0 added 91 packages from 45 contributors in 8.411s C:\Users\choiy\react_ex>npx create-react-app app1 Creating a new React app in C:\Users\choiy\react_ex\app1. Installing packages. This might take a couple of minutes. Installing react, react-dom, and react-scripts with cra-template... > core-js@2.6.11 postinstall C:\Users\choiy\react_ex\app1\node_modules\babel-runtime\node_modules\core-js > node -e "try{require('./postinstall')}catch(e){}" > core-js@3.6.1 postinstall C:\Users\choiy\react_ex\app1\node_modules\core-js > node -e "try{require('./postinstall')}catch(e){}" > core-js-pure@3.6.1 postinstall C:\Users\choiy\react_ex\app1\node_modules\core-js-pure > node -e "try{require('./postinstall')}catch(e){}" + cra-template@1.0.0 + react-dom@16.12.0 + react@16.12.0 + react-scripts@3.3.0 added 1535 packages from 746 contributors and audited 906206 packages in 147.902s found 0 vulnerabilities Installing template dependencies using npm... npm WARN tsutils@3.17.1 requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules\jest-haste-map\node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules\chokidar\node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.2 (node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) + @testing-library/react@9.4.0 + @testing-library/user-event@7.2.1 + @testing-library/jest-dom@4.2.4 added 17 packages from 40 contributors and audited 906378 packages in 24.545s found 0 vulnerabilities Removing template package using npm... npm WARN tsutils@3.17.1 requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules\jest-haste-map\node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules\chokidar\node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.2 (node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) removed 1 package and audited 906377 packages in 15.566s found 0 vulnerabilities Success! Created app1 at C:\Users\choiy\react_ex\app1 Inside that directory, you can run several commands: npm start Starts the development server. npm run build Bundles the app into static files for production. npm test Starts the test runner. npm run eject Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can’t go back! We suggest that you begin by typing: cd app1 npm start Happy hacking! C:\Users\choiy\react_ex>cd app1 |
how to use react native ?
| C:\Users\choiy\react_ex>npx react-native init MyTestApp ###### ###### ### #### #### ### ## ### ### ## ## #### ## ## #### ## ## ## ## ## ## ### ### ## ## ######################## ## ###### ### ### ###### ### ## ## ## ## ### ### ## ### #### ### ## ### ## #### ######## #### ## ## ### ########## ### ## ## #### ######## #### ## ### ## ### #### ### ## ### ### ## ## ## ## ### ###### ### ### ###### ## ######################## ## ## ### ### ## ## ## ## ## ## #### ## ## #### ## ## ### ### ## ### #### #### ### ###### ###### Welcome to React Native! Learn once, write anywhere √ Downloading template √ Copying template √ Processing template √ Installing dependencies Run instructions for iOS: • cd C:\Users\choiy\react_ex\MyTestApp && npx react-native run-ios - or - • Open MyTestApp\ios\MyTestApp.xcodeproj in Xcode or run "xed -b ios" • Hit the Run button Run instructions for Android: • Have an Android emulator running (quickest way to get started), or a device connected. • cd C:\Users\choiy\react_ex\MyTestApp && npx react-native run-android C:\Users\choiy\react_ex>cd MyTestApp C:\Users\choiy\react_ex\MyTestApp>code . |
vs code teminal에서 npx react-native run-android
> jdk 13version 사용 불가
> android studio 설치후 애뮬레이터 띄워놔라
> react native 에러나는 경우 많다 .. 재부팅하고
> 또 에러나면(lisense어쩌고 에러) google 라이센싱 라이브러리 깔아야함(구글링해서 알아서해)
tools > bin > sdkmanager --licenses
> 애뮬레이터에 빨간화면뜨면
> vscode node.moduls > metro-config > src > defaults > balcklist.js
> var sharedBlacklist = 내용 수정
/node_modules[\/\\]react[\/\\]dist[\/\\].*/,
> 애뮬레이터에 앱 삭제하고 명령어 재실행
=============
react book
리액트는 무조건 가장 최근에 나온책을 사라
버전업이 빨라서 인터넷 내용이 가장 정확
- 리액트를 다루는 기술
(react + node로 백앤드 만드는 내용)
- 실전 네이티브 어쩌고
내용은 좋은데 없어진 내용을 너무 디테일하게 다룸 - 리액트는 버전이 후딱후딱 바뀌는데 ...
- 리액트 네이티브 인 액션
(강사님이 번역)
- 리액트 교과서
구버전..
- 더 괜찮은 웹 개발자가 되기 위한 리액트 스타일 가이드
webpack babel 내용이 많이나옴. 실제 개발보다는 세계에 대한 이해를 돕기 위한 책
나중에 봐도 된다
=================================
what is react components ?
: 리액트나 리액트앱을 만들때 빌딩 블럭(컴포넌트)을 만든다고 함.
: HTML(JSX) + 상태(option) + 행위(events) + (스타일)의 묶음
: 일반 엘리먼트와의 차이점은 상태와 독립적인 라이프사이클을 가지고 있다는 점.
* 컴포넌트는 크게 두가지 형태의 컴포넌트가 있다.
1. 함수형 컴포넌트((주로)출력 용도)
2. 클래스형 컴포넌트(자기만의 상태를 가짐. 거의 안쓸것임. 수업시간엔 HOOKS라는 개념을 도입해서 최신형 컴포넌트로 바로 만들 생각)
*naming rule : 화면에 나오는 애들은 대문자. 안나오는 애들은 소문자.
*React개발은 세미콜론 안넣는 추세
=================================
react는 단방향 통신임.
=================================
props / state
* props : 불변( 파라미터기때문) - 전달받는애
view를 만들거냐 안만들거냐 결정함
* state : component 안에서 정의가 됨(변함)
object에 의해서 변경됨
- 내가 함수형 컴포넌트를 만들어놨는데 state가 필요한 경우가 있으면?
> 함수형 컴포넌트를 클래스형 컴포넌트로 바꿔야하는데 불편함
> hooks탄생! > so 지금 만드는 모든 애들은 hooks로 만듦.
what is hooks?
react 버전 16.8에 새로 도입됨.
"class를 작성할 필요 없이" 함수형 컴포넌트가 상태를 유지할 수 있게끔 바뀜.
함수형 컴포넌트에 useState를 쓰면 된다!
=================================
실행 컨택스트 : 함수가 실행될때 메모리 공간이 어떻게 잡히고 어떻게 사용되는가?
함수가 만들어지면 내부적으로 자동으로 scope chain이 만들어짐
- 먼저 global object(전역변수들의 공간)이 만들어짐
blah blah
javascript에서 주어를 지정하는 방법 : 대상의 실행되는 context의 값을 지정해주는 애들.
1. call
2. apply
3. bind
1. react는 단방향 통신밖에 안됨
2. itemdetails에서 amount가 변경되면 -> itemList컴포넌트가 알아야하고 -> itemList컴포넌트는 아이템컴포넌트한테 정보를 보내야하고 -> itemList컴포넌트가 itemTotal한테 알려줘야함
>>> 복잡함 >>> 여기서 등장한 개념이 Spring의 ApplicationContext (알아서 뿌려줌) >> 이게 redux
* ajax 날리는 방법
1. 바닐라스크립트
2. JQuery
3. fetch API
: fetch API의 단점 - 브라우저의 호환성
4. Axios (React는 보통 Axios사용)
: npm install axios로 설치해줘야함 > import axios from 'axios'
------------
Axios는 HTTP통신을 하는데 매우 인기있는 Javascript라이브러리입니다. Axios는 브라우저와 Node.js 플랫폼에서 모두 사용할 수 있습니다. 또한 IE8이상을 포함한 모든 최신 브라우저를 지원합니다.
Axios는 Promise를 기반으로하여 async/await문법을 사용하여 XHR요청을 매우 쉽게 할 수 있습니다.
Fetch API보다 Axios가 더 좋은 장점은 아래와 같습니다.
구형브라우저를 지원합니다.(Fetch API의 경우는 폴리필이 필요합니다.)
요청을 중단시킬 수 있습니다.
응답 시간 초과를 설정하는 방법이 있습니다.
CSRF 보호 기능이 내장되어있다.
JSON 데이터 자동변환
Node.js에서의 사용
------------
※
방법론을 형상화 시켜놓은게 framework!
like model2
controller > view..가 각각 어떤 역할을 하고.. 개발을 하는 중간에 어떤 테스트를 할거고.. > 이런 방법론을 형상화 시켜놓은게 framwork
=======================
javascript 이벤트와 관련된 면접문제
[1] * 이벤트 전파 방식 => 1) 버블링 / 2) 캡처링
<div class outer>
<div class inner>
</div>
</div>
클릭 이벤트를 outer와 inner둘다 줬을때 어떤 이벤트가 먼저 발생할까? > inner!
좁은곳 -> 넓은곳(좁은곳에서 넓은곳으로 발생) ===========> 버블링
캡처링은 이 반대(넓은 곳에서 좁은 곳으로 발생)
대분의 브라우저는 버블링!(버블링이 기본이라고 생각하자)
그러나 addeventListener로 이벤트를 걸때 두번째 파라미터로 'false'를 주면 나는 캡처링을 허용하지 않겠다.는 의미
캡처링을 허용하지 않는게 디폴트지만 이렇게 명시적으로 코딩해주는 것이 좋다.
그러나 더이상 다른곳으로 이벤트가 전달되지 않도록 막을 수 있다.
(inner만 동작하고 outer는 동작 하지 않게) >> 이때 사용하는 것이 (전파를 막아라!는 의미의) stopPropagation
이벤트를 쓸때 e.stopPropagation을 쓰고 사용하는 것이 정석.
[2] * strict mode (엄격 모드. ECMA Script 5에 추가된 키워드. 자바스크립트가 묵인했던 에러들을 발생할 수 없게끔 엄격하게 제어하는 역할)
선언 => "use strict"만 해주면 됨
ex. var를 쓰지않고 변수를 생성할 수 있었지만 strict모드에서는 사용할 수 없음.
================================
axios통신부분은 따로 빼고
=====================
module처럼 사용하면 매번 컴포넌트끼리 주고받고 안해도 되지 않을까?
react의 사상
virtual dom
a를 참조하고있는 b,c가있고 그 외에 d,e,f,...가 있을때
a의 상태(state)가 변경되면 b,c,가 재렌더링. 나머지는 x
일부부만 렌더링되기 때문에 react가 빠르다.!
ex. 로그인한 사용자의 정보를 많은 컴포넌트에서 사용해야하는데
wrapper에서 사용자의 정보를 다 내려줘야하나? > nope! module(javascript object)을 통해 사용자의 정보를 필요로 하는 컴포넌트가 가져다 쓸 수 있게하고, (단, 데이터를 공유할 수 있지만 렌더링이 되는건 아님) 만일 렌더링이 필요하다면 가져다쓰는 그 부분들만 렌더링 할 수 있게끔도 처리해줄 수 있다.
before : 로직도 전달해야하고 상태도 바꿔줘야함
today : 모든 컴포넌트가 공유하는 모듈을 만들어서 사용
(ex. list하나 delete
> 리스트가 없어지고 그 페이지를 다시 불러봐야함(렌더링)
리스트가 없어지는(delete)행위는 module을 이용. 페이지를 다시 불러봐야할때만 부모컴포넌트와 통신하여 렌더링하자!
but 단점 > 렌더링이 다시 되지 않는다 > 이걸 해결해주는게 redux >> redux비동기문제를 해결하기위해 어떤것을 해야하는가
상위컴포넌트에서 너무 많은 일을 함 > 하위컴포넌트는 점점 더 많은 내용을 받아야하고 많은 일을 해야함(어제의 경우 oper로 합치긴했지만...) >>>>>>>>>> 모듈화
** spring 5version의 가장 큰 특징(왜 5버젼 썼어?) : 함수형 언어를 support한다.(reactive한 프로그램을 짤 수 있다)
**
함수형 언어의 가장 큰 고민 > 비동기로 처리되는걸 어떻게 처리할까?
쟤가 언제 발생(반응)할지 몰라 > 쟤가 뭔가 발생(반응)하면 내가 처리할 수 있게끔 '옵저버'같은것이 있어야함.
await/async같은게 없으면 우리가 직접 모니터링하면서 발생했니?결과왔니? 기다려줘야함.
promise / async / await
지금까지는 동기화 된 코드라면 ..
**(뜬금없이 나온 얘기)
이벤트는 비동기!
DOM이 있고 DOM에 이벤트리스너를 등록 > (EX.버튼을 클릭하면 fn을 실행해줘) > event loop(모니터링..이라고할수있다)가 실행되어야함. > 동시에 여러개의 이벤트가 발생하면? > 비동기처리
**
node.js : 크롬브라우저에서 동작하는 자바스크립트 엔진만 따로 뜯어서 걔를 어플리케이션으로 만든 플랫폼. 플랫폼으로써 동작하니 브라우저에있는 window나 document가 없고 global module들이 많다.
노드의 특징 => 기본적으로 비동기
비동기는 결과가 언제 나올지 몰라 > 결과가 나올때까지 모니터링했다가 어싸인 > how ?
1. promise : '지연'이라고 생각. > 다 읽으면 return 해! > '내가 다 되면 함수를 하나 반환해줄게'하고 약속(보장)해주는 것이 promise의 개념.
> 내가 반환된것이 promise라면 .then 으로 실행함.! (axios가 내부적으로 promise.then으로 동작)
: promise는
promise가 복잡해서 나온것이 async/await
2. async/await (promise와 달리 keyword하나로 해결됨)
> await가 걸리면 반드시 async가 필요함.
ex. sw api에서 luke skywalker를 호출해 > 거기있는 얘가 출연한 모든 영화 url을 호출해서 영화제목을 가져와서 배열에 담아 반환해 > google drive 코드 복사해서 써 !
======================
컴포넌트의 라이프싸이클
java로 말하면 생성자, destroy
'생성자'> java언어중 유일하게 '함수'라는 이름을 씀.
> return type이 없음 >
초반의 함수형 컴포넌트는 render의 기능도 없고 just jsx로 되어있는 코드를 리턴하고 끝나는 거였음.
상태도 없고, 라이프싸이클도 없고 딱 뿌려주고 끝나는 거였음. -> Hooks등장!
-> 함수형 컴포넌트는 라이프싸이클을 제어할 수 없었음 -> Hooks의 useEffect!
=========
useEffect 컴포넌트에 변화가 일어나면 호출됨 > 호출되면 변화가 또생김 > 또 호출됨.. > 무한반복
so useEffect 두번째 파라미터에 빈 배열을 넣어야 하는 이유
=========
useEffect로 많이 하는게 componentdidmount!
===========
함수형 컴포넌트의 본래 목적 : 프리젠테이션(뿌려주는것)
hooks중 useEffect를 사용하면 클래스형 컴포넌트가 필요 x
useEffect는 크게 두가지 형태 (컴포넌트가 처음 딱 뜰때(DOM생성이 완료됐을때-mount됐을때) / 변경되면 자동으로 변경해줄때)
1) component가 update됐을때
2) component가 didmount됐을때
useEffect와 axios통신을 할때 고려해야하는것 > 누가 통신을 하는것이 옳은가?
고민하고 해야함.
================
지도 api 사용법
1. npm instell / 2. 직접처리(jQuery..or..)
==============
component id쓰면 부딪힘 (여러개 쓸 수 있으니까.. ) > ref써야함
==============
리액트 라우터
: for 페이지 이동
리덕스
: 상태공유. 전체 어플리케이션 상태 관리
: 리덕스 비동기 처리 > 리덕스 펑크 ?
==============
----2대 디자인
boot strap
material > 안드로이드 어플리케이션 디자인이 전부 material 디자인
===============
what is router ?
ㅠㅠ
날라감
=============
컴포넌트안에 데이터를 처리하는데
컴포넌트가 관여해야 하는 데이터가 있고 그렇지않은 데이터가 있음.
(local state - ex) input type = 'text' / global state - ex) 로그인)
Redux를 만들 때 중요한 역할
1) reducer : 상태를 관리해주는 함수.
(input : 이전상태, action(어떤 처리를 해줘야하는가(정보)-event에 가까움.)
output : state - impuutable)
2) store(context!) : 컴포넌트와 store을 연결해주기 위해 쓴 함수 > connect()
> store에다가 '이함수를 이렇게 바꿔줘'라고 하는 애 > dispatch
* redux saga 썽크 > action이 객체가 아니라 함수
index.js >
원래 action return은 객체밖에 못했는데
thunk를 주면, 함수를 retun할 수 있어서
함수에서 작업을 할 수 있음.
thunk,saga 는 둘다 비동기를 여러번 사용해야할때 사용한다.
action을 함수로 만든다 > thunk
비동기 처리를 전문으로 하는 독립된 계층을 새로 만들어서 generator라는 js문법을 사용한다(yield.라는 기법) > saga
redux thunk,saga의 비지웨이팅 대처법
이거하고나서 > 이거해줘 . 이런 형태의 코드를 만들어낼 수 있는게 thunk와 saga의 역할
댓글