[Basic] Frontend의 이해 - JavaScript

---

1. Syntax and Basic Constructs

• 자바스크립트의 기본 구문(변수, 데이터 타입, 연산자, 조건문, 반복문, 함수) 숙지
• 객체 기반의 스크립트 언어
• 웹 브라우저에서 동작하는 client side 언어
• HTML, CSS와 함께 웹 페이지를 동적으로 제어하는데 사용

2. Learn Dom Manipulation

• DOM(Document Object Model) : HTML을 트리구조로 나타냄
• 자바스크립트를 이용해서 DOM 요소를 선택 > 속성을 변경하거나 요소 생성, 삭제, 이동
• DOM 요소를 선택하기 위해 querySelector, getElementById 등 사용
• 요소를 선택한 뒤 CSS 클래스 추가/제거, 이벤트 핸들링, 애니메이션 효과 적용 등 다양한 기능 구현 가능
• BOM(Browser Object Model) : 브라우저의 창, 프레임 등과 같은 브라우저의 객체 모델
• 브라우저의 URL 정보, 화면 크기, 스크롤 위치 등의 정보를 BOM을 통해 가져옴(타이머 등)
• DOM은 웹 페이지의 구조와 콘텐츠를 다루는 반면, BOM은 브라우저 창과 같은 브라우저 자체를 다룸

3. Learn Fetch API / Ajax(XHR)

• 웹 어플리케이션에서 비동기적으로 데이터를 주고받는 방법들
• Fetch API 사용시 비동기적으로 데이터를 가져올 수 있으며, Promise 기반 작동

fetch('https://example.com/data.json')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

• Ajax(XHR)는 XMLHttpRequest 객체를 사용하여 비동기적으로 데이터(XML, HTML, JSON 등)를 주고받음
• Fetch API는 더 간결하고 직관적인 구문을 가지고 있으며 오류 처리를 처리하기 쉬움
• Ajax(XHR)는 오래된 기술이기 때문에 오래된 브라우저에서도 호환성이 높음

4. ES6+ and modular JavaScript

• ES6+는 ECMAScript 6 버전 이상의 자바스크립트를 의미
• 모듈 시스템이 도입되어 각 파일별 scope를 가지고 export, import를 활용하여 함수, 변수, 다른 모듈을 참조할 수 있음
• 이를 지원하지 않는 구형 브라우저에서는 Babel 등의 도구를 사용하여 변환하여 사용
• 내가 사용하는 언어인 Ember.js는 ES6 기반의 프레임워크이기 때문에 ES6의 문법/기능을 사용할 수 있음

5. Understand the concepts Hoisting, Event Bubbling, Scope, Prototype, Shadow DOM, strict

• 호이스팅(Hoisting)
  자바스크립트 엔진 내부에서 변수(var)와 함수(function) 선언이 스코프(scope) 상단으로 끌어올려지는 현상
  ES6에서 추가된 let, const, class와 같은 선언 방식들은 호이스팅을 발생시키지 않기 때문에 이 방식을 사용
  변수와 함수가 실제로 사용되는 위치에서 선언하는 것이 코드의 가독성을 향상시킴
• 이벤트 버블링(Event Bubbling)
  HTML 요소들 간에 중첩 관계가 있는 경우, 하위 요소에서 발생한 이벤트가 상위 요소로 전파되는 현상
  의도하지 않은 결과가 초래되지 않도록 전파되는 것을 막아야함
• 스코프(Scope)
  변수와 함수 등의 식별자(identifier)가 유효한 범위
  전역 스코프 global scope : 프로그램 전체에서 접근할 수 있는 스코프, 어디서든지 접근 가능
  지역 스코프 local scope : 함수 내부에서 선언된 변수는 함수 내 어디서든 접근 가능 (var)
  블록 스코프 block scope : ES6에서 지원, 블록 내부에서 선언된 변수는 해당 블록 내부에서만 접근 가능(let, const) 
  스코프 체인 scope chain : 함수의 중첩 관계에 따라 변수를 찾아가는 매커니즘
• 프로토타입(Prototype)
  객체가 상속받는 부모 객체로 이를 이용하면 상속을 간편하게 구현할 수 있음

// Person 프로토타입 객체 정의
var Person = {
  firstName: "",
  lastName: "",
  greet: function() {
    console.log("Hello, " + this.firstName + " " + this.lastName);
  }
};

// john 객체 생성
var john = Object.create(Person);
john.firstName = "John";
john.lastName = "Doe";
john.greet(); // "Hello, John Doe"

• Shadow DOM
  HTML과 CSS를 사용하여 캡슐화된 독립적인 DOM 트리를 생성하는 기술
  웹 페이지의 다른 요소들과 독립적인 스코프(scope)를 가지는 DOM 트리를 생성해서 사용할 수 있음
  모듈을 import하는 것과 다름
• strict
  자바스크립트의 strict mode를 사용하면 더욱 안전하고 예측 가능한 코드를 사용할 수 있음
  use strict;로 파일 상단에 선언하거나 함수 내부에서만 활성화 할수도 있음
  
  • var 대신 let 또는 const만 사용 가능
  • 암묵적 전역 변수를 사용할 수 없음
  • 변수, 함수, 매개변수 등의 이름으로 예약어를 사용할 수 없음
  • 일부 예외 상황을 발생시키던 기능들이 오류를 발생시키도록 변경