tonirr

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

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

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

selectbox에 동적으로 추가하는 기능을 만들었는데 $('#testSelect').val('test2').prop("selected",true); $('#testSelect').val('test2'); 위와 같은 방법으로 만들었다. option이 선택되지 않아 디버깅 해보니 호출 이후에 selectbox가 동적으로 생성되어서 option들이 생성되기 전에 호출이 이루어졌다. 그래서 화면호출시에 addAttribute로 option에 들어갈 list를 담아서 jsp로 전달하고 html에서 jstl을 통해 option에 추가해주어서 첫 화면부터 selectbox에 option들이 추가되어 있도록 만들었더니 생성되었다.

하나의 html에서 name은 중복되어도 되지만 id는 유일해야 한다. 따라서 그룹으로 접근하고 싶을 때에는 name을 활용하며 모든 것들에게 따로 접근해야 할 때에는 id를 사용한다. 이 고민을 하게된 계기는 같은 모달창 두개를 한꺼번에 하나의 jsp 파일에 넣으려고 했기 때문이다. 모달 두개를 각각 모달1, 모달2라고 한다면 이 모달들을 한번에 submit을 할 일은 없기 때문에 문제가 되지는 않겠지만 계속 브라우저 콘솔창에 경고창이 뜨는게 거슬려서 각각의 모달에 다른 name을 주었다. 이렇게하니 jsp에서 다른 name을 지정했던 값을 controller에서 get해와서 따로 객체를 하나 만들어 그 객체에 set해주는 과정이 추가되어서 비효율적으로 처리되었다는 생각이 들었다. 생각해보니 모달1과 ..

에러 상세 highcharts.src.js:13611 Uncaught TypeError: Cannot set property 'index' of undefined at object.generatePoints (highcharts.src.js:13611) at object.translate (highcharts.src.js:13692) at object. (highcharts-more.js:55) at object.obj. [as translate] (highcharts.src.js:391) at highcharts.src.js:12379 at Array.forEach () at each (highcharts.src.js:959) at Highcharts.Chart.renderSeries (highchar..

div1 { z-index:1; width: 50px; height: 50px; } div2 { float:right; z-index:2; width: 50px; height: 50px; } 위와 같은 상황 div1, div2를 나란히 두어야 하는데 div2에 float:right가 있어 z-index:2가 먹지 않는 이슈가 발생했다. 이럴 땐 div2에 position: relative를 함께 써주면 된다고 한다.

Web server의 개념 하드웨어 Web 서버가 설치되어 있는 컴퓨터 소프트웨어 클라이언트로부터 HTTP 요청을 받아 정적 컨텐츠(.html, jpg, .css 파일등)를 즉 각종 리소스를 제공하는 컴퓨터 프로그램 Web server의 기능 정적 컨텐츠 제공 WAS를 거치지 않고 바로 자원을 제공 동적 컨텐츠 제공 클라이언트의 request를 WAS에 보내기 정적, 동적 컨텐츠란? 정적 컨텐츠(static) 변화가 없는 컨텐츠를 뜻함 HTML, CSS, JS와 같이 미리 서버에 저장해두고 서버가 요청을 받으면 ㅋ그저 응답만 해주면 되는 것들로 구성 어느 사용자에게나 동일한 결과값을 보여줌 동적 컨텐츠(dynamic) 누가, 언제, 어떻게 서버에 요청했는지에 따라 결과값을 다르게 보여주는 형식 유튜브 추..