취준생이 반드시 알아야 할 프론트엔드 지식들

목차

• 소개
• 프론트엔드 전반
• HTML
• CSS
• Javascript
• 네트워크
• 보안

:tada: 소개

취업 전 반드시 알아야 한다고 생각하는 프론트엔드 분야의 기초지식들을 모아놓았습니다. 실제 면접질문들과 구글링을 통해 검색한 필수지식 및 질문들을 통해서 하나하나 정리했습니다.

• 기초지식을 너무 얕게 혹은 너무 깊게 말고 적당한 선으로 정리 했습니다.
• 컴퓨터공학의 전반적인 것이 아닌 오직 프론트엔드 쪽만 정리 했습니다.
• 개인적으로 정리한 내용이라 틀린 부분이 있을 수 있으니 언제든지 PR과 이슈를 날려주세요.

:computer: 프론트엔드 전반

• CSR (Client Side Rendering) vs SSR(Server Side Rendering)
• 브라우저의 렌더링 과정
• 자바스크립트 엔진이 코드를 실행하는 과정
• BOM과 DOM
• 모듈 번들러와 트랜스파일러
• CI와 CD
• CSS와 JS 애니메이션의 차이점

:page_with_curl: HTML

• DOCTYPE
• 표준모드와 호환모드
• data- 속성
• local storage vs session storage vs cookie
• script vs script async vs script defer
• 시맨틱 마크업

:lipstick: CSS

• 박스 모델 (Box Model)
• float를 해제하는 방법들
• 마진겹침 현상
• BFC (Block Formatting Context)
• z-index의 동작방식
• block vs inline vs inline-block
• 가로/세로 가운데 정렬하기
• Reset.css vs Normalize.css
• 그리드 시스템
• img 아래쪽 공백 제거

:fire: Javascript

• Ajax
• 이벤트 위임 (Event Delegation)
• 실행 컨텍스트 (Execution Context)
• 스코프 (Scope)
• 호이스팅 (Hoisting)
• 클로저 (Closure)
• 네이티브 객체 vs 호스트 객체
• this의 바인딩
• var vs let vs const
• IIFE (Immediately-Invoked Function Expression)
• 모듈 시스템: CommonJS, AMD, UMD, ES6
• 콜 스택(Call stack)과 힙(Heap)
• 이벤트 루프 (Event loop)
• 프로토타입 (Prototype)
• == vs ===
• 엄격 모드 (Strict mode)
• new의 동작방식
• ES6 (2015) 의 특징들
• ES7 (ES2016) ~ ES8 (ES2017) 의 특징들
• ES9 (ES2018) ~ ES10 (ES2019) 의 특징들
• ES11 (ES2020) 의 특징들

:chart_with_upwards_trend: 네트워크

• TCP와 UDP
• HTTP
• HTTPS
• HTTP/1.1 vs HTTP/2
• URL과 URN을 포함하는 URI
• REST API
• Cookie vs Session
• URL을 입력하고 벌어지는 일
• CDN

:lock: 보안

• 동일 출처 정책 (Same Origin Policy)
• XSS와 CSRF