[프론트엔드 데브코스 TIL] 2023.09.21 2일차

SoJuSo·2023년 9월 21일
TIL국비지원교육코딩부트캠프프로그래머스 데브코스프론트엔드 데브코스
0

2023.09 ~ 2024.01 TIL

목록 보기
2/105

어제는 너무 강의를 정리한 느낌이 들어서 오늘은 중요한 내용이랑 추가적으로 필요한 내용 위주로 간단하게 기술하고자 한다.

데브코스 FE 2일차

네트워크 기초

브라우저에 URL을 입력하게 된다면?
1. URL해석
2. DNS 조회
3. 라우터를 통해 IP에 해당하는 서버로 이동
4. ARP를 이용한 MAC주소 변환

MAC주소가 필요한 이유?
MAC은 각 디바이스에 할당된 물리적인 주소이다. 실제 연결된 위치를 알기 위해서 알아야한다.
ex) 경기도 수원시 영통구 월드컵로 206(IP주소)를 보고 아주대라는 대략적인 위치를 알아도 그 안에 팔달관 333에 있는 홍길동(MAC주소)까지는 모르기에 맥주소가 필요한 것이다.

  1. TCP 통신을 통해 Socket을 연다.

    3 way handshake란?
    정확한 전송을 보장하기 위해 서버와 클라이언트가 사전에 세션을 수립하는 과정

    1. 클라이언트가 서버에게 접속을 요청하는 연결 설정(SYN) 플래그를 보낸다.
    2. 서버는 연결 설정 플래그가 들어온 것을 확인하고 연결 설정(SYN) + ACK(응답 확인) 플래그를 클라이언트에 전송하고 응답을 대기한다.
    3. 연결 설정(SYN) + ACK(응답 확인)을 확인한 클라이언트는 서버에게 ACK(응답 확인) 플래그를 보내서 연결이 성립된다.

    이렇게 연결되고 헤어질땐 4 way handshake로 헤어진다.

  1. 서버 응답 반환(HTML, CSS, JS 등 데이터)
  2. DOM Tree 구축 후 렌더링

과제
http가 있음에도 왜 https가 탄생했고 왜 필요한가?

일단 지금 알고 있는 지식으로는 보안때문이다. 기존 http 프로토콜은 중간에서 패킷을 가로채면 그 내용을 알 수 있었다. 즉 암호화가 안되어있는데 이를 방지하기 위한 암호화를 위해 TLS위에 HTTP 프로토콜을 추가해 인증서를 사용해서 보안된 HTTP 통신을 말하는게 HTTPS로 알고 있다.

https가 생겨서 무엇이 달라졌는가?

최초 연결 시 비대칭 키로 안전하게 세션키를 주고 받고 이후에는 대칭키로 통신을 하는 것..?
잘 모르겠다. 다른 분들한테 물어보거나 해야겠다..

컴퓨터 시간

개인 컴퓨터 - 메인보드에 있는 RTC라는 모듈을 사용한다. 결정 진동자를 통해 1초를 계산한다.
UNIX TIME - 1970년 1월 1일 0시 0분 0초..랜덤함수 였던가 사용할 떄 많이 봤었던 날짜다.
인터넷에서 NTP, 네트워크 타임 프로토콜을 통해 시간을 동기화 한다. 그리고 그 시계는 엄청 정확하다는 원자 시계 데이터를 동기화한다.

글로벌 서비스를 하거나 여러 이해관계로 시간을 TIME ZONE 뿐만 아닌 다양하게 적용하는 경우가 생긴다.

암호화

암호화 - 나쁜놈들한테 우리 데이터를 보호하기 위해 평문을 암호문으로 바꾸는 것

단방향 암호화
평문을 복호화가 불가능 하게 암호화한다. MD5, SHA알고리즘이 있다. 사용자의 비밀번호를 저장할 때 사용하는데 저장하는 사람도 알면 안되기 때문이다.

은근히 고려할 것이 많다.
Rainbow Table?? -> 해시함수(MD5, SHA-1, SHA-2 등)을 사용하여 만들어낼 수 있는 값들을 왕창 저장한 표라고 한다.
따라서 탈취당해도 원본을 알아볼 수 없도록 조작해야한다.

Salt - 임의의 문자열을 추가하여 암호화하는 방법. 128bit 이상 권장, 사용자마다 다르게 만들면 더 안전하다
Key stretching - 해시를 여러번 반복해서 원문을 알기 힘들게 한다. 0.2초 이상 반복되면 안전하다고 판단한다.
두 가지 방식을 사용하는 PBKDF2, bcrypt라는 검증된 알고리즘이 있다.

양방향 암호화
평문을 복호화할 수 있도록 암호화하는 방법

대칭키 암호 알고리즘
대표적으로 AES가 있다. 암.복호화의 키가 동일하다.

비대칭키 암호 알고리즘
대표적으로 RSA가 있다. 공개키와 개인키가 따로 존재한다. 소인수분해를 기반으로 만들었다.
JS에서 암호화를 하고 싶다면 crypto-js를 사용할 수 있다. bcrypt제외

함수형 프로그래밍

객체지향 - 객체간 통신하며 프로그램이 동작
함수형 - 데이터를 함수를 통해 새로운 데이터로 만드는 데이터 파이프라인의 형태로 동작한다.

함수형의 장점
함수 단위로 나뉘어 재사용성이 높다.
불변성을 지향하기에 예측이 쉽고 사이드 이펙트 문제를 방지한다.

단점
상태가 없기에 변수 조작이 안된다.
함수를 잘게 쪼개야하기에 더 복잡할 수 있다.
많은 숙련도를 요구한다.

명령형 프로그래밍 - 문제를 어떻게 해결하는지 컴퓨터에게 명령
선언형 프로그래밍 - 무엇을 해결해야 할지에 더 집중

결론 > JS는 멀티 패러다임이 가능하므로 객체지향 및 함수형을 혼용해서 쓰자!

객체지향과 프로토타입

객체는 현실에 있는 것을 추상화 한 것이다.

그렇다면 추상이란 무엇일까? -> 사물이 지니고 있는 여러 측면 중 특정한 부분만 추출하는 것

객체 지향이란 객체 위주로 설계하고 프로그래밍 하는 패러다임을 뜻한다. 각각의 객체가 메세지를 주고 받는다.

JS에서의 객체
클래스 기반의 언어처럼 속성과 행위(메서드)를 정의 할 수 있다.
객체 생성 방법

//객체 리터럴
const game = {
  name : "maple",
  company : "nexon,
}
//Object 생성자 함수
const game = new Object();
game.name = "maple";
game.company = "nexon";
//생성자 함수
function game(name, company){
  this.name = name;
  this.company = company;
}

프로토타입 객체를 이용하여 새로운 객체를 생성하는 방식
하위 객체는 상위 객체를 바라보며 하위 객체의 프로토는 상위 객체의 프로토를 링크한다. 이러한 프로토 타입은 기존 객체를 잘 활용할 수 있게 해준다.

이벤트 루프

어려운 개념이라 이곳저곳 사이트를 찾아봤고 모든 과정을 gif로 요약한 짤이 있어서 가져왔다.
아래 코드가 동작하는 과정이다.

const foo = () => console.log("First");
const bar = () => setTimeout(() => console.log("Second"), 500);
const baz = () => console.log("Third");
//
bar();
foo();
baz();


출처 : https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif

과제
Microtask Queue, Animation frames란?

모듈

예전 JS는 전역 스코프에서 동작했다. 파일 간 의존도를 확인하기 힘들고 실행 순서를 제어해야 한다는 한계점 때문에 모듈이 등장했다.

모듈을 통해 파일 간 의존도를 확인하고 실행 순서를 잘 제어할 수 있다.

모듈과 컴포넌트의 차이
모듈은 설계 시점에 의미가 있고 컴포넌트는 런타임 시점에 의미가 있다.

모듈의 특징

  • 항상 엄격 모드로 동작한다.
  • 모듈 레벨 스코프가 있다.
    -> 개인 프로젝트를 다시보며 스코프 체크해보기
  • 단 한번만 평가된다. 이후에 불러와도 이미 평가된 걸 불러와서 사용한다
  • defer 옵션을 넣지 않아도 지연실행 된다.

유니코드

유니코드에 이런 복잡한 개념들이 있을 줄은 몰랐다.
이 부분은 한번 알아보고 싶어서 주말에 따로 정리 할 예정이다.

정규표현식

정규 표현식은 매우 편하다. 하지만 느리다.
정규 표현식 연습 사이트1 https://rubular.com/
정규 표현식 연습 사이트2 https://regexone.com/
정규 표현식 연습 사이트2 http://alf.nu/RegexGolf?world=regex&level=r00

JS에서도 RegExp를 통해 생성하고 사용할 수 있다.
test(), exec(), match(), replace(), search(), capture() 함수 등을 다양한 용도로 사용하여 바꿀 수 있다.
replace()같은 경우 코테에서도 몇번 썼었는데 이외에도 사용할 수 있는 방법이 매우 많았다.

과제
개미 수열을 정규표현식으로 풀어보아라

쿠키와 세션, 웹스토리지

쿠키

  • 클라이언트에서 저장하고 관리하는 데이터이다. 브라우저를 종료해도 데이터는 유지된다.
  • Set-Cookie 명령어를 내려주면 클라이언트에서 저장한다.
    -> 여러 옵션이 있는데 만료 날짜, HTTPS 접근, JS 접근권한, 쿠키 수명, 도메인, Path 정보 등이 존재한다.
  • 클라이언트에서 자체적으로도 조작이 가능하다
  • 사용자 인증이 유효한 시간을 명시할 수 있으며, 유효 시간이 정해지면 브라우저가 종료되어도 인증이 유지된다

쿠키의 취약점
XXS 공격을 당할 수 있다. XXS란 권한이 없는 사용자가 악의적인 용도로 웹 사이트에 스크립트를 삽입하는 공격 기법이다. httpOnly를 사용해 HTTP 통신외에는 Cookie에 접근이 불가능하게 하여 방어할 수 있지만 최근 SPA로 구현되는 사이트에서는 AJAX를 이용한 통신을 할 때 쿠키가 필요하므로 취약점이 될 수 있다.

세션
서버는 쿠키 주인을 모른다. 그래서 그걸 보완하기 위해 세션이 등장했다. 서버측에 사용자 정보 파일을 보관하는 것인데 사람이 많이 몰리거나 서버가 여러대라면 문제가 발생하기 때문에 사용되지 않는다.

로컬 스토리지

  • 반영구적인 데이터 저장이 가능하다. 브라우저를 종료해도 데이터가 저장되어 있다.
  • 도메인이 달라질 경우 접근이 불가능해진다.
  • key, value형태로 저장된다.

세션 스토리지

  • 생명주기가 새 창에 종속된다. 브라우저나 탭을 종료하면 제거된다.
  • 도메인이 같아도 세션이 다르면 접근이 불가능하다.
  • 로컬 스토리지와 마찬가지로 key, value형태로 저장된다.

과제
indexedDB란?
IndexedDB는 사용자의 브라우저에 데이터를 영구적으로 저장할 수 있는 방법 중 하나입니다. IndexedDB를 사용하여 네트워크 상태에 상관없이 풍부한 쿼리 기능을 이용할 수 있는 웹 어플리케이션을 만들 수 있기 때문에, 여러분의 웹 어플리케이션은 온라인과 오프라인 환경에서 모두 동작할 수 있습니다. 라고 MDM문서에서 말한다.
즉 기존 스토리지보다 많은 양의 데이터를 클라이언트에 저장하기 위한 방법이라고 보면 되는 것 같다.

궁금증

  • 정규표현식은 왜 느릴까?

오늘 후기

24시간은 생각보다 긴 것 같다. 어제 스트레스를 받았는지 저녁에 아무것도 안하고 쉬니까 오늘은 또 괜찮다. 오늘은 뭔가 잘 정리한 것 같은데 길다.
오늘 TIL 작성 시간은 어제보다 짧게 걸렸지만 뭔가 많은 내용을 쑥 훑고가서 혼자 찾아보고 공부한 내용도 조금 많았다.
그래도 이렇게 누군가 방향성을 잡아주니 매우 좋다! 그리고 내일 하면 주말이다ㅎㅎ

profile
SoJuSo
Junior Frontend Engineer
이전 포스트

[프론트엔드 데브코스 TIL] 2023.09.20 1일차

다음 포스트

[프론트엔드 데브코스 TIL] 2023.09.22 3일차

0개의 댓글