DEV7 Vue v-on 핸들러 캐싱, 언제 되고 언제 안 될까? 안녕하세요. 정말 오랜만에 글을 써보는데요.회사에서 다른 프론트엔드 개발자분들과 얘기하다가 Vue v-on이 어떻게 동작하는지 궁금증이 생겨 내부 코드를 직접 뜯어봤습니다. 그 내용을 정리하면서 이벤트 핸들러 캐싱이 어떻게 동작하는지 살펴봤습니다. 😆핸들러 캐싱이 필요한 이유문제 상황: 만약 캐싱이 없다면? 카운트: {{ count }} 카운트 증가 console.log('clicked!')" /> 부모가 리렌더링될 때마다 인라인 핸들러가 새로 만들어지면 함수 참조가 달라져서 자식 입장에서는 props가 변경된 것으로 인식합니다. 상황에 따라 불필요한 리렌더링이 생길 수 있습니다.캐싱의 효과// 캐싱 없음: 매번 새로운 함수render1: handler = () => {} // .. 2025. 8. 29. 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. 이전 1 2 다음
