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

"라이브러리 없이, 한 줄로, 불변하게" 들어가며특정 키를 제외한 나머지 객체를 만들고 싶을 때 어떻게 하시나요?delete를 쓰자니 원본을 뮤테이트하고, lodash.omit을 쓰자니 의존성이 생깁니다. 이 글에서는 IIFE(즉시 실행 함수 표현식) 와 Rest 구조분해 를 조합해서 외부 라이브러리 없이 깔끔하게 키를 제거하는 패턴을 소개합니다 💘 핵심 패턴const result = (({ password, __v, ...rest }) => rest)(user);딱 한 줄입니다. 분해해서 보면,const result = ( ({ password, __v, ...rest }) => rest // 1. 화살표 함수: 제거할 키를 명시적으로 구조분해)(user); ..

올해에 4월초에 꽤 큰 사건이 하나 있었다.👉 axios npm 패키지가 해킹된 사건단순 취약점이 아니라,“정상 패키지에 악성 코드가 포함된 상태로 배포”된 케이스다. 사건 요약axios maintainer 계정 탈취정상 버전처럼 보이는 패키지 배포내부에 악성 dependency 삽입npm install 하는 순간 RAT(원격 제어 악성코드) 실행👉 더 무서운 포인트는 이거다:“코드를 실행한 게 아니라, 설치만 했는데 감염됨”실제로 이 공격은 약 2~3시간 동안만 살아있었고그 사이 설치한 환경은 그대로 위험에 노출됐다 (Snyk)여기서 깨달아야 하는 포인트이건 axios 문제가 아니다.👉 npm 생태계 자체의 구조적인 문제우리는 수백 개의 dependency를 신뢰한다그 중 하나만 뚫려도 끝이다심지..

### 파트2 - Chapter 7 클로저 사용법 / 클로저 생명주기 & 가비지 컬랙션 마지막 함수 참조가 삭제되면, 변수에 대한 클로저가 삭제되고, 변수는 GC 처리됨클로저는 변수의 GC를 예기치 않게 막아 메모리 사용량을 급증시킬 위험성이 있다 !!필요하지 않은 함수 참조는 적절하게 제거해줘야 한다. (복잡한 내용. 예제를 잘 봐야 할듯)클로저는 변수를 기준으로 작동하지 스코프를 기준으로 작동하지 않는다. 현대의 많은 JS 엔진들은 명시적으로 참조되지 않는 변수를 클로저 스코프에서 제거하는 최적화 방식을 채택함다만, eval등을 사용했을 때 등 특정 상황에서는 해당 최적화가 진행될 수 X => 따라서 모든 변수가 클로저 스코프에 남아있을 수 있다.>>> 클로저 구현은 스코프 단위 O 함수가 정의된 스..

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

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

함수 파라미터에 기본값을 넣다 보면 이런 상황을 자주 만난다.function foo(value = 10) { console.log(value);}foo(); // 10foo(undefined); // 10foo(null); // null ❓“null도 값이 없다는 뜻 아닌가?”왜 undefined는 기본값으로 초기화되고, null은 그대로 들어오는 걸까? 결론부터 말하면JavaScript에서 기본값은 undefined일 때만 적용된다null은 “값이 없음”이 아니라👉 “의도적으로 비어 있는 값을 준 것” 으로 취급된다. 기본값 문법은 언제 동작할까?ES6 함수 기본값 문법은 내부적으로 이렇게 동작한다.function foo(value) { if (value === undef..

### 파트 2 - chapter 5 변수의 비밀 생명주기 변수 선언 위치에 따른 작동 방식의 차이와 사용 여부스코프 아래에 있더라도, 스코프 시작 부분에서 변수의 가시성이 확보된다 -> 호이스팅function 함수 선언문의 경우 고유 특성인 함수 호이스팅이 있다.함수 선언문으로 함수가 선언되면, 함수 이름에 해당하는 식별자가 스코프 최상단에 선언되고, 함수 참조로 해당 값이 자동 초기화 됨따라서 함수 선언문은 스코프 내 어디서든 호출 가능함수 선언문 및 var를 사용한 선언 변수의 호이스팅 -> 이름 식별자가 블록 스코프가 아니라, 가장 가까운 함수 스코프에 등록됨 (함수 스코프가 없으면 전역 스코프) 함수 표현식에서는 함수 호이스팅이 적용되지 않음var로 선언한 변수는 호이스팅도 되고 여기에 더해서 ..

### 파트 2 - chapter 4 전역 스코프 최신 JS 프로그램에서는 대부분 코드를 전역이 아닌 함수/모듈에 작성한다다만, 렉시컬 스코프를 이해하고 전역 스코프에 접근하며 사용할 줄 아는 것도 중요하다여러 파일로 분리된 JS 파일을 JS 엔진은 어떻게 실행 시점에 하나로 연결시키는가? (브라우저 기준)ES 모듈을 사용하면, 파일을 각자 하나씩 로딩함. 로딩 후 import 문으로 다른 모듈을 참조하며 이때 스코프는 공유 X 배타적으로 협력함구축 과정에 번들러가 관여하는 경우, 파일 전체가 하나로 합쳐져 브라우저및 JS엔진에 전달된다. 브라우저 및 JS 엔진은 하나의 거대한 JS 파일만 처리한다. 이 경우엔 파일 내 코드 조각끼리 참조할 때 사용할 이름 등록 등 메커니즘이 추가로 필요해진다.번들러는 ..