네트워크

브라우저에 url을 입력하면 잠깐 로딩이 되었다가 웹사이트가 뿅하고 보인다. 이 사이에 무슨일이 있었을까?

1. url 해석

스키마: 프로토콜(전자기기 간에 데이터를 교환하기 위한 통신 규약)이 들어가는 영역으로서 데이터베이스의 구조와 제약 조건에 관한 메타 데이터의 집합이다. 개념 스키마, 외부 스키마, 내부스키마가 있다.

https://coding-factory.tistory.com/216 from 코딩팩토리

계정정보 : ftp(file transfer protocol,TCP/IP 네트워크상의 장치가 파일을 전송할 떄 사용하는 규약)에 로그인이 필요하듯, 아이디와 패스워드 입력시 접속 허가를 해준다.

2.dns (domain name system)

도메인과 아이피 주소를 서로 변환해주는 시스템이다.
브라우저는 dns로 요청을 보내기 전에 몇가지 체크를 하는데,

• 해당 도메인을 알고 있는지?
• 없다면 로컬에 hosts 파일을 참조. 이미 정의가 되어있다면 내부적으로 아이피 반환

다음과 같은 사항을 체크하고, 위의 두가지 사항에 해당이 없으면 dns 호출한다.
root 서버->tld 서버->authoritative 서버 순으로 호출~!!
여기서 authoritative 서버가 실제 도메인과 ip 주소의 관계가 기록,저장,변경된다고 한다.

도메인 : 넓게는 ip주소를 무슨무슨.com 과 같이 바꿔주는 호스트 이름이고 좁게는 최상위 호스트네임(~.com,~.kr 등등)에서 하위 호스트네임(velog,naver 등등)을 일컽는 말이다.
서브 도메인: m.facebook, store.naver 같이 도메인 앞에 붙는 prefix

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

라우터를 거쳐서 이동하는데 동적라우팅(동적라우팅 프로토콜을 이용해 소스에서 대상까지 가장 빠른 경로를 찾는 방법)을 통해 이동한다.

라우터: 컴퓨팅 디바이스와 네트워크를 다른 네트워크에 연결하는 네트워킹 디바이스

4. arp(address resolution protocol)를 이용하여 mac 주소를 변환

논리 주소(번지수 대역을 통해 범위를 좁혀나가는 용도)인 ip를 물리적 주소(기계가 연결된 실제 위치) mac(Media Access Control Address)주소로 변환

네트워크 안에 arp를 브로드캐스팅-> 해당 ip주소를 가지고 있는 기기가 mac 주소 반환
비유하자면 라우터를 타고 타고 진짜 물리적 주소까지 간다 == 택배가 허브를 거쳐 주소로 간다

5.tcp 통신을 통해 서버의 socket을 열어야 한다.

실제 소켓을 열어 허락을 받아야 데이터를 전달 할 수 있다
tcp연결을 허락받기 위해 3way handshake가 실행
요청이 허락되면 데이터를 서버로 전달
3way-handshake : 1.클라이언트가 서버에게 syn(연결요청메세지) 전송 2.서버가 클라이언트에게 syn+1값==ack 를 보낸다& syn도 보낸다. 3.다시 클라이언트가 서버에게 ack를 보낸다.

6.데이터를 받은 서버는 데이터를 읽고 요청에 따라 처리

ex) url입력-> html 반환

7.브라우저는 html읽고 DOM트리 구성

참조 : https://velog.io/@busybusyworld/TIL-%EB%8D%B0%EB%B8%8C%EC%BD%94%EC%8A%A4-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8230602#%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EB%8F%99%EC%9E%91-%EC%9B%90%EB%A6%AC

http 있는데 왜 https 생김? => 보안을 위해서 암호화(대칭키, 비대칭키)를 추가했다고 한다~

🤔)주소에서 http://벨로그.아이오에서 //는 무슨 역할을 할까?

.
.
.
정답은 //은 딱히 있어도 없어도 상관이 없다. 팀 버너스리 형님께서 그냥 멋져보여서 붙여버렸기 때문...

그야...멋있으니까...!!

컴퓨터 시간은 어떻게 동작할까?

🤔시간이 뭘까?

사실 시간하면 그냥 달력보고 시계보면 되는거 아녀? 이렇게 생각할 수 있다. 하지만, 물리량, 위치, 천문현상, 문화, 역사 등등에 따라 시간을 정의하는 방법, 시간의 주기들이 각각 다르다.-> 전세계 모든 인구가 다 다르게 시간을 고려하고 있을 수 있다!!

🤩결론 : 시간을 국제적 약속을 통해 통일 시킬 필요성이 있다!!
그런 약속을 통해 나온게 협정 세계시(UTC)다.

(협정시)약속해줘~

컴퓨터가 시간을 표현하는 방법

하드웨어에 시스템 클럭이란게 있는데 특정시간(Epoch)를 기준으로 시스템 클럭의 틱을 센다. 이를 시스템 시간이라 부르고 이걸 값으로 표현하면 타임스탬프라고 한다. 운영체제마다 타임스탬프는 기준 시간과 단위가 다를 수 있는데, 유닉스 계열 운영체제에서 시간을 표시하는 방법은 Unix Time이라고 부른다.

시스템 클럭: rtc라는 모듈을 사용하는데, 메인보드에 붙어있어서 전원이 꺼져도 계속 작동한다. rtc안에 카운터 회로가 있고 그 안에 결정진동자가 있어서 그 결정진동자가 만드는 주파수를 이용해서 시간을 계산한다.

unix타임:1970년 1월 1일이 기준시. 초단위로 시간이 증가

컴퓨터가 어디서 시간을 받아오냐면,,,,

-> 네트워크 타임 프로토콜(NTP)를 통해 서버에서 시간을 받아온다!
ntp서버에 네트워크 요청을 하여 시간을 받을 수 있다. time zone 데이터를 통해 시간대의 데이터를 받아볼 수 있고, zone id 라는 대륙/도시의 identifier를 사용한다.

ntp서버 : 트리구조로 되어있고, 각각의 계층을 stratum이라고 부른다
최상위 계층을 prc(primary reference clock, 원자시계로 시간을 측정함)이라고 부른고, 하위 계층에 뿌려주는 구조이므로, 하위 계층일 수록 정밀도 떨어진다.

서비스를 운영하는데 시간을 어떻게 고려해야 할까? 단순히 타임존만 고려하면 될까?

• 생일, 기업 설립일, 기념일, 국경일 등은 순수하게 시간을 기록한다.
• 로깅 감사 시계열데이터 등은 사건이 발생한 시각만 고려해야 할 경우 utc를 사용한다.
• 결제 시각, 푸쉬알림시간, ui시각, 캘린더 : time zone써야 하기 때문에 zoneid가 사용자 정보에 저장되어 있어야 한다.

js에서는 간단하게는 date객체부터 라이브러리로는 date-fns,luxon 등을 사용할 수 있다.

암호화

평문을 암호문으로 변환하는 과정을 암호화라고 한다. 이해할 수 있는 걸 이해 못하게 바꾸는 것

내 머리속에 암호화ㅋ

단방향(해싱), 양방향 암호화가 존재한다.
해시 : 다양한 길이를 가진 데이터를 고정된 길이를 가진 데이터로 짝 지어놓은 값.

단방향 암호화

• 해시 알고리즘을 통해서 평문을 복호화 못하게 암호화한다.
• 비밀번호 같은 걸 서버에 저장할 때 많이 사용된다.(서버도 원래 암호가 뭐였는지 알면 안되기 때문이다.
• md5,sha-0,sha-1은 해시 충돌 가능성때문에 권장되지 않고,sha-2(sha-256,sha-512 등등)가 권장된다.

레인보우 테이블 공격에 대비해야한다.

레인보우 테이블 공격 : 미리 평문을 암호화 해놓은 데이터 베이스를 가지고 있다가, 암호화된 데이터를 탈취시키면, 데이터 베이스에 조회해서 평문을 알아내는 기법.

해결방안!🤩
salt, key stretching을 이용해 해결 가능

• salt: 평문에 임의의 문자열을 추가하여 암호화
• key stretching : 해시를 여러번 반복

이런 암호화에 사용되는 알고리즘은 직접 만드는 것 보다 이미 검증된 알고리즘을 사용하는 것이 안전하다. 대표적으로 PBKDF2, bcrypt같은 것들이 있다.

알고리즘은 사드세요

양방향 암호화

평문을 복호화 할 수 있는 형태로 암호화하는 방법. 대칭키 알고리즘과 비대칭키 알고리즘으로 나뉜다!

-대칭키 알고리즘: 암호화를 위한 키와 복호화를 위한 키가 같음 AES
-비대칭키 알고리즘: 암호화를 위한 키와 복호화를 위한 키가 다름 RSA(공개키를 이용해 암호문을 보내고 개인키로 복호화한다.)

자바스크립트에서는 crypto-js를 사용할 수 있다.

패러다임

패러다임 : 프로그래머에게 프로그래밍의 관점을 갖게 해주고, 결정하는 역할을 한다. 프로그래밍 세상을 바라보는 렌즈,색안경 같은거라고 생각한다.
프로그램은 순차 분기 반복 참조로 나눠지고 패러다임은 이를 어떻게 이용할 것인가를 다룬다

함수형 프로그래밍

• 데이터를 함수를 이용해 새로운 데이터로 만드는 데이터 파이프라인

• 함수형은 전환을 변수할당을 통해 통제

• 함수형 프로그래밍의 장점

  • 상태가 없기 때문에 사이드 이펙트가 없다
  • 재사용성이 높다
  • 코드가 짧고 간결하다

• 함수형 프로그래밍의 단점

  • 상태를 관리하기 위해 불필요한 메모리와 성능이 낭비될 수 있다.
  • 너무 많은 함수들을 관리하기 힘들 수 있다.
  • 코드를 짜는게 어려울 수 있다.

명령형 프로그래밍 vs 선언형 프로그래밍

명령형 프로그래밍

• 문제를 어떻게 해결해야 하는지 컴퓨터에게 명령을 내린다.

ex) if switch for...

• 선언형 프로그래밍
  무엇을 해야할지 컴퓨터에게 위임
  ex)pipe, 재귀...

객체지향 프로그래밍

• 객체를 이용해 데이터와 메소드를 묶고 객체간 통신
• 객체지향의 객체는 현실에 있는 것을 추상화한 것
• 객체지향 추상화의 최소단위는 객체
  추상화 : 사물이 지니고있는 여러 측면 중 특정한 부분만 보는것
  

장님이 코끼리 만지듯 특정한 부분만 보는것

• 객체위주로 설계하고,최소단위도 객체이다.
• 객체끼리 메시지를 주고 받고, 전환을 객체를 통해 통제한다.

오해?

c언어(절차지향언어)에서는 객체 지향프로그래밍을 할 수없다?
-> 언어와 패러다임은 관계가 없다

패러다임에 우위가 있다?
-> 간단한 프로그램의 경우 절차지향 복잡한 프로그램의 경우 객체지향이 유리

프로토타입

js에서는 클래스 기반 언어처럼 속성과 행위를 정의할 수 있다. 그 방법으로는

1. {}를 이용하여 만들기
2. new Object를 사용하기
3. 생성자 함수를 이용하여 만들기

가 있다.

프로토타입을 만드는 이유

공통으로 들어가는 부분을 공유하여 메모리를 아끼기 위함이다!
프로토타입을 이용하면 상위 객체를 복사하여 새로운 객체를 만들 수 있다.

효과적인 프로토타입을 위해서는

1. OOP의 상속 흉내내기: B라는 객체를 만들때, A라는 객체에 필요한 부분들이 있다.-> B객체 정의할때 A라는 객체를 활용

2. 부모 생성자를 빌려 쓸 수 있다.
   ->apply 함수 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/apply

3. object.create-> 기존 객체를 재활용 가능

이벤트 루프

자바스크립트는 싱글 스레드 언어이다. 콜스택이 하나이기 때문이다. 하지만? 멀티 스레드 언어인것 처럼 동작을 하는데 어떻게 된거냐면,,,,,

-> 브라우저(멀티쓰래드로 동작)에 이벤트 루프라는 시스템이 있어서 이벤트를 동시에 처리할 수 있다! 보통 이벤트 루프는 브라우저나 node.js에서 자체적으로 관리한다.

브라우저에서 제공하는 웹api(dom events,ajax,timer)등은 실행시킬 경우 브라우저에 위임된다. 웹api는 콜백함수를 넘기고 콜백함수의 비동기 작업이 끝나면 태스크 큐에 넣어지고 실행이 된다.

중요!! : 콜스택이 비어있어야만, 태스크 큐에서 콜스택으로 이동이 가능

참고
자바스크립트 동작 원리 : https://www.youtube.com/watch?v=v67LloZ1ieI from 코딩애플 유튜브
마이크로 태스크 큐 : https://ko.javascript.info/microtask-queue from javascript.info
애니메이션 프레임 : https://developer.mozilla.org/ko/docs/Web/API/window/requestAnimationFrame from mdn

모듈

웹사이트는 여러개의 자바스크립트로 이루어져있다.
자바스크립트는 파일들을 각각 별개의 프로그램으로 취급하는데, 만약 스크립트 파일이 마구마구 늘어난다면?

이러면 관리가 힘들어진다

옛날 자바스크립트는 스크립트간 통신을 위해 전역 스코프에 존재하는 변수와 함수를 사용해야 했다. 이게 뭐가 문제였냐면, 스크립트 파일간 의존도를 확인하기 힘들고, 실행 순서를 어렵게 제어해야했다.
-> 모듈을 사용하면 의존도 확인도 쉽고, 실행 순서 제어도 쉽다.

모듈vs컴포넌트

• 모듈은 설계 시점에 의미있는 요소(우리가 의식적으로 나눠 놓은것)
• 컴포넌트는 런타임시 의미있는 요소(나눠놓은 요소에 포함되어 실행되는 요소)

자바스크립트 모듈은 런타임에 실행되는데 왜 컴포넌트 아님?
->파일 하나가 프로그램이 되어서? 실제로는 디렉토리 단위를 모듈 개념에 가깝게 사용하는 경우가 많다

모듈의 특징

• 항상 엄격모드로 실행된다 -> 변수 선언 생략 불가
• 모듈레벨의 스코프가 있다 -> 최상위에 변수를 설정하더라도 모듈레벨 스코프에서만 머뭄
• 단 한번만 평가된다 -> 여러번 모듈을 불러와도 이미 있는걸 쓰지, 다시 불러오지 않는다.
• 지연실행이 된다.-> defer옵션을 넣지 않더라도 자동으로 지연실행이 된다.
• 모든 dom이 만들어진 후에 실행이 된다.

요즘에는 웹팩등을 이용하여 번들링한 스크립트를 불러오기 때문에 type="module"을 사용할 일이 별로 없다.

유니코드

웹에서 문자가 표현되는 방법이다.

(값 + 글꼴) ==렌더링엔진==> 표시 의 과정을 거친다.

ccs(coded character set)

• 문자들을 코드포인트에 대응시켜 만든 코드화된 문자들의 집합
• 코드포인트는 character의 식별자가 된다

코드포인트 : 문자 집합에 있는 문자의 숫자 표현!

ces(character encoding scheme)

• ccs를 8bit 집합에 대응시키는 것
• ccs와 ces는 일대일로 대응된다
• 인코딩이라고 부른다

tes(transfer edcoding syntax)

• 인코딩된 문자가 프로토콜을 타고 전송되도록 변환한것

정규표현식

정규표현식은 패턴을 이용하여 문자를 검색 대체 추출한다-> 성능은 느리지만, 이용이 편하다.

정규표현식 표현 방법

1. /(슬래시) 시작과 종료를 나타낸다.
2. 슬래시 안에 패턴을 집어넣음
3. 종료슬래시 뒤에 글자 하나를 써서 플래그를 세움

js에서는 new RegExp() 형식으로 정규표현식을 만들 수 있다.
배열,객체처럼 리터럴로 생성 가능하다.

정규식관련 메서드

• RegExp.prototype.test() : 찾는 패턴이 있으면 true 없으면 false
• RegExp.prototype.exec() : 입력받은 문자열에 찾는 패턴이 있는지 검색후 있으면 패턴정보 반환, 없으면 null 반환
• String.prototype.match() : 찾고자 하는 패턴이 있는지 검색하는 기능
• String.prototype.replace() : 찾고자 하는 패턴을 원하는 문자열로 바꾸는 기능
• String.prototype.search() : 패턴이 있는지 찾은후 위치정보를 반환하는데, 무조건 제일 처음 위치 반환

쿠키 & 웹스토리지

http 통신은 상태가 존재하지 않는다(단발성). 이게 뭘 뜻하냐면, 서버는 어떤브라우저에서 요청이 온건지 알지 못한다는 것이다.

하지만 헤더에 쿠키를 담으면 서버가 어느 브라우저에서 읽어 온 요청인지 알 수 있게된다.

쿠키 : 프론트엔드에서 저장 관리하는 데이터들. 브라우저를 닫아도 유지된다.

서버에서 set-cookie를 response헤더로 내려주면 클라이언트는 받아서 저장한다. 클라이언트에서 자체적으로 조작도 가능하고, 쿠키의 수명도 정할 수 있다.

쿠키관련속성

• Set-cookie :키벨류 형태, 클라이언트는 이 값을 파싱하여 알아서 쿠키에 데이터를 추가한다.
• Expire : 쿠키 만료날짜 지정
• Secure : https에서만 쿠키 전송
• HttpOnly : 자바스크립트에서 쿠키 접근 못하게 막음 크로스사이트스크립팅 공격 막을 수 있음
• Max-Age : 쿠키만료 날짜를 정한다. expire는 무시하고.
• Domain : 도메인이 일치하는 요청만 쿠키 전송
• Path : path와 일치하는 요청만 쿠키 전송

크로스사이트스크립트(xss) : 공격자가 상대방의 브라우저에 악성 스크립트가 실행되도록 해 나쁜짓을 마구마구하는 해킹공격방법이다. 특징으로는 spa한테는 잘 안통한다.

!) 쿠키를 암호화하지 않고 보내면 쿠키값을 중간에 탈취 당할 가능성이 있다.

내가 만든 HttpOnly cookie~ xss 막기 위해 구웠지~

세션

세션은 서버가 해당 서버로 접근한 클라이언트를 식별하는 방법이다.
단순히 쿠키만으로 서버가 클라이언트를 구분하지는 못하고, session-id를 식별자로 사용자를 구분한다.클라이언트는 session-id 를 쿠키 형태로 저장한다.(memory cookie)

세션의 문제점

세션은 서버에 파일로 저장되는데, 사용자가 엄청 많다던지, 서버가 여러대라면 어쩜?
-> 지금은 서버와 클라이언트간 인증은 JWT(JSON Web Token)같은 별도 토큰을 이용하고, 쿠키는 클라이언트 자체적으로 지속적인 데이터 관리 용도로 쓰인다.

JWT(JSON Web Token) : 공개/개인키 쌍으로 사용, 토큰 자체에 사용자의 권한정보등을 담는다.

세션스토리지

새창을 생성할때마다 개별적으로 저장
브라우저 닫으면 사라짐
세션이 다르면 데이터에 접근불가
키벨류 형태로 저장

웹 스토리지

• 쿠키대신 로컬데이터를 관리
• 데이터가 반 영구적으로 저장됨
• 브라우저 종료해도 데이터가 남음
• 저장했던 도메인과 이용하는 도메인이 다르면 접근 불가
• 키벨류 형태로 저장

실제 사용할때는...

쿠키는 스트링으로 관리해서 함수를 만들던가 라이브러리를 쓰던가 해야 쓰기 편하지만, 로컬스토리지는 setItem, getItem, removeItem 를 사용해서 사용이 간편하다.