새롭게 배운내용
함수형 프로그래밍
- 함수가 최소 단위
good : 함수의 재사용성 높음
bad : 함수를 잘게 쪼개야해서 복잡해질수 있음
- 불변성을 지향
good : 1. 동작 예측 쉬움 2. 상태가 없어 사이드 이펙트 방지
bad : 상태 조작이 힘듬
객체지향 프로그래밍
객체 지향의 오해
- 객체지향은 패러다임이다. 언어와 상관없음 ( 패러다임을 따르기 쉬운 언어가 있을뿐 )
- 간단할땐 절차지향
- 복잡할땐 객체지향
JavaScript에서 객체 생성 방법
- 객체 리터럴 {}
- Object
- 생성자 함수
- Object.create 로 기존 객체 재활용 가능
Prototype을 사용하지않으면
- 인스턴스 생성시, Method가 모두 따로 정의되어 메모리 낭비가 됨
모듈
- 이전엔 스크립트 파일간의 통신을 위해 전역 스코프를 참조해야했음
Script간 의존도 확인 힘듬
실행 순서 제어의 번거로움
이를 해결하기 위해 모듈의 등장
모듈의 특징
- use strict로 실행
- 전역이 아닌 모듈 레벨 스코프
- 단 한번만 평가 ( 두번 import해도 한번만 참조 )
- 지연 실행
이벤트 루프
- 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
연습 사이트 :
RegExp 기능
- test : 찾는 패턴이 있는지 확인후 boolean 반환
- exec : 일치한 패턴 정보를 반환
String 객체의 정규표현식 기능
-
match : 일치한 패턴 정보를 반환 (matchall : 일치한 모든 패턴을 반환)
-
replace : 일치한 패턴을 원하는 문자열로 변경 (모든 패턴을 변경할땐 뒤에 g를 추가)
-
search: 항상 처음 일치한 패턴만 반환
-
capture: 캡처가 적용된 정규표현식을 이용하면 list형태로 순차적 반환
-
\1 은 첫번째 캡처를 이용할때 ( 캡처 : (...) )
쿠키와 세션, 웹 스토리지
- 쿠키를 통해 서버가 어떤 브라우저에서 요청이 온 것인지 알수있음.
- Set-Cookie를 응답 헤더로 내려줌으로서 클라이언트에 저장됨
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);오늘 느낀점
- 객체지향과 함수형 중 한쪽만 편애해서는 안된다. 상황에 맞는 패러다임을 사용할수 있어야한다
- 자바스크립트의 코드 처리과정을 Call Stack, Web API, Task Queue, event Loop 를 포함해 정리하자
- 정규표현식의 성능은 왜 느릴까?
- Expires 와 Max-Age는 중복으로 설정할 필요가 없는건가? 참고
- Expires는 date값으로 전송되어지기 때문에 형식변환 과정이 번거로워서일까
- 서버-클라이언트 간의 시간 차이에 따른 오류가 나서일까?
- Expires의 date값은 서버가 아닌 클라이언트 기준의 GMT를 따른다 그렇다면 이러한 오류는 발생하지 않을것으로 보임
- RFC 2109에서 사라진 Expires가 RFC 6265에서 다시 부활함. 혼용이 필요하다고 판단하지 않았을까 참고
- 상황에 따른 용도로 선택,활용해도 좋겠다.
- expires : 특정 날짜,시각
- max-age : 진행된 시간
- 왜 XSS 공격을 막기위해 HttpOnly를 사용하는것이 SPA 때문에 어려울까
- SPA가 뭘까
- 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쿠키와 톰캣 버전별 이슈
안녕하세요. 개발자 지망생입니다.