[문제모음] 프론트엔드 : 웹 기본, HTML/CSS/JS

[웹]

• 브라우저가 웹 페이지를 표시하는 일련의 과정 (네트워크부터 렌더링까지)
• reflow와 repaint의 차이
• 브라우저 캐싱
• 웹 성능과 관련된 이슈와 해결방안 아는대로 서술
• 페이지 로드 시간을 줄이는 세 가지 방법
• 브라우저가 한 번에 1개의 도메인에서 내려받는 자원의 개수와 예외
• AJAX 통신
• Web socket과 소켓 통신
• 프론트 쪽에서 일어날 수 있는 보안이슈와 핸들링
• OSI 7계층, TCP/IP 4계층

[JS]

• 프로토타입기반 언어로서 다른 언어와 비교해 JS의 특징을 설명
• 템플릿 문자열이란? 사용방법 예시
• 비구조화 할당방식(Destructuring)
• forEach, map, reduce 각각을 비교하고 사용법 설명
• 타입스크립트란?  
• JS의 싱글 스레드와 비동기 동시성 모델
• js의 function의 주요 특징 아는대로
• 이벤트 루프란? 동작과정
• 실행 컨텍스트란? 
• JS 의 this에 대해 아는대로 설명. 
• this를 바인딩하는 방법의 종류와 각자의 차이점
• Callback, Promise, async/await에 대해
• 스코프 체인과 클로저
• IIFE란? 올바른 사용법
• 호이스팅과 TDZ
• var, let, const의 차이
• shallow copy란?
• JS의 타입
• null과 undefined의 차이
• == 과 ===의 차이
• 삼항연산자의 사용방법과 이를 쓰는 이유
• JS의 배열과 실제 자료구조상 배열의 차이
• 함수의 선언식과 표현식
• arrow function과 일반 함수의 차이
• require와 import의 차이 (commonjs와 es6의 차이)

[html, css]

• doctype 과 주요 html 태그의 종류와 역할에 대해 설명
• xml과 xhtml이란?
• attribute와 property의 차이
• dataset이란?
• <script>, <script async>와 <script defer>의 차이점
• css와 js파일의 적절한 배치 위치와 그렇게 생각한 이유
• progressive rendering이란?
• 이미지 태그에 srcset 속성을 사용하는 이유는 무엇인가요? 브라우저가 이 속성을 가진 콘텐츠를 평가할 때 사용하는 과정을 설명
• HTML5를 오픈 웹 플랫폼(open web platform)으로 생각했을 때 구성요소
• 엘리먼트를 화면에 보이지 않게 하는 방법 아는대로. 각 방식의 차이점.
• 이벤트 버블링, 캡쳐링, 이벤트 위임에 대해
• html과 xhtml

[모던 프레임워크]

• node.js란?
• npm과 package.json에 대해
• 웹팩이란? 어떻게 사용하는가?
• 바벨이란? 어떻게 사용하는가?
• 폴리필이란?
• 린트란? 린트와 prettier 등의 포맷터의 차이는?
• virtual DOM이란? virtual DOM의 동작원리
• SPA란?
• CSR과 SSR의 차이

[Vue, React, Angualar - 경험 있는 분들만]

• Vue의 라이프사이클
• Vuex
• React의 라이프 사이클
• React 함수형 컴포넌트와 hook
• React의 useEffect와 사용법
• React의 JSX표현식
• React와 Redux
• React 최적화

[기타]

• 웹 애플리케이션이나 사이트를 만들 때 고려해야 할 UI, Security, Performance, SEO, Maintainability에 대해서 설명
• 웹 페이지를 처음부터 설계한다고 가정했을 때의 과정
• 다양한 테마를 가진 stylesheet 를 적용하는 방법
• 다국어 페이지를 제공하는 방법
• 점진적 향상법(progressive enhancement)과 우아한 성능저하법(graceful degradation)의 차이
• 웹사이트에서 assets/resources를 최적화하는 방법
• CSS 애니메이션과 JavaScript 애니메이션의 차이점
• 웹사이트의 scrolling 성능 향상을 위한 방법