[TIL] W1 / Day 2

alang·2021년 8월 3일
3

TIL

목록 보기
2/10
post-thumbnail

새롭게 배운내용


함수형 프로그래밍

- 함수가 최소 단위

good : 함수의 재사용성 높음
bad : 함수를 잘게 쪼개야해서 복잡해질수 있음

- 불변성을 지향

good : 1. 동작 예측 쉬움 2. 상태가 없어 사이드 이펙트 방지
bad : 상태 조작이 힘듬


객체지향 프로그래밍

객체 지향의 오해

  • 객체지향은 패러다임이다. 언어와 상관없음 ( 패러다임을 따르기 쉬운 언어가 있을뿐 )
  • 간단할땐 절차지향
  • 복잡할땐 객체지향

JavaScript에서 객체 생성 방법

  1. 객체 리터럴 {}
  2. Object
  3. 생성자 함수
  • Object.create 로 기존 객체 재활용 가능

Prototype을 사용하지않으면

  • 인스턴스 생성시, Method가 모두 따로 정의되어 메모리 낭비가 됨

모듈

  • 이전엔 스크립트 파일간의 통신을 위해 전역 스코프를 참조해야했음
    Script간 의존도 확인 힘듬
    실행 순서 제어의 번거로움

이를 해결하기 위해 모듈의 등장

모듈의 특징

  1. use strict로 실행
  2. 전역이 아닌 모듈 레벨 스코프
  3. 단 한번만 평가 ( 두번 import해도 한번만 참조 )
  4. 지연 실행

이벤트 루프

  • Task Queue에 들어간 Callback 함수는 Event Loop에 의해 Call Stack에 Push
  • *Call Stack이 비어있을때 Event Loop 작동

유니코드

  • 각 나라별 문자가 호환되는 표준 시스템 ( 이모티콘 포함됨)

CES

  • 주로 크기가 가장 작은 UTF-8로 인코딩

Big - Endian

큰 쪽에서 작은쪽으로 저장

Little - Endian

작은 쪽에서 큰 쪽으로 저장

  • emoji : 4byte (문자길이 2) , 영어,한글 : 2byte (문자길이 1)

JavaScript에서의 유니코드

  • \u를 통해 유니코드 표현

정규표현식

  • 성능은 매우느리다, 하지만 편하다.
  • 추천 작성 사이트 : https://rubular.com

연습 사이트 :

  1. https://regexone.com/
  2. https://alf.nu/RegexGolf

RegExp 기능

  • test : 찾는 패턴이 있는지 확인후 boolean 반환
  • exec : 일치한 패턴 정보를 반환

String 객체의 정규표현식 기능

  • match : 일치한 패턴 정보를 반환 (matchall : 일치한 모든 패턴을 반환)

  • replace : 일치한 패턴을 원하는 문자열로 변경 (모든 패턴을 변경할땐 뒤에 g를 추가)

  • search: 항상 처음 일치한 패턴만 반환

  • capture: 캡처가 적용된 정규표현식을 이용하면 list형태로 순차적 반환

  • \1 은 첫번째 캡처를 이용할때 ( 캡처 : (...) )


쿠키와 세션, 웹 스토리지

  • 쿠키를 통해 서버가 어떤 브라우저에서 요청이 온 것인지 알수있음.
  • Set-Cookie를 응답 헤더로 내려줌으로서 클라이언트에 저장됨
  • 키 = 값 : 옵션
  • 여러 옵션들
    • Expires : 쿠키 만료 날짜 지정
    • Secure : HTTPS에서만 쿠키 전송
    • HttpOnly : JavaScript에서 쿠키에 접근 못하도록 막는다. → Cross-Side Scripting Block(XSS) 을 막을 수 있음.
    • Max-Age : 쿠키 수명을 정한다. Expires는 무시됨
    • Domain: 도메인이 일치하는 요청만 쿠키가 전송됨
    • Path : 패스와 일치하는 요청만 쿠키 전송

쿠키의 취약점

  • XSS(Cross-Site Script) 공격을 당할 수 있다.

    • JavaScript를 이용해 악의적인 사용자가 다른 사용자의 쿠키값을 탈취 할 수 있다.
  • 쿠키를 암호화하지 않고 보내면 쿠키값을 중간에 탈취 당할 가능성이 있다.

    • HTTPS로 해결 가능

세션

  • HTTP Session Id를 식별자로 사용자 구분

세션의 문제점

  • 서버에 파일로 저장되어 사용자가 많아질때 부담
  • 서버가 여러대일경우 관리가 힘듬

해결방안

  • 서버와 클라이언트간 인증은 별도의 토큰 사용, 쿠키는 클라이언트의 자체적인 데이터 관리 용도로 사용

웹 스토리지

  • HTML5부터 등장
  • 로컬 스토리지와 세션 스토리지

로컬 스토리지

  • 저장했던 도베인과 이용하는 도메인이 다르면 접근 불가

세션 스토리지

  • 새 창, 탭을 생성할때마다 개별적으로 저장
  • 브라우저를 닫는 순간 사라짐
  • 같은 도메인도 세션이 다르면 접근 불가

JavaScript에서 성능 측정방법

  • Date 객체를 이용
const start = new Date().getTime();

// 프로그램 코드...

const end = new Date().getTime();

console.log(end-start);

오늘 느낀점


  1. 객체지향과 함수형 중 한쪽만 편애해서는 안된다. 상황에 맞는 패러다임을 사용할수 있어야한다
  2. 자바스크립트의 코드 처리과정을 Call Stack, Web API, Task Queue, event Loop 를 포함해 정리하자
  3. 정규표현식의 성능은 왜 느릴까?
  4. Expires 와 Max-Age는 중복으로 설정할 필요가 없는건가? 참고
    • Expires는 date값으로 전송되어지기 때문에 형식변환 과정이 번거로워서일까
    • 서버-클라이언트 간의 시간 차이에 따른 오류가 나서일까?
      • Expires의 date값은 서버가 아닌 클라이언트 기준의 GMT를 따른다 그렇다면 이러한 오류는 발생하지 않을것으로 보임
      • RFC 2109에서 사라진 Expires가 RFC 6265에서 다시 부활함. 혼용이 필요하다고 판단하지 않았을까 참고
      • 상황에 따른 용도로 선택,활용해도 좋겠다.
        • expires : 특정 날짜,시각
        • max-age : 진행된 시간
  5. 왜 XSS 공격을 막기위해 HttpOnly를 사용하는것이 SPA 때문에 어려울까
    • SPA가 뭘까
  6. TIL을 작성하는데 시간이 너무 소요된다. 이시간에 하나를 더 깊게 공부하는게 나을정도 , 더 간략화하자.

추가로 공부해야할것들...

  • 선언형 프로그래밍과 명령형 프로그래밍
  • 동시성
  • use strict가 뭐지?
  • CallStack, WebApIs, Task Queue, eventLoop를 통한 JavaScript의 코드 처리과정
  • BOM
  • 정규표현식은 왜 느릴까?
  • SPA란 , 왜 HttpOnly를 사용하는것이 어려울까
  • 서버와 클라이언트간 인증에 쓰이는 별도의 토큰이란
  • IndexedDB란 ( 새로운 웹 브라우저 표준 인터페이스 )

추가 과제


  • Microtask Queue, Animation frames에 대해 알아보자
  • 개미 수열을 정규표현식을 이용해 풀어보자

참고자료


eventloop이란?
set-cookies의 expires 와 max-age 차이
HTTP쿠키와 톰캣의 쿠키 프로세서 변천사
HTTP쿠키와 톰캣 버전별 이슈

profile
안녕하세요. 개발자 지망생입니다.

0개의 댓글