[TIL] day01. 프로그래머스 데브코스 첫 날

Intro. 수업 첫 날

프로그래머스 데브코스 첫날이다. 이번 방학만큼은 다양한 도전을 해보고, 성과를 내리라 다짐했고 그중 하나가 프론트엔드에 대해 전문적으로 배워보는 것이었다. 학교에서 프론트엔드를 다루는 과목이 없었기 떄문에 이러한 기회를 얻는게 내게는 더욱 절실했다. 그 결과의 끝은 데브코스의 시작이었고, 드디오 오늘 첫 날을 맞이했다.

오전부터 빡시게 공부하기 보다는 오전엔 각자 하고 싶은 공부하다가 오후부터 본격적으로 수업하고 배운 내용을 공유하는 방식이었기 때문에 낮엔 여유롭지만 오후부터 타이트 함의 연속이었다. 원래 낮보단 저녁에 집중이 더 잘 되는 타입이라 내게는 더 맞는 방식 같다.

대부분의 수업 첫날이 그러하듯 상세하게 다루기 보다는 러프하게 앞으로 어떤 것을 배워나가야 하고, 어떤 지식들을 학습하면 좋을지 방향을 잡는 내용의 수업이었다. 평소 학교 수업과 다른 점이 있다면 내가 알아서 공부할 것을 찾아서 해야 한다는 점? 주제도 내 마음대로 정하고, 추가적으로 배워야 할 것 같은 목록들을 알아서 만들고 채워 나가야 한다.

오늘 할일만 해도 오늘 수업 리뷰, 수업에서 파생된 새로운 학습 주제 공부하기, TIL 작성을 위한 마크다운 학습, 소통하기 위해 필요한 협업 도구 등 배워야하고 할 것도 엄청 많다. 아직 적응하기 위해 좀더 시간이 필요하기에 다른 것들을 희생하더라도 빨리 구멍부터 메꿔 나가야 겠다.

오늘 배운 내용

1. 브라우저의 작동 원리
2. JS와 메모리
3. for loop(for..in vs for..of)
4. scope & closer
5. 네트워크 기초
6. 암호화

1. 브라우저의 작동 원리

통신: 브라우저와 서버간 통신을 담당
렌더링: DOM이라는 객체를 화면에 그려내는 것
스크립트 실행: Javascript 실행하여 UI에 각종 이벤트 등 동적인 화면 생성 기능을 담당한다.

DOM

• 서버로부터 받은 HTML을 브라우저에서 읽어서 객체로 생성
• DOM은 트리구조로 이뤄져 있다

2. JS와 메모리

할당: 변수 선언시 메모리가 할당 된다
사용: 메모리 사용
해제: 사용 완료시 해제

+ 메모리가 꽉 차면 일부 메모리를 해제해 줘야 하는 데 Javascript의 경우 'Garbage Collector'가 알아서 해제 하기 때문에 별도의 관리를 필요치 않는다.

2.1. javascript에서의 메모리

• 기존에 선언했던 변수(정확히는 primitive type)의 값이 변경되면 새로운 메모리가 할당된다.

  

• 배열의 자료형이 상수여도 값의 추가가 가능하다

  
  배열의 주소는 call stack에 있고, 값이 추가되어 저장되는 공간은 Heap에 있기 때문에 영향을 주지 않는다. 즉, 배열의 주소는 변하지 않기 때문에 값의 추가가 가능하다.

3. for loop(for..in vs for..of)

3.1. for..in

: 객체의 속성을 반복하여 작업 수행

const obj={name: 'kim',company:'apple'};
for(let key in obj){
  console.log(key, obj[key];
}

3.2. for..of

: Collections(Symbol.iterator) 특성을 갖는 객체를 돌때 사용

const arr=Array.from(Array(5),(v,k)=>k+1);
for(let a of arr){
  console.log(a);
}

4. scope & closer

4.1. scope

global scope와 local scope가 있다

const a=5;//global scope
{
	const b=3; //local scope
	console.log(a,b); // 5,3
}
console.log(b); // out of scope range .. b는 local scope이나 호출된 위치는 global scope에 해당하기 때문이다.

4.2. closer

함수가 선언된 환경의 스코프를 기억하여 함수가 스코프 밖에서 실행될 때에도 기억한 스코프에 접근할 수 있게 만드는 문법이다.

function makeGreeting(name){
	const greeting="hello, "; // 지역 스코프라서 함수 종료시 메모리에서 사리짐
	return function(){
		console.log(greeting+name);
	}
}
const world=makeGreeting("world");
const kim=makeGreeting("kim");

world();
kim();

world()가 greeting 변수보다 밖의 scope이기 때문에 원래는 접근 불가능 하므로 greeting 변수 사용이 불가능하다. 하지만 closer가 있기 때문에 scope 규칙을 피해서 사용 가능하다.

4.3. closer와 callback함수

function counting(){
	let i=0;
	for(i=0;i<5;i++){
		setTimeout(function(){
			console.log(i);
		},i*100);
	}
}//result: 5 5 5 5 5

5. 네트워크 기초

5.1. 작동순서

1. URL 해석
2. DNS(Domain Name System) 조회
3. 해당 IP가 존재하는 서버로 이동
4. ARP(Address Resolution Protocol)를 이용해 MAC 주소 변환
5. TCP 통신을 위해 socket을 연다
6. 서버는 응답을 반환한다.
7. 브라우저는 렌더링 작업을 수행한다.

5.2. 설명

1. URL 해석

   scheme://[user]:[password]@[host]:[port]/[url-path]
   ex) http:example.com:8080/members
   URL schema에는 다양한 정보들을 내장하고 있다.

2. DNS(Domain Name System) 조회

   Domain과 IP주소를 서로 변환

3. 해당 IP가 존재하는 서버로 이동

   해당 IP가 할당된 대역으로 이동

4. ARP(Address Resolution Protocol)를 이용해 MAC 주소 변환

   논리 주소인 IP주소를 물리 주소인 MAC주소로 변환

   Q. 그런데 왜 IP주소를 MAC주소로 변환해줘야 할까?
   A. 기계의 실제 주소를 알기 위해서는 MAC주소가 필요하기 때문이다
   Q. IP주소만으로 찾는 것은 불가능 한가?
   A. IP주소와 MAC주소의 용도가 서로 다르기 때문에 실제 주소를 찾기 위해서는 MAC 주소가 필요하다. IP주소는 '논리주소'이고, MAC주소는 '물리주소'이다. 쉽게 표현하면 IP주소는 '도로명 주소'이고, MAC주소는 '위도와 경도'를 의미한다. 컴퓨터는 IP주소를 바탕으로 찾아가야 하는 서버의 범위(Boundary)를 축소해 나간뒤, MAC 주소를 바탕으로 정확한 위치를 찾아 나간다.

5. TCP 통신을 위해 socket을 연다

   네트워크를 통해 패킷이 전달되는데, 3 way handshake 방식으로 연결 요청

6. 서버는 응답을 반환한다.

7. 브라우저는 렌더링 작업을 수행한다.

   1. 서버로부터 전달받은 HTML파일을 읽어 DOM Tree를 구현한다
   2. Tree를 이용해 화면을 그린다.
   3. script를 실행한다.

6. 암호화

6.1. 단방향: 해시 알고리즘을 이용하여 평물을 복호화 할 수없는 형태로 암호화

• MD5, SHA 알고리즘이 있음

• 고려해야 할 점들

  • rainbow table을 통해 복화하는 것을 막기 위해 Salt, key stretching 등을 활용한다.

    Salt: 평문에 임의의 문자열을 추가하여 암호화하는 방법
    (128bit 이상으로 만들 것을 권장한다)
    ⇒ salt, key stretching 등 검증된 알고리즘을 쓰는게 안전

6.2. 양방향: 평문을 복호화 할 수 있는 형태로 암호화하는 방법

• 대칭키와 비대칭키 알고리즘으로 나뉜다

• AES(대칭키) , RSA(비대칭키) 로 나뉨

  1. 대칭키 암호 알고리즘(AES)

     → 같은 키를 이용하여 암호화, 복호화 가능

  2. 비대칭키 암호 알고리즘(RSA)

     → 암호키, 복호키가 다름

번외. 추가학습

• 클로저와 동시성(예정)
• javascript prototype(예정)
• arrow function vs normal function(예정)