Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/baeharam/must-know-about-frontend

:mortar_board: 취준생이라면 알면 좋을 프론트엔드 관련 지식들
https://github.com/baeharam/must-know-about-frontend

css front-end html interview interview-questions javascript

Last synced: 29 days ago
JSON representation

:mortar_board: 취준생이라면 알면 좋을 프론트엔드 관련 지식들

Host: GitHub
URL: https://github.com/baeharam/must-know-about-frontend
Owner: baeharam
Created: 2019-12-23T13:41:02.000Z (almost 5 years ago)
Default Branch: main
Last Pushed: 2024-03-16T07:16:27.000Z (8 months ago)
Last Synced: 2024-10-15T06:01:28.752Z (29 days ago)
Topics: css, front-end, html, interview, interview-questions, javascript
Homepage:
Size: 2.86 MB
Stars: 3,252
Watchers: 25
Forks: 572
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

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

## 목차

* [소개](#tada-소개)

* [프론트엔드 전반](#computer-프론트엔드-전반)

* [HTML](#page_with_curl-html)

* [CSS](#lipstick-css)

* [Javascript](#fire-javascript)

* [네트워크](#chart_with_upwards_trend-네트워크)

* [보안](#lock-보안)




## :tada: 소개

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

* 기초지식을 너무 얕게 혹은 너무 깊게 말고 **적당한 선으로 정리** 했습니다.

* 컴퓨터공학의 전반적인 것이 아닌 오직 **프론트엔드 쪽만 정리** 했습니다.

* 개인적으로 정리한 내용이라 **틀린 부분이 있을 수 있으니** 언제든지 PR과 이슈를 날려주세요.




## :computer: 프론트엔드 전반

* [CSR (Client Side Rendering) vs SSR(Server Side Rendering)](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/frontend/csr-ssr.md)

* [브라우저의 렌더링 과정](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/frontend/browser-rendering.md)

* [자바스크립트 엔진이 코드를 실행하는 과정](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/frontend/engine.md)

* [BOM과 DOM](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/frontend/bom-dom.md)

* [모듈 번들러와 트랜스파일러](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/frontend/bundler-transpiler.md)

* [CI와 CD](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/frontend/ci-cd.md)

* [CSS와 JS 애니메이션의 차이점](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/frontend/css-js-animation.md)




## :page_with_curl: HTML

* [DOCTYPE](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/html/doctype.md)

* [표준모드와 호환모드](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/html/standard-quirks.md)

* [data- 속성](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/html/data.md)

* [local storage vs session storage vs cookie](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/html/web-storage-api.md)

* [script vs script async vs script defer](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/html/script-tag-type.md)

* [시맨틱 마크업](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/html/semantic.md)




## :lipstick: CSS

* [박스 모델 (Box Model)](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/css/box-model.md)

* [float를 해제하는 방법들](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/css/float-clear.md)

* [마진겹침 현상](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/css/margin-collapsing.md)

* [BFC (Block Formatting Context)](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/css/bfc.md)

* [z-index의 동작방식](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/css/z-index.md)

* [block vs inline vs inline-block](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/css/block-inline-inline-block.md)

* [가로/세로 가운데 정렬하기](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/css/center.md)

* [Reset.css vs Normalize.css](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/css/reset-normalize.md)

* [그리드 시스템](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/css/grid.md)

* [img 아래쪽 공백 제거](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/css/img-space.md)




## :fire: Javascript

* [Ajax](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/javascript/ajax.md)

* [이벤트 위임 (Event Delegation)](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/javascript/event-delegation.md)

* [실행 컨텍스트 (Execution Context)](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/javascript/execution-context.md)

* [스코프 (Scope)](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/javascript/scope.md)

* [호이스팅 (Hoisting)](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/javascript/hoisting.md)

* [클로저 (Closure)](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/javascript/closure.md)

* [네이티브 객체 vs 호스트 객체](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/javascript/native-host.md)

* [this의 바인딩](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/javascript/this.md)

* [var vs let vs const](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/javascript/var-let-const.md)

* [IIFE (Immediately-Invoked Function Expression)](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/javascript/iife.md)

* [모듈 시스템: CommonJS, AMD, UMD, ES6](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/javascript/module.md)

* [콜 스택(Call stack)과 힙(Heap)](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/javascript/stack-heap.md)

* [이벤트 루프 (Event loop)](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/javascript/event-loop.md)

* [프로토타입 (Prototype)](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/javascript/prototype.md)

* [== vs ===](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/javascript/identity-equal.md)

* [엄격 모드 (Strict mode)](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/javascript/strict-mode.md)

* [new의 동작방식](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/javascript/new.md)

* [ES6 (2015) 의 특징들](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/javascript/es6.md)

* [ES7 (ES2016) ~ ES8 (ES2017) 의 특징들](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/javascript/es7-es8.md)

* [ES9 (ES2018) ~ ES10 (ES2019) 의 특징들](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/javascript/es9-es10.md)

* [ES11 (ES2020) 의 특징들](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/javascript/es11.md)




## :chart_with_upwards_trend: 네트워크

* [TCP와 UDP](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/network/tcp-udp.md)

* [HTTP](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/network/http.md)

* [HTTPS](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/network/https.md)

* [HTTP/1.1 vs HTTP/2](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/network/http1.1-2.md)

* [URL과 URN을 포함하는 URI](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/network/uri.md)

* [REST API](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/network/rest-api.md)

* [Cookie vs Session](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/network/cookie-session.md)

* [URL을 입력하고 벌어지는 일](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/network/type-url-process.md)

* [CDN](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/network/cdn.md)




## :lock: 보안

* [동일 출처 정책 (Same Origin Policy)](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/security/sop.md)

* [XSS와 CSRF](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/security/xss-csrf.md)