디자이너 개발로그

우리는 어떤 일을 할 때 과거의 기억을 활용한다. 카메라를 활용할 때에는 카메라에 대한 기억이 단서가 된다.처음 보는 카메라라도, 우리는 카메라에 대한 기억을 통해 하나하나 뜯어보는 대신 뻔한 것들을 건너뛰고 새로운 정보를 이해하고 처리한다. 시스템 역시도 그렇게 반복될 내용들을 기억할 수 있다면 더 빠른 처리가 가능해질 것이다.useMemo는 그러한 캐싱(caching)을 해주는 훅이다. 캐싱이란 과거에 처리했던 데이터를 임시적으로 저장하여 새로운 처리에 활용하도록 하는 것을 의미하는데, useMemo는 이러한 기억의 역할을 한다. 기본적으로 리액트는 어떤 컴포넌트를 호출할 때마다 그 내부에 선언된 기능을 다시 실행하는데, 컴포넌트가 복잡하다면 이는 많은 낭비를 초래한다. 데이터에 변화가 있다면 당연히..

Write once, compile anywhereQt는 C++을 기반으로 하는 그래픽 사용자 인터페이스(GUI) 프레임워크로, 엔진에 해당하는 C++언어와 표시 언어인 자체 규격의 QML 두 가지 언어를 활용한다. LGPL 또는 GPL 라이센스를 적용하는 대부분의 라이브러리 특성 상 코드를 공개할 경우에는 비 상업적인 용도 한정으로 무료로 사용할 수 있지만, 상업적인 용도로 쓰거나 코드 공개를 하지 않으려면 라이센스 비용을 지불해야 한다.크로스 플랫폼을 지원하는 장점이 있으나 태생이 데스크톱 환경으로 출발하여, 모바일 환경에 대한 최적화가 아주 좋은 평가를 받고 있지는 못하다. 그러나 버전이 오르면서 개선이 이뤄지고 있으며, 해외에서는 많은 프로그램들이 Qt로 만들어지고 있어 글로벌하게 본다면 장래성이..

지난 글에서 Props의 역할이 컴포넌트의 속성을 정의하기 위한 것이며, 우리가 많이 사용하는 '하향 데이터 통신' 기능은 결과적으로 속성을 전달하는 과정에서 활용할 수는 있지만, 속성을 전달하는 과정이 하향식으로 이뤄지다보니 그런 식으로도 활용할 수 있게 되는 것이며, 속성의 본연적 기능은 자식 컴포넌트의 정체를 정의하는 것으로 보아야 정확하게 사용할 수 있을 것임을 살펴보았다. 그렇다면 실제로 컴포넌트 간의 통신을 할 때에는 무엇을 사용해야 할까? 여러가지 방법이 있지만, 이번에 다뤄볼 Context API가 그 중 하나가 될 수 있다.API(Application Programming Interface)는 그 용어 자체적으로도 연결의 의미를 지니고 있다. 즉 접면(Interface)으로써 둘 사이를 ..

디자이너들에게 '객체지향'이라고 하면 사용자 경험 디자인(UX Design)과 같이 사용자, 손님을 먼저 생각하는 개념으로 오인하는 경우가 있다. 이 '객체(Object)'라는 개념이 낯설어서인데, 객체는 손님 객자를 써서 시스템을 사용하는 누군가를 의미하는 것으로 생각할 수 있지만 사실 주체(Subject)의 반대로서 번역된 용어이며, 오히려 '개체'에 더 가까운 개념이다.개발에서 이야기하는 '객체'란, 그 자체로 완결성을 가진 프로그램의 블록을 의미한다. 객체와 비교되곤 하는 것이 함수(Function) 또는 프로시저(Procedure)인데, 이들은 입력된 값을 계산해 결과값을 출력하는 단위들이다. 작동을 위한 인자(parameter)가 존재하며, 이를 인수(argument)의 형태로 대입하여 사용한..

리액트를 다루면서 처음에 많이 헷갈렸고, 지금도 종종 막히는 부분이 속성(Props) 관련 내용인데, 그리 어렵지 않은 것 같으면서도 막상 뭔가 만들 때에는 의도한대로 작동하지 않아 당황하게 만드는 요인이기 때문이다. 이번 포스팅에서는 이 속성에 대해 완벽히 살펴봄으로써 올바르게 사용해보고자 한다.일단 속성(Props; Properties) 자체는 웹에서 쓰던 형태와 동일하다. 웹에서는 문서의 엘리먼트(Element)의 구체적인 속성을 정의할 때 속성을 활용하는데, 예를 들어LINK위의 예시에서 하이퍼링크 참조(href; hyper reference)가 a 엘리먼트의 속성에 해당한다. 속성은 문서의 마크업 태그 자체가 가지고 있는 성질이며, 해당 성질을 정의해줌으로써 엘리먼트가 그 성질을 갖도록 한다.리..

회귀 등의 방법을 통해 일반적으로 데이터를 분류하는 방법들은, 각 데이터의 분류를 확률적으로 계산하여 그 소속 여부를 결정한다. 즉, 확률에 대한 어떤 특정한 임계값을 넘는지 못넘는지에 따라 분류 여부를 판단하는 방식으로, 각 데이터가 특정 클래스에 속할 확률을 계산함으로써 분류가 실패할 확률(에러율)을 줄이는 쪽으로 학습을 진행한다. 이는 처음부터 분류 자체를 목적으로 한다기보다는, 데이터가 가까운 쪽의 클래스로 분류됨으로써 자연스럽게 분류가 완성되는 것이다.서포트 벡터 머신(Suppor Vector Machine)은 이러한 방법들과 다르게 분류 자체를 목적으로 두고 데이터 간의 거리를 계산하여 그 사이의 가장 여백(margin)이 큰 경계를 찾는 방식으로 데이터 간에 경계를 나누면서 학습을 진행한다...

인공지능의 개념이 처음 모습을 드러냈을 때 우리는 '단순 노동자 부터의 일자리 소멸'을 예상했었다. 제아무리 인공지능이라도 고차원적인 개념이해나 발상은 어려울 것으로 여겨졌고, 비교적 단순한 노동을 모사하는 것에서부터 시작될 것으로 여겨졌기 때문이다. 특히 '디자인'은 미학이나 창의적인 측면이 많아 기계학습으로 따라가기는 어려울 것으로 판단되곤 했다.그러나 기술의 변화로 인공지능이 두각을 드러내기 시작하면서 이러한 인식의 양상은 달라졌다. 실제로는 오히려 우리에게 너무나 쉬운 걷기, 물건 집기, 옮기기 등은 기계에게 너무나 많은 조작과 섬세한 변수 제어를 필요로 하는데 비해 오늘날 거의 전산 위주로 이뤄지던 지식 노동은 오히려 기계의 영역이었기에 '어떻게 하는 건지' 학습만 이뤄지면 쉽게 처리가 가능했기..

리액트에서 어떤 값을 선언하고 대응하여 사용할 때에 일반적으로 쓰이는 것은 지난 글에서 다룬 상태(State)값이다. 그런데 상태는 말 그대로 구성요소의 상태에 관계된 값이기 때문에, 상태가 변하면 구성요소 역시 변해야 한다. 즉, 상태의 변화는 구성요소를 다시 로드(렌더)시킨다. 이 동작이 원하는 동작이었다면 관계 없지만, 값이 변하더라도 결합된 구성요소가 바로 다시 렌더링되기를 원하지 않을 수 있다. 이 때 사용할 수 있는 것이 참조(useRef)이다.useRef의 사용법은 아래와 같다:import {useRef} from 'react';const ref = useRef(initialValue);위를 통해 상수 ref는 initialValue라는 초기값을 current로 갖는 객체가 되는데, 따라서 ..

기술적인 매커니즘이나 로직을 이해하려 하는 디자이너들이 있는 반면, 그 쪽은 나의 일이 아니기 때문에 벽을 쌓고 건드리지 않으려고 하는 디자이너들도 있다. 이 둘 중 어떤 쪽이 옳으냐 묻는다면, 당연하게도 답은 '상황에 따라 다르다.'일 것이다. 이는 디자이너 개인의 역량, 적성, 동기 뿐 아니라 업무의 세부 분야나 조직의 구성 등에 따라서도 너무나 달라지기 때문이다. 자신에게 맞지 않는 것을 억지로 하려다가 역효과가 날 수도 있고 조직에 속한 경우나 주어진 업무의 성격, 범위에 따라 디자이너가 기술까지 알려 하기엔 맞지 않는 경우도 많다.그러나 그럼에도, 일반적으로 디자인이 기술을 이해해야 하느냐고 묻는다면 '그렇다.'고 대답하게 된다. 위에서 말한 개인의 케이스는 세세한 사정에 따라 답이 달라지지만,..

정리함수(clean up)란 말 그대로 기존의 값을 정리하여 다음 기능이 수행될 때 방해가 되지 않도록 하는 함수를 말한다. useEffect 훅의 정리함수에 대해 React에서 설명하는 문서의 문구를 가져오면 아래와 같다.Your setup function may also optionally return a cleanup function. When your component is added to the DOM, React will run your setup function. After every re-render with changed dependencies, React will first run the cleanup function (if you provided it) with the old valu..