WEBn
-
[React] web3-react로 MetaMask 지갑을 연결해보자WEBn/React 2022. 1. 19. 17:40
안녕하세요 오늘은 개발 내용을 올려보려 합니다. 취업하고 나서 바쁜 일정을 보내느라(..핑계) 포스팅을 못했는데 오늘은 꽤 유용할 내용을 포스팅하겠습니다. Vue.js에서는 MetaMask 연결을 손쉽게 했었는데 React.js는 좀처럼 잘되지 않았습니다ㅠ 고생하지 않도록 React에서 MetaMask 연결 시작하겠습니다 ! 오늘의 목표 web3-react를 이용해서 frontend에서 metamask를 연결 ✅git 주소 : https://github.com/HongDaeEui/web3-react-connect-MetaMask/blob/main/README.md 🔰시연 영상 web3-react란? React를 사용하여 Etherum dAPP을 구축하기 위한 프레임워크 MetaMask/Trust/Toke..
-
[JavaScript] Algorithms and Data Structures 학습(1)WEBn/JavaScript 2021. 9. 1. 21:16
FreeCodeCamp에서 제공하는 JavaScript Algorithms and Data Structures 코스는 자바스크립트의 전반적인 개념을 110개의 단계별 해결과제를 수행하여 익힐 수 있습니다. 본문에서는 단계풀이 중 몇 가지 골라서 작성했습니다. 1. Create Decimal Numbers with JavaScript 자바스크립트에서는 변수에 십진수를 저장할 수 있습니다. 10진수는 때때로 부동 소수점 숫자 또는 부동 소수점이라 합니다. 부동 소수점(floating point) 방식 부동 소수점 방식은 하나의 실수를 가수부와 지수부로 나누어 표현합니다. ±(1.가수부)×2 지수부-127 2진수 꼴로 변환하는데, 정수부는 1만 남을 때까지 소수점을 왼쪽으로 이동시키고 이동한 칸 수를 지수부로..
-
[JavaScript] 이벤트(Event)와 이벤트리스너(Event Listener)WEBn/JavaScript 2021. 8. 8. 21:11
이번 시간의 주제는 Event 자바스크립트에서 아주 중요한 부분이다. 그만큼 많이 자주 쓰이기 때문이다. 1. 이벤트(Event) 자바스크립트와 HTML은 이벤트 핸들에 의해서 서로 상호작용한다. 브라우저에 어떤 부분을 클릭하거나 마우스를 올려놓거나 키를 입력하거나 화면이 줄거나 늘 때 등등 모든 동작에 이벤트가 발생한다. 사용자가 일으키는 다양한 이벤트들을 캐치해서 자바스크립트에서 원하는 행위를 구현할 수 있다. 자주 쓰이는 간단한 예시를 살펴보자. 1 2 3 4 5 6 Click this document to activate the handler. window.addEventListener("click", () => { console.log("You knocked?"); }); Colored by C..
-
[JavaScript] setTimeoutWEBn/JavaScript 2021. 8. 7. 21:46
끝이 보이지 않는 자바스크립트 하나씩 배우다 보면 기본기가 탄탄해질까 한다. 오늘의 주제는 setTimeout setTimeout은 일정 시간이 지난 후에 원하는 함수를 예약 실행(호출)할 수 있게 한다. 실시간 날씨 정보를 업데이트 해줘야 하는 문제가 생겨서 주기적으로 갱신할 수 있는 방법을 찾다가 알게 되었다. 문법은 이렇다. let timerId = setTimeout(function, [delay], [arg1], [arg2], ...) function 실행하고자 하는 함수 delay 실행하기 전 대기 시간이며 기본값은 0이다, 단위는 밀리초(millisecond) arg1, arg2 함수에 전달할 인수들 예시가 있어야 이해가 잘가므로 바로 예시를 보자. 기본 형태 function hello() ..
-
[CSS] Game으로 Grid를 배우자WEBn/CSS 2021. 8. 6. 00:04
웹개발을 하다보면 항상 늘 언제나 헷갈리는 것이 CSS이다. 특히 내가 원하는 곳에 버튼과 폼과 기타 요소들을 배치하고 싶은데 내 맘대로 절대 안움직인다. 웹 페이지의 레이아웃 개념이 부족하기 때문이다. 그래서 그 개념을 한번 잡고가기 위해 검색하던 중 Game으로 배우는 사이트를 발견하였다.이름하여... Grid Garden https://cssgridgarden.com/#ko Grid Garden A game for learning CSS grid layout cssgridgarden.com 사이트를 접속하면 이렇게 바로 1단계 게임이 시작된다. 그리드로 나누어진 땅에 CSS 코드를 입력해서 물을 준다. 1단계는 매우 쉬웠다. grid-column-start: 3;을 입력하면 3번째 칸에 물주기 성공..
-
[C] 숫자 오름차순 만들기WEBn/Algorithm Study 2021. 8. 4. 00:32
#include int main() { int a[] = {95, 75, 85, 100, 50}; int i, j, temp; int n = sizeof(a)/sizeof(int); for(i= 0; i a[1] // 95 > 75 = true temp = 95 a[0] = a[1] = 75 a[1] = temp = 95 ∴ a[0] = 75, a[1] = 95 a[0]와 a[1]의 위치가 바뀌었다. 즉. a의 연달아 있는 두 요소를 비교했을 때 앞에 요소가 더 크다면, 순서를 바꿔준다. 그래서 i=0의 for문을 돌리면 a=[ 75 85 95 50 100 ]가 된다. i = 1 일 때 a = [ 75 85 50 95 100 ] i = 2 일 때 a = [ 75 50 85 95 100 ] i = 3 일 ..
-
JavaScript - 아직도 function 쓰니? (feat. Arrow function)WEBn/JavaScript 2021. 6. 30. 00:00
이번 주제는 Arrow function 입니다. 화살표 함수는 ES6 문법으로 자바스크립트에서 간단하게 함수를 표현할 수 있어요. // generic function var apple = function () { console.log("apple") }; // apple // Arrow function var apple = () => console.log("apple"); // apple 언뜻보면 function하나 없어진 거 아닌가? 싶지만 한번 Arrow 함수를 쓴 사람은 다시 function을 쓰는 때로 돌아가기 어려울 정도로 편리하고 좋습니다 사용시에 몇가지 규칙이 있습니다. 자세히 알아봅시다. 1. 기본형 함수 표현식으로 사용 가능하다. → var 함수명 = function() { } 형태의 함..
-
WEB1 - HTML & Internet | HTML 시작WEBn 2021. 6. 1. 21:29
공부할 목록이다. 1) HTML 2) CSS 3) JavaScript HTML이란? HTML(Hyper Markup Language)는 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어입니다. HTML은 elements로 구성되어 있으며, 각 컨텐츠의 여러 부분들을 감싸고 마크업 합니다. tags는 웹상의 다른 페이지로 이동하게 하는 하이퍼링크 내용들을 생성하거나, 단어를 강조하는 등의 역할을 합니다. 세팅하기 -ATOM- 공부를 위해 ATOM 에디터를 사용합니다. ATOM을 다운 받고 web폴더에 프로젝트를 시작 !