전체 글

개발자로서 성장하기 위해 배운 지식, 트렌드와 경험을 글로 남기고 이를 공유합니다.
· Frontend
EST(eastern standard time) 기준으로, 2022년 1월 24일 오후 8시에 LOVO에서 만든 NFT 민팅을 시작한다. 이를 소개하는 랜딩페이지에서 카운트 다운을 하는 UI를 작업하면서 겪었던 시간대에 대한 이슈들을 기록으로 남긴다. 문제점 해외시간대를 고려해서 UI를 개발한 건 이번이 처음이라 낯설었고, 지역마다 다 다른 시간대를 고려해서 개발하려면 어떻게 해야할까 고민을 시작했다. 어느 특정 시간대만 고려해서 코드를 작성하면 분명 local마다 다르게 작동하는 Date API때문에 버그가 발생할 것이다. 해결 평소에 유튜브로 즐겨보던 포프님의 영상에서 여럼풋이 들었던 아래 문장이 떠올랐다. 💡 [UTC 시간을 쓰자](https://www.youtube.com/watch?v=GMQNs..
· Web3
# dApp에서 겪었던 부동소수점 문제 이번에 진행한 NFT 프로젝트에서 부동소수점으로 인해 smart contract에서 transaction을 처리하지 못했던 이슈를 겪어서 이를 회고해보려 한다. ## 문제 유저가 NFT를 민팅할때 우리쪽에서 정한 민팅 가격과 함께 metamask를 활용하여 transaction을 요청한다. dApp에서는 최대 3개까지 민팅할 수 있는 양을 정할 수 있는 기능이 있었다. 따라서 만약, 1개 민팅 가격이 0.08 ether이고 3개를 민팅한다고 하면 0.08 ether * 3 = 0.24 ether를 유저에게 청구해야 한다. 바로, 여기서 문제가 발생했다. 언어들이 가지고 있는 부동소수점 문제를 인지하지 않은 상태에서 코드를 짜니 이를 처리하지 않아서 요청을 할때 0...
· DevOps
NFT 프로젝트에 대한 랜딩페이지를 개발할 때 겪었던 AWS S3의 sub directory에 대한 pathname 이슈를 공유하고자 한다. 문제 간단한 landing page였기 때문에, vitejs로 HTML, CSS, JavaScript를 사용하기 위한 환경을 부트스트랩하였다. 총 3개의 페이지를 개발해야 했기 때문에, vitejs에서 지원해주는 multiepage 기능을 활용했다. 개발 완료 후, AWS S3와 CloudFront를 활용해 배포를 구성하고 도메인에 접속했더니 sub directory에 대한 접속이 되지않았고, index.html을 작성해야지 비로소 접속이 되었다. https://my-domain.com/subDirectory/ -> 접속 안됨 https://my-domain.com..
· 성장
배경 최근에 TTS만을 위한 웹 에디터를 개발하면서 contentEditable 속성을 가진 태그를 다루며, 많은 이슈들을 겪었다. 특히 유저의 액션에 따라 태그를 동적으로 생성하는 로직을 짜야 했다. 그 중에서 현재 위치한 커서 또는 현재 선택된 텍스트의 바로 뒤 공백에 태그를 추가하는 로직을 작성했다. 아무래도 처음부터 클리한 코드를 생각하면서 짜기에는 난이도가 제법 있는 로직이라고 생각했고 처음에는 동작하는 코드만을 위한 목적으로 코드를 써내려가기 시작했다. 기능 개발을 마친 뒤, 다른 팀원들도 이해할 수 있도록 코드를 정리하며, 리팩토링 2판 책으로 공부했던 개념들을 하나 둘씩 적용하려고 시도했다. 리팩토링 시작! 먼저 함수 추출하기부터 적용했다. 가장 만만한 리팩토링 기법이다. 나는 이 녀석이 ..
mechaniccoder
개발 지식, 트렌드, 경험 공유