Frontend/개발 관련 지식2026. 4. 12. 03:17웹 보안 톺아보기 (feat. CORS, XSS, CSRF)

1. 동일 출처 정책 (Same-Origin Policy)브라우저에는 기본적으로 동일 출처 정책(Same-Origin Policy) 이라는 보안 규칙이 내장되어 있다.https://my-app.com에서 실행 중인 스크립트가 https://api.other.com에 함부로 요청을 보내지 못하게 막는 것이다.출처(Origin)는 아래 3가지가 모두 같아야 동일 출처로 인정한다. https://my-app.com:443/page프로토콜: https호스트: my-app.com포트: 443→ 셋 중 하나라도 다르면 다른 출처(Cross-Origin)!이 정책이 없다면 어떤 사이트든 내 은행 API에 요청을 보낼 수 있게 된다. 웹 보안의 기본이다.,2. CORS (Cross-Origin Resourc..

Frontend/개발 관련 지식2026. 2. 21. 17:26오랜만에 네트워크 공부

OSI 7계층.. 물대내전세표응..? 학부때 공부 했었는데 기억이 안나서 정리해본다 =) OSI 7 Layer ?네트워크 세계의 표준 지도인 OSI 7계층(OSI 7 Layer)은 서로 다른 컴퓨터가 데이터를 주고받을 때 혼란이 없도록 국제표준화기구(ISO)에서 정의한 통신 모델이다. 데이터가 송신 측에서 수신 측으로 전달될 때 총 7개의 정거장을 거치게 되며, 각 계층은 독립적인 역할을 수행한다 1. 하위 계층 (Data Transport Group)데이터를 물리적으로 전달하고 경로를 찾는 데 집중하는 계층이다.L1. 물리 계층 (Physical Layer) 핵심: "데이터의 물리적 전송"역할: 상위 계층에서 내려온 비트(0, 1) 데이터를 전기적, 광학적 신호로 변환하여 물리적인 매체(케이블 등)를 ..

Javascript/Javascript 지식2026. 2. 17. 16:31브라우저 렌더링과 비동기 톺아보기

1. 브라우저의 화면 그리기 (CRP: Critical Rendering Path)브라우저가 HTML 파일을 받아서 화면에 픽셀을 뿌리기까지의 과정DOM/CSSOM 생성: HTML/CSS를 읽어 브라우저가 이해하는 트리 구조로 변환.Render Tree: 화면에 '진짜 보일' 것들만 골라낸 트리.Layout(Reflow): 각 요소의 위치와 크기 계산.Paint(Repaint): 실제 픽셀을 색칠하는 과정.Composite: 나누어진 레이어들을 합쳐 최종 화면 완성. Repaint & Reflow & Composite1. Reflow (Layout) 브라우저가 요소의 기하학적 구조(위치와 크기)를 계산하는 단계. 가장 비용이 많이 드는 '비싼' 작업!발생 조건: 요소의 크기가 변하거나, 위치가 바뀌거나,..

Javascript/Javascript 지식2026. 2. 17. 16:04Promise에 대한 오해.., await/async 좀 더 알아보기

Promise 자체는 비동기가 아니다 !!Promise: "미래의 결과를 약속하는 객체"Promise는 그 이름처럼 비동기 작업의 최종 결과(성공 또는 실패)를 나타내는 객체이다.동기적 실행: new Promise((resolve) => { ... }) 내부의 코드는 즉시(Sync) 실행된다.비동기적 처리: .then()이나 .catch()에 등록된 콜백은 마이크로태스크 큐(Microtask Queue)로 간다많은 사람이 new Promise를 쓰면 그 안의 코드들이 자동으로 비동기 어딘가로 갈 거라고 생각하지만, 그렇지 않다Executor(실행자): new Promise((resolve, reject) => { ... })에서 이 괄호 안의 코드는 즉시 실행!비동기인 부분: 오직 resolve()나 r..

Javascript/Javascript 지식2026. 2. 16. 01:26Javascript 프로토타입 (feat.일급객체)

일급 객체(First-class Object)란?컴퓨터 과학에서 일급 객체란 다른 객체들에 적용 가능한 연산을 모두 지원하는 객체를 의미한다고 한다. 쉽게 말해, "어떠한 제한도 없이 모든 권리를 누리는 시민"과 같음!자바스크립트에서 함수는 이 권리를 완벽하게 누린다. 보통의 프로그래밍 언어에서 함수는 동작일 뿐이지만, 자바스크립트에서는 데이터(값) 그 자체로 취급된다.일급 객체의 3대 특징1. 변수나 데이터 구조에 할당할 수 있다.함수를 이름 없이(익명 함수) 변수에 대입할 수 있다. 이는 함수가 숫자 10이나 문자열 "Hello"와 같은 레벨의 '값'임을 증명한다const sayHello = function() { console.log("안녕!");}; 2. 다른 함수의 인자(Argument)로 전..

Javascript/Javascript 지식2026. 2. 13. 00:21Javscript 엔진 톺아보기 (feat. v8, 파이프라인, 클로져 등등..)

1. 자바스크립트의 심장: V8 엔진 파이프라인구글이 만든 고성능 JS 엔진으로, JIT(Just-In-Time) 컴파일 방식을 사용한다!JIT 컴파일러 = V8의 최적화 컴파일러?JIT(Just-In-Time)은 특정 소프트웨어의 이름이 아니라 "코드를 실행하는 바로 그 시점에 컴파일을 수행한다"는 컴파일 전략(방식)을 뜻하는 일반 명사다.하지만 자바스크립트 맥락에서 질문한다면, "V8 엔진이 JIT 컴파일 방식을 사용하며, 그중 최적화를 담당하는 녀석이 터보팬(TurboFan)이다"라고 이해하면 완벽하다.⚙️ V8에서의 JIT 구성V8은 성능을 극대화하기 위해 두 종류의 컴파일러를 섞어서 쓰는 '멀티 스테이지 JIT' 구조를 가진다.Ignition (인터프리터): 소스코드를 바이트코드로 빠르게 변환해..

image