carrots-day

React 디자인 패턴 React의 Component, 상태관리에 대한 글을 쓰기 전에 Flux 패턴, 즉 단방향 바인딩 디자인 패턴에 대한 내용을 이해해야 할 필요를 느낀다. 데이터 추적이 힘든 MVC 한계를 극복하기 위한 대안으로 제시된 Flux와 MVC 패턴의 문제, Flux 패턴의 필요성에 대해 알아보자 MVC 패턴 먼저 MVC패턴의 아키텍쳐에 대해 알아보자. 먼저 MVC 패턴은 Controller, Model, View로 프로세스를 분리하여 데이터의 CRUD를 제어하는 디자인 패턴이다. 그림에서 보듯 Controller로 요청을 받고, 내부 비즈니스 로직 수행 후 결과 데이터(Model)을 View로 전달한다. 해당 View를 통해 사용자에게 제공되며 View를 통해 데이터를 입력하면 View ..

JSX JSX(Javascirpt XML)는 React에서 사용하는 XML과 Javascript를 혼용하는 문법이다. React에서는 UI와 렌더링 로직을 결합하여 구현할 수 있는 언어를 지원한다. 바로 JSX다. React 입문시 러닝커브에 꼭 거론되는 녀석인데 요약하자면 React 전용 문법이다. 근데 솔직히 HTML, XML, Javascript를 어느정도 다룰 줄 안다면 대충 코드만 봐도 사이즈나온다. 예시 (App.js) 이전 포스팅에서 만든 React App을 열어보면 App.js가 있다. main Component에 해당하는 소스다. CRA를 통해 프로젝트를 생성하면 기본적으로 App.js가 생성된다. 모든 Component의 시작점이 되는 부분이다. 언뜻 보기엔 일반 HTML와 비슷해보이지..

React 시작 React를 사용하기 위해선 많은 사전 지식을 필요로 한다. 일단 필수적으로 필요로 하는 지식만 추리면 다음과 같다. Javascript HTML Webpack/babel nodeJS 이것 말고도 JSX, ES6 문법, 기타 라이브러리 (axios, redux, router, react hooks) 사용법 등 많은 사전 지식을 필요로 한다. 하지만 React에서는 create-react-app 이라는 모듈을 통해 간편하게 React 앱 구성을 로드할 수 있다. CRA (create-react-app) 페이스북 (Facebook) 에서 제공하는 React load CLI 우리 귀욤뽀짥 개발자들은 새로운 개발 환경에 접근하기 위해 필요로 하는 선수지식 때문에 본질에서 멀어지게 되는 일이 다반..

React React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리입니다. “컴포넌트”라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕습니다. 프론트엔드 취업요건 1위, React다. React는 Facebook 재단에서 개발한 컴포넌트 선언형 라이브러리로 SPA나, 모바일 앱 개발에 사용된다. 이게 무슨 말이냐하면 반복되는 기능이나 콘텐츠들을 컴포넌트 단위로 분리해 레고를 조립하듯 맞는 부분에 끼워서 사용하는 방식을 말한다. 이러한 특성이 SPA 개발 형태를 지니게 해준다. React 특징 선언적 프로그래밍 구조 : 명령형과 다르게 최종목표에 대한 프로그래밍 구조를 띈다. 굉장히 가시적이고 결과론적인 개발 방식을 사용한다. Co..