기술면접 준비하기-1

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

참고 > 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 Object와 Native Object가 구성된 이후에 구성됩니다.
• Native Object (브라우저 내장 객체)
  • DOM(문서객체모델), BOM(브라우저객체모델)이 여기에 속합니다.
  • 자바스크립트가 구동되는 시점에서 바로 사용이 가능한 객체들 입니다.
  • 브라우저마다 Native Object를 사용함에 있어서 구성을 다르게 하기에 분류 되었습니다.
• Built-in Object (자바스크립트 내장 객체)
  • Object, String, Number 등 많은 내장객체들이 있습니다.
  • 자바스크립트 엔진이 구동되는 시점에서 바로 제공됩니다.

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

---

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

• XHTML이 XML 문법을 따르므로 HTML과 문법 규칙이 약간 다릅니다.

  • HTML	XHTML
    종료태그 생략가능	종료태그 생략불가능
    요소명과 속성명에 대소문자 사용가능	요소명과 속성명에 대문자 사용불가능
    빈요소 사용시 </> 사용하지 않음	빈요소 사용시 </>사용
    속성에 속성값 생략 가능	속성에 속성값 생략 불가능
    인호(" ")부호 생략 가능	인호(" ")부호 생략 불가능

• 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 변수 선언 방식으로, const 와 let을 사용해서 문제를 해결 할 수도 있습니다.

참고 > 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도 마찬가지로 변수 재선언이 안된다는 특징을 가지고 있습니다.

그렇다면 let과 const는 어떤 차이가 있을까요?
바로 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

---