개인코딩개발공장

먼저 @keyFrames를 만들어줘야한다. @keyframes change-color { from { background-color: red; } to { background-color: blue; border-radius: 50%; } } change-color이란 이름의 애니메이션이다. .box1 { animation-name: change-color; animation-duration: 1s; animation-iteration-count: infinite; } 그리고 적용하고 싶은 html css에 저shape라는 애니메이션을 적용하면된다. 무한하게 1초동안 change color 애니메이션이 반복되는걸 볼수있다. @keyframes change-color { from { background-co..

먼저 html ## transform 사용하기 # 이동을 해보자 .box { width: 100px; height: 100px; background-color: red; margin: 10px; transform: translateX(50px); } - translateX(값) 이건 x축으로 얼만큼 이동하겠는가 - translateY(값) 이건 y축으로 얼만큼 이동하겠는가 -translate(값1,값2) 이건 xy각각 얼만큼 이동하겠는가 # 크기를 조절해보자 .box { width: 100px; height: 100px; background-color: red; margin: 10px; transform: scaleX(2); } - scaleX(값) 값배만큼 X축으로 늘리자~ - scaleY(값) 값배만..

난 이미 백단에 풀을 생성해서 관리를 하고있었는데 내가 알고있는 connection pool개념과 내 db서버 작동방식이 좀 다르더라.. 프론트에서 db데이터 접근하는 요청을 날릴때마다 커넥션이 여러개 생성이 되던데 백단에서 connection pool로 db접근처리를 해놨다면 쿼리문 날릴때마다 노는 커넥션 하나 가져와서 쓰는거라 커넥션이 늘어나지 말아야할텐데? 로컬에서 작업하는거니 당연히 그래야하는데.. 계속 커넥션이 늘더라.. 뭐가 문제인지 원인을 찾았다. 그래서 connection pool의 개념을 다시 정리해보겠다. # 목적 : connection pool의 개념정리 # 기본 프론트 백 db서버 동작 구조 위 그림처럼 front에서 api요청으로(axios ajax같은거) 백단에 요청을 한다. 그..

# 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..

async function getIpClient() { try { const response = await axios.get("https://api.ipify.org?format=json"); console.log(response, "여기야"); } catch (error) { console.error(error); } } ipify에서 제공하는 api를 사용하면 된다. 저 response객체에 여러 정보들이 담겨있다.

https://jootc.com/p/202112103833 [JavaScript] 같은 정규표현식(RegExp) test 결과가 서로 다른 경우 - JooTC JavaScript regexp test twice 정규표현식 test 결과가 서로 다른 문제 JavaScript에서 다음 RegExp.prototype.test 구문을 이용하여 정규표현식을 검증하려 할 때가 있습니다. jootc.com

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

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

# 리터럴(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라는 수를 적으면 자바스크립트 엔진이 이를..

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