프론트엔드 면접스터디 1주차 - CS

https://github.com/junh0328/prepare_frontend_interview
에서 문제를 가져왔습니다.

• 프로세스와 스레드 🔥

  • 프로세스가 뭔가요? (메모리, 프로그램, cpu, 자원공유)
    • 우리가 어떤 프로그램을 실행하게 되면 메모리에 해당 프로그램이 올라간다. 이 프로그램을 실행하고 있는 주체를 ‘프로세스’라고 부른다.
    • 프로세스는 CPU가 관리한다.
    • 프로세스 간에는 메모리 등의 자원을 공유할 수 없다. (프로세스는 서로 간의 자원에 접근 할 수 없다)
  • 스레드가 뭔가요? (프로세스를 구성하는 더 작은 실행 단위)
    • 프로세스가 할당 받은 자원을 사용하는 실행 흐름의 단위
    • 프로세스를 구성하는 더 작은 실행 단위!
    • 작업을 처리하는 일손 같은 개념
  • 프로세스와 스레드는 어떤 차이가 있나요? (자원 공유)
    • 스레드는 프로세스를 구성하는 더 작은 실행 단위
    • 프로세스는 다른 프로세스와 자원 공유 안함
    • 스레드는 같은 부모 프로세스의 스레드와 공유할 수 있다.

• 싱글 스레드와 멀티 스레드 🔥

  • 싱글 스레드
    • 작업을 처리하는 스레드가 하나뿐이기 때문에 한번에 하나씩 요청을 처리함
  • 싱글 스레드 장점 (데드락 x)
    • 멀티 스레드에서는 같은 프로세스 내에서 여러 스레드들이 자원 접근을 하기 때문에 데드락 상태가 발생하기 때문에, 자원 접근에 대한 동기화를 뮤텍스 같은 걸로 신경써야 하는데, 싱글 스레드에서는 이를 신경쓰지 않아도 된다.
  • 싱글 스레드 단점( 병목현상 )
    • 한번에 하나의 작업만 처리할 수 있기 때문에, 처리할 작업이 많다면 다음 작업이 밀리는 병목현상 발생
  • 멀티 스레드 장점 (병렬 처리, 작업 속도 향상)
    • 작업을 처리하는 일손이 여러개이기 때문에 병렬적으로 작업을 수행할 수도 있고, 작업 속도도 빠르다.
  • 멀티 스레드 단점 (데드락)
    • 여러 쓰레드가 하나의 자원을 공유하다보니 데드락 같은 문제가 발생할 수 있다. 고로 동기화 처리가 필요함

+) pcb = 프로세스 컨트롤 블럭. 커널단에서 프로세스를 관리할 때 정보가 필요한데, 그 정보를 담고 있는 구조?

pcb가

+) 컨텍스트 스위칭 = 프로세스가 많이 교체되면

하나는 브라우저로 영화를, 한개는 게임을 하고 있다.

동시에 실행하도록 하고 싶어서 cpu에서 계산했다뺐다하면,,, → 병목 현상이 일어남.

• HTTP 🔥

  • HTTP란 뭔가요? (웹 통신, 요청/응답)
    • 하이퍼텍스트 전송 프로토콜
    • 네트워크 장치 간에 정보를 전송하도록 설계된 애플리케이션 전송 프로토콜
    • 웹에서 통신할 때 사용하는 프로토콜.
    • HTML 문서와 같은 리소스를 전송하기 위해서 사용
    • 클라이언트와 서버 간의 요청/응답 프로토콜로 동작
  • HTTP 프로토콜의 가장 큰 특징은 뭔가요? (무연결성, 무상태성)
    • 무연결성: 클라이언트가 서버에 요청을 보내고, 서버가 응답을 한 후에 바로 종료
    • 무상태성: 서버가 클라이언트의 상태 정보를 유지하지 않음
  • URL은 뭔가요?
    • 인터넷 상에서 자원 위치를 나타내는 주소
  • HTTP/1.1 과 HTTP/2.0의 차이는 뭔가요?
    • 1.1 (한번에 한번의 요청과 응답만, 무거운 헤더 구조)
      • 클라이언트, 브라우저에서 리퀘스트가 하나 날아가면, 서버에서는 하나의 응답만 줬음.
      • 즉, 10개의 데이터가 필요하다면 10개의 리퀘스트가 필요하다.
      • 무거운 헤더 구조 → 헤더에 쿠키 등 많은 메타데이터가 들어가 있었는데, 압축되지 않아 무거웠음.
    • 2.0 (한번에 여러 요청과 응답 동시에 처리 가능, 서버 푸시, 무거운 헤더 구조 개선)
      • 한번에 여러 요청과 응답을 동시에 처리할 수 있다. → 효율적인 데이터 전송이 가능하다.
      • 멀티 플렉싱 사용하기 때문에, 병렬적인 스트림을 통해 데이터를 서빙하기 때문에 효율적인 데이터 전송이 가능하다.
      • 헤더 압축을 써서 무거운 헤더 구조 개선 (허프만 코딩 압축 알고리즘 사용하는 HPACK 압축 형식을 가진다)
      • 서버 푸시 기능 → 클라이언트가 요청하지 않는 리소스도 먼저 보낼 수 있다. (html 요청시 그 안에 있는 css, js를 미리 서버에서 푸시하여 클라이언트에게 전달할 수 있다)
  • HTTPS는 HTTP랑 뭐가 다른가요? (SSL/TLS 암호화 프로토콜 적용 여부)
    • HTTPS는 HTTP에서 SSL/TLS라는 보안 프로토콜을 사용해 데이터를 암호한다.
    • EX) 로그인 중에 비밀번호를 리퀘스트에 담아 보냈는데, HTTPS 를 적용하지 않으면 문자열 그대로 노출됨. HTTPS 면 암호화된 상태이기 때문에 유의미한 비밀번호 탈취할 수 없다.
  • 심화) 공개키 (비대칭키) 방식이 뭔가요?
    • 암호화 기법 중 하나로, 하나의 공개키 다른 하나는 개인키를 사용합니다. (키를 두개 들고 있음)
    • 공개키로 암호화된 데이터는 개인키로만 복호화할 수 있음.
    • 고로 복호화가 가능한 개인키는 탈취되어선 안된다.

• 쿠키 세션 🔥

  • 쿠키, 세션을 왜 쓰나요? 🔥🔥 (클라이언트가 서버에 누구인지 지속적으로 알기 위해)
    • HTTP의 특징 상, 클라이언트에서 요청 후 서버에서 응답을 주면 통신이 끊기고, 연결이 끊기면 상태를 남기지 않기 때문에
    • 유저가 로그인 관련 액션을 할 때 매번 로그인 인증을 해야함.
    • 이를 해결하기 위해 쿠키와 세션을 사용한다. (클라이언트가 서버에 누구인지 지속적으로 알려주기 위해)
  • 쿠키가 뭔가요? 🔥🔥 (브라우저의 메모리 혹은 파일로 저장되는 데이터)
    • 브라우저에 속하는, 클라이언트 브라우저의 메모리 혹은 파일로 저장되는 데이터
    • 유효기간이 있는 키-값의 쌍
    • 브라우저에 노출되기 때문에 탈취 우려가 존재
  • 세션이 뭔가요? 🔥🔥 (서버에 저장)
    • 서버 자체에 저장되는 것
    • 쿠키 보다는 상대적으로 보안에 우위
    • 지속시간, 만료시간 데이터 등 저장 가능
  • 보안을 위해서 http-only, same-site 옵션을 넣어줌
  • 쿠키와 세션의 차이는 어떤 점이 있을까요? 🔥🔥 (저장 위치와 보안)
    • 저장위치: 쿠키는 브라우저에 저장, 세션은 서버에 저장
    • 보관 기간: 쿠키는 설정된 만료 날짜에 맞춰서, 세션은 클라이언트가 서버에 접속한 후 로그아웃하거나 세션이 만료될때까지 보관한다
    • 보안: 브라우저에 저장되므로 보안에 취약, 조작 및 탈취 가능, 세션은 서버에 저장되므로 보안에 덜 취약 (보통 세션 쿠키로 세션 id 만 주고 받으니까)

• CORS 🔥

  • CORS가 뭔가요? (브라우저와 서버의 도메인이 일치하지 않는 경우)
    • 브라우저와 서버의 도메인이 일치하지 않아서 요청이 차단되는 현상
    • JS에서 fetch로 보내는 요청은 기본적으로 동일 출처 정책(same origin policy)을 따른다.
    • 많은 경우 다른 서버에 있는 자원을 공유 받기 때문에, cors 에러가 발생함. 그렇기 때문에 허용을 해줘야 한다.
    • 브라우저에서 요청을 보낼때 origin 헤더에 출처를 보냄 → 서버에서 access-control-allow-origin에 허용되는 출처를 담아서 보냄 → 브라우저에서 origin과 access-control-allow-origin을 비교하여 동일하지 않으면 cors에러 발생
  • CORS를 겪고 직접 해결해 본 경험이 있으면 말해주세요

+) 백엔드에서 화이트리스트로…

+) preflight request → option메서드로 보냄. 이때 cors에 와일드카드를 넣으면 에러가 난다.

• SaaS 🔥

  • SaaS가 뭔가요? (소프트웨어를 서비스로 제공, 설치나 관리할 필요x)
    • Software as Service
    • SaaS는 소프트웨어를 서비스로 제공하는 모델
    • 소프트웨어를 설치하거나 유지/관리할 필요없이 인터넷을 통해 액세스할 수 있다.
    • 슬랙이나 줌, 깃허브 같은 서비스
  • 기타 비즈니스 유형은 뭐가 있나요?
    • PaaS (개발, 배포를 위한 플랫폼 제공, 인프라 걱정 없음)
    • Platform as a Service
    • PaaS는 애플리케이션 개발 및 배포를 위한 플랫폼을 제공하는 모델
    • 서버, 네트워크, 데이터베이스와 같은 기본 인프라에 대한 걱정 없이 애플리케이션을 만들어서 실행 가능
    • 구글의 App Engine, Azure App Service 같은 서비스
    • IaaS
    • Intrastructure as a Service (가상화된 컴퓨팅 리소스 제공, 인프라를 필요에 따라 설정하고 관리)
    • 가상화된 컴퓨팅 리소스를 제공하는 모델
    • 가상머신, 스토리지, 네트워크 등의 인프라를 필요에 따라 설정하고 관리
    • 아마존 웹서비스 (AWS)의 E2C, 구글의 Compute Engine

• ~~개발 방법론 🔥~~

  • 폭포수 방법론이란 뭔가요?
  • 애자일 방법론이란 뭔가요?

• Cache 🔥

• 캐시란 무엇인가요? (원래 저장소보다 가까운데에 임시로 저장)

  • 캐시란, 어떤 데이터를 한번 받아온 후 그 데이터를 불러온 저장소보다 가까운데에서 임시로 저장하여, 필요 시 더 빠르게 불러오는 것.
  • 메모리 계층 구조: 디스크나 메인 메모리보다 더 빠르게 데이터를 불러와서 사용해야 할 때 쓰임
  • 데이터를 접근하는 속도를 줄일 수 있어, 성능을 향상할 수 있고 안정성을 높일 수 있다.
  • 브라우저에서 이미 방문한 웹 페이지의 리소스를 캐시하는 경우 (다시 다운 받지 않기 위해)
  • 로컬스토리지, 세션 스토리지 같은 웹스토리지를 사용하여 웹 페이지에서 사용하는 데이터를 캐싱
  • 전 세계에 분산된 서버를 사용하여, 접속한 지역과 가까운 서버로부터 웹 페이지의 리소스를 빠르게 제공함 → cdn은 자체적으로 캐싱하기 때문에 더 빠르게 응답

• CI CD 🔥

  • CI CD란 뭔가요? (지속적 통합 - 에러, 빌드 테스트, 지속적 제공과 배포 )
    • CI(Continuous Integration): 지속적 통합, CD(Continuous Delivery/Deployment): 지속적 제공과 배포
    • CI: 코드를 머지할 때 발생할 수 있는 에러를 테스트하기 위해서, 자동화된 테스트와 빌드과정을 추가하는 것
    • CD: 제공은 CI 작업을 통과한 내용을 자동으로 배포하도록

• CDN 🔥

  • CDN이란 뭔가요? (지역에 캐시 서버를 분산 배치, 물리적 거리를 줄여 로딩 줄임)
    • 콘텐츠 전공 네트워크 (Content Delivery Network)
    • 지리적 제약 없이 전 세계 사용자에게 빠르게 콘텐츠 제공하는 기술
    • 서버와 사용자 사이의 물리적 거리를 줄여 콘텐츠 로딩에 소요되는 시간 줄임
    • 각 지역에 캐시 서버를 분산 배치해서, 근접한 사용자의 요청에 원본 서버가 아닌 캐시 서버가 콘텐츠 전달한다.

• 테스트 🔥

  • 테스트란 무엇인가요?
    • 코드에 대한 변경사항이 예상대로 작동하는지 확인하는데 사용할 수 있는 소프트웨어 테스트 기법
  • 테스트의 예는 어떤 것들이 있나요?
    • 단위 테스트, 통합 테스트, 기능 테스트, 엔드투엔드 테스트 등이 있습니다.
  • 테스트는 왜 해야 하나요?
    • 작성한 코드가 의도대로 작동하는지 알 수 있다.
    • 개발 과정 중 예상치 못한 문제를 미리 발견할 수 있다.
  • 유닛 테스트란 무엇인가요?
    • 함수나 메서드 같은 작은 단위의 코드를 테스트하는데 중점을 둔다.
  • 통합 테스트란 무엇인가요?
    • 시스템의 여러 단위 또는 구성 요소 간의 상호 작용을 검증하는 테스트 유형
  • E2E 테스트란 무엇인가요?
    • end to end 테스트의 약자
    • 애플리케이션의 흐름을 처음부터 끝까지 테스트 하는 것

• business logic 🔥

  • business logic 이란 무엇인가요?
    • 프로그램의 핵심 로직

• Snippet 🔥

  • snippet 이란 무엇인가요?

• 웹팩 🔥

  • 웹팩이란?
    • 여러 개 파일을 하나로 합쳐주는 모듈 번들러다.
    • import/export 가 없었을때에는
  • 모듈이란?
    • HTML, CSS, JS 등의 파일들.
    • 우리가 여러개 파일을 만들어도 까보면? app.js 한 개만 있다.
  • 모듈 번들링이란? 이런 몇 백개의 HTML, CSS, JS들을 하나의 파일로 병합 및 압축해주는 동작
  • 웹팩이 등장한 이유 웹팩 사용 시에 이점
    • 빠른 로딩 속도와 높은 선능
    • 파일 단위로 개발하고 싶은 욕구 → 모듈의 필요성 → 웹팩이 등장
  • 바벨이란?
    • 트랜스 파일러
    • ES6 코드로 짰는데, 브라우저 호환을 위해서 알아서 ES5로 내려줌
  • 웹팩의 주요 속성 4가지

• 타입과 인터페이스 🔥🔥🔥

  • 타입스크립트를 왜 쓰나요? (본인이 느낀점)
    • 타입으로 인한 런타임 에러 해결
    • 코드에 대한 이해를 높여줌 (어떤 값이 들어와야하는지 명시)
  • 타입과 인터페이스의 차이를 아나요?
    • 타입은 객체 뿐만 아니라 다른 유형의 타입도 정의 가능
    • 인터페이스는 객체만 정의가 가능하다
    • 인터페이스는 extends로 상속이 가능하여 내부에서 캐싱을 한다.
    • 인터페이스는 선언적 확장이 가능하다. 같은 interface를 쓰면 자동으로 확장됨
  • 프로젝트 진행 시에 어떤 상황에서 타입을 쓰고 어떤 상황에서 인터페이스를 썼나요?
    • 주로 백엔드에서 받아온 데이터 정의할 때 썼다.