프론트엔드 아키텍처 패턴
·
기술면접
- 애플리케이션의 전체적인 구조와 구성 요소 간의 관계를 정의하는 설계 방식입니다.- 애플리케이션의 유지보수성, 확장성을 높이는 데 중요한 역할을 합니다.  아키텍처에서 초기 설계를 신경 쓰지 않으면, 시간이 지날수록 새로운 기능을 추가하기 어려워집니다. 핵심 원칙관심사의 분리 : UI, 비즈니스 로직, 상태 관리 등을 명확히 분리합니다.모듈성 : 애플리케이션을 독립적이고 재사용 가능한 모듈로 구성합니다.확장성 : 새로운 기능을 쉽게 추가할 수 있는 구조를 만듭니다.성능 최적화 : 초기 로딩 시간, 렌더링 성능 등을 고려한 설계를 합니다.테스트 용이성 : 단위 테스트, 통합 테스트 등을 쉽게 할 수 있는 구조를 만듭니다.상태 관리 : 애플리케이션의 상태를 효과적으로 관리할 수 있는 전략을 수립합니다.모놀..
스코프(Scope)
·
기술면접
스코프(Scope)란?MDN에서 정의하는 스코프스코프는 컨텍스트 내에서 값과 표현식이 "표현"되거나 참조 될 수 있는 현재 실행 컨텍스트(Execute Context)를 의미한다.만약 변수 또는 표현식이 "해당 스코프"내에 없으면 사용할 수 없다. 스코프는 또한 계층적인 구조를 가지며, 하위 스코프는 상위 스코프에 접근할 수 있지만 그 반대는 불가하다. 🌿 스코프의 기본 개념- 변수나 함수의 접근 가능한 범위를 의미한다.- 코드의 구조를 이해하는 데 중요한 역할을 하며, 변수의 생명 주기와 유효성을 결정한다.- 모든 변수와 함수는 선언 위치에 의해 스코프를 갖게 된다.// 전역 스코프let globalVar = "I'm global!";function outerFunction() { // 지역 ..
클로저(Closure)
·
기술면접
자바스크립트 복습을 하던 중 클로저가 아직 헷갈려 다시 공부하며 정리해 보고자 한다.클로저를 공부하기 전 스코프에 대한 개념 정리 및 이해가 필요하다. 클로저(Closure)란?JS에서 중요한 개념이지만, JS 고유의 개념이 아닌 함수형 프로그래밍 언어에서도 사용되는 특성이다.MDN에서 정의하는 클로저 클로저란 함수와 함수가 선언된 어휘적 환경 (lexical environment)의 조합이다.즉, 클로저는 내부 함수에서 외부 함수의 범위에 대한 접근을 제공. JavaScript에서 클로저는 함수가 생성될 때마다 생성 🌿 클로저의 기본 개념- 함수와 그 함수가 선언된 렉시컬 환경의 조합으로, 내부 함수가 외부 함수의 변수에 접근할 수 있게 해 준다.- 함수가 자신의 외부 스코프에 있는 변수에 접근할 수..
호이스팅(Hoisting)과 TDZ
·
기술면접
호이스팅(Hoisting) 이란?변수와 함수 선언이 코드의 상단으로 끌어올려진 것처럼 동작하는 JS 고유의 특징이는 자바스크립트 엔진이 코드를 실행하기 전에 변수와 함수 선언을 메모리에 미리 저장하는 방식 때문에 발생한다.호이스팅 대상변수 선언(변수 호이스팅)과 함수 선언문(함수 호이스팅)🌿 변수 호이스팅변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 JS 고유의 특징console.log(name); // undefinedvar name = 'hjlee';console.log(name); // hjleevar로 선언된 변수는 선언만 호이스팅되고, 초기화는 호이스팅되지 않아 처음 호출 시 undefined 출력let과 const로 선언된 변수는 호이스팅되지만, TDZ에 영향을 받아 초기화되기 ..