[WEB] 웹 표준 HTML5 / CSS3 / ES6 요약 정리 기록하기

김현수·2024년 3월 23일
0

WEB

목록 보기
12/18


🖋️ 웹 표준 HTML5 / CSS3 / ES6 요약 정리


웹 개발의 기본

구조화된 콘텐츠를 만들고 반응성이 뛰어나며

시각적으로 매력적인 웹 사이트를 디자인 가능


  • HTML5

    • 시맨틱 요소

      • 웹 콘텐츠에 의미를 부여

      • <article>, <aside>, <Figure>, <footer>, <header>, <nav> 및 <section>


    • 양식 및 입력 유형

      • 같은 보다 직관적인 양식 컨트롤을 도입

      • <input type="date">, <input type="email"> 및 <input type="range">


    • 그래픽

      • <canvas> 스크립팅을 통해 그래픽을 그리는 경우

      • <svg> HTML에서 벡터 기반 그래픽을 정의하는 경우


    • 미디어 요소

      • 웹 페이지에 사운드와 비디오를 삽입

      • <audio> 및 <video>


    • 웹 저장소

      • 키-값 쌍으로 웹 애플리케이션 데이터를 로컬에 저장 가능


    • 오프라인 기능

      • App Cache 를 사용하면 Web App 에 오프라인으로 액세스 가능



  • CSS3

    • 선택기

      • 속성, 상태 및 구조를 기반으로 요소를 타겟팅하기 위한 새로운 선택기


    • 박스 모델

      • box-sizing 속성을 포함한 상자 크기 제어


    • 전환 및 애니메이션

      • CSS 속성 변경과 키프레임 기반 애니메이션 간의 원활한 전환을 생성


    • 미디어 쿼리

      • 화면 너비와 같은 미디어 조건에 따라 스타일을 적용하여 반응형 디자인을 활성화




  • ES6 부터 Script 기능들

    • ES6

      • let 및 const

        • 블록 범위 변수 및 상수

      • 화살표 함수

        • 함수 작성을 위한 간결한 구문

      • 템플릿 리터럴

        • 문자열 보간 및 여러 줄 문자열

      • 기본 매개변수

        • 기능 매개변수의 기본값

      • 구조 분해 할당

        • 배열에서 값을 추출하거나 객체에서 속성을 추출

      • 휴식/확산 연산자

        • 무한한 수의 매개변수를 처리

      • 클래스

        • JavaScript의 기존 프로토타입 기반 상속에 대한 구문 설탕

      • 약속

        • 비동기 작업 처리

      • 모듈

        • 코드 모듈화를 위한 문 가져오기 및 내보내기


    • ES7

      • Array.prototype.includes()

        • 배열에 특정 값이 포함되어 있는지 확인

      • 지수 연산자(**)

        • 지수 구문


    • ES8

      • async/await

        • 비동기 함수에서 Promise 작업을 위한 구문 설탕

      • Object.entries() 및 Object.values()

        • 객체 자체의 열거 가능한 속성 [key, value] 쌍 또는 값의 배열을 반환


    • ES9

      • Rest/Spread Properties

        • 객체용 나머지 / 스프레드

      • Asynchronous Iteration (비동기 반복)

        • for-await-of 루프

      • Promise.finally()

        • Promise가 완료될 때의 콜백


    • ES10

      • Array.prototype.Flat() 및 platMap()

        • 배열을 평면화하는 방법

      • Object.fromEntries()

        • 키-값 쌍을 객체로 변환

      • String.prototype.trimStart() 및 trimEnd()

        • 문장열 공백 제거


    • ES11

      • BigInt

        • 큰 정수에 대한 유형

      • Dynamic Import

        • 모듈을 동적으로 가져오기

      • Promise.allSettled()

        • 모든 Promise가 해결되거나 거부된 후 Promise를 반환

      • String.prototype.matchAll()

        • 정규 표현식과 일치하는 모든 항목을 반환


    • ES12

      • String.prototype.replaceAll()

        • 문자열의 모든 항목 바꾸기

      • ||=, &&=, ??=

        • 논리 할당 연산자

      • Promise.any()

        • 이행하는 첫 번째 약속을 반환


📰 HTML5 질문

  • Q. <section>과 <div>의 차이점

    • <section>

      • 일반적으로 제목과 함께 콘텐츠의 주제별 그룹을 나타내는 시멘틱 요소

    • <div>

      • 어떤 의미도 암시 X
      • 스타일 지정이나 레이아웃 목적으로 사용되는 의미 없는 컨테이너


  • Q. data-* 속성의 목적

    • HTML 요소에 사용자 정의 데이터를 저장 가능
    • 데이터는 JavaScript를 통해 쉽게 액세스 가능
    • 다른 속성이나 추가 요소 없이 요소의 의미 값이 향상


  • Q. <canvas> 대 <svg>의 장점

    • <canvas>

      • 그리기 유연성으로 인해 픽셀 기반
      • 복잡한 또는 실시간 그래픽(예: 게임)에 더 좋음

    • <svg>

      • 확장 가능한 대화형 벡터 그래픽에 더 좋음
      • DOM과 유사한 이벤트 모델 및 확장성으로 인해
        정적 또는 대화형 그래픽 작업이 더 쉬움


  • Q. <canvas> 대 <svg>의 장점

    • <canvas>

      • 그리기 유연성으로 인해 픽셀 기반
      • 복잡한 또는 실시간 그래픽(예: 게임)에 더 좋음

    • 웹 애플리케이션을 오프라인에서 사용할 수 있도록 만들기

      • 서비스 워커와 캐시 API를 사용하여 중요한 리소스를 캐시
      • 오프라인일 때 캐시에서 제공



📰 CSS3 질문

  • Q. Flex 와 Grid 의 차이점

    • Flex

      • 1차원 레이아웃(행 또는 열)용으로 설계
      • 컨테이너 내 항목을 정렬하는 데 이상적
      • 소규모 레이아웃(탐색, 항목 정렬 등)에 사용

    • Grid

      • 2차원 레이아웃(행과 열)용으로 복잡한 웹 페이지 레이아웃을 구축하는 데 적합
      • 스타일 지정이나 레이아웃 목적으로 사용되는 의미 없는 컨테이너
      • 대규모 레이아웃(페이지 전체 그리드 시스템 등)에 사용


  • Q. CSS 상자 모델 및 box-sizing

    • CSS 상자 모델은 요소가 여백, 테두리, 패딩 및 콘텐츠 자체로 구성되는 방식

    • box-sizing: border-box;

      • 요소의 전체 너비와 높이에 패딩과 테두리를 포함
      • 요소의 너비와 높이가 계산되는 방식을 변경하여 레이아웃 디자인을 단순화


  • Q. CSS3을 사용하여 반응형 디자인 구현

    • 미디어 쿼리를 사용하여 다양한 화면 크기에 맞는 다양한 CSS 스타일
    • 컨테이너에 따라 확장되는 유연한 이미지를 적용
    • 너비에 백분율을 사용하는 유동 그리드


  • Q. Transitions vs Animations

    • Transitions 은 CSS 속성을 변경할 때 애니메이션 속도를 제어하는 방법을 제공
    • 애니메이션은 키프레임과 상태를 정의
    • 복잡한 애니메이션에 대한 더 많은 제어 기능을 제공
    • Transitions 은 단일 상태 변경을 위한 것
    • 애니메이션은 루프, 반복 및 여러 상태 포함


  • Q. 미디어 쿼리 및 반응형 디자인

    • 미디어 쿼리를 사용하면 CSS가 조건에 따라 특정 스타일을 적용
    • 다양한 화면 크기, 방향 및 해상도에 적응



📰 ES6 질문

  • Q. var, let, const의 차이점

    • var는 함수 범위이며 다시 선언되고 호이스팅 가능
    • let과 const는 블록 범위이므로 다시 선언할 수 없음
    • const는 값을 재할당할 수 없는 상수용


  • Q. 화살표 함수 구문

    • 간결한 구문을 제공하고 상위 범위에서 'this'를 상속


  • Q. 템플릿 리터럴과 기존 문자열 연결

    • 템플릿 리터럴은 표현식 삽입을 위해 백틱과 ${} 구문을 사용하여 가독성을 높임
    • 여러 줄 문자열을 더 쉽게 설계


  • Q. 기본 매개변수

    • 정의되지 않은 값이 전달되면 함수 매개변수가 기본값을 갖도록 허용


  • Q. 구조 분해 할당

    • const [a, b] = [1, 2]; const {x, y} = {x: 10, y: 20};
    • 배열의 값이나 개체의 속성을 고유 변수로 압축 해제 가능


  • Q. Promises

    • 비동기 작업의 최종 완료 또는 실패를 나타내는 개체
    • .then(), .catch() 및 .finally() 메서드 사용
    • 더욱 깔끔한 비동기 코드를 촉진


  • Q. 클래스 구문 vs. 함수 기반 생성자

    • 클래스 구문은 객체 생성 및 상속 처리에 대해 더 명확하고 간결한 구문을 제공


  • Q. includes() 대 indexOf()

    • includes()는 배열에 특정 값이 포함되어 있는지 확인하고 부울을 반환
    • indexOf()는 index 를 반환


  • Q. 지수 연산자

    • console.log(3 ** 2); // 9


  • Q. 비동기/대기

    • 동기 스타일 구문으로 작성하여 더 쉽게 읽고 유지 관리 가능
    • 약속 작업을 단순화
      • try/catch를 사용하여 오류 처리를 단순화


  • Q. Object.entries() 및 Object.values()

    • Object.entries()

      • 객체를 [key, value] 쌍의 배열로 변환
      • 배열 메서드를 사용한 반복을 용이

    • Object.values()

      • 객체 값의 배열을 반환
      • 키 없이 값이 필요한 작업에 유용


  • Q. 객체에 대한 Spread 구문

    • 확산 구문(...)을 사용하면 객체의 열거 가능한 속성을 새 객체로 확장 가능
    • 객체를 복제하거나 병합하는 데 유용


  • Q. for-await-of 를 사용한 비동기 반복

    • Streams 또는 Arrays of Promises와 같은
      비동기 반복 가능 객체를 반복하면서 각 항목의 해결


  • Q. flat() 및 flatMap() 메서드

    • flat

      • 중첩된 배열을 지정된 깊이로 평면화
      • 깊게 중첩된 구조에 대한 작업을 단순화

    • flatMap()

      • map()과 flat()을 결합
      • 매핑 함수를 사용하여 각 요소를 매핑한 다음 결과를 평면화


  • Q. Object.fromEntries() 사용

    • 키-값 쌍 배열을 다시 객체로 변환
    • Object.entries() 작업을 되돌리거나 객체를 동적으로 구성하는 데 유용


  • Q. BigInt 사용

    • Number 제한을 넘어서는 정수의 표현 및 연산을 허용
    • 이는 큰 정수를 정확하게 처리하는 데 중요


  • Q. 모듈의 동적 가져오기

    • 동적 가져오기는 필요에 따라 모듈을 로드하여 초기 로드 시간과 효율성을 향상
    • async function loadModule() {
   const module = await import('./module.js');
   module.doSomething();
}


  • Q. replaceAll() vs replace() 사용

    • replaceAll()

      • 전역 정규식을 사용하지 않고 하위 문자열의 모든 항목을 바꿈

    • replace()

      • 전역 정규식을 사용하지 않는 한 첫 번째 항목만 바꿈


  • Q. 논리 할당 연산자

    • ||=: 논리적 OR 할당

    • &&=: 논리적 AND 할당

    • ??=: Nullish 병합 할당


profile
김현수
일단 한다
이전 포스트

[CS] 프론트엔드 면접을 위한 CS 지식 정리

다음 포스트

[WEB] 로드 밸런시, 프록시 및 역방향 프록시 기록하기

0개의 댓글