꿈꾸는쪼꼬미개발자 꿈꾸는쪼꼬미개발자

Real DOM(DOM) DOM은 Document Object Model 의 약자로, 문서객체모델이다. 여기서 문서 객체란 브라우저가 Java Script와 같은 스크립팅 언어가 ,,와 같은 태그들에 접근하고 조작할 수 있도록 태그들을 트리구조로 객체화 시킨 것을 의미한다. ⇒ DOM은 브라우저가 트리구조로 만든 객체모델이다. 트리 구조로 DOM 객체가 이뤄져 있기 때문에 JavaScript는 쉽게 DOM 객체에 접근할 수 있고, DOM 객체를 조작할 수 있게 된다. 프로그래밍 언어로 조작하는 DOM은 애플리케이션의 UI 상태가 변경될 때마다 해당 변경 사항을 나타내기 위해 업데이트가 된다. 만약 이런 DOM을 조작하는 정도가 잦다면 성능에 영향을 미치게 될 것이고, DOM의 렌더링은 브라우저의 파워, ..

Redux란? 👀 리덕스는 리액트에서 가장 많이 사용되는 상태 관리 라이브러리다. 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 효율적으로 관리할 수 있다. Redux 기본 용어 🗣 액션(Action) 상태 변화가 필요하다면 액션을 일으켜야 한다. 액션은 객체로 표현되며, type 필드를 반드시 가지고 있어야한다. { type: 'ADD_TODO', data: { id: 1, text: '리덕스 배우기' } } 액션 생성함수(Action Creator) 액션 생성 함수는 액션 객체를 만들어주는 함수다. 화살표 함수로도 표현 가능하다. function addTodo(data) { return { type: 'ADD_TODO', data, } } 리듀서(Reducer) 리듀서..

컴포넌트와 상태를 분리하여 전역에서 상태 관리를 해줄 수 있게 해주는 상태 관리 라이브러리인 Redux. React 애플리케이션을 개발할 때 Redux를 사용하면 React 컴포넌트 간의 복잡한 데이터 흐름을 따라갈 필요가 없어진다. 특히 컴포넌트가 많아지고 애플리케이션의 구조가 고도화될수록 Redux를 활용한 상태 관리는 필요하다. 프론트엔드 개발에서의 상태관리 상태관리의 주요 언칙을 배우고 따라간다면, 컴포넌트 간 서로 느슨하게 결합된(loose coupled), 구조적으로 아름다운 코드를 작성할 수 있다. 상태란 무엇인가? 변하는 데이터 “UI에 동적으로 표현 될 데이터” 프론트엔드 개발에서의 Side Effect 상태를 다룰 때 Side Effect 는 주요 고려대상이다. 함수(또는 컴포넌트) 의..

React 애플리케이션을 만들 때 DOM을 직접 조작하는 것은 지양해야한다고 배웠다. 하지만, 개발을 하다보면 DOM을 직접 건드려야하는 상황이 발생하기도 한다. 이럴 때 사용할 수 있는 것이 바로 useRef 라는 Hook 함수이다. DOM reference를 잘 활용할 수 있는 useRef React로 모든 개발 요구 사항을 충족할 수는 없다. 아래와 같이 DOM 엘리먼트의 주소값을 활용해야 하는 경우 특히 그렇다. focus text selection media playback 애니메이션 적용 d3.js, greensock 등 DOM 기반 라이브러리 활용 React는 이런 예외적인 상황에서 useRef 로 DOM 노드, 엘리먼트, 그리고 React 컴포넌트 주소값을 참조할 수 있다. const 주소..

컴포넌트 UI 개발을 위한 Storybook Component Driven Development가 생겨나면서 이를 지원하는 도구 중 하나인 Component Explorer (컴포넌트 탐색기) 가 등장했다. 그 중 하나가 Storybook. UI 개발 즉, Component Driven Development를 하기 위한 도구 각각의 컴포넌트들을 따로 볼 수 있게 구성해 주어 한 번에 하나의 컴포넌트에서 작업할 수 있다. 복잡한 개발 스택을 시작하거나, 특정 데이터를 데이터베이스로 강제 이동하거나, 애플리케이션을 탐색할 필요 없이 전체 UI를 한눈에 보고 개발할 수 있다. Storybook은 재사용성을 확대하기 위해 컴포넌트를 문서화하고, 자동으로 컴포넌트를 시각화하여 시뮬레이션할 수 있는 다양한 테스트 ..

Component Driven Development(CDD)컴포넌트주도개발 회사에서 페이지 개발을 하던 중 다른 페이지에 적용되었던 버튼을 새로운 페이지에 추가하려고 한다. 이때 같은 UI컴포넌트를 공유하면 새로 개발하지 않아도 된다. = 재사용할 수 있는 UI컴포넌트 = 부품 단위로 UI 컴포넌트를 만들어 나가는 개발 CDD를 활용한 개발 방법은 컴포넌트 단위로 만들어 페이지를 조립하는 개발 방식인 상향식 개발에 가깝다. 구조적인 CSS 작성 방법의 발전 기술의 발달과 함께 다양한 환경에서 인터넷을 사용하기 시작하면서 CSS 작성방식도 발전하고있다. 또,함께 일하는 사람들도 많아지면서 css 는 양도 많고 더 복잡해졌고, 다양한 디바이스의 등장으로 웹사이트들이 다양한 디스플레이를 커버 해야되서 css는..

✅ React 데이터 흐름 React의 개발 방식의 가장 큰 특징은 컴포넌트 단위로 시작한다는 점이다. 단일책임원칙으로 하나의 컴포넌트는 한 가지 일만 한다. 페이지를 만들기 이전에 컴포넌트를 먼저 만들고 조립을 한다. 즉, 상향식으로 앱을 만든다. 상향식의 장점은 테스트가 쉽고 확장성이 좋다는 것이다. 컴포넌트는 컴포넌트 밖에서 props를 이용해 데이터를 마치 전달인자(argument) 혹은 속성(attributes)처럼 전달받을 수 있다. 데이터는 위에서 아래로 흐른다. =하향식 = 단방향 데이터흐름(one-way data flow) 즉, 데이터를 전달하는 주체는 부모 컴포넌트가 된다. 또한 컴포넌트는 props를 통해 전달받은 데이터가 어디서 왔는지 전혀 알지 못한다. 어떤 데이터를 상태(stat..

Before You Learn JSX React Component Create React App 개요 웹페이지는 페이지를 유저에게 보여줄 때 서버에 미리 준비되어 있는 페이지를 전달 받아와서 렌더링을 했다. 하지만 규모가 커질수록 속도 저하 등의 문제가 발생한다. 이러한 문제를 해결하기 위해 SPA를 사용한다. 학습목표 SPA(Single-Page Application) 개념을 이해하고 설명할 수 있다. SPA의 장, 단점에 대해 이해하고 설명할 수 있다. 와이어프레임을 보고 어느 부분을 컴포넌트로 구분할지 스스로 정할 수 있다. SPA SPA의 등장 배경과 개념 전통적인 웹사이트는 사용자가 다른페이지로 이동하면, 브라우저가 페이지를 보여주기 위해 매번 HTML파일로 된 “페이지 전체”를 불러와야했다. ..