tonirr

WebRTC로 화상 기능을 개발하면서 기존 창과 새 창 사이 메세지를 주고 받아야 하는 상황에서 Window.postMessage()를 통해 기존 창의 값을 참조할 수 있었다. 처음 postMessage를 사용하기로 하였을 때 창 간에 메세지를 주고 받는다는 것이 생소해서 서칭과정이 길었다. 이번 포스팅에서 Window.postMessage()의 개념과 예제를 상기시키면서 정리하고 이후 포스팅에서 React Hook에서 Window.postMessage()를 사용하여 개발한 과정 및 발생 이슈들을 정리해보려고 한다. Window.postMessage()란? window.postMessage() 메소드는 Window 오브젝트 사이에서 안전하게 cross-origin 통신을 할 수 있게 합니다. 예시로, 페..

Promise 란 Promise는 javascript안에 내장되어 있는 객체이며 비동기 적인 것을 수행할 때 콜백함수 대신 유용하게 사용할 수 있는 객체이다. Promise의 state Promise는 다음 중 하나의 상태를 가진다. 대기(pending): 연산을 수행중이거나 거부되지 않은 초기 상태 이행(fulfilled): 연산이 성공적으로 완료됨 거부(rejected): 연산이 실패함 Producer vs Consumer Promise는 원하는 기능을 수행해서 해당 데이터를 만들어내는 Producer와 데이터를 소비하는 Consumer로 나뉘어진다. Producer const promise = new Promise(() => { setTimeout(() => { // resolve('user id ..

window window 객체는 웹 브라우저의 창을 나타내는 객체로 대부분의 웹 브라우저에서 지원하고 있다. javascript의 모든 객체, 전역 함수, 전역 변수들은 자동으로 window 객체의 프로퍼티가 된다. window 객체의 메소드는 전역 함수이고 window 객체의 프로퍼티는 전역 변수가 된다. 문서 객체 모델(DOM)의 요소들도 모두 window 객체의 프로퍼티가 된다. window의 구조 window객체는 2가지 역할을 한다. 첫번째는 javascript의 전역 객체로 동작하는 역할이며 두번째는 브라우저 창(browser window)을 대변하고 이를 제어할 수 있는 메서드를 제공하는 역할이다. window 객체를 전역 객체로 사용 function sayHi() { alert("안녕하세요..

Intersection Observer란? Intersection Observer란 브라우저 뷰포트(Viewport)와 선택된 요소(Element)의 교차점을 관찰하는 API이다. 쉽게 말하면 선택된 요소가 사용자 화면에 현재 보이는지 보이지 않는지를 구별하는 기능을 제공한다. Intersection Observer의 생성과 구조 new IntersectionObserver()를 통해 인스턴스(io)를 생성, 관찰자(Observer)를 초기화, 관찰할 대상(Element)을 지정하여 사용할 수 있다. 생성자는 2개의 인수(callback, options)를 가진다. const io = new IntersectionObserver(callback, options) // 관찰자 초기화 io.observe(e..

Vanilla JS로 컴포넌트 방식을 사용하여 웹페이지를 만들던 중 appendChild를 통해 부모 컴포넌트에 자식 컴포넌트를 append 하는 과정에서 아래와 같은 에러가 발생했다. 해당 글에서 칭하는 컴포넌트는 javascript class를 말한다. Uncaught TypeError: Cannot read properties of undefined (reading 'appendChild') 자식 컴포넌트 생성시에 인자를 넘겨주어야 하는 상황이었는데 해당 에러때문에 부모 컴포넌트에 자식 컴포넌트가 append 되지 않았다. 원인은 부모 컴포넌트에서 자식 컴포넌트를 생성시 인자를 넘겨줄 때 중괄호를 누락시켰기 때문에 발생했고 아래 코드에 적은 대로 $target이 아닌 ${target}으로 넘겨 주어..

setTimeout 동작이 한번 일어남 실행중 다른 setTimeout으로 인해 함수가 호출되어도 기존에 실행되는 함수에 영향을 주지 않음 let timer = setTimeout(function(){}, time); // 사용 clearTimeout(timer); // 종료 setInterval 기본 동작이 반복적으로 일어남 실행중 다른 setInterval으로 인해 함수가 호출되면 기존에 실행되는 함수는 종료됨 let timer = setInterval(function(){}, time); // 사용 clearTimeout(timer); // 종료

useEffect(() => {}, []); useEffect(() => { console.log("컴포넌트 나타남"); return () => { console.log("컴포넌트 사라짐"); }; }, []); 컴포넌트 처음 로드 시 useEffect(() ⇒ {}, [value]); useEffect(() => { console.log("value 컴포넌트 나타남"); return () => { console.log("value 컴포넌트 사라짐"); }; }, [value]); 컴포넌트 처음 로드 시 컴포넌트 로드 후 title 수정 시

Server-Side Rendering(SSR)이란? 서버에서 사용자에게 보여줄 페이지를 모두 구성해서 사용자에게 페이지를 보여주는 방식 JSP/Servlet 아키텍처에서 이 방법을 사용하였음 👍 장점 사용자가 처음으로 컨텐츠를 볼 수 있는 시점을 앞당길 수 있음 검색엔진최적화 SEO(search engine optimization) 적용이 용이 👎 단점 모든 요청에 관해서 필요한 부분만 수정하는 것이 아니라 완전히 새페이지를 로딩하고 보여줌 매 요청하다 전체를 로딩해서 CSR보다 비교적 느림 대역폭(bandwidth) 을 많이 사용함📌 대역폭(bandwidth) 이란? 어떤 네트워크 유형에서 최대 데이터 전송 비율(시간당 전송량)을 말하며, 보통 초당 비트수(bps)로 이야기함 많이 사용되는 대역폭의 ..