(TIL Day 01)프론트엔드 개발과 JavaScript

프론트엔드 개발자로서 가져야 할 역량 6가지

• 커뮤니케이션
• UI
• 디자인
• 네트워크
• 보안
• 브라우저

 

---

브라우저의 동작 원리

서버와 브라우저 간의 통신 -> DOM을 생성하여 화면에 표시(렌더링) -> 스크립트 실행

-> DOM은 트리 구조로 형성된다.

-> 스크립트로 인해 이벤트나 다양한 동적인 활동이 가능하다!

 

 

---

JavaScript

변수 선언 키워드

• var
• let

 

var

변수 호이스팅이 발생하기 때문에 ES6 이후로는 let 키워드 사용

 

✔ 변수 호이스팅이란?

변수 선언문이 코드의 선두로 끌어올린 것처럼 동작하는 JS 고유의 특징.

변수 선언문은 런타임 이전에 실행되고, 값의 할당은 런타임에 실행되기 때문에 발생한다.

 

 

let

• var를 대체하기 위한 방법.
• let 키워드를 생략하면 var 처럼 동작한다.
• 중복 선언이 불가능하다.
• var는 선언과 동시에 undefined가 할당 되지만, let과 const는 선언만 될 뿐 초기화 되지 않고 TDZ(Temporary Dead Zone)에 들어간다.

 

상수 선언 키워드

• const

 

const

• 한번 선언하게 된다면 변경 불가.
• 값을 변경하려고 하면 에러 발생.
• let과 같이 선언 시 TDZ에 들어간다.

 

---

 

메모리

• 메모리는 할당 -> 사용 -> 해제 순서로 사용된다.
• JS 엔진은 Garbage Collector를 이용해 사용하지 않은 메모리를 자동으로 해제한다.
• 가상 머신으로 Heap과 Call Stack이 존재한다.
• Heap은 참조 타입이 들어가며, Call Stack은 원시 타입이 들어간다.

 

---

네트워크

동작 순서

1. URL 해석
2. DNS 조회
3. 해당 IP가 존재하는 서버로 이동
4. ARP를 이용해 MAC 주소 변환(논리주소 IP -> 물리 주소 MAC으로 변환)
5. TCP 통신을 통해 Socket 오픈(3 way handshake)
6. 서버는 응답을 반환
7. 브라우저는 렌더링

 

HTTPS

• http의 보안 버전.
• SSL/TLS 프로토콜 암호화 및 인증을 위해 사용되는 프로토콜.
• 개인 정보나 자격 증명 등 중요한 데이터를 안전하게 전송 가능하다.