React

리액트는 모던 웹 에플리케이션 개발에 있어서 사용자 인터페이스를 개발하기 위한 자바스크립트 라이브러리이다. Angular나 Vue.js와 같은 프론트엔드 프레임워크들도 있지만 깃허브에서 star를 받은 프로젝트 수나 npm에서의 패키지 다운로드 수는 리액트가 훨씬

기존의 웹 페이지는 멀티페이지 어플리케이션으로 사용자가 웹 사이트 내의 다른 페이지로 이동하면 페이지 전체를 다시 로드하는 방식으로 구현되어 있었다. 웹 사이트가 점차 복잡해지기 시작함에 따라 사용자와 서비스 사이의 상호작용은 더 많아지게 되었는데 그때마다 예를 들어

리액트는 컴포넌트 기반의 계층 구조로 이루어져 있고 그 안에서 데이터를 다룰 수 있다고 했었다. 상태(state)와 속성(props)는 이 데이터의 일종이다. 상태란 해당 컴포넌트 내부에서 관리되는 데이터로 컴포넌트의 렌더링 결과나 동작에 영향을 주는 값이다. 주로

리액트의 속성에 대해서 이야기하면 리액트의 하향식 단방향 데이터 흐름에 대해서 간단하게 설명했었다. 그런데 여기서 발생할 수 있는 문제가 한 가지 있다. 만약 부모 컴포넌트에서의 상태가 하위 컴포넌트의 어떤 이벤트로 인해 변경되야 한다면 어떻게 구현해야하는가의 문제이다

리액트는 컴포넌트라는 단위를 기반으로 개발할 수 있는 라이브러리라고 했었다. 그 이전에 이런 라이브러리가 등장한 방법론이 바로 CDD(Component Driven Development)이다. 컴포넌트를 중심으로 기능적으로 독립된 컴포넌트를 개별적으로 설계, 개발,

리액트에서 상태란 컴포넌트의 렌더링 결과나 동작에 영향을 주는 컴포넌트 내부에서 관리되는 데이터라고 했었다. 상태가 하나의 컴포넌트 내부에서만 쓰일 때도 있지만 다른 컴포넌트도 이 상태의 영향을 받아야만 할 때도 있다. 이전 포스트에서 설명한 상태 끌어올리기 역시

UI나 UX라는 단어 자체는 개발자나 IT 업계 종사자가 아니더라도 알 수 있을 정도로 친숙한 단어이다. 이번 포스팅에서는 UI/UX의 개념을 설명하고 UI/UX를 설계하기 위해 어떤 디자인들이 활용되고 있는지를 알아보려고 한다. 우선 UI란 User