전체 글
[React] sagen을 사용해서 간단히 상태 관리하기
[React] sagen을 사용해서 간단히 상태 관리하기
2021.05.16React에서 전역 상태를 관리하기 위해서 Redux를 많이 사용합니다. 하지만, Redux의 사용법이 간단하지 않아서 대체하기 위한 라이브러리가 많이 나오고 있습니다. 이 게시글에서는 간단하고 사용하기 쉬운 sagen에 대해 알아보겠습니다. sagen은 무엇인가? 먼저, sagen은 전역 상태 관리를 하기 위한 최선의 도구는 아닙니다. 아직 개발자 도구도 없으며, 개발이 지속적으로 이루어지고 있는 라이브러리입니다. sagen에 대해 간단히 알아보기 전, sagen은 다른 라이브러리와 어떻게 다른지 알아보겠습니다. 현재 sagen@2.2.0의 MINIFIED + GZIPPED 사이즈는 1.1KB로, Redux@4.1.0(1.6KB)보다 가볍습니다. sagen 시작하기 sagen을 이용해 상태 변경을 위한..
[TypeScript] type과 interface 비교
[TypeScript] type과 interface 비교
2021.05.08TypeScript에서 type과 interface에 대한 차이를 살펴보겠습니다. 기본적인 사용 방법 기본적으로 type과 interface을 사용해 타입을 정의하고 지정하는 방법은 같습니다. interface IStudent { id: number; name: string; } type TStudent = { id: number; name: string; }; const interfaceStudent: IStudent = { id: 0, name: 'name', }; const typeStudent: TStudent = { id: 0, name: 'name', }; 타입을 확장하는 방법 type과 interface는 타입을 확장하는 방법에 차이가 있습니다. type은 & 연산자, interface는 e..
Flutter에서 GraphQL 사용하기
Flutter에서 GraphQL 사용하기
2021.04.08Flutter를 클라이언트에서 GraphQL을 사용하는 방법에 대한 글입니다. 'https://rickandmortyapi.com/graphql' GraphQL API를 이용해 Query를 호출하는 방법을 정리하도록 하겠습니다. graphql_fultter Flutter 프로젝트에서 GraphQL을 사용하기 위해서는 graphql_fultter를 사용해야 합니다. 21년 4월 7일 기준으로 최신 버전은 4.0.1 버전이므로, pubspec.yaml의 dependencies 항목에 아래와 같이 패키지를 추가합니다. dependencies: graphql_flutter: ^4.0.1그 후, flutter pub get 명령어를 실행해 flutter 프로젝트에 설치하면 적용이 완료됩니다. imp..
다트 언어의 특징
다트 언어의 특징
2021.04.02다트는 웹 프론트엔드 개발을 목적으로 개발된 언어입니다. 현재는 서버나 웹, 앱 등을 만들 때 사용할 수 있습니다. 다트 언어의 특징 다트는 다음과 같은 특징을 갖고 있습니다. main() 함수를 시작점으로 가집니다. 모든 변수가 객체이며, 모든 객체는 Object 클래스를 상속 받습니다. 변수 안에 저장되는 값은 모두 Object입니다. Function, number, null 등이 모두 Object로 취급됩니다. 따라서 변수에 저장되는 모든 값은 클래스의 인스턴스로 취급됩니다. 동적 타입(dynamic)을 지원하는 정적 타입 언어입니다. var: type을 지정하지 않아도 dart에서 타입 추론을 합니다. dynamic: 변수에 타입 제한을 두지 않습니다. 다른 타입을 다시 대입할 수 있습니다. 제너..
[JavaScript] 함수를 콜백으로 전달할 때
[JavaScript] 함수를 콜백으로 전달할 때
2021.02.12메일로 한 통의 미디엄 글을 받았습니다. 해당 글의 경우 parseInt를 map에 전달했을 때 이상한 값이 나온다는 내용이었는데 코드는 다음과 같습니다. ['1', '7', '11'].map(parseInt); // [1, NaN, 3] ['1', '7', '11'].map(Number); // [1, 7, 11] 위와 같이 나오는 이유에 대한 글인데, parseInt와 Number의 매개변수는 각각 다음과 같습니다. parseInt: string, radix Number: value Number에서는 잘 동작하지만 parseInt에서는 값의 결과가 깨지는 이유는 array.map의 콜백으로 parseInt를 사용하는 것이 함수 설계에 맞지 않기 때문입니다. 무엇이 문제일까? const numList ..
sagen - 상태 관리 라이브러리
sagen - 상태 관리 라이브러리
2021.02.10sagen npm sagen Management global state with out provider www.npmjs.com 규모가 큰 앱을 개발할 때 props drilling을 피하기 위한 목적으로, 상태가 변경하는 것을 직접 모니터링하기 위한 목적으로 또는 그 외의 이유로 상태 관리 라이브러리를 사용하곤 합니다. 또한, 상태 관리 라이브러리를 사용하지 않고 ContextAPI를 사용하는 경우도 있습니다(이 경우, ContextAPI는 타 상태 관리 라이브러리와 달리 렌더링 최적화가 이루어지지 않음을 인지하고 설계되어야 합니다). 위와 같이 이미 많은 상태 관리 라이브러리가 존재하며, 새로운 라이브러리가 종종 등장합니다. 본 글에서는 상태 관리 라이브러리 중 하나인 sagen에 대해서 알아보도록 ..
[React] useEffect의 동작 원리
[React] useEffect의 동작 원리
2021.01.31useEffect Hook은 dependency 배열 내에 지정된 값의 변화가 일어났을 때 이펙트 함수가 실행됩니다. 이러한 특성으로 인해 컴포넌트가 마운트될 때 API를 통해 데이터를 가져오거나, state 값 또는 props 값이 변경될 때 특정 함수를 실행시키는 등의 작업을 하는 데 사용됩니다. 함수 컴포넌트에서 return 구문 밖에서의 함수 실행은 거의 모두 useEffect 내에 작성됩니다. 또한, 컴포넌트는 하나 이상의 useEffect Hook을 가질 수 있습니다. 이 게시글에서는 useEffect가 어떻게 동작하는지에 대해서 알아보도록 하겠습니다. TLDR useEffect로 componentDidMount 흉내내기 useEffect로 componentDidMount를 흉내내기 위한 방법..
[JavaScript] Virtual DOM 만들기
[JavaScript] Virtual DOM 만들기
2021.01.26React 공식 홈페이지에서는 Virtual DOM을 'UI로 표현될 객체를 가상 메모리에 저장하여 라이브러리에 의해 실제 DOM으로 동기화 하는 개념'으로 표현하고 있습니다. 여기서 UI로 표현될 객체는 DOM을 의미하며, 라이브러리는 VirtualDOM을 렌더링해주는 라이브러리를 의미합니다. TLDR 리액트는 두 가지 전략을 사용해 diff 알고리즘을 기존의 O(n^3)에서 O(n)으로 성능 개선을 하였습니다. 리액트에서 사용하는 Virtual DOM을 바닐라 자바스크립트로 충분히 구현 가능하다는 것을 알 수 있습니다(본 게시글의 Virtual DOM 코드는 리액트의 Virtual DOM diff 알고리즘과 많이 다릅니다). 리액트를 사용할 때 데이터의 변화에 따른 화면 변화의 흐름을 이해한다면 Vi..
[JavaScript] 바닐라 자바스크립트로 웹 컴포넌트 만들기
[JavaScript] 바닐라 자바스크립트로 웹 컴포넌트 만들기
2021.01.25자바스크립트만 사용해서(제이쿼리, 리액트, 뷰 등을 사용하지 않고) 웹 컴포넌트를 만드는 방법에 대해 알아보겠습니다. 바닐라 자바스크립트란? 프레임워크나 라이브러리가 포함되지 않은 순수한 자바스크립트를 의미합니다. 웹 컴포넌트 HTML 엘리먼트를 위해 만들어진 재사용 가능한 자바스크립트 코드를 의미합니다. 재사용이 가능하다는 것은 코드가 함수 등으로 작성되어 언제든 임의의 HTML 엘리먼트에 적용할 수 있다는 것을 의미합니다. TLDR; 함수를 이용해 만드는 방법은 쉽고 빠르게 작성할 수 있어 웹 컴포넌트를 구현할 때 가장 많이 쓰이는 방식 MutationOvserver는 IE11 이하 버전을 지원하지 않으며, 모든 엘리먼트의 추가 / 제거를 감시해 성능 문제를 일으킬 수 있음 커스텀 엘리먼트를 만드는 ..
[C언어] 가변 길이 배열(Variable-length Array)를 사용할 때
[C언어] 가변 길이 배열(Variable-length Array)를 사용할 때
2021.01.23가변 길이 배열(Variable-length Array)은 배열의 크기를 컴파일 타임에 정하지 않고 실행 타임에 정할 수 있도록 하는 기능이다. TLDR; malloc은 메모리 수동 관리, VLA는 자동 관리 C11에서는 지원이 필수가 아님 -> C++17에서도 지원이 필수가 아님 VLA는 편리하지만 큰 크기의 배열을 사용할 때에 적합하지 않음 malloc과 VLA C99 에서는 해당 기능을 제공한다. int input_array_size(int size) { int array[size]; ... return 0; } 해당 기능을 지원하지 않는 C 버전을 사용할 때에는 아래와 같이 malloc을 이용해서 위 기능을 구현할 수 있지만, 그래도 위 기능을 직접 사용한다면 더욱 편리하게 구현할 수 있다. in..
[회고] DayDo 하이라이터 회고
[회고] DayDo 하이라이터 회고
2021.01.09DayDo 하이라이터 회고 팀원들과 사이드 프로젝트로 DayDo라는 크롬 익스텐션 사이드 프로젝트를 진행하고 있습니다. 프로젝트 소개 DayDo 크롬 익스텐션은 해야 하는 일을 관리할 수 있는 간단한 앱입니다. 익스텐션 팝업에서 해야 하는 일을 빠르게 추가 / 제거 할 수 있으며, 제공하는 TODO 페이지에서 캘린더와 함께 해야 하는 일의 진척도를 확인할 수 있습니다. 12월 13일 0.1.0 버전이 공개되었으며, 이번 업데이트로 하이라이터 관련 기능이 추가되었습니다. 사용한 기술 이번에는 popup과 optional page의 작업 비중이 크게 줄어들고, contents, background script 의 비중이 크게 늘어나면서 TypeScript와 rollup을 사용했습니다. 하이라이터를 구현하기 ..
[JavaScript] Element를 저장 및 불러오기
[JavaScript] Element를 저장 및 불러오기
2021.01.04[JavaScript] Element를 저장 및 불러오기 이 글은 Range 값을 저장하기 위해 코드를 작성하다가 localStorage에 Element 정보가 저장되지 않아서 이를 해결하기 위한 트러블 슈팅을 정리한 글입니다. TLDR; Range 값을 저장 후 불러오고 싶은데, Element 값을 저장할 수 없었습니다. JSON.stringify를 사용해서 Element를 문자열 값으로 수정하려 하더라도 빈 객체가 반환되었습니다. 이를 해결하기 위한 방법을 알아보던 중, 페이지의 Element에 data-key를 모두 설정한 뒤, 해당 data-key를 저장하는 방법도 있었습니다. 하지만, 이 방법의 경우 페이지 내에서 변경이 일어난다면 data-key 값이 이전과 같을 것이라 보장할 수 없습니다. ..