Flux란? Flux는 Facebook에서 클라이언트-사이드 웹 어플리케이션을 만들기 위해 사용하는 어플리케이션 아키텍쳐이다. 또는 애플리케이션에서 데이터를 다루기 위한 패턴이라고 할 수 있다. Flux 이전 방식(MVC)의 문제점 Facebook에서 React를 사용할 때, Flux이전에는 다음과 같은 방식으로 데이터를 처리하였다. 어떠한 Action이 입력되면 Controller는 Model이 지니고 있는 데이터를 조회하거나 업데이트 하며, 이 변화는 View에 반영된다. 사용자와의 상호작용(UI)이 뷰를 통해서 일어나기 때문에, 사용자의 입력(input)에 따라 뷰가 가끔씩 모델을 업데이트 할 수도 있다. 이러한 디자인 패턴은 작은 어플리케이션에는 큰 문제없이 작동한다. 하지만, Model과 Vie..

아키텍쳐(architecture)가 영단어로써 건축물, 구조라는 지니는 것 처럼, 애플리케이션 아키텍쳐(Application Architecture)도 쉽게 말하자면 "애플리케이션의 구조" 정도로 이해할 수 있다. 책임과 성격이 다른 것을 크게 그룹으로 만들어 분리해두는 것을 아키텍처 차원에서는 계층형 아키텍쳐(layered architrecture)라고 부른다. 또는 계층이라는 의미를 가진 영단어인 티어(tier)를 써서 멀티 티어 아키텍쳐 라고도 부른다. 웹 어플리케이션 아키텍쳐(Web Application Architecture)는 응용 프로그램의 구성 요소 간의 상호 작용을 유지하는 프레임 워크를 말한다. 웹 어플리케이션 아키텍쳐는 사용자 인터페이스(Ui Interface)와 구조(Structur..

MVC(Model-View-Controller) 패턴 이란? MVC 패턴은 여러 디자인 패턴 중 하나입니다. 디자인 패턴들은 좀 더 나은 유지보수를 위해 만들어진 특정한 방법들인데, 그 중 하나가 MVC 패턴입니다. MVC 패턴은 어플리케이션 또는 프로젝트의 구성을 Model, View, Controller 세 가지의 구성요소로 나눈 패턴입니다. 모델(Model) 모델(Model)은 백그라운드에서 데이터에 관한 로직을 처리하는 역할을 담당합니다. 모델은 컨트롤러에 의해 호출되어 데이터베이스에 데이터를 저장하거나, 데이터베이스에서 데이터를 가져와 뷰가 사용할 수 있는 형태로 컨트롤러에 반환합니다. 다음과 같은 규칙을 지켜주어야 합니다. 사용자가 편집하길 원하는 모든 데이터를 가지고 있어야 한다. 뷰나 컨트..

아직 redux를 공부하진 않았지만..;; 일단 도전! 댓글 中.. 영단어 Reduce 본래 의미를 보자면, 단순하게 줄이다라는 의미보다 변경이라는 의미에 가깝습니다. "to change something into a simpler or more general form" 그 예시로 어떤 복잡한 수학문제를 다른 비슷한 문제로 변경해서 (더 간단하게만드려고) 푸는방법을 수학에서는 reduction이라고도 합니다. "In mathematics, reduction refers to the rewriting of an expression into a simpler form." 그런의미에서 완벽히 번역은 힘들지만 reduce는 "고쳐나간다" (간단하게만들기위해서, 혹은 특정규칙을 적용하기위해서) 라고 생각해보면 좋..

Front-End Challenges | CSS-Tricks My favorite way to level up as a front-end developer is to do the work. Literally just build websites. If you can do it for money, great, you should. If css-tricks.com

[번역] React ES6 — Class constructor에서의 super() 본 글은 http://cheng.logdown.com/posts/2016/03/26/683329를 한국어로 번역한 글입니다. medium.com

변경 이유 초기 렌더링을 제어하는 방법이 많아져서 혼란이 됨. 오류 처리 인터럽트 동작시에 메모리 누수 발생할 수 있음. React 커뮤니티에서도 가장 혼란을 야기하는 라이프 사이클 React v16.3 이후에 변경된 부분 componentWillMount, componentWillReceiveProps, componentWillUpdate를 v17 부터 사용불가 componentWillReceiveProps 대체 메서드 추가 getDerivedStateFromProps componentWillUpdate 대체 메서드 추가 getSnapshotBeforeUpdate componentDidCatch 컴포넌트 에러 핸들링 API 추가 리액트 교과서 - 컴포넌트와 라이프사이클 이벤트 React 컴포넌트와 라이..

업데이트(갱신, Update) 이벤트 컴포넌트 내부의 state나 props가 변경이 되면 업데이트 이벤트가 발생하며 리렌더링 된다. 컴포넌트가 업데이트 될 때, 다음과 같은 메서드가 실행된다. new Props / setState() / forceUpdate() getDerivedStateFromProps shouldComponentUpdate render getSnapshotBeforeUpdate componentDidUpdate New Props 상위 컴포넌트로부터 갱신된 props를 받는 경우가 있다. 이 때, 갱신된 props를 받은 컴포넌트들은 다시 렌더링되며, update cycle을 진행하게 된다. setState 컴포넌트들은 공통적으로 setState() api를 제공한다. 현재 자신이 ..