들어가며 이전에 3D 모델을 사용하여 구현된 웹사이트들을 보며 이걸 어떻게 구현하는걸까 하는 호기심을 갖게 되어 WebGL이란 기술을 알게 되었는데요. WebGL을 더 가볍고 쉽게 접근할 수 있도록 도와주는 프레임웍들이 몇 가지 있습니다. 그중에서 제가 직접 경험해본 'Babylonjs'를 소개하고자 합니다. WebGL 이란? WebGL은 Web Graphics Library의 약자입니다. 웹에서 2D와 3D 그래픽을 렌더링하기 위한 로우 레벨 Javascript API 이며, OpenGL ES 2.0을 기반으로 브라우저 엔진에 내장된 HTML5 Canvas Element 위에 2D, 3D 그래픽을 그려줍니다. 사실 canvas는 처음부터 3D 그래픽을 렌더링하진 못했다고 합니다. 처음에는 일부 위젯과 ..

들어가며 어떤 사건이 일어나면 뉴스에서는 관련 분야의 전문가를 초대해 제각기 생각하는 또는 주장하는 의견을 이야기합니다. 2년 전 코로나 바이러스로 모든 국민이 어떻게 대처해야 할지 어려워할 때, 각종 미디어에서 다양한 분야의 전문가들을 모셔 의견을 나누는 것을 기억하실 것입니다. 예컨대 바이러스 전문가, 의료계 전문가, 방역 체계 전문가, 학교 선생님 등 인터뷰를 나누고 각자의 전문 지식을 바탕으로 왜 이런 현상이 일어나는지, 지금 우리에게 중요한 것은 무엇인지, 어떻게 해결해 나가야 할 것인지에 대해서 이야기를 나눴고, 미디어를 시청하는 사람들은 인터뷰 내용을 보고 지식을 쌓고 각자의 대응 전략을 세워 나갔었습니다. [전문가 인터뷰] 코로나19 세계 곳곳 확산세…대응방식은 제각각, KBS 뉴스9 20..

들어가며 일을 하면 할수록 커뮤니케이션의 중요성을 느끼게 되는데, 그와 반비례하여 점점 생각을 정리하고 말을 하는 부분이 어렵게 느껴지는 상황이 발생하여 조금이라도 도움을 얻고자 “생각정리스킬”이라는 책을 보게 되었습니다. 책에 대한 회고로 봐주시면 될 것 같습니다. 생각을 정리 못 하는 이유 일을 하다 보면 여러 가지 상황들을 맞닥뜨리게 되는데 그럴 때 많은 경우의 수들을 생각하게 됩니다. 그럴 때마다 이렇게 해야지 저렇게 해야지 생각은 하지만 시간이 조금 지나면 그때 어떠했더라… 하고 잊히는 경우도 간혹 발생하지요. 이 책에서 말하는 것처럼 생각은 눈에 보이지 않기 때문에 머리로만 정리해서는 오히려 더 복잡해지거나 정리가 안 되는 경우가 발생할 수 있습니다. 그렇기 때문에 생각을 시각화하는 연습을 통..

들어가며 블록체인의 시초는 Bitcoin: A Peer-to-Peer Electronic Cash System(개인 간 전자화폐 시스템)의 논문으로 블록체인은 기존 중앙 집권화된 금융서비스가 가진 한계 및 문제점을 해결하기 위해 시작된 기술이라고 볼 수 있습니다. 웹 3.0 시대의 금융서비스는 DeFi(Decentralised Finance)로, 중앙화 된 조직이 관리하는 서비스가 아니라, 거래원장을 블록체인 위에서 거래자들이 공유하고 이를 기록하여 기존 금융서비스보다 높은 투명성, 보안성 및 접근성을 가진다고 볼 수 있습니다. 이글에서는 이러한 배경을 기반으로 발전해오고 있는 DeFi서비스는 어떤 것들이 있는지, 그리고 우리가 알아야 하는 것은 무엇이 있을지에 대해서 이야기하고자 합니다. 시작하기 전에..

들어가며 현재 진행 중인 프로젝트에서 차트를 라이브러리를 사용하지 않고 구현할 일이 생겼습니다. 처음으로 svg를 활용해서 두 종류 차트를 구현하게 되었는데 나중에도 간단한 차트일 경우 활용하면 좋을 듯하여 메모를 빙자한 포스팅을 해봅니다. 라인 차트 디자인을 받고 이걸 라이브러리 안 쓰고 어떻게 구현해야 할까 고민했는데, 라인 부분이 떠오르는 게 svg 밖에 없어서 svg polyline을 이용해 라인을 그리게 되었습니다. polyline을 그리는 방식은 points 값에 x,y x,y x,y … 식으로 값을 나열하기만 하면 됩니다. polyline의 스타일은 코드에 직접 입력해도 되지만, 후에 컨트롤이 쉽게 하려면 css에서 컨트롤하는 것이 좋습니다. svg { fill: none; stroke: r..

들어가며 실용주의 프로그래머를 읽기 시작한 지 2달 정도 지났습니다. 약 50개 팁 중에 11개의 팁을 읽고 짧게 공유하고 싶은 내용 하나 지식 포트폴리오에 관해 적어볼까 합니다. 소진되는 자산 지식에 대한 투자가 언제나 최고의 이윤을 낸다. - 벤자민 프랭클린 벤자민 프랭클린의 명언을 시작으로 서문에서는 개발 업무의 특성으로 지식과 경험이 가장 중요한 전문적인 자산이라고 말합니다. 하지만 이 지식과 경험은 소진하는 자산이기 때문에 5년, 10년 후에는 쓸모없는 지식이 될 수 있다고 합니다. (맞는 예 인지는 모르겠지만, 불과 5년 전만 해도 jquery를 안 쓰는 곳이 없었지만 요즘 프로젝트는 jquery 쓰는 곳 찾기가 힘들게 되었죠) 또한 우리의 지식이 구식이 될수록 우리의 가치 역시 떨어진다고 합..

들어가며 Web 3.0과 NFT, 메타버스, 토큰 이코노미, DAO... 새롭게 생겨나는 IT 트렌드를 둘러싼 사람들의 관심과 글로벌 회사들이 보이는 행보를 눈여겨보면 미래의 인터넷 생태계란 지금의 Web 2.0 플랫폼에서 크게 달라진 모습일 것이 분명해 보입니다. 그런 한편, 이런 NFT 콘텐츠 거래나 Web3 관련 로드맵들이 뜬구름 잡는 이야기처럼 들리거나 투기에 집중된 유행처럼 느껴지기도 합니다. 도대체 왜 사람들은 졸려 보이는 원숭이 그림 한 장을 몇억씩 주고 사는 것일까요? 아디다스는 왜 샌드박스에 토지를 구매할까요? 맛있는 커피와 문화적, 정서적 공간을 핵심 가치로 내세웠던 스타벅스는 왜 갑자기 NFT콘텐츠로 눈을 돌린다는 것일까요? 이런 '왜?'에 대한 해답은 사람들에 대한 이해에 담겨 있습..

들어가며 Web 3.0, NFT(Non-fungible token), DeFi(Decentrlised Finance), DAO(Decentalised Autonomous Organisation), 블록체인 등과 같은 키워드들이 작년부터 심심치 않게 보이더니 올해는 더 많은 사람들이 이에 대해 관심을 가지기 시작하는 것 같습니다. 테슬라의 CEO인 일론 머스크는 "Web 3.0은 마케팅 용어에 가깝다"라는 의견을 남겼었고 트위터 창업자인 잭 도시도 Web 3.0은 추구하는 이상과 실체가 다른 기술이라는 부정적인 의견들을 여러 전문가들과 마찬가지로 이야기하였습니다. 하지만 IT & 플랫폼 기업들은 다른 행보를 보이고 있습니다. 아시다시피 페이스북이 메타로 사명을 바꾸면서까지 이러한 기술 도입의 적극적인 모습..

들어가며 혹시 모바일에서 서비스에 회원가입을 한다던가, 무언가 내용을 입력할 때에 특수문자 키보드로 바꾸었다가, 다시 영문으로 바꾸었다가.. 상황에 맞지 않는 키보드가 나와서 번거로운 적 있으신가요? 의미 있는 HTML을 사용하여 사용자에게 더욱 편리한 UX를 제공할 수 있어요. 입력과 관련하여 어떻게 하면 좋을지 알아볼까요? none 가상 키보드를 사용하지 않아요. 키보드를 직접 구현할 때에 사용해요. text (default) 기본값으로 제공되고, type 속성에 따라 제공되는 가상 키보드가 표시돼요. decimal 소수점(.)을 제공하는 숫자형 키보드를 보여줘요. numeric 숫자형 키보드를 보여줘요. decimal 모드의 키보드와 약간 차이가 있어요. tel 전화번호를 입력하는 키보드가 나타나요..

Vue3는 현재 총 7편의 시리즈로 구성되어 있습니다. Vue3 #0 [Vue3를 만나다] Vue3 #1 [변경된 기능 1 - 전역 API] Vue3 #2 [변경된 기능 2 - v-model] Vue3 #3 [변경된 기능 3 - v-for와 v-if] Vue3 #4 [새로운 기능 1 - Composition API] Vue3 #5 [새로운 기능 2 - Teleport와 Fragments] Vue3 #6 [제거된 기능들] - (현재 글) 들어가며 안녕하세요. 이번에는 2.x 버전과 비교하여 제거된 기능은 무엇이 있는지 알아보려고 합니다. 기억해두어야 할 것 같다고 생각되는 3가지 내용을 추려왔습니다. 키보드 이벤트를 위한 키코드 키 입력 수식어에 키코드 사용이 불가능해졌습니다. 3 버전부터는 별칭만 사용할..

들어가며 지난 4월 25일, 인지과학자이자 경희대 경영대학원 교수이신 김상균 연사님을 모시고 메타버스에 관해 이야기를 나눴습니다. 강연을 진행해주신 김상균 연사님은 누적 독자 100만 명의 인기도서 '메타버스'의 저자이시기도 한데요. 연사님은 최근 집필하신 '메타버스 II, 10년 후 미래를 먼저보다'를 소개하며 앞으로 10년 이내에 우리를 둘러싼 공간, 조직, 인간관계를 비롯하여 유통, 방송, 게임, 금융, 의료 등 각 산업 분야가 큰 변화를 맞이하게 될 것이라고 합니다. 그렇다면 메타버스는 우리 삶을 어떻게 변화시킬까요? 또 당장 무엇을 준비해야 할까요? 변화에는 기대와 두려움이 공존합니다. 이 글에서는 메타버스가 우리의 삶을 어떻게 변화시킬지, 무엇을 경계해야 할지 그리고 나아가 메타버스 플랫폼과 ..

들어가며 지난번 기본적인 컴포넌트 생성에 대해 알려드렸는데요. 이번 글에서는 스토리북에서 생성한 컴포넌트를 조금 더 효율적으로 활용할 수 있도록 도와주는 addons(애드온)에 대해 알아보고자 합니다. Addons addon에 대해 알아볼까요? 스토리북을 설치하면 package.json 파일에 기본적으로 @storybook/addon-actions와 @storybook/addon-essentials 가 설치되어있는 것을 보실 수 있는데요. @storybook/addon-actions를 먼저 설명드리겠습니다. action을 통해 이벤트 핸들러가 수신한 데이터를 확인할 수 있습니다. import React from 'react'; import { Button } from './Button'; export d..