네트워크는 컴퓨터 간의 데이터 교환을 가능하게 하는 시스템입니다. OSI 7계층 모델은 네트워크의 작동 원리를 이해하는 데 중요한 역할

회사 내부/외부 서비스에서 Edge 브라우저에서만 비디오가 회색 화면으로 표시되고 재생되지 않는 문제를 겪었다면, 프론트엔드 코드보다 CDN 또는 서버 설정을 먼저 의심해야 할 가능성이 높다

node 공부를 하자!

satisfies 키워드는 기존 타입 정보를 유지하면서 해당 값이 특정 타입 조건을 충족하는지 확인할 때 사용됩니다.

트리 쉐이킹은 최종 번들 크기를 줄이기 위해 사용되지 않는 코드를 제거하는 최적화 방법입니다. 이 방법은 주로 모듈 시스템을 기반으로 동작하며, 사용되지 않는 데드(dead) 코드를 감지하고 번들에서 제거하여 최적화합니다.

Core Web Vitals는 구글이 웹사이트 사용자 경험을 평가하기 위해 제안한 핵심 지표입니다. 

 사용자가 웹 페이지를 요청하면 HTML 문서가 브라우저로 전송됩니다. 브라우저는 이를 파싱하면서 CSS 파일을 로드하고, CSS 내에 @font-face가 있는지를 확인합니다. 이 @font-face를 통해 브라우저는 폰트 파일의 위치와 스타일을 파악하게 됩니다.

DNS(Domain Name System) 는 도메인 주소에 대응되는 원격 호스트 IP 주소를 관리하고 질의할 수 있는 시스템 혹은 이를 이용하기 위한 프로토콜을 의미

CSS에서 dvh, svh, lvh는 뷰포트 높이를 측정하는 새로운 단위입니다. 기존 vh(viewport height)는 브라우저의 뷰포트 높이를 기준으로 설정되지만, 모바일 환경에서는 주소창이나 네비게이션 바의 유무에 따라 동적으로 변할 수 있어 정확한 높이를 계산하기 어렵다는 단점이 있었습니다. 이를 해결하기 위해 dvh, svh, lvh가 등장했습니다.

메모리 캐시는 말 그대로 메모리, 즉 RAM에 저장돼서 빠른 속도가 특징,디스크 캐시는 하드디스크나 SSD 같은 저장장치에 저장돼서, 브라우저를 껐다 켜도 남아 있는 것이 특징

<a>를 이용해 외부 링크를 연결할 때는 rel 속성을 적절히 설정하여 중요 정보가 유출되지 않도록 해야 합니다.

infer 키워드는 조건부 타입에서 특정 타입을 추론하는 데 사용됩니다. 즉, 타입을 직접 지정하는 것이 아니라 타입스크립트가 해당 타입을 유추할 수 있도록 돕는 역할을 합니다. infer는 extends를 사용하는 조건부 타입 안에서 활용되며, 특정 타입을 분해하여 사용할 수 있습니다.

 npm ci는 npm install에 비해 의존성의 버전을 엄격하게 유지

인증(Authentication)은 "사용자가 누구인지 확인하는 과정" 이고, 인가(Authorization)는 "사용자가 특정 자원에 접근할 권한이 있는지 확인하는 과정"

A 객체가 어떤 작업을 수행하기 위해 B 객체를 필요로 하는 경우에 두 객체 사이에 의존성이 존재한다고 표현

pnpm은 npm에 비해 성능과 디스크 효율성을 개선한 패키지 매니저,Yarn Berry는 Yarn의 2.0 버전 이상을 가리키며, PnP(Plug'n'Play) 와 Zero Install을 도입하여 패키지 관리 방식을 개선한 패키지 매니저

requestAnimationFrame()은 브라우저의 화면 갱신 주기에 맞춰 콜백 함수를 실행하도록 요청하는 API

정적 IP는 고정적으로 할당되어 변하지 않는 IP 주소이고, 동적 IP는 시간이 지나면서 변할 수 있는 IP 주소

불변성이란 데이터가 최초 생성된 이후 그 상태를 변경할 수 없는 성질

Content-Type은 HTTP 요청과 응답에서 전송되는 데이터의 타입을 명시하는 헤더

미들웨어 시스템 간 통신이나 서비스 연결을 중간에서 도와주는 역할

JSON WEB TOKEN의 약자로 속성 정보 (Claim)를 JSON 데이터 구조로 표현한 토큰으로서 네트워크를 통해서 서로 다른 장치끼리 안전하게 전송하기 위해 설계

JWT는 헤더, 페이로드, 시그니처로 구분

의사 요소는 CSS 선택자에 추가하는 키워드로, 특정 요소의 일부분에 스타일을 적용할 때 사용

React의 setState (또는 setName)는 "즉시" 상태를 바꾸지 않고, "다음 렌더링"을 예약한다.

사설 IP 주소만을 가지고 외부 네트워크와 통신하기 어렵습니다. 이 문제를 해결하기 위해서 라우터 혹은 공유기의 NAT(Network Address Translation) 기능을 사용

CSS 전처리기는 CSS를 더 효율적이고 체계적으로 작성할 수 있도록 도와주는 도구

주로 Git Flow, GitHub Flow, 그리고 Trunk-Based Development 를 사용

예시들

모노레포는 mono(단일) 와 repo(레포지토리) 를 합친 용어로, 여러 프로젝트 또는 패키지를 하나의 코드 저장소에 통합하여 관리하는 방식

AI 중심의 애자일 개발 방식을 한 단계 진화시킨 범용 AI 에이전트 프레임워크

평문을 암호화하고 복호화하는 경우 키를 사용할 수 있는데요. 이때, 암복호화에 사용하는 키가 동일한 경우 대칭키 암호화(Symmetric Key Cryptography) 라고 하며, 암복호화에 사용하는 키가 서로 다른 경우를 비대칭키 암호화 혹은 공개키 암호화(Asymmetric Key Cryptography) 라고 합니다.

Reset CSS와 Normalize CSS는 모두 브라우저 간의 스타일 차이를 줄이기 위해 사용되는 CSS 파일

쉽게 설명하면, 타입 단언(Type Assertion)은 컴파일러에게 특정 값이 어떤 타입인지 개발자가 더 잘 알고 있다고 알려주는 방법입니다.

운영체제는 사용자가 실행하는 프로그램이 하드웨어 자원에 직접 접근하는 것을 방지해 자원을 보호합니다.

자바스크립트에서 this는 함수가 호출되는 방식에 따라 값이 달라집니다.

CPU 스케줄링은 운영체제가 프로세스들에게 공정하고 합리적으로 CPU 자원을 배분하는 것을 의미합니다.

<link>는 외부 리소스와의 연결을 돕는 요소이며, rel 속성 값인 preconnect, preload, prefetch는 리소스 로드의 우선순위를 설정하여 로드 성능을 최적화하기 위해 사용됩니다.

쌓임 맥락(Stacking Context)은 가상의 z축을 상정하여 HTML 요소들을 3차원으로 개념화한 것입니다.

• URI, URL 그리고 URN

메모리 주소를 참조하는 차이

Server Action은 Next.js에서 제공하는 기능으로, 서버에서 실행되며 브라우저에서 호출할 수 있는 비동기 함수입니다. 이

응집도(Cohesion) 는 모듈에 포함된 내부 요소들이 연관되어 있는 정도를 나타냅니다. 결합도(Coupling) 는 의존성의 정도를 나타내며, 다른 모듈에 대해 얼마나 많은 지식을 갖고 있는지를 나타냅니다.

VS Code에서 Python 파일을 자동으로 포맷하려면: Python 포매터(권장: Black)를 가상환경에 설치하고, 워크스페이스 설정에서 포매터와 옵션을 지정한 뒤 선택한 Python 인터프리터가 그 가상환경을 가리키게 해야 함

box-sizing은 CSS에서 요소의 크기를 어떻게 계산할지를 결정하는 속성

CAP 정리는 분산 데이터베이스 시스템이 CAP 중 2개의 속성만을 제공할 수 있다는 이론

Node는 DOM을 구성하는 가장 기본적인 구성 단위 Node > element

JPEG, PNG, WebP, SVG

객체 간의 상속을 구현하는 메커니즘

다양한 파일과 모듈을 하나의 배포 가능한 번들로 묶는 역할

리액트의 동시성 모드는 여러 작업을 비동기적으로 동시에 처리하면서도 중간에 더 중요한 작업이 들어오면 우선순위를 바꿔서 그 작업을 먼저 처리하는 기능을 의미

컨텍스트 스위칭은 CPU나 코어에서 실행 중이던 프로세스나 스레드가 다른 프로세스나 스레드로 교체되는 과정

database

자료 구조

Ref()는 React의 훅 중 하나로, 컴포넌트 내에서 변경 가능한 값을 저장하고 관리

프로토콜

타입스크립트 정리

HTML의 <!DOCTYPE>은 웹 브라우저에 해당 문서가 어떤 HTML 버전을 기반으로 작성되었는지 알려주는 역할을 하는 선언문

전 세계에 분산되어 있는 서버들을 통해 사용자에게 웹 컨텐츠를 빠르고 효율적으로 제공하는 기술

event.target과 event.currentTarget은 모두 이벤트 객체의 속성이며, 각각 "이벤트가 실제로 발생한 요소" 와 "이벤트 리스너가 연결된 요소" 를 가리킵니다.

단위

애플리케이션을 지원하는 리소스 풀에 들어오는 네트워크 트래픽(들어오는 요청)을 균등하게 분산

인증 관련

호이스팅의 차이

접근제어자는 클래스 멤버의 접근 범위를 제어하는 데 사용

빌드 시점에 CSS를 미리 다 만들어 놓는 제로 런타임 CSS 방식

SOLID 원칙은 객체지향 설계 5원칙

Body와 Header의 가장 큰 차이는 정보(데이터)의 역할

개인 테스트 공부 지

null and Undefined

리액트 18 버전에서 도입된 새로운 기능, 서버에서만 렌더링되는 컴포넌트

웹에서 클라이언트와 서버 간 통신을 위한 통신 규약 (Hypertext Transfer Protocol)

웹 서버는 정적 컨텐츠(HTML, CSS, JS, 이미지 등)를 제공하는 역할, 자바 진영에서 WAS(Web Application Server) 는 서블릿 컨테이너 기능을 제공하고, 동적 컨텐츠를 생성하거나, 애플리케이션 로직을 실행하는 데 특화

준비된 부분부터 점진적으로 스트리밍해서 클라이언트에 전달하는 기술

실 동작 화면으로 상세한 설명

이벤트 전파(Event Propagation)의 두 단계 캡쳐링(Capturing Phase)과 버블링(Bubbling Phase)

react 동작 원리의 이해

webpack, rollup과 같은 번들러는 왜 필요한지에 대한 설명

IntersectionObserver 인터페이스는 대상 요소와 상위 요소, 또는 대상 요소와 최상위 문서의 뷰포트가 서로 교차하는 영역이 달라지는 경우 이를 비동기적으로 감지할 수 있는 수단을 제공합니다.

상태관리 비교