본문 바로가기

DEV6

Ubuntu에서 도커 설치하기 도커 설치 가이드 이 글은 Ubuntu에서 도커를 설치하는 방법을 공부하며 정리한 내용입니다. 설치전 준비사항 OS 요구사항 Docker Engine을 설치하려면 다음 Ubuntu 버전 중 하나의 64 비트 버전이 필요합니다. Ubuntu Focal 20.04 (LTS) Ubuntu Bionic 18.04 (LTS) Ubuntu Xenial 16.04 (LTS) 기존 도커 삭제 $ sudo apt-get remove docker docker-engine docker.io containerd runc 도커 설치 도커를 설치하는 방법은 아래와 같으며, 이 중 리포지터리를 사용한 설치로 진행하겠습니다. 가장 권장되는 리포지터리를 사용한 설치 DEB 패키지를 다운로드하여 수동으로 설치하고 업그레이드를 완전히 수.. 2020. 11. 29.
JavaScript 이벤트 처리 개요 이 글은 JavaScript를 사용할 때 많이 작업하게 되는 이벤트 처리에 대해 정리한 내용입니다. 간단하게 아래 4가지에 대해서만 알아보겠습니다. 이벤트 처리기 등록 이벤트 처리기 제거 이벤트 전파 이벤트 취소 이벤트 처리기 등록 우리가 웹사이트를 이용하며 버튼을 클릭하거나 스크롤을 내릴 때 JavaScript에서는 이 행동들을 이벤트라고 부릅니다. 이벤트가 발생한 DOM에는 이벤트 인터페이스를 기반으로한 객체가 전달되는데, EventTarget.addEventListener 메서드를 사용하여 이벤트 객체를 전달 받을 수 있습니다. 문법 EventTarget.addEventListener(type, listener [, options]); EventTarget.addEventListener(typ.. 2020. 4. 6.
[Toy Project] 사다리 게임 (v0.1.3) 소개 Ladder Game은 웹사이트에서 간단하게 사다리 게임을 하기 위해 만든 토이 프로젝트입니다. 아직 완성되지는 않았지만 1차적으로 구현하려고 했던 기능들이 완료되어 소스를 공개합니다. Demo 이 링크를 클릭하여 지금 바로 사다리 게임을 할 수 있습니다. 데스크탑 웹과 모바일 웹을 모두 지원하지만, Internet Explorer(이하 IE)는 버전 11이상만 호환됩니다. IE 버전 10이하는 사용하는데 문제가 있을 수 있으니 최신 브라우저를 사용해주세요. 목표 1차 완성의 목표는 사다리게임이라고 말하면 누구나 알만한 기능 구현을 목표로 하였습니다. 사다리 개수 입력 플레이어 이름 입력 보상 입력 사다리 그리기 사다리 결과 구현해야 할 기능을 정리해보면 이렇게 5개 정도로 아주 심플합니다. 사다리.. 2020. 3. 6.
console.log 한방에 지우기 console.log 한방에 지우기 console.log는 사용하기 간편하여 자바스크립트로 개발할 때 많이 사용되는데요. 보통 개발할 때만 사용하고 상용(production)에 배포할 때는 모두 지워서 배포합니다. console.log를 반드시 지워야되는 건 아니지만 남겨두게 된다면 웹사이트에 접속한 누구나 개발자 도구를 통해 쉽게 log를 볼 수 있게되니까 되도록 지우도록 합시다. 신입때 팀장님이 console.log를 전부 지우라고해서 무식하게 일일이 지웠던 기억이 있는데요... 작업할 때는 console.log를 다시 입력하고, 배포할 때 다시 지우고... 정말 귀찮... 소개 babel-plugin-transform-remove-console이라는 babel 플러그인을 사용할건데요. webpack.. 2019. 12. 31.
NodeJs에서 메모리가 부족할 때 NodeJs로 응용프로그램을 실행할 때 메모리로 인한 문제가 발생할 수 있는데, V8 옵션인 --max-old-space-size=를 사용하여 메모리 제한을 변경할 수 있습니다. node --max-old-space-size=4096 index.js 4GB로 변경한 예시입니다. 기본 메모리 제한 기본 메모리 제한은 32 bit 시스템에서 512MB, 64 bit 시스템에서는 1GB 이지만 V8 버전마다 다를 수 있다고 합니다. 참고 사이트 https://medium.com/@vuongtran/how-to-solve-process-out-of-memory-in-node-js-5f0de8f8464c https://nodejs.org/api/v8.html#v8_v8_getheapspacestatistics h.. 2019. 11. 20.
웹브라우저에서 스크롤 정보를 가져오는 방법 이 글은 Window.scrollY - Web API | MDN의 내용을 참고하여 작성하였습니다. 스크롤 정보를 가져오는 방법 웹브라우저에서 현재 화면의 스크롤 정보를 알아야 할 경우가 있는데, 보통 아래의 방법을 많이 사용합니다. // 화면의 Y축의 상단값 window.scrollY // 화면의 Y축의 하단값 window.scrollY + window.innerHeight 브라우저 호환성 window.scrollY의 브라우저 호환성을 확인해보면 Internet Explorer(이하 IE)를 제외하고 모두 지원하며, 일부 모바일 환경에서 ?(알 수 없음)로 표시되어있습니다. 그리고 window.scrollY와 window.pageYOffset은 같은 속성이지만, 오래된 브라우저의 경우 window.scr.. 2019. 11. 17.