들어가며 최근 블로그 작업을 진행하며 알게된 NodeJS에서 HTML을 파싱하여 웹을 스크래핑 할수있는 NodeJS 모듈을 알게되었는데요 사용법 또한 쉽고 간단한 편이라 웹스크래핑을 해야할 작업이 생긴다면 상당히 요긴하게 쓰일것 같아 오늘 해당 모듈에 대해서 소개해 보려고 합니다. 사전준비 npm install cheerio // or yarn add cheerio npm install axios// or yarn add axios 우선 npm 또는 yarn 을 이용해 cheerio와 axios(axios는 편의상 같이 사용하였고 필수는X)를 설치해 줍니다. import * as cheerio from 'cheerio'; import axios from 'axios'; 그다음 두 모듈을 사용할곳에 imp..

“OOO, 메인넷 출범!” 경제 관련 소식에서 꼭 이런 제목을 볼 수 있죠. 누군가 ‘메인넷(Mainnet)’이란 걸 세상에 내놨다는 사실은 알 수 있지만, 그게 가까운 일상부터 먼 미래까지 나의 삶에서 어떤 의미인지는 잘 와닿지 않아요. 메인넷은 대체 무엇일까요? 왜 여러 기업이 너도나도 비장하게 메인넷을 만드는 걸까요? 궁금증이 해소되지 않았던 여행자를 위해 메인넷 안내서를 준비했어요. 네트워크는 아는데, 메인넷은 모른다면 메인넷은 메인 네트워크의 준말로, 여기서의 네트워크는 ‘블록체인 네트워크’를 의미해요. P2P(Peer To Peer)를 기반으로 데이터를 분산해 저장하는 기술이라는 건 DeFi 편에서도 잠깐 설명해드렸죠. 이 네트워크에선 일정 시간 단위로 저장된 데이터가 하나의 ‘블록’을 이루고..

뉴스에서 우리는 부동산이나 은행 금리의 움직임에 관한 보도를 접합니다. 어제와 오늘의 환율이 다르고 오늘과 내일의 주가가 다른 것은 자연스러운 일이죠. 이렇듯 자산의 가치는 우리의 예상과 다르게 바뀌기도 하므로 사람들은 자산을 좀 더 안전하게 지키면서 키울 수 있는 환경을 원합니다. 자산의 가치를 지켜주는 어떤 안전장치가 있다면, 그리고 더 나아가 미래의 가치 상승까지 기대하게 만드는 무언가가 정말 있다면 어떨까요? 그런데 NILE(나일)의 NFT 세계에는 그런 무언가가 있습니다. 창조의 신 ‘네이트’가 NFT에 담아둔 약속, NEITH Covenant(네이트 커버넌트)가 바로 그것이죠. NFT의 가치를 위한 약속, NEITH Covenant NEITH Covenant는 네이트가 약속한 미래의 시점인 C..

들어가며 약관 자동화 코드 적용 부분을 보다 Resize Observer API라는 존재를 처음 알게 되었습니다. (약관 자동화 코드가 궁금하신 분은 링크 참고해 주세요). 이 API 또한 굉장히 유용할 것 같다고 생각되어 Intersection Observer API 연장선으로 WEB APIs인 Resize Observer API를 소개하려 합니다. Resize Observer API 란? Resize Observer API는 요소의 크기를 감시하는 API입니다. 예를 들면 보통 width가 100%인 div의 넓이를 화면이 리사이즈 될 때마다 알고 싶다면 어떻게 구하시나요? React 코드로 예시를 들어보면 필자는 글에서 소개하고 있는 API를 알기 전에는 아래와 같이 resize 이벤트를 통해서 구..

들어가며 React form API에서 가장 많이 사용하고 있는 React Hook Form 라이브러리에 대해서 알아보려고 합니다. 프로젝트 진행하면서 해당 라이브러리가 채택된 이유는 React Hook Form이 종속성이 없는 가벼운 라이브러리이고, 재 렌더링 횟수를 최소화하여 성능에 안정적이고 타입스크립트를 기본으로 제공해 작업 환경에 큰 어려움 없이 적용하기 좋아 선정하게 되었습니다. React-hook-form 시작하기 react-hook-form 설치는 자바스크립트 패키지 매니저인 npm을 이용하여 간편하게 설정이 가능합니다. npm install react-hook-form useForm Hook 이용하기 우리가 일반적으로 작업해야 하는 Form 요소 요건 사항은 아래와 같습니다. 입력 필수 ..

문득 이런 생각이 드는 때가 있어요. ‘이 사람 자기 일을 정말 좋아하는구나.’ 일 얘기를 하면 유난히 빛나는 눈, 평소보다 세 배는 더 빠르게 쏟아내는 말, 편히 기댄 등을 떼고 바짝 당겨 앉은 자세 같은 것을 발견할 때죠. 그런 반짝이는 순간을 또 보고 싶어서 괜히 다가가 일 얘기를 꺼내기도 하는데요. 구성 요소를 ‘녀석'이라고 부르는 개발자를 만났을 땐 [pxd people] 인터뷰를 요청할 수밖에 없었어요. “이건 손이 좀 많이 가는 녀석인데요.” “저 녀석은 빠르게 나올 수 있어요.” 업무를 가리키며 이토록 아기자기하고 정겨운 단어를 쓰는 사람에게 듣는 개발 얘기는 얼마나 재밌을까요. XE 그룹 2팀 팀장이자 프론트엔드 개발자 김태용 님과 나눈 대화를 들려드릴게요. Q. 태용 님 반갑습니다! 먼..

모든 생명은 서로 영향을 주고받으며 세계를 이룹니다. 만약 이 관계가 끊어지면 어떻게 될까요? 어느 날 한 종(species)의 생명이 사라진다면, 먹이사슬로 얽힌 다른 생명들이 서서히 멸종하다가, 끝내는 여러 종이 서식하며 관계를 맺는 생태계 전체가 무너지고 말 겁니다. 생태계가 안팎으로 균형을 이루며 예상치 못한 충격에도 단단히 버티기 위해서는, ‘다양’한 생명들이 ‘함께’ 살아가야 한다는 뜻입니다. 우리가 생태계라고 부르는 이곳, 블록체인을 기반으로 한 웹3 세상에서도 ‘같이’의 가치는 중요하죠. PoET(Proof of Ecological Transaction, 포잇)은 WEMIX(위믹스) 생태계가 이러한 가치를 지키기 위해 고안한 리워드 분배 프로그램입니다. Eco Fund(에코펀드)의 일환으로..

pxd talks는 여러 분야의 연사님을 초빙해 인사이트를 나누는 시간입니다. pxd 구성원들이 더 넓은 시야로 무언가를 새롭게 발견하거나 자신을 성장시킬 수 있는 기회를 얻을 수 있도록 말이죠. 그리고 그 경험은 [pxd talks] 아티클로 기록합니다. pxd 구성원들이 함께 보고 듣고 느끼고 배운 것들이 사라지지 않고 pxd story에 남아 더 넓은 세상으로 뻗어갈 수 있기를 바랍니다. TALK1에서는 양승화 님과 그로스 해킹, 즉 ‘데이터와 실험을 통해 성장하는 서비스를 만드는 방법’을 알아봤어요. 이대로 pxd ‘talks’를 끝내기엔 아쉬우니 동료들과 이야기를 나눠봤죠. 다양한 직군의 목소리를 모으되, 좀 더 자유롭게 터놓고 얘기할 수 있도록 익명을 보장했어요. pxd 팀원들은 그로스 해킹에..

pxd talks는 여러 분야의 연사님을 초빙해 인사이트를 나누는 시간입니다. pxd 구성원들이 더 넓은 시야로 무언가를 새롭게 발견하거나 자신을 성장시킬 수 있는 기회를 얻을 수 있도록 말이죠. 그리고 그 경험은 [pxd talks] 아티클로 기록합니다. pxd 구성원들이 함께 보고 듣고 느끼고 배운 것들이 사라지지 않고 pxd story에 남아 더 넓은 세상으로 뻗어갈 수 있기를 바랍니다. 여기 기획자, 디자이너, 리서처, 개발자 등 각 분야 전문가들이 모여 밤낮으로 고생해 만든 제품이 있어요. 그리고 마침내 제품을 세상에 내놓죠. 그럼 끝인 걸까요? 우리는 최선을 다했으니 제품의 성패는 운명에 맡기면 되는 걸까요? 그럴 리가요! 사실 제품 출시는 결과가 아닌 과정에 가까워요. 제품이 세상에 나왔다는..

들어가며 자주 사용되지만 화면에 표현되는 것에 비해 손이 많이 가는 UI를 하나만 꼽아보라고 한다면 개인적으로 테이블을 꼽을 수 있을 거 같습니다. 최근 진행했던 한 프로젝트에도 어김없이 테이블 UI가 필요했는데요, 처음 계획은 작업을 쉽게 하기 위해 무료 라이선스의 패키지를 설치하려고 했으나 기획 상 요구되는 기능에 비해서 너무 무거운 것은 아닐까 하는 생각이 들었습니다. 그래서 마치 라이브러리처럼 사용할 수 있으면서 필요한 기능만 가진 테이블 컴포넌트를 직접 만들어보기로 했습니다. 사전 준비 먼저 기능 구현을 위해서 필요한 최소한의 기능을 정리해 보았습니다. 테이블 목록과 칼럼 sorting, 페이징 처리는 API 호출하고 결과를 바인딩 할 예정이어서 UI 적으로 풀어낼 기능만 구현하면 되었으므로 상..

블록체인은 관련 주체들과 사회적이고 기술적인 환경이 상호작용하며 하나의 생태계를 이루고 있습니다. 블록체인 기술을 이용하는 우리는 모두 블록체인 생태계의 일부지만, 그 전반을 알기란 쉽지 않습니다. 그래서 [블록체인 연대기(the Blockchain Chronicle)]는 블록체인 생태계에 무슨 일이 일어나고 있는지 살펴보고 또 기록합니다. 차곡차곡 쌓아나간 블록체인 생태계의 오늘이 내일을 향한 어제의 기억이 될 수 있도록 말이죠. 누구나 한 번쯤은 블록체인과 AI(인공지능)에 대해 들어보셨을 겁니다. 블록체인과 AI는 우리가 미래를 말할 때 빠지지 않는 키워드지만, 자칫 막연하고 먼 이야기처럼 느껴질 수도 있죠. 블록체인과 AI는 우리 삶에서 어떤 도움을 주고 있을까요? 블록체인과 AI가 만난 미래는 ..

들어가며 올해 XE 그룹에서는 사내 시스템 신규 구축 및 개선 관련한 몇 가지 내부 프로젝트를 진행하고 있습니다. 그중 하나인 사내 회의실 예약 시스템인 ‘The0’ 프로젝트의 PM을 맡아 진행하며 배우고 느낀 점, 진행 과정 등을 공유하고자 합니다. The0 프로젝트 pxd 회의실 예약 시스템이 만들어지기 전까지 사내에선 구글 캘린더를 사용하여 회의실을 예약해 왔습니다. 그동안 구글 캘린더를 회의실 예약관리 툴로 활용함에 있어 여러 가지 불편함을 느끼게 되었고, 이러한 불편함을 개선해 효율적으로 회의실들을 예약관리할 수 있는 플랫폼을 만들어보자 라는 목표로 ‘The0’ 프로젝트가 시작되었습니다. 프로젝트를 시작하기에 앞서 해당 프로젝트(플랫폼) 이름을 정하는 것 또한 중요하기에 팀원들의 다양한 아이디어..