상위 27개 프론트 엔드 개발자 인터뷰 질문 및 답변
게시 됨: 2021-11-02프론트엔드 개발은 특히 웹 개발 초보자에게 가장 수익성이 높은 분야 중 하나입니다. HTML, CSS, JavaScript 및 약간의 서버 지식과 같은 기본적인 기술이 대부분 필요하기 때문에 많은 신입생들은 프론트엔드 개발이 풀 스택 개발 경력을 위한 좋은 출발점이 될 수 있다고 생각합니다.
그러나 문제는 프런트 엔드 개발이 광범위하고 다양한 도구와 기술을 포함한다는 것입니다. 결과적으로 프론트 엔드 개발자의 역할에 대한 인터뷰 질문은 매우 다양하고 다양한 영역에 걸쳐 있습니다.
목차
프런트 엔드 개발자 인터뷰 질문 및 답변
가장 많이 받는 프론트엔드 개발자 인터뷰 질문 27가지를 살펴보겠습니다. 지금 이 기사를 살펴보고 나중에 읽을 수 있도록 북마크에 추가하십시오. 인터뷰 날짜 전에 수정하십시오!
1. DOCTYPE이란 무엇이며 어떤 역할을 합니까?
DOCTYPE은 DTD(문서 유형 정의)와 연관되며 문서 유형을 나타냅니다. 이를 통해 개발자는 특정 문서에서 사용 중인 HTML 버전을 브라우저에 알릴 수 있습니다. 예를 들어 HTML 4에 대한 선언은 – <!DOCTYPE HTML4>입니다.
2. HTML에서 메타 태그의 관련성은 무엇입니까?
메타 태그는 <head> 태그 안에 있으며 전체 HTML 문서에 대한 메타데이터를 제공합니다. 페이지 문자 집합, 페이지 설명, 페이지 언어, 페이지 작성자 이름 등과 같은 사양을 지정하는 작업을 수행합니다. 다음은 메타 태그를 사용하는 예입니다.
<!DOCTYPE HTML>
<html>
<머리>
<메타 문자 집합=”utf-8″>
<메타 이름=”뷰포트” 콘텐츠=”너비=장치 너비, 초기 크기=1″>
<meta name="키워드" content="프론트엔드 개발자 인터뷰 질문, CSS, HTML, JavaScript">
<title>프론트엔드 인터뷰 질문 및 답변</title>
</head>
<본체>
</바디>
</html>
3. Lazy Loading이란 무엇을 이해합니까?
Lazy loading은 사용자의 필요에 따라 브라우저에 콘텐츠를 로드하는 기술 중 하나입니다. 이렇게 하면 리소스 활용도와 서버 사용량이 최적화됩니다. Flipkart 또는 Amazon과 같은 전자 상거래 애플리케이션에서 이에 대한 실제 예를 볼 수 있습니다. 이러한 사이트에서 특정 제품을 검색하면 첫 번째 접힌 부분에서만 사용할 수 있는 요소에 대한 세부 정보(가격, 사진, 주요 기능)만 볼 수 있습니다. 그런 다음 아래로 스크롤하면 필요할 때 아래 요소가 계속 로드됩니다.
4. JavaScript의 강제 변환에 대해 무엇을 알고 있습니까?
강제 변환은 변수의 데이터 유형을 변환하는 방법입니다. 강제 변환을 사용하여 개체를 부울로, 문자열을 숫자로 변환하는 등의 작업을 수행할 수 있습니다. 더 잘 설명하는 코드는 다음과 같습니다.
변수 x= 23;
변수 y = 문자열(x);
유형(x)
유형(y)
이 코드의 출력은 숫자와 문자열이 될 것이며, 이는 변수 x의 데이터 유형이 숫자이고 강제 변환 후에 데이터 유형이 문자열로 변경됨을 의미합니다.
JavaScript는 두 가지 유형의 강제 변환을 지원합니다.
- 암시적: 여기에서 JavaScript 자체가 변수의 데이터 유형을 변경합니다.
예: var x = 10;
var y = x + '01';
이 경우 y의 값은 '1001'이 되고 데이터 유형은 String이 됩니다. JavaScript는 암시적으로 x의 숫자 데이터 유형을 문자열로 변환하여 새 문자열 '01'에 연결하므로 변수 y의 최종 결과로 '1001'이 생성됩니다.
- 명시적: 명시적 강제를 사용하려면 개발자가 Number(), Boolean(), String 등과 같은 내장 함수를 사용하여 데이터 유형을 의도적으로 변경해야 합니다.
예: var x = 12;
변수 y = 문자열(x);
위의 코드에서 변수 x의 데이터 유형은 명시적으로 숫자에서 문자열로 변경되었습니다.
5. JavaScript의 변수 범위에 대해 무엇을 이해합니까?
변수 범위는 특정 JavaScript 프로그램에서 변수의 제어 영역 또는 범위를 설정하는 데 사용됩니다. JavaScript에는 두 가지 유형의 변수 범위가 있습니다.
- 지역 범위: 지역 범위는 해당 변수의 접근성과 가용성이 변수가 정의된 기능으로 제한됨을 의미합니다.
예를 들어:
함수 합계() {
변수 x = 5;
변수 y = 2;
}
함수 alsoSum()
{
var z = x+y;
}
위의 코드에서 두 번째 함수는 변수 x와 y가 함수 sum()의 범위에 속하기 때문에 올바르게 실행되지 않습니다. 변수는 해당 범위에 로컬입니다. 따라서 다른 변수는 x 및 y에 액세스할 수 없으므로 이 함수는 올바르지 않습니다.
- 전역 범위: 전역 범위는 모든 함수 외부에 정의된 변수에 대한 것입니다. 이 경우 모든 함수가 변수에 액세스할 수 있습니다.
예를 들어:
변수 x = 2; // 전역변수이다
함수 합계() {
변수 z = 3;
var y = x + z;
}
위 코드에서 변수 x는 전역 범위를 가지므로 sum() 함수는 이에 액세스할 수 있습니다. 그렇기 때문에 변수 y는 값 5(x+z)를 얻고 이 함수는 예상대로 실행됩니다.
6. Node.JS는 무엇에 사용됩니까?
Node.JS는 본질적으로 오픈 소스인 JavaScript 런타임 환경입니다. 서버 자체에서 JS 코드를 원활하게 실행할 수 있습니다. Node.JS 이전에는 JavaScript 코드가 브라우저에서 실행되지만 NOde는 이를 완전히 변경했습니다. 오늘날 Node.JS는 서버 부분을 처리하기 위해 전체 스택 개발에 광범위하게 사용됩니다. 이를 통해 개발자는 웹 앱의 모든 끝에서 단일 언어(JavaScript)를 사용하여 작업할 수 있습니다(예를 들어 MEAN 스택을 사용하면 JS 언어, 다른 프레임워크를 사용하여 전체 스택 개발을 수행할 수 있습니다!)
7. NPM 설명
Node Package Manager의 줄임말인 NPM은 Node.JS용 패키지 도구입니다. Node 프로젝트를 위한 온라인 리포지토리와 다양한 패키지를 관리하고 작업하기 위한 명령줄 유틸리티를 제공합니다. 특정 Node.JS 패키지에 액세스하거나 사용하기 위해 NPM을 호출하고 사용할 수 있습니다.
8. 서버는 다국어 콘텐츠가 있는 웹 페이지 또는 응용 프로그램과 어떻게 작동합니까?
사용자가 이러한 사이트에 액세스하면 사용자의 브라우저는 사용자가 선택한 언어와 관련된 정보를 보냅니다. 이것은 Accept-Language 헤더를 사용하여 수행됩니다. 서버는 이 정보를 읽고 사용하여 언어를 올바른 언어로 되돌려 보냅니다.
9. HTML에서 data-* 속성은 무엇이며 지금 사용하도록 권장됩니까?
Data-* 속성은 웹 페이지에 비공개인 사용자 지정을 저장하는 데 사용됩니다. 이것은 개발자가 웹사이트를 디버그하거나 비공개로 변경할 수 있도록 하는 데 사용됩니다. data-* 속성의 사용은 권장되지 않습니다. 이제 브라우저에서 inspect 콘솔을 사용하여 동일한 작업을 수행할 수 있기 때문입니다.
10. 자바스크립트에서 IIFE란 무엇입니까?
IIFE는 즉시 호출된 함수 표현식의 약자로 함수가 생성되는 즉시 실행하는 기술입니다. 일반적으로 전역 개체 또는 변수를 채우는 데 사용됩니다.
11. React.JS에 대해 알고 있습니까?
예 – React는 단일 페이지 웹 앱의 프론트 엔드(UI)를 빌드하는 데 사용되는 JavaScript 라이브러리입니다. Facebook에서 개발했으며 주로 모바일 및 웹 응용 프로그램의 전면 보기를 처리하는 데 사용되었습니다.
12. 외부 JS/CSS 또는 인라인 JS/CSS – 어느 것이 선호되어야 하며 그 이유는 무엇입니까?
인라인 코딩은 문서 크기를 증가시켜 코드 실행을 느리게 합니다. 인라인 코딩을 사용하면 사용자 브라우저가 CSS 및 JS 코드를 캐시하고 더 빠른 실행을 위해 저장하는 기능을 잃게 됩니다. 반면에 브라우저는 외부 CSS 및 JS로 파일을 캐시할 수 있으므로 페이지 로드 시간이 향상됩니다.
13. 자바스크립트에서 'dos' 키워드 사용 설명
'does' 키워드의 개념은 다른 고급 프로그래밍 기술의 동적 바인딩과 유사합니다. 연결된 개체를 참조하는 데 사용됩니다.
예를 들어:
var 학생 = {
fName: "샘",
이름 : "해리스",
아이디 : 2123,
완전한 이름 : 함수() {
this.fName + "" + this.lName을 반환합니다.
}
};
위의 예에서 this.firstname은 'this' 함수, 즉 Sam에 저장된 변수 'firstName' 값을 반환합니다. fullName() 함수는 성과 이름을 연결하여 출력 "Sam Harris"를 반환합니다. 이것은 여러 기능과 유사한 변수 이름을 가진 큰 코드를 다룰 때 유용한 속성입니다.
14. SQL 인젝션에 대해 무엇을 알고 있습니까?
SQL 인젝션은 웹사이트의 SQL 데이터베이스에 접근하기 위해 입력 양식에 악성 코드를 삽입하는 기술입니다. 이것은 가장 많이 시행되고 잘 알려진 해킹 기술 중 하나이며, 잘못 설계되고 엄격한 서버 보호 조치를 취하지 않은 웹 사이트는 쉽게 SQL 주입의 희생물이 될 수 있습니다.
15. CSS 상자 모델의 모든 요소 설명
CSS의 상자 모델에는 네 가지 요소가 있습니다.
- 콘텐츠: 여기에는 웹페이지의 모든 텍스트, 이미지 및 기타 모든 항목을 포함한 주요 콘텐츠가 포함됩니다.
- 패딩: 패딩은 콘텐츠 영역과 페이지 외부 경계 사이의 공간으로 이해할 수 있습니다. 웹페이지 콘텐츠의 숨쉬는 공간이라고 생각하시면 됩니다.
- 테두리: 테두리는 패딩을 덮는 영역입니다. 패딩의 외부 레이어입니다 .
- 여백: 여백은 테두리 외부에 있으며 페이지의 올바른 방향을 보장하기 위해 HTML 페이지 주변과 사용자 화면 경계 사이의 거리를 측정하는 데 사용됩니다.
아래 이미지를 참조하여 4가지 용어를 보다 명확하게 이해하십시오.
16. CSS에서 'mixin'이란 무엇이며 어떻게 구현됩니까?
Mixin은 속성-값 쌍의 재사용 가능한 패턴을 설정하는 데 사용됩니다. 코드 작성자는 이를 사용하여 코드를 단순화합니다.
예를 들어:
@mixin .rounded10px {
-moz-border-radius: 10px;
}
이 경우 '.rounded10px'는 '-Moz-border-radius: 10px;' 문을 구현하기 위해 HTML 코드의 어느 곳에서나 사용할 수 있습니다. 이것은 CSS 코드에 많은 이식성과 가독성을 제공합니다.
17. SASS에 대해 무엇을 알고 있습니까?
SASS는 Syntactically Awesome Stylesheets의 줄임말입니다. CSS 코드를 최적화하는 데 사용되는 CSS 전처리기입니다. 중첩 규칙, 믹스인, 변수, 인라인 가져오기 등과 같은 기능을 도입하여 수학 개념을 사용하여 CSS 코드를 훨씬 더 나은 방식으로 구성하고 여러 CSS 코드를 동시에 사용할 수 있습니다. 브라우저는 SASS 파일을 실행할 수 없으므로 브라우저로 보내기 전에 먼저 CSS로 변환해야 합니다.
18. 쿠키, 로컬 저장소 및 세션 저장소를 구분합니다.
쿠키, 로컬 저장소 및 세션 저장소는 브라우저가 더 빠른 처리 및 검색을 위해 정보를 저장하는 세 가지 방법입니다. 이 세 가지 기술이 서로 다른 측정항목에서 어떻게 다른지 포괄적으로 이해하려면 아래 표를 참조하십시오.
미터법 | 쿠키 | 로컬 스토리지 | 세션 스토리지 |
만료 시간 | 없음. 그러나 사용자가 수동으로 파기하거나 특정 웹사이트에 대해 개발자가 설정할 수 있습니다. | 없음. | 각 세션이 끝날 때 자동으로 만료됩니다. |
여러 세션에 걸친 지속성 | 개발자가 만료 시간을 설정했는지 여부에 따라 다릅니다. | 예, 이는 여러 세션에서 지속됩니다. | 아니요, 이것은 자동으로 소멸되므로 세션 간에 지속되지 않습니다. |
서버와의 통신 | '쿠키 헤더'를 통해 헤더로 자동 전송됩니다. | 서버와 통신이 되지 않습니다. | 서버와 통신이 되지 않습니다. |
저장 능력 | 4kb | 5MB | 5MB |
| 접근성 | 모든 창 | 모든 창 | 같은 탭만 |
미터법
쿠키
로컬 스토리지
세션 스토리지
만료 시간
없음. 그러나 사용자가 수동으로 파기하거나 특정 웹사이트에 대해 개발자가 설정할 수 있습니다.
없음.
각 세션이 끝날 때 자동으로 만료됩니다.
여러 세션에 걸친 지속성
개발자가 만료 시간을 설정했는지 여부에 따라 다릅니다.
예, 이는 여러 세션에서 지속됩니다.
아니요, 이것은 자동으로 소멸되므로 세션 간에 지속되지 않습니다.
서버와의 통신
'쿠키 헤더'를 통해 헤더로 자동 전송됩니다.
서버와 통신이 되지 않습니다.
서버와 통신이 되지 않습니다.
저장 능력
4kb
5MB
5MB
접근성
모든 창
모든 창
같은 탭만
19. 프로그레시브 렌더링에 대해 무엇을 알고 있습니까?
프로그레시브 렌더링은 웹 페이지의 렌더링 콘텐츠 프로세스를 높이는 데 사용되는 방법을 나타냅니다. 이는 사용자의 모바일 데이터 사용량을 최적화하는 데 유용합니다. 프로그레시브 렌더링에는 지연 로딩, 비동기 HTML, 보이는 콘텐츠의 우선 순위 지정 등과 같은 개념이 포함됩니다.
20. <img> 태그의 'srcset' 속성 사용법 설명
'rcset'은 다른 브라우저나 장치를 기반으로 동일한 이미지의 다른 해상도를 렌더링하는 데 사용됩니다. 이것은 사용자 경험을 개선하고 보고 있는 장치와 관련된 사진의 최상의 해상도를 볼 수 있도록 하는 데 사용됩니다. srcset을 사용하면 브라우저가 좋은 해상도의 장치와 브라우저에서 고품질 이미지를 표시하고 다른 장치에서는 저해상도 이미지를 표시하도록 할 수 있습니다. 다음과 같이 사용할 수 있습니다.
<img srcset=”picture_low_quality.jpg 480w,
picture_high_quality.jpg 800w”
크기 = "(최대 너비 : 600px) 480px,
800픽셀”
src="picture_high_quality.jpg">
21. HTML과 관련하여 템플릿 언어란 무엇입니까?
템플릿 언어는 사용자가 HTML 문서에 데이터를 입력하는 데 도움이 되는 자리 표시자 언어입니다. 다양한 템플릿 언어가 백엔드 프레임워크와 함께 작동합니다. 예를 들어, Jinja는 Python의 Django Flask 프레임워크와 함께 작동하는 인기 있는 템플릿 언어 중 하나입니다. Slim은 Ruby 및 Rails에 사용되는 또 다른 템플릿 언어입니다.
22. CSS에서 변수 'float'에 대해 설명하세요.
Float은 상대적인 의미로 요소를 배치하는 데 사용됩니다. 특정 요소가 다양한 장치 크기에 따라 뷰포트에서 '부동'해야 하는 방법을 정의합니다. 이것은 웹 페이지의 응답성을 유지하는 데 사용되며 float를 사용하는 것이 좋습니다.
23. <span> 및 <div> 태그를 사용하는 이유는 무엇입니까?
<span> 태그는 주로 인라인 요소에 사용되는 반면 <div> 태그는 블록에 사용됩니다. 이러한 태그에는 고유한 의미가 없지만 HTML 문서에서 블록이나 인라인 코드를 지정하여 스타일을 다르게 지정하거나 형식을 지정하고 보다 효과적으로 제어할 수 있습니다. 예를 들어:
<div id="정보">
<p>프론트엔드 개발 및 풀스택 개발 과정</span></p>에 대해서는 <span class="name">upGrad</span>에 <span class=”courses”> 문의하십시오.
</div>
위의 코드에서 <span> 두 부분을 정의했습니다. 하나는 이름(upGrad)용이고 다른 하나는 코스용입니다. 그렇게 하면 두 가지 코드를 더 잘 제어할 수 있고 다른 방식으로 형식을 지정하여 눈에 띄게 만들 수 있습니다.
24. MongoDB는 MySQL과 어떻게 다릅니까?
MySQL은 SQL을 언어로 사용하여 모든 데이터베이스 관련 작업을 관리하는 관계형 DBMS입니다. RDBMS이기 때문에 테이블과 같은 구조를 사용하여 데이터를 저장하고 조작합니다. 반면에 MongoDB는 모든 데이터를 저장하기 위해 플랫 파일 JSOL과 같은 형식을 사용하는 NoSQL 데이터베이스입니다. MongoDB의 요소를 수정하려면 개발자는 MQL(MongoDB 쿼리 언어)을 사용해야 합니다.
25. JavaScript의 익명 함수에 대해 무엇을 알고 있습니까?
일반적인 시나리오에서는 먼저 함수 이름을 정의한 다음 함수 본문을 정의합니다. 반면 익명 함수에서는 함수 이름이 정의되지 않습니다. 변수와 할당 연산자만 사용하고 함수는 객체로 저장됩니다. 그런 다음 변수를 사용하여 함수를 호출할 수 있습니다. 예를 들어:
var 추가 = function(a,b){ console.log(a+b)}
추가(4,5);
위의 예에서 함수는 익명이고 올바른 출력 9를 인쇄합니다.
26. AJAX는 언제 사용됩니까?
AJAX는 Asynchronous JavaScript와 SML의 줄임말로 웹서버와 사용자 브라우저의 통신을 용이하게 해준다. AJAX는 프로그래밍 언어가 아닙니다. 페이지가 로드된 후에도 사용자의 브라우저에서 데이터를 로드하고 보내는 데 사용됩니다. 사용자가 페이지를 새로 고칠 필요 없이 사용자 페이지의 데이터를 업데이트하는 강력한 도구입니다. 본질적으로 AJAX를 사용하면 페이지를 실시간으로 새로고침하고 업데이트할 수 있습니다.
27. 귀하의 웹사이트나 애플리케이션이 사용자 친화적임을 어떻게 보장하시겠습니까?
웹 사이트 또는 웹 애플리케이션이 완전히 사용자 친화적인지 확인하려면 프론트 엔드 개발자가 UX(사용자 경험) 디자이너와 협력하여 목표로 하는 청중의 문제를 해결하는 웹 페이지를 개념화해야 합니다. 목표는 다양한 브라우저와 화면에서 최적의 디자인 흐름, 콘텐츠 및 페이지 구조로 사용자 중심의 경험을 만드는 것입니다.
결론적으로
위의 질문은 인터뷰에서 다룰 수 있는 질문의 범위에 대한 개요를 제공하기 위한 것입니다. 프론트 엔드는 디자인, HTML, CSS, JavaScript, AJAX 등과 같은 다양한 기술을 통합하는 작업이므로 모든 관련 기술에 대한 질문을 받게 됩니다.
자신의 기술에 자신이 없거나 프론트엔드 개발자로 성장하고자 하는 경우 바로 찾아오셨습니다. upGrad에서는 프론트엔드 및 백엔드 개발의 전체 프로세스를 안내하고 전체 스택 개발의 세계에서 두각을 나타내는 데 필요한 모든 도구와 기술을 제공하는 소프트웨어 엔지니어링 프로그램을 제공합니다. 지금 등록하고 여행을 시작하세요!
프론트엔드 개발은 무엇을 다루나요?
이름에서 알 수 있듯이 프론트엔드 개발은 모든 웹 애플리케이션의 프론트엔드 또는 렌더링 화면을 다룹니다. 이를 위해서는 HTML, CSS, JavaScript 및 그 프레임워크인 AJAX, 서버 관리에 대한 기술과 지식이 필요합니다.
누가 프론트엔드 개발 분야에서 일할 수 있습니까?
웹 개발에 관심이 있고 디자인 감각이 있는 사람이라면 누구나 웹 개발 경력을 시작하고 탁월하게 하는 데 필요한 기술을 습득할 수 있습니다.
프론트엔드 개발자는 나중에 풀스택 개발자가 될 수 있습니까?
분명히. 프론트엔드 개발자로서 더 많은 경험을 쌓으면서 백엔드 개발자와도 협력하여 작업하게 되므로 풀 스택 개념도 천천히 배우기 시작할 것입니다. 이 지식은 프론트 엔드 개발자에서 풀 스택 개발자로 전환하는 데 도움이 됩니다.