(1회독)기초부터 완성까지, 프론트엔드 - 1~6장

1회독의 목표
- 내용을 정리하며 궁금한 부분 위주로 심화 학습 진행
- 사건의 발생에 대해 고민하고 의견 작성

1회차 독서 목표

• 프론트엔드 개발이 무엇인가?
• 웹 접근성에 맞는 웹 화면 개발이란?
• 자바스크립트 변수 선언 구분(var, let, const)
• 자바스크립트 객체의 특징(number 타입의 0 값이 false 로 판단이 되는 것 등)
• 자바스크립트의 프로토 타입의 활용
• 자바스크립트 스코프의 활용
• 클로저(closer)란?
• 기타 : 브라우저 개발자 도구를 통한 디버깅

1장, 프론트엔드 개발하기

프론트엔드/백엔드로 웹 개발에 대해 나누어 개발하기 시작한 이유는 일반 사용자들이 사용하는 기기의 성능이 좋아져서 라고 생각한다. 처음 웹화면의 시작은 단순하였다. 마이크로소프트사의 IE 브라우저의 사용량이 압도적이었고, 웹 영역의 프로그래밍언어와 규칙은 없었기 때문에 다양한 기술이 쏟아져 나왔다. 이전의 기술은 대부분 복잡한 데이터의 처리는 물론, 아주 사소한 데이터 처리, 저장 등 모든 부분을 클라이언트가 서버로부터 받아 뿌려주는 역할을 하였다. 브라우저간의 규약이 생기고, 자바스크립트는 웹 언어의 표준이 되었다. 정확하게는 ECMAScript라고 할 수 있다.
웹표준과 브라우저만을 이유로 프론트엔드와 백엔드가 분리되었다고 할 수는 없다. 가정에 보급되는 컴퓨터의 사양이 높아지며, 기업에서 갖고 있는 고사양의 서버가 모든 데이터를 처리하고 저장해줄 필요가 없게 되었다. 정말 복잡하고 필요한 데이터만 처리하면 된다는 판단이 온 것이다. 브라우저가 저장할 수 있는 스토리지의 용량이 늘어나고, 이를 감당할 수 있는 사용자의 컴퓨터 성능과 인터넷 망 환경이 구축되며 표준에 맞추어진 화면을 만드는 것이 아닌 기능을 갖게 된 프론트엔드 개발 능력을 기업체에서 요구하게 되었다. 가장 큰 영향을 가져온 것은 이동단말기라고 생각을 한다. 스마트폰의 보급으로 사람들은 필요에 따라 다양한 모바일 어플리케이션을 사용하기 시작했다. 마켓에 등록되어 직접 단말기에 실행파일을 저장하는 네이티브 앱을 개발하기 위해서는 다양한 단말기에 대한 이해와 필요로 하는 언어를 공부해야 했다.(IOS, Kotlin, Java,…) 하지만, 일부 콘텐츠 영역을 HTML, CSS, javascript를 사용하여 웹 애플리케이션 형태로 개발 후 네이티브 앱으로 변환하여 배포하는 하이브리드 앱 방식이 흥행하며 프론트엔드 개발자에 대한 요구사항이 늘어나기 시작하였다. PC, mobile 어느 단말기에서든 공통적으로 하나의 언어로 개발하고 유지보수가 가능하게 되었다.
프론트엔드의 목적은 서비스를 이용하는 사용자의 접근성과 편의성의 증진이다. 개발자 입장으로 보면 높은 가독성/재사용 가능한 컴포넌트/테스트 용이 등이 목적이라고 생각한다. 이 모든 것을 완수하려면 기본적으로 프론트엔드가 실행되는 환경인 웹을 알아야한다. 실행되는 환경인 브라우저, 동작하기 위한 표준(웹표준)에 대해서 알아야한다.

{{웹 표준에 대한 정리}}
- 웹 표준(Web Standards)
- 사용자가 사용하는 브라우저, 운영체제, 기기의 종류에 상관 없이 내용을 동일하게 볼 수 있도록 하는 것
- 표준화 단체인 W3C이 권고한 표준안에 따라 HTML, CSS, Javascript 등에 대한 규정 존재
- 구조적 마크업(XHTML), CSS, DOM Script 관련 기술이 존재
- XHTML
- CSS
- XML
- ECMAScript : 표준화된 스크립트 프로그래밍 언어
{{웹 접근성}}
- 모든 사용자가 신체적, 환경적 조건에 관계없이 웹에 접근하여 이용할 수 있도록 보장하는 것
- 속어, 약어 사용을 지양
- 콘텐츠의 제목과 단락을 명확하게 구분
- 키보드 동작 제공
- Focus 지정의 명확화
- 멀티미디어 요소에 접근성 부여
{{ECMAScript에 대한 정리}}

2장, HTML/CSS

웹 페이지를 만들 때, 가장 대중적으로 사용되는 핵심언어
마크업 언어
- 마크(Mark)로 둘러싸인 언어, 태그(Tag)로 구성된 언어
- 문서의 골격에 해당하는 부분을 작성
- 웹표준
마크업 구성
시멘틱(semantic)
- HTML 요소는 시멘틱하게 작성해야한다.
SEO(Search Engine Optimization)
meta description 네이버, 구글, 다음 등 메타 태그를 봇이 읽어서 검색…
CSS
반응형 웹을 위한 미디어 쿼리

• 콘텐츠 모델?
  • 메타 콘텐츠
  • 플로우 콘텐츠
  • 셀렉셔닝 콘텐츠
  • 구문 콘텐츠
  • 해딩 콘텐츠
  • 임베디드 콘텐츠
  • 상호작용 콘텐츠
  • DOCTYPE
  • 시멘틱하다?
  • 웹 접근성

3-4장, 자바스크립트 기초

변수
자바스크립트의 변수는 선언할 때 타입을 명시하지 않을 뿐, 데이터의 종류가 정해지면 변수의 타입을 갖는다. 초기 선언이 없다면 undefined 값이 자동으로 할당된다.
var : 변수(variable)의 약자이며, ES2015(ES6)이전의 유일한 자바스크립트의 변수 선언 방법이었다. 기존에 선언된 변수의 값을 덮어쓰며, 함수 스코프를 기준으로 동작한다. (함수 내에서 어디서든 접근이 가능하다.) 스코프의 이슈로 ES2015에서는 let과 const가 등장하였다.
let : 재선언을 허용하지 않으며, 블록 스코프를 가진다. 즉, 변수를 둘러싼 블록({})안에서만 해당 변수에 접근할 수 있다.
const : 재선언을 허용하지 않으며, 블록 스코프를 가진다. 값의 변경을 허용하지 않는다. 상수처럼 변하지 않는 값을 선언할 때 사용한다.(constant)
객체와 타입
자바스크립트의 값은 원시타입(primitive type)과 객체(참조형)으로 나뉜다.
원시 타입
number, string, boolean, null, undefined, symbol, bigint
undefined vs null
- 두 타입 모두 원시타입(primitive type)
- 두 타입 모두 할당되지 않은 상태를 나타냄
- 두 타입 모두 toString() 메서드 호출 불가
- 두 타입 모두 객체에서 사용할 수 있는 프로퍼티를 사용할 수 없음
- 문
NaN
객체
자바스크립트에서 원시 타입이 아닌 모든 값은 객체이다.
Object 생성자 함수, 객체 리터럴({}), 직접 정의한 생성자 함수 사용 세 가지 방법으로 객체를 생성할 수 있다.
동적으로 객체의 프로퍼티 생성과 갱신을 진행할 수 있다.
getter/setter 접근자 프로퍼티를 사용하여 일반 프로퍼티 처럼 사용할 수 있다.
‘’’
const obj = {
myName: ‘javascript’,
set name(name){
if (name !== null){
this.myName = name;
}
}
},
get name(){
return this.myName;
}
‘’’
해당 변수의 myName 프로퍼티를 get 하면 name() 부분이 실행되고, set 하면 set 내용이…..(확인필요)
…..페이지 72
프로퍼티 서술자
configurable, enumberable, writable, value, get, set


배열
랩퍼 객체(wrapper object)
박싱과 언박싱
구문과 연산자
산술연산자
논리 연산자
truthly/falsy
False 빈문자열, null, 0, undefined, NaN, 0n, false
True 이외의 값
{{형변환 화이팅!}}

함수
- 객체의 특별한 형태이며 문장(statement)으로 구성된 하나의 실행 단위
- 자바스크립트의 함수는 일급 함수(first-class function)로서 다른 함수의 매개변수나 반환 값으로 사용할 수 있다. = 변수가 될 수 있다.
- 함수를 선언할때 함수 명은 필수이다.
- 함수 표현식에서는 함수의 이름이 선택사항이다(익명함수 o)
- 매개변수보다 적은 인자를 받으면 나머지 인자는 undefined 로 초기값이 설정되며, 초과한다면 나머지 인자는 무시된다.
- ES2015부터 람다식을 사용할 수 있다. 화살표 함수를 사용할 수 있다.
- function 키워드 생략
- filter, map과 같은 메서드처럼 함수를 인자로 받는 경우 유용
- 가독성을 높임
- this와 arguments 객체를 바인딩 하지 않기 때문에 기존 함수와 다른 동작을 보임
this
- 자바스크립트의 함수에서의 특별한 키워드
- 전역 실행 컨텍스트에서는 this는 전역 객체를 참조한다. (window)
- new 키워드를 사용하여 함수를 호출하면 this는 생성된 함수와 바인딩 된다
‘’’
function Vehicle(type){ this.type=type;}
const car = new Vehicle(‘Car’);
‘’’
‘’’
function Vehicle(type){ this.type=type; return this;}
const car = new Vehicle(‘Car’);
‘’’
위의 두 함수는 동일하다.
- 메서드를 호출하면 this는 해당 메서드를 소유하는 객체로 바인딩 된다. 즉, 메서드의 호출 방식에 따라 this 바인딩이 달라진다.

5장, 자바스크립트 심화

프로토타입
- 자바스크립트에서는 프로토 타입을 기반으로 객체 지향의 상속 개념을 구현한다.
- 모든 객체는 자신의 부모 역할을 하는 프로토 타입 객체의 참조 링크를 가지고 있으며 이 링크를 통해 프로토타입으로 부터 프로퍼티나 메서드를 상속받을 수 있다.
프로토 타입 체인
- 프로토 타입은 참고 링크 형태로 [[prototype]] 내부 프로퍼티에 저장된다.
- 동일한 프로토 타입을 상속받은 객체는 같은 프로퍼티와 메서드를 공유한다.
모든 함수에는 prototype이라는 프로퍼티가 존재한다.
- 객체의 프로토타입을 가리키는 참조링크 [[prototype]]과 함수의 prototype 프로퍼티를 구분해야한다.
- new 키워드와 함께 생성자 함수로 사용할 경우, [[prototype]]으로 설정된다. ~~~프로토타입은 잘 이해가 안된다. 사용 효율성, 이유에 대해 직접 코드를 쳐보며 테스트 해보고 이해하도록 하자! ~~~~~ 스코프(scope)
- 변수나 매개변수에 접근할 수 있는 범위 결정
함수 스코프
- 선언된 함수 단위로 생성되는 스코프
블록 스코프
- 변수의 유효 범위를 블록({}) 단위로 제한하여 사용
- const, let 으로 선언된 변수는 블록 스코프를 따르며 함수 스코프의 문제를 해결
렉시컬 스코프
- 변수나 함수를 어디에 작성하였는가를 기초하여 결정
- 로컬 스코프
- 자바스크립트, 그리고 기타 언어에서 지향하는 스코프
- with문과 eval() 함수를 통해 렉시컬 스코프를 동적으로 변경 가능하나 스코프 체인 구조를 동적으로 변경시키기 때문에 성능/보안상 이슈 발생 가능
스코프 체인
- 스코프들의 연결관계
스코프 체이닝
- 스코프 체안을 따라 검색하는 과정

호이스팅(hoisting)
- 선언문이 스코프 내의 가장 최상단으로 끌어올려지는 것
~~~~~???~~~~~ 클로저(closure)
- 함수의 렉시컬 스코프를 기억하여 함수가 렉시컬 스코프를 벗어난 외부 스코프에서 실행될 때도 자신의 렉시컬 스코프에 접근할 수 있도록 해주는 것
- 내부 함수가 자신을 감싼 외부 함수 밖에서 호출이 가능하도록 도와준다.
- 클로저를 사용하면 외부에서 렉시컬 스코프에 접근 간으

6장, 자바스크립트 실행 컨텍스트

실행 컨텍스트(excecution context)
- 자바스크립트 코드를 실행할 때 필요한 정보들을 저장하고 제공하는 환경
- this 바인딩, 스코프, 호이스팅, 클로저 등 모든 동작의 추상적 개념
- Lexical Environment, Variable Environment 두 가지 컴포넌트로 구성
- 두 컴포넌트는 environment Records로 구성(추상 클래스)
- 렉시컬 스코프를 기반으로 식별자 연결 정보를 저장
- OuterEnv 필드로 상위 렉시컬 스코프에 대한 ER을 참조
Lexical Environment
Variable Environment
- var 키워드로 선언된 변수의 바인딩 관리
{{실행 컨텍스트의 생성 과정에 따른 이해}}
자바스크립트 엔진에서 자바스크립트의 문장을 읽고 실행하는데 동작하는 환경을 뜻한다.
자바스크립트는 컴파일되어 실행되는 컴파일언어가 아닌 스크립트를 읽고 바로 실행되는 스크립트 언어이므로, 자바스크립트 엔진은 자바스크립트를 읽고 실행하는데에 실행 컨텍스트를 만들어 실행하는 내용을 구조적으로 실행하고 보여준다.
자바스크립트 엔진 -> 실행 -> 실행컨텍스트 생성/시작 -> ( Environment Records를 상속받는 Lexical Environment, Variable Environment를 생성(실행 요소에 맞추어 생성) -> this binding= this값 할당-> 코드 실행 )