⬆️ 상반기 회고

💻 Frontend Developer

주니어 프론트엔드 개발자로서, React와 같이 사용하는 새로운 기술 스택들을 많이 접하고 쌓아나가고 있습니다. 이를 나열하면 다음과 같습니다.

• Framework: Electron, Next.js (13)
• CSS: Emotion, TailwindCSS
• State management: Jotai, Zustand
• Data fetching: SWR
• Testing: jest, Storybook(UI)
• 기타: ethers.js, Lottie, i18n 등등

위 스택들 모두 공식 문서가 잘 되어 있는 편이라서, 공식 문서 위주로 업무 시간 안팎으로 공부를 했습니다. React는 기존 베타로 서비스되던 사이트를 3월 중순에 공식으로 전환했는데, 마침 React를 다시 공부하던 시기와 겹치게 되어 구버전과 신버전 모두를 읽어봤습니다. Learn React는 개인적으로 다른 분들께 매우 추천하고 있습니다.. 일단 모든 예시가 함수형 컴포넌트로 제공되고(!), 기본 Hook들에 대해서 왜 도입이 되었고 되어야 했는지 빌드업이 기가 막힙니다. 특히 마지막 파트인 Escape Hatches는 React를 사용하며 아리송했던 개념인 Effect, Ref를 자세히 다루고 있어, 조만간 한 번 다시 읽어볼 계획입니다.

⚛️ Electron

Electron은 JavaScript를 이용해서 크로스 플랫폼(윈도우, 맥, 리눅스)를 위한 앱을 개발할 수 있는 프레임워크입니다. 제가 반년 동안 가장 많이 본 스택이기도 합니다. 3월 말부터 후술할 P-over 프로젝트에 들어가게 되면서, 개인 디바이스에서 블록체인 노드를 심리스하게 돌릴 수 있는 데스크탑 앱을 만들고 있습니다.

기존 웹 앱을 만들 때와 다르게, 프로세스 여러 개를 같이 관리해야 되는 입장이 되어서, 생각해볼 부분들이 많았습니다. Visual Studio Code가 Electron으로 만든 대표적인 앱이어서, 해당 소스코드를 많이 참고하고 있습니다. 개인적으로 vscode-analysis라는 레포지토리를 만들어서, 소스코드에 주석을 달아가면서 분석을 하고 있었습니다. 아직은 앱의 엔트리 포인트인 app.ts, main.ts 등만 작업을 해둔 상태입니다.

기획에 맞추고자, 몇 가지 사항들을 개인적으로 테스트해보기도 했습니다. Github Releases를 이용해 Auto Update을 테스트해봤는데(Github Link), Auto Update의 과정인 코드 서명이 상당히 까다로웠습니다. 윈도우 같은 경우는 마이크로소프트로부터 인증을 받은 Certificate Vendor로부터 인증서를 따로 구입을 해야 돼서 테스트를 해보진 못했고, 맥은 이미 회사에서 애플 개발자 프로그램에 등록을 해 둔 상황이라 인증서를 받아와 서명을 할 수 있었습니다.

데스크탑 앱다운 몇 가지 기능들도 테스트해봤습니다. (Github Link) 공식 문서에서 언급된 알림, 절전 모드 방지, Touch ID 기능 등을 테스트해보면서, 앱 기획의 상한선을 같이 정해나갔습니디.

🖤 Next.js

React 프로젝트를 Next.js로 마이그레이션한 후기

좋은 기회로 오버 네트워크의 랜딩 페이지 제작을 이어 맡게 되었습니다. 마침 개인적으로 Next.js의 필요성을 느끼고 있는 시점이고, 기존 랜딩 페이지가 React로 제작되어 있어, 이를 Next.js를 사용해서 마이그레이션했습니다. 타이밍이 알맞게 13 버전이 stable해져서, 어느 정도 준비(공식 문서 읽기 & 사이드 프로젝트)를 마친 뒤 App Router를 사용해 프로젝트 구조를 바꿨습니다.

기존 레거시인 Page Router와 App Router 둘 중 어느 것이 더 좋은 구조인지는 아직 논쟁 중인 것으로 보입니다. 다만 App Router가 React의 서버 컴포넌트를 사용하기에 더 알맞고 간편한 것 같습니다. React 팀과 Next.js 팀은 이러한 서버 사이드 렌더링의 방향성에 공감을 하며 아주 긴밀하게 협업하고 있기 때문에, 새로운 stable 버전을 안 쓸 이유는 없는 것 같습니다.

Next.js가 너무나도 좋은 개발자 경험을 제공하기 때문에, 앞으로도 적극적으로 활용해볼 생각입니다. 대표적으로 next/font가 있는데, 프론트엔드를 하며 자주 접하는 폰트를 직접 파일을 내려받을 필요 없이 프레임워크 레벨에서 해결할 수 있습니다. Image 컴포넌트를 이용해 이미지 최적화도 자동으로 진행해줍니다. 코드를 짤 때뿐만 아니라 Vercel, Netlify, AWS Amplify 등 배포를 위한 서비스도 잘 나와있어 쾌적합니다. 저는 Amplify를 이용해서 배포를 진행했습니다.

💼 Superblock

x.com

X (formerly Twitter)

오버 프로토콜이라는 블록체인 메인넷을 만드는 스타트업 슈퍼블록에서 지난 1월부터 개발자 커리어를 시작했습니다. 작년부터 블록체인 씬에 직접 들어와 빌딩하고 싶다는 소망이 있었는데, 감사하게도 슈퍼블록과 함께하게 되었습니다.

🔎 OverScan

• 온보딩 차원에서 체인의 상태(가스 가격, 총 트랜잭션 수, 혼잡도 등)을 보여주는 카드와, 이 카드들이 모여 있는 메인 페이지를 작업했습니다.
• 데이터를 가져오는 동안 유저에게 보여줄 스켈레톤을 위해서, CSS 애니메이션을 이용해 로딩 바와 같은 형태를 구현했습니다.
• 이더리움의 Event log에 대해서 공부하고, 다양한 솔리디티 데이터 타입을 오버스캔에서 어떻게 보여줄지에 대해 고민했습니다.

✏️ Event log의 인코딩 및 디코딩을 공부한 흔적

위 사진과 같은 함수가 있고, 표와 같이 arguments를 받았다고 합시다. 인코딩된 후, 이를 다시 나이브하게 디코딩하면 다음과 같아집니다.

Data 테이블에는, (address,uint256[],bool)[]에 해당하는 값이 들어오게 됩니다. 먼저, tuple, array 등의 composite type에는 해당 데이터가 얼마나 뒤에 저장되어 있는지가 들어옵니다.

• 맨 위의 Hex 값을 보면, 32라는 숫자를 나타내는데, 이는 한 칸 뒤에 array의 값이 들어 있다는 의미 입니다.
• 두번째 칸의 1 은 array의 길이를 뜻합니다.
• 다시 Hex 값이 등장합니다. 이 역시 한 칸 뒤에 tuple의 값이 들어 있다는 의미입니다.
• 해당 tuple을 해체하면 다음과 같습니다. address, uint256[], bool 이때, address, bool은 elementary type이므로 바로 보여집니다. (0x9378368ba6b85c1fba5b131b530f5f5bedf21a18, 1(true))
• uint256[]의 경우는 dynamic type이므로, 역시 데이터의 위치를 나타내는 0x60 이 들어 있습니다.
• 숫자 8은 배열의 길이를, 그리고 이후 8개의 수는 실제 값들입니다.

🖥️ P-over

• Electron 프레임워크를 학습하고, 공식 문서의 일부 내용을 옮겨서 정리했습니다.
  • Electron으로 커스텀 가능한 Features
  • Security in Electron
  • Processes in Electron
• 앱 아키텍처 설계 및 구현에 참여했습니다.
• 로컬 노드를 실행하고, 외부 테스트넷에서부터 데이터 싱크를 받기까지의 프로토타입(알파 버전)을 완성했습니다.
• 블록체인 노드 클라이언트(Execution & Consensus)와 밸리데이터 클라이언트에 대한 학습을 바탕으로 9월 런칭을 목표로 구현 중에 있습니다.

📄 Over Network Landing Page

Over Protocol | Lightweight Full Node

Over is a truly decentralized layer 1 blockchain providing lightweight full nodes. Everyone will be able to run a node and become a validator on their PCs at home.

Over Protocol

• React 프로젝트를 Next.js 13으로 마이그레이션했습니다.
• 모바일 앱 및 P-over 랜딩 페이지를 작업했습니다.

🧑‍🎓 사내 스터디

디자인 패턴들

디자인 패턴은 소프트웨어 디자인 과정에서 자주 발생하는 문제들에 대한 일반적인 해결책입니다. 이는 당신의 코드에서 반복적으로 되풀이되는 디자인 문제들을 해결하기 위하여 맞춤화할 수 있는 청사진들을 미리 만들어 놓은 것과 같습니다.

매주 1회 사내 개발자분들과 함께 디자인 패턴 스터디를 진행하고 있고, 곧 마무리될 예정입니다. 프로덕트 개발에서 한발짝 떨어져서, 객체 지향 프로그래밍에서 자주 쓰는 패턴들을 눈에 익힐 수 있어서 개인적으로 굉장히 좋았습니다. 책에서 제시하는 패턴들에는 각각 장단점들이 있었는데, 장점은 대부분 객체 간의 의존성을 줄일 수 있고 구조화가 쉬워진다는 점이었고, 단점으로는 코드의 복잡도가 증가하는 등이 있었습니다.

React만 사용할 때는 패턴을 적용할만한 요소가 많이 없었습니다. (프론트엔드를 위한 패턴은 patterns.dev에 잘 나와있습니다.) 근데 스터디 도중에 P-over에 들어가게 되면서 Node.js와 친해지게 되었는데, Node.js의 주요 특징이 Event Driven인만큼 옵저버 패턴을 자주 쓰게 되었습니다.

⛓️ Blockchain

슈퍼블록 면접 당시에 블록체인을 사회 전체의 신뢰 비용을 줄일 수 있는 인프라라고 번드러지게 말했던 기억이 납니다. 지금도 해당 내러티브에는 큰 변함이 없으나, 직접 프로덕트 구현을 해보면서 그 인프라가 어떻게 굴러가는지에 대한 (기술적인) 이해도가 높아지고 있습니다. 예를 들어 “노드를 돌린다”라는 두루뭉실한 표현을 “(이더리움 기준) geth와 같은 Execution client와, prysm과 같은 Consensus client를 특정 설정을 넣어서 같이 실행한다” 식으로 해체할 수 있습니다.

운이 좋게도, 회사 내 프로토콜 개발자분들께서 노드 클라이언트를 돌릴 수 있는 환경 및 config를 잘 정리해주셔서, 직접 제 맥북에서 나만의 작은 프라이빗넷을 띄운 뒤, The Merge 이벤트를 지켜볼 수 있었습니다. 작년에도 학회 차원에서 이더리움 업그레이드와 비콘 체인에 대해서 조사했었는데(이더리움 업그레이드와 Lido Finance - 송영준 & 노현곤 ), 이번에 밸리데이터 대시보드를 구현하는 단계에서 비로소 이해를 하고 있는 것 같습니다. 기술 구현은 희미했던 개념들을 바로 잡는데에 굉장한 도움이 됩니다.

그외에도, 업무와 연결지어 블록체인 내의 다양한 분야에 대해서 공부할 수 있었습니다. OverScan에서는 블록체인의 상태를 중심으로, P-over에서는 노드 및 밸리데이터를 중심으로 공부할 수 있었습니다.

• FLP Impossibility와 합의 알고리즘
• 트랜잭션의 상태(success, failed, pending, replaced 등) @OverScan
• Event log에 대한 심층 분석 @OverScan
• Full node, Archive node, Light node, Validator node 등의 차이점 @P-over
• Geth의 Full Sync vs. Snap Sync @P-over
• 이더리움의 밸리데이터가 되기 위한 노드 구조 및 세팅 @P-over
• Geth JSON-RPC API & Beacon Node API @P-over

x.com

X (formerly Twitter)

카이스트 블록체인 학회 Orakle에서도 운영진으로 활동하며, 오는 8월에는 한 학기 동안 활동을 정리하는 최종 발표, 겨울에는 저희 학회만의 시그니처 행사를 기획 중에 있습니다. 쟁글과의 협업으로, 블록체인과 경제학을 가볍게 섞은 글 두 개를 기고했습니다.

• 소비자물가지수(CPI)가 비트코인 가격에 미치는 영향
• 중앙은행 디지털화폐(CBDC) 도입되면 바뀌는 것

⬇️ 하반기 목표/계획

📝 기록 많이 남기기

기록의 중요성은 항상 인지하고 있으나, 다른 중요한 할일들에 밀려 주기적으로 소홀해지는 것 같습니다. 트위터 블루 배지도 이제 달고 있는 만큼, 조각 기록들을 위주로 일상과 개발 현황을 남기고자 합니다.

🌀 P-over의 성공적인 런칭

오버 프로토콜의 첫번째 프로덕트인 모바일 오버앱(Over: Mobile Incentive Testnet App.)이 7월에 런칭될 예정입니다. 뒤이어 오버 프로토콜의 테스트넷과 함께, P-over가 공식적인 이름을 가지고 같이 세상에 나옵니다. 여전히 기술적으로 도전적인 부분들이 있지만, 빠르고 즐겁게 개발하고 있습니다. 모두가 집에서 블록체인 네트워크의 밸리데이터가 되는 길에, P-over가 그 중심에서 함께하면 좋겠습니다.

🖤 OverScan + Next.js & React Server Component

프론트엔드 개발은 트렌드가 반년 단위로 바뀌는 것 같아 트래킹하기가 어렵지만, 현재 씬을 선도하는 팀들이 모두 밀어주고 있는 부분은 서버 컴포넌트인 것 같습니다. Next.js 12까지 많이 사용되던 서버 사이드 렌더링은 페이지최상위에서 데이터 fetching을 한 뒤 이를 prop으로써 페이지를 구성하고 있는 컴포넌트들에게 뿌려주는 방식입니다. 서버 컴포넌트는 데이터를 페이지 단위가 아닌 컴포넌트 단위로 가져오게 됩니다. React 18에서 제공하는 기본 컴포넌트인 Suspense 등을 활용하면 스켈레톤을 컴포넌트 단위로 넣기에 매우 수월합니다.

현재 팀에서 준비하고 있는 OverScan 역시, 컴포넌트 이곳저곳에서 데이터 fetching이 필요하기 때문에 서버 컴포넌트를 사용하기에 제격이라고 생각합니다. 서버 컴포넌트에 대한 학습을 진행해 설명회를 열어 팀원들과 공유하고, OverScan의 퍼포먼스를 높이고 싶습니다.