전체 글 308

telegram 메세지 api이용하기.

# telegram botfather 텔레그램을 깔고 botfather을 검색한다. 그 후, /newbot 명령어를 채팅치면 봇이름과 사용자이름을 지을수 있다. 마지막으로 토큰값을 받는데, 이 토큰값이 있어야 봇에대해 코딩이 가능하다. # node환경에서 사용. 먼저 npm i node-telegram-bot-api명령으로 모듈을 깔아준다. 그다음 아래 코드를 복붙하샘. const TelegramBot = require("node-telegram-bot-api"); const token = "토큰값"; const bot = new TelegramBot(token, { polling: true }); bot.on("message", (msg) => { const chatId = msg.chat.id; co..

etc/devTools 2023.03.31

이미지를 화면에 잡힐때만 로딩하고 싶을때. (loading = 'lazy')

이미지 용량이 크다. 그렇다고 정적인 이미지를 없애기도 그렇다. 하지만 화면에 잡히지도 않는 이미지가 다운이 된다면? 그만큼 호스팅시 클라이언트에게 전송되는 이미지데이터가 든다는 것이고, 따라서 낭비다. # 예시 이 코드는 총 이미지 세개가 carousel형식으로 보여지게 되는 부트스트랩 태그다. 처음 carousel에 이미지경로1의 이미지가 보여지게 된다. 그다음 이미지2, 이미지3이 뜬다. 다음버튼은 그냥 보기 편하게 안썼지만 다음 버튼을 누르면 이 이미지들이 버튼을 누를때마다 슬라이드로 보여진다. 근데 네트워크탭을통해 확인하면 이 carousel이 화면에 보여지는 순간, 이미지1,2,3이 전부 다운받아진다. 이미지 하나의 용량이 100mb라고 할때 화면에는 이미지1만 보이는데 carousel이 켜진..

webStyling/design 2023.03.24

속도보다 꾸준함

자바스크립트 딥다이브 책을 정독하고 있다. 200페이지까지 편의점에서 다섯번은 넘게 반복해서 읽어봤다. 하지만 이번주에 포스팅을 약 50페이지밖에 못하였다. 모르는것들이 너무 많이 발견되고 이해하는데 어렵기 때문이다. 시작은 좀 안일했다. 나는 자바스크립트로 웹사이트를 하나 만들었고 배포까지 했다. nodejs와 vuejs를 사용했기에 자바스크립트를 심화해서 배우는 지금 현상황이 그리 부담되지 않을것이라고 생각했다. 하지만 단순히 시작하면서 메모리라는 컴퓨터 사이언스 부분에서부터 세세하게 살펴보고 이해하는데 이해가 쉽게되지 않더라. 모든 배움이라는 과정이 어떤가에 따라서 사람의 수준차이는 아주 크게 난다고 본다. 예를들어 나는 어떤 AOS 게임을 즐겨한다. (롤 아님) 흔히들 게임을 수백 수천판을 하지만..

personal/ponderings 2023.03.23

값(value), 리터럴(literal), 표현식(expression), 문(statement)

# 리터럴(literal) 리터럴은 사람이 알아보는 기호로 적은 표기법을 말한다. 이전 '메모리에 저장되는 기본구조' 포스팅에서 컴퓨터는 데이터를 2진법으로 저장한다고 했었다. 메모리에 저장되는 기본 구조. # 시작하면서 2진법에대해서 되돌아보자. 중학생때 배웠던 2진법을 기억하고 있을것이다. 즉 0,1로 숫자를 표현하는 방법인데 예를들어 0은 10진법 수로 0이다. 1은 10진법수로 1, 10은 10진법 수로 2 jacobowl.tistory.com 숫자로 예를 들어보겠다. 사람은 숫자를 보통 10진법으로 표기한다. 하지만 컴퓨터는 2진법으로 알아듣는다. 즉 우리가 코드로 적는 2라는 수는 2진법 수로 10이고, 3이라는 수는 11이다. 때문에 우리가 코드에 2라는 수를 적으면 자바스크립트 엔진이 이를..

변수 호이스팅, 그리고 초기화 initialize, Temporal Dead Zone

초기화는 변수선언시에 최초로 undefined가 할당이 되는것을 말한다. 먼저 그림으로 살펴보면, let value = 'hello world'; 라는 코드가 실행되면 먼저 식별자 value가 가르키는 메모리주소1이 생성되고 이 주소가 가르키는 메모리공간에는 undefined가 할당된다. 그 후, 이 식별자 value는 메모리주소2를 가르키게되고 이 메모리주소 2가 가르키는 메모리공간에는 'hello world'라는 데이터가 재할당된다. # 먼저 선언하지 않은 변수를 참조해보자. console.log(babo); ReferenceError이 발생된다. 내용은 변수 babo가 정의되지 않았다라는 것이다. # 선언보다 참조를 먼저 하는 경우 var (호이스팅) console.log(babo); var bab..

변수와 메모리의 관계

# 변수 선언과 할당시 메모리 동작 구조. 1 단순히 코드상 1이라는 숫자를 하나 적었다. 그렇다면 메모리에는 어떻게 저장될까? 이 숫자 1이저장된 메모리공간에 메모리주소한개가 부여된다. 그렇다면 아래코드는 어떻게 저장이될까? let number_1 = 1; 1이라는 숫자를 number_1이라는 변수에 할당을 했다. 변수를 사용하면 위 코드에서 number_1이 즉 변수이름 식별자가 되고, 이 식별자는 메모리주소 하나를 가르킨다. 그렇다면 위의 코드를 실행하면 이렇게 구조가 잡힌다고 생각할 것이다. number_1이라는 식별자는 메모리 주소를 가르키고 이 메모리주소가 찾아가는 메모리에는 숫자 1이 저장되어있다. 하지만 이 구조는 틀렸다 자바스크립트는 변수선언시 이렇게 동작을 한다. // let numbe..

메모리에 저장되는 기본 구조.

# 시작하면서 2진법에대해서 되돌아보자. 중학생때 배웠던 2진법을 기억하고 있을것이다. 즉 0,1로 숫자를 표현하는 방법인데 예를들어 0은 10진법 수로 0이다. 1은 10진법수로 1, 10은 10진법 수로 2이다. 이런식으로 0과 1로 숫자를 표현할 수 있는것이다. 컴퓨터에선 메모리 주소 기본단위에 0이나 1을 저장할 수 있는데, 이 기본단위를 '비트'라고 한다. 이렇게 데이터 단위는 기본 Btye로 시작해서 2의 배수대로 커지는 시스템이다. 그럼 1바이트는 0이나 1을 저장할 수 있는 공간이 8개이니, 2^8 = 256 가지의 데이터를 저장할 수 있게된다. # 자바스크립트의 메모리 구조 위 그림처럼 메모리 하나는 1바이트(8비트)의 크기를 가지고 있고 각 셀마다 메모리 주소가 지정되어있다. 컴퓨터는 ..

vue / bootstrap carousel 자동넘기기 설정. $ref

# 문제점 carousel로 배너를 만들었는데, 다음버튼을 눌러야 그 후부터 auto slie가 되더라. 난 이 배너가 일정시간 간격으로 자동으로 사진이 넘어가면서 보이길 바란다. # 예상해결방법 화면이 렌더링된 후, 자동으로 다음버튼을 한번 클릭하게 하면 그 후로는 자동으로 carousel이 넘어갈것같다. # 방법 첫번째로 DOM요소를 js에서 컨트롤하기 위해서 가져와야한다. 여기서 버튼의 ref를 banner_next로 바꾸고 이 DOM을 methos에서 가져올것이다. methods: { click_next: function () { this.$refs.banner_next.click(); }, }, 순서대로 this.$refs.아까정한 ref이름. click() 이 메서드는 아까 정해놨던 넥스트버튼..

javaScript/vueJs 2023.03.20