기초지식

이 글은 React 개발 환경을 구축하면서 배우는 Webpack 기초(https://velog.io/@jeff0720/React-개발-환경을-구축하면서-배우는-Webpack-기초) )를 따라하면서 적은 글입니다. Webpack의 개념 1CNeQyaChrTh0H3ovOd9Dgg.png 우선 Webpack에 대해

어떠한 사이트를 SNS로 공유 혹은 URL을 복사하여 전송할 때, 해당 사이트를 들어가기 전, 최적화된 데이터를 보여줄 수 있도록 하는 HTML 메타태그이다.op:title 컨텐츠의 타이틀op:url 웹 페이지의 urlog:type 웹 페이지의 타입 (blog, web

위키피디아에서 guard code를 아래와 같이 설명한다.💡 Regardless of which programming language is used, guard code or a guard clause is a check of integrity precondition

Event Loop의 용어나 동작 원리 그리고 requestAnimationFrame에 대해 어설프게 알고 있어 정리하고자 합니다.이름에서 알 수 있듯이, JS가 처리해야 하는 task가 있는지 끊임없이 체크하고 실행시키는 Loop입니다JS는 Single Thread입

브라우저의 렌더링 과정을 간략히 하면 아래와 같다.스타일 계산 ➡️ layout(reflow) ➡️ 레이어트리 갱신 ➡️ paint(repaint) ➡️ composite이 과정 중 마지막인 Composite 과정에 대해 알아보고자 한다.레이어들의 합성(composit

현재 페이지에서 사용할 리소스(resource)를 우선순위를 높게하여 빠르게 가져오게 한다. 주로 웹 폰트와 같은 빠르게 로드(load)되어야하는 곳에서 사용한다.as 속성을 사용하여 브라우저에게 해당 리소스의 유형을 알려줘야 한다. 올바른 유형이 아닐 경우 브라우저는

`` 현재 문서와 외부 리소스와의 관계를 명시하는 태그이다. 이는 특히 스타일 시트와 연결할 때 많이 사용된다. Attributes as `태그의 rel="preload" 혹은 rel="prefetch"`일 경우에만 사용하고 컨텐츠 유형을 나타낸다. 몇가지 옵션들을

웹에서 사용자 경험(UX)를 늘리기 위한 노력의 일환으로 웹 폰트를 사용한다. 웹 폰트를 신중하게 사용하지 않으면 안 좋은 사용자 경험을 준다. 출처: 웹 폰트 사용과 최적화의 최근 동향 위 내용은 웹 폰트의 잘못된 사용을 단적으로 보여주는 예이다. 느린 웹 폰트의

script 태그의 defer, async 속성에 대해 정리해보고자 한다.브라우저의 렌더링은 싱글 쓰레드(Single Thread)로 작동하고, 쓰레드는 렌더링과 스크립트 태그 실행 두가지 일을 모두 수행한다. 그래서 HTML문서를 렌더링하는 과정 중, 스크립트 태그를

정의 확장에는 열려있고 변화에는 닫혀있다는 뜻. 다시 말하면, 변경사항에 대해 기존 코드는 변경하지 않고(Closed) 기능을 추가(Open)하는 것을 의미한다. 직접적으로 두 클래스 간에 직접적으로 의존하게 되면 기존 코드에 변경이 생길 수 밖에 없다. 구현체에

웹 캐시(Web-cache)는 웹에서 사용하는 캐시를 뜻한다. 캐시가 뭘까?캐시란?데이터나 값을 미리 복사해두어 사용하는 장소를 뜻한다. 어떤 값을 다시 계산하는 시간을 줄이기 위해 캐시를 사용한다. - https://ko.wikipedia.org/wiki/캐

HTTP와 HTTPS의 차이점은 무엇인지 확인해보고자 한다.HTTP는 HyperText Transfer Protocol의 약자다. 해석하자면 HyperText를 전송하는 규약을 뜻한다. 즉, 서로 다른 시스템 간에 데이터를 주고받게 해주는 프로토콜이다. 하지만 HTTP

하나의 클래스는 하나의 책임만 가져야 한다. 로버트 마틴이 얘기한 Single Responsibility Principle(SRP)이다. SOLID원칙 중 S에 해당하는 원칙으로 개체지향원칙의 중요 원칙 중 하나이다. 의미 단일 책임이란 것은 하나의 클래스가 변경되

어떤 객체에서 다른 클래스를 의존하고자 할 때 구상 클래스에 의존하지 말고 인터페이스와 같이 추상화 된 것에 의존하라는 법칙이다. DIP에서 의존성은 객체간에 의존성을 말한다. 이를 역전한다는 것의 의미는 구상클래스에 의존하는 부분을 추상화한 클래스나 인터페이스로 의존

State Machine with Generator