ITAM Engineering

ITAM Games 오픈소스 프로젝트 ethereum-antenna 소개 - (1)

DubbingLee — Thu, 31 Mar 2022 16:30:46 +0900

소개

안녕하세요, ITAM games 백엔드팀에서 열심히 로켓을 개발 중인

이성우 입니다 :)

회사에서 프로젝트를 개발을 하며 겪었던 문제점이나 고민들을 회사 기술블로그를 통해

공유하려 합니다.

많은 관심 부탁드립니다.

서론

오늘은 ITAM Games 오픈소스 프로젝트 중 하나인

ethereum-antenna 에 대해 소개해 드리려 합니다.

본론

들어가기에 앞서, 블록체인에 대해 잘 모르고 계신 분이라면

블록체인은 누구든지 접근할 수 있는 공개된 데이터베이스(DB) 라고

생각하셔도 됩니다.

블록체인 네트워크에 데이터를 입력하고 수정하고 삭제하는 행위들은

계약(Contract)을 통해 진행되며 이러한 거래내역(Transaction)은

블록체인 블록에 기록되고 있다고 보시면 됩니다.

저희 ITAM Games 의 비즈니스는 블록체인 네트워크 기반이 아닌 서비스에

블록체인 SDK 나 API 등을 제공하여 블록체인 서비스를 제공하는 미들웨어 플랫폼을

개발하고 있습니다.

그 중에는 블록체인에 기록된 정보를 읽어와 가공하여 저희 플랫폼을 사용하는

서비스에 제공해주는 기능이 필요했습니다.

ethereum-antenna 는 이러한 계약 내역들을 읽어와 백엔드 서버에 제공해주는

중요한 역할을 담당하고 있습니다.

ethereum-antenna 가 개발되기 이전에는 프로젝트마다

블록체인 계약 거래내역을 특정 간격으로 수집해오는 로직들이

들어가 있었습니다.

하지만, 블록체인 네트워크 상에 장애가 발생하면 저희는

모든 프로젝트를 열어 장애를 대응하기에 바빴습니다.

좀 더 생산적으로 개발을 하고자 했던 저희 팀원들은 블록체인 서비스를

트래킹 해주는 오픈소스를 찾기 시작했습니다.

그러나, 저희 입맛에 맞는 블록체인 트래킹 모듈을 찾기란 쉽지 않았습니다.

결국 시간을 쪼개어 프로젝트 마다 녹아있던 블록체인 트래킹 로직에서

비즈니스 로직을 걷어내고 모듈화하기 시작했습니다.

약 2주일이란 시간을 들여 ethereum-antenna 를 모듈화하는데 성공했습니다.

그리고 저희와 같은 고민을 하는 개발자가 있을거라는 생각에

ethereum-antenna 를 오픈소스화 하기로 결정했습니다.

[Github] ethereum-antenna

결론

다음 예정 포스팅은 간단한 예제를 통해 ethereum-antenna 사용법에

대해 글을 올릴 예정입니다.

아직 많이 작고 부족한게 많은 모듈입니다.

하지만, 필요한 기능이나 개선점을 찾아 기여해주실 분들을

찾고 있으니 많은 관심 부탁드립니다.

또, ITAM Games 에서는 저희와 함께 좋은 프로덕트를 만들어 나가기 위해

함께 고민하고 함께 성장해 나가실 개발자분들을 모시고 있습니다.

ITAM Games 채용공고

많이 부족한 글임에도 시간내어 읽어주셔서 정말 감사합니다 :)

다른 의견이 있으시다면 댓글로 달아주시면 확인하도록 하겠습니다.

React 로 진행한 프로젝트에서 Atomic Design 패턴을 걷어낸 이유

DubbingLee — Thu, 24 Mar 2022 20:34:00 +0900

안녕하세요.

ITAM Game 프론트엔드 개발자로 입사해, 현재는 백엔드 개발팀에서 근무 중인

이성우 입니다 :)

프론트엔드 개발팀에 근무하며 있었던 일을 블로그를 통해 공유하고자 합니다.

오늘 공유드릴 부분은 React 로 진행 중인 프로젝트에서 사용되던 Atomic Design 패턴을 걷어낸 이유 입니다.

시작하기에 앞서, React 공식 블로그에서 찾아볼 수 있듯이 파일구조에 대해 너무 많은시간을 투자하지 말라고 권유하고 있습니다.

React 공식사이트 - 파일 구조

그러므로 해당 글은 어디까지나 주관이 많이 녹아있을 수 있는 부분 참고 부탁드립니다.

서론

Atomic Design 패턴은 웹 디자이너인 Brad Frost 의 Atomic Design 이론에 기반하여 나온 패턴 입니다.

화학에서 여러개의 원자(atom) 들이 뭉쳐져 분자(molecules) 가 되듯이,

아주 작은 단위로 작성된 React Component 들을 조합하고,

그것들을 다시 여러개로 조합하여 웹 페이지를

구성해 나가는 것을 말합니다.

Atomic Design 구성요소

이러한 Atomic Design 패턴은 파일 구조가 명확하지 않은 React 프로젝트에서

디렉토리 구조를 구분시켜주고 Component 재사용성을 높여주는 역할을 했습니다.

하지만, 너무 많은 props drilling 으로 인해 고민을 하게 되었습니다.

본론

아래 첨부한 예시 코드를 봐주세요.

코드 내용을 간략하게 설명하자면,

atom 으로는 Button | Input | TextLabel 3가지의 컴포넌트가 존재합니다.

위 3가지 컴포넌트를 묶어서 FormField 컴포넌트를 구성했습니다.

마지막으로 FormField 컴포넌트 3개로 구성 된 Form 컴포넌트를 생성했습니다.

Form 컴포넌트를 보시면 폼 구성에 필요한 모든 상태 값들을 관리하고 있습니다.

이를 FormField 컴포넌트로 전달합니다.

FormField 컴포넌트는 Form 컴포넌트로 부터 받은 props 를 다시

atom 컴포넌트들에게 전달해 줍니다.

한개의 페이지에서 전달하는 컨텐츠가 많을수록 컴포넌트와 props 는 복잡해지는

이슈가 있었습니다.

결론

저희 팀은 props drilling 을 해결하고자 여러 고민을 했고, 다음과 같은 합의를 했습니다.

`우리는 사용자에게 비즈니스를 제공하는게 우선이다.

Atomic Design 패턴으로 컴포넌트 재사용은 높아졌으나,

너무나도 많은 props drilling 과 복잡한 상태관리로 인해 개발 시 피로도가 증가하게 되었다.

그러므로 atom 컴포넌트를 제외하고는

페이지 내부에서 사용되는 컴포넌트들은 재사용을 고려하지 말고 개발하자!`

현재 저희 React 프로젝트 구조는 다음과 같이 리팩토링 되었습니다.

프로젝트 구조 - 1

next.js 와 같이 pages 를 구성한 뒤, feature 디렉토리에 페이지 별로

디렉토리를 구성했습니다.

feature 하위 디렉토리 구성은 components, containers, contexts, hooks 로 구성했으며

ContextAPI 를 사용하여 자유롭게 상태를 공유하도록 했습니다.

프로젝트 구조 - 2

atom 컴포넌트 및 전역에서 공통으로 사용되는 모듈들은

@shared 디렉토리에 위치시켰습니다.

리팩토링을 진행하고 저희 프론트엔드팀은 잦은 요구사항 변경에도

유연하게 대처하고 프로덕트를 개발할 수 있었습니다.

많이 부족한 글이지만 시간내어 읽어주셔서 감사합니다.

좋은 의견이 있으면 댓글로 남겨주시면 감사하겠습니다.

추가로 저희 ITAM games 와 함께 성장해 나가실 개발자 분을 채용 중에 있으니

많은 관심 부탁드립니다 :)

아이텀게임즈 - 채용공고

블록체인 개발자 커뮤니티 오픈카톡 입장하기

참고

https://bradfrost.com/blog/post/atomic-web-design/