프로그램
- 파일이 저장장치에 저장되어 있지만 메모리에는 올라가지 않은 상태. (정적인 상태)
프로세스
- 운영체제로부터 자원을 할당받은 작업의 단위. (컴퓨터가 어떤 일을 하고 있는 상태)
스레드
- 프로세스가 할당받은 자원을 이용하는 실행 흐름의 단위.
- 한 프로그램을 처리하기 위해 프로세스를 여러 개 만들려고 했지만 운영체제는 안전성을 위해 각 프로세스마다 자신에게 할당된 메모리 내의 정보만 접근가능하게 함.
- 스레드간 메모리 공유 가능.
싱글 스레드
- 하나의 프로세스에서 하나의 스레드 실행.
- 작업전환 작업을 요구하지 않음. (비용절감)
- 단순계산작업이라면 멀티보다 싱글이 더 효율적.
- 여러개의 CPU를 활용하지 못함.
멀티 스레드
- 프로그램을 다수의 실행 단위로 나누어 실행.
- 서버가 많은 요청을 효율적으로 실행할 수 있는 환경 제공.
- 멀티 스레딩을 위해 운영체제의 지원 필요.
HTTP (HyperText Transfer Protocol)
- 데이터를 주고 받기 위해 정의한 통신 포로토콜.
- Stateless 프로토콜이란 특징이 있음.
- Stateless: 시간에 따라 바뀌는 어떤 상태값을 갖지 않는 것.
- 데이터를 주고 받기 위한 각각의 데이터 요청이 독립적으로 움직임. (서버의 부하가 줄어듦)
HTTP1.1
- 커넥션 당 하나의 요청과 응답만 처리.
HTTP2.0
- 여러 개의 요청/응답 가능.
- 1.1에 비해 로드속도가 약 50% 빠름.
HTTPS
- HTTP에 데이터 암호화가 추가된 프로토콜.
- 통신요청을 보낼 때 서버만 알아볼 수 있도록 보냄.
- 인증받기 위해서 CA에 공개키를 전송하여 인증서를 발급 받아야 함.
URL (Uniform Resource Locators)
- 서버에 자원을 요청하기 위해 입력하는 영문주소.
- IP주소보다 기억하기 쉬움.
- 브라우저 — (url로 되어있는 http요청) —> 서버 (DNS를 통해 host에 해당하는 ip주로를 변환)
CORS (Cross Origin Resource Sharing)
- 브라우저가 관리해주는 최소한의 보안 정책.
- Origin: 1. scheme, 2. host, 3.port로 이루어진 도메인.
- 브라우저가 CORS 요청을 처리하는 이유는? → 모든 서버들이 다 CORS를 인지하지는 않기 때문.
- 브라우저는 쿠키와 인증정보에 관해서 매우 민감하기 때문에 함부로 보내주지 않음.
- 같은 Origin에서 http 통신을 하는 경우 알아서 쿠키가 요청 헤더에 들어가지만, 교차 출처로 하는 상황에는 그렇지 않음. → 그렇기 때문에 서버 또는 클라이언트에게 내가 어떤 요청을 보내는 지 알려줄 필요가 있음.
프론트 -> WithCredentials: true서버 -> Access-Control-Allow-Credentials: true - 만약 CORS오류가 생겼을 경우
- 서버 개발자와 소통.
- 개발 환경 프록시 설정.
- 프록시 서버 구축.
웹팩 (WebPack)
- 최신 프론트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러.
- 모듈 번들러: 웹 애플리케이션을 구성하는 자원을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구.
- 모듈: 프로그래밍 관점에서 특정 기능을 갖는 작은 코드 단위.
- 웹팩 사용시 이점
- 파일 단위의 자바스크립트 모듈 관리의 필요성.
- 중복되는 값 발생을 방지.
- 웹 개발 작업 자동화 도구. (Web Task Manager)
- 원래 코드 수정 뒤, 브라우저에서 새로고침을 해야했는데 이것을 자동으로 해줌.
- 웹 애플리케이션의 빠른 로딩 속도와 높은 성능.
- 미리 로딩하지 않고 그때그때 필요한 자원을 요청.
- 파일 단위의 자바스크립트 모듈 관리의 필요성.
바벨
- JS에서 지원하는 최신 문법들을 최대한 많은 브라우저환경에서 호환이 가능하도록 변환해주는 언어.
SEO (Search Engine Optimization)
- 검색 엔진이 웹 페이지의 자료를 수집하거나 순위를 방식에 맞게 웹 페이지를 구성하여, 겸색 결과의 상위에 나올 수 있게 하는 행위.
쿠키 (Cookies) 🍪
- 최대 4KB의 용량을 가진 매우 작은 데이터.
- 사이트에서 방문한 페이지를 저장하거나 유저의 로그인 정보를 저장하는 등 다양한 방법으로 사용됨.
- 문자열만 저장 가능.
- 쿠키정보는 브라우저에 저장됨. 모든 http요청과 함께 서버정보를 전달해 줌.
- 브라우저를 종료해도 정보가 남아있음. → 보안 취약
세션 (Session)
- 쿠키를 기반으로 하고 있지만, 쿠키와 달리 서버측에서 관리 함.
- 웹 브라우저가 서버에 접속해서 종료할 때까지 인증상태를 유지.
- 사용자 정보를 서버에 보관해서 보안상 쿠키보다 좋음.
- 따로 용량 제한이 없음.
- 그러면 쿠키말고 세션만 사용해도 되지 않을까? → 안정성은 좋지만 사용자가 많아지는 경우, 서버 메모리를 많이 차지해 속도가 느려질 수 있다는 단점도 존재함.
웹 스토리지 (Web Storage)
- HTML5이후 나온 새로운 저장소.
- 쿠키와 달리 모든 http요청에서 데이터를 주고 받을 필요가 없음.
- 데이터가 유저의 로컬디스크에 저장되어 있어서 손실 되지도 않고 전체 트래픽 낭비 양을 줄일 수 있음.
- 최대 5MB 저장 가능.
- 자바스크립트 코드를 삭제하지 않으면 자동으로 삭제되지 않음. (삭제를 명시해야 함)
- 해킹당하기 쉬워서 데이터 위협 수준이 매우 낮아야하고 저장된 데이터를 암호화 하는 것이 좋음.
- 로컬 스토리지 (LocalStorage)
- 브라우저에 반영구적으로 저장.
- 도메인이 다를 경우 접근 불가.
- 데이터 저장 만료기간 없음.
- 세션 스토리지 (Session Storage)
- 각 세션마다 데이터가 개별적으로 저장됨.
- 같은 도메인이라도 세션이 다르면 접근 불가.
- 데이터 저장 만료기간이 있음.
캐시 (Cache)
- 자주 사용하는 데이터나 값을 미리 복사해 놓는 임시 장소.
- 빠르게 웹 페이지 로딩 가능.
- 유저 브라우저에서 캐시가 바뀌지 않아 예전코드와 충돌하는 경우가 생길 수 있음. → 캐시 지우면 됨.
