{"id":16586194,"url":"https://github.com/heech1013/study-note","last_synced_at":"2025-03-06T07:54:20.980Z","repository":{"id":125640188,"uuid":"387113594","full_name":"heech1013/study-note","owner":"heech1013","description":"CS / Front-End를 공부하고 기록합니다. (2021.01~ 2021.11)","archived":false,"fork":false,"pushed_at":"2022-03-18T07:20:31.000Z","size":10855,"stargazers_count":23,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-16T19:24:58.124Z","etag":null,"topics":["computer-science","front-end","interview-questions"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/heech1013.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-07-18T07:08:48.000Z","updated_at":"2024-07-12T15:31:29.000Z","dependencies_parsed_at":null,"dependency_job_id":"b43fb4b4-f90c-493d-9475-2bb589255e08","html_url":"https://github.com/heech1013/study-note","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heech1013%2Fstudy-note","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heech1013%2Fstudy-note/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heech1013%2Fstudy-note/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heech1013%2Fstudy-note/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/heech1013","download_url":"https://codeload.github.com/heech1013/study-note/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242171561,"owners_count":20083554,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["computer-science","front-end","interview-questions"],"created_at":"2024-10-11T22:50:48.461Z","updated_at":"2025-03-06T07:54:20.949Z","avatar_url":"https://github.com/heech1013.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eStudy Note\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/heech1013/tech-interview-handbook/blob/main/self-taught.jpg\" alt=\"self-taught\" width=\"400\"\u003e\n\n\u003cbr\u003e\n\u003cbr\u003e\n\nCS / Front-End를 공부하고 기록합니다.  \n ( 2021.01 ~ 2021.11 )\n\n\u003e · 꼬리에 꼬리를 물고 `왜?`에 대해 탐구한다.  \n\u003e · 내용에 `핵심`만 담는다.  \n\u003e · 답안을 `병렬적`으로 작성한다.\n\n\u003cbr\u003e\n\n\u003c/div\u003e\n\n\u003cbr\u003e\n\n## Table of Contents\n\n- [CS](#cs)\n    - [Network](#network)\n    - [OS](#os)\n    - [Database](#database)\n    - [Data Structure \u0026 Algorithm](#data-structure--algorithm)\n    - [Etc](#etc)\n\n- [Front-End](#front-end)\n    - [Web](#web)\n    - [JavaScript](#javascript)\n\n- [Reference](#reference)\n\n\u003cbr\u003e\n\n## CS\n\n### Network\n\n### [(답변 보러가기 →)](https://github.com/heech1013/tech-interview-handbook/blob/main/network/README.md)\n\n일반\n\n- 주소창에 www.naver.com을 입력 후 접속했을 때의 무슨 일이 일어날까?\n\nOSI 7계층\n\n- OSI 7계층이란?\n- OSI 7계층이 필요한 이유는?\n- OSI 7계층과 TCP/IP 4계층을 비교해본다면?\n\nOSI Physical Layer(물리 계층, 1계층)\n\n- OSI Physical Layer란?\n\nOSI Data-link Layer(2계층)\n\n- OSI Data-link Layer란?\n- TCP/IP Network (Interface) layer(1계층)란?\n- 데이터 링크 계층의 주요 역할은?\n- 2계층에서 데이터가 hop-by-hop으로 전달된다는 것의 의미는 무엇일까?\n- 프레이밍이란?\n- 프레임의 구조(필드)는?\n- MAC 주소란?\n- MAC 주소와 IP 주소의 차이점은?\n- MAC 주소의 종류에는 어떤 것들이 있을까?\n- 스위치란?\n- 스위치의 포워딩 방식에 대해 설명해본다면?\n- MAC 주소 테이블이란?\n- MAC 주소 테이블이 동작하는 과정은?\n- LAN과 WAN의 차이점?\n- 접근 제어란?\n- 흐름 제어(Flow control)란?\n- 오류 제어란?\n- 이더넷이란?\n- 이더넷의 특징?\n- 이더넷의 장단점?\n\nOSI Network Layer(3계층) \u0026 TCP/IP Internet Layer(2계층)\n\n- OSI Network layer(TCP/IP Internet layer)란?\n- 라우터란?\n- 라우팅이란?\n- 정적 라우팅과 동적 라우팅이란?\n- 포워딩이란?\n- 포워딩 테이블이란?\n- 스위치와 라우터의 차이점은?\n- 스위치와 라우터의 공통점은?\n- AS(Autonomous System, 자치 시스템)란?\n- IP(Internet Protocol)란?\n- 네트워크에서 '신뢰성'이 의미하는 것은?\n- ICMP(Internet Control Message Protocol)란?\n- IP의 데이터그램 단편화(fragmentation)란?\n- IP 데이터그램 단편화/재조립에 사용되는 IP 헤더의 종류에는 어떤 것들이 있을까?\n- IPv6란?\n- ARP(Address Resolution Protocol)란?\n- ARP 테이블이란?\n- 같은 LAN 상에서의 전송에서 ARP가 진행되는 과정은?\n- DHCP(Dynamic Host Configuration Protocol, 동적 호스트 구성 프로토콜)란?\n- DHCP의 장단점?\n- DHCP에서 IP 주소를 할당 받으면 영원히 사용할 수 있을까?\n- DHCP가 ip주소를 임대해주는 절차? `보충`\n\nOSI Transport Layer(4계층) \u0026 TCP/IP Transport Layer(3계층)\n\n- Transport Layer란?\n- network layer(3계층)와 Transport Layer(4계층)와의 차이점은?\n- Transport Layer가 흐름 제어를 제공하는 방법?\n- 혼잡 제어(Congestion control란?\n- Transport Layer가 혼잡 제어를 제공하는 방법?\n- AIMD(합 증가/곱 감소)란?\n- Slow start(느린 시작)란?\n- Fast retransmit(빠른 재전송)이란?\n- Transport Layer가 오류 제어를 제공하는 방법은?\n\nTCP \u0026 UDP\n\n- TCP(Transmission Control Protocol)란?\n- UDP(User Datagram Protocol)란?\n- 연결형 서비스와 비연결형 서비스의 차이점은?\n- 데이터그램 방식과 가상 회선 방식이란?\n- 가상 회선 방식에서 논리적 연결이 설정되는 과정은?\n- 회선 구성 방식에는 어떤 것들이 있을까?\n- 전이중, 반이중, 단방향 방식에 대해 설명해본다면?\n- TCP와 UDP는 각각 어떤 특성의 서비스에 적합할까?\n- 3-way handshake의 과정에 대해 설명해본다면?\n- 4-way handshake의 과정에 대해 설명해본다면?\n- 왜 2-way handshake는 성립될 수 없을까?\n\nOSI Application Layer(응용 계층, 7계층) \u0026 TCP/IP Application Layer(4계층)\n\n- Application Layer란?\n\nDNS\n\n- DNS(Domain Name Server)란?\n- 도메인 네임(domain name)이란?\n- 도메인 네임의 구조?\n- DNS에서 도메인을 얻어오는 과정은?\n- PC는 local DNS의 ip 주소를 어떻게 알고 있을까?\n- DNS의 구성 요소는?\n- 도메인 네임 스페이스란?\n- 네임 서버란?\n- 네임 서버의 종류는?\n- resolver란?\n- DNS가 사용하는 전송 계층(Transport Layer)의 프로토콜은?\n- DNS에 UDP를 사용하는 이유?\n\n로드 밸런싱(Load Balancing)\n\n- 트래픽이 증가해 기존의 컴퓨팅 자원으로 서비스할 수 없을 때, 대처할 수 있는 2가지 방법은?\n- 로드 밸런싱이란?\n- 로드 밸런싱 알고리즘에 대해 설명해본다면?\n- 각 계층의 로드 밸런서에 대해 설명해본다면?\n\n[(목차로 돌아가기)](#table-of-contents)\n\n\u003cbr\u003e\n\n---\n\n### OS\n\n### [(답변 보러가기 →)](https://github.com/heech1013/tech-interview-handbook/blob/main/os/README.md)\n\n운영체제\n\n- 운영체제란?\n- 운영체제의 역할은?\n\n프로세스와 스레드\n\n- 프로세스란?\n- 메모리는 어떻게 구성되어 있을까?\n- 스레드란?\n- 스레드가 필요한 이유는? (스레드의 장점은?)\n- 프로세스와 스레드의 차이점은?\n- 스레드를 지원하는 주체에 따라 나눈다면 어떻게 나뉠까?\n- 사용자 레벨 스레드의 장단점?\n- 커널 레벨 스레드의 장단점?\n- 멀티 프로세스와 멀티 스레드의 차이점은?\n\n스케줄링\n\n- Context Switching(문맥 교환)이란?\n- Context Switching이 필요한 이유는?\n- Context Switching이 진행되는 과정은?\n- Context에는 어떤 정보들이 있을까?\n- Context Switching는 어떤 상황에서 진행될까?\n- PCB(Process Control Block)란?\n- PCB가 가지고 있는 정보에는 어떤 것들이 있을까?\n- 프로세스의 상태가 전이되는 과정은? (프로세스 상태 전이도의 흐름은?)\n- 인터럽트(Interrupt)란?\n- 인터럽트의 종류에는 어떤 것들이 있을까?\n- 인터럽트가 동작하는 순서는 어떻게 될까?\n- 시스템 콜(System Call)이란?\n- 시스템 콜이 필요한 이유는?\n- 커널 모드(Kernel mode)와 사용자 모드(User mode)란?\n- 시스템의 성능을 어떤 기준으로 측정할까?\n- (참고) 용어\n- 스케줄링의 주기에 따라 3가지로 나눈다면 어떻게 나뉠까?\n- 선점형 스케줄링과 비선점형 스케줄링의 차이?\n- 자원 관리에 있어서 time sharing과 space sharing의 차이는?\n- FCFS(First Come First Service)란?\n- Round Robin이란?\n- SPN(Shortest Process Next)이란?\n- SRTN(Shortest Remaining Time Next)란?\n- HRRN(High Response Ratio Next)이란?\n- MLQ(Multi Level Queue)란?\n- MFQ(Multi level Feedback Queue)란?\n\n동기화\n\n- 동기화란?\n- 동기화가 필요한 이유는?\n- Critical section(임계 구역)이란?\n- Race condition(경쟁 상태)이란?\n- Mutual exclusion(상호 배제)이란?\n- Mutual exclusion에 사용되는 기본 연산(primitive)의 조건은?\n- Mutual exclusion을 SW로 구현한 알고리즘에는 어떤 것들이 있나?\n- Dekker's algorithm을 설명해본다면?\n- Dekker's algorithm을 더 자세히 설명해본다면? (간단하게 코드로 표현해본다면?)\n- SW로 구현한 상호 배제 알고리즘의 단점은?\n- HW로 구현한 상호 배제 알고리즘에는 어떤 것들이 있나?\n- TAS(TestAndSet)란?\n- TAS를 이용해 ME가 보장되는 과정을 조금 더 자세히 설명? (코드로 설명?)\n- OS로 구현한 상호 배제 알고리즘에는 어떤 것들이 있나?\n- 스핀락이란?\n- 스핀락은 어떤 특성의 프로세스에서 사용하기 적절할까?\n- 뮤텍스란?\n- 뮤텍스는 어떤 상황에서 사용하기 적절할까?\n- 스핀락과 뮤텍스의 차이점은?\n- 세마포어란?\n- 세마포어에 사용되는 연산의 종류와 그 로직은?\n- 스핀락/뮤텍스와 세마포어의 차이는?\n\n데드락\n\n- 데드락(dead lock, 교착 상태)이란?\n- 데드락이 발생하기 위한 조건은?\n- 데드락을 처리하는 방법은?\n- 데드락 회피 알고리즘 중 하나를 설명해본다면?\n- 데드락 탐지 알고리즘 중 하나에 대해 설명해본다면?\n\n가상 메모리\n\n- 가상 메모리란? (메모리 가상화란?)\n- 메모리의 가상화가 필요한 이유는?\n\n주소 변환(address translation)\n\n- 주소 변환이란?\n- 주소 변환이 필요한 이유는?\n- 주소 변환을 구현한 기술에는 어떤 것이 있는지?\n- base and bound란?\n- 베이스 레지스터란?\n- 바운드 레지스터(bound register)란?\n- 바운드 레지스터가 타 프로세스 메모리 침범을 막는 방법은?\n- base and bound에서 운영체제의 역할은?\n- base and bound에서 프로세스의 주소 공간을 옮기려면 어떻게 해야 하나?\n- base and bound의 장단점은?\n- base and bound의 내부 단편화 문제란?\n\n세그멘테이션(segmentation)\n\n- 세그멘테이션이란?\n- 세그먼트란?\n- 세그멘테이션에서 가상 주소로부터 물리 주소를 얻는 과정은?\n- 세그먼트의 바운드 레지스터의 역할은?\n- 하드웨어가 가상 주소에서 세그먼트의 종류와 오프셋을 파악하는 방법은?\n- 가상 주소 변환에 있어서 스택과 나머지 종류의 세그먼트 간 차이는?\n- 하드웨어는 세그먼트가 어느 방향으로 확장해야 하는지 어떻게 알 수 있을까?\n- 세그멘테이션이 메모리 공유를 지원하는 방법은?\n- 세그멘테이션을 위한 운영체제의 역할은?\n- 세그먼트 테이블이란? `보충`\n- 세그멘테이션의 장단점은?\n- 외부 단편화란?\n- 외부 단편화에 대한 대응 방안은?\n- 압축이란? 진행되는 과정은?\n- 압축의 단점은?\n- 빈 공간 리스트를 관리하는 알고리즘에는 어떤 것들이 있으며, 각각의 장단점은?\n\n페이징(Paging)\n\n- 페이징이란?\n- 페이징이 등장하게 된 배경은?\n- 페이징의 장단점은?\n- 페이징에서 물리 메모리의 구성은 어떻게 다른가?\n- 페이지 테이블(page table)이란?\n- 페이지 테이블 엔트리(PTE, Page Table Entry)란?\n- PTE의 구성 요소에는 어떤 것들이 있는지?\n- 페이징의 가상 주소에서 물리 주소를 얻어내는 과정은?\n- 현재 실행 중인 프로세스의 페이지 테이블 위치를 어떻게 알 수 있을까?\n\nTLB\n\n- TLB(Translation-Lookaside Buffer, 변환-색인 버퍼)란?\n- TLB가 필요한 이유는?\n- TLB가 도입된 상태에서 가상 메모리 참조 시 일어나는 과정은?\n- (TLB의) 지역성 2종류와 적용된 예시에 대해 설명?\n- TLB 미스를 처리하는 방법에는 어떤 것들이 있을까?\n- TLB 미스 트랩 핸들러가 실행될 때 TLB 미스가 나지 않도록 대응 방안?\n- TLB Cache가 설계된 방식은? (cache의 associativity와 관련하여)\n- TLB 각 항목의 구성은?\n- 페이지 테이블의 valid bit와 TLB의 valid bit 간 차이점은?\n- TLB에는 여러 VPN이 공존할 수 있다. 하지만 그럴 경우 여러 프로세스 간 VPN을 구분할 수 없다. 이에 대한 방안은?\n- 캐시 교체 정책에는 어떤 것들이 있나?\n- LRU란?\n- Random 정책이란? 장단점은?\n- TLB coverage를 벗어난다는 것의 의미는?\n\n스와핑(Swapping)\n\n- 스와핑이란?\n- swap in과 swap out에 대해 설명?\n- page fault란?\n- 스와핑이 지원되는 상황에서 메모리가 참조되는 과정을 설명?\n- 운영체제가 Page fault를 처리하는 과정은?\n- 운영체제가 페이지 교체(스왑) 알고리즘을 작동시키는 시기는?\n- 페이지 교체(스왑) 알고리즘이 작동될 때(즉, 여유 공간이 최솟값보다 적어질 때) 일어나는 일은?\n\nBlocking/Non-Blocking \u0026 Synchronous/Asynchronous\n\n- Blocking과 Non-Blocking의 차이점?\n- Synchronous와 Asynchronous의 차이점?\n- Blocking + Sync 조합에 대해 설명해본다면?\n- Non-Blocking + Sync 조합에 대해 설명해본다면?\n- Blocking + Async 조합에 대해 설명해본다면?\n- Non-Blocking + Async 조합에 대해 설명해본다면?\n\n[(목차로 돌아가기)](#table-of-contents)\n\n\u003cbr\u003e\n\n---\n\n### Database\n\n### [(답변 보러가기 →)](https://github.com/heech1013/tech-interview-handbook/blob/main/database/README.md)\n\n인덱스\n\n- 인덱스(index)란?\n- 인덱스를 사용하면 검색 속도가 빨라지는 이유는?\n- 인덱스가 작동하는 과정(순서)은?\n- 인덱스를 Hash Table로 구현하지 않는 이유는?\n- B-Tree란?\n- B+Tree란?\n- B-Tree보다 B+ Tree가 갖는 이점은?\n- 범위 검색이 Hash table보다 B+ Tree에서 이점을 갖는 이유는?\n- 인덱스의 장단점은?\n- 인덱스를 생성하기에 적절한 컬럼의 특성은?\n- 인덱스를 생성하기에 적절하지 않은 컬럼의 특성은?\n- DML(INSERT, DELETE, UPDATE)을 수행할 때 인덱스를 사용하는 컬럼에 대해 추가로 해줘야 하는 작업은?\n- 인덱스를 생성/조회하기 위한 SQL문 작성 방법은?\n\n트랜잭션\n\n- 트랜잭션이란?\n- 트랜잭션의 성질에는 어떤 것들이 있을까?\n- 트랜잭션의 연산에는 어떤 것들이 있을까?\n- 트랜잭션의 상태를 설명해본다면?\n- 트랜잭션의 고립 수준에 따라 발생 가능한 읽기 이상 현상(Read Phenomena)에 대해 설명해본다면?\n- 트랜잭션의 고립 수준 유형에 대해 설명해본다면?\n- 트랜잭션의 고립 수준과 동시성과의 상관 관계는?\n\n정규화\n\n- 정규화란?\n- 제1 정규화에 대해 설명?\n- 제2 정규화에 대해 설명?\n- 제3 정규화에 대해 설명?\n- BCNF에 대해 설명?\n- 데이터베이스의 이상 현상(Anomaly)에는 어떤 것들이 있을까?\n- 정규화의 단점은?\n- 반정규화(De-normalization)란?\n\n키\n\n- 키란?\n- 슈퍼키란?\n- 후보키란?\n- 기본키란?\n- 대체키란?\n- 외래키란?\n\nSQL Query\n\n- SQL이란?\n- JOIN이란?\n- INNER JOIN이란?\n- OUTER JOIN이란?\n- LEFT (OUTER) JOIN / RIGHT (OUTER) JOIN이란?\n- CROSS JOIN(카티전 조인)이란?\n- JOIN에서 ON과 WHERE의 차이점은?\n- (OUTER) JOIN에서 (ON과 WHERE를 이용해서) 차집합을 구하는 방법은?\n\nDBMS\n\n- DBMS란?\n- DBMS를 사용했을 때의 장점은?\n- RDBMS란?\n\n[(목차로 돌아가기)](#table-of-contents)\n\n\u003cbr\u003e\n\n---\n\n### Data Structure \u0026 Algorithm\n\n### [(답변 보러가기 →)](https://github.com/heech1013/tech-interview-handbook/blob/main/data-structure-and-algorithm/README.md)\n\nData Structure\n\n- 스택과 큐에 대해 설명해본다면?\n- 연결 리스트(Linked List)란?\n- 그래프와 트리란?\n- 이진 탐색 트리(Binary Search Tree, BST)란?\n- 이진 탐색 트리의 연산에 대해 설명해본다면?\n- 불균형한 이진 탐색 트리의 검색 연산을 보완하기 위한 방법은?\n- 힙이란?\n- 힙의 삽입과 삭제 연산에 대해 설명해본다면?\n- 우선순위큐를 구현하는 방법에는 어떤 것들이 있을까?\n- 해시 테이블(Hash Table)이란?\n- 해시 값의 충돌을 해결하는 방법에는 어떤 것들이 있을까?\n\nAlgorithm\n\n- 코딩 인터뷰 팁\n- 정렬의 종류에는 어떤 것들이 있을까?\n- 퀵 소트의 피벗 지정 방식을 어떻게 개선할 수 있을까?\n- n번째 피보나치 수를 구하는 방법은?\n- DFS와 BFS의 시간 복잡도는?\n\n[(목차로 돌아가기)](#table-of-contents)\n\n\u003cbr\u003e\n\n---\n\n### Etc\n\n### [(답변 보러가기 →)](https://github.com/heech1013/tech-interview-handbook/blob/main/etc/README.md)\n\n객체 지향 프로그래밍(OOP)\n\n- 객체 지향 프로그래밍이란?\n- 객체 지향 프로그래밍의 장단점은?\n- 절차 지향 프로그래밍이란?\n- 클래스와 인스턴스(객체)란?\n- 오버로딩(Overloading)과 오버라이딩(Overriding)의 차이점은?\n- 객체 지향 5대 원칙에 대해 설명해본다면?\n\n[(목차로 돌아가기)](#table-of-contents)\n\n\u003cbr\u003e\n\n---\n\n## Front-end\n\n### Web\n\n### [(답변 보러가기 →)](https://github.com/heech1013/tech-interview-handbook/blob/main/web/README.md)\n\n브라우저\n\n- 브라우저의 렌더링 과정에 대해 설명?\n- 레이아웃과 리페인트의 차이점은?\n- 레이아웃과 리페인트의 성능상 차이점은?\n- DOM이란?\n- DOM의 개체 구조에 대해 설명?\n- DOM은 HTML과 1:1로 매핑되는가?\n- HTML 문서에서 script 파일을 어디에 위치시키는 것이 좋을까?\n- 스크립트 로딩이 HTML 파싱을 방해하는 이유는?\n- script를 body 태그 최하위에 놓는 것의 한계는? 그 대안은?\n- script 태그의 defer 속성에 대해 설명?\n- 여러 defer script 간 script가 실행되는 순서는?\n- defer script를 사용할 때 주의해야 할 점은?\n- script 태그의 async 속성에 대해 설명?\n- 여러 async script 간 script가 실행되는 순서는?\n- defer script와 async script가 각각 어느 경우에 유용한가?\n\n성능\n\n- 웹에서 서비스의 성능을 측정하는 방법은?\n- 브라우저에서 DOMContentLoaded와 load 이벤트가 발생하는 시점은?\n- 브라우저에서 이벤트가 발생하는 시점을 측정하는 방법은?\n- 브라우저 기준으로 성능을 측정하는 것의 한계(단점)은?\n- 사용자 기준에서 성능을 측정할 수 있는 지표들에 대해 아는 것이 있는지?\n- 사용자 기준에서 성능을 측정하는 방법은?\n- 웹 페이지 로딩을 최적화할 수 있는 방법에는 어떤 것들이 있을까?\n- 블록 리소스 최적화에 대해 설명?\n- 리소스 요청 수 줄이기에 대해 설명?\n- 리소스 용량 줄이기에 대해 설명?\n- 웹 페이지 렌더링을 최적화할 수 있는 방법에는 어떤 것들이 있을까?\n- 레이아웃 최적화에 대해 설명?\n- 애니메이션 최적화에 대해 설명?\n\nHTTP\n\n- HTTP란?\n- HTTP의 특징?\n- HTTP가 비연결성으로 설계된 이유가 뭘까?\n- HTTP의 비연결성으로 인한 단점이 뭐가 있을까?\n- HTTP의 비연결성을 해결하기 위한 방법?\n- Keep-Alive를 사용하는 방법?\n- Keep-Alive의 장점?\n- Keep-Alive의 단점?\n- 무상태성을 해결하기 위한 방법?\n- HTTP 요청/응답 메시지의 구성(형식)은?\n- HTTP Method에는 어떤 것들이 있나?\n- GET과 POST의 차이?\n- 멱등성이란?\n- GET과 HEAD의 차이?\n- POST와 PUT의 차이?\n- PUT와 PATCH의 차이?\n- OPTIONS 란?\n- OPTIONS가 언제 사용될까?\n- CORS의 preflight request의 목적은?\n- (참고) 주요 HTTP 응답 코드\n- 인증과 인가의 차이점은?\n- HTTP 헤더에는 어떤 것들이 있을까? `보충`\n- HTTP의 보안 취약점은?\n\nHTTPS\n\n- HTTPS란?\n- HTTPS를 통해 얻을 수 있는 이점은?\n- HTTPS가 암호화 채널을 수립할 때 사용하는 암호화 프로토콜은?\n- SSL 인증서란?\n- SSL 인증서의 역할은?\n- SSL 인증서에 포함된 정보는?\n- SSL 인증서가 서비스를 보증하는 과정은?\n- SSL 통신 과정을 설명해본다면?\n\nHTTP/2\n\n- HTTP/2 이전 버전들의 성능 제한 이슈는? (HTTP/2가 등장한 이유는?)\n- HTTP/2의 목적은?\n- HTTP/2가 제공하는 주요 기능에는 어떤 것들이 있나?\n- HTTP/2는 HTTP의 의미 체계를 대체(변경)하는지?\n- HTTP/2의 바이너리 프레이밍 계층이란?\n- HTTP/2의 스트림, 메시지, 프레임에 대해 설명?\n- HTTP/2가 요청, 응답 다중화를 지원하는 원리는?\n- HTTP/2의 요청, 응답 다중화를 통해 얻을 수 있는 이점은?\n- HTTP/2의 (출처당) 단일 연결을 통해 얻을 수 있는 이점은?\n- HTTP/2에서 스트림 우선순위를 지정하는 과정은?\n- HTTP/2의 서버 푸시에 대해 설명?\n- HTTP/2의 헤더 압축에 대해 설명?\n\n쿠키 \u0026 세션\n\n- 쿠키란?\n- 쿠키는 어떻게 구성되어 있나?\n- 쿠키를 생성하는 방법은?\n- 쿠키를 요청 메시지에 어떻게 설정하나?\n- 요청 메시지에 쿠키가 어디에 들어가있나?\n- 쿠키의 단점은?\n- 쿠키의 성능 상 단점을 보완하기 위한 대안은?\n- 쿠키의 보안적 취약점?\n- 쿠키의 보안적 취약점에 대한 대안은?\n- 쿠키가 만료되는 시점은?\n- 세션이란?\n- 세션을 생성하는 절차는?\n- 세션의 데이터가 유지되는 기간은? (만료되는 시점은?)\n- 쿠키와 세션의 차이점?\n- 세션의 장점에도 불구하고 쿠키를 사용하는 이유?\n\nlocalStorage \u0026 sessionStorage\n\n- localStorage(또는 sessionStorage)란?\n- 쿠키 대신 사용하는 이유는?\n- localStorage과 sessionStorage의 차이점은?\n\nCORS\n\n- CORS란?\n- origin(출처)이란?\n- 같은 출처, 다른 출처를 판단하는 기준은?\n- SOP(동일 출처 정책)란?\n- SOP가 존재하는 이유는?\n- SOP가 교차 출처로 삽입하는 리소스를 허용하는 경우는?\n- 브라우저와 서버 중 CORS를 판단하는 주체는?\n- CORS가 동작하는 방식은? (브라우저가 CORS를 판단하는 방법은?)\n- CORS가 동작하는 세 가지 시나리오에 대해 알고 있는지?\n- Simple Request란? (+ 과정을 설명해본다면?)\n- Simple Request를 사용할 수 있는 조건은?\n- Preflight Request란? (+ 과정을 설명해본다면?)\n- Credentialed Request란?\n- Credentialed Request를 사용하는 방법은?\n- credentials에 옵션이 same-origin(그리고 같은 출처 간 통신일 때)이거나 include일 때 브라우저가 추가로 확인하는 조건은?\n- CORS를 해결할 수 있는 방법은?\n- 프록시 서버를 활용해 CORS 에러를 해결하는 과정은?\n- CORS(혹은 Access-Control-Allow-Origin)의 단점?\n- JSONP란?\n- JSONP를 활용하는(동작하는) 과정에 대해 설명?\n- JSONP가 더 이상 사용되지 않는 이유는?\n\nREST\n\n- REST란?\n- REST의 특징은?\n- Uniform Interface란? (더 자세히 설명?)\n- Uniform Interface가 필요한 이유는 뭘까?\n- REST의 구성은?\n- REST에서 정의하는 CRUD Operation과 그에 해당하는 HTTP Method는?\n- REST의 장단점?\n- REST API란?\n- REST API의 규칙은?\n\n보안 공격(XSS/CSRF/SQL Injection)\n\n- XSS란?\n- XSS를 방지하기 위한 방법은?\n- CSRF란?\n- CSRF를 방지하기 위한 방법은?\n- SQL Injection이란?\n- SQL Injection 중 아는 종류가 있는지?\n- SQL injection의 대응 방안은?\n\nWeb Server \u0026 WAS\n\n- Static Page와 Dynamic Page의 차이점은?\n- 웹 서버란?\n- 웹 서버의 기능은?\n- WAS(Web Application Server)란?\n- WAS의 기능은?\n- 웹 서버가 필요한 이유는?\n- WAS가 필요한 이유는?\n- WAS로 웹 서버와 애플리케이션 서버 기능을 모두 수행하지 않는 이유는?\n\nCSR / SSR / SPA\n\n- CSR이란?\n- SSR이란?\n- SSR의 장점?\n- SSR의 단점? `보충`\n- SPA란?\n- 전통적인 웹 방식은 어땠나?\n- SPA의 장점?\n- SPA의 단점?\n- SPA를 하면 SEO에 문제가 생기는 이유? `보충`\n- SPA의 단점 - 초기 구동 속도를 극복하기 위한 방법?\n- SPA의 단점 - SEO 최적화 문제를 극복하기 위한 방법? `보충`\n- Routing이란?\n- SPA에서 routing이 어려울 수 있는 이유?\n\n프론트엔드 개발의 흐름과 철학\n\n- 단방향 바인딩과 양방향 바인딩의 차이는?\n- 양방향 데이터 바인딩의 장단점은?\n- 단방향 데이터 바인딩의 장단점은?\n- (참고) 데이터 상태 관리의 흐름에 대하여\n\n이벤트 버블링 \u0026 캡처 \u0026 위임\n\n- 이벤트 버블링이란?\n- 이벤트 캡쳐란?\n- 이벤트 캡쳐를 구현하는 방법은?\n- 이벤트 전파를 막는 방법은?\n- 이벤트 위임이란?\n- 이벤트 위임을 사용함으로써 얻을 수 있는 이점은?\n\nAjax\n\n- Ajax란?\n- Ajax의 이점? 사용 이유?\n- Ajax를 사용하는 방법은? Ajax가 동작하는 원리는?\n\nJSON\n\n- JSON이란?\n- 다른 데이터 포맷과 비교하여 JSON의 이점?\n- JavaScript 객체를 JSON으로 변환하는 방법은? 그 반대는?\n\n웹팩 \u0026 바벨\n\n- 웹팩이란?\n- 모듈 번들러란?\n- 모듈이란?\n- 모듈 번들러(혹은 웹팩)이 필요한 이유는?\n- 파일 단위로 모듈을 관리하지 않을 때의 문제점?\n- 웹팩이 파일 단위로 모듈을 관리하기 위해 사용하는 방법은?\n- 웹을 개발할 때 반복되는 작업에는 어떤 것들이 있을까?\n- 모듈 번들러(혹은 웹팩)이 웹 로딩 속도를 어떻게 개선할 수 있을까?\n- 엔트리(entry)란?\n- 아웃풋(output)이란?\n- 로더란?\n- 로더의 예시에는 어떤 것들이 있을까?\n- 플러그인(plugin)이란?\n- 바벨이란?\n- 트랜스파일이란?\n\n모듈 시스템\n\n- 모듈을 사용함으로써 얻을 수 있는 장점은?\n- 자바스크립트 모듈을 구현하는 대표적인 '명세'에는 어떤 것이 있을까?\n- AMD와 CommonJS가 어떻게 다를까?\n- ES2015(ES6)의 ES Module없이 모듈의 문제점을 어떻게 해결할 수 있을까?\n- IIFE 방식으로 모듈을 사용하는 방법은?\n\n컴포넌트\n\n- 프론트엔드에서 컴포넌트란?\n- 좋은 컴포넌트를 설계하기 위해 따를 수 있는 원칙에는 어떤 것들이 있을까?\n\n기타\n\n- URI와 URL의 차이는?\n- 웹 접근성(Web Accessibility)\n- HTML5\n\n[(목차로 돌아가기)](#table-of-contents)\n\n\u003cbr\u003e\n\n---\n\n### JavaScript\n\n### [(답변 보러가기 →)](https://github.com/heech1013/tech-interview-handbook/blob/main/javascript/README.md)\n\n언어의 특징\n\n- JS의 언어적인 특징?\n- 인터프리터 언어와 컴파일 언어의 차이점?\n- 인터프리터 언어와 컴파일 언어의 장단점?\n- 프로토타입 기반 언어란?\n\n엔진 \u0026 런타임\n\n- JavaScript 엔진의 구성은?\n- JavaScript 런타임이란?\n\n객체(Object)\n\n- Object(객체)란?\n- 객체를 생성하는 방법은?\n\n프로토타입(Prototype)\n\n- 클래스 기반의 객체지향 프로그래밍 언어와, 프로토타입 기반의 객체지향 프로그래밍 언어(JavaScript)의 차이점은?\n- prototype이란?\n- 프로토타입을 사용하는 이유는? (활용되는 예시는?)\n- (참고) `[[Prototype]]` \u0026 `__proto__` \u0026 `prototype`\n- 프로토타입이 결정되는 시기는?\n- prototype chain이란?\n- 프로토타입 객체를 확장하는 방법은?\n- 값을 할당할 때와, 참조할 때 프로토타입 체인이 동작하는 여부?\n- 프로토타입 객체를 동적으로 변경하는 방법은?\n- 프로토타입 객체를 동적으로 변경하기 이전에 생성된 객체와, 이후 생성된 객체의 차이점은?\n\nClass `보충`\n\n- (참고) Class의 constructor\n\nClosure\n\n- Closure란?\n- Closure의 동작 원리를 (실행 컨텍스트와 관련하여) 설명?\n- Closure의 활용법?\n- Closure의 상태 유지가 전역 변수에 비해 갖는 이점?\n- 렉시컬 스코핑(lexical scoping)이란?\n- Closure의 단점?\n- Closure가 참고하고 있는 메모리를 해제해주려면 어떻게 할까?\n- 클로저로 인해 자주 발생하는 실수에는 어떤 것들이 있을까? `보충`\n\nthis\n\n- this란?\n- this의 값이 결정되는 방식을 설명?\n- 함수가 '일반 함수로서' 호출될 때 this가 바인딩되는 객체는?\n- 전역객체란?\n- Browser-side와 server-side에서의 전역객체가 어떻게 다른가?\n- 그러면 함수가 '일반 함수로서', 함수의 내부 함수나 메소드의 내부 함수, 콜백 함수 등으로서 호출될 때는?\n- 함수가 '일반 함수로서' 호출되었을 때 this가 전역 객체를 참조하는 것을 회피하는 방법이 있을까?\n- 함수가 '메소드로서' 호출될 때 this가 바인딩되는 객체는?\n- 그러면 함수가 '프로토타입 객체의 메소드로서' 호출될 때는?\n- 함수가 '생성자 함수로서' 호출될 때 this가 바인딩되는 객체는?\n- 객체 리터럴 방식과 생성자 함수 방식의 차이는?\n- 명시적으로 this를 바인딩하는 방법?\n- this를 사용할 때 자주 발생하는 실수에는 어떤 것들이 있을까?\n- apply, call, bind 메소드의 사용법에 대해 설명?\n- 유사 배열(arguments)이 배열의 메소드를 사용할 수 있도록(조작할 때) apply와 call을 사용하는 방법에 대해 아는지?\n- 암시적 바인딩과 명시적 바인딩의 우선 순위는?\n- arrow function에서의 this는 어떻게 동작하나?\n- arrow function을 사용하면 안되는 경우는?\n\n비동기 처리\n\n- JavaScript에서의 비동기 프로그래밍이란?\n- JavaScript가 코드를 비동기적으로 실행하는 이유는 뭘까?\n- JavaScript에서 (시간이 오래 걸리는) 동기적인 코드가 blocking을 일으키는 이유는 뭘까?\n- 프론트엔드에서 비동기 처리가 중요한 이유는?\n\n콜백 패턴 \u0026 Promise\n\n- Promise란?\n- 동기식 작업과 비동기식 작업이란? 차이점은?\n- Promise는 어떤 문제점을 해결하고자 등장했나?\n- 비동기 처리에 콜백 패턴을 사용해야 하는 이유는?\n- 콜백 방식의 비동기 처리가 에러 처리에 곤란한 이유는?\n- Promise를 생성하는 방법은?\n- Promise의 상태(state)는 어떤 것들이 있나?\n- Promise의 후속 처리 메소드에 대해 설명?\n- Promise의 에러 처리는 then과 catch 중 어떤 것으로 하는 것이 더 좋을까?\n- Promise의 정적 메소드에 대해 설명?\n- Promise.resolve와 Promise.reject에 대해 설명?\n- Promise.all과 Promise.race에 대해 설명?\n\n이벤트 루프\n\n- 이벤트 루프란?\n- 이벤트 루프가 필요한 이유는?\n- Run-to-Completion이란?\n- 자바스크립트가 Run-to-Completion으로 동작하는 이유(원리)는?\n- 태스크 큐가 동작하는 과정은?\n- 태스크 큐와 마이크로 태스크 큐가 동작하는 과정은?\n- 이벤트 루프(혹은 태스크 큐의 우선 순위)로 인해 사용자 경험에 해가 되는 경우가 있을까?\n- 고비용 연산으로 인한 블로킹에 대응하는 방법은?\n- (참고) 활용 예시: progress bar\n\n실행 컨텍스트\n\n- 실행 컨텍스트란?\n- 실행 가능한 코드란?\n- 실행에 필요한 환경이란?\n- 코드가 실행되고, 함수가 실행되고 끝나는 과정을 실행 컨텍스트 스택으로 설명해본다면?\n- 실행 컨텍스트의 (물리적인) 구조는?\n- Variable Object란?\n- 전역 컨텍스트와 함수 컨텍스트에서 VO가 가리키는 객체(내용)의 차이는?\n- 스코프 체인이란?\n- 특정 EC의 스코프 체인에는 어떤 스코프가 담겨있나?\n- 변수를 검색하는 과정을 스코프 체인과 연관하여 설명해본다면?\n- 실행 컨텍스트에 값이 채워지는 순서는? (실행 컨텍스트가 생성되는 순서는?)\n- 변수 객체화가 진행되는 과정은?\n- 클로저를 실행 컨택스트에 기반해 설명해본다면?\n- 함수 호이스팅이란?\n- 변수 호이스팅이란?\n\n호이스팅\n\n- 호이스팅이란?\n- 호이스팅의 대상은?\n- 함수 선언문과 함수 표현식의 차이는?\n- 함수 선언문에 비해 함수 표현식이 가지는 장점은?\n- 호이스팅에서의 우선순위에 대해 설명해본다면?\n- 호이스팅은 지향해야 할까, 지양해야 할까?\n- 호이스팅을 방지하기 위한 방법은?\n- 호이스팅을 지양해야 함에도 불구하고, var와 호이스팅을 이해해야 하는 이유는?\n\nEcmaScript\n\n- EcmaScript란?\n- ECMAScript와 JavaScript의 관계는? 차이점은?\n- ES6에서 추가된 문법에 대해 아는 것이 있는지?\n\n기타\n\n- 자바스크립트 배열도 객체일까? (배열의 내부 구조는?)\n- use strict란?\n\n[(목차로 돌아가기)](#table-of-contents)\n\n\u003cbr\u003e\n\n## Reference\n\n- [CS144 Introduction to Computer Networking Fall 2016 Stanford University](https://www.youtube.com/playlist?list=PLvFG2xYBrYAQCyz4Wx3NPoYJOFjvU7g2Z)\n- [최희준 교수의 컴퓨터 일반](https://www.youtube.com/channel/UC7Gm_n3bUqqbOiDR3E1U2qg)\n- [Operating System, CPA310, KOREATECH](https://www.youtube.com/playlist?list=PLBrGAFAIyf5rby7QylRc6JxU5lzQ9c4tN)\n- [운영체제: 아주 쉬운 세가지 이야기](https://github.com/remzi-arpacidusseau/ostep-translations/tree/master/korean)\n- [별걸다하는 IT - 운영체제](https://jhnyang.tistory.com/category/%EB%B3%84%EA%B1%B8%EB%8B%A4%ED%95%98%EB%8A%94%20IT/%EC%9A%B4%EC%98%81%EC%B2%B4%EC%A0%9C%20OS)\n- [NHN TOAST FE Guide](https://ui.toast.com/fe-guide/ko)\n- [PoiemaWeb](https://poiemaweb.com/)\n- [Interview Question for Beginner](https://github.com/JaeYeopHan/Interview_Question_for_Beginner)\n- [Tech Interview for Developer](https://gyoogle.dev/blog/)\n- [Gidhub - Technology](https://goodgid.github.io/category/#Technology)\n\n---\n\n[![Hits](https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fgithub.com%2Fheech1013%2Fstudy-note\u0026count_bg=%2379C83D\u0026title_bg=%23555555\u0026icon=\u0026icon_color=%23E7E7E7\u0026title=hits\u0026edge_flat=false)](https://hits.seeyoufarm.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fheech1013%2Fstudy-note","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fheech1013%2Fstudy-note","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fheech1013%2Fstudy-note/lists"}