건망증 환자의 뇌장하드

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웹 개발자를 모바일 개발로 쉽게 이동 시킬 수 있다는..

Monorepo를 도입하게 된 이유 현재 재직중인 회사에서 yarn workspace를 사용한 Monorpo로 프론트 시스템을 구축했었다. Monorepo를 도입하며 아래의 효과를 기대했다. 중복되는 패키지에 대한 활용도 향상 - 예를 들어 ESlint 또는 Prettier와 같이 각 패키지별 동일한 설정이 필요한 경우, Root 패키지에 한번만 설정해두면 모든 하위 프로젝트에서 동일하게 사용한다. - rollup이나 webpack과 같은 번들러를 사용하기 위한 종속성을 Root에 설치하면 각 앱별로 동일한 종속성을 바라보게 되므로 한번의 설치로 각 프로젝트에 번들러를 적용할 수 있고, 프로젝트의 절대적인 크기는 줄어들게된다. 컴포넌트 재사용성을 Application(이하 앱) 단위가 아닌 프로젝트 단위..

Select 컴포넌트를 만들다가 자동완성 기능이 필요했다. 자동완성을 위한 알고즘이 어떤것이 있을까 하다가 Trie DS를 이용하여 간단하게 구현할 수 있을 것 같아서 구현을 하게 되었다. Trie란? 문자열의 접두어 기준으로 트리 형태로 저장하는 자료구조 dictionary 타입으로 이루어진 트리 형태가 된다. Prefix - dictionary의 key isWord - 해당 노드가 마지막 깊이의 노드인지, 즉 문자열의 끝인지 여부를 가짐, boolean type word - 해당 노드가 마지막 깊이의 노드일 경우 prefix로 시작하는 전체 문자열을 저장 next - 다음 노드를 가리키는 참조자 기능 필요한 모든 문자열을 Trie DS로 생성한다. 같은 문자열이 여러개가 올 수 있으며, 문자열에 대한..

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가 필요 다른 클라이언트들과 공유되며, 클라이언트가 ..

canvas 2d context 최적화 2d context 생성 시 alpha(투명도) 옵션을 false로 생성 context alpha 채널이 포함되지 않도록 하여, 브라우저는 배경이 항상 불투명하다고 인식하므로, 렌더링 속도가 개선 const context = canvas.getContext('2d', { alpha: false }); 안티 앨리어싱 컴퓨터 그래픽 해상도의 한계로 계단 현상이 발생하는 앨리어싱이 발생 DPR (Device Pixel Ratio) : CSS Pixel을 구성하는데 필요한 물리적 Pixel 수 ex) 해상도가 높은 모니터에서 text가 흐릿하게 보이는 text blurry 현상이 발생됨 DPR의 기본값은 1, 레티나 디스플레이의 DPR은 2인데, 이때 디스플레이마다 CSS..

Problem 디자인 시스템 구축을 위한 UI 프로젝트의 개발을 진행. 최초 개발 시 컴포넌트별 색상의 변경이 있을 것이라는 고려는 없는 상태로 개발 진행하여 version1에서 지원해야 할 컴포넌트들이 개발됨. light 테마만 지원하는 프로젝트가 개발됨 Use case 신규 개발 프로젝트에서 디자인 컴포넌트를 제공하기 위해 개발 하던 도중 고객사의 요청이 다크 테마를 지원해야 된다고 하여 디자인이 변경됨 따라서 기존에 개발된 컴포넌트의 색상때문에 이용할 수 없는 상황이 발생함. 이용할 수 있도록 컴포넌트의 테마를 주입하는 기능이 필요함. Condition Dark 테마를 지원해야 함. 고객사에서 요청하는 프로젝트의 Dark테마 Color set과 추후 사내 플랫폼에서 사용할 Dark테마의 Color ..

이미 개발되어 있는 컴포넌트에 추가적인 디자인, 기능이 필요한 경우 문제점 이미 개발되어 있는 컴포넌트라면 외부에서 사용하고 있을 가능성이 높음 만약 미묘한 디자인 또는 기능의 변경이 있더라도 해당 컴포넌트를 사용하는 모든 부분에서 장애를 일으킬 수 있음 해결방안 개발되어 사용되고 있는 컴포넌트에 새로운 기능을 넣지 않도록 한다. 완벽한 기획과 디자인이 선행되어야 하는데 현실적으로 불가능함. 모든 가능성을 열어두고 확장성이 무궁무진한 코드를 작성한다. 실현 불가능함. 같은 ui의 컴포넌트를 버전별로 나누어 개발한다. npm을 이용한 버전 관리를 진행한다. 사내에서만 사용해야 되기 때문에 private 저장소가 필요하다. 컴포넌트와 기능은 완전히 분리할 것 이를방지하기 위해 기능은 컴포넌트 외부에 일임하도..