17.CS란 무엇인가요?

CS 지식이란 컴퓨터 공학적 지식을 말하며, 디자인 패턴, 자료 구조, 데이터베이스, 운영체제, 네트워크를 아우르는 지식을 말합니다. 이런 지식은 개발자가 비즈니스 로직을 구축하는 데 있어서 기초가 되는 상식.

기본적으로는 이렇게 있다..

프로그램

---

• 파일이 저장장치에 저장되어 있지만 메모리에는 올라가지 않은 상태. (정적인 상태)

프로세스

---

• 운영체제로부터 자원을 할당받은 작업의 단위. (컴퓨터가 어떤 일을 하고 있는 상태)

스레드

---

• 프로세스가 할당받은 자원을 이용하는 실행 흐름의 단위.
• 한 프로그램을 처리하기 위해 프로세스를 여러 개 만들려고 했지만 운영체제는 안전성을 위해 각 프로세스마다 자신에게 할당된 메모리 내의 정보만 접근가능하게 함.
• 스레드간 메모리 공유 가능.

싱글 스레드

---

• 하나의 프로세스에서 하나의 스레드 실행.
• 작업전환 작업을 요구하지 않음. (비용절감)
• 단순계산작업이라면 멀티보다 싱글이 더 효율적.
• 여러개의 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)

---

• 자주 사용하는 데이터나 값을 미리 복사해 놓는 임시 장소.
• 빠르게 웹 페이지 로딩 가능.
• 유저 브라우저에서 캐시가 바뀌지 않아 예전코드와 충돌하는 경우가 생길 수 있음. → 캐시 지우면 됨.