FE interview

★★★★★

1. 브라우저 렌더링 원리

1-1.홈페이지가 사용자에게 보이는 순서에 대해 설명해 주세요

1. 주소창에 입력된 주소를 통해 서버를 찾아간다.
2. 이후 DNS가 연결해줄 곳을 찾는다.(실제 서버)
3. 서버에서 HTML 파일을 클라이언트로 보낸다.
4. HTML 문서는 파싱되어 DOM을 생성한다.(객체 형식)
5. 중간에 css를 로드한다. link 혹시 style 태그를 만나면 DOM 생성을 중지한다.
6. CSS를 파싱하고 CSSOM을 생성한다.
7. 이렇게 만들어진 DOM과CSSOM은 렌더링(브라우저에 시각적으로 출력하는 것)을 위해 렌더 트리로 결합된다.
8. 만약 script 태그를 만나면, css와 동일하게 JS코드를 실행하기 위해 파싱을 중단한다.
9. 이후 JS엔진을 실행하고 JS코드를 파싱한다.

 

2. 호이스팅에 대해서 설명해 보세요

변수호이스팅, 함수호이스팅

호이스팅이 발생하는 과정은 두단계가 있습니다.

1. 생성단계

자바스크립트가 실행이 되면, 자바스크립트를 실행하는데 필요한 정보인 전역 실행 컨텍스트가 생성됩니다.

실행 컨텍스트는 변수 객체, 스코프 체인, this에 관한 내용을 담고있는 객체입니다.

생성된 전역 실행 컨텍스트를 콜스택에 넣습니다.

콜스택에서 선언할 식별자 변수를 환경 레코드에 미리 선언해 둡니다. var은 undefined로 값을 초기화하고 let/const는 따로 초기화를 진행하지 않습니다

2. 실행단계

선언문 라인을 제외한 나머지 코드를 순차적으로 실행합니다.

변수를 var로 선언한 경우, 선언문 이전의 값은 undefined로 사용되고, 선언문에서 값이 재할당이 되면서, 선언문 이후의 값은 재할당 받은 값으로 사용됩니다.

변수를 let 또는 const로 선언한 경우, 메모리를 확보한 뒤 식별자를 기록만 해두고 값을 초기화하지 않는다. 선언문 이전에 식별자를 참조하려고 하면 Reference Error가 발생한다.(이를 일시적 사각지대라고 한다).

변수가 함수인 경우 함수 표현식을 사용하면, var로 함수를 선언문을 담은 경우 undefined가 아니라 Type error가 뜨고, let과 const는 다른 것과 같이 Reference error가 발생한다

함수를 function키워드로 선언을 하는 경우에는 생성 단계에서 완성된 함수 전체를 한번에 환경 레코드에 기록하기 때문에, 함수 선언문 위에서 함수를 사용해도 에러가 나오지 않는다.

3. 클로저는 무엇인가요?

이미 생명 주기가 끝난 외부 함수의 변수를 참조하는 함수를 클로저입니다

 

자바스크립트가 실행이 되면, 자바스크립트를 실행하는데 필요한 정보인 전역 실행 컨텍스트가 생성됩니다.

실행 컨텍스트는 변수 객체, 스코프 체인, this에 관한 내용을 담고있는 객체입니다.

생성된 전역 실행 컨텍스트를 콜스택에 넣습니다. 그리고, 외부 함수와 내부 함수가 생성되면 변수 객체, 스코프 체인, this가 각각 생성되며, 이 둘 모두 콜스택에 넣습니다.

외부함수에서 내부함수를 return하게 되면

외부함수가 종료하면 함수 실행 컨텍스트(EC)는 소멸되지만, 외부 함수 실행 컨텍스트의 활성 객체(AO)는 유효하여, 소멸하지 않고 남아있게됩니다.

상태 유지, 전역 변수의 사용 억제, 정보의 은닉에 사용할 수 있습니다

 

4. CSS의 margin과 padding에 대해 설명해주세요

margin : 정의된 테두리 외부에 있는 요소 주위에 공간을 만드는 데 사용됩니다

padding: 정의된 테두리 안에서 요소의 내용 주위에 공간을 만드는 데 사용됩니다

margin 같은 경우에는, 같이 만나는 요소가 padding이나 border가 0 경우에는 margin이 병합 될 수 있습니다.

box-sizing : border-box width에 padding을 포함해서 계산한다

box-sizing : content-box width에 padding을 제외해서 계산한다

 

4.1 position을 어떻게 사용하는지 알려주세요

CSS position 속성은 문서 상에 요소를 배치하는 방법을 지정한다. static, relative, absolute, fixed, sticky 속성을 값으로 갖는다.
static은 position 속성의 기본 값이며, 요소를 문서 흐름에 맞게 배치한다.
relative는 요소가 차지하는 공간은 static과 같으나, top/right/left/bottom 값을 적용시킬 수 있다.
absolute는 일반적인 문서 흐름에서 제거되고 static이 아닌 부모 블럭의 박스 안에 속하여 위치가 지정된다. 만약 전부 static 값을 갖으면, 최상위 블록에 의존한다.
fixed은 요소가 페이지의 평소 위치에서 제거되고 뷰포트를 기준으로 지정된 위치에 배치되며 스크롤 할 때 이동하지 않는다.
sticky는 지정된 임계값을 넘을 때까지 relative 위치로 처리되며, 특정 지점에서 fixed 위치로 처리된다.

 

5. GET, POST가 어떻게 다르게 사용되는지 말씀해주세요

HTTP는 서버와 클라이언트 사이의 통신을 가능하게 한다. HTTP는 서버와 클라이언트 사이의 요청과 응답의 프로토콜로서 작동한다. 

get과 post는 서버와 클라이언트의 통신을 가능하게하는 HTTP의 메소드이다.

---

Get은 특정 자원을 요청할 때 사용되며, GET 요청 URL에서 쿼리 스트링이 보내진다.

GET 요청은 캐시 되어질 수 있으며, 히스토리에 남을 수 있고, 북마크에 저장 될 수 있다

GET 요청은, 민감한 데이터를 다룰 때는 사용해서는 안되며, 길이의 제한이 있다

GET 요청은, 수정이 아닌 요청에만 사용될 수 있다.

GET 요청은 헤드에 ASCII 문자로만 저장되며, body는 비어있다.

모든 사람이 URL로 데이터를 볼 수 있으며, POST보다 보안에 취약하다

---

POST 요청은, 자원을 생성하거나 업데이트할 때 사용된다.

POST와 함께 서버로 보내진 데이터는 요청의 BODY에 저장된다.

POST 요청은, 절대 캐시 되어질 수 없으며, 히스토리에 남을 수 없고, 북마크에 저장될 수 없다

POST 요청은 데이터의 길이에 제한이 없다.

URL을 통해서 데이터가 보여지지 않으며, GET에 비해 상대적으로 보안에는 강하다

 

 

★★★★★

1. this의 용법을 아는대로 설명해주세요

this는 어디서 호출 되었느냐에 따라 다르게 해석된다.

1-1 일반 함수 실행 방식

var name = 'Julia'; 
function foo () {  
console.log(this.name); // 'Julia'
} 
foo();

일반 함수 실행에서의 this는 window와 같다 즉 this.name === window.name 이다!

 

1-2 일반 함수 실행 방식 with strict mode

var name = 'Julia'; 
function foo () {  
console.log(this.name); // error
} 
foo();

strict mode는 버그 발생 혹은 부정확한 값들을 엄격하게 막기 때문에 this를 undefined로 취급한다

 

2. 도트 표기법

var age = 100; 
var ken = {  
	age: 35,  
	foo: function () {    
	console.log(this.age);	// 35  
}}
ken.foo();

/////////////////////////////////////////////

function foo() {  
	console.log(this.age);
}
var age = 100;
var ken = {  age: 36,  foo: foo}
ken.foo();  // 36

사용된 객체 자체를 의미한다. this.age ===ken.age와 같다

 

3. 명백한 표기법(call, bind, apply)

var age = 100;
function foo() {  
console.log(this.age);}
var ken = {  age: 35,  log: foo} 
foo.call(ken, 1, 2, 3);
foo.apply(ken, [1, 2, 3, 4, 5]);

call, apply 상관 없이 ken.age로 모두 결과가 나온다.

 

4. new 연산자와 생성자 함수

function Foo () {  
console.log(this.age);  // undefined  
this.age = 100; // 빈 객체에 속성 추가  
console.log(this.age);  // 100
} 
const test =new Foo();
console.log(test) // { age: 100 }

 

5. 화살표 함수

일반 함수와는 달리 화살표 함수의 this 언제나 상위 스코프의 this를 가리킨다. 이를 Lexical this라 한다.

화살표 함수는 일반 함수와는 다르게 동적으로 결정되지 않으며 정적으로 정해지기 때문에 call, apply로 this의 값을 바꿀 수 없다

function aa() {
    console.log(this)
}
const bb = () => { console.log(this) }
aa() //window
bb() //{}
console.log(this) //{}

 

 

브라우저 저장소는, HTTP는 요청과 응답으로 이루어지는 사이클이 끝나면, 
끊어지는 무상태성을 가지고 있기 때문에 클라이언트의 상태를 보존하지 않는다
클라이언트 상태를 서버가 아닌 클라이언트에 저장해두고 필요시마다 데이터를 꺼내서 서버에 전달하는 방식을 이용하기 위해 브라우저 저장소를 사용한다

쿠키는 만료 기간이 있는 클라이언트 단에 저장하는 작은 텍스트 파일이다.

메모리에만 저장되며 만료시간이 있고, 브라우저를 종료시키면 삭제되는 세션 쿠키
최대 기간 설정을 통해 장기간 유지가 가능하고, 브라우저를 종료시켜도 삭제되지 않는 Persistent Cookie

장점
1. 대부분의 브라우저가 지원
2. 데이터 유효기간 지정가능
3. XSS(사이트 간 악성 JS 코드를 심는 행위)로 부터 안전. 서버에서 쿠키의 httpOnly옵션을 설정하면 JS에서 쿠키에 접근 자체가 불가능

단점
1. 매우 작은 데이터 용량 4kb
2. 매번 서버에 HTTP 요청 시 같이 전달되어 서버에 부담
3. 암호화가 안되어 있어 유저 정보 도난 위험
4. CSRF 위협 - 공격자가 사용자의 요청을 가로챈 뒤 사용자의 의지와 상관 없이 보안적으로 위험한 행동을 하게끔 변조하여 부당 이익을 취하는 행위
4. 문자열만 저장 가능


웹스토리지는 클라이언트에 데이터를 저장할 수 있도록 HTML5로 부터 나온 새로운 방식의 데이터 저장소로, 로컬 스토리지와 세션 스토리지로 나뉜다.
로컬 스토리지는 데이터 영구 저장이 가능하고, 세션 스토리지는 브라우저 탭 마다 다르게 적용되고, 탭이 닫히면 스토리지는 초기화 된다.
장점
1. 서버에 불필요하게 데이터 저장하지 않는다
2. 넉넉한 데이터 저장 용량
3. 문자열 외에도 자바스크립트의 모든 원시형 데이터와 객체를 저장이 가능하다
3. 도메인 단위로 접근이 제한되는 CORS 특성 덕분에 CSSRF로부터 안전하다

단점
1. HTML5를 지원하는 브라우저만 사용 가능
2. XSS로부터 위험 local storage에 접근하는 JS코드로 쉽게 접근이 가능하다

쿠키 : 일시적으로 필요한 가벼운 데이터 저장이 필요할 때
다시 보지 않음 쿠키 팝업창 , 로그인 자동 완성
로컬 스토리지 : 지속적으로 필요한 데이터 저장이 필요할 때
자동 로그인
세션 스토리지 : 일시적으로 필요한 데이터 저장이 필요할 때
일회성 로그인, 입력 폼 저장, 비로그인 장바구니

세션 쿠키: 은행 웹 사이트의 개인정보 인증, 회원가입 입력 폼, 보안영역 접속 등  
지속적 쿠키 : 좀더 나은 사용자 경험을 위한 사용기록 추적, 오늘 이 창 보지 않음 체크 등
로컬 스토리지 : 개인 PC에 사용하는 자동 로그인 기능, 장바구니, 블로그 글 임시저장 등
세션 스토리지 : 일회성 로그인, 블로그 글 에디터의 자동저장 기능 등