📖 JavaScript Closure
Closure란?
클로저는 함수와 그 함수가 선언된 어휘적 환경(lexical environment)의 조합입니다. 쉽게 말해, 클로저는 함수가 선언된 위치에서의 변수를 기억하고 그 함수가 어디서 호출되더라고 그 변수를 참조할 수 있는 기능입니다.
Closure가 왜 중요한가?
클로저를 이해하면 자바스크립트의 중요한 개념인 스코프와 함수를 더 깊이 이해할 수 있습니다. 클로저는 특히 다음과 같은 상황에서 유용합니다.
- 1. 데이터 은닉: 외부에서 직접 접근할 수 없는 변수를 유지할 수 있습니다.
- 2. 모듈 패턴: 특정 기능을 캡슐화하고, 외부에 노출하고 싶지 않은 부분을 숨길 수 있습니다.
- 3. 콜백 함수: 클로저를 사용하면 콜백 함수 내에서 외부 변수에 접근할 수 있습니다.
클로저의 기본 예제
function outerFunction() {
let outerVariable = 'I am from outer function';
function innerFunction() {
console.log(outerVariable);
}
return innerFunction;
}
let myFunction = outerFunction();
myFunction(); // I am from outer function위 예제에서 innerFunction은 outerFunction 내부에 선언되었기 때문에 outerFunction의 스코프에 접근할 수 있습니다. outerFunction이 실행된 후에도 outerVariable에 접근할 수 있게 됩니다.
클로저를 활용한 실용적 예제
- 1. 데이터 은닉
function createCounter() {
let count = 0;
return {
increment: function() {
count++;
return count;
},
decrement: function() {
count--;
return count;
},
getCount: function() {
return count;
}
};
}
const counter = createCounter();
console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
console.log(counter.decrement()); // 1
console.log(counter.getCount()); // 1- 2. 콜백 함수
function createGreeting(greeting) {
return function(name) {
console.log(greeting + ', ' + name);
}
}
const sayHello = createGreeting('Hello');
sayHello('Alice'); // Hello, Alice
sayHello('Bob'); // Hello, Bob
const sayHi = createGreeting('Hi');
sayHi('Alice'); // Hi, Alice
sayHi('Bob'); // Hi, Bob📖 기술면접 질문
9. lazy-loading에 대해서 알고 계신가요?
- 의도: 성능 최적화 능력을 가지고 있는지 확인
- 답안)
lazy load는 이름에서 알 수 있듯이 게으른 로딩입니다. 쉬게 두었다가 필요할 때만 쓰는 개념입니다. 예시로 말씀드리자면, 한 페이지에 이미지 카드가 길게 나열되어 있습니다. 심지어는 보이지 않는 부분까지 이미지가 있습니다. 이렇게 되면 화면의 모든 이미지를 다운 받아와서 보여주느라 성능이 저하될 것 입니다. 이럴 때 화면에 보이는 부분만 이미지를 먼저 로딩할 수 있게 해주는 게 lazy loading 입니다.
저 같은 경우에는 이 예시를 구현하기 위해 html의 data- 속성과 Intersection Observer API를 통해 해당 태그가 화면에 보여졌을 경우에 data- 속성에 넣어두었던 이미지의 src를 활성화 시키는 것으로 lazy loading을 활용했던 경험이 있습니다.
10. CORS 오류가 나는 이유에 대해 알고 계신가요?
- 의도: CORS를 이해하고, 해결 방법 또한 알고 있는지 확인
- 답안)
CORS 오류는 웹 브라우저가 보안상의 이유로 한 도메인에서 실행 중인 웹 어플리케이션이 다른 도메인에 있는 자원에 접근하려 할 때 발생합니다. 웹 브라우저는 기본적으로 스크립트가 자신의 출처에서만 리소스를 요청하도록 제한하는데, 이를 SOP (Same-Origin Policy)라고 합니다. CORS는 이러한 제한을 완화하여 특정 조건 하에서 다른 출처의 리소스에 접근할 수 있도록 합니다.
주요 원인 4가지
1.서버 설정 문제 : 서버가Access-Control-Allow-Origin헤더를 포함하지 않음
2.비허용 도메인 : 요청하는 도메인이 서버의 허용된 도메인 목록에 포함되지 않음
3.HTTP 메서드 문제 : 서버가 특정 HTTP 메서드(GET, POST, PUT 등)를 허용하지 않음
4.커스텀 헤더 문제 : 요청에 커스텀 헤더가 포함되어 있지만 서버가 이를 허용하지 않음이에 대한 해결방법으로는 서버에서
Access-Control-Allow-Origin헤더를 설정하여 요청을 허용하거나, 필요한 경우Access-Control-Allow-Methods및Access-Control-Allow-Headers헤더를 추가하는 방법이 있습니다.
11. favicon이 무엇인지 알고 계신가요?
-
의도: favicon은 실제로 배포하고, 운영해본 서비스가 있다면 알 수 밖에 없는 디테일만 개념, 이러한 경험이 있는지 간접적으로 확인해보는 질문
-
답안)
우리가 사용하는 웹 브라우저의 탭을 보면 타이틀이 있고, 그 앞에 조그마한 아이콘이 있는데 그게 파비콘입니다. 해당 웹 사이트를 요약하여 나타내는 브랜드 이미지이기 때문에 중요한 역할을 하고, 요즘은 Next.js의 app router에서 이런 메타데이터 설정을 쉽게 할 수 있게 도와주기 때문에 app 폴더의 루트에 favicon.ico 파일을 넣어주기만 하면 손쉽게 설정할 수 있습니다.
12. babel과 같은 트랜스파일러의 역할을 설명해주세요.
-
의도: 프론트엔드 개발 환경을 구축하는 방법에 대해 알고 있는지, CRA나 Vite 같은 스캐폴딩 도구의 도움 없이 맨땅에서부터 직접 구현한 경험이 있는지 확인
-
답안)
babel은 JavaScript의 트랜스파일러로, 최신 JavaScript 문법과 기능을 구형 브라우저나 환경에서도 호환될 수 있도록 변환하는 도구입니다. 주요 역할로는 최신 문법 변환, 실험적 기능 지원, 폴리필 추가, 코드 최적화가 있는데 차례대로 설명드리겠습니다.
최신 문법 변환은 ES6 이상 문법을 ES5 문법으로 변환하여 구형 브라우저에서도 최신 JavaScript 기능을 사용할 수 있게 해줍니다.
실험적 기능 지원이라 함은, 아직 표준화되지 않은 최신 기능이나 문법을 사용할 수 있도록 지원해줍니다.
폴리필 추가란, 최신 기능을 지원하지 않는 환경을 위해 필요한 폴리필을 추가하여 기능적 호환성을 보장합니다.
마지막으로 불필요한 코드를 제거하거나 압축하여 성능을 향상시킵니다.
