1일차 배운 것 정리 (1)

목차

1. javascript와 프론트엔드 개발 개요

• js 탄생배경
• html에 동적인 기능을 추가하기 위해 빠르게 개발된 언어
• by 팀 버너스 리, 브랜든 아이크

• js로 무엇을 할 수 있을까
• 서버개발 - nodejs, NestJS, Express
• 앱개발 - ReactNative, NativeScript, Cordova , ...
• 프론트엔드 개발
• React, Vue, Angular, JQuery, Backbone.js,
• 다양한 프론트엔드 개발 분야

• 브라우저 동작 원리
• 통신 - 렌더링 - 스크립트 실행

• 프론트엔드 개발자의 역할
• 브라우저에서 동작하는 UI를 개발하는 일
• 디자인과 백엔드와의 의존도가 높다.
• 디자인에서 목업,와이어프레임을 받고,
• 백엔드에서는 데이터, API를 받는다.
• 마지막에 작업하기 때문에 협업과 일정을 잘 맞추는 것이 중요한 직무
• 6가지 핵심 역량
• 커뮤니케이션
• UI
• 네트워크
• 보안
• 브라우저
• 디자인
↔ CS소홀, CSS안하기, 코더가 되는 것

1-1.

2. 변수, 상수, 자료형 그리고 메모리

2-1. 변수, 상수, 자료형

• 변수
• 프로그래밍에서의 변수는 메모리에 할당한 값을 의미
• 변수 선언 키워드 var와 let

• 상수
• 상수는 변하지 않는 값
• 한 번 선언된 이후 변할 수 없는 값

• 자료형
• String ( “”, ‘’ , ``)
• Number (소수점, 실수, NaN, Inf)
• Boolean( true, false )
• Object > Array
• Function
• Undefined
• Null

2-2. 메모리

• 할당 → 사용 → 해제

• 할당
• 변수 선언 시 메모리에 할당

• 사용
• 할당된 메모리에 값을 넣어 사용

• 해제
• js에서는 GarbageCollector를 통해 해제

• 식별자는 값이 아닌 메모리 주소를 참조하고 있다.

• js엔진의 가상머신의 메모리 구현
• Heap - Object 참조타입
• 동적인 크기 변경 가능
• CallStack - 원시타입
 

• 가비지컬렉터의 Mark and Sweep 알고리즘
• 닿을 수 없는 주소를 필요없는 주소로 정의하여 지워버리는 알고리즘
• 루트노드로 부터 참조되든 모든 객체들을 순회하며, 순회 이후 방문하지 않은 객체들을 삭제한다.

3. 표현식과 연산자

• 표현식
• 표현식(Expressions) vs 문장(Statesment)

• 연산자
• 할당연산자 ( = )
• 비교연산자 (== , ===)
• 산술연산자 (+, -, *, /)
• 논리연산자 (|| ,&&)
• 삼항연산자 (? :)
• 관계연산자 ( in )
• 객체에 해당 속성이 있는지 확인하기 위한 연산자

const obj = {name: "soo", height: 177}
"name" in obj; // true
"gender" in obj; // false

• typeof
• 피연산자의 타입을 반환하는 연산자

4. 흐름제어

• Control Flow
• 조건이나 반복을 통해 상태를 제어하는 것
• Goto, if-then-else, switch-case, for-while

• Data Flow
• 함수형 프로그래밍에서 데이터를 중심으로 제어하는 방식

5. 배열과 객체

5-1. 배열

• 연관된 데이터를 연속적인 형태로 저장하는 데이터 타입 (ex. 출석부)

• 생성
• new Array(배열의 크기) 로 생성
• fill 메소드를 통한 배열의 요소 생성
• Array.from(Array(5), (value, index) ⇒ () )

• join, reverse, concat

• 끝 요소 추가/제거 - push, pop

• 첫 요소 추가/제거 - unshift, shift

• 배열 자르기 - slice, splice

• for .. of ... 를 통한 배열 순회

5-2. 객체

• 여러 값을 키-값 형태로 결합시킨 데이터 타입 (ex. 사물함)

• 생성
• new Object, { }

• 추가
• obj[”email”] = value
• obj.email = value

• 삭제
• delete obj.email

• 조회
• Object.keys(obj) - 키 조회
• Object.valuse(obj) - 값 조회
• Object.entries(obj) - 키와값 동시 조회

6. 스코프와 클로져