
[Design Pattern] React와 Flux 패턴
2022. 9. 30. 09:45
개발이야기/TIL
지금은 react에서 데이터 관리를 할 때 redux를 쓰는 게 당연시되고 있다. 그럼 리액트는 왜 줄곧 MVC패턴을 사용하다가 flux패턴을 사용하게 되었는지 알아보자. Flux 출현 배경: 기존 MVC 모델의 한계 기존의 어플리케이션 환경에서 보편적으로 사용되는 패턴은 MVC였다. Model에 데이터를 정의해 두고, Controller를 이용해 Model 데이터를 생성 / 조회 / 수정 / 삭제(CRUD)하고, 변경된 데이터는 View에 출력되면서 사용자에게 전달되는 흐름, 하지만 이 패턴의 문제점은 어플리케이션의 규모가 커질수록 데이터 흐름의 복잡도가 무지막지하게 늘어난다는 것이었다. 예를 들어 칼럼 게시판을 만든다고 치면. (이 게시판 UI의 가장 큰 특징은 자신이 최근에 남긴 댓글이 우측 사이드..

[Design Pattern] MVC
2022. 9. 30. 08:54
개발이야기/TIL
디자인패턴 “바퀴를 다시 발명하지 마라(Don’t reinvent the wheel)” 이 문장이 뜻하는 의미는 무엇일까? 이미 만들어져서 잘 되는 것을 처음부터 다시 만들 필요가 없다는 의미이다. 이처럼 디자인 패턴은 자주 발생하는 고질적인 문제들은 또 발생할 수 있기때문에 하나의 패턴을 만들어서 재사용할 할 수 있게 만들어주는 해결책이다. 그럼 ... 만약에... 이런 방법들이 없다면 ? 우리는 클래스 함수들을 일일히 다 만들어야 한다.😵💫🤮 디자인패턴은 라이브러리나 프레임워크와 의미가 비슷하다고 보면되는데, 예를 들어 그냥 jQuery를 이용한다면 $('#MVC')로 DOM을 선택할 수 있는 것을 순수 Javascript를 사용한다면 document.getElementsByid('MVC')로 길게..