분류 전체보기(30)
-
Mac intelliJ 단축키 설정 - 전체 탭 닫기
** 초보 개발자로 글에 수정해야 할 부분이 있을 수 있습니다. 정정해야 할 부분은 댓글로 소통 부탁드립니다! intelliJ 너무 편하지 않나요?! (ultimate 더 좋은건 안 비밀 😆) 알면 알수록 너무 감사한 툴이에요 ㅎㅎ 구글링 하다보면 이렇게도 사용할 수 있구나 하는데요, 그 중에서도 단축키 설정하는 방법을 알아보려고 합니다 🤗 Mac > intelliJ 1. 상단의 메뉴 탭 > IntelliJ IDEA > Preferences 클릭 2. Keymap 클릭 3. 검색창에 close 검색(전체 창 닫기 검색하기 위해) (현재 저는 단축키를 등록한 상태라 ctrl + cmd + W 가 출력되지만, 등록하지 않았다면 비어있을거에요!) Close All Tabs 을 오른쪽 클릭해서 Add Keybo..
2021.07.17 -
[js] Event Delegation(이벤트 위임)
** 초보 개발자로 글에 수정해야 할 부분이 있을 수 있습니다. 정정해야 할 부분은 댓글로 소통 부탁드립니다! 효율적인 이벤트 핸들링을 하려면 어떻게 해야할까요? 각 Dom element 마다 이벤트를 거는 것이 아니라 상위의 dom element 에 이벤트를 걸고, 이벤트가 발생한 target 을 찾아 이벤트를 핸들링하는 것입니다. 이러한 방법을 이벤트 위임(Event Delegation)이라고 합니다. 코드로 살펴봅시다! STEP 01 _ Event Delegation 예제코드 "테이블 내의 td 클릭 시 하이라이트 효과"를 주어야 하는 경우로 가정해봅니다. 1) event.target 사용 $('.table').on('click', (e) => { let target = event.target; /..
2021.07.06 -
[Angular] Provider 비교(NgModule.providers vs. Component.providers vs. Component.viewProviders)
** 초보 개발자로 글에 수정해야 할 부분이 있을 수 있습니다. 정정해야 할 부분은 댓글로 소통 부탁드립니다! 정말 코딩의 세계는 무궁무진한 것 같습니다. provider는 당연히 module에서만 import 하는 것이라고 생각했는데 component 별로 import가 가능하더군요! (lazy loading의 진수를 보여주는! 👍🏻) 구글링 하다가 좋은 영문글을 발견하여 번역해보려 합니다! STEP 01 _ 준비하기 먼저, 각 provider를 비교하기 위한 예제 코드(5개 파일)를 이해 해봅시다. SimpleService ChildComponent ParentComponent AppComponent AppModule 1. SimpleService class SimpleService { value: ..
2021.07.05 -
[Angular] HostBinding VS. HostListener
** 초보 개발자로 글에 수정해야 할 부분이 있을 수 있습니다. 정정해야 할 부분은 댓글로 소통 부탁드립니다! @HostBinding 과 @HostListener 전혀 다른 directive이지만, Host라는 같은 단어가 있어 "비슷한 기능을 하는건가...?" 싶더라구요~ 정확히 정리해보려 합니다. 🤗 1. @HostListener listener 라는 단어에서 알 수 있듯이 무언가 event가 발생하는 것을 듣고 있다는 느낌이 들지 않나요?! (저만 그런가요... ㅋㅋ) 이처럼 @HostListener는 이벤트 핸들링과 관련된 디렉티브입니다. @HostListener('click', ['$event.target']) onClick(target) { console.log('click!', target)..
2021.07.05 -
[Angular] ngClass 로 클래스 추가하기
** 초보 개발자로 글에 수정해야 할 부분이 있을 수 있습니다. 정정해야 할 부분은 댓글로 소통 부탁드립니다! angular 에서 DOM element 내에 CSS class 를 dynamic 하게 변경하기 위해서 ngClass 를 사용하면 됩니다. ... ngClass에는 다음과 같이 3가지 type이 사용 가능합니다. String Array Object ... ... ... 하나의 class 뿐만 아니라, 여러개의 class 명을 control 하고 싶을 때는 다음과 같이 사용할 수 있습니다. ... 추가적으로 3항 연산자 또한 사용 가능합니다. ... [References] Angular angular.io
2021.07.01