프론트엔드 공부 블로그 프론트엔드 공부 블로그

### 파트2 - Chapter 7 클로저 사용법 클로저또한 최소 노출의 원칙 (POLE)을 기반으로 한다.클로저를 사용하면, 변수를 외부 스코프에 두는 대신에 더 제한된 스코프로 캡슐화가 가능하다.이를 통해서 함수 내부에서 함수 밖 해당 변수에 계속 접근이 가능하여 변수를 더 넓은 범위에서 사용 가능클로저를 통해 참조된 스코프 변수를 기억하기 때문클로저는 함수 안에서만 일어나는 함수의 동작. 함수를 다루지 않으면, 클로저는 적용 X객체, 클래스는 클로저를 가질 수 없다. 함수만 가능 화살표 함수도 클로저가 있다.작은 화살표 함수를 사용하더라도, 클로저가 생성될 수 있다.클로저는 단순 함수의 코드에 의해 정의되는 단일 렉시컬 정의가 아니라, 함수 인스턴스에 따라 다르게 생성된다.인스턴스가 생성될 때 마다..

웹 개발을 하다 보면 이런 경험을 한 번쯤 한다.로컬에서는 잘 되던 코드가 서버에 올리니 동작하지 않는다특정 Web API가 undefined로 나온다콘솔에 보안 관련 경고가 나타난다예를 들어 Clipboard API를 사용한다고 해보자.navigator.clipboard.writeText("hello");이 코드는 어떤 환경에서는 정상적으로 동작하지만 HTTP 환경에서는 아예 실행되지 않는 경우가 있다. 그 이유는 브라우저가 현재 페이지가 “안전한 환경인지” 판단하기 때문이다. 그리고 이 상태를 확인할 수 있는 API가 바로 window.isSecureContext이다. Secure Context란 무엇인가Secure Context는 브라우저가 정의한 개념으로, 신뢰할 수 있는 보안 환경에서 실행되는 ..

### 파트2 - Chapter 6 스코프 노출 제한 함수의 전용 스코프는 OK, 그렇다면 블록은 왜 스코프가 필요한가 ??정보 보호 분야에서는 최소 권한의 원칙 (POLP)가 있다. 이를 약간 변형한 최소 노출의 원칙 (POLE)이 해당 내용에 적용될 수 있다.최소 권한, 접근 최소, 노출 최소가 필요하다는 원칙이다. (방어적인 아키텍처 설계)한 구성 요소의 장애가 나머지 시스템에 미치는 영향을 최소화 -> 시스템 전체 보안의 강화POLE를 따를 때 가장 최소화 하고 싶은 것은 ?? 바로 스코프마다 등록된 변수의 노출변수가 노출되면 => 이름 충돌의 위험, 예기치 않은 작동, 의도하지 않은 종속성의 문제가 발생할 수 있다. 따라서, 가능한 한 가장 낮은 스코프에 변수/함수 선언을 숨기는 것이 중요하다...

프로젝트를 하다 보면 때때로 이런 상황이 생긴다.공통 유틸 저장소를 여러 프로젝트에서 같이 써야 한다외부 라이브러리를 수정 가능한 상태로 포함하고 싶다특정 커밋 버전을 정확히 고정하고 싶다이럴 때 사용하는 기능이 바로 Git Submodule이다. Git Submodule이란?Git Submodule은 다른 Git 저장소를 현재 저장소 안에 포함시키는 기능이다.단순히 코드를 복사해 넣는 것이 아니라별도의 Git 저장소로 관리되며특정 커밋을 참조하고상위 저장소는 “그 커밋을 가리키는 포인터”만 저장한다즉 “저장소 안에 또 다른 저장소를 연결해두는 방식” 이다. 언제 사용하면 좋을까?Submodule은 이런 경우에 적합하다.공통 라이브러리를 여러 프로젝트에서 공유할 때외부 오픈소스를 직접 수정해야 할 때라이..

WebRTC, WebSocket, Server-Sent Events 가 필요하다.유튜브 라이브, 실시간 채팅, 알림 스트림처럼 요즘 웹 서비스에서 실시간 기능은 너무나 자연스럽다. 하지만 막상 구현하려고 하면 이런 질문이 생긴다.새로고침 없이 어떻게 바로바로 반영될까?HTTP만으로 가능한 걸까?영상과 채팅은 같은 기술을 쓸까?이 글에서는 MDN 기준으로 웹에서 실시간 기능을 구현할 때 가장 많이 쓰이는 3가지 핵심 기술을 개념 + 간단한 코드 예제까지 함께 정리해본다. 웹 실시간 기술, 크게 보면 세 가지웹에서 “실시간”을 담당하는 대표적인 기술은 다음과 같다.WebRTC — 영상·음성 같은 실시간 미디어 통신WebSocket — 양방향 실시간 메시지 통신Server-Sent Events(SSE) — 서..

웹을 개발하다 보면 이런 걸 본 적이 있을 것이다.□□□□ 같은 네모 박스� (검은 다이아몬드 안에 물음표)이상한 한글 깨짐 문자열 (안녕)이 현상들은 모두 문자 인코딩 문제에서 시작된다. 이 글에서는 자주 등장하는 세 가지 용어를 찾아내서, 정리하였다.Tofu모지바케(文字化け)대체문자 (Replacement Character) Tofu — 네모 박스 문자👀 이게 뭐냐면...□□□이렇게 보이는 네모 박스. 이걸 흔히 Tofu(두부)라고 부른다.하얀 네모가 두부처럼 생겼기 때문이다. 📌 왜 생길까?폰트에 해당 글리프(glyph)가 없기 때문이다. 예를 들어...시스템에 이모지 폰트가 없음특정 한자/특수문자를 지원하지 않는 폰트 사용오래된 OS 환경즉, 문자는 유효하지만, 그릴 수 있는 폰트가 없..

먼 옛날....웹을 처음 접했을 때를 떠올려보면, 사이트에 들어가자마자 수많은 창이 “툭툭” 튀어나오던 시절이 있었다.window.open('https://example.com', '_blank', 'width=500,height=500');당시엔 이게 꽤 자연스러운 UX였다. 공지사항, 광고, 로그인, 이벤트… 뭐든 팝업으로 해결했다. 그런데 지금은?“팝업? 거의 안 쓰는데요?”왜 이렇게 됐을까. 1. 사용자 경험(UX)을 완전히 망가뜨렸기 때문팝업은 기본적으로 사용자의 흐름을 강제로 끊는다.페이지 진입 → 갑자기 새 창 등장뒤로가기 → 안 됨 (새 창이라서)모바일 → 더 최악특히 광고 팝업은 거의 테러 수준이었다.한 페이지에 팝업 3~5개 뜨는 사이트도 있었다이 시점에서 브라우저 벤더들은 판단한다.“..

HTML Form 작업하다 보면 이런 고민을 하게 된다.“이 입력값은 수정은 못 하게 하고 싶은데,서버에는 보내야 할까…?”이때 항상 등장하는 선택지는 두 개이다.readonlydisabled겉보기엔 비슷하지만, 동작은 완전히 다르다. 한 줄 요약 🧠readonly는 ‘읽기 전용’이고,disabled는 ‘폼에서 제외’다. 기본 예제부터 보자화면에서는 둘 다 수정이 안 된다.하지만 폼 제출 시 결과는 다르다. 가장 중요한 차이점: 폼 전송 여부 🚨readonly수정 ❌포커스 가능 ✅폼 전송됨 ✅// submit 시{ username: "char"} disabled수정 ❌포커스 ❌폼 전송 안 됨 ❌// submit 시{ // role 없음}➡️ 서버에서는 존재하지 않는 필드로 취급된다. 접근성(A11..