텔레그램 봇 만들기 오늘은 가상화폐 시세를 알려주는 텔레그램 봇을 만들어보려고 합니다. 가상화폐를 보유하고 있으면 스마트폰으로 하루에도 수십 번 시세를 확인할 텐데요. 본격적으로 코인판에 불장이 왔을 때는 정말 5분마다 시세를 확인하고 밤을 지새우며 시세를 봤던 때가 생각나네요. 지금은 그 정도는 아니지만 하루에 여러 번 시세를 확인하곤 합니다. 하지만 이렇게 시세를 보고 있으면 다른 급등 코인들에 쓸데없이 시간을 뺏기기도 하고 잘못 된 판단을 할 수 있게하는 불필요한 정보를 피하기 위해 텔레그램 봇으로 필요한 시세만 조회할 수 있도록 만들어보겠습니다. 우선 간단하게 제가 필요로 하는 요구사항을 나열해보겠습니다. 요구사항 1. 2시간 단위로 텔레그램을 통해 가상화폐 시세를 전달받는다. (12시 -> 2시..
2021.08.20
나는 유튜브나 인프런 등 온라인으로 강의를 자주 들으면서 컨벤션이라는 단어를 자주 접하게 되었다. 컨벤션.. 매우 생소한 단어라 알아보았다. 사전적 의미는 관습이나 관례인데, 보통 코딩을 하다가 "이렇게 하는 것이 개발 컨벤션입니다."라고 자주 들었다. 코딩하는 관습이나 스타일이라고 해석할 수 있겠지만 코딩보다는 뭐랄까.. 프로젝트의 구조를 구성할 때 많이 들었던 거 같았다. [그들이 쓰는 언어] 12. Convention? Convention인가요? Convention 입니다. 컨벤션? 사전에 찾아보니 관습, 관례라고만 나온다. Convention 이란 무엇인가? 개발자들이 자주 사용하는 컨벤션은 정확히 말하자면, Convention over Configuration (CoC.. asfirstalway..
2021.08.15
개발 방법론 - 스프린트, 스크럼, 애자일 나는 가끔 떠오르는 아이디어로 코딩을 하는 경우가 있는데, 작업을 하다 보면 초반에는 어느 정도 그림이 나오면서 작업이 순조롭게 진행되다가 마무리 단계에서는 예상하지 못한 사소한 변경사항과 작업했던 내용을 전반적으로 수정해야 하는 상황이 발생해 소요시간이 대폭 증가한다. 참 아이러니하게 효율적이지 못한 방법으로 여태 코딩을 하지 않았나 싶다. 위 사진에 첫 번째 처럼 나는 코딩을 해왔고 그림이 어느 정도 모양이 나왔을 때, 사소한 수정사항과 변경사항이 눈에 띄기 시작한다. 마지막 결과가 나왔을 때는 정확한 수정사항이 도출되며, 고쳐야 하는 부분이 커져 작업시간은 급격하게 증가한다. 여태 내가 해왔던 스타일이다.. ㅠ 두 번째는 첫 번째와는 시작부터 다르다. 어느..
2021.08.13
CSS 텍스트 뒷 배경 비치게 만들기 See the Pen by junheeleeme (@junheeleeme) on CodePen. .bg{ ... background-clip: text; -webkit-background-clip: text; ... } 중요하게 봐야할 속성은 위 두개입니다. background-clip: text만 주면 효과가 적용되지 않습니다. 아래 -webki-background-clip도 적용시켜주어야 합니다. -webki-background-clip만 적용시킨 효과는 적용되나 아래 CSS에서 경고 메세지가 뜹니다. background-image를 이용해서 gif 사진을 적절히 사용한다면 인터렉티브한 텍스트를 만들 수 있습니다.
2021.08.04
리액트 라우트에서 사용할 수 있는 useLocation과 queryString 라이브러리를 사용하여 쉽게 구할 수 있다. > npm i query-string import { useLocation } from 'react-router-dom'; import queryString from 'query-string'; const post = () => { ... const { search } = useLocation(); const { no } = queryString.parse(search); console.log("search : " + search); console.log("no : " + no); return ( ... ) }
2021.08.01
리액트 컴포넌트 마운트 효과 리액트는 다른 페이지의 이동 없이 처음 접속한 페이지에서 새로운 컴포넌트가 계속 바뀌며 한 페이지에 머무르게 됩니다. 또한 사용자가 요청한 페이지는 로딩 없이 그 자리에서 화면이 바뀌기 때문에 정말 시원한 느낌의 사용자 경험을 제공하기도 합니다. 리액트로 개발된 쇼핑몰의 경우 제품 판매가 더욱 증가했다는 이야기도 들려옵니다. 본론으로 리액트는 컴포넌트가 마운트되어 새롭게 렌더링 될 때 다음 화면이 화면에 순식간에 나타납니다. 저는 갑자기 바뀌는 화면이 심심하게 느껴져 렌더링 될 때 애니메이션 효과를 주고 싶어 방법을 모색해봤습니다. 개인적으로 좋아하는 3가지 효과를 만들어 봤고 움짤이랑 코드도 첨부해 놨습니다. CSS Animation - @keyframe 사용하기 1. 페이..
2021.07.31 2
객체 배열 인덱스 구하는 법 findIndex() 함수 자바스크립트 객체 배열에서 원하는 객체의 인덱스 값을 구하는 방법이다. 기본적으로 지원하는 findIndex() 함수를 이용하면 쉽게 값을 구할 수 있다. const post = [ { no : 0, title : '첫 번째', body : '1' }, { no : 1, title : '두 번째', body : '2' }, { no : 2, title : '세 번째', body : '3' }, { no : 3, title : '네 번째', body : '4' } ]; const idx = post.findIndex(obj => obj.title === '세 번째'); console.log(idx); console.log(post[idx]); // 출..
2021.07.30
객체 배열 정렬 이전 자바스크립트로 만든 테트리스 게임에서 랭킹 순위 보여주는 기능을 구현하는 도중 객체 배열을 정렬해야하는 기능이 필요해 공부해보았습니다. 정렬 기능은 기존 자바스크립트에 sort() 함수를 이용했고, 사용법은 정말 간단합니다. 우선 아래와 같은 객체 배열을 선언하겠습니다. const rank = [ { "name" : "홍길동", "score" : 100 }, { "name" : "신사임당", "score" : 650 }, { "name" : "이순신", "score" : 300 } ]; 객체 배열 안에는 이름과 점수만 들어있습니다. 여기서 정렬하기 위해서 score를 사용합니다. 객체 배열 오름차순 const rank = [ { "name" : "홍길동", "score" : 10..
2021.07.21
새로운 블로그로 이사했습니다. 😆
Home | 꾸생 블로그
프론트엔드 개발 블로그입니다. 사소한 것도 기록합니다 :)
kku.dev