개발
-
서로 다른 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 을 통해 연결을 설정한다. 전송 할 수 있는..
-
객체 지향 프로그래밍 입문 #2개발 2022. 8. 7. 16:36
# 다형성 (Polymorhpism) - 여러(poly) 모습(morph)을 갖는 것 - 객체 지향에서는 한 객체가 여러 타입을 갖는 것 - 즉 한 객체가 여러 타입의 기능을 제공 - 타입 상속으로 다형성 구현 # 추상화 (Abstraction) - 데이터나 프로세스 등을 의미가 비슷한 개념이나 의미 있는 표현을 정의하는 과정 - 추상화를 통해 변경에 용이한 코드 작성을 유도 추상화 시도 시점 추상화는 의존 대상이 변경하는 시점에.. - 아직 존재하지 않는 기능에 대한 이른 추상화는 잘못된 추상화 가능성을 높이고, 복잡도만 증가 시킬 우려가 있다. - 실제 변경/확장이 발생할 때 추상화를 시도 한다. - 추상화를 잘하려면 구현한 이유가 무엇 때문인지 생각해야 한다. // 초기 주문 서비스 Class p..