cdd

react

lifecycle

constructor - 컨포넌트가 마운트되기 전에 호출. state의 초기값 설정.

render - 함수는 클래스 컴포넌트가 렌더링되는 부분. Props, state값이 변경되어 화면을 갱신할 필요가 있을때마다 호출한다.

shoultcomponentUpdate boolean을 사용하여 리렌더링을 막을 수 있다. 렌더링 최적화.
didMount render 함수가 처음 한번 호출된 후 함수가 호출.

didUpdate Props, state 변경되어 화면이 갱신될때마다 render 함수 호출 이후에 호출되는 함수.

Unmount
componentWillUnmount 컴포넌트가 화면에서 완전히 사라진 후 호출 되는 함수. 메모리 누수를 방지하기 위해서, clearTimeout, clearInter을 사용하여 해제할때.

redux
action : 상태에 어떠한 변화가 필요하게 될때 액션이란 것을 발생.
액션 생성함수 : 액션을 만드는 함수
리듀서 : 변화를 일으키는 함수, 현재의 상태와 전달받은 액션을 참고하여 새로운 상태를 만들어서 봔한.
스토어
디스패치 : 액션을 발생시키는것
구독 : 구독 또한 스토어의 내장 함수. subscribe 함수에 특정 함수를 전달해주면, 액션이 디스패치 되었을때마다
전달해준 함수가 호출.

jwt

typescript
컴파일 타임에 어느 부분이 깨지는지 빠짐없이 알려주기 때문에 리펙토링 하기 편하다.

number로 변환할때 parseInt를 반복적으로 쓰는 패턴이 있다. parameter로 받은것이
string, number인지 알 수 없을때…

부모로부터 어떤 data들을 props로 내려받는지, 컴포넌트의 고유 state는 어떤 type의 값인지 확인

react component의 props, state 타입을 정의

API response에 타입 적용

상태관리 reducers에 타입 적용

pwa
서비스 워커랑 웹 캐시 도입하면서..

일본 서비스 시작 한다는 기사를 봤었습니다. 플랫폼 확장, 새로운 서비스 이 될거 같아요.

ETC
cross-origin resource sharing, cors
교차 출처란 다른 출처를 의미. 다른 출처로 자원을 요청하면 CORS 오류 발생
두개의 출처가 같다는것은 schema (https://같은 프로토콜), host, port 3가지가 동일

https vs https
인터넷에서 웹 서버와 사용자 컴퓨터에 설치된 웹 브라우저 사이에 문서를 전송하기 위한 통신 규약
https는 https와 유사하지만 데이터를 주고 받는 과정에 보안 요소가 추가되었다.
https를 사용함으로써 서버와 클라이언트 사이의 모든 통신 내용이 암호함

브라우저 동작 원리

SSR vs CSR
ssr : 완전하게 만들어진 html 파일을 서버로부터 받아오고 이를 웹브라우저에 렌더링
웹서버에 요청할때마다 브라우저 새로고침이 일어나고 새로운 페이지는 서버에 요청
장점: 초기 로딩 속도가 빠르다. SEO 가 가능.
단점: 매번 페이지를 요청할때마다 새로고침이 되기 때문에 UX가 떨어짐, 서버에 요청 하기때문에 트래픽, 서버 부하가 커짐

csr: 처음에 웹서버에 요청할때 데이터가 없는 문서를 반환. 그 후 HTML 및 static 파일들이 로드되면서 데이터가 있으면 데이터를 서버에 요청하고 화면에 렌더링.

첫 로딩에 HTML과 static 파일들만 다 받으면, 동적으로 빠르게 렌더링하기 때문에 ux가 뛰어남
서버에 요청하는 횟수가 적이 때문에 서버 부담이 덜하다
모든 html 과 static 파일이 로드될때까지 기다려야 하므로 초기 구동속도가 느리다. SEO 문제.
data요청이 있을때만 서버에 요청하기 때문에 서버에 부담이 적으며, 모든 js 파일을 다운 받아야 해서 초기에는 오래 걸림.

이터레이터는 객체를 next 메소드로 순환 할 수 있다.

이벤트 위임이란 상위 노드에서 하위 노드의 이벤트를 제어.

실행 컨텍스트
실행 컨텐스트는 실행 가능한 코드가 실행되기 위해서 필요한 환경 (this, function, clousure, hoisting)

브라우저 동작원리
html 마크업을 처리하고 dom 트리를 빌드
css 처리하고 cssom 트리 빌드
dom 및 cssom 결합하여 렌더링 트리를 형성
렌더링 트리에서 레이아웃을 실행하여 각 노드의 기하학적 형태 계산
개별 노드 페인트

promise

new Promise() 콜백 함수의 인자는 resolve, reject이다.
resolve()가 실행하면 fullfielled
reject() 실행하면 rejected

arrow function
화살표 함수는 항상 익명. 화살표 함수의 this 언제나 상위 스코프의 this를 가리킨디ㅏ. lexical this.

Prototype
프로토타입 기반 언어.

call, apply
apply는 주어진 this 값과 배열로 제공되는 argumentfh

typescript를 왜 도입 했을까
자바스크립의 느슨한 언어를 보완하기 위해 나온 언어입니다. 타입에 대해 관대합니다.

admin

Admin mobx
기존 Diango 어드민을 대체하기 위해서 어드민 사이트가 필요했습니다. (6개 해외지사, 한국 본사에서 어드민을 사용할 수 있도록, ISMS 인증).

react version 16

setting
페이지 라우터를 설정
페이지 컴퍼넌트 및 데이터 스토어 생성 & 연동
모달 컴포넌트
컨텐츠, voc, 이용자, 개발자 설정, 공지
로그인 2factor
권한신청
특수권한조회
일반권한설정
특수권한신청현황
권한신청상태
사용자계정관리

2factor (구글 로그인 + otp 인증) 입니다. saml보안 로그인.
다만, 두 방법 쿠키에서 userinfo, csrftoken 갱신을 받습니다.

saml 은 사용자 sso를 의하지만, oauth는 인증 프로토콜이라고 말할 수 있다.

mobx 를 도입 했었던 이유

-states는 observable로 감싸주고 있다. store subscribe랑 비슷하다고 할 수 있다.

-es6에서 사용 가능한 class 및 데코레이터의 사용으로 보다 객체 지향적 접근이 가능

-불변성 유지가 불필요 redux는 불변성을 유지해야 한다. mobx는 불변성을 유지할 필요가 없어서 상태를 직접 바꿀 수 있다.

-redux에서는 하나의 전역 스토어를 가질것을 공식문서에서 권장. 비즈니스 로직이 무거워 질수록 스토어 파일은 무거워질 수 밖에 없지만, mobx는 여러 스토어를 각각의 정의에 알맞게 사용 가능.

-기존 요청에 취소 처리가 가능

-Flow를 사용. flow, yield 를 사용. async, await 사용하는대신에 yield를 사용.
문법적으로 매우 비슷.

typescript
-interface를 사용