.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
document.addEventListener("DOMContentLoaded", function() {
console.log("DOM completamente carregado e analisado");
});
.box1 {
position: relative;
z-index: 1;
}
.box2 {
position: relative;
z-index: 2; /* box2 será exibido na frente de box1 */
}
const obj = {
name: "John",
greet: function() {
console.log("Hello, " + this.name);
}
};
obj.greet(); // "Hello, John"
.className { /* Seleciona todos os elementos com a classe "className" */
color: blue;
}
#idName { /* Seleciona o elemento com o ID "idName" */
font-size: 20px;
}
localStorage.setItem("key", "value");
const value = localStorage.getItem("key"); // "value"
질문: "이벤트 버블링"이란 무엇입니까?
답변: "이벤트 버블링"은 이벤트가 가장 안쪽 요소에서 시작하여 외부 요소로 전파되는 이벤트 전파 메커니즘입니다. 예를 들어
질문: "콜백 함수"란 무엇인가요?
답변: "콜백 함수"는 나중에 호출할 수 있는 다른 함수에 인수로 전달되는 함수입니다. 예:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
document.addEventListener("DOMContentLoaded", function() {
console.log("DOM completamente carregado e analisado");
});
질문: "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 */
}
질문: "CORS"란 무엇인가요?
답변: CORS(Cross-Origin Resource Sharing)는 웹페이지의 제한된 리소스를 해당 페이지를 제공한 도메인이 아닌 다른 도메인에서 요청할 수 있도록 하는 보안 메커니즘입니다. 이는 사용자 데이터를 보호하는 데 중요합니다.
질문: React에서 "가상 DOM"이란 무엇인가요?
답변: "가상 DOM"은 실제 DOM을 경량으로 표현한 것입니다. React는 가상 DOM을 사용하여 DOM 업데이트를 최적화하므로 가상 DOM과 실제 DOM을 비교하고 필요한 변경 사항만 적용하여 보다 효율적으로 변경할 수 있습니다.
질문: React에서 "props"란 무엇인가요?
답변: "Props"는 React의 구성 요소 간에 데이터를 전달하는 메커니즘입니다. 이를 통해 상위 구성 요소의 데이터를 하위 구성 요소로 전달할 수 있습니다. 예:
const obj = {
name: "John",
greet: function() {
console.log("Hello, " + this.name);
}
};
obj.greet(); // "Hello, John"
질문: React에서 "상태"란 무엇인가요?
답변: "상태"는 변경될 수 있는 애플리케이션 부분을 나타내는 개체입니다. 구성 요소의 렌더링에 영향을 미치는 데이터를 저장하는 데 사용됩니다. 예:
.className { /* Seleciona todos os elementos com a classe "className" */
color: blue;
}
#idName { /* Seleciona o elemento com o ID "idName" */
font-size: 20px;
}
질문: "React Router"란 무엇인가요?
답변: React Router는 React 애플리케이션의 다양한 구성 요소 간 탐색을 허용하여 단일 페이지 애플리케이션(SPA) 생성을 용이하게 하는 라이브러리입니다. URL을 기반으로 경로를 정의하고 구성 요소를 렌더링할 수 있습니다.
질문: React에서 "후크"란 무엇인가요?
답변: 후크는 기능 구성 요소에서 상태 및 기타 React 리소스를 사용할 수 있게 해주는 함수입니다. useState 및 useEffect는 후크의 예입니다. 예:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
질문:"Webpack"이 무엇인가요?
답변: Webpack은 JavaScript 애플리케이션용 모듈 래퍼입니다. 이를 통해 JavaScript, CSS 및 기타 리소스 파일을 단일 파일 또는 여러 프로덕션에 최적화된 파일로 묶을 수 있습니다.
질문:바벨이란 무엇인가요?
답변: Babel은 최신 JavaScript 코드(ES6)를 작성하고 이를 이전 브라우저와 호환되는 버전으로 변환할 수 있는 트랜스파일러입니다. Webpack과 함께 사용되는 경우가 많습니다.
질문: "SASS"란 무엇인가요?
답변: SASS(Syntactically Awesome Style Sheets)는 변수, 중첩 및 함수를 사용하여 CSS를 더욱 동적이고 유지 관리하기 쉽게 만드는 CSS 전처리기입니다. 예:
document.addEventListener("DOMContentLoaded", function() {
console.log("DOM completamente carregado e analisado");
});
질문:"AJAX"란 무엇입니까?
답변: AJAX(Asynchronous JavaScript and XML)는 페이지를 다시 로드하지 않고도 서버에 비동기 요청을 할 수 있는 기술입니다. 이는 웹페이지의 일부를 동적으로 업데이트하는 데 자주 사용됩니다.
질문: "마이크로서비스 아키텍처"란 무엇입니까?
답변: 마이크로서비스 아키텍처는 서로 통신하는 작고 독립적인 서비스 집합으로 애플리케이션을 구성하는 아키텍처 스타일입니다. 이를 통해 여러 팀이 애플리케이션의 다양한 부분을 보다 효율적으로 작업할 수 있습니다.
질문: "SSR"(서버 측 렌더링)이란 무엇입니까?
답변: SSR은 클라이언트가 아닌 서버에서 웹 애플리케이션 렌더링이 수행되는 기술입니다. 콘텐츠가 이미 렌더링된 클라이언트로 전송되므로 성능과 SEO가 향상될 수 있습니다.
질문: "CSR"(클라이언트 측 렌더링)이란 무엇입니까?
답변: CSR은 일반적으로 JavaScript를 사용하여 클라이언트에서 웹 애플리케이션 렌더링을 수행하는 기술입니다. 이를 통해 보다 상호작용적인 사용자 경험이 가능하지만 올바르게 구현되지 않으면 SEO에 부정적인 영향을 미칠 수 있습니다.
질문:"Redux Saga"란 무엇인가요?
답변: Redux Saga는 Redux 애플리케이션의 부작용 관리를 용이하게 하는 라이브러리입니다. 생성기를 사용하여 API 호출과 같은 비동기 작업을 보다 읽기 쉽고 체계적인 방식으로 처리합니다.
질문: React의 "Context API"가 무엇인가요?
답변: Context API는 각 수준에서 props를 수동으로 전달할 필요 없이 구성 요소 트리를 통해 데이터를 전달하는 방법입니다. 테마나 사용자 정보 등 글로벌 데이터를 공유할 때 유용합니다.
질문: "TypeScript"란 무엇입니까?
답변: TypeScript는 코드에 정적 타이핑을 추가하는 JavaScript의 상위 집합입니다. 변수, 함수, 객체의 유형을 정의할 수 있어 런타임 오류를 방지하는 데 도움이 됩니다.
질문: "프로그레시브 웹 앱(PWA)"이란 무엇인가요?
답변: PWA는 오프라인 지원, 푸시 알림, 홈 화면 설치 등 기본 앱과 유사한 경험을 제공하는 웹 애플리케이션입니다. 표준 웹 기술을 사용하여 구축되었습니다.
질문: "GraphQL"이 무엇인가요?
답변: GraphQL은 클라이언트가 필요한 데이터를 정확하게 요청할 수 있게 해주는 API용 쿼리 언어입니다. 이는 클라이언트가 필요한 것보다 더 많은 데이터를 수신할 수 있는 REST API와 대조됩니다.
질문: "웹 접근성"이란 무엇입니까?
답변: 웹 접근성이란 장애인이 웹 애플리케이션을 사용할 수 있도록 만드는 행위를 말합니다. 여기에는 시맨틱 태그, ARIA 속성 사용 및 콘텐츠가 키보드로 탐색 가능한지 확인하는 것이 포함됩니다.
질문: "서비스 워커"란 무엇인가요?
답변: 서비스 워커는 브라우저가 웹 페이지와 별도로 백그라운드에서 실행되어 캐싱, 푸시 알림, 백그라운드 동기화와 같은 기능을 활성화하는 스크립트입니다. PWA 구축에 필수적입니다.
제시된 정보는 다음을 포함하여 신뢰할 수 있는 여러 출처에서 추출 및 수정되었습니다.
글래스도어 - 인터뷰 경험과 자주 묻는 질문을 공유하는 사이트
MDN 웹 문서 - HTML, CSS 및 JavaScript에 대한 포괄적인 문서입니다.
JavaScript.info - 기초부터 고급 주제까지 모든 내용을 다루는 최신 JavaScript 가이드입니다.
React 문서 - 라이브러리에 대한 자세한 정보를 제공하는 공식 React 문서입니다.
CSS-Tricks - CSS 및 프런트엔드 개발에 대한 팁과 튜토리얼이 있는 웹사이트입니다.
이러한 소스는 웹 개발 커뮤니티에서 널리 인정받고 있으며 프런트엔드 지식을 심화하는 데 유용한 리소스입니다.
위 내용은 프런트 엔드 개념 II의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
