useEffect를 사용할 때 보통 이렇게 작성한다.useEffect(() => { // ... return () => { // cleanup.. }}, [deps]) 우리가 컴포넌트에서 useEffect를 호출하면, React는 내부적으로 여러 단계를 거쳐 Effect 객체를 생성하고 관리한다. 먼저 우리가 호출하는 useEffect는 이 파일에서 시작된다.앞으로 파일 경로가 계속 나오게 될텐데 facebook/react의 repository를 참고하면 된다.`packages/react/src/ReactHooks.js`export function useEffect( create: () => (() => void) | void, deps: Array | void | null,): void { c..

브라우저 차단 팝업 문제각 블로그의 포스트가 있는 컴포넌트를 클릭 하게 되면 조회수 API를 보낼 수 있도록 구현했다.클릭 후 해당 포스트 페이지로 이동하는 것은 잘 됐지만, 이상하게 조회수가 올라가는 API는 잘 작동하지 않았다. 대부분의 브라우저들은 UX와 보안을 위해 팝업 차단 정책이 존재한다. 사용자의 직접적인 클릭 이벤트가 아닌 경우나, window.open() 메서드를 통한 접근에 제한을 두고 있다. MDN 문서를 보면 아래와 같이 나와있다.null is returned if the browser fails to open the new browsing context, for example because it was blocked by a browser popup blocker.브라우저 팝업 차..

개요포토 부스 애플리케이션 프로젝트에서 주요 기능 구현을 맡게 되었다. 그 중 하나는 사용자가 찍은 사진과, 찍는 과정이 녹화된 영상을 서버에 전송해야 했다. 네컷사진을 떠올려보면 될 것 같다.이 과정에서 FormData를 활용해 멀티파트 형식으로 데이터를 전송하는 방법을 적용했다. FormData는 HTML 폼 데이터를 쉽게 구성하고 전송할 수 있게 해주는 웹 API이다. 파일 업로드와 같은 바이너리 데이터 전송에 보통 쓰인다고 한다.본 프로젝트에서는 한 장의 합성 이미지와 네 개의 개별 영상 파일을 동시에 전송해야 했기 때문에, FormData를 사용하는 것이 좋을 것이라 판단되었다. TypeScript를 사용한 것도 큰 도움이 되었다. 아직 TypeScript가 완전히 익숙해지지는 않았지만, API..

DOM 트리 상에 존재하는 DOM 요소 노드에서 발생한 이벤트는 DOM 트리를 통해 전파됨 Apple Banana Orange ul 요소의 두 번째 자식 요소인 li 요소를 클릭하면 클릭 이벤트생성된 이벤트 객체는 이벤트를 발생시킨 DOM 요소인 이벤트 타깃을 중심으로 DOM 트리를 통해 전파됨  클릭하세요   과정이벤트 전파는 이벤트 객체가 전파되는 방향에 따라 3단계로 구분됨캡처링 단계이벤트가 DOM 트리 최상위 요소에서 시작해 타겟 요소를 향해 내려감window -> document -> html -> body -> grandparent -> parent -> child캡처링 단계의 이벤트를 캐치하려면 addEventList..

이벤트 핸들러$_{event \space handler, \space event \space listener}$는 이벤트가 발생했을 때 브라우저에 호출을 위임한 함수이벤트가 발생하면 브라우저에 의해 호출될 함수가 이벤트 핸들러이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것을 이벤트 핸들러 등록이라 함 인라인 이벤트 핸들러HTML 요소에 직접 onclick등의 속성으로 지정간단하지만 HTML과 Javascript 코드가 섞여 유지보수가 어려울 수 있음관심사가 다르므로 혼재하는 것보다 분리하는 것이 좋음 function handleClick() {console.log('인라인 이벤트; 버튼 클릭됨');}모던 자바스크립트에서는 이 방식을 사용하는 경우가 있음CBD 방식의 Angular /..

const 키워드는 상수$_{constant}$를 선언하기 위해 사용한다. 그러나 반드시 상수만을 위해 사용되지는 않는다. const 키워드의 특징은 let 키워드와 대부분 동일하지만, 몇 가지 중요한 차이점이 있다.  const선언과 초기화const 키워드로 선언한 변수는 반드시 선언과 동시에 초기화해야 한다. 그렇지 않으면 다음과 같이 문법 에러가 발생한다.const foo; // SyntaxError: Missing initializer in const declarationconst bar = 10;console.log(bar); // 10위 예제에서 foo 변수는 초기화 없이 선언되었기 때문에 문법 에러가 발생한다. 반면 bar 변수는 선언과 동시에 초기화되었으므로 정상적으로 동작한다.  블록 레..

var 키워드의 단점을 보완하기 위해 ES6에서는 새로운 변수 선언 키워드인 let과 const를 도입했다. var 키워드와의 차이점을 중심으로 let 키워드를 살펴보자. let변수 중복 선언 금지var 키워드로 이름이 동일한 변수를 중복 선언하면 아무런 에러가 발생하지 않는다. 이 경우 변수를 중복 선언하고 값을 할당하면 의도치 않게 먼저 선언된 변수 값이 재할당되어 변경되는 부작용이 발생한다. 아래 예제에서는 x 변수를 var 키워드로 두 번 선언하고 각각 다른 값을 할당했다.var x = 10;var x = 20;console.log(x); // 20첫 번째 선언에서 x는 10가지지만, 두 번째 선언에서 20으로 재할당돼 기존 값이 덮여쓰여진다. 의도하지 않은 변수 값 변경을 유발할 수 있었다. 하..