건망증 환자의 뇌장하드

react-native를 설치한데 이어 간단한 Todo앱을 구현해보았다.input에 할일을 적고 add 버튼을 누르면 하단 리스트에 추가된다.checkbox를 클릭하면 todo에서 할일을 했다는 표시로 글자 가운데 줄이 그어진다.각 row는 delete 버튼이 있어서 리스트에서 제거할 수 있다. 레이아웃react-native는 기본적으로 화면을 구성하기 위해 내장 컴포넌트인 View 컴포넌트를 사용하며, StyleSheet를 이용하여 스타일을 구성한다.StyleSheet는 css의 스타일 기능을 제공하며, camel case 방식을 사용한다. Container앱 화면을 구성하는 containerreact-native는 ios, android 모두 지원하므로 둘 다의 레이아웃을 적용해야 한다.ios는 상단..

최근 모바일 어플리케이션 개발에 대한 관심이 생겨 react-native를 사용해보기로 했다.모바일 어플리케이션을 개발하기 위해 여러가지 툴이 있지만, 나에게 가장 익숙한 코딩방식을 제공하는 react-native를 사용해보았다. react-native란?facebook (meta)에서 개발한 오픈소스 모바일 앱 프레임워크이다.프로그래밍 언어가 각각 다른 네이티브와 다르게(Java/Kotlin로 개발하는 Android, ObjectiveC/Swift의 IOS) JS 하나로 IOS, Android 개발이 가능한 크로스플랫폼이다.React와 비슷한 문법으로 React 개발자가 쉽게 입문하기 좋다는 특징이 있다.React와 동일한 문법을 사용하므로 React웹 개발자를 모바일 개발로 쉽게 이동 시킬 수 있다는..

React Application에서 서버 상태 관리(Caching, Continous Synchronization, etc…)의 도움을 주는 라이브러리이다. api요청을 보낼 때, React의 Local state와 Server state를 동기화하게 되는데 이때 편의성을 준다. Client state vs Server state Client state 클라이언트 소유 클라이언트에서 제약없는 제어가 가능함 Client내 UI/UX 흐름 또는 사용자 인터렉션에 따라 변할 수 있음 Client내에서 최신 상태로 관리됨 Server state 서버의 상태, 클라이언트 입장에서는 원격의 공간에서 제어되는 상태 Fetching / Updating에 비동기 API가 필요 다른 클라이언트들과 공유되며, 클라이언트가 ..

Redux redux는 인기있었던 전역 상태관리 라이브러리입니다. redux와 같은 전역 상태관리라이브러리를 이용하여 상태 관리에 대한 단순화를 제공할 수 있습니다. 깊이가 50인 컴포넌트가 존재하고 root컴포넌트에서 최하위 컴포넌트에 상태를 전달하는데 그 사이의 컴포넌트에서는 그 상태를 전혀 사용하지 않는다고 생각해볼때 48개의 컴포넌트에 쓰지않는 코드가 추가되는 불합리한 구조를 가지게 됩니다. 전역 상태관리를 이용하여 root컴포넌트의 상태를 최하위 컴포넌트가 바로 접근하여 사용할 수 있다면 상태관리에 대한 단순함을 제공할 수 있게 됩니다. redux의 데이터 흐름도는 다음과 같습니다. React Component에서 변화가 일어남 action 생성함수(Action Creator)에서 action을..

DOM HTML, XML등 문서의 프로그래밍 interface입니다. 문서의 구조회 된 표현을 제공하며, 프로그래밍 언어가 DOM 구조에 접근하여 문서 구조를 동적으로 변경할 수 있도록 돕습니다. Node와 property, method 등을 가지고 있는 object문서로 표현하며, 이들은 Web page를 script 또는 프로그래밍 언어들에서 사용될 수 있도록 연결시켜주는 역할을 담당합니다. Virtual DOM virtual DOM은 UI를 가상으로 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의하여 실제의 DOM과 동기화 하는 프로그래밍 개념입니다. DOM을 수정하는 일은 비용이 크기 때문에 성능저하를 최소화 하기 위해 DOM을 최소한으로 수정해야 됩니다. 웹 application이 복잡..

React Hooks Hooks는 React v16.8에 추가된 기능입니다. 이전 버전에서 함수 컴포넌트에서는 사용할 수 없던 class 컴포넌트의 Life Cycle메서드(componentDidMount, componentWillUnmount, componentDidUpdate)와 동일한 기능을 사용할 수 있도록 고안된 기술입니다. Closure 함수가 속한 Lexical scope를 기억하여 해당 함수밖에서 이 scope에 접근할 수 있게 하는 기능. react hooks를 이해하기 전에 먼저 closure를 알고 있어야 합니다. closure를 한줄로 정의하면 위와 같습니다만, 잘 이해하기 위해 직접 사용해볼 필요가 있습니다. 여기서는 React hooks를 직접 만들어보며, closure를 사용해..

Redux redux는 인기있었던 전역 상태관리 라이브러리이다. https://kmj24.tistory.com/43 Redux 리덕스 리덕스는 상태(State)를 관리 라이브러리이다. 상태(State) 란? 컴포넌트 내 mutable 데이터 저장소이다. mutable하다는 의미는 상태값을 변경할 수 있다는 것이고 뷰(render)에서 상태를 이용하고, kmj24.tistory.com redux의 주요 규칙을 다시 짚어보자 1. Action 상태에 변화가 필요할 때 action을 발생시켜서 redux에 dispatch 2. Reducer 상태를 변화시키는 함수 reducer는 순수함수이며, state, action 2가지 파라미터를 가지도록 한다. 순수함수 - 이전 상태를 변경하지 않고, 새로운 상태 객체..

이전에 알아본 React reconciliation (heuristic) 알고리즘은 재귀적으로 동작하므로 도중에 멈출수가 없다. 만약 알고리즘 실행 작업이 오래 걸린다면 화면이 끊기는 현상이 발생할것이다. 페이스북에서 이러한 불합리적인 알고리즘을 개선하기위해 2년 넘게 연구한 결과 react v16부터 fiber알고리즘을 도입하였다. Recursion 간단한 재귀호출 함수이다. function recursion(num: number): number { if (num > 10) return number; return recursion(num + 1); } recursion(0); 재귀호출함수가 실행 될 때 Call stack에 차례대로 쌓이게 된다. reconciliation 알고리즘은 재귀 알고리즘으로,..