전체 글
-
서로 다른 Window 통신하기 PostMessage개발 2022. 11. 29. 02:11
Window.postMessage() postMessage() 메서드는 Window 객체 간의 안전한 통신방법을 제공한다. 대표적인 사용 예로 새창으로 띄워진 팝업창, 페이지 안에 포함된 iframe 을 말한다. 또 데이터를 보내는 HTTP 요청을 생성하지 않으며, DOM 기반 통신에 사용된다. ⌨️ 기본 사용법 메시지 보내기 targetWindow.postMessage(message, targetOrigin, [transfer]); 메시지 받기 window.addEventListener("message", receiveMessage, false); function receiveMessage(message) { console.log(message) } 📮 데이터 전달하기 보내고 받는법을 발견했다. pos..
-
Next.js - Incremental Static Regeneration (ISR) 과 SSR caching개발 2022. 10. 30. 23:16
Static Site Generation (SSG) Next.js 에서 지원하는 Static Site Generation을 사용하면 빌드 시점에 클라이언트에 제공되어야 하는 HTML을 미리 생성하여 사용자가 페이지 접근 시 로딩 없이 빠르게 화면을 볼 수 있어, 내용의 변경이 없는 정적 페이지를 제공 할 때 높은 사용자 경험을 제공한다. Incremental Static Regeneration (ISR) 직역하면 증분 정적 재생..? ISR을 한 문장으로 정리하면 "런타임 중에 정적 페이지를 재생성할 수 있는 기능"을 의미 한다. 정적인 페이지를 생성하면서 revalidate를 통해 새로운 페이지를 재생성하는 기능을 갖는다는 점에서 SSG와 SSR의 하이브리드 기능처럼 볼 수도 있다. 사용방법 사용방법은..
-
Docker와 Kubernetes개발 2022. 10. 21. 17:02
본 내용은 개인학습용으로 외부 자료를 토대로 작성된 내용입니다. 용어 알아보기 용어 뜻 컨테이너 앱이 구동되는 환경까지 감싸서 실행할 수 있도록 하는 격리 기술 컨테이너 런타임 컨테이너를 다루는 도구 도커 컨테이너를 다루는 도구 중 가장 유명한 것 쿠버네티스 컨테이너 런타임을 통해 컨테이너를 오케스트레이션 하는 도구 오케스트레이션 여러 서버에 걸친 컨테이너 및 사용하는 환경 설정을 관리하는 행위 컨테이너 구동하려는 애플리케이션을 실행할 수 있는 환경까지 감싸서, 어디서든 쉽게 실행 할 수 있도록 해 주는 기술 작업 환경에 필요한 옵션을 일일히 세팅하지 않고 컨테이너에 준비해 사용자가 독립적으로 프로그램을 실행 할 수 있도록 도와준다. 컨테이너 런타임 컨테이너를 사용할 때 필요한 도구가 컨테이너 런타임이다..
-
JS - ??와 ||의 차이 (Nullish coalescing operator)개발 2022. 9. 30. 07:30
널 병합 연산자 Nullish Coalescing Operator (널 병합 연산자) 는 왼쪽 피연산자가 null 또는 undefined 일 때 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피 연산잔를 반환하는 논리 연산자이다. const foo = null ?? 'default string'; console.log(foo); // expected output: "default string" const baz = 0 ?? 42; console.log(baz); // expected output: 0 OR 논리 연산자와 무엇이 다른가? 얼핏보면 '널 병합 연산자' 와 'OR 논리 연산자' 는 비슷해보인다. 하지만 널 병합 연산자가 오른쪽 피연산자를 반환하는 조건 중 null 또는 undefined 일 ..
-
오해의 소지 없이, 단단하게 "use strict"개발 2022. 9. 6. 14:26
Human Error 코드를 작성하는 개발자에게 this 나 var 와 같이 헷갈리는 코드를 작성하는 것을 방지하기 위해 사용하는 키워드이다. "use strict" "use strict" === srict 모드는 전역 또는 함수 스코프 안에 위치를 선택하여 사용 할 수 있지만 함수 스코프 안에 사용했을 경우 오히려 전역과 다른 rule 로서 코드가 작성된다는 오류에 빠져 오히려 더 헷갈릴 수 있기 때문에 전역에 stric 모드를 설정하는 경우가 대부분이다. 요즘 개발 트렌드에서는 사실 strict 모드가 eslint와 prettier 로서 많이 보완되기 때문에 이것에 대한 인식을 잘 못할 수도 있다.
-
웹 브라우저에 URL을 입력하면 일어나는 일개발 2022. 9. 4. 21:05
URL (리소스 위치) URL은 흔히 웹 주소라고도 하며, 컴퓨터 네트워크 상에서 리소스가 어디 있는지 알려주기 위한 규약이다. URI의 서브넷이다. URI (리소스 식별자) URI는 특정 리소스를 식별하는 통합 자원 식별자(Uniform Resource Identifier)를 의미한다. 웹 기술에서 사용하는 논리적인 또는 물리적 리소스를 식별하는 고유한 문자열 시퀀스다. TCP (Transmission Control Protocol) 네트워크 전송계층 중 프로토콜에 대한 내용, 한 줄로 요약하자면 "인터넷상에서 데이터를 메세지의 형태로 보내기 위해 IP와 함께 사용하는 프로토콜" 연결형 서비스를 지원하기때문에 신뢰성을 보장하고 3-way handshaking 을 통해 연결을 설정한다. 전송 할 수 있는..
-
서비스 모니터링을 위한 new relic 살펴보기R-WMS 2022. 8. 16. 20:59
뉴렐릭은 원격 측정 데이터에 대한 분석을 도와주는 통합 데이터 플랫폼이다. 단일 플랫폼을 통해서 전체 스택을 모니터링하는 기능을 사용해 개발자가 더 나은 소프트웨어를 생산 할 수 있도록 도와준다. 주로 모니터링 스택별 모니터링 기능을 지원하고 오류와 취약점을 관리 할 수 있는 옵저버블리티 경험을 제공하며, 이러한 데이터를 가시성을 부여해 확인시켜주고 있다. 기능 1 어플리케이션 모니터링을 위한 APM 통합된 모니터링 정보 APM 전체 스택을 관찰하여 도구 간의 전환 없이 로그, 인프라, 어플리케이션, 추적, 서버리스 및 엔드포인트 유저 경험에서 연결된 정보를 전달 한다. 가시성 및 분석 분산환경에서 이슈를 감지하고 근본 원인을 발견하여 가시성 지표를 통한 모니터링을 통해 성능 최적화와 버그 트래킹이 용이..