Contents
- 동적 언어 VS 정적 언어
- 블로킹 언어 VS 논블로킹 언어
- 번들을 사용하는 이유
- 에러 바운더리
- 이벤트 버블링
- LE VS Outer
- 실행 컨텍스트 && 호이스팅
- 스코프 && 스코프 체인
동적 언어 VS 정적 언어
동적 언어
의미: 런타임 시 동적으로 타입이 결정되어 작동하는 언어
예시: JavaScript, Ruby, Python의 언어
장점
- 코드 작성이 간편하고 유연하여 빠르게 작성이 가능하다.
- 타입을 매번 지정해주지 않기 떄문에 자동적으로 변수의 타입을 판단하여 지정해준다.
단점
- 런타임 시에만 타입 오류를 확인하기 떄문에 에러를 발견하기 힘들다.
- 실행 도중에 변수에 예상치 못한 자료형이 들어오면 타입 에러가 발생할 수 있다.
정적 언어
의미: 컴파일시 변수 타입이 결정되는 언어
예시: C, C#, C++, Java의 언어
장점
- 타입 에러로 인한 문제점을 초기에 발견할 수 있어 런타임 오류를 방지하며 안정성이 높다.
- 컴파일 시에 미리 타입을 결정하기에 실행 속도가 빠르다.
- 타입이 지정되어 있기에 가독성이 좋으며 유지보수에 유리하다.
단점
- 코드를 작성할때마다 타입을 지정해줘야 해서 작성시간이 오래 걸린다.
블로킹 언어 VS 논블로킹 언어
블로킹 언어 [동기적 언어]
의미: 함수 호출이 완료될 때까지 대기하며, 다른 작업을 진행하지 않는 언어
예시: 간단한 스크립팅, 일반적인 웹 애플리케이션 등
언어: Java, C, Python의 일부 라이브러리 등
장점: 단순하고 직관적인 코드 작성이 가능하며, 동기적 플로우로 인한 디버깅이 쉽다.
단점: I/O 작업이 완료될 때까지 대기하므로, 효율성이 떨어질 수 있다.
논블로킹 언어 [비동기적 언어]
의미: 함수 호출이 완료되지 않아도 다른 작업을 계속 진행하는 언어입니다.
언어: JavaScript (Node.js), Go, Kotlin의 일부 라이브러리
예시: 대규모 및 실시간 애플리케이션, 이벤트 기반 서버 등
장점: 다중 작업을 동시에 처리할 수 있어 성능이 향상됩니다. 비동기적 처리가 가능하므로 대규모 시스템에 적합합니다.
단점: 코드가 복잡해질 수 있고, 비동기적인 특성으로 인해 디버깅이 어려울 수 있다.
번들을 사용하는 이유
번들
의미: 여러 소스 코드 및 리소스 파일을 하나로 묶어주는 도구 또는 과정
사용 이유: 성능 햐상, 로딩시간 단축, 모듈화 및 의존성 관리
예시: JavaScript의 Webpack, Vite, Parcel, Rollup
과정
- 파일 수집: 프로젝트의 모든 파일을 수집합니다.
- 의존성 해결: 모듈 간의 의존성을 해결하고 필요한 모듈을 찾아서 가져옵니다.
- 번들 생성: 수집한 파일 및 의존성을 하나의 번들 파일로 묶습니다.
- 압축: 번들된 파일을 압축하여 용량을 최소화합니다.
- 생성된 번들 사용: 웹 페이지에서 생성된 번들을 사용하여 애플리케이션을 로딩합니다.
에러 경계[에러 바운더리]
의미: 하위 컴포넌트 트리의 어디든 자바스크립트 에러를 기록하며 깨진 컴포넌트 트리 대신 폴백 UI를 보여주는 React 컴포넌트
발생지: 프로덕션 환경, 개발환경[디버깅을 돕기 위하여 개발자 도구에 발생
예외
- 이벤트 핸들러
- 비동기적 코드 (예: setTimeout 혹은 requestAnimationFrame 콜백)
- 서버 사이드 렌더링
- 자식에서가 아닌 에러 경계 자체에서 발생하는 에러
이벤트 버블링
의미: 한 요소에 이벤트가 발생되면, 그 요소의 부모 요소의 이벤트도 같이 발생되는 이벤트 전파
예시: React의 Props 요소
LE VS Outer
LE [Lexical environment]
의미: 변수나 함수가 선언될 때, 해당 함수의 렉시컬 스코프와 식별자에 대한 정보가 저장되는 환경
요소: 환경 레코드와 Outer
장점: 함수 선언시의 스코프를 기억하며 함수 실행 시 변수를 찾을수 있다.
단점: 사용패턴에 따라 적합성이 달라진다, 일부 상황에서는 메모리 사용이 늘어날 수 있다.
Outer[ outerEnvironmentReference ]
의미: 함수가 선언될 때의 렉시컬 환경과 그 함수가 실제로 호출될 때의 렉시컬 환경 간의 연결
요소: JavaScirpt의 Closure
장점: 외부 스코프의 변수에 접근 가능.함수의 실행 컨텍스트를 기억하여 비동기 작업에 유용하다.
단점: 메모리 누수의 위험이 있다, 과도한 사용은 성능에 영향을 미칠 수 있음.
실행 컨텍스트&& 호이스팅
실행 컨텍스트
의미: 실행할 코드에 제공할 환경 정보들을 모아놓은 객체
사용처: 변수 및 함수 스코프 결정, this 값 결정, 코드 실행 순서 관리
호이스팅
의미: 변수 및 함수 선언이 스코프의 최상단으로 끌어올려지는 현상
사용차: 변수 및 함수 선언의 끌어올림, 코드 가독성 향상
실행 컨텍스트와 호이스팅의 관계
- 실행 컨텍스트가 생성될 때 변수 및 함수 선언은 호이스팅에 의해 최상단으로 끌어올려진다.
- 변수와 함수는 선언 전에 사용할 수 있게 되며, 코드 실행 순서와 스코프를 관리하는 데 도움이 된다
스코프 && 스코프 체인
스코프
의미: 변수에 접근할 수 있는 범위
요소: 런타임에 따라 다르다. Global(전역) 과 Local(지역)
사용처: 변수 및 함수의 가시성 결정, 식별자 충돌 방지, 코드의 모듈화[재사용성]
스코프 체인
의미: 스코프가 서로 계층적으로 연결된 구조. 현재 스코프에서 식별자를 찾지 못하면 상위 스코프로 이동하여 검색한다.
사용처: 식별자 검색 순서 결정[현재 스코프 없으면 상위 스코프], 변수 및 함수의 상속