javascript

[TIL] Nest.js Decoration

[TIL] Nest.js Decoration 날짜 2022.07.04 목표 내용 Nest.js - 데코레이터 파이썬의 데코레이터나 자바의 어노테이션과 유사 클래스, 메서드, 접근자, 프로퍼티, 매개변수에 적용 가능 JS - +로 숫자형 변환 const str = '123'; console.log(typeof str); // string console.log(typeof Number(str)); // number console.log(typeof parseInt(str)); // number console.log(typeof +str); // number 결론 nest.js의 데코레이션을 보면서 자바 스프링이 생각났습니다. 이미 스프링 조금 공부해봤기에 비교적 쉽게 배울 수 있을 것 같습니다. JS에서 +..

[TIL] React/Next 로딩 화면 및 클립보드 구현

[TIL] React/Next 로딩 화면 및 클립보드 구현 날짜 2022.06.29. 목표 로딩 및 클립보드 기능 구현 내용 Next.js - 로딩 화면 구현 // _app.tsx import Router from "next/router"; import {useState, useEffect} from 'react' export default function App({ Component, pageProps }) { const [loading, setLoading] = useState(false); const start = () => { setLoading(true); }; const end = () => { setLoading(false); }; useEffect(() => { Router...

[Project] OpenSea 클론코딩

OpenSea 클론코딩 팀명 씨냅스(Seanapse) 프로젝트 목표 OpenSea의 Front-end, Back-end 아키텍처 이해 OpenSea API 동작원리 이해, API 레퍼런스 참조 OPenSea 구현에 필요 요소 이해 및 구현 프로젝트 기간 2022년 6월 13일 ~ 2022년 6월 17일 ( 5일 ) 기획 - 1일 / 개발 및 배포 - 3일 / 회고 - 1일\ 프로젝트에서의 역할 팀장 역할 수행 NFT 생성 페이지 구현 hardhat을 통한 ERC-721 컨트랙트 배포 IPFS API 사용하여 파일 업로드 프로젝트 배포 구현 기능 기본 기능 사용자는 메타마스크 지갑을 연동하여 로그인할 수 있다 token uri에 들어갈 내용을 프론트에서 입력 주요 기능 사용자는 판매되는 nft의 정보 목록..

eth-lightwallet을 사용한 니모닉 지갑 개발

니모닉 지갑 🔎 Goal eth-lightwallet 모듈에 내장되어 있는 함수를 사용하여 개발 랜덤한 니모닉 코드를 생성 니모닉을 시드로 키스토어를 생성 Postman을 사용하여 결과 확인 fs 모듈을 이용한 키스토어 로컬 저장 Advanced - 파생된 주소 생성 💻 Implementation Main Functions - express.js를 활용한 API POST - 랜덤한 니모닉 코드 생성 http://localhost:3000/wallet/newMnemonic // lightwallet 모듈을 사용한 랜덤한 니모닉 코드 생성 API router.post('/newMnemonic', async (req, res) => { // 니모닉 변수 생성 let mnemonic; try { // mnemo..

[FBI Project] 00. 프로젝트 기획

FBI Personal Project 🐝 프로젝트 주제 스팀잇스타그램(Steemit + Instagram) ⏰ 프로젝트 기간 2022년 6월 2일 ~ 2022년 6월 16일 ( 2주 ) 🔍 프로젝트 배경 및 목표 소셜부분에서 최초의 dApp인 스팀잇(SteemIt)에 관심을 갖게 되었습니다. 게시글과 댓글을 작성하고, 대표적인 인스타그램이나 트위터와 같은 Social에서 좋아요 기능과 유사한 기능을 통해 보상을 받습니다. 이러한 탈중앙 소셜을 DeSo(Decentralized Social)라고 합니다. DoSo가 어떻게 동작하는지 전체적인 구조와 원리를 학습하고 최초의 DeSo dApp인 SteemIt을 클론코딩하는 프로젝트를 기획했습니다. 그러나, 스팀잇의 UI는 개인적으로 좋지 못하다고 생각이 들었습..

[JavaScript] 고차함수(Higher-Order Function)

고차함수 목표 first-class citizen의 세 가지 특징 higher-order functiond의 이해 내장 고차함수에 대한 이해 forEach find filter map reduce sort some every 추상화(Abstraction)에 대한 이해 추상화 관점에서 고차 함수가 갖는 이점 First-class citizen JS에서는 특별한 대우를 받는 first-class citizen가 있습니다. 이 중 하나가 데이터를 다루듯이 사용할 수 있는 함수 입니다. 따라서 함수는 변수에 저장할 수 있습니다. console.log(a(2)); const a = function (num) { return num * 2; } /* * 오류가 발생 - 변수에 함수를 할당한 경우 Hoisting이 ..

[JavaScript] DOM(Document Object Model) 주요 정리

DOM(Document Object Model) DOM(Document Object Model)은 웹 페이지에 대한 인터페이스로, HTML 문서를 Object 기반으로 표현합니다. HTML Elements를 JavaScript Object처럼 Manipulation(조작)할 수 있는 모델로, HTML을 조작할 수 있습니다. 단, DOM은 JS를 이용해서 구조 접근을 하는 것이지 JS 자체는 아닙니다. HTML에 JS 적용 HTML에서 JS를 적용하기 위해서는 웹브라우저에서 작성된 HTML을 해석할 때 요소를 만나면 잠시 해석을 멈추고 요소를 먼저 실행하게 됩니다. 따라서, 요소의 추가하는 위치마다 다른 결과를 가져오기 때문에, 최하단에 위치시킵니다. 그러나 이는 js에 너무 의존적일 수 있습니다. 그래서..