프론트엔드 면접 준비

minjeong·2023년 1월 10일
면접 준비
0

웹 프론트엔드 관련

PWA, 프로그레시브 웹 앱

  • 웹과 네이티브 앱의 기능 모두의 이점을 갖도록 수 많은 특정 기술과 표준 패턴을 사용해 개발된 웹 앱.
  • html, css, javascript와 같은 웹 기술로 만든 앱.

출처 PWA이란 무엇이며 왜 필요한가
출처 MDN PWA

브라우저

브라우저 렌더링

  • 클라이언트가 도메인을 웹 브라우저에 입력해서 서버로부터 HTML, CSS, script 파일 등을 전달받는다.
  • 웹 엔진의 HTML/XML Parser가 문서를 파싱해서 HTML -> DOM Tree, CSS -> CSSOM Tree를 만든다.
  • DOM Tree + CSSOM Tree -> 페이지를 렌더링하는 데 필요한 Render Tree를 만든다.
  • CSS 스타일 규칙이 적용되도록 위치, 크기 등의 모든 스타일링을 적용시킨다(Layout).
  • 렌더 트리의 노드를 실제 픽셀로 그린다(Paint).

script 태그

script 태그를 만나게 되면 JS 코드를 실행하기 위해 HTML/CSS 파싱을 중단한다고 한다. 외부 스크립트 참조를 위한 script 태그에 async 속성을 명시하여 브라우저가 페이지를 파싱하는 동안에도 스크립트가 실행되도록 하거나, defer 속성을 명시하여 브라우저가 페이지 파싱을 끝내고 나서 스크립트가 실행되도록 할 수 있다. 둘 다 명시하지 않을 경우 파싱 중 만난 script 태그의 스크립트를 받고 실행시키느라 브라우저의 파싱을 중단하므로 사용자에겐 화면이 지연되게 된다.

검색 엔진 최적화 SEO

  • 검색 엔진에 웹 사이트를 검색했을 때 그 결과를 페이지 상단에 노출시켜 많은 사람이 볼 수 있도록 최적화 하는 방법.
  • 캐노니컬 설정, 메타 설정, 페이지 속도 개선, 사이트맵 관리 등이 있다.
  • 캐노니컬 설정: <link rel="canonical" href="..."/>
  • 메타 설정: html 파일의 <meta> 태그 작성
  • 사이트맵 관리: sitemap.xml을 정기적으로 관리할 것.

웹 브라우저 캐시

(캐시: 데이터의 임시 저장소)

  • 쿠키
    • 만료기한이 있는 Key-Value 저장소.
    • 4KB까지 데이터 저장할 수 있고, 만료기한 지정 가능.
    • httponly 옵션을 설정하여야 document.cookie로 정보를 읽을 수 없게 할 수 있다.
    • 서버/클라이언트 모두 만료기한 지정 가능하나 보통 서버에서 지정한다.
  • 로컬 스토리지
    • 만료기한이 없는 Key-Value 저장소.
    • 10MB까지 데이터 저장할 수 있고, 도메인 단위로 저장/생성 가능.
    • 브라우저를 닫았다가 켜도 유지.
    • 클라이언트에서만 수정 가능.
  • 세션 스토리지
    • 만료기한이 없는 Key-Value 저장소.
    • 5MB까지 데이터 저장할 수 있고, 브라우저 탭 단위로 세션 스토리지를 생성.
    • 탭을 닫을 때 데이터 삭제.
    • 클라이언트에서만 수정 가능.

멀티프로세싱

  • 브라우저 프로세스: 주소 표시줄, 북마크 바, 뒤로/앞으로 가기 버튼 등의 기능 제공. 네트워크 요청이나 파일 접근 등의 권한 담당.
  • 렌더러 프로세스: 웹 사이트 출력의 모든 과정 제어.
  • 플러그인 프로세스: 웹 사이트에서 사용하는 플러그인 제어.
  • GPU 프로세스: GPU 이용해서 화면에 그리는 부분 제어.

RESTful API

  • RESTful API: 두 컴퓨터 시스템이 인터넷을 통해 정보를 안전하게 교환하기 위해 사용하는 인터페이스.
  • API: Application Programming Interface. 다른 소프트웨어 시스템과 통신하기 위해 따라야 하는 규칙.
  • REST: Representational State Transfer(REST). 클라이언트-서버 구현을 독립적으로 사용하는 아키텍처 스타일. REST는 통신에 HTTP 프로토콜을 사용한다.

REST API

  • HTTP 요청을 통해 통신하여 데이터 생성, 읽기, 업데이트 및 삭제 기능(CRUD)을 수행.
    • POST — 리소스 생성
    • GET — 리소스 가져오기
    • PUT — 리소스 업데이트
    • DELETE — 리소스를 삭제합니다.

출처 REST API

JavaScript

TypeScript

javascript vs typescript

  • typescript 컴파일러를 사용하여 .ts -> .js file로 변환하게 된다.
  • 정적 타입을 지원하므로 이에 대한 오류를 발견할 수 있다.
  • 클래스 기반 객체 지향 프로그래밍 언어로 상속, 캡슐화 및 생성자를 지원한다.

type vs interface

  • type과 interface는
  • interface는 객체에만 사용이 가능하다.

읽어보기 typescript interface vs type

CS 관련

Network

OSI 7계층

  • Application
  • Presentation
  • Session
  • Transport
  • Network
  • Data Link
  • Physical

TCP/IP 4계층

  • PDU 캡슐화: (Application) Message -> Segment/Datagram -> Packet -> Frame
    • PDU: Protocol Data Unit, 계층 간 데이터가 전달될 때의 단위
  • Application: Application + Presentation + Session
    • 사용자에게 서비스를 제공하고, 사용자는 응용 프로그램을 사용하는 프로토콜 계층
    • HTTP(웹), SMTP(전자메일 전송), SSH(암호화), DNS(도메인 네임<->IP주소 매핑), FTP(파일 전송)
  • Transport = Transport
    • 송신자/수신자, 서버/클라이언트를 연결하는 통신 서비스를 제공하는 프로토콜 계층.
    • TCP, UDP, QUIC
    • TCP: 패킷 사이의 순서를 보장한다. 연결 지향 프로토콜(3-Way HandShaking), SYN/ACK NUMBER를 이용한다. 신뢰성 있는 데이터 전달. 연결 해제(4-WAY HandShaking), FIN/ACK.
    • UDP:
  • Internet = Network
    • 장치로부터 받은 네트워크 패킷을 IP 주소로 지정된 목적지에 전송하는 계층.
    • 상대방이 제대로 받았는지 보장하지 않는 비연결형적 특징.
    • IP, ICMP
  • Link = Data Link + Physical
    • 전선, 광섬유, 무선 등 실질적으로 데이터를 전달하며 장치 간에 신호를 주고받는 '규칙'을 정하는 계층.
    • Ethernet

운영체제

사용자가 컴퓨터를 쉽게 다루게 해주는 인터페이스.

운영체제의 역할

  • CPU 스케줄링, 프로세스 관리
  • 메모리 관리
  • 디스크 파일 관리
  • I/O 디바이스 관리

운영체제의 구조

  • GUI
  • 시스템콜: 운영체제가 커널에 접근하기 위한 인터페이스. 커널 함수 호출할 때 사용.
  • 커널
  • 드라이버: 하드웨어 제어 소프트웨어

메모리

메모리 계층

속도 빠름 ---------------------------------------------------------> 속도 낮음
레지스터(CPU) - 캐시(L1, L2) - RAM:주기억장치 - HDD/SDD:보조기억장치
용량 작음 ---------------------------------------------------------> 용량 큼

가상 메모리

  • 메모리 관리 기법의 하나.
  • 메모리 자원을 추상화하여 메모리의 활용성 높이는 것이 목적.

페이지 폴트 Page Fault

  • 프로세스의 주소 공간에는 존재하지만 RAM에 없는 데이터에 접근할 때 발생.
  • 물리 기억장치부터, 혹은 RAM에서부터 해당 페이지를 가져와 동작한다.
  • Page vs Frame: 가상 메모리 최소 단위 <-> 실제 메모리 최소 단위

페이지 교체 알고리즘

  • FIFO: 캐시에 올라온지 가장 오래된 페이지를 교체한다.
  • LRU: Least Recentle Use, 캐시에서 사용한지 가장 오래된 페이지를 교체한다.
    • 해시 테이블과 이중 연결 리스트로 구현한다고 한다.
  • LFU: Least Frequently Use, 캐시에서 가장 적게 사용된 페이지를 교체한다.

프로세스

프로그램, 프로세스와 스레드

  • 프로그램: 파일 시스템에 존재하는 실행 파일.
  • 프로세스: 프로그램의 인스턴스. 컴퓨터에서 "실행되고 있는" 프로그램. CPU 스케줄링의 대상.
  • 스레드: 프로세스의 실행 가능한 가장 작은 단위. 프로세스 내 작업의 흐름.

데이터베이스

  • DataBase: 일정한 규칙, 규약을 통해 구조화되어 저장되는 데이터.
  • DBMS: 데이터베이스를 제어, 관리하는 통합 시스템. 쿼리 언어를 통해 CRUD 수행 가능.
  • 엔티티 -> 릴레이션: 여러 속성을 가진 정보 대상이 DB의 저장 단위가 된다.
    • ex. 이름/아이디/전화번호를 가진 회원 -> TABLE_USER(NAME, ID, TEL)
    • 관계형 DB에서는 '테이블'이 되고, NoSQL DB에서는 '컬렉션'이 된다.

ERD, Entity Relationship Diagram

  • 릴레이션 간의 관계를 정의한 것.
  • DB를 구축할 때 가장 기초적인 뼈대 역할이 된다.
  • 시스템의 요구 사항을 기반으로 작성된다.

정규화 DB Normalization

  • 릴레이션 간의 잘못된 종속 관계로 인한 이상 현상을 해결하거나, 저장 공간을 효율적으로 사용하기 위해서 등의 목적으로 릴레이션을 여러 개로 분리하는 것.
  • 정규형 원칙을 기반으로 만들어가며 1NF, 2NF, 3NF, BCNF 등이 있다.

트랜잭션 Transaction

  • DB에서 하나의 논리적 기능을 수행하기 위한 작업의 단위.
  • 여러 개의 쿼리를 묶은 단위.

데이터 무결성

데이터의 정확성, 일관성, 유효성을 유지하는 것을 말한다.

ACID

  • A, Atomicity = 원자성
    • 트랜잭션의 모든 명령은 데이터베이스에 모두 반영되거나, 전혀 반영되지 않아야 한다.
    • "all or nothing"
    • 수행 중에 오류가 생긴다면 전부 취소시키고 롤백되어야한다.
    • 커밋: 여러 쿼리가 성공적으로 처리되었다고 확정하는 명령어.
      • 커밋이 수행되었다 = 하나의 트랜잭션이 성공적으로 수행되었다
      • 커밋 종료 이후 DB에 영구 저장된다.
    • 롤백: 에러나 여러 이슈가 발생할 경우 커밋 시작 이전으로 돌리는 것.
    • 커밋과 롤백 덕분에 데이터의 무결성이 보장된다.
  • C, Consistency = 일관성
    • 허용된 방식으로만 데이터를 변경해야 한다.
    • 트랜잭션의 작업 처리 결과가 항상 일관되어야 한다는 뜻이다.
  • I, Isolation = 격리성
    • 트랜잭션 수행 시 어떤 트랜잭션이 다른 트랜잭션의 연산에 끼어들 수 없다.
    • 복수의 병렬 트랜잭션은 서로 격리되어 마치 순차적으로 실행되는 것처럼 작동되어야 한다.
    • 수행 중인 트랜잭션이 완전히 종료될 때까지 다른 트랜잭션에서는 DB 데이터를 참조할 수 없다.
    • 동시성과 격리성은 반비례하게 된다.
  • D, Durability = 지속성
    • 성공적으로 수행된 트랜잭션은 영원히 반영되어야 한다.

RDBMS, 관계형 데이터베이스

  • 행과 열을 가지는 표 형식 데이터를 저장하는 DB.
  • SQL이라는 언어를 사용해 조작한다.

Index

  • 추가적인 공간을 활용하여 DB 검색 속도를 향상시키는 자료구조.
  • 책의 목차와 같은 역할로, 인덱스를 만들어 둔 경우 먼저 인덱스에서 조회한 후 데이터의 물리적 주소를 접근해 가져오기 때문에 검색 속도가 향상된다.
  • 조건 검색(Where)에서도 Full Table Scan을 하지 않고 정렬된 인덱스 테이블에서 조회하므로 검색 속도가 빠르다.
  • 그러나 정렬된 상태를 계속 유지시켜야 하는 비용이 소모된다. INSERT/UPDATE/DELETE로 값이 바뀌면 다시 정렬해야 하는 문제가 있다.
  • 테이블의 전체 데이터 중 10-15% 이하의 데이터를 처리하는 경우에만 효율젖ㄱ이라고 한다.

Join

  • Inner Join: A∩B, 왼/오 두 테이블의 행 중 Join 조건을 양쪽에 부합하는 행만 표기
  • Left Outer Join: A, 왼쪽 테이블의 모든 행이 결과에 표기
  • Right Outer Join: B, 오른쪽 테이블의 모든 행이 결과에 표기
  • Full Outer JoinL A∪B, 왼/오 두 테이블의 모든 행을 표기 (Join 조건 만족하지 않아도)

자료구조/알고리즘

시간 복잡도

주어진 문제를 해결하기 위한 연산 횟수.
효율적인 코드로 개선하는 데 쓰이는 척도가 된다.

  • Big-O: Worst Case, 최악의 연산 횟수 표기
  • Big-Theta: Average Case, 보통의 연산 횟수 표기
  • Big-Omega: Best Case, 최선의 연산 횟수 표기

정렬 알고리즘 별 시간 복잡도

  • 삽입 정렬: O(n^2)
  • 선택 정렬: O(n^2)
  • 버블 정렬: O(n^2)
  • 퀵 정렬: O(n log n) <- 실제로는 O(n^2)이나 pivot을 잘 설정한다고 하면 평균적으로
  • 힙 정렬: O(n log n)
  • 병합 정렬: O(n log n)

자료구조 별 시간 복잡도

  • 배열: index로 접근하므로 읽고쓰기는 O(1), 탐색과 삽입/삭제는 O(n)
  • 스택: push/pop이므로 삽입/삭제는 O(1), 읽고쓰기와 탐색은 O(n)
  • 큐: enqueue/dequeue이므로 삽입/삭제는 O(1), 읽고쓰기와 탐색은 O(n)
  • double linked list: first/last node에서 접근 가능하므로 삽입/삭제는 O(1), 읽고쓰기와 탐색은 O(n)

(ㅋㅅㅋ 이전 회사 면접에서 상무님이 꼭 하신다고 했던 질문!)
Q. 스택과 큐의 차이, 두 자료구조의 사용 예시
A. 스택은 LIFO, 큐는 FIFO. 스택은 함수 호출, 웹 브라우저 방문 기록 등에 쓰인다. 큐는 CPU의 프로세스/스레드 자원 할당을 대기하는 Ready Queue로 사용되는 예시가 있다.

profile
minjeong
신입 개발자 👩‍💻
이전 포스트

디자인 패턴과 프로그래밍 패러다임

다음 포스트

Props/State

0개의 댓글