배너 이미지

React로 로또번호 생성기 만들기

React로 로또번호 생성기 만들기

깃허브 약 9개월 전에 바닐라 자바스크립트로 만든 로또 추첨기를 리액트로 다시 제작해봤습니다. 손보는 김에 예전엔 모바일 기기에선 공을 세로로 일렬로 표시했으나, 이젠 3열로 표시하게 해뒀습니다.버리는 공간이 훨씬 적어진 느낌이라 마음에 드네요. 바닐라로 짤 땐 html에 .ball이란 div를 만들고, #button을 클릭하면 document.querySelectorAll(".ball")로 DOM에 접근해 내용을 바꾸는 방식으로 작업하는데, 리액트로 짜니 컴포넌트를 만들고, 버튼을 클릭하면 컴포넌트의 상태를...

Heroku로 디스코드 봇 호스팅하기

Heroku로 디스코드 봇 호스팅하기

Discord.js로 만든 봇을 Heroku에 호스팅하는 방법입니다.어떤 언어로 작성한 봇이건 호스팅 과정은 크게 다르지 않긴 합니다만, 세세한 부분은 다를 수 있으니 참고해주세요. 파일에 개별적인 접근이 불가능하단 치명적인 단점이 있긴 하지만, 아무래도 무료 호스팅에 많은 걸 바라긴 힘들지 싶네요.아이유 봇은 파일에 종종 개별적인 접근이 필요해 헤로쿠에 올리지 못하고 있습니다. 준비물 디스코드 계정 헤로쿠 계정 깃허브 계정 (선택)...

Frameless Gallery 1.2 업데이트

Frameless Gallery 1.2 업데이트

자동 다크 모드 해제 지금까진 사용자가 다크 모드를 사용하거나, 시간이 19시부터 06시 사이라면 블로그 주인이 설정한 테마를 무시하고 다크 모드가 적용됐습니다.이젠 옵션에 '자동 다크 모드'가 추가되어 이 기능을 끌 수 있습니다. 빠른 링크 로딩 prefetch 업데이트에서 추가했던 기능을 frameless gallery에도 추가했습니다.'빠른 링크 로딩' 옵션을 활성화하시면, 사용자가 링크에 마우스를 올리면 페이지의 내용을 미리 불러와 훨씬 빠르게...

Node.js 크롤러 제작 후기

Node.js 크롤러 제작 후기

개인적으로 배경화면을 굉장히 자주 바꾸는 편인데, 자주 가는 배경화면 줍는 블로그가 역병 때문에 문을 잠깐 닫았던 터라 요즘 여기저기 돌아다니며 배경화면거리를 찾고 있었습니다.헌데 배경화면을 다루는 사이트 대부분이 접근성이 굉장히 떨어지더라고요. 한 포스트에 한 장의 사진만 올리거나, 80장의 사진을 한 포스트에 쓰는데 그 포스트를 다시 여러 페이지로 쪼개서 한 페이지에 두 장씩 보여준다거나 하는 식으로요.참고 참으며...

200428 아이유 봇 제작일지

200428 아이유 봇 제작일지

오랜만에 4박 5일로 서울에 다녀왔는데, 짬날 때마다 업데이트했습니다.KTX 안에서 특히 시간이 많이 나더라고요. 타이머 타이머 기능을 추가했습니다.봇 업데이트를 위해 가동을 멈췄다 다시 시작할 때가 많아, 3시간 이상은 설정하지 못하게 해뒀습니다. 시간, 분, 초 단위를 사용할 수 있습니다.물론 "1시간 1분" 처럼 조합해 사용할 수도 있습니다. 제비뽑기 있으면 재밌겠다 싶어 만든 제비뽑기입니다.사람 여럿 언급하면 그 중 하나...

우분투에 워드프레스 설치하기

우분투에 워드프레스 설치하기

설정할 때마다 조금씩 헷갈려 정리용으로 작성하는 글입니다.우분투 18.04에서 터미널만을 이용해 작업합니다.우분투 콘솔, SSH 등의 상황에서도 똑같이 하실 수 있습니다. 가볍게 체험만 하고 싶으시면 구글 클라우드 플랫폼 등 무료로 호스팅을 받을 수 있는 곳이 있습니다. 서버엔 apache2 대신 nginx를 사용합니다. 참고 : 터미널에 입력하는 것 중 한글로 적힌 건 전부 똑같이 적는 게 아니고 본인이 작성하셔야...

200410 아이유 봇 제작일지

200410 아이유 봇 제작일지

제작 목적이 아이유 움짤 / 아이유 인스타그램 알림 두 가지였는데, 움짤은 만들기 시작한 당일에 해결했고, 인스타그램 알림도 3월 31일 자 업데이트로 구현이 끝났습니다. 더 추가할만한 기능이 이제 딱히 생각나는 게 없네요. 😥 지은아 명령어를 아무것도 입력하지 않으면 도움말을 입력하면 명령어 목록을 볼 수 있단 알림을 줬었는데, 이젠 랜덤 움짤을 전송합니다. 존재하지 않는 명령어 해당 명령어가...

jQuery 없이 애니메이션 사용하기

jQuery 없이 애니메이션 사용하기

애니메이션 대부분은 JS에선 엘리먼트의 class 정도만 변경해주고 CSS에서 애니메이션을 추가하는 방식으로 사용하실 수 있습니다.하지만, 엘리먼트의 width나 height을 변경하거나, 특정 엘리먼트까지 부드럽게 스크롤 하는 덴 위 방식으로 한계가 있습니다.엘리먼트의 width나 height을 css의 transition으로 변경하면 60FPS 보장이 굉장히 힘들어지고, scroll-behavior은 사파리에서 지원하지 않기 때문입니다. jQuery에선 .animate() .slideToggle() 등으로 간단히 작업할 수 있는데, 이를 바닐라로 비슷하게 구현해봤습니다. function animateScroll(to) {...

200405 블로그 제작일지

200405 블로그 제작일지

Make Website Faster 더욱 빠른 웹사이트를 구축하는 방법을 찾아가는 중입니다. 확실히 알게 된 건, 역시 돈이 최고입니다.서버 여러 대 구축해서 할 일을 분산시키니 훨씬 빨라지네요. 캐시 서버 추가 예전에도 언급했지만, 제 서버는 HDD를 사용합니다.서버 특성상 읽기 / 쓰기가 굉장히 자주 일어나 언제 데이터가 날아갈지 몰라 HDD로 구성했는데, 물리적인 한계로 아무래도 방문자가 몰리면 몰릴수록 많이 느려집니다....

678910
카카오페이 qr코드 모바일이시라면 클릭