공부하는 비오

좀더 엄격한 eslint 적용을 위해 recommended말고 airbnb를 설정했다. npm i -D eslint-config-airbnb eslint-plugin-jsx-a11y eslint-plugin-jsx-a11y 는 시각장애인들에게도 리액트 서비스를 이용할 수 있도록 스크린 리더가 화면을 잘이해할 수 있는지 평가해준다. (a11y : 접근성) eslintrc에서 "extends"를 "airbnb"로 설정했더니 코드가 레드밭이 되었다^6^;;; airbnb가 까다로운 문법을 적용한다. 이렇게 까지 할 필요가 없겟다 싶은건 제외해주자. ^^ 레드코드를 계속 고쳤더니 eslint 쪽 에러메시지를 보면 대충 어떻게 고쳐야할지를 알겠다. unexpected console statement라는데, 문제 ..

Error 2020. 12. 16. 16:10

실행컨텍스트는 scope, hoisting, this, function, clouser 의 동작원리를 담고 있는 자바스크립트의 핵심 원리이다. 실행컨텍스트 실행컨텍스트란 실행가능한 코드가 실행되기 위해 필요한 환경이다. 자바스크립트 엔진은 코드를 실행하기 위해 다음과 같은 정보를 알고 있어야 한다. 변수객체 (전역변수, 지역변수, 매개변수, 인수, 함수선언) 스코프 체인 this 콜스텍에 전역 컨텍스트 생성 후, 함수 호출 시마다 컨텍스트가 생성된다. 컨텍스트 생성 후 함수가 실행되는데, 사용되는 변수들은 변수 객체 안에서 값을 찾고, 없다면 스코프 체인을 따라 올라가며 찾는다. 함수 실행이 마무리 되면 해당 컨텍스트는 사라진다. 구체적인 예시를 통해 살펴보자. 왼쪽의 코드를 실행하면 오른쪽의 실행컨텍스..

이론공부 2020. 12. 16. 13:11

saga 나누기 rootSaga에서 기능별로 파일을 만들어서 오른쪽 사진과 같이 나눈 후, rootSaga는 import해온 파일 fork 해주기. 리듀서 연결하기 / 액션 flow -saga 사용환경 세팅(biio-studying.tistory.com/162?category=944898)에서 리덕스랑 사가릉 연결해줌. 리듀서도 사가처럼 대응되는 액션을 만들어준다. 로그인 액션을 디스패치 한 후 일어나는 일 dispatch(LOG_IN_REQUEST) → reducer/ LOG_IN_REQUEST실행, isLoggingIn: true → saga/ logIn 실행 →delay(1000) → put(LOG_IN_SUCCESS) → reducer/ LOG_IN_SUCCESS실행, isLoggingIn:fal..

Redux 2020. 12. 15. 21:42

rootSaga를 만들고, 사용하고 싶은 비동기 액션을 사가(redux-saga에서는 제너레이터 함수를 사가라고 부른다.)를 사용해 만든다. 사가는 사가이펙트라는 유틸 함수들을 사용한다. saga Effect all( [ ] ) 배열의 모든요소를 한 번에 실행한다. fork(함수, para?) 비동기 함수 호출한다. (non-blocking) ex) 일반적인 호출: logInAPI(action.data) call, fork를 사용: call(logInAPI, action.data) 첫번째 인수가 함수, 두번째 인수가 첫번째 인자. call(함수, para?) 비동기 함수를 동기함수처럼 호출한다. (값을 받아 올때까지 기다린 후 코드 실행. yield가 await과 같은 역할을 한다.) take(액션, 함..

Redux 2020. 12. 15. 14:38

제너레이터 함수는 일반 함수와 같이 함수의 코드 블록을 한 번에 실행하지 않고 함수 코드 블록의 실행을 일시 중지했다가 필요한 시점에 재시작할 수 있는 특수한 함수이다. 비동기 처리에 유용하게 사용된다. 제너레이터는 이터러블 이면서 동시에 이터레이터인 객체이다. 제너레이터 함수 정의 및 호출 제너레이터 함수는 function* 로 선언하며, 하나 이상의 yield 를 가진다. 제너레이터는 next 메서드를 소유한다. next 메서드를 호출하면, yield를 사용한 지점까지 함수를 실행하고 멈췄다가, 그 다음 호출 시 다음 yield 지점까지 실행한다. (yield는 break point와 같다.) 일반 함수를 호출하면 return문을 반환하지만, 제너레이터 함수를 호출하면 제너레이터를 반환한다. .nex..

JavaScript 2020. 12. 15. 11:13

제로초 노드버드 강의 정리 노트 saga사용 환경 세팅 /saga 파일을 만든다. /store/configureStore.js 에서 다음과 같이 설정한다. createSagaMiddleware 를 불러와서 미들웨어에 넣어주기. store.sagaTask = sagaMiddleware.run(rootSaga); 이렇게 설정하면 saga를 사용할 기본준비가 끝났다.

Redux 2020. 12. 15. 10:40

일급객체 (first-class object) 자바스크립트에서 함수는 일급객체이다. 일급 객체란 생성, 대입, 연산, 인자 또는 반환값으로서의 전달 등 프로그래밍 언어의 기본적 조작을 제한없이 사용할 수 있는 대상을 의미한다. 함수도 객체이므로 값으로 사용할 수 있다. 즉 변수나 객체, 배열 등에 저장 할 수 있으며, 함수의 매개변수(parameter)나 반환값으로도 사용된다. 고차함수 (HOF, higher-order function) 매개변수로 함수를 전달받고 결과로 함수를 반환하는 함수이다. 다시 말해, 고차함수는 인자로 받은 함수를 필요한 시점에 호출하거나 클로저를 생성하여 반환한다. 고차함수는 외부 상태 변경이나 가변 데이터를 피하고 불변성을 지향하는 함수형 프로그래밍에 기반을 두고 있다. HO..

이론공부 2020. 12. 15. 10:26

일급객체 (first-class object) 자바스크립트에서 함수는 일급객체이다. 일급 객체란 생성, 대입, 연산, 인자 또는 반환값으로서의 전달 등 프로그래밍 언어의 기본적 조작을 제한없이 사용할 수 있는 대상을 의미한다. 함수도 객체이므로 값으로 사용할 수 있다. 즉 변수나 객체, 배열 등에 저장 할 수 있으며, 함수의 매개변수(parameter)나 반환값으로도 사용된다. 클로저 (closure) 클로저는 자바스크립트 고유의 개념이 아니라 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어에서 사용되는 중요한 특성이다. 클로저함수란 렉시컬 환경을 기억하는 함수이다. ** 렉시컬 스코프 : 스코프(변수가 유효한 범위)는 함수를 어디에 선언하였는지에 따라 결정된다(렉시컬 스코핑). 이에 따라 결정되는 ..

이론공부 2020. 12. 14. 23:48