익명함수란 이름이 없는 함수를 뜻 한다. 한 번만 사용될 (재사용할 필요가 없는)때 많이 사용한다.

다만, 일반함수와다르게 선언부가 호출보다 반드시 위에 있어야한다. 일반함수는 함수 전체가 호이스팅되어 호출위치에 상관없이 사용할 수 있지만, 익명함수는 리터럴방식이라 선언부만 호이스팅되기 때문에, 호출위치가 선언보다 밑에 위치해야한다.

장점 메모리관리에 유리하다.

저번에 정리 했던 MVC를 다시 정리하면,

• model, view, controller 의 약자이다

model

• model은 사용자가 편집할 모든 데이터를 갖고있다.
• view, controller에 관해서 아무것도 아는게 없다.

view

• model이 제공한 정보를 따로 저장하지 않는다.
• view는 화면에 띄워주기만 한다.

controller

• model, view에 대해 알고 있다.

정리 -> 액션이 들어오면 컨트롤러는 모델을 통해서 뷰에 전달한다!

사용자 요청 -> 컨트롤러가 모델을 호출한다 -> 요청받은 결과를 리턴한다 -> 컨트롤러는 모델이 리턴한 결과를 뷰에 전달 -> 뷰에 반영(그러나 컨트롤러는 뷰를 선택만 하고, 모델을 이용하여 반영한다(의존성이 높다))

MVVM

일단 Controller 대신 VM(view-model) 확인.

컨트롤러와 비슷한 역할을 한다.

뷰를 통해 액션이 들어옴 -> 뷰모델에 액션을 전달 -> 뷰모델은 모델에게 정보요청 -> 모델이 응답 -> 뷰모델은 응답받은 정보를 가공해 저장 -> 뷰가 뷰모델에 데이터바인딩

view 뷰는 뷰모델을 알고있다

viewmodel 뷰모델은 모델을 알고있다.

model 모델은 모델일뿐...

MVC 애플리케이션 진입 -> 컨트롤러 직관적이다 뷰와 모델의 의존성이 커서 오류를 찾거나 유지보수가 힘들어진다

MVVM 애플리케이션 진입 -> 뷰 커맨드패턴과 데이터바인딩을 이용해 의존성이 낮다. 데이터바인딩이 복잡해지면 디버깅프로세스가 어렵다.

• 값을 대입하지 않은 변수, 데이터 영역의 메모리 주소를 지정하지 않은 식별자에 접근
• 객체 내부의 존재하지 않는 프로퍼티에 접근하려할 때
• return문이 없거나 호출되지 않는 함수의 실행 결과

var = a; console.log(a); // undefined

var obj = {a:1}; console.log(obj.a) // 1 console.log(obj.b) // console.log(b) // ReferenceError: b is not defined

var func = function() {}; var c = func(); console.log(c); //undefined

null은 사용자가 비어있음을 명시적으로 나타낼 수 있다.

정리

undefined는 변수에 값이 존재하지 않음을 뜻하고 null은 의도적으로 없음을 표현하는 것.

그러나 undefined와 null은 일치연산자 ===이 아니면 동일하게 취급한다.

함수와 렉시컬 환경의 조합. 함수가 생성될 때 외부함수를 기억해 생성 이후도 접근이 가능하다. 외부함수 실행이 종료되어도 내부함수가 외부함수의 변수에 접근이 가능

-> 클로저란, A함수에서 선언한 변수a를 참조하는 내부함수B를 외부로 전달할 경우, A함수의 실행컨텍스트가 종료되어도 변수 a가 사라지지 않는(GC의 대상이 되지 않는)현상

function makeAdder(x) {
    return function(y){
        return x+y;
    }
}

const add3 = makeAdder(3);
console.log(add3(2));

2번째 줄의 함수는 자신이 y를 가지고 있고 상위함수인 makeAdder의 x에 접근이 가능하다. add3함수가 생성된 이후에도 makeAdder의 x에 접근이 가능하다.

makeAdder는 실행이 끝났지만 계속 makeAdder의 x에 접근이 가능하다.

다른 예제

function makeCounter () {
    let num = 0;

    return function () {
        return num ++;
        }
    }

 let counter = makeCounter();

 console.log(counter()); // 0
 console.log(counter()); // 1
 console.log(counter()); // 2

카운터는 메이크카운터를 리턴한다. 메이크카운터는num++함수를 리턴한다. num은 외부함수의 변수이다.

console을 찍으면 0 -> 1 -> 2로 1씩증가한다.

메이크카운터의 종료시점에서 새로운 함수를 반환해서 언젠가 카운터를 실행함으로써 사용될 여지가 있기에 가비지컬렉터의 작동범위에서 제외가 된다.

this is closure. haha

GET은 서버로부터 어떤 정보를 요청하기 위한 메쏘드이다.

GET의 특징

• GET은 캐시가 가능하다.
• GET 요청은 브라우저 히스토리에 남는다.
• GET 요청은 길이 제한이 있다. :GET 요청은 브라우저마다 길이제한이 다르다.
• GET요청은 파라미터에 노출되어 보안이 취약하다.
• GET은 데이터를 요청할때만 사용된다.

POST

POST는 정보를 업데이트하기 위해 사용되는 메쏘드다. 요청을 body에 담아서 서버로 보낸다.

POST의 특징

• POST요청은 캐시되지 않는다.
• POST요청은 브라우저 히스토리에 남지 않는다.
• POST요청은 데이터 길이에 제한이 없다.

GET과 POST의 차이점

• 사용목적에 따라 다르다.

• GET은 데이터를 받아오기만 할 때 사용할 수 있고, POST는 데이터를 생성, 업데이트 할 때 사용할 수 있다.

• 요청에 body 유무
• 멱등성

• GET은 멱등 POST는 멱등이 아니다.

*멱등성 - 요청을 한 번 보내거나 여러번 보내도 동일한 결과를 가지고 서버상태도 동일할 때 멱등성을 가졌다고 한다.

로컬스토리지와 세션스토리지의 차이는 영구성이다.

로컬스토리지

사용자가 직접 삭제하지 않으면 영구적으로 저장 서로 다른 브라우저 탭이라도 동일한 로컬스토리지사용 브라우저를 종료해도 저장 사용 예 : 자동로그인

세션스토리지

탭 단위로 세션스토리지 저장소 생성 그렇기 때문에 탭 단위로 독립적으로 동작 브라우저 종료 시 데이터 삭제 사용 예 : 입력 폼/일회성 로그인/비회원 장바구니

그렇다면 쿠키는 무엇일까.

쿠키

만료일 지정 가능. 쿠키는 데이터를 사용자의 컴퓨터에 저장 사용자가 요청하지 않아도 브라우저가 요청할 경우 자동으로 데이터를 서버로 전송 그리고, 사용자에게 맞는 정보들을 페이지에 보여준다. 그러나, 임의로 고치거나 지워지거나 탈취가 쉬워 보안에 약하다. 사용 예 : 7일동안 팝업창 띄우지 않기

그러나 무조건적으로 어떤게 좋다고는 할 수 없다.

쿠키는 서버를 사용하지 않기에 세션보다 사용자에게 빠른응답이 가능하다. 대신, 세션은 서버의 자원을 사용하기 때문에 서버가 허락하는 만큼의 양이 저장가능하다.

jason web token=모바일, 웹의 사용자 인증을 위해 사용하는 암호화된 토큰

header - payload - signature 구조로 이루어져있다.

헤더는 토큰의 타입을 지정한다 (JWT) 페이로드는 내용으로 name/value 한 쌍으로 이루어져 있다. 이 내용을 클레임이라고 부른다. 서명은 헤더와 내용을 인코딩하여 비밀키로 해쉬를 하여 생성한다.

단점 - payload에 정보가 많아지면 토큰 길이가 늘어나 네트워크에 부하를 줄 수 있따.payload는 암호화된게 아니라 base64로 인코딩 되어 있는 것 이기 때문에 중간에 탈취하여 디코딩하면 정보를 알 수 있다. stateless 상태를 저장하지 않기 때문에 만들어지면 제어가 불가능하다.

장점 - 서버기반인증시스템은 계속 클라이언트 상태를 서버에서 유지해야하기 때문에 사용자가 증가하면 서버부하가 일어날 수 있다. 토큰기반은 stateless 상태이기 때문에 확장성이 좋다. signature을 생성하여 데이터 위변조를 막을 수 있다. 모바일 어플리케이션에서도 잘 동작한다.

프로토타입 뜻 -> 원형..

..? 일단 정의말고 이해해보기

function machine () { this.a = "커피추출" this.b = "머신청소" }

var cafe = new machine()

하면 cafe를 찍었을때, 부모인 머신이 가지고 있는 a,b를 자식인 cafe도 가지고있다.

같은 기능으로 사용할 수 있는 프로토타입, 프로토타입도 {object}자료 이기때문에 데이터 추가가 가능하다

machine.prototype.name = '라떼' 이렇게 추가하면, cafe에도 .name에도 추가된다. -> cafe.name하면 라떼가 찍힌다.

근데! 커피추출, 머신청소는 자식도 그대로 상속되서 가지고 있지만 프로토타입으로 추가된 데이터는 부모만 가지고 있는다.

*prototype chain - (자식이 부모를 참조할 때, 부모에게도 없으면 부모의 부모도 참조하고 그 부모도 참조하고 계속 참조하는 것)

그래서 프로토타입이 뭐라고??

개발자도구에서 array.prototype을 찍어보면 어레이에서 사용할 수 있는 여러가지 메쏘드나 프로퍼티들이 나온다.

즉! 부모 객체의 프로퍼티나 메쏘드를 상속받아 사용할 수 있는데 부모 객체를 프로토타입이라 한다!

가상돔

Virtual DOM이란?

말 뜻대로 가상돔으로 어떤 상호작용이 일어나 웹페이지 구성요소에 변화가 필요할 때 브라우저 DOM에 직접 접근하여 반영하는 것이 아니라 가상돔에서 접근 후 변화가 필요한 곳에 렌더링한다.

즉, 가상의 돔에서 변화가 필요한 곳만 확인 후 렌더링하여 DOM의 조작을 최소화해 성능 문제와 관련있다.

DOM이란?

The Document Object Model, 문서 객체 모델
객체지향 표현으로, 웹페이지를 스크립트나 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할

DOM은 문서(웹페이지)에 프로그래밍 언어가 접근할 수 있게 도와준다.

Virtual DOM의 작동원리

1. 데이터가 업데이트 되면 전체 UI를 Virtual DOM에 렌더링
   
2. BrowserDOM과 비교 -> diffing 이라고한다.
   
3. 바뀐 부분을 렌더!
   

flex는 기본 축은 가로축이다. 세로축으로 정렬해줄 수 있다. 그러나 1차원적 시스템으로 수직, 수평중 하나만 관리할 수 있다.

Grid

grid는 2차원적 시스템으로 수직, 수평 둘 다 관리 가능하다. 복잡한 레이아웃을 관리하기에 적합하다.

공통점

두 가지 모두 아이템을 감싸고 있는 부모태그에서 display를 통해 명시하고 자식태그에서 속성을 사용한다.

검색엔진최적화로 웹사이트가 검색 결과를 잘 노출하게 만드는 과정이다.

seo를 위해 개발자가 할수있는것

semantic tag

검색엔진이 정보를 수집할 때, html의 태그를 참고한다. 시멘틱태그를 읽어 더 정확한 정보를 참고한다.

*시멘틱태그? 태그에 의미를 부여하는 것 ex)<title>과 같이 타이틀이라는걸 명시한다.

meta tag 브라우저나 검색엔진이 웹사이트의 정보를 해석하는데 도움을주는 태그이다. 웹사이트의 디자인에는 영향을 주지 않고 <head>에 써줌으로써 웹사이트에 대한 정보를 검색엔진에게 알려줄 수 있다.

meta태그에 대해서는 자세하게 다루어보겠다!

자바스크립트 인터프리터가 변수, 함수의 메모리 공간을 선언 전에 미리 할당하는 것 -> 변수의 선언과 초기화를 분리 후, 선언만 코드 최상단으로 옮기는 것

*인터프리터 ? * 코드를 한 줄씩 위에서 아래로 내려가며 읽는 프로그램, 컴파일러와 대조되는 개념

함수

함수가 만들어지기 전에 함수 호출이 먼저 일어났지만, 이건 잘 작동된다. 이유는 함수 선언이 호이스팅되었기 때문에.

함수표현문은 호이스팅에 영향을 받지 않는다.

변수

변수 선언 과정

1. 선언 단계(Declaration)

   변수 객체에 변수 등록

2. 초기화 단계(Initialization)

등록된 변수를 메모리에 할당. 여기서 변수는 undefined로 초기화

3. 할당 단계(Assignment)

실제 값을 undefined에 할당

let, const

선언만 호이스팅되기 때문에, let과 const는 참조에러(ReferenceError)가 난다.

var

그러나 var는 선언과 동시에 초기화가 되기때문에 undefined라는 값이 할당된다.

한줄리뷰

변수명과 함수명이 같은 상태로 호이스팅되면 변수가 함수 값을 덮어쓰는 단점도 있다고 한다. 또한, 가독성에 있어서 호이스팅을 지양해야 한다.

Call By Value(값에 의한 호출)

• 함수 호출시 전달되는 변수의 값을 복사한다
• 복사된 인자는 지역변수로 사용되기 때문에, 함수 내부에서 인자 값이 바뀌어도 외부 값은 바뀌지 않는다. 복사하기 때문에, 장점 - 원래 값에 영향을 받지 않는다. (안전하다) 단점 - 메모리 양이 늘어는다.

Call By Reference(참조에 의한 호출)

• 인자로 받은 값의 주소를 참조하여 처리한다.
• 함수 안에서 인자 값이 변경되면, 매개변수로 전달된 값도 함께 변경된다. 장점 - 복사를 하지않아 빠르다. 단점 - 직접 참조하기 때문에 원래 값이 영향을 받는다.

프로그램이 실행되기 위해서는 메모리에 로드되어야 한다. 메모리에 로드됨은 프로그램을 실행되어 지기 위해 메모리에 공간을 할당하는 것을 뜻한다.

프로그램이 운영체제로부터 할당 받는 메모리에는 대표적인 공간은 4가지이다.

1. 코드(code) 영역
2. 데이터(data) 영역
3. 스택(stack) 영역
4. 힙(heap) 영역

1. 코드영역 실행할 프로그램의 코드가 저장되는 곳으로 텍스트영역이라고도 불림. cpu는 코드영역에 저장된 코드를 하나씩 가져가 처리한다.

2. 데이터 영역 데이터의 전역변수와 정적(static)변수가 저장되는 곳 프로그램의 시작과 함께 할당되며, 프로그램이 종료되면 소멸된다(라이프타임)

*전역변수 함수 외부에 선언되어 프로그램 전체영역 어디에서도 접근이 가능 *정적(static)변수 함수 내부에 선언되어 함수 내부에서만 접근이 가능하다.

->정적변수가 전역변수보다 안정적이다.

3. 스택영역 함수의 호출과 관계된 지역 변수와 매개변수가 저장되는 영역 스택에 저장되는 함수호출 정보를 스택 프레임으로 불림 메모리의 높은 주소에서 낮은 주소로 할당된다 프로그램이 자동으로 사용하는 임시 메모리 영역 컴파일 시에 크기가 결정

4. 힙영역 메모리의 힙(heap) 영역은 사용자가 직접 관리할 수 있는 '그리고 해야만 하는' 메모리 영역 힙 영역은 사용자에 의해 메모리 공간이 동적으로 할당되고 해제됩니다. 힙 영역은 메모리의 낮은 주소에서 높은 주소의 방향으로 할당됩니다.

근데 이해 잘안댐..

타입스크립트 특징

*타입스크립트는? *

• 타입스크립트는 말 그대로 타입을 지정해준다. 자바스크립트에 타입이 추가된 것이다. 그렇기 때문에 코드작성 단계에서 타입으로 인한 오류를 확인할 수 있고, 타입을 미리 지정해주기 때문에 실행속도가 빠르다.

자바스크립트 슈퍼셋

• 위에서 말했듯, 타입스크립트는 자바스크립트의 문법에 타입스크립트를 추가 한 것이다. 자바스크립트로 구성된 코드를 타입스크립트로 컴파일한다. (.ts)

객체 지향 프로그래밍 지원

• 타입스크립트는 ES6를 포함하고 있다. 클래스, 인터페이스, 상속, 모듈 같은 객체 지향 프로그래밍 패턴을 제공한다.

왜 타입스크립트?

타입스크립트를 공부하다 보면 왜 타입스크립트를 사용해야할까라는 글이 많다. 이게 곧, 장점과도 연결된다고 생각한다.

우선, 내가 사용해보며 느낀 장점은

협업, 유지보수

• 내가 쓴 코드를 리뷰 받을 때, 리뷰를 해주는 사람이 보기 쉽다. 인턴생활에 코드리뷰를 받은 적이 있는데, 이게 뭐에요? 라는 질문이 부트캠프 시절에는 무진장 많이 받은 것 같은데 상대적으로 매우 적었다. 즉, 다른사람이 내 코드를 보거나 협업중에 구조를 파악하기 쉽다라는 말일 것이다.

에러캐치

• 자바스크립트가 동적임에 반해 타입스크립트는 정적이다. 자바스크립트가 동작하며 휴먼에러로 인한 예기치 못한 에러가 날 수도 있고, 이를 캐치하는게 매우 어렵다. 그러나 타입스크립트는 컴파일 과정이 있기 때문에 이 과정에서 타입에러에 대한 부분을 코드 작성과정에서 캐치할 수 있다.

리소스 세이브

• 매개변수가 어떻게 들어오는지 무엇이 들어오는지 등에 대해 파악하기 위해 여기저기 뒤져보며 문제를 해결하려다 가까워 오는 데드라인에 멘탈이 온전치 못한 사람 = 나 타입스크립트는 타입과 변수 이름을 알려줌으로 상당한 리소스를 세이브할 수 있다.

상당히 매력적인 부분 브라우저 호환성에 관한 문제

• 타입스크립트는 ES6+문법들을 ES5로 바꿔주어 브라우저 호환성에 관한 해결법으로도 충분히 매력적이다.

단점

• 귀찮을 때가 있다. 규모가 커지기 전에는 사실.. 좀 귀찮을 수도 있다.. 내가 했던, 프로젝트는 그렇게 규모가 크진 않았기 때문에 나는 '이걸 왜 지정해주어야 하는거지 대체'라는 생각을 많이했다. (나만 그런걸까 혹시..?) 그러나, 예전 게임회사에서 일할 적 코드들의 양과, 맨날 바뀌는 담당자들을 생각해보면 타입이 있음 편하긴 하겠다라는 생각을 했다.

싱글스레드와 멀티스레드를 알아보기 위해 프로세스 메모리에 대해 잠깐 살펴보자

운영체제는 code, data, stack, heap 영역으로 메모리를 할당한다. 앞에서 알아본것과 같이 프로세스는 독립적으로 할당하기 때문에 공유하지 않는다.

그러나 스레드는 code, data, heap을 공유하고 stack만 할당 받는다.

싱글스레드

하나의 프로세스에 하나의 스레드가 실행 하나의 레지스터, 스택으로 표현된다. *레지스터는 저장된 상태를 의미한다고 한다.

장점

• 문맥교환 (context switch)이 필요없다.
• 자원 접근에 대한 동기화에 신경 쓸 필요가 없다. -> 프로세스의 자원에 여러 스레드가 접근을 시도하거나 작업을 할 때 오류가 나지 않도록 제어해주어야 한다.즉, 프로그래머가 힘들다.
• 프로그래밍 난이도가 쉽고, CPU, 메모리를 적게 사용한다.

단점

• 작업량이 많은 경우, 한 작업이 끝나야 다른 작업을 시작할 수 있다. -> 게임 같은 경우 하나의 동작을 하면서 ui조작 같은 다른 조작을 할 수 있어야 한다.
• 싱글 스레드 모델은 에러처리를 못하면 멈춘다........

멀티 스레드

멀티스레드는 동시에 여러작업을 할 수 있다. 고 생각하면 편한다. 사실은 문맥교환(context switching)을 통해 번갈아가며 작업이 이루어지는 것 이지만 사용자가 보기에는 동시에 일어나는 것 처럼 보인다.

두 개 이상의 스레드가 프로세스 내부의 자원을 공유하여 작업을 수행!

장점

• 문맥교환이 빠르다 ->프로세스에 비해 공유자원은 교환이 필요하지 않기 때문에 더 빠르다
• CPU활용 ->이점은 싱글스레드의 단점이기도 한다. 다중 CPU구조에서 각 스레드가 다른 프로세서에서 병렬구조로 수행할 수 있다.

단점

• 동기화 문제 -> 공유 자원에 두 개 이상의 스레드가 동시에 접근한다면 다른 스레드의 값을 읽어 동기화 문제가 발생할 수 있다.
• 프로그래밍 난이도가 높고, 자원을 많이 사용한다.

프로세스: 운영체제로부터 자원을 할당받은 작업의 단위 스레드: 프로세스가 할당받은 자원을 이용하는 실행흐름의 단위

프로그램이 뭔지 먼저 알아야하는 것 같다..

프로그램 : 파일이 저장 장치에 저장되어 있지만 메모리에는 올라가 있지 않은 정적인 상태, 어떤 작업을 실행할 수 있는 파일

프로세스

'실행할 수 있는'이다. 아직 실행되어지지 않은 상태.정적 메모리에 올라가 있지 않은 상태는 메모리 공간을 할당해주지 않은 상태. 우리 게임하다가 렉걸렸을 때 컨트롤+알트+딜리트 눌러서 강종하려고 할 때 메모리 할당율/프로세스 이런거 나오는게 기억났다 그거인듯 ㅎ

다시 말해, 프로그램은 실행되지 않은 어떤 thing이고 실행하면 프로세스가 된다.

스레드

요즈음에는 프로그램이 복잡해지고 프로세스 하나만을 사용해서 프로그램을 실행하기엔 벅차게 되었다. 현재에는 프로그램 하나가 한 작업만을 하는 경우는 없다.

그렇다면?,

운영체제는 안전을 위해 프로세스마다 할당된 메모리 내의 정보만 접근할 수 있도록 제약을 둔다. 그래서 스레드는 프로세스 보다 작은 실행 단위 개념이라고 볼 수 있다. 그러니깐....프로세스 안에서 스레드끼리 자원, 공간등을 공유한다.

위에서 스레드는 스레드는 실행흐름이라고 했다. 스레드는 프로세스 내에서 실행되는 여러가지 흐름의 단위이며, 수행 경로이다.

예전에 컴퓨터를 사려고 여기저기 기웃거리며 정보를 얻은 적이 있다. 몇 코어 12스레드 등등... 한 유튜버는 스레드를 이렇게 설명한게 기억이 난다.

님들이 스레드는 팔 갯수다. 팔이 많으면 당연히 작업효율이 올라가겠쥬?

이제부터 알아보자

Redux

컴포넌트 상태 업데이트 관리 라이브러리

이고잉(생활코딩)님의 리덕스 여행지도

요런 맵은 멍청한 나를 이해시키기위해 큰 도움이 된다.

Action 상태에 변화가 일어나는 과정. 액션은 객체로 표현되며 반드시, 무조건 type이 있어야 한다.

reducer 리듀서는 기존state와 액션객체를 받고 필요에 의해서 state를 갱신해 리턴한다.

store 하나의 프로젝트에 하나의 스토어를 가질수 있다. 상태가 담긴 곳.

dispatch state를 업데이트하는 곳, 액션객체를 넘겨주는 곳

subscribe 좋아요 구독 알람설정까지의 구독ㅎㅎ 상태가 업데이트 될 때마다 호출되어 자동으로 변화시킨다.

리덕스를 사용하는 것은 store를 만들어서 store의 상태를 바꾸는 것이다.

dispatch를 통해 action이 들어오면 reducer에 의해서 state값을 변경한다

이곳에서 리덕스를 사용해보며 이해를 도왔다.

진짜 리덕스는 프로젝트를 하면서도 두려움의 대상이었는데, 뭔가 이해가 되고있다는 것에 흥미를 느꼈다.

장점

• 단방향 모델링. action이 dispatch될 때 기록이남는다. 타임트레블링을 사용할 수 있다.
• store에서 상태를 한번에 관리한다. (상태중앙화) 전역 상태관리에 효과적
• 읽기전용상태이다. 이전 상태로 돌아가고 싶다면 현재 상태에 덮어씌우면 되는 편리함이 있다.

->

단점

• 필수적으로 적어야하는 코드들이 있어 초기에는 복잡할 수 있다.

리덕스 원칙 1.하나의 애플리케이션 안에는 하나의 스토어만 사용하자는 원칙이다. 이렇게 하면 애플리케이션의 디버깅이 쉬워지고 서버와의 직렬화가 될 수 있고 쉽게 클라이언트에서 데이터를 받아들여올 수 있게 된다. 2. 상태를 변화시키는 방법은 오직 액션을 일으키는 것이다. 이것은 상태를 변화시키는 의도를 정확하게 표현할 수 있고, 상태 변경에 대한 추적이 용이해지게 된다. 3. 변화를 일으키는 리듀서 함수는 순수한 함수여야 한다. 순수 함수는 다음과 같은 조건을 만족한다.

*순수함수 순수함수를 한마디로 정의해보자면 동일한 인자가 주어졌을 때 항상 동일한 결과를 반환해야 하며 외부의 상태를 변경하지 않는 함수입니다. 쉽게 말하면 함수 내 변수 외에 외부의 값을 참조, 의존하거나 변경하지 않아야 한다.

순수함수여야 하는 이유

• 두 개의 자바스크립트를 비교하려면 깊은비교해야 하는데 객체의 크기가 크거나 횟수가 많을 경우 너무 무거운 작업이 된다.

그래서 policy로 순수함수를 써주면 항상 새로운객체, 즉 새로운 상태가 나오는 것이다.

리덕스를 하며 flux MVC개념이 겹쳐지기도 했다. 일단은 여기까지..

애플리케이션 데이터를 다루기 위한 패턴

Flux 이전 방식 (MVC)의 문제점

Action이 일어나면 Controller는 Model이 갖고있는 데이터를 조회/업데이트하고 View에 반영 사용자와 상호작용이 view를 통해 일어나기 때문에, input과 같은 입력에 따라 뷰가 모델을 업데이트할 수 도 있다.

이런 패턴은 작은 규모에서는 문제없이 작동하지만 규모가 커지면,

......? 크랩.....은 킹크랩.

많은 수의 뷰와 모델이 서로 갱신되어 추적하기 힘들고 순서도 어려울 것이다. 실제로 페이스북에서 일어난 일이라고 들었던 것 같은데...

Flux의 구조

Flux의 요지는 단방향 데이터 흐름을 적용 후 기존의 패턴 복잡성을 줄이는 것

Dispatcher, Stores, Views 핵심적인 세 부분으로 구성

View에 일어날 액션을 다시 디스패쳐를 이용해 액션을 전달한다. 깰끔

https://bestalign.github.io/translation/cartoon-guide-to-flux/

이 카툰이 이해하는데 도움이 많이 되었다.

1. Virtual DOM Virtual DOM(가상 돔)은 어떤 상호작용이 일어났을 때 브라우저 DOM에 접근해서 반영하는 것이 아니라 가상돔(Virtual DOM)에 접근해서 변화가 필요한 곳만 렌더링한다.

즉, 가상 돔에서 변화가 필요한 곳만 확인해서 바꾼 후 렌더링하기 때문에 브라우저 DOM의 조작을 최소화해 성능 문제에 직결된다.

2. 컴포넌트 기반 화면 구성 기능과 역할에 따라 사용자가 독립적으로 관리가 가능하다 코드 재사용성이 좋다

3. View만 제공 리액트가 라이브러리라고 불리는 이유와 관련이 있따. 보통 프레임워크는 MVC라 하는데 리액트는 이중 View만 제공한다. 그렇게 때문에 라우팅은 react router, 상태 관리는 redux, 신흥강자recoil, MobX등을 사용해 관리한다.

4.JSX 진입장벽을 낮춰주는 것 같다. 리액트를 배우기 쉬운 이유이기도 한다

MVC란?

MVC는 Model, View, Controller의 약자이다. 하나의 애플리케이션, 프로젝트를 구성할 때 그 구성요소를 세가지 역할로 구분한 패턴

Model DATA, 정보들의 가공을 담당하는 컴포넌트 모델은 어플리케이션 정보, 데이터를 나타낸다. 데이타베이스, 처음의 정의하는 상수, 초기화 값, 변수 등을 뜻함. 비즈니스 로직을 처리후 모델의 변경사항을 컨트롤러와 뷰에 전달

규칙

1. Model은 자기 자신이 무엇을 수행할지만 알고 있고, 다른 컴포넌트들에 대해서는 알지 못한다.

   • 데이터 변경이 일어났을 때 모델에서 화면 UI를 직접 조정해서 수정할 수 있도록 뷰를 참조하는 내부 속성값을 가지면 안 된다.

2. 사용자가 편집할 모든 데이터를 가지고 있어야 한다.

   • 즉, 화면안의 네모박스에 글자가 표현된다면, 네모박스의 화면 위치 정보, 네모박스의 크기정보, 글자내용, 글자의 위치, 글자의 포맷 정보 등을 가지고 있어야 한다는 것입니다.

3. 변경이 일어나면, 변경 통지에 대한 처리 방법을 구현해야한다.

   • 모델의 속성 중 텍스트 정보가 변경이 된다면, 이벤트를 발생시켜 누군가에게 전달해야 하며, 누군가 모델을 변경하도록 요청하는 이벤트를 보냈을 때 이를 수신할 수 있는 처리 방법을 구현해야 합니다. 또한 모델은 재사용가능해야 하며 다른 인터페이스에서도 변하지 않아야 합니다

Controller 데이터와 사용자인터페이스 요소들을 잇는 브릿지역할 사용자가 데이터를 클릭하고, 수정하는 것에 대한 이벤트들을 처리하는 부분을 뜻

규칙

1. Model이나 View에 대해서 알고 있어야한다.

   • 모델이나 뷰는 서로 존재를 모르고, 변경을 외부로 알리고, 수신하는 방법만 가지고 있는데 이를 컨트롤러가 중재하기 위해 모델과 관련데 뷰에 대해서 알고있어야 한다.

2. Model이나 View의 변경을 모니터링 해야 한다.

   • 모델이나 뷰의 변경 통지를 받으면 이를 해석해서 각 구성 요소에 통지를 해야한다.
   • 애플리케이션 메인 로직은 컨트롤러가 담당

View 사용자가 볼 결과물을 생성하기 위해 모델로부터 정보를 얻어 온다. 사용자 인터페이스 요소를 나타낸다.

규칙

1. Model이 가지고 있는 정보를 따로 저장해서는 안된다.

   • 화면에 글자를 표시해주기 위해 모델의 정보를 전달받을 때 그 정보를 유지하기 위해 뷰 내부에 저장하면 안된다. 박스를 그리라는 명령을 바으면, 화면에 그린 후 그리기 위한 정보들은 따로 저장하지 않아야 한다.

2. Model이나 Controller와 같이 다른 구성요소들을 몰라야 한다.

   • 자신을 제외하고 다른 요소를 참조하거나 어떻게 동작하는지 알아서는 안된다.
   • 오로지 화면에 표시하는 역할

3. 변경이 일어나면 변경 통지에 대한 처리방법을 구현해야 한다.

   • Model과 같다. 변경이 일어났을 때, 변경을 알릴 방법을 구현해야 한다.
   • 화면에 표시될 내용을 사용자가 변경하면 이를 모델에게 전달해서 변경하기 위해 변경 방법을 구현한다.
   • 재사용이 가능하게 구현해야 한다.

MVC를 사용하는 이유?

View와 Model 이 두가지를 제어하는 컨트롤로 구성된 하나의 애플리케이션은 각자 맡은일만 하면 된다. 우리가 컴포넌트를 재사용하게 만드는 이유가 무엇인가 ? 유지보수, 가독성과 같은 이유로 컴포넌트를 분리하는 것과 같은 원리와 마찬가지인 듯 하다.

'우리가 개발할 때 컴포넌트를 어떻게 효율적으로 나눌까? 기능일까? 매일 고민한다. MVC는 그 고민의 결과로 도출된 하나의 해결책일 수 있다.'