Study
-
ESLint를 자동화해보자 (feat. husky & lint-staged)Study/Frontend 2022. 4. 14. 13:23
Lint 코드의 오류나 버그, 스타일 등을 점검하는 것을 lint라고 부른다. 린트는 코드의 가독성을 높이는 것뿐만 아니라 자바스크립트와 같은 동적 언어의 특성인 런타임 버그를 예방하는 역할도 한다. ESLint는 ECMAScript 코드에서 문제점을 검사하고 더 나은 코드로 고쳐주는 lint tool이다. ESLint를 사용해서 개발을 하면 잠재적인 오류와 버그를 제거할 수 있다. 협업을 하는 프로젝트에서 lint를 적용하는 것은 필수라고 할 수 있다. 왜냐하면 모든 개발자들이 같은 규칙 내에서 개발해야 잠재적인 오류를 방지할 수 있기 때문이다. 하지만, 아무리 ESLint를 모든 개발자들이 사용한다고 해도 warning, error 등 lint 결과를 무시하고 바로 commit 하고 push 해버릴 ..
-
웹팩 성능 최적화를 통해 개발 효율성을 극대화 해보자 ✨Study/Frontend 2022. 4. 8. 16:25
🚧 이 글은 윈도우로 개발하는 동료로부터 시작되었습니다..! 사실 m1 맥북 13 프로를 쓰는 나로서는 개발하는데 성능의 문제성을 크게 느끼지 못했다. 서버 사양도 나쁘지 않아서 배포하는데도 크게 느리다는 생각을 못했다. 하지만 윈도우 환경에서 개발하는 동료의 빌드 속도를 보고 경악을 금치 못했다... 첫 순수 빌드 시간이 거의 30초에 가까웠으며, webpack dev server를 첫 구동하는 시간이 무려 90초나 걸리는 것이었다.. 내 개발환경의 성능과 비교해보자면 첫 빌드는 약 3배, dev server 구동은 약 13배 차이가 났다. 그래서 동료 개발자의 웹팩 개선 시도를 기점으로, 정확하게 개발 환경의 문제점을 파악하고 고치기 위해 Webpack 공식 문서를 정독하면서 성능을 최적화해보기로 했..
-
NFT 블록체인 마켓 앱 만들기 🔥 기능 구현Study/Blockchain 2022. 3. 23. 19:36
NFT 블록체인 마켓 앱 데모 영상 NFT 마켓 앱을 구현하기 위한 핵심 기능은 아래와 같다. Klip 지갑 연동 Klip 지갑 주소 조회 KLAY 잔고 조회 NFT 조회 NFT 발행 NFT 판매 NFT 구매 1. Klip 지갑 연동 Klip 지갑을 연동하고 나면 BApp과 상호작용을 할 수 있다. 연동을 위해서 Klip App2App API를 사용할 것이다. Prepare 스텝에서 App2App API 요청을 위한 Request key를 발급받고, Request 스텝에서 Klip을 실행하고, 마지막 Result 스텝에서 요청에 대한 결과를 확인할 수 있다. [Step 1] Prepare 가장 먼저 해야 하는 것은 Prepare API를 호출해서 request key를 발급받는 일이다. body에는 필요..
-
NFT 블록체인 마켓 앱 만들기 🔥 BApp 설계Study/Blockchain 2022. 3. 16. 16:00
BApp 설계 BApp을 설계할 때 고려해야 할 것은 다음과 같다. 서비스 설계 : 스마트컨트랙트, 프론트엔드, 서버 노드 운영유무 수수료 유저 상호작용 : 유저의 지갑(개인키) 사용 방식, 트랜잭션 생성 후 결과 확인 일반 앱은 서버와 소통을 하는데 비앱은 블록체인 노드들과 소통하게 된다. 그렇다면 그 노드는 누가 설치해서 가지고 있는가? 직접 노드를 설치하고 운영하는 것이 쉽지 않으므로, 클레이튼에서 제공하는 노드(KAS)를 사용하면 편리해진다. 스마트 컨트랙트에 모든 데이터를 기록하고 읽어오는 것은 무리가 있다. 유저 입장에서 수수료가 엄청나게 들 것이다. 따라서 다른 자체 서버를 추가로 운영해서 유저 대신 수수료 대납을 해주거나 데이터 캐싱을 해서 더 빠른 처리를 할 수도 있다. - 스마트컨트랙트..
-
NFT 블록체인 마켓 앱 만들기 🔥 Klaytn 개발환경 세팅Study/Blockchain 2022. 3. 16. 12:30
이번 프로젝트 BApp 개발을 위한 클레이튼 네트워크 개발환경은 아래와 같다. Klaytn 네트워크 - Baobab 테스트넷 - Cypress 메인넷 스마트 컨트랙트 개발 - Klaytn IDE - Klaytn 스마트 컨트랙트를 위한 브라우저 기반 컴파일러 및 IDE Klaytn SDK - caver-js : A JavaScript library that implements the Klaytn JSON-RPC APIs. Klaytn 툴킷 - Klaytnscope - 블록 및 트랜잭션 탐색기 - Klaytn Wallet - 브라우저 기반 계정 관리 도구 API - KAS API : Klaytn을 API로 사용할 수 있는 서비스 - Klip API : 개인 디지털 지갑 서비스 API Klaytn Wallet..