{"id":15034146,"url":"https://github.com/baeharam/must-know-about-frontend","last_synced_at":"2025-05-14T20:10:19.345Z","repository":{"id":37469368,"uuid":"229759973","full_name":"baeharam/Must-Know-About-Frontend","owner":"baeharam","description":":mortar_board: 취준생이라면 알면 좋을 프론트엔드 관련 지식들","archived":false,"fork":false,"pushed_at":"2024-03-16T07:16:27.000Z","size":2999,"stargazers_count":3426,"open_issues_count":0,"forks_count":579,"subscribers_count":25,"default_branch":"main","last_synced_at":"2025-04-13T16:53:29.495Z","etag":null,"topics":["css","front-end","html","interview","interview-questions","javascript"],"latest_commit_sha":null,"homepage":"","language":null,"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/baeharam.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}},"created_at":"2019-12-23T13:41:02.000Z","updated_at":"2025-04-11T10:25:43.000Z","dependencies_parsed_at":"2024-03-22T14:53:06.691Z","dependency_job_id":null,"html_url":"https://github.com/baeharam/Must-Know-About-Frontend","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/baeharam%2FMust-Know-About-Frontend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baeharam%2FMust-Know-About-Frontend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baeharam%2FMust-Know-About-Frontend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baeharam%2FMust-Know-About-Frontend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/baeharam","download_url":"https://codeload.github.com/baeharam/Must-Know-About-Frontend/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254219374,"owners_count":22034397,"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":["css","front-end","html","interview","interview-questions","javascript"],"created_at":"2024-09-24T20:24:05.032Z","updated_at":"2025-05-14T20:10:19.323Z","avatar_url":"https://github.com/baeharam.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# 취준생이 반드시 알아야 할 프론트엔드 지식들\n\n## 목차\n\n* [소개](#tada-소개)\n* [프론트엔드 전반](#computer-프론트엔드-전반)\n* [HTML](#page_with_curl-html)\n* [CSS](#lipstick-css)\n* [Javascript](#fire-javascript)\n* [네트워크](#chart_with_upwards_trend-네트워크)\n* [보안](#lock-보안)\n\n\u003cbr\u003e\n\n## :tada: 소개\n\n취업 전 반드시 알아야 한다고 생각하는 프론트엔드 분야의 기초지식들을 모아놓았습니다. 실제 면접질문들과 구글링을 통해 검색한 필수지식 및 질문들을 통해서 하나하나 정리했습니다.\n\n* 기초지식을 너무 얕게 혹은 너무 깊게 말고 **적당한 선으로 정리** 했습니다.\n* 컴퓨터공학의 전반적인 것이 아닌 오직 **프론트엔드 쪽만 정리** 했습니다.\n* 개인적으로 정리한 내용이라 **틀린 부분이 있을 수 있으니** 언제든지 PR과 이슈를 날려주세요.\n\n\u003cbr\u003e\n\n## :computer: 프론트엔드 전반\n\n* [CSR (Client Side Rendering) vs SSR(Server Side Rendering)](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/frontend/csr-ssr.md)\n* [브라우저의 렌더링 과정](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/frontend/browser-rendering.md)\n* [자바스크립트 엔진이 코드를 실행하는 과정](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/frontend/engine.md)\n* [BOM과 DOM](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/frontend/bom-dom.md)\n* [모듈 번들러와 트랜스파일러](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/frontend/bundler-transpiler.md)\n* [CI와 CD](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/frontend/ci-cd.md)\n* [CSS와 JS 애니메이션의 차이점](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/frontend/css-js-animation.md)\n\n\u003cbr\u003e\n\n## :page_with_curl: HTML\n\n* [DOCTYPE](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/html/doctype.md)\n* [표준모드와 호환모드](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/html/standard-quirks.md)\n* [data- 속성](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/html/data.md)\n* [local storage vs session storage vs cookie](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/html/web-storage-api.md)\n* [script vs script async vs script defer](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/html/script-tag-type.md)\n* [시맨틱 마크업](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/html/semantic.md)\n\n\u003cbr\u003e\n\n## :lipstick: CSS\n\n* [박스 모델 (Box Model)](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/css/box-model.md)\n* [float를 해제하는 방법들](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/css/float-clear.md)\n* [마진겹침 현상](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/css/margin-collapsing.md)\n* [BFC (Block Formatting Context)](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/css/bfc.md)\n* [z-index의 동작방식](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/css/z-index.md)\n* [block vs inline vs inline-block](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/css/block-inline-inline-block.md)\n* [가로/세로 가운데 정렬하기](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/css/center.md)\n* [Reset.css vs Normalize.css](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/css/reset-normalize.md)\n* [그리드 시스템](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/css/grid.md)\n* [img 아래쪽 공백 제거](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/css/img-space.md)\n\n\u003cbr\u003e\n\n## :fire: Javascript\n\n* [Ajax](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/javascript/ajax.md)\n* [이벤트 위임 (Event Delegation)](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/javascript/event-delegation.md)\n* [실행 컨텍스트 (Execution Context)](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/javascript/execution-context.md)\n* [스코프 (Scope)](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/javascript/scope.md)\n* [호이스팅 (Hoisting)](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/javascript/hoisting.md)\n* [클로저 (Closure)](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/javascript/closure.md)\n* [네이티브 객체 vs 호스트 객체](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/javascript/native-host.md)\n* [this의 바인딩](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/javascript/this.md)\n* [var vs let vs const](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/javascript/var-let-const.md)\n* [IIFE (Immediately-Invoked Function Expression)](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/javascript/iife.md)\n* [모듈 시스템: CommonJS, AMD, UMD, ES6](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/javascript/module.md)\n* [콜 스택(Call stack)과 힙(Heap)](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/javascript/stack-heap.md)\n* [이벤트 루프 (Event loop)](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/javascript/event-loop.md)\n* [프로토타입 (Prototype)](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/javascript/prototype.md)\n* [== vs ===](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/javascript/identity-equal.md)\n* [엄격 모드 (Strict mode)](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/javascript/strict-mode.md)\n* [new의 동작방식](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/javascript/new.md)\n* [ES6 (2015) 의 특징들](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/javascript/es6.md)\n* [ES7 (ES2016) ~ ES8 (ES2017) 의 특징들](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/javascript/es7-es8.md)\n* [ES9 (ES2018) ~ ES10 (ES2019) 의 특징들](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/javascript/es9-es10.md)\n* [ES11 (ES2020) 의 특징들](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/javascript/es11.md)\n\n\u003cbr\u003e\n\n## :chart_with_upwards_trend: 네트워크\n\n* [TCP와 UDP](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/network/tcp-udp.md)\n* [HTTP](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/network/http.md)\n* [HTTPS](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/network/https.md)\n* [HTTP/1.1 vs HTTP/2](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/network/http1.1-2.md)\n* [URL과 URN을 포함하는 URI](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/network/uri.md)\n* [REST API](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/network/rest-api.md)\n* [Cookie vs Session](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/network/cookie-session.md)\n* [URL을 입력하고 벌어지는 일](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/network/type-url-process.md)\n* [CDN](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/network/cdn.md)\n\n\u003cbr\u003e\n\n## :lock: 보안\n\n* [동일 출처 정책 (Same Origin Policy)](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/security/sop.md)\n* [XSS와 CSRF](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/security/xss-csrf.md)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbaeharam%2Fmust-know-about-frontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbaeharam%2Fmust-know-about-frontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbaeharam%2Fmust-know-about-frontend/lists"}