건망증 환자의 뇌장하드

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

자바스크립트 엔진컴퓨터가 JS파일을 이해하고 명령을 수행할 수 있도록 한다.JS파일을 컴퓨터가 읽을 수 있는 코드로 변환하여 전달하여, 컴퓨터는 이를 실행한다.V8은 JS엔진의 종류 중 하나이며, 다양한 브라우저(크롬, 사파리, 엣지 등), 안드로이드 브라우저, NodsJS 런타임등 사용된다.Compile과 Interpret프로그래밍 언어를 컴퓨터가 읽을 수 있도록 번역을 하는 두가지 방식이 있다.Compilation컴파일러가 코드를 기계어로 번역한다.컴파일러는 코드 전체를 읽은 뒤 이를 바로 실행 가능한 기계어로 번역하여 실행한다.함수를 100번 실행 해야된다면 함수의 동작과정을 100번 실행하는 것이 아닌 함수의 결과를 100번 읽는다.Interpretation인터프리터가 코드를 기계어로 번역한다.코..

- Web worker를 이해하기 위해 프로세스와 스레드에 대하여 알고 있어야 한다.프로세스란?실행중인 프로그램이다.즉, OS로부터 메모리를 할당받아 실행중인 프로그램을 의미한다.이러한 프로세스는 프로그램에 사용되는 데이터와 메모리, 스레드(Thread) 등으로 구성된다.스레드란?프로세스 내부에서 실행되는 작업 단위(unit)이다.하나의 프로세스는 내부에 여러개의 스레드가 포함될 수 있다.여러개의 스레드는 서로의 데이터에 접근이 가능하다.스레드도 프로세스처럼 작업을 병렬로 처리할 수 있다.스레드의 메모리 영역을 thread stack이라고 부른다.멀티 스레드여러개의 스레드를 구성하여 작업을 병렬로 처리한다.예를 들어 1분이 소요되는 4개의 작업을 직렬로 처리할 경우 4분이 소요된다.멀티스레딩으로 4개의 ..

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..