프런트 엔드 개념 II

주니어 레벨

1. 질문: CSS 그리드란 무엇입니까? 답변: CSS 그리드는 웹에서 2차원 레이아웃을 만들 수 있는 레이아웃 시스템입니다. 페이지를 행과 열로 나누어 요소 위치를 쉽게 지정할 수 있습니다. 예를 들어:

   .grid-container {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       grid-gap: 10px;
   }

1. 질문: "DOMContentLoaded" 이벤트가 무엇인가요? 답변: 스타일시트, 이미지 및 하위 프레임 로드가 완료될 때까지 기다리지 않고 초기 HTML 문서가 완전히 로드되고 구문 분석되면 DOMContentLoaded 이벤트가 시작됩니다. DOM이 준비되면 스크립트를 실행하는 데 유용합니다.

   document.addEventListener("DOMContentLoaded", function() {
       console.log("DOM completamente carregado e analisado");
   });

1. 질문: CSS의 "z-index" 속성은 무엇입니까? 답변: z-index 속성은 요소의 스택 순서를 제어합니다. Z-인덱스가 높은 요소는 Z-인덱스가 낮은 요소 앞에 표시됩니다. 예를 들어:

   .box1 {
       position: relative;
       z-index: 1;
   }
   .box2 {
       position: relative;
       z-index: 2; /* box2 será exibido na frente de box1 */
   }

1. 질문: JavaScript에서 "this"는 무엇인가요? 답변: JavaScript에서 이는 현재 실행 컨텍스트를 나타냅니다. 이 값은 함수 호출 방법에 따라 변경될 수 있습니다. 예를 들어:

   const obj = {
       name: "John",
       greet: function() {
           console.log("Hello, " + this.name);
       }
   };
   obj.greet(); // "Hello, John"

1. 질문: CSS 선택자란 무엇입니까? 답변: CSS 선택기는 스타일을 지정하려는 요소를 선택하는 데 사용되는 패턴입니다. 클래스 선택자, ID 선택자, 유형 선택자 등 여러 유형의 선택자가 있습니다. 예를 들어:

   .className { /* Seleciona todos os elementos com a classe "className" */
       color: blue;
   }
   #idName { /* Seleciona o elemento com o ID "idName" */
       font-size: 20px;
   }

1. 질문: JavaScript에서 "localStorage"란 무엇입니까? 답변: localStorage는 사용자의 브라우저에 데이터를 지속적으로 저장할 수 있는 API입니다. localStorage에 저장된 데이터는 만료되지 않으며 브라우저를 닫은 후에도 유지됩니다. 예를 들어:

   localStorage.setItem("key", "value");
   const value = localStorage.getItem("key"); // "value"

1. 질문: "이벤트 버블링"이란 무엇입니까?
   
   답변: "이벤트 버블링"은 이벤트가 가장 안쪽 요소에서 시작하여 외부 요소로 전파되는 이벤트 전파 메커니즘입니다. 예를 들어

   클릭하면 클릭 이벤트가 먼저 버튼에서 발생한 다음

   에서 발생합니다.

2. 질문: "콜백 함수"란 무엇인가요?
   
   답변: "콜백 함수"는 나중에 호출할 수 있는 다른 함수에 인수로 전달되는 함수입니다. 예:
   

   .grid-container {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       grid-gap: 10px;
   }

1. 질문: '반응형 디자인'이란 무엇인가요? 답변: '반응형 디자인'은 다양한 화면 크기와 기기에 맞게 페이지를 만드는 것을 목표로 하는 웹 디자인 접근 방식입니다. 이는 CSS의 미디어 쿼리를 사용하여 수행되는 경우가 많습니다. 예를 들어:

   document.addEventListener("DOMContentLoaded", function() {
       console.log("DOM completamente carregado e analisado");
   });

1. 질문: "fetch API"란 무엇인가요?
   
   답변: 가져오기 API는 JavaScript로 HTTP 요청을 만들기 위한 최신 인터페이스입니다. 요청의 응답을 해결하는 Promise를 반환합니다. 예:
   

      .box1 {
          position: relative;
          z-index: 1;
      }
      .box2 {
          position: relative;
          z-index: 2; /* box2 será exibido na frente de box1 */
      }
   

전체 레벨

1. 질문: "CORS"란 무엇인가요?
   
   답변: CORS(Cross-Origin Resource Sharing)는 웹페이지의 제한된 리소스를 해당 페이지를 제공한 도메인이 아닌 다른 도메인에서 요청할 수 있도록 하는 보안 메커니즘입니다. 이는 사용자 데이터를 보호하는 데 중요합니다.

2. 질문: React에서 "가상 DOM"이란 무엇인가요?
   
   답변: "가상 DOM"은 실제 DOM을 경량으로 표현한 것입니다. React는 가상 DOM을 사용하여 DOM 업데이트를 최적화하므로 가상 DOM과 실제 DOM을 비교하고 필요한 변경 사항만 적용하여 보다 효율적으로 변경할 수 있습니다.

3. 질문: React에서 "props"란 무엇인가요?
   
   답변: "Props"는 React의 구성 요소 간에 데이터를 전달하는 메커니즘입니다. 이를 통해 상위 구성 요소의 데이터를 하위 구성 요소로 전달할 수 있습니다. 예:
   

      const obj = {
          name: "John",
          greet: function() {
              console.log("Hello, " + this.name);
          }
      };
      obj.greet(); // "Hello, John"
   

4. 질문: React에서 "상태"란 무엇인가요?
   
   답변: "상태"는 변경될 수 있는 애플리케이션 부분을 나타내는 개체입니다. 구성 요소의 렌더링에 영향을 미치는 데이터를 저장하는 데 사용됩니다. 예:
   

      .className { /* Seleciona todos os elementos com a classe "className" */
          color: blue;
      }
      #idName { /* Seleciona o elemento com o ID "idName" */
          font-size: 20px;
      }
   

5. 질문: "React Router"란 무엇인가요?
   
   답변: React Router는 React 애플리케이션의 다양한 구성 요소 간 탐색을 허용하여 단일 페이지 애플리케이션(SPA) 생성을 용이하게 하는 라이브러리입니다. URL을 기반으로 경로를 정의하고 구성 요소를 렌더링할 수 있습니다.

6. 질문: React에서 "후크"란 무엇인가요?
   
   답변: 후크는 기능 구성 요소에서 상태 및 기타 React 리소스를 사용할 수 있게 해주는 함수입니다. useState 및 useEffect는 후크의 예입니다. 예:
   

      .grid-container {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          grid-gap: 10px;
      }
   

7. 질문:"Webpack"이 무엇인가요?
   
   답변: Webpack은 JavaScript 애플리케이션용 모듈 래퍼입니다. 이를 통해 JavaScript, CSS 및 기타 리소스 파일을 단일 파일 또는 여러 프로덕션에 최적화된 파일로 묶을 수 있습니다.

8. 질문:바벨이란 무엇인가요?
   
   답변: Babel은 최신 JavaScript 코드(ES6)를 작성하고 이를 이전 브라우저와 호환되는 버전으로 변환할 수 있는 트랜스파일러입니다. Webpack과 함께 사용되는 경우가 많습니다.

9. 질문: "SASS"란 무엇인가요?
   
   답변: SASS(Syntactically Awesome Style Sheets)는 변수, 중첩 및 함수를 사용하여 CSS를 더욱 동적이고 유지 관리하기 쉽게 만드는 CSS 전처리기입니다. 예:
   

      document.addEventListener("DOMContentLoaded", function() {
          console.log("DOM completamente carregado e analisado");
      });
   

10. 질문:"AJAX"란 무엇입니까?
    
    답변: AJAX(Asynchronous JavaScript and XML)는 페이지를 다시 로드하지 않고도 서버에 비동기 요청을 할 수 있는 기술입니다. 이는 웹페이지의 일부를 동적으로 업데이트하는 데 자주 사용됩니다.

시니어 레벨

1. 질문: "마이크로서비스 아키텍처"란 무엇입니까?
   
   답변: 마이크로서비스 아키텍처는 서로 통신하는 작고 독립적인 서비스 집합으로 애플리케이션을 구성하는 아키텍처 스타일입니다. 이를 통해 여러 팀이 애플리케이션의 다양한 부분을 보다 효율적으로 작업할 수 있습니다.

2. 질문: "SSR"(서버 측 렌더링)이란 무엇입니까?
   
   답변: SSR은 클라이언트가 아닌 서버에서 웹 애플리케이션 렌더링이 수행되는 기술입니다. 콘텐츠가 이미 렌더링된 클라이언트로 전송되므로 성능과 SEO가 향상될 수 있습니다.

3. 질문: "CSR"(클라이언트 측 렌더링)이란 무엇입니까?
   
   답변: CSR은 일반적으로 JavaScript를 사용하여 클라이언트에서 웹 애플리케이션 렌더링을 수행하는 기술입니다. 이를 통해 보다 상호작용적인 사용자 경험이 가능하지만 올바르게 구현되지 않으면 SEO에 부정적인 영향을 미칠 수 있습니다.

4. 질문:"Redux Saga"란 무엇인가요?
   
   답변: Redux Saga는 Redux 애플리케이션의 부작용 관리를 용이하게 하는 라이브러리입니다. 생성기를 사용하여 API 호출과 같은 비동기 작업을 보다 읽기 쉽고 체계적인 방식으로 처리합니다.

5. 질문: React의 "Context API"가 무엇인가요?
   
   답변: Context API는 각 수준에서 props를 수동으로 전달할 필요 없이 구성 요소 트리를 통해 데이터를 전달하는 방법입니다. 테마나 사용자 정보 등 글로벌 데이터를 공유할 때 유용합니다.

6. 질문: "TypeScript"란 무엇입니까?
   
   답변: TypeScript는 코드에 정적 타이핑을 추가하는 JavaScript의 상위 집합입니다. 변수, 함수, 객체의 유형을 정의할 수 있어 런타임 오류를 방지하는 데 도움이 됩니다.

7. 질문: "프로그레시브 웹 앱(PWA)"이란 무엇인가요?
   
   답변: PWA는 오프라인 지원, 푸시 알림, 홈 화면 설치 등 기본 앱과 유사한 경험을 제공하는 웹 애플리케이션입니다. 표준 웹 기술을 사용하여 구축되었습니다.

8. 질문: "GraphQL"이 무엇인가요?
   
   답변: GraphQL은 클라이언트가 필요한 데이터를 정확하게 요청할 수 있게 해주는 API용 쿼리 언어입니다. 이는 클라이언트가 필요한 것보다 더 많은 데이터를 수신할 수 있는 REST API와 대조됩니다.

9. 질문: "웹 접근성"이란 무엇입니까?
   
   답변: 웹 접근성이란 장애인이 웹 애플리케이션을 사용할 수 있도록 만드는 행위를 말합니다. 여기에는 시맨틱 태그, ARIA 속성 사용 및 콘텐츠가 키보드로 탐색 가능한지 확인하는 것이 포함됩니다.

10. 질문: "서비스 워커"란 무엇인가요?
    
    답변: 서비스 워커는 브라우저가 웹 페이지와 별도로 백그라운드에서 실행되어 캐싱, 푸시 알림, 백그라운드 동기화와 같은 기능을 활성화하는 스크립트입니다. PWA 구축에 필수적입니다.

서지

제시된 정보는 다음을 포함하여 신뢰할 수 있는 여러 출처에서 추출 및 수정되었습니다.

1. 글래스도어 - 인터뷰 경험과 자주 묻는 질문을 공유하는 사이트

   • 유리문

2. MDN 웹 문서 - HTML, CSS 및 JavaScript에 대한 포괄적인 문서입니다.

   • MDN 웹 문서

3. JavaScript.info - 기초부터 고급 주제까지 모든 내용을 다루는 최신 JavaScript 가이드입니다.

   • JavaScript.info

4. React 문서 - 라이브러리에 대한 자세한 정보를 제공하는 공식 React 문서입니다.

   • React 문서

5. CSS-Tricks - CSS 및 프런트엔드 개발에 대한 팁과 튜토리얼이 있는 웹사이트입니다.

   • CSS 트릭

이러한 소스는 웹 개발 커뮤니티에서 널리 인정받고 있으며 프런트엔드 지식을 심화하는 데 유용한 리소스입니다.