티스토리챌린지21 [JavaScript] event.target 과 event.currentTarget 차이 See the Pen Untitled by 이가은 (@wymdzlvu-the-looper) on CodePen. 위 예제에서는 사용자가 버튼을 클릭하게 되면 event.target은 실제 클릭한 버튼을 가리키고, event.currentTarget은 실제 이벤트가 걸려있는 컨테이너 DIV를 가리키게 된다. 1.event.target: 이벤트가 처음으로 발생한 원본 요소를 참조이벤트가 트리거된 실제 요소를 반환이벤트가 버블링되거나 캡처링될 때도 처음 발생한 요소를 유지한다.2.event.currentTarget: 현재 이벤트 핸들러가 부착된 요소를 참조이벤트 핸들러가 실행되는 동안 이벤트를 청취하고 있는 요소를 반환한다.this와 유사하게 동작하며, 핸들러가 연결된 요소를 보장한다. Item 1 .. 2024. 11. 27. [JQuery] remove(), detach(), empty() 메서드 차이점 1. remove()선택한 요소와 해당 요소의 자식 요소를 DOM에서 제거한다. 요소와 그에 연결된 이벤트 핸들러도 함께 삭제된다. $("#id").remove();완전히 제거되므로 메모리에서 해당 요소를 복구할 수 없다. 2. detach()선택한 요소와 자식 요소를 DOM에서 제거하지만 메모리 상에서 데이터와 이벤트는 유지된다. 나중에 같은 요소를 다시 DOM에 추가해야 할 경우 유용하다.let element = $("#id").detach();$("body").append(element);이벤트 핸들러나 데이터를 보존해야 하는 경우 사용하면 좋다. 3. empty()선택한 요소의 자식 요소만 제거한다. 선택한 요소 자체는 유지된다.요소 안의 내용만 삭제하고 선택한 요소의 이벤트 핸들러나 데이.. 2024. 11. 26. [Utill] Figma를 활용한 UI 만들기 오늘은 우연한 기회로 디자인 관련 영상을 보게되어그동안 궁금했던 피그마와 몇몇 플러그인에 대해 알아봤다. 사이드로 하고 있는 프로젝트 & 곧 시작할 기능 구현 플젝에서도프론트 화면이 필요한데 가장 걱정인 건..디자인이 진짜 꽝이라는 거..😱 "어떻게 하면 그럴듯한 UI를 디자이너 없이 만들 수 있을까¿"이게 오늘의 주요 관심사ㅎㅎ..까먹으니 정리해두고 쓰자 1. 매직패턴 플러그인으로, 크롬 도구에서 추가할 수 있다.달력을 가져오고 싶으면 html이 존재하는 페이지로 가서플러그인을 통해 가져올 수 있다. select HTML을 누르고 원하는 영역을 선택하면자동으로 새로운 페이지로 렌더링 되면서 요소들을 생성한다. 만들어진 요소를 피그마로 이동시켜 사용할 수 있다!다른 UI를 참.. 2024. 11. 25. Mockito 테스트 Mockito 기본 사용천리길도 한 걸음부터라고 기본 사용 방법부터 보자. 먼저 의존성을 추가한다. org.mockito mockito-core 3.11.2 test org.mockito mockito-junit-jupiter 3.11.2 test org.junit.jupiter junit-jupiter-engine 5.7.0 test 이후 Mockito를 사용할 테스트 클래스에서 Mockito 확장을 가져온다.@ExtendWith(MockitoExtension.class)classUserServiceTest.. 2024. 11. 24. [Docker] Docker Compose 기본 포맷 Docker Compose가 뭘까?? 서버를 올리기 위한 문서들을 보면서 docker-compose.yml 이라는 파일을 많이 봤다.대충 실행 파일 같은데..언젠간 알아야 하니까.. 정리해보자 ! Docker Compose 란?도커 컴포즈는 여러 컨테이너를 모아서 관리하기 위한 툴이다. 웹 서비스는 프론트엔드 서버, 데이터베이스 서버, 백엔드 서버로 이루어져 있는 경우가 많은데, 각각을 도커 컨테이너로 작성하고 연결하여 동작하기 때문에 Docker Compose 와 같은 컨테이너 관리 툴이 필요하다. 더 나아가서 서비스 규모가 커지면,복수의 컨테이너를 유지하고 관리해야 하며 이를 위해 쿠버네티스 등의 관리 툴이 사용된다.도커와 도커 컴포즈를 잘 다룰 수 있으면, 기본적인 서비스 구현이 가능하고이를 .. 2024. 11. 23. [Docker] 도커에 대한 기본 이해 도커는 리눅스 컨테이너로부터 시작된 기술이다.리눅스 커널에 있는 LXC 기술을 사용해서 만드는 것이다! 초기 도커는 LXC 기술을 기반으로 구현되었으나,최근에는 별도 컨테이너 기술을 구현하여 사용하고 있다. Docker 주요 구성 요소1. 도커 엔진 (Docker Engine)도커는 서버/클라이언트 구조로 이루어진다.1) 서버는 docker daemon process(데몬 프로세스) 형태로 동작한다.2) docker daemon process 에 요청하기 위해, 프로세스간 통신 기법이 필요하며, 도커는 이를 위해 Rest API를 사용한다.3) docker command는 일종의 클라이언트라고 이해하면 됨. 도커 커맨드를 내리면 결국 내부적으로 Rest API를 사용해서 docker daemon p.. 2024. 11. 22. [JavaScript] 자바스크립트 디버깅하기 티스토리는 다 좋은데.. 이모티콘이 제한적이어서 아쉽다ㅠㅠ카카오톡과 연동했으면 이모티콘도 연동됐으면 좋겠다 ㅎ_ㅎ (너무 욕심인가) 리모트 박스의 목록이 없는 경우에는 "목록이 존재하지 않습니다." 라는 문구를 출력하고 싶은데 어디선가 다시 값을 세팅해주는건지,, "()" 이런 문구로 바뀌어 출력된다. 콘솔 로그만 계속 찍어보다가 .. 자바스크립트는 디버깅 안 되나..? 디버깅을 잘 사용할줄은 모르지만 .. 이렇게 콘솔 찍는 것보다는 낫겠지 역시 디버깅하는 방법이 있었다 !https://ko.javascript.info/debugging-chrome Chrome으로 디버깅하기 ko.javascript.info모던 JavaScript 튜토리얼에 잘 나와있다. 크게 두 가지 방법이 있었는데,1. 개발.. 2024. 11. 21. [모던 자바 인 액션] Chapter 11. null 대신 Optional 클래스 (2) Optional을 이용한 Person/Car/Insurance 참조 체인앞에서 살펴본 예제에서는 Optional이 비어있을 때 기본값을 제공하는 orElse라는 메서드를 사용했다. 기본값을 제공하거나 언랩(unwrap)하는 다양한 메서드를 제공한다. 이제 다양한 기능을 자세히 알아보자 11.3.4 Optional 스트림 조작stream()을 사용하여 유용하게 활용할 수 있다.public Set getCarInsuranceNames(List persons) { return persons.stream() .map(Person::getCar) .map(optCar -> optCar.flatMap(Car::getInsurance)) .map(optIns -> optIn.. 2024. 11. 20. [Spring] Spring Boot Logging 설정 처음 프로젝트를 시작하면서 프레임워크를 구성할 때..가장 먼저 해야하는 설정, 로깅 설정!스프링 부트에선 기본적으로 Logback이 설정되어 있다. 다음과 같이 spring-boot-starter-logging 라이브러리에 기본적으로 설치되어 있어서 SLF4J의 3가지 모듈이 Logback과 연결된다.SLF4J(Simple Logging Facade for Java)는 이름에서 확인할 수 있듯이. java.util.logging, logback 및 log4j와 같은 다양한 로깅 프레임 워크에 대한 추상화(인터페이스) 역할을 하는 라이브러리이다.SLF4J는 추상 로깅 프레임워크이기 때문에 단독으로는 사용하지 못함. 즉, 최종 사용자가 배포시 원하는 로깅 프레임워크를 결정하고 사용해도 SLF4J가 인터페이스.. 2024. 11. 19. 이전 1 2 3 다음
