본문 바로가기

엘리스 AI 트랙 4기90

[3주차] 자바스크립트 엔진과 Hoisting 1월 29일 자 학습 내용 정리입니다. ✅ 자바스크립트 엔진 자바스크립트 엔진은 자바스크립트 코드를 읽어 실행하는 프로그램이다. 작성한 자바스크립트 코드는 자바스크립트 엔진을 통해 파싱되고 실행된다. 자바스크립트 엔진은 코드를 실행하기 전 실행 컨텍스트를 생성한다. 실행 컨텍스트는 두 단계를 통해 생성되는데 바로 생성 단계와 실행 단계이다. 생성 단계에서는 엔진이 변수 선언을 읽고 실행 단계에서는 엔진이 변수 값을 할당한다. ✔️ 생성 단계 자바스크립트 엔진은 생성 단계에서 함수 선언문, 함수 표현식, 변수 등을 읽어 실행 컨텍스트에 저장한다. 함수 선언문의 경우 함수 명과 함수 전체가 저장되지만 함수 선언문 외의 변수의 경우 값이 저장되지는 않고 실행 컨텍스트의 렉시컬 환경을 구성한다. 함수의 렉시컬 .. 2022. 1. 29.
[Frontend] 모듈 번들러와 트랜스파일러 취준생이라면 알면 좋을 프론트엔드 관련 지식들 자료를 보고 정리한 내용입니다. ✅ 모듈 번들러 모듈이란 프로그래밍 관점에서 특정 기능을 갖는 작은 코드 단위를 의미한다. 현대의 프론트엔드 개발은 모듈 단위로 파일을 엮어서 개발하는 방식이다. 다르게 말하면 모듈은 서로 의존성을 가지고 있다는 것이다. 이러한 점에서 다음과 같은 문제들이 생긴다. 모듈들의 순서를 어떻게 유지하고 처리할 것인지 모듈이 많아질 수록 HTTP 요청도 늘어나는데 이로 인한 오버헤드를 어떻게 처리할 것인지 같은 이름의 모듈이 존재할 경우 어떻게 처리할 것인지 ES6+의 코드들을 어떻게 처리할 것인지 위 문제들을 해결하기 위해 등장한 것이 모듈 번들러이다. 모듈 번들러(Module Bundler)는 웹 애플리케이션을 동작시키기 위한 서.. 2022. 1. 28.
[3주차] this와 Rest, Spread 연산자 1월 28일 자 학습 내용 정리입니다. ✅ this가 가리키는 것 ✔️ Dynamic binding 자바스크립트에서 함수가 호출되는 상황은 4가지로 나눌 수 있다. 함수 호출 : 함수를 직접 호출. 메서드 호출 : 객체의 메서드를 호출. 생성자 호출 : 생성자 함수를 호출. 간접 호출 : call, apply 등의 function 객체의 메서드로 함수를 간접 호출. 이 외에도 콜백함수의 호출이 있다. 콜백함수는 특정 동작 이후 불려지는 함수인데 보통 다른 함수의 인자로 보내지는 함수를 의미한다. (callback 참조=> https://cansweep.tistory.com/260?category=995363 ) 함수의 호출 환경에 따라 this는 동적으로 세팅된다. 이렇게 this가 환경에 따라 바뀌는 .. 2022. 1. 28.
[3주차] 실행 컨텍스트와 클로저 1월 28일 자 학습 내용 정리입니다. ✅ 자바스크립트에서 함수가 실행되는 과정 ✔️ 어떤 코드도 없이 실행되는 경우 자바스크립트 엔진은 어떤 코드도 없이 실행되는 경우에 대해서도 this, 변수들(Variable Object), Scope Chain을 초기화한다. 즉, 실행 환경을 초기화하는 것이다. 이처럼 빈 코드를 실행했을 때 초기화는 다음과 같이 진행된다. this : window Variables : {} Scope Chain : [] Scope는 코드가 현재 실행되는 환경, 맥락을 의미한다. 따라서 Variables와 Scope Chain은 가리킬 것이 없으니 빈 객체와 배열로 초기화 되었지만 this는 window 객체를 가리킨다. this는 코드가 실행되는 시점에 환경이 가리키는 객체를 의.. 2022. 1. 28.
[Frontend] BOM과 DOM 취준생이라면 알면 좋을 프론트엔드 관련 지식들 자료를 보고 정리한 내용입니다. ✅ BOM 브라우저 객체 모델(BOM, Browser Object Model)은 브라우저의 창이나 프레임을 프로그래밍적으로 제어할 수 있게 해주는 객체 모델이다. BOM은 DOM과 달리 W3C 표준 객체 모델은 아니지만 브라우저의 기능적인 요소들을 직접 제어하고 관리할 방법을 제공해준다. 자바스크립트에서는 이러한 BOM의 객체들을 전역 객체(global object)로 사용할 수 있다. ✔️ window 객체 window 객체는 웹 브라우저의 창을 나타내는 객체로 대부분의 웹 브라우저에서 지원하고 있다. 자바스크립트의 모든 객체, 전역 함수, 전역 변수들은 자동으로 window 객체의 프로퍼티가 된다. window 객체의 메서.. 2022. 1. 27.
[Frontend] 자바스크립트 엔진이 코드를 실행하는 과정 취준생이라면 알면 좋을 프론트엔드 관련 지식들 자료를 보고 정리한 내용입니다. ✅ 자바스크립트 엔진 자바스크립트를 실행하기 위해서는 자바스크립트 엔진이 필요하고 웹 브라우저는 자바스크립트 엔진을 내장하고 있다. 대표적인 예는 Google V8 엔진이다. V8은 Chrome과 Node.js에서 사용하는데 Memory Heap과 Call Stack으로 이루어져 있다. Memory Heap : 메모리 할당이 일어나는 곳 Call Stack : 코드 실행 시 호출 스택이 쌓이는 곳 이외에도 최초의 자바스크립트 엔진인 SpiderMonkey, 마이크로소프트의 Chakra, 애플의 JavaScript Core 등이 존재한다. ✅ 코드 실행 과정 자바스크립트 엔진이 코드를 실행하는 방법은 다음과 같다. JavaScr.. 2022. 1. 27.
[3주차] DOM과 이벤트 1월 26일 자 학습 내용 정리입니다. ✅ DOM 문서 객체 모델(DOM, Document Object Model)은 객체 지향 모델로써 구조화된 문서를 표현하는 방식이다. DOM은 XML이나 HTML 문서의 프로그래밍 인터페이스이며 구조화된 표현을 제공하여 프로그래밍 언어가 문서 구조, 스타일, 내용 등을 변경할 수 있게 한다. DOM은 트리구조로 이루어져 있다. DOM은 세 가지로 나눌 수 있다. Core DOM : 모든 문서 타입을 위한 DOM HTML DOM : HTML 문서를 조작하고 접근하는 표준화된 방법. 모든 HTML 요소는 HTML DOM을 통해 접근 가능. XML DOM : XML 문서에 접근하고 다루는 표준화된 방법. 모든 XML 요소는 XML DOM을 통해 접근 가능. Documen.. 2022. 1. 26.
분석 과제와 분석 우선순위 평가 엘리스에서 제공하는 자료를 보고 정리한 내용입니다. ✅ 분석 과제 발굴 분석 과제 발굴 방법론에는 하향식 접근과 상향식 접근이 존재한다. ✔️ 하향식 접근(Top Down) 하향식 접근(Top Down)은 문제 탐색 -> 문제 정의 -> 해결방안 탐색 -> 타당성 검토의 순서로 진행된다. 문제 탐색 : 비즈니스 모델 기반 문제 혹은 외부 사례 기반 문제를 탐색한다. 발굴 범위를 확장한다. 문제 정의 : 데이터 분석 문제로 변환한다. 해결방안 탐색 : 데이터 분석에 대한 기획을 짜는 등의 수행 옵션을 도출한다. 타당성 검토 : 타당성을 평가하고 최종적으로 과제를 선정한다. ✔️ 상향식 접근(Bottom Up) 상향식 접근(Bottom Up)은 빅데이터를 기반으로 데이터의 다양한 측면으로 탐색을 수행하고 이.. 2022. 1. 26.
분석 기획과 분석 방법론 엘리스에서 제공한 자료를 보고 정리한 내용입니다. ✅ 분석기획 분석 기획이란 실제 분석을 수행하기에 앞서 분석 과제를 정의하고 원하는 결과를 도출할 수 있도록 관리 방안을 미리 계획하는 작업이다. 분석 기획을 할 때 분석 대상과 방법이 각각 정해져 있는지의 여부에 따라 분석 대상과 방법이 달라진다. 분석 대상이 정해져있고 분석 방법도 정해져 있는 경우 해당 대상을 정해진 방법으로 분석만 하면 된다. 최적화(Optimization) 분석 대상을 정하지 않았지만 분석 방법은 정해져 있는 경우 특정 방법으로 여러 가지를 분석해본다. 인사이트(Insight) 분석 대상은 정했지만 분석 방법을 정하지 않은 경우 다양한 방법을 시도해보고 적합한 방법을 찾는다. 해결책(Solution) 분석 대상과 방법 모두 정하지.. 2022. 1. 26.

티스토리툴바