웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > webdevetc

웹퍼블리싱 인터뷰 예상질문

Last Modified : 2018-02-12 / Created : 2016-05-31
17,090
View Count


웹퍼블리싱(웹퍼블리셔)으로 이직 또는 취업을 준비하는 사람이라면 실무 면접과 면접 전 테스트 등이 있을 수 있다. 과연 퍼블리싱 분야에 지원하기 위해서는 어떤 준비를 해야할까? 또한 취업까지는 어떤 과정이 있는지 알아보고자 한다.

기본적으로 웹퍼블리셔 또는 프론트엔드 개발자에게 요구하는 역량은 html과 css 그리고 자바스크립트가 있다 하겠다. 일반적으로 회사에서는 실무 면접을 통해 인터뷰에 응시자의 능력을 판단하지만 면접 전 간단한 테스트도 종종 치뤄지고 있다. 테스트라면 어떤 테스트가 있을까?




# 회사에서 요구하는 웹퍼블리싱 사전 테스트 테스트의 경우 회사마다 다르다. 프론트엔드 중 자바스크립트를 많이 사용하는 회사는 대게 질문지 형태의 서술형 문제가 더 많이 사용된다. 아무래도 얼마나 심도있게 자바스크립트를 이해하고 있는지가 중요하기 때문이다. 이에 반하여 웹표준 부서나 에이전시의 경우에는 웹사이트 퍼블리싱을 요구하기도 한다. 요구 수준에 따라 정해진 기간안에 한페이지 분량의 퍼블리싱이 일반적이라 하겠다. 웹페이지 퍼블리싱시에 정해진 라이브러리에 제한을 두거나 순수 자바스크립트만을 사용해야함을 요구할 수 있으니 이를 염두해야 한다. 또한 순수 자바스크립트의 경우 현재 재직중인 경우 테스트를 수행할 시간에 제약이 많으므로 이에대한 시간 확보를 신경써야할 것이다.

이런 테스트 과정은 경험이 많다하더라도 쉽지 않다. 이직자의 경우 기존 회사에서 사용하지 않는 부분에 대하여 물어볼 경우 당황할 수 있고 이 때문에 아는 내용에 대하여도 좋지 않은 결과가 나올 수 있기 때문이다. 모든 부분을 공부하고 준비한다면 좋겠지만 주어진 시간에 어떤 질문이 있을지 예상할 수 있다면 더 좋은 결과를 가져올 수 있을 것이다.

아래는 인터뷰에서 예상할 수 있는 몇가지 질문을 리스트로 만들어 보았다. 아래 질문 외에 다른 질문이 나올 수도 있겠으나 퍼블리싱 과정에서 중요한 부분들 ~ 인터뷰어가 물어볼 수 있는 예상 질문들 위주로 나열하였으니 이직 및 취업 준비자에게 도움이 될 수 있을 것이다. 그럼 자세한 내용을 아래에서 확인하여 보자.





! 웹퍼블리싱 예상 질문리스트

아래 질문들은 인터뷰에서 물어볼 만한 예상질문들을 나열한 리스트이다. 정답을 얘기하지 못하더라도 자신감있는 모습과 적극적인 태도 역시 매우 중요할 수 있다.

html5의 가장 큰 특징은 무엇인가?

웹접근성(Web Accessibility)에 대하여 설명하시오

지역변수와 전역변수 선언방법은?

자바스크립트 라이브러리 중 아는 것을 말하고 이를 짧게 설명하시오.

자바스크립트에 존재하는 데이터타입을 모두 말하시오.

워드프레스를 사용해 본적이 있는지? 있다면 이를 짧게 설명하시오.

플러그인이 무엇인지 설명하고 만들어본(작성한) 경험이 있는가?

자바스크립트 라이브러리(library) 사용시 가장 큰 장점은?

콜백함수는 무엇인지 설명하시오.

시간반복함수는 무엇이고 이를 정지시키는 함수는 무엇인지 말하시오.

CSS 미디어쿼리는 어떤 역할을 수행하는지 설명하시오.

CSS 의사선택자는 무엇이 있는지 설명하시오.

reset.css, base.css 또는 common.css에 대하여 설명하시오.

CSS 핵에 대하여 설명하고 사용한 경험에 대하여 기술하시오.

CSS 스프라이트(CSS Sprites)란 무엇이며 어떻게 사용하는지 설명하시오.

구버전의 익스플로러(IE)를 지원하기 위한 방법을 말하시오.

객체지향언어의 특징을 설명하시오.

자바스크립트만의 객체지향언어를 설명하시오.

localStorage, sessionStorage에 대하여 설명하시오.

ajax에 대하여 설명하시오.외부 script를 불러올 경우 </body>의 바로 위에 위치 시키는 이유는 무엇일까요?

RESTful에 많이 사용되는 메소드 4가지를 적으세요.

다음 중 성격이 다른 하나는 무엇인가요? hover, after, active, focus

시멘틱 태그 요소를 4개 이상 적으세요.

모듈과 컴포넌트의 차이점은 무엇일까요?

OOP(Origin Oriented Policy)에 대하여 기술하시오.

LESS 또는 SASS를 매우 많이 사용합니다. 그 이유는 무엇일까요?

이미지를 페이지에 구현하기 위해서 icon sprites를 사용해보았나요? 그렇다면 그 장점은 무엇이 있을까요?

자바스크립트를 사용한 어플리케이션 개발 중 성능 개선 방법은 무엇이있을까요?

가비지컬렉션을 위해 사용하지 않는 참조 변수는 어떻게 하면 좋을까요?

setTimeout 사용하여 타이머 함수를 하나 선언하려고 합니다. 만약 등록된 타이머 함수를 제거하려면 어떻게 할
까요?

타임스탬프로 저장된 날짜를 설명하세요.

제이쿼리 플러그인을 만들 경우 주의할 점이 있다면 하나만 적으세요.

HTML5에서 쿠키 이외의 내부 저장소를 사용하려면 어떤 API 또는 방법을 사용할 수 있을까요?

CSS의 top, bottom, left, right 속성을 사용하려면 position의 무슨 값이 필요할까요?

모달창과 팝업창의 차이는 무엇일까요?

CSS3의 transform을 사용하여 엘리먼트를 이동하려고 합니다. 이때 사용가능한 단위는 무엇일까요?

자바스크립트의 정규표현식을 사용할 경우 반드시 시작과 끝에 일치하는 패턴을 찾기 위해서 사용하는 특수문자는?



! 간단한 O / X 문제

아래는 쉽게 풀어볼 수 있는 O / X 문제입니다.

font-family 사용시 사용할 폰트의 우선순위를 정할 수 있다. ( O | X )

스크롤과 상관없이 엘리먼트 위치를 고정하기 위해 position: absolute;를 사용한다. ( O | X )

자바스크립트의 객체와 JSON의 표기법은 동일하다. ( O | X )

다음은 올바른 CSS 표기방법이다. margin: 0 10px 20px 30px; ( O | X )

다음은 올바른 CSS 표기방법이다. clear: both; ( O | X )

다음은 올바른 CSS 표기방법이다. line-height: 1.614; ( O | X )

CSS에서 줄바꿈에 사용하는 속성은 white-space이다. ( O | X )

CSS에서 브라우저 기본 속성을 제거하기 위한 방법으로 apperance를 사용할 수 있다. ( O | X )

table 태그를 작성할 경우 여러개의 열을 하나로 병합하기 위해서 rowspan을 사용한다. ( O | X )

textarea 태그의 width, height 값을 auto로 설정할 수 있다. ( O | X )

letter-spacing으로는 자간을 조정할 수 없다. ( O | X )

background-size 속성값으로 100%를 사용하면 엘리먼트의 전체 영역을 채울 수 있다. ( O | X )

Timer 함수 구현시 클로저(Closure)가 발생한다. ( O | X )

동일한 태그를 여러개 만들 경우 createElement보다 innerHTML을 사용하는 방법이 좋다. ( O | X )

아래 두 구문은 동일하게 작동한다. ( O | X )
1) var blue; var hole;
2) var blue, hole;

여기까지 다양한 예상 질문에 대하여 알아보았습니다.
아래의 글도 찾고 계시지 않나요?

    Previous

    파이어폭스 다운로드 및 설치하기

    Previous

    네이버맵 api v3 알아보기