TIL 1일차

KHW·2021년 8월 2일
TIL
1

TIL

목록 보기
1/39

1. 브라우저 동작원리

1) 통신
2) 렌더링 : Dom을 화면에 그림
3) 스크립트 실행 : Dom 조작 동작

2. 핵심역량과 하지말것

1) communication
2) UI
3) 네트워크
4) 보안
5) 브라우저
6) 디자인

1) CS 무시
2) CSS 안하기
3) 코더가 되는 것 (Framework나 라이브러리만 잘 사용하는)

3. 변수와 상수

var는 호이스팅에 의해 사용하지않는다.
중요! => let const도 호이스팅은 되나 단지 TDZ에 의해 에러가 나는 처리가 발생한다.

변수 : 상황에 따라 바뀌는 값이 아닌 직접 할당한 값

let variable = 126
키워드 메모리상주소 = 값
화성시 경도25 위도35 = 집 // 언제든 집은 부수기 가능

상수 : 변하지 않는 수

4. 자료형

  1. Number => 숫자 , NaN , Infinity
  2. String
  3. Boolean
  4. Object
  5. Array
  6. Function
  7. Undefined => 아무런 값도 정의되지 않음
  8. Null => 해당 변수가 비었음을 사용자가 의도해서 사용

5. 할당/사용/해제

해제는 특히 Js는 Garbage Collector를 통해 사용하지 않는 메모리를 해제

JS Virtual machine

1) Heap : 참조 타입 존재
2) Call Stack : 원시 타입 존재

6. 변수의 사용

let  a = 10	//1
let  b = a	//2
a = a + 1	//3
b = a + 1	//4

1) a가 메모리 어느 곳에 10이라는 값을 할당
2) b가 a와 같은 메모리 공간의 10이라는 곳을 같이 가리킨다.
3) 원시구조인 a는 값이 변경되어 새로운 주소를 찾아 11을 할당
4) 원시구조인 b는 값이 변경되어 새로운 주소를 찾아 12를 할당
(이때 garbage collector에 의해 기존에 10이 들어있는 메모리는 제거)

7. 흐름제어

  1. control flow : 조건문
  2. data flow : 함수형 프로그래밍 방식 , pipe형태 (배열.메소드().메소드())

8. false 형태

if(false || undefined || null || 0 || NaN || '')
    console.log('?')

전부 false로 인식되므로 ?는 출력되지 않는다.

+a : 빈배열을 true로 인식한다.

9. 배열

1) new Array()
2) []
3) [배열값1, 배열값2...]
4) new Array(parameter 길이)

tmi

let a = [1,2,3]
a['abc'] = 100
a.length		//3

a의 경우 [1, 2, 3, abc: 100] 이지만 length는 배열 내부의 객체에 영향을 받지않는다.

tmi

배열.length = 값 형태는 사용을 지양한다. 배열이 쉽게 영향을 받기때문이다.
const a = 배열.length는 상관없음

10. 객체

1) new Object()
2) {}
3) {key:value, key1:value1}

객체값 추가

1) obj[key] = value
2) obj.key = value

객체값 삭제

delete 객체.key

객체 순회

for( key in obj ) 사용

객체의 키 값 존재 체크

key in 객체 사용
주의할 점으로 key는 문자열 형태로 해야한다.

obj = {a:1,b:2}
b in obj			//error
"b" in obj			//true
"c" in obj 			//false

11. 스코프와 클로저

스코프

유효범위로 지역스코프와 전역스코프로 나뉜다.

클로저

  1. 어떤 함수에서 선언한 변수를 참조하는 내부함수에서만 발생하는 현상
    (외부함수 outer에서 정의된 변수 a를 참조하는 내부함수 inner에서 발생하는 현상)
  2. 외부 함수의 LexicalEnvironment가 가비지 컬렉팅 되지 않는 현상
    (외부 함수 outer가 outer 실행컨텍스트가 종료된 후 해당 실행컨텍스트의 LexicalEnvironment가 가비지 컬렉팅에 의해 사라지지 않고 존재하여 필요시 사용할 수 있게 만든 것) => 어떤 값을 참조하는 변수가 하나라도 있기 때문
var outer = function(){
  var  a= 1;
  var inner = function(){
    return ++a;
  };
  return inner;
};

var outer2 = outer();
console.log(outer2());	//2
console.log(outer2());	//3

12. 네트워크

  1. url입력
  2. url 해석 => scheme는 프로토콜(http)이 들어가는 영역
  3. DNS 조회 => 미리 캐시확인 , hosts 파일 참조
  4. 해당 IP서버 이동
  5. ARP를 이용해 Mac주소로 변환 => 논리주소(Ip) to 물리주소(MAC)
  6. TCP통신을 위해 socket을 열어야한다. => 3way handshake
  7. 서버는 응답의 결과(html, js, css)를 반환
  8. 브라우저는 렌더링

3-way handshake

신뢰할 수 있는 연결을 하려면 데이터를 전송하기 전에 패킷을 3번 교환하는것

  1. 요청자가 서버에 SYN 요청보내기
  2. 서버가 요청을 받은 후 허가한다는 응답을 회산하기 위한 ACK를 보내면서 서버도 요청자에게 데이터 전송 허가를 받기위해 SYN을 보낸다.
  3. 서버에서 요청을 받은 요청자는 허가한다는 응답으로 ACK를 보낸다.

13. 컴퓨터 시간

1) 타임스탬프 : 특정한 시각을 나타내거나 기록하는 문자열 (ex) Tue 01-01-2009 6:00)
2) Unix time : 숫자로 표현된다. (ex) 1654894614)
3) UTC(협정세계시) : 1972년 1월 1일부터 시행된 국제 표준시
4)컴퓨터가 시간을 이해하는 방법 : 시스템 시간을 네트워크 타임 프로토콜(NTP)를 통해 서버에서 받아온다.

NTP를 이용하고 있는 것을 확인하기

w32tm /dumpreg /subkey:Parameters 명령어를 이용하면 NtpServer로부터 time을 처리하는 것을 확인 할 수 있다.

14. 암호화

  1. 단방향 암호화
  2. 양방향 암호화

단방향 암호화

복호화가 불가능한 기법으로 MD5, SHA 알고리즘이 있다.

  • 해당 기법은 여러값을 대입해 결국 값이 같아지는 레인보우 테이블을 이용한 해킹 사례가 있기에 좀 더 안전성있게 사용하기 위한 2가지 방법이 있다.
  1. Salt : 해시함수를 돌리기 전에 원문에 임의의 문자열을 덧붙이는 것 (말그래도 소금친다.)
  2. key Stretching : 해쉬함수를 여러번 돌린다.

양방향 암호화

평문의 복호화가 가능하며 대칭키와 비대칭키가 있다.

  • 비대칭키의 경우 공개키와 개인키로 나누어 진행하는데 예를들어 A가 B에게 전달하고 싶은 메세지에 대해 B의 공개키를 통해 암호화를 하고 이를 받은 B는 B의 개인키를 통해 복호화를 진행하여 해킹의 위험이 낮아진다. (해커가 몰래 볼려면 B의 개인키를 알아야하는데 어떻게 알꺼야)
profile
KHW
나의 하루를 가능한 기억하고 즐기고 후회하지말자

0개의 댓글