TIL 1일차

💻브라우저의 동작 원리(얕은 개념)

통신: 브라우저가 서버에 요청을 하면 서버는 요청에 따라 특정값을 응답해준다. 요청은 한번에 하나씩 or 동시에 가능도 하다.

렌더링: DOM이란 객체를 브라우저에 그려주는 과정이다. DOM은 통신을 통해 받은 HTML을 브라우저에서 생성해준다. 또한 DOM은 트리구조를 가지고 있어서 요소가 부모 자식 관계로 이루어졌다.

스크립트 실행: 브라우저가 스크립트 탭을 통해 스크립트 파일을 읽으면 바로 실행이 된다. 이를 통해 UI를 변경하거나 동적인 화면을 구성할 수 있다.

📗변수

일반적으로 수학에서는 변하는 값을 변수라고 한다. 컴퓨터공학에서는 의미는 비슷하지만 상황에 따라 변하는 값이 아닌 우리가 직접 할당한 값을 변수라고 한다.

javascript에서 변수는 var와 let을 사용하지만 현재 ES6문법을 사용하기 때문에 var는 사용하지 않는다. 지금도var를 사용할 수 있지만 권장하지 않는다. 그 이유는 호이스팅 때문에 오류가 날 수 있는 확률이 높기 때문이다.

✨호이스팅

ECMA2015전에는 안 쓰이던 단어였다. 변수 및 함수 선언이 물리적으로 작성한 코드의 상단으로 옮겨지는 것으로 볼수있지만 실제로는 그렇지 않습니다. 호이스팅은 컴파일 단계에서 변수 및 함수 선언이 메모리에 저장된다고 원래있던 코드가 변경되지는 않는다.

🛍자료형

Number

숫자 타입을 뜻하며 정수, 실수, 모든 수가 Number에 속한다. NaN은 숫자가 아님을 나타내지만 Number타입에 속한다. 무한을 나타내는 Infinity도 그렇다.

String

작은 따옴표안에 큰 따옴표를 넣을 수 있고, 큰따옴표안에 작은 따옴표를 넣을 수 있다. 문자열 내에 다른 변수도 넣을수있다(`백틱활용) 작은따옴표안에 작은따옴표를 넣고싶으면 (이스케이프) 문자를 활용해 넣을수있다.

Boolean

true or false만 가진다.

Object

여러 자료형을 여러 값을 키-값 형태로 결합시킨 복합 타입이다. key는 무조건 문자열이다! ex) 원하는 이름을 찾아 찾을수 있는 사물함에 비유

Array

연관된 데이터를 연속적인 형태로 저장하는 복합 타입 배열에 포함된 원소는 순서대로 번호(index)가 붙는다. ex) 순서대로 학생 번호가 있는 출석부로 비유

Function

파라미터를 처리해서 결과를 얻어내는 기능을 가진 객체

undefined, null

undefined는 변수 상수가 선언되었지만 값이 정의되지 않았다는 뜻이고 null은 사용자가 일부러 비워놨단 뜻임

💾메모리

할당 & 사용

변수를 생성하면 변수를 사용할 수 있게 메모리에 할당 시킨다.

변수를 선언할 때 javascript에서는 무슨일이 일어날까..?
변수의 고유식별자를 생성하고 메모리에 주소를 할당한다. 최종적으론 생성한 주소에 값을 넣는다.
자바스크립트 엔진은 가상머신으로 구성되어있다. 가상머신에는 메모리 모델을 구현 해놨는데, 그것은 heap영역(참조 타입이 들어가고) 과 Call Stack 영역(원시 타입이 들어감)이다.

해제

메모리가 가득차서 프로그램이 종료되기전에 메모리를 해제하는 과정이 필요함. 하지만 사용자는 메모리를 해제하는 법을 모르지만 자동으로 해제할 수 있다. 그 이유는 자바스크립트엔진에서 Garbage Collector가 있기에 메모리를 자동적으로 해제하기 때문이다.
Garbage Collector는 Garbage Collection 자동 메모리 알고리즘을 통해 만들어졌으며 사용하지 않는 메모리를 해제하는 역할을 한다. 물론 최적화를 통해 메모리 관리가 필요하지만 C++ 같이 메모리를 직접관리하는 언어보다 편하다.

로직이 끝나고 만약 사용을 마친 메모리는 어떻게 되는가..? Garbage Collector로 메모리를 정리함 현재는 mark and sweep algorithm으로 닿을 수 없는 주소를 더 이상 필요없는 주소로 정의하고 지우는 알고리즘를 사용한다.

📊Control Flow(흐름제어)

1. Control Flow: 일반적인 조건문이나 반복문이 속함
2. Data Flow: 함수형 프로그래밍 방식으로 구현이 가능하다.

Control Flow란? 흐름을 제어하는 방법 중 하나로 조건이나 반복을 통해 상태를 제어하는 것을 말한다.

🚧조건문에서 유의 사항

if에서 false값 뿐만 아니라 false, undefined, null, 0, NaN, ‘‘(empty string)도 모두 거짓으로 취급될 수 있다.

🚩황에 따른 Array Method

fill은 같은 값으로 초기화 할 때 사용
from은 다른 값으로 초기화 할 때 사용
배열은 타입은 객체임

🎁스코프와 클로저

스코프: 유효범위라고도 부르며 변수가 어느 범위까지 참조되는 지를 뜻한다.

클로저: 함수가 선언된 환경의 스코프를 기억하여 함수가 스코프 밖에서 실행될 때에도 기억한 스코프에 접근할 수 있게 만드는 문법이다. 클로저를 활용해 내부변수와 함수를 숨길 수 있다. 숨기면서 개발자의 실수를 줄일수있으며, 클로저를 잘 알아야하는 이유는 유용하게 사용하기보단 알기 힘든 버그를 잘 수정하기 위해서이다.

🖥네트워크 통신

1. URL을 해석한다.
2. DNS를 조회한다.
3. 해당 IP가 존재하는 서버로 이동한다.
4. ARP를 이용하여 MAC주소 변환을 한다.
5. TCP통신을 통해 Socket을 열어야 한다. 이때 3way handshake가 됨
6. 서버는 응답한다.
7. 브라우저는 렌더링한다.

🔑암호화

암호화: 평문을 해독할 수 없는 암호문으로 변환하는것을 말한다.

단반향 암호화

해시 알고리즘을 이용해 평문을 복호화 할 수 없는 형태로 암호화한다. 왜냐하면 이런 종류의 데이터는 받는 입장에서 해석을 하면 안되기 때문이다. 대표적으로 MD5와 SHA 알고리즘이 있다. 사용자 비밀번호 등을 저장할 때 자주 사용한다.

복호화가 불가능하지만 Rainbow Table을 통해 원문을 알아낼 수도 있다. Rainbow Table은 평문과 해시 함수로 만든 문자열을 모두 저장시켜 놓은 표이다.

해결법

Salt: 평문에 임의의 문자열을 추가하여 암호화하는 방법을 말한다. 128bit이상으로 만드는 것이 좋음

Key stretching: 해시를 여러 번 반복하여 원문을 알기 힘들게 만드는 방법 / 일반적인 시스템에서 0.2초 이상 반복하면 안전하다고 좋음

해결법을 사용하여 하는것은 나와있는 PBKDF2, bcrypt 알고리즘을 이용하는 것이 좋다

양방향 암호와

평문을 복호화 할 수 있는 형태로 암호화, 대칭키와 비대칭키 알고리즘으로 나뉜다. 대칭키를 이용하는 AES와 비대칭키를 이용하는 RSA로 나뉜다.

대칭키 암호 알고리즘: 암호화와 복호화하는 키가 같은 알고리즘 대표적으로 AES

비대칭키 암호 알고리즘: 암호화와 복호화하는 키가 다른 알고리즘 RSA(소인수 분해기반)

🚑느낀점

내가 TIL를 하는 이유는 내가 알았던 개념과 이번 데브코스를 통해 새롭게 알게 된 내용을 비교해가며 단단한 지식?을 만들기 위해 작성하게 됐다. 오늘이 첫날인데 생각보다 제대로 못쓴거같아 마음에 걸린다. 아직 공부하는 단계이고 TIL 작성 자료를 보면서 나에게 맞는 TIL작성법을 찾아야겠다.

오늘 TIL를 통해 아직은 얕은 개념부터 시작했지만 호이스팅, 클로저, 네트워크 통신, 메모리 등 깊게 공부해서 포스팅을 해보는 것을 목표로 할 것이다.

아직 미숙하지만 계속 하다보면 익숙해질거라 생각이 들었다. 앞으로 남은 기간 아자아자 화이팅!!🙆‍♂️🙆‍♂️🙆‍♂️