기술면접 준비하기-1

heumheum2·2020년 4월 13일
3

기술면접

목록 보기
1/5
post-thumbnail

기술 면접을 준비하다 찾아본 자료입니다.
오역이나 내용이 다르다 싶으면 댓글로 알려주세요. 😊

참고 > https://www.zuaneducation.com/blog/front-end-developer-interview-questions-and-answers/


Front-End 개발자가 되기 위해 필요한 기술과 추가 기술은 무엇인가요?

  • HTML
  • CSS
  • JavaScript
  • JQuery

위에 언급된 기술을 제외하고, 아래에 언급 된 경험들을 가져야 합니다.

  • CMS (Content Management System) 경험
    • 정의 : 웹 사이트의 내용을 관리하는 시스템
    • 종류 : 내용 관리 어플리케이션 (CMA), 내용 배포 애플리케이션 (CDA)
    • 역할
      • CMA : HTML에 들어갈 내용, 변경, 제거 등의 관리 프로그램
      • CDA : 웹 사이트의 모든 수치를 보고 편집할 수 있는 정보편집 프로그램
  • cross-browser 테스트 경험
    • 정의 : 사용하는 웹 브라우저의 종류에 상관없이 웹사이트를 불편함 없이 이용 할 수 있어야함.
  • OOPS, PHP 경험
    • OOPS : 리눅스 커널이 오류 로그를 생성하고 비정상이 된 상태.
    • PHP : 웹 서버쪽에서 실행 되는 프로그래밍 언어.

참고 >
https://www.theteams.kr/teams/1044/post/64872
https://mulder21c.github.io/2019/01/30/what-is-cross-browsing/
https://server-talk.tistory.com/25


CoffeeScript가 무엇인가요?

  • CoffeeScript는 JavaScript로 컴파일 되는 작은 프로그래밍 언어입니다. JavaScript의 복잡한 문법과 헷갈리기 쉬운 부분들을 보완하고, 간단한 문법으로 코드를 작성할 수 있는 언어입니다.
  • 특징
    • TypeScript와 같이 JavaScript로 컴파일 됩니다.
    • JavaScript의 라이브러리를 가져다 쓸 수 있습니다.
    • 최적화 코드로 치환되며 실수가 적어져서 자바스크립트 코드보다 빠를 수 있습니다.
    • 세미콜론( ; ) 을 사용하지 않습니다.
    • { } 대신 들여쓰기로 그 기능을 대신합니다.
    • 스페이스바 공백을 block 구분하는 데 씁니다.

참고 > https://bblog.tistory.com/299


clear가 무엇인가요?

float는 객체를 띄어 정렬하는 속성인데, 적용하면 이후에 오는 글자나 다른 요소들은 그 사진 주위로 둘러싼 형태가 됩니다. 둘러싼 형태를 해제하기 위해 clear를 사용합니다.


callback 함수란 무엇인가요?

callback 함수는 이전 코드가 완전히 실행 될 때까지 호출되지 않기 때문에 이러한 현상이 발생하지 않도록 사용합니다. 즉, 비동기 (Asynchronous) 방식의 함수로 사용됩니다.


class 와 prototype의 상속 차이는 무엇인가요?

JavaScript의 상속은 대부분의 다른 프로그래밍 언어와 다릅니다.
JavaScript의 객체 시스템은 class 기반이 아닌 prototype 기반으로 만들어졌습니다.
JavaScript의 객체는 키 값 쌍의 집합일 뿐입니다. 상속과 관련하여 JavaScript에는 객체라는 하나의 구성만 있습니다.
prototype에는 prototype link와 prototype object로 구성되어있습니다.

  • prototype link: 자신을 만들어낸 객체의 원형 ( __proto__ )
  • protytype object : 자신을 통해 만들어질 객체의 원형 ( prototype )

참고 > https://mygumi.tistory.com/312


visibility:hidden 과 display:none 속성의 차이는 무엇인가요?

  • visibility:hidden 은 보이지는 않지만 공간을 차지하고 있습니다.
  • display:none 은 보이지 않고, 공간을 차지하지 않습니다.

Host Object와 Native Object의 차이점은 무엇인가요?

  • Host Object (사용자 정의 객체)
    • 사용자가 생성한 객체입니다.
    • constructor 혹은 객체 리터럴을 통해 사용자가 객체를 정의하고 확장시켰기에 Built-in ObjectNative Object가 구성된 이후에 구성됩니다.
  • Native Object (브라우저 내장 객체)
    • DOM(문서객체모델), BOM(브라우저객체모델)이 여기에 속합니다.
    • 자바스크립트가 구동되는 시점에서 바로 사용이 가능한 객체들 입니다.
    • 브라우저마다 Native Object를 사용함에 있어서 구성을 다르게 하기에 분류 되었습니다.
  • Built-in Object (자바스크립트 내장 객체)
    • Object, String, Number 등 많은 내장객체들이 있습니다.
    • 자바스크립트 엔진이 구동되는 시점에서 바로 제공됩니다.

참고 > http://insanehong.kr/post/javascript-object/


XHTML과 HTML의 차이점은 무엇인가요?

  • XHTML이 XML 문법을 따르므로 HTML과 문법 규칙이 약간 다릅니다.
    • HTMLXHTML
      종료태그 생략가능종료태그 생략불가능
      요소명과 속성명에 대소문자 사용가능요소명과 속성명에 대문자 사용불가능
      빈요소 사용시 </> 사용하지 않음빈요소 사용시 </>사용
      속성에 속성값 생략 가능속성에 속성값 생략 불가능
      인호(" ")부호 생략 가능인호(" ")부호 생략 불가능
  • XHTML을 사용하면 할 수 있으나, HTML로는 불가능한 일이 있습니다.
    • &apos 캐릭터 엔티티(character entity)를 사용할 수 있습니다.
    • processing-instruction 사용. 예를 들어 XML 문서에 스타일시트를 연결시킬 수 있습니다.
      <?xml-stylesheet type="text/css" href="style.css" media="screen"?>
  • HTML을 사용하면 할 수 있으나, XHTML로는 불가능한 일이 있습니다.
    • 기존 HTML에서 사용하던 <!--...--> 코멘트로 스타일이나 스크립트의 일부를
      주석 처리할 수 없습니다.
    • 문서를 읽고 있는 도중에는 페이지의 일부를 동적으로 생성할 수 없습니다.
    • 자바스크립트에서 .innerHTML 속성을 사용할 수 없습니다.
  • CSS를 이해하는 방식에 차이가 있습니다.
  • 자바스크립트를 다루는 방식에 차이가 있습니다.

참고 >
https://jjeongeun.tistory.com/2
http://blog.wystan.net/2007/05/24/xhtml-vs-html


GET과 POST의 차이점은 무엇인가요?

  • GET
    • 서버로부터 정보를 조회하기 위해 설계된 메소드입니다.
    • 요청을 전송할 때, 필요한 데이터를 쿼리스트링을 통해 URL을 통해 전송합니다.
    • 불필요한 요청을 제한하기 위해 요청이 캐시될 수 있습니다.
    • Idempotent (멱등) 합니다.
  • POST
    • 리소스를 생성/변경하기 위해 설계된 메소드입니다.
    • 요청을 전송할 때, 데이터를 HTTP메세지의 Body에 담아서 전송합니다.
    • 대용량 데이터를 전송할 수 있습니다.
    • Non-idempotent (비멱등) 합니다.

참고 > https://hongsii.github.io/2017/08/02/what-is-the-difference-get-and-post/


Null과 Undefined, Undeclared의 차이점은 무엇인가요?

Null은 값이 없는 상태입니다. Undefinded도 값이 없습니다. 그렇다면 차이점은 무엇일까요?

const test1 = null;
console.log(typeof test1);
결과 값 
object
---------------------------
const test2 = undefinded;
console.log(typeof test2);
결과 값
undefinded

타입이 다른 것을 볼 수 있습니다.
Undeclared는 선언하지 않은 변수, 정확히는 유효범위를 지정하지 않은 변수라고 볼 수 있습니다.


HTML DOCTYPE의 중요성에 대해 설명해주세요.

DOCTYPE은 페이지에 어떤 버전의 markdown 언어가 작성되었는지에 대한 웹 브라우저의 지시사항입니다.
브라우저가 내용을 올바르게 해석할 수 있도록 표시 언어 규칙을 제공합니다.


Cookies, Session Storage, Local Storage 간의 차이점은 무엇인가요?

공통점은 key-value로 데이터가 브라우저에 저장됩니다.

  • Session Storage
    • window.sessionStorage에 위치합니다.
    • 윈도우나 브라우저를 닫으면 데이터가 제거됩니다.
  • Local Storage
    • window.localStorage에 위치합니다.
    • Local Stoage는 데이터가 클라이언트 브라우저에 저장됩니다.
  • Cookies
    • 텍스트기반 파일형태로 저장됩니다.
    • 유효한 시간이 있습니다.

참고 > https://www.zerocho.com/category/HTML&DOM/post/5918515b1ed39f00182d3048


Lazy Loading은 무엇인가요?

사용자가 웹 사이트를 열면 해당 페이지의 콘텐츠들이 렌더링 됩니다.
사용자가 모든 컨텐츠를 실제로 본다는 보장이 없기에, 웹사이트에서는 메모리 및 대역폭 낭비가 발생합니다.
Lazy Loading을 사용하게 되면 모든 콘텐츠를 대량으로 로드하는 대신, 사용자가 페이지의 일부에 접근했을 때 콘텐츠를 로드하여 메모리 및 대역폭 낭비를 줄일 수 있습니다.

참고 > https://scarlett-dev.gitbook.io/all/it/lazy-loading


Event Delegation은 무엇인가요?

Event Delegation (이벤트 위임)은 각 노드에 대해 이벤트를 추가하지 않고, 상위 노드에서 하위 노드의 이벤트를 제어하는 프로세스입니다.
Event Delegation을 적용할 때 주의 해야할 점은 필요없는 하위 요소가 있을 경우, 불필요한 이벤트가 발생할 수 있기 때문에, 이 부분에 대해서는 따로 이벤트 처리를 해줘야합니다.


Ajax가 무엇인가요?

Ajax(비동기 JavaScript 및 XML)를 사용하면 페이지를 새로 고치지 않고 서버에서 비동기식으로 데이터를 전송할 수 있습니다. 즉, 전체 페이지를 다시 로드하지 않고 웹 페이지의 일부를 업데이틀 할 수 있습니다. 예를 들어, 웹 페이지를 새로 고치지 않았더라도 새 Gmail 메시지가 도착하고 새 메시지가 웹사이트에 표시됩니다.


Block, Inline, Inline-block, Box-sizing의 차이점은 무엇인가요?

  • Inline
    • 대표적으로 <span> 태그와 같습니다.
    • width/height, margin/padding-top/bottom, line-height 를 원하는 대로 적용할 수 없습니다.
  • Block
    • 무조건 한 row를 점유합니다.
    • <div><p> 와 같은 블록 요소로 표시됩니다.
  • Inline-block
    • Block들을 Inline으로 나열하고 싶을 때 사용합니다.
    • Inline이 적용 못하는 것들을 적용할 수 있습니다.
  • Box-sizing
    • 요소의 너비와 높이를 계산하는 방법을 지정합니다.
    • content-box, border-box로 박스 크기를 고려합니다.

Event Bubbling이 무엇인가요?

특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어가는 특성을 의미합니다. 즉, 하위에서 상위로 Event Propagation이 된다고 보면 됩니다.


Closure가 무엇인가요?

내부함수가 외부함수의 context에 접근 할 수 있고, 외부함수는 외부함수의 context를 사용하는 내부함수가 소멸될 때까지 소멸되지 않는 특성을 의미합니다.
아래의 예제는 자주 언급되는 예제입니다.

var arr = [];
for (var i = 0; i < 5; i++){
    arr[i] = function() {
    	return i;
    }
}
for (var index in arr) {
    console.log(arr[index]());
}

함수가 외부함수의 지역변수인 i를 접근하는 것으로 0,1,2,3,4결과를 기대하겠지만, 실행해보면 5,5,5,5,5가 실행됩니다. 그 이유는 arr[index]()에는 return i;가 저장되어있지만 이미 i는 for문을 끝냈기 때문에 5라는 값을 가지고 있어 5가 반환되는 것입니다.
따라서 아래와 같이 변경해야 합니다.

var arr = [];
for (var i = 0; i < 5; i++) {
    arr[i] = function(id){
        return function(){
             return id;
        }
    }(i);
}
for(var index in arr){
    console.log(arr[index]());
}

이렇게 하면 원하는 0,1,2,3,4가 나옵니다.

const arr = [];
for(let i = 0; i < 5; i++){
    arr[i] = function(){
        return i;
    }
}
for(let index in arr){
    console.log(arr[index]());
}

혹은 es6 변수 선언 방식으로, constlet을 사용해서 문제를 해결 할 수도 있습니다.

참고 > https://opentutorials.org/course/743/6544


var, const, let의 차이점은 무엇인가요?

var는 Function Scope, let, const는 Block Scope 입니다.
Function Scope는 함수 단위, Block Scope는 { } (중괄호) 단위 입니다.

var를 사용하면 변수 선언의 경우 할당되는 값이 유동적으로 변경될 수 있습니다.

var name = 'HeumHeum2';
console.log(name);

var name = 'JoJo';
console.log(name);

output: HeumHeum2
output: JoJo

위의 예시처럼 name이라는 변수를 한번 더 선언했음에도 불구하고, 에러없이 출력되는 모습을 볼 수 있습니다.

es6 업데이트 이후로 추가된 let, const를 살펴보겠습니다.

let name = 'HeumHeum2';
console.log(name);

let name = 'JoJo';
console.log(name);
output : Identifier 'name' has already been declared

위의 예시처럼 name이 이미 선언되었다는 에러 메시지를 볼 수 있습니다.
const도 마찬가지로 변수 재선언이 안된다는 특징을 가지고 있습니다.

그렇다면 letconst는 어떤 차이가 있을까요?
바로 immutability 여부입니다.
let은 변수에 재할당이 가능하지만, const는 변수 재선언, 재할당 모두 불가능합니다.
즉, 상수로 선언한다고 생각하면 될 것 같습니다.

let

let test = 'letTest'; // output : letTest
test = 'letTest2'; // output : letTest2

const

const test = 'constTest'; // output : constTest
test = 'constTest2'; // TypeError: Assignment to constant variable.

참고 >
https://velog.io/@marcus/2019-02-10-1702-작성됨
https://medium.com/@khwsc1/번역-자바스크립트-스코프와-클로저-javascript-scope-and-closures-8d402c976d19


profile
커피가 본체인 개발자 ☕️

0개의 댓글