분류 전체보기

[JavaScript] 이벤트 버블링과 캡처링

click 위와 같은 코드의 실행 결과는 어떻게 될까? 버튼을 클릭했을 때 버튼 클릭에 대한 콜백함수가 실행되고 button clicked만 출력되어야 할 것 같다. 하지만, 결과는 아래와 같이 div의 클릭 이벤트도 함꼐 실행된다. 1. 버블링과 캡처링 버블링은 이름에서 알 수 있듯이 이벤트가 버블(거품)처럼 위로 올라가는 성질이다. 위의 예시에서 button을 클릭하면 클릭 이벤트가 발생하여 button clicked가 출력된다. 이후, 클릭 이벤트는 버블링을 통해 상위 요소로 이동하며 div의 클릭 이벤트도 실행되어 div clicked가 실행된다. 캡처링은 이와 반대로 상위 요소의 이벤트가 하위 요소로 전달되는 것을 의미한다. addEventListener의 세번째 인자로 true를 설정한 경우 ..

[JavaScript] addEventListener과 onclick의 차이

JavaScript를 이용해 HTML 요소에 click 이벤트를 등록하는 경우를 생각해보자. HTML 요소를 찾은 뒤 addEventListener를 이용하는 방법이 있고 HTML 요소에 직접 onclick을 이용하는 방법이 있다. 두 방법 다 특정 이벤트가 발생하면 정해진 함수를 실행하도록 할 수 있다. 겉보기에 같은 기능을 하는 두 방법이 왜 별도로 존재하는 것일까? 1. 표현 방식 비교 click click (위의 두 코드의 실행 결과는 같다) 2. 차이점 위애서 handleClick 함수는 콜백함수이다. 이벤트가 발생되었을 때 실행되는 함수라고 생각하면 된다. 2-1. 여러개의 콜백 onclick에서는 여러개의 콜백함수를 지정할 수 없다. 가장 마지막에 등록된 콜백함수만 실행될 것이다. 반대로, ..

[Next.js13] middleware 사용법

현재 프로젝트에서 NextJS13 버전을 사용중이다. NextJS의 이전 버전을 사용해본 적이 없어서 얼마나 많은 차이가 있는지는 모르겠다. NextJS13의 특징을 간략히 정리하면 다음과 같다. server-component와 client-component app router fetch 함수를 이용한 SSR, ISR 등의 구현 따라서, 이 프로젝트를 진행하며 app router를 사용하고 axios 대신 fetch 함수를 사용하고자 노력했다. 1. 문제상황 현재 프로젝트의 경우는 별도의 백엔드 서버가 있고 DB관련 연산은 모두 백엔드 서버에서 수행한다. 백엔드 서버는 API를 제공하므로 NextJS를 이용해 DB 등에 접근할 일은 없었다. 인증 방식으로는 JWT를 사용했으며 JWT의 정보를 쿠키에 담아..

[TypeScript + Jest] TypeScript 프로젝트 시작 + Jest 적용

TypeScript를 적용하면서 동시에 Jest를 이용한 단위 테스트를 하고싶다면 어떻게 해야하는지에 관한 글이다. TypeScript와 Jest를 동시에 적용하기 위해 어떻게 해야하는지, 어떤 것을 설치해야 하는지에 대한 과정이다. 프로젝트 시작 (VSCode, NodeJS와 같은 기본적인 것이 준비되어 있다는 가정) npm init -y 위의 명령어로 npm 프로젝트를 시작한다. 위의 명령어를 입력하면 디렉토리에 package.json 파일이 생성된다. -y 명령어를 입력하지 않는다면 프로젝트에 관한 세부적인 내용도 함께 설정할 수 있다. 위와 같은 내용으로 채워진 package.json이 생성된다면 성공이다. TypeScript 설치 npm i -D typescript ts-node @types/n..