꼭 알아야 할 웹 개발자 면접 질문 및 답변 25가지

웹 개발자는 인터넷이 계속 성장함에 따라 수요가 계속되고 있습니다. 하지만 일자리를 얻으려면 먼저 고용주의 면접 세션을 확장해야 합니다.

대규모 팀은 프런트엔드나 백엔드 개발자를 특별히 고용하는 경향이 있지만, 소규모 팀과 스타트업은 종종 풀스택 개발자를 선택합니다. 따라서 가능한 한 많이 아는 것이 도움이 됩니다.

다음은 웹 개발자 면접에서 꼭 알아야 할 25가지 질문과 그 답변 목록으로, 면접 준비를 도와드립니다.

1. 웹 개발에서 HTML, JavaScript, CSS의 역할은 무엇입니까?

HTML은 HyperText Markup Language의 약자로, 웹에 게시할 문서를 개발하는 데 사용되는 표준 언어입니다. JavaScript와 CSS는 추가 기능입니다.

JavaScript는 원래 클라이언트 측 프로그래밍 언어로 설계되었으며, 브라우저에서 실행되어 웹페이지에서 더 많은 기능을 생성합니다. CSS는 Cascading Style Sheets의 약자로, 화면에 요소를 표시하는 데 사용됩니다.

2. 반응형 웹 디자인이란 무엇인가

반응형 웹 디자인은 사용자의 기기나 환경에 따라 웹사이트의 모양을 조정하여 사용자에게 최상의 경험을 제공하는 것을 목표로 하는 웹 개발 접근 방식입니다.

웹사이트가 모든 기기에서 멋지게 보이도록 하는 것이 목표이며, 이를 위해서는 기기의 화면 크기나 방향에 따라 상자 크기를 줄이거나 늘리거나 정렬하는 동적인 변경이 필요합니다.

3. 프레임워크를 사용하는 이점은 무엇입니까?

웹 애플리케이션을 개발할 때 프레임워크를 사용하는 데는 많은 이점이 있습니다. 주요 이점은 다음과 같습니다.

1. 모범 사례를 활용해 개발 프로세스를 더욱 쉽게 만듭니다.
2. 시작 프로젝트를 통한 빠른 개발로 시간을 절약할 수 있습니다.
3. 검증된 코드 사용
4. 보안이 더 나은 경우가 많습니다.
5. 특히 대규모 프로젝트에서 비용을 절감할 수 있습니다.

4. JavaScript 콜백이란 무엇인가요?

JavaScript 콜백은 다른 함수 이후에 실행되어야 하는 함수입니다. 콜백 함수의 이름과 인수는 첫 번째 함수에 인수로 전달될 수 있으며, 첫 번째 함수는 계산 결과인 인수를 콜백 함수 내부적으로 전달할 수도 있습니다.

콜백 함수는 다른 함수가 먼저 실행을 완료할 때까지 기다려야 하는 비동기 함수와 함께 사용하는 것이 가장 좋습니다.

5. JavaScript에서 로컬 범위와 글로벌 범위를 설명하세요

정의된 변수는 단어로 작성되며 이는 올바른 맥락에서만 의미가 있습니다. 로컬 및 글로벌 범위는 정의된 변수의 이러한 맥락을 말합니다. 글로벌 변수는 함수 외부에서 정의해야 하는 반면, 로컬 변수는 함수 내부에서 정의됩니다.

따라서 전역 변수는 전역 범위를 가지며, 이는 프로그램의 어느 곳에서나 접근할 수 있음을 의미합니다. 그러나 지역 변수는 지역 범위를 가지며, 이는 함수 내부에서만 접근할 수 있음을 의미합니다.

6. CSS에서 Z-Index를 설명하세요

z-index는 요소의 스택 순서를 정의하는 데 사용되는 요소 속성입니다. 스택 순서는 카드 스택처럼 요소가 다른 요소의 뒤나 앞에 있을 수 있는 능력을 말합니다.

스택 순서가 높은 요소는 스택 순서가 낮은 요소 앞에 나타납니다. 이 맥락에서 요소에 2 또는 100의 스택 순서를 부여하면 페이지의 다른 모든 요소 위에 표시됩니다. 마찬가지로 스택 순서가 지정되지 않은 페이지는 소스의 맨 아래 요소를 맨 위 요소보다 위에 스택합니다.

7. HTML의 Marquee는 무엇입니까?

Marque는 HTML의 컨테이너 태그로, 스크롤 텍스트를 표시하는 데 사용됩니다. 이를 통해 스크롤 방향과 속도를 제어할 수 있습니다. 그러나 Marquee는 HTML5에서 더 이상 사용되지 않으며 대신 CSS를 사용하는 것이 좋습니다.

마키를 사용한 스크롤 예시:

마키 스크롤 텍스트

8. 페이지 로드 시간을 줄이는 주요 방법 나열

개발자가 페이지 로드 시간을 개선하기 위해 취할 수 있는 단계는 여러 가지가 있습니다. 주요 단계는 다음과 같습니다.

• 이미지 최적화 및 크기 줄이기
• 불필요한 위젯을 제거하세요
• 검색 횟수를 최소한으로 줄이세요
• 괜찮은 호스트에 웹사이트를 호스팅하세요
• AMP(Accelerated Mobile Pages) 또는 정적 사이트를 사용하세요
• 지연 로드 이미지
• 코드 축소

9. Canvas와 SVG의 차이점은 무엇입니까?

SVG는 확장 가능 벡터 그래픽(Scalable Vector Graphics)을 의미하며 태그는 원, 상자, 타원 등과 같은 그래픽을 만드는 컨테이너 요소입니다. CSS 또는 JavaScript를 사용하여 SVG를 수정할 수 있으며 확장 가능하므로 고해상도 출력에 적합합니다.

그만큼 반면 컨테이너는 래스터 기반이며 확장할 수 없습니다. 또한 그래픽을 만드는 데 사용되지만 JavaScript로만 수정할 수 있습니다. 그러나 더 많은 수의 객체를 처리하는 데 더 효율적입니다.

10. 방법 null로 다르다 정의되지 않음?

Null은 값이 없음을 나타냅니다. 일반적으로 실제 값이 할당되지 않은 정의된 변수를 초기화하는 플레이스먼트 홀더로 사용됩니다. 반면 Undefined는 초기화되지 않은 정의된 변수를 나타냅니다.

자바스크립트에서:

var 변수A;

var 변수B = null;

alert(변수A); //정의되지 않음을 표시합니다

alert(변수B); // null을 표시합니다

11. ID는 Class와 어떻게 다릅니까?

ID와 클래스는 HTML 문서에서 요소를 식별하고 처리하는 두 가지 방법입니다. 그러나 두 가지의 주요 차이점은 ID가 고유해야 한다는 것입니다. 즉, 두 요소가 같은 ID를 공유할 수 없지만 두 개 이상의 요소가 같은 클래스를 공유할 수 있습니다.

ID는 특정 요소를 처리하는 데 사용되는 반면, 클래스는 하나 이상의 공통적인 특성을 공유하는 요소 그룹을 처리하는 데 사용됩니다.

12. 웹사이트의 보안 기능을 어떻게 개선할 수 있나요?

웹사이트의 보안을 강화하기 위해 취할 수 있는 몇 가지 단계는 다음과 같습니다.

1. 강력한 암호 정책 시행. 즉, 선택한 암호가 8자를 넘고 숫자, 특수 문자, 대문자와 소문자를 포함하는지 확인하는 것을 의미합니다.
2. 캡차나 봇 방지 수단을 사용합니다.
3. 필요한 경우 OTP(일회용 비밀번호) 및 하드웨어 동글과 같은 2단계 또는 다중 단계 인증 방법을 채택합니다.
4. DDoS 보호 및 자동 백업 기능이 있는 호스트를 사용합니다.

13. localStorage는 sessionStorage와 어떻게 다릅니까?

localStorage와 sessionStorage 시스템은 둘 다 개발자가 웹 브라우저에 데이터를 저장할 수 있게 해줍니다. 하지만 localStorage는 지속적이지만 sessionStorage는 그렇지 않습니다. 다시 말해, localStorage에 저장된 데이터는 여러 세션에 걸쳐 브라우저에서 사용할 수 있는 반면, sessionStorage에 저장된 데이터는 브라우저 탭이 닫히면 삭제됩니다.

14. HTTP 2.0에 비해 HTTP1.1이 개선된 점 나열

HTTP/2 프로토콜은 2015년에 공개되었으며 다음과 같은 상당한 개선 사항을 제공합니다.

1. 텍스트 대신 바이너리를 사용하면 보안이 강화됩니다.
2. 성능 향상.
3. 지연 시간 단축.
4. 더 나은 오류 처리.
5. 간접비 절감.

15. Git Pull과 Git Merge의 차이점은 무엇인가요?

git pull 명령을 사용하면 원격 저장소에서 콘텐츠를 다운로드한 다음, 다운로드한 콘텐츠로 로컬 저장소를 업데이트할 수 있습니다.

반면 git merge 명령어는 같은 프로젝트의 두 개의 별도로 개발된 브랜치를 결합할 수 있게 해줍니다. merge 명령어는 병합하려는 브랜치에서 수행해야 하며, 이는 보통 메인 브랜치입니다.

16. GET은 POST, PUT과 어떻게 다릅니까?

HTML GET 방식은 브라우저가 서버에 정보를 요청하는 데 사용되고, POST 및 PUT 방식은 브라우저에서 서버로 정보를 전송하는 데 사용됩니다.

POST 요청은 단순히 서버 리소스에 데이터를 추가할 수 있는 반면, PUT 요청은 요청의 페이로드를 사용하여 리소스를 완전히 교체하는 데 사용됩니다.

17. 가장 인기 있는 데이터 교환 형식 나열

현재까지 가장 인기 있는 데이터 교환 형식은 다음과 같습니다.

1. XML
2. 얌
3. CSV
4. JSON
5. HTTP
6. SQL

18. 팝업 상자의 3가지 유형을 나열하세요

JavaScript의 팝업 상자는 사용자에게 메시지를 표시하고, 입력을 요청하고, 때로는 두 가지를 모두 수행하는 데 사용됩니다. 다음은 JavaScript 팝업의 3가지 유형입니다.

1. 경고 상자 – 이렇게 하면 메시지와 '확인' 버튼이 표시됩니다.
2. 확인 상자 – 이 대화 상자에는 코드에 영향을 줄 수 있는 '확인'과 '취소' 버튼이 모두 포함되어 있습니다.
3. 프롬프트 상자 – 이 상자에는 사용자로부터 정보를 수집하기 위한 텍스트 입력 상자가 포함되어 있습니다.

19. CSS 코드를 포함하는 다양한 방법의 이름

HTML 문서에 CSS를 포함하는 방법은 3가지가 있습니다. 다음과 같습니다.

1. 외부 CSS – 다음을 사용하여 .css 문서를 포함합니다. 문서 내부 태그.
2. 내장된 CSS – CSS 코드를 내부에 포함합니다. 태그는 문서의 어느 곳에나 사용할 수 있습니다.
3. 인라인 CSS – HTML 태그 내에서 style="CSS-속성: 값" 쌍을 사용합니다(예: 피에스퀘어!

20. 방법 창.onload document.onload와 다른 점은 무엇입니까?

Window.onload는 브라우저가 페이지의 DOM 트리와 이미지, CSS 코드, 스크립트를 포함한 기타 기본 요소를 로드한 후 JavaScript 코드를 실행하는 데 사용됩니다.

document.onload는 DOM이 준비된 직후에 실행되지만, 이는 이미지와 외부 라이브러리가 로드되기 전에 실행될 수도 있음을 의미합니다.

21. CSS를 사용하여 요소를 숨기려면 어떻게 해야 하나요?

3가지 CSS 방법을 사용하여 HTML 요소를 숨길 수 있습니다. 해당 방법은 다음과 같습니다.

1. 표시: 없음; – 요소가 렌더링되지도 표시되지도 않습니다.
2. 가시성: 숨김; – 요소는 렌더링되지만 표시되지 않습니다.
3. 위치: 절대적; – 요소가 렌더링되고 표시되지만 표시 영역 외부에 배치됩니다.

22. Ajax의 가장 좋은 사용법은 무엇입니까?

Ajax는 JavaScript를 사용하여 백그라운드에서 서버에서 데이터를 로드하는 방법입니다. 데이터 검증, 채팅 앱, 댓글, 데이터 필터링, 시각적 편집, 투표 등 다양한 용도로 사용됩니다.

23. CSS3의 새로운 기능 몇 가지를 나열하세요

CSS3에는 CSS2에 비해 다음과 같은 많은 현대적이고 유용한 기능이 포함되어 있습니다.

1. 상자와 이미지의 모서리를 둥글게 처리합니다.
2. 객체의 애니메이션.
3. 선언을 위한 변수와 함수.
4. 반응형 디자인을 위한 Grid & Flexbox.
5. 배경색에 대한 그라데이션.
6. rgba를 사용하여 불투명도 제어.
7. 상자와 텍스트에 그림자 효과를 줍니다.
8. 요소에 마우스를 올리고 초점을 맞출 때의 전환.

24. HTML5에 도입된 새로운 입력 유형은 무엇입니까?

입력 유형은 HTML 문서의 입력 요소에 지정하는 값입니다.

예는 다음과 같습니다.

or

새로운 HTML5 입력 유형은 다음과 같습니다.

1. 날짜
2. 색상
3. 이메일
4. 검색
5. 전화
6. 달
7. 번호 범위
8. 달
9. URL
10. 날짜시간-지역

25. HTML5 미디어 요소를 설명하세요

HTML5에는 미디어 유형과 소스를 처리하기 위한 더 많은 요소 태그가 포함되어 있습니다. 이들은 다음과 같습니다.

• – MP4, WebM, Ogg 비디오용.
• – 다양한 형식으로 여러 소스를 정의합니다.
• – MP3, Ogg 및 WAV 오디오용.
• – 사진부터 비디오, 웹 페이지까지 외부 리소스를 포함할 수 있는 컨테이너입니다.
• – 비디오의 자막 트랙을 지정합니다.

결론

꼭 알아야 할 웹 개발자 면접 질문 상위 25개 목록을 끝까지 읽으면, 풀스택 개발자가 되려면 다양한 기술의 조합이 필요하다는 것을 알 수 있습니다.

이 가이드는 직무의 다양한 측면을 다루는 가이드이지만, 결코 포괄적인 것은 아닙니다. 따라서 명확하지 않은 영역을 파악하고 배우는 것은 여러분에게 달려 있습니다.