{"id":15033589,"url":"https://github.com/junh0328/prepare_frontend_interview","last_synced_at":"2025-04-11T23:55:44.214Z","repository":{"id":37294241,"uuid":"408726855","full_name":"junh0328/prepare_frontend_interview","owner":"junh0328","description":"📚 프론트엔드 기술 면접을 위한 핸드북 만들기","archived":false,"fork":false,"pushed_at":"2024-11-18T06:28:29.000Z","size":35471,"stargazers_count":1529,"open_issues_count":1,"forks_count":376,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-11T23:55:20.090Z","etag":null,"topics":["frontend","handbook"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/junh0328.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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-09-21T07:29:49.000Z","updated_at":"2025-04-11T10:39:12.000Z","dependencies_parsed_at":"2024-04-04T07:26:55.843Z","dependency_job_id":"f37691c2-f59b-441c-8e87-8ae42f8299eb","html_url":"https://github.com/junh0328/prepare_frontend_interview","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/junh0328%2Fprepare_frontend_interview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/junh0328%2Fprepare_frontend_interview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/junh0328%2Fprepare_frontend_interview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/junh0328%2Fprepare_frontend_interview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/junh0328","download_url":"https://codeload.github.com/junh0328/prepare_frontend_interview/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248497811,"owners_count":21113984,"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":["frontend","handbook"],"created_at":"2024-09-24T20:21:51.813Z","updated_at":"2025-04-11T23:55:44.195Z","avatar_url":"https://github.com/junh0328.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# prepare_frontend_interview\n\n\u003cb\u003e프론트엔드 기술 면접을 위한 핸드북 만들기\u003c/b\u003e\n\n면접의 인터뷰어 분들이 JS의 수 많은 개념들을 순서대로 질문을 하지는 않습니다.\n\n하지만 자바스크립트의 연관되어 있는 개념들을 순서대로 나열하고 핸드북 형식으로 보다 보면,\n\n모르는 개념을 파악하고 한눈에 보는 것에 있어서 도움이 되지 않을까 싶어 제작하게 되었습니다.\n\n크게 ① CS ② HTML/CSS ③ JavaScript 로 나누었습니다\n\n① CS인 computer science에는 자바스크립트 이외에 지식들에 대한 조금 잡다한 내용이 담길 예정입니다\n\n목차를 보고 해당 내용이 마음에 드실 경우에 보시는 것을 추천합니다!\n\n## 질문의 빈도\n\n```\n① JS \u003e ② CS \u003e ③ React \u003e ④ HTML/CSS\n```\n\n## contribute\n\n① 클론 받기 / 포크 받기\n\n```\n$ git clone https://github.com/junh0328/prepare_frontend_interview.git\n```\n\n② 내용 추가 또는 변경하기\n\n```\nex)\n\n- [타입과 인터페이스 🔥](#타입과-인터페이스) \u003e\u003e\u003e [xxx](#xxx) 마크다운 구조\n\n  - 타입스크립트를 왜 쓰나요? (본인이 느낀점)\n  - 타입과 인터페이스의 차이를 아나요?\n  - 제네릭이란?\n```\n\n③ 목차에도 해당 내용 추가하기\n\n```\nex)\n\n- `타입과 인터페이스 🔥` \u003e\u003e\u003e 백틱 내부에 제목 그대로 표시 `xxx`\n\n  - 타입스크립트를 왜 쓰나요? (본인이 느낀점)\n  - 타입과 인터페이스의 차이를 아나요?\n  - 프로젝트 진행 시에 어떤 상황에서 타입을 쓰고 어떤 상황에서 인터페이스를 썼나요?\n```\n\n④ 이슈 생성 및 PR 날리기\n\n예시 이슈: (https://github.com/junh0328/prepare_frontend_interview/issues/6)\n\n```\n템플릿을 작성해 두었으니, 해당 예시 이슈에 맞춰 작성해주시면 됩니다!\n```\n\n## \u003ca href=\"./cs.md\"\u003e① Computer Science\u003c/a\u003e\n\n- `네트워크 🔥`\n\n  - 네트워크에서 패킷이란 무엇을 의미하나요?\n  - 네트워크에서 처리량은 무엇을 의미하나요?\n  - 지연시간이란 무엇인가요?\n  - 처리량은 어떤 상황에 영향을 받나요?\n  - 네트워크 병목현상은 무엇인가요?\n  - TCP/IP 가 무엇인가요? 각 계층에 대해서 설명할 수 있나요?\n  - 전송 계층의 대표적인 방식은 무엇이 있고 어떤 차이가 있나요? (키워드: TCP, UDP)\n  - 계층 간 데이터 송수신 과정에 대해 설명할 수 있나요? (키워드: 캡슐화, 비캡슐화)\n  - 네트워크에서 PDU에 대해 알고 있나요?\n  - 로드밸런서란 무엇인가요?\n  - ARP란 무엇인가요?\n  - MAC 주소란 무엇인가요?\n  - NAT란 무엇인가요?\n\n- `HTTP 🔥`\n\n  - HTTP란 뭔가요?\n  - HTTP 프로토콜의 가장 큰 특징은 뭔가요?\n  - URL은 뭔가요?\n  - HTTP/1.0 과 HTTP/1.1의 차이는 뭔가요?\n  - HTTP/1.1 과 HTTP/2.0의 차이는 뭔가요?\n  - HTTPS는 HTTP랑 뭐가 다른가요?\n  - 심화) 공개키 (비대칭키) 방식이 뭔가요?\n\n- `운영체제 🔥`\n\n  - 운영체제란 무엇인가요?\n  - 운영체제는 어떤 역할을 하나요?\n  - 운영체제는 어떤 구조로 이루어져 있나요?\n  - 컴퓨터는 어떤 요소로 이루어져 있나요?\n  - CPU는 어떤 요소로 이루어져 있나요?\n  - CPU는 어떻게 동작하나요?\n  - 메모리란 무엇인가요?\n  - 메모리는 어떤 계층 구조로 이루어져 있나요?\n  - 메모리는 어떤 방식으로 데이터를 관리하나요?\n\n- `프로세스와 스레드 🔥`\n\n  - 프로세스가 뭔가요?\n  - 스레드가 뭔가요?\n  - 프로세스와 스레드는 어떤 차이가 있나요?\n  - 프로세스의 컴파일 과정에 대해 설명해줄 수 있나요?\n  - 프로세스는 어떤 상태 값을 가지고 있나요?\n  - 프로세스는 어떤 구조로 이루어져 있나요? (스택, 힙, 데이터 영역, 코드 영역)\n  - PCB는 무엇인가요? 어떤 용도로 사용되나요? (메타 데이터)\n\n- `싱글 스레드와 멀티 스레드 🔥`\n\n  - 싱글 스레드 장점\n  - 싱글 스레드 단점\n  - 멀티 스레드 장점\n  - 멀티 스레드 단점\n\n- `공유 자원 임계 영역 교착 상태 🔥`\n\n  - 공유 자원\n  - 임계 영역\n  - 뮤텍스\n  - 세마포어\n  - 교착 상태\n\n- `쿠키 세션 🔥`\n\n  - 쿠키, 세션을 왜 쓰나요? 🔥🔥\n  - 쿠키가 뭔가요? 🔥🔥\n  - 세션이 뭔가요? 🔥🔥\n  - 쿠키와 세션의 차이는 어떤 점이 있을까요? 🔥🔥\n  - JWT을 아나요?\n  - JWT를 웹 스토리지에 저장해야 한다면 어디다 저장하시겠나요? 이유는요?\n\n- `CORS 🔥`\n\n  - CORS가 뭔가요?\n  - CORS를 겪고 직접 해결해 본 경험이 있으면 말해주세요\n\n- `개발 방법론 🔥`\n\n  - 소프트웨어 개발 주기(SDLC)에 대해 아나요?\n  - 폭포수 방법론이란 뭔가요?\n  - 애자일 방법론이란 뭔가요?\n\n- `Cache 🔥`\n\n  - 캐시란 무엇인가요?\n\n- `CDN 🔥`\n\n  - CDN이란 뭔가요?\n\n- `테스트 🔥`\n\n  - 테스트란 무엇인가요?\n  - 테스트의 예는 어떤 것들이 있나요?\n  - 테스트는 왜 해야 하나요?\n  - 유닛 테스트란 무엇인가요?\n  - 통합 테스트란 무엇인가요?\n  - E2E 테스트란 무엇인가요?\n\n- `웹팩 🔥`\n\n  - 웹팩이란?\n  - 모듈이란?\n  - 모듈 번들링이란?\n  - 웹팩이 등장한 이유 웹팩 사용 시에 이점\n  - 바벨이란?\n  - 웹팩의 주요 속성 4가지\n\n- `타입과 인터페이스 🔥🔥🔥`\n\n  - 이 글을 보시는 분들께\n  - 타입스크립트를 왜 쓰나요? (본인이 느낀점)\n  - 타입과 인터페이스의 차이를 아나요?\n  - 타입의 유틸리티 타입 중 알고 있는 것들에 대해 가볍게 설명해주세요\n  - 프로젝트 진행 시에 어떤 상황에서 타입을 쓰고 어떤 상황에서 인터페이스를 썼나요?\n\n## \u003ca href=\"./html_css.md\"\u003e② HTML/ CSS\u003c/a\u003e\n\n### **HTML**\n\n- `DOCTYPE 🔥`\n\n  - DOCTYPE에 대하여 설명하시오\n  - meta 태그에 대해서 알고 있나요?\n  - meta 태그의 요소에 대해서 아는대로 말해보세요\n\n- `웹 표준 및 웹 접근성 🔥`\n\n  - 웹 표준이란?\n  - HTML5에서 추가된 내용이 있나요?\n  - 웹 접근성이란?\n  - 웹 접근성에 맞는 마크업 예시 몇가지 말해보시오\n  - 시멘틱 태그란 무엇인가 왜 사용하는가\n  - 텍스트 관련 태그\n  - SEO란 무엇인가?\n  - Button 태그의 Default type은 무엇인가?\n  - Section 태그와 article 태그의 차이점\n  - 크로스 브라우징이란 무엇인가요?\n\n- `그 외 🔥`\n\n  - 이미지 크기가 클 경우 렌더링 속도가 느려질텐데 이를 개선하기 위한 방법\n  - UI란 무엇인지 설명하시오\n\n- `SVG란 ? 🔥`\n\n  - SVG 장점과 단점\n  - SVG 내부 도형에 대해 아는게 있나요?\n\n\u003cbr /\u003e\n\n### **CSS**\n\n- `display 🔥`\n\n  - block\n  - inline\n  - inline-block\n  - none\n\n- `position에 대하여 설명해보세요. 🔥`\n\n  - static\n  - relative\n  - fixed\n  - absolute\n\n- `float가 어떻게 작동하는가 🔥`\n\n- `Flexbox나 Grid 스펙을 사용해본 적이 있나요 ? 🔥`\n\n  - flex 를 사용하는 이유가 무엇인가요?\n  - Grid를 사용하는 이유가 무엇인가요?\n\n- `이미지 태그를 스타일로 대체하는 법 🔥`\n- `반응형 웹의 3요소 🔥🔥`\n- `CSS selector가 어떠한 원리로 동작하나요? 🔥`\n- `반응형웹과 적응형웹에 설명하시오 🔥`\n\n  - 반응형 웹이란? 🔥\n  - 적응형 웹이란?\n\n- `PX, EM에 대해 설명하시오 🔥🔥`\n\n  - 절대단위\n  - 상대단위\n  - px\n  - em\n  - ex\n  - %\n  - pt\n\n- `CSS 적용 우선순위 🔥🔥`\n- `CSS-in-JS에 대해서 설명해 주세요. 🔥`\n- `CSS 전처리기(CSS preprocessors)를 사용해보셨나요? 🔥`\n\n  - 사용해봤다면 장점과 단점\n\n- `padding과 margin의 차이가 무엇인가요? 🔥`\n\n  - padding에 대하여\n  - margin에 대하여\n\n## \u003ca href=\"./js.md\"\u003e③ JavaScript\u003c/a\u003e\n\n- `프로그래밍 🔥`\n\n  - 프로그래밍이란 뭐라고 생각하나요?\n  - 컴파일러는 뭐고 인터프리터는 뭔가요?\n\n- `자바스크립트란 🔥`\n\n  - 자바스크립트의 특징은 뭐가 있나요?\n\n- `변수 🔥`\n\n  - 변수란 무엇인가요?\n  - 식별자란 무엇인가요? 🔥\n  - 변수를 선언한다는 것은 어떤 것을 의미하나요?\n  - var 키워드는 뭔가요?\n  - 호이스팅이 뭔가요? 🔥🔥🔥🔥\n  - var 키워드의 문제점은 무엇이 있나요? 🔥🔥\n  - let 키워드는 var 키워드와 어떤 점이 다른가요? 🔥🔥🔥\n  - TDZ 🔥🔥🔥\n  - const 키워드는 어떤 특징이 있나요? 🔥🔥\n  - 식별자 네이밍 규칙은 어떤 것들이 있나요?\n  - 네이밍 컨벤션은 어떤 것들이 있나요?\n  - 리터럴이 뭔가요?\n\n- `데이터 타입 🔥`\n\n  - 데이터 타입의 종류는 어떤 것들이 있나요? 🔥\n  - 심벌 타입은 뭐죠?\n  - 데이터 타입은 왜 필요할까요? 🔥\n  - 정적 타이핑이 뭔가요?\n  - 동적 타이핑이 뭔가요?\n\n- `타입변환과 단축 평가 🔥`\n\n  - 명시적 타입 변환이 뭔가요?\n  - 명시적 타입 변환 함수를 예를 들어볼 수 있나요?\n  - 암묵적 타입 변환이 뭔가요?\n  - truthy / falsy 한 값이 뭔가요?\n\n- `배열 🔥`\n\n  - 자바스크립트의 배열은 자료구조의 배열과 같나요?\n  - 배열의 메서드는 어떤 종류가 있나요?\n  - 고차 함수에 대해서 아나요?\n  - forEach 메서드와 map메서드의 차이점에 대해 알고 있나요?\n\n- `객체 리터럴 🔥`\n\n  - 자바스크립트에서 객체란 뭘까요?\n  - 함수와 메서드의 차이점에 대해 알고 계신가요?\n  - 자바스크립트에서 객체를 생성하는 방법은 어떤 것들이 있나요?\n\n- `원시 값과 객체 비교 🔥`\n\n  - 동적 타이핑을 지원하는 자바스크립트에서 데이터의 타입을 크게 2개로 나누는 이유가 있을까요?\n  - 값에 의한 전달이 뭔가요?\n  - 참조에 의한 전달이 뭔가요?\n\n- `함수 🔥`\n\n  - 자바스크립트에서 함수를 정의하는 방법은 몇가지가 있나요?\n  - 함수 선언문과 함수 표현식은 어떤 차이가 있나요?\n  - 즉시 실행 함수(IIFE)에 대해 알고 있나요? 알고 있다면 아는 내용에 대해 말해보세요\n\n- `스코프 🔥`\n\n  - 스코프가 뭔가요? 🔥🔥🔥\n  - 스코프에는 어떤 종류가 있죠? 🔥🔥\n  - 렉시컬 스코프를 아나요? 안다면 렉시컬 스코프는 무엇을 의미하나요? 🔥\n  - 전역 변수로 변수를 선언하면 생기는 문제점은 무엇이 있을까요?\n\n- `생성자 함수에 의한 객체 생성 🔥`\n\n  - 생성자 함수가 뭔가요?\n  - 객체 리터럴로 만들 때와는 무슨 차이가 있죠? 왜 생성자 함수를 사용하나요?\n  - 생성자 함수가 객체(인스턴스)를 생성하는 과정에 대해 간략하게 설명해줄 수 있나요?\n\n- `함수와 일급 객체 🔥`\n\n  - 일급 객체가 뭔가요?\n  - 자바스크립트에서 함수가 일급 객체라면, 일급 객체로 뭘 할 수 있나요?\n  - 꼬리 질문) 함수형 프로그래밍이 뭔가요? 🔥🔥\n  - 꼬리 질문) 순수 함수가 뭔가요? 일반 함수와는 어떤 차이가 있죠? 🔥🔥\n\n- `Map과 Set 그리고 Lookup Table`\n\n- `프로토타입 🔥`\n\n  - 객체지향 프로그래밍은 무엇을 의미하나요? 🔥\n  - 객체지향 프로그래밍의 특징에 대해 말해볼 수 있나요? 🔥\n  - 자바스크립트는 객체지향 프로그래밍 언어인가요?\n  - 프로토타입이 뭔가요?\n\n- `strict mode 🔥`\n\n  - strict mode가 뭔가요?\n  - strict mode를 통해 무엇을 예방할 수 있죠?\n\n- `빌트인 객체 🔥`\n\n  - 빌트인 객체가 뭔가요? 종류는 어떤게 있죠?\n  - 래퍼 객체에 대해서 알고 있나요?\n\n- `this 🔥`\n\n  - this가 뭔가요? 🔥\n  - this 바인딩이란? 🔥\n  - this는 동적으로 바인딩이 된다고 하는데 바인딩되는 객체가 어떻게 다르나요?\n\n- `실행 컨텍스트 🔥`\n\n  - 실행 컨텍스트에 대해 말해보세요 🔥🔥\n\n- `클로저 🔥`\n\n  - 클로저에 대해서 아나요? 🔥🔥🔥\n  - 클로저를 사용하면 뭐가 좋죠? 🔥🔥\n  - 클로저를 어떻게 생성하나요? 🔥\n\n- `클래스 🔥`\n\n  - 자바스크립트에서 클래스가 생기기 전에는 어떤 방식으로 객체지향 패턴을 구현했나요?\n  - 그럼 생성자 함수와 클래스는 어떤 차이가 있나요?\n  - 클래스 정의\n  - 클래스의 상속\n\n- `스프레드 문법 🔥`\n\n  - spread 문법이 뭔가요?\n  - 어떤 상황에서 사용할 수 있죠?\n\n- `구조 분해 할당 🔥`\n\n  - 구조 분해 할당이 뭔가요?\n  - 구조 분해 할당은 크게 어떤 종류가 있나요?\n\n- `브라우저 렌더링 과정 🔥`\n\n  - 브라우저의 렌더링 과정에 대해 설명해보세요 🔥\n  - 브라우저의 렌더링 과정에 자바스크립트는 어떻게 동작하나요? 🔥\n  - `\u003cscript\u003e\u003c/script\u003e` 태그를 `\u003cbody\u003e\u003c/body\u003e` 태그 밑에 둬야하는 이유가 있을까요?\n\n- `DOM 🔥`\n\n  - DOM이 뭔가요?\n  - DOM을 구성하는 건 뭐가 있나요?\n\n- `이벤트 🔥`\n\n  - 마우스 이벤트 타입에는 뭐가 있나요? click 말고 클릭을 대체할 수 있는 이벤트가 있나요?\n  - 그 외에 알고 있는 대표적인 이벤트가 있나요?\n  - 이벤트 핸들러를 등록하는 방식에는 어떤 것들이 있나요?\n  - 이벤트 전파(propagation)에 대해서 알고 있나요?\n  - 이벤트 위임(delegation)에 대해서 알고있나요? 🔥\n  - e.preventDefault 에 대해 알고 있나요?\n  - e.stopPropagation\n\n- `타이머 🔥`\n\n  - 호출 스케쥴링이 무엇인가요?\n  - 타이머 함수에는 어떤 것들이 있나요?\n  - 이벤트가 과도하게 호출되어 성능에 문제를 일으킬 경우에 할 수 있는 어떤 일을 통해 해결할 수 있나요?\n  - 디바운스에 대해서 알고 있나요?\n  - 쓰로틀에 대해서 알고 있나요?\n\n- `비동기 프로그래밍 🔥`\n\n  - 동기와 비동기의 차이점에 대해서 설명해줄 수 있나요? 🔥🔥\n\n    - 한줄 요약\n\n  - 이벤트 루프와 태스크 큐에 대해서 알고 있나요? 🔥🔥🔥\n  - 마이크로태스크 큐에 대해서 알고 있나요? 🔥🔥\n  - 태스크 큐와 마이크로태스크 큐 중 어떤 것이 먼저 실행되나요? 🔥🔥\n\n- `Ajax 🔥`\n\n  - Ajax가 뭔가요 어떤 것을 담당하고 있죠?\n  - Ajax를 사용하면 기존 방식과 어떤 차이가 있을까요?\n  - JSON 이 뭔가요?\n  - JSON이 제공하는 정적 프로토타입 메서드에 대해 몇가지 말해볼 수 있나요?\n  - Ajax로 HTTP 요청을 보내기 위해서는 어떤 방법을 사용할 수 있나요?\n  - XMLHttpRequest와 fetch 메서드의 차이는 무엇이라고 생각하시나요? 🔥\n\n- `REST API 🔥`\n\n  - REST API가 뭔가요?\n  - REST API의 구성은 어떤 것이 있나요?\n  - REST API를 설계하는데 중요한 것이 있을까요?\n  - HTTP 요청 메서드에 대해서 아는대로 얘기해보세요\n  - HTTP 상태 코드를 아는대로 말해주세요 🔥\n\n- `Promise 🔥`\n\n  - 콜백이란 뭐라고 생각하나요? 🔥\n  - 프로미스가 뭔가요? 🔥\n  - 프로미스 생성 방법\n  - 프로미스의 상태를 나타내는 것은 어떤 것들이 있나요? 🔥\n  - 프로미스 빌트인 객체가 제공하는 정적 메서드에 대해 알고 있나요? 🔥\n\n- `제너레이터와 async await 🔥`\n\n  - 제너레이터란 뭔가요? 일반 함수와는 어떤 차이가 있죠?\n  - 제너레이터의 구조\n  - async/await 가 뭔가요? 기존의 Promise와는 어떤 차이가 있죠? 🔥\n  - Promise와 async/await의 차이점 한 줄 요약 🔥\n\n- `에러 🔥`\n\n  - 에러처리를 왜 해야 하나요? 🔥\n  - 자바스크립트에서 에러를 처리하는 방법에는 뭐가 있을까요?\n\n- `모듈 🔥`\n\n  - 모듈이 뭔가요?\n\n- `가비지 컬렉션 🔥`\n\n  - 자바스크립트의 가바지 컬렉션에 대해 알고 있나요?\n\n## \u003ca href=\"./react.md\"\u003e④ React\u003c/a\u003e\n\n- `React 시작🔥`\n- `리액트는 라이브러리인가요 프레임워크 인가요?🔥`\n- `리액트를 사용하는 이유🔥🔥`\n- `virtual DOM에 대해서 아나요?🔥🔥`\n- `리액트의 렌더링에 대해 아나요?`\n- `리액트 파이버에 대해서 아나요?`\n- `리액트 파이버 트리`\n- `리액트 파이버와 DOM, Virtual DOM의 관계`\n- `렌더 단계와 커밋 단계에 대해 아나요?`\n- `React에서 함수 컴포넌트와 클래스 컴포넌트의 차이 🔥`\n- `리액트에서 함수형 컴포넌트라고 부르지 않고 함수 컴포넌트라고 부르는 이유가 무엇인가요 🔥`\n- `props와 state의 차이🔥`\n- `Props가 컴포넌트간에 전달받는 것이라고 했는데 자식에서 부모로도 전달할 수 있는가 🔥`\n- `FLUX에 대해서 아나요? 🔥🔥`\n- `리덕스에 대해서 아나요? 🔥🔥`\n- `리덕스의 기본 원칙은? 🔥🔥`\n- `React에서 state의 불변성을 유지하라는 말이 있는데 이에 대해 설명해달라 🔥`\n- `리듀서 내부에서 불변성을 지키는 이유는? 전개 연산자의 단점을 해결할 수 있는 방법은 무엇인가 🔥`\n- `리액트 사용시에 부수효과로 인해 생기는 문제점이 있다면 🔥🔥`\n\n  - 부수 효과를 일으키는 함수 (불순 함수)\n  - 부수 효과를 일으키지 않는 함수 (순수 함수)\n  - 요약\n\n- `컴포넌트의 라이프 사이클 메서드 🔥🔥`\n\n  - 이해\n  - 메서드 종류 🔥\n\n- `Hooks의 종류 🔥🔥`\n\n  - useState\n  - useEffect\n  - useReducer\n  - useMemo\n  - useCallback\n  - useRef\n  - 커스텀 Hooks\n\n- `useMemo와 useCallback의 차이를 아나요 🔥🔥`\n\n- `리액트에서 setState는 비동기 동작인가요 동기 동작인가요? 🔥`\n- `setState가 비동기 동작을 취했을 때 얻을 수 있는 이점은 무엇인가요? 🔥`\n- `useLayoutEffect는 무엇인가요? 🔥`\n- `리액트의 성능개선 방법에 대해서 설명해주세요`\n\n- `컴포넌트에서 이벤트를 실행시키기 위해서는 어떻게 핸들링해야 하나요?🔥`\n- `SPA가 뭔가요?🔥`\n\n  - SPA의 단점\n\n- `SSR이 뭔가요?🔥`\n- `SEO가 뭔가요?🔥`\n\n  - TTV, TTI\n\n- `서버사이드 렌더링을 지원하기 위한 리액트 API를 알고 있나요 ?`\n- `하이드레이션에 대해 알고 있나요 🔥`\n- `Next의 렌더링 수행 방식 🔥`\n- `Next를 쓴 이유가 있나요 ? 🔥`\n- `Next를 구성하는 기본 설정 파일에 대해서 알고 있나요? 🔥`\n- `사전 렌더링을 위해 사용해 본 함수가 있나요 🔥`\n\n- `Suspense 🔥`\n\n  - suspense가 뭔가요?\n  - suspense로 가능한 것은 어떤 것들이 있나요?\n\n- `웹 성능 최적화`\n- `LCP가 뭔가요?`\n- `FCP가 뭔가요?`\n- `controlled pattern에 대해서 아나요?`\n- `uncontrolled pattern에 대해서 아나요?`\n\n## \u003ca href=\"./data_structure.md\"\u003e⑤ 자료구조\u003c/a\u003e\n\n- `자료구조란 무엇인가요 🔥`\n\n  - 효율적으로 데이터를 관리해야 하는 이유 (예)\n\n- `대표적인 자료구조는 어떤 것들이 있나요 🔥`\n\n  - 선형 구조\n  - 비 선형 구조\n\n- `리스트 🔥`\n- `큐 🔥`\n- `스택 🔥`\n- `링크드 리스트 🔥`\n- `해쉬 테이블 🔥`\n- `트리 🔥`\n- `힙 🔥`\n- `그래프 🔥`\n\n## \u003ca href=\"./algorithm_data_structure.md\"\u003e⓺ 알고리즘과 자료구조 v2\u003c/a\u003e\n\n- `Frequency Counters`\n- `Multiple Pointers`\n- `Sliding Window`\n- `Divide and conquer`\n- `Recursion`\n- `Linear Search`\n- `Naive String Search`\n- `Binary Search`\n- `Bubble Sort`\n- `Selection Sort`\n- `Insertion Sort`\n- `Merge Sort`\n- `Quick Sort`\n- `Single Linked List`\n- `Dobule Linked List`\n- `Stack`\n- `Queue`\n- `Binary Search Tree`\n- `Breadth First Search`\n- `Depth First Search`\n- `Binary Heap`\n- `Priority Queue`\n- `Hash Table`\n- `graph`\n- `Dijkstra`\n- `Dynamic Programming`\n\n## 레퍼런스\n\n- [프론트 엔드 개발자 면접 질문 정리 🔥](https://sunnykim91.tistory.com/121)\n- [Interview_Question_for_Beginner 🔥](https://github.com/JaeYeopHan/Interview_Question_for_Beginner)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjunh0328%2Fprepare_frontend_interview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjunh0328%2Fprepare_frontend_interview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjunh0328%2Fprepare_frontend_interview/lists"}