다음 주에 잡힌 면접에 앞서서 부랴부랴 면접 질문들을 공부했습니다.
이 포스팅은 아래의 링크 내용을 다시 제가 적은 노트입니다.
프론트엔드 개발자 인터뷰 후기 (면접 질문 정리)
최근 프론트엔드 경력자 면접을 봤습니다. 리액트를 사용하는 프론트엔드 개발자를 구하는 자리기에 리액트 관련 질문을 예상했지만, 보기 좋게 빗나갔습니다. 질문의 대다수가 웹개발의 기본인 JS, CSS에 대한 질문이었고 설명을 하려니 잘 안되는 부분이 있었습니다. 제가 받은 질문 중 저 스스로도 잘 모르거나 헷갈렸던 질문들에 대해 정리를 해보았습니다. ...
velog.io
DocType
HTML, XML. XHTML등이 있다.
CSS를 이해하는 방식의 차이.
자바스크립트를 다루는 방식의 차이
Strict, Transitional, Frameset
meta태그
HTML문서 자체에 어떤 내용이 들어있는지 알려준다. subejct, keyword, title, author 존재.
메타정보를 데이터베이스화해서, 검색 엔진에서 적절한 페이지를 보여줌.
반응형 웹의 경우 viewport를 넣어준다.
script 태그의 위치
body 태그의 끝 부분에 위치 하는게 낫다. 먼저 올 경우,
1) 해석되지 않은 DOM을 참조하여 실패할 수도 있고,
2) 해석이 완료될 때까지 랜더링이 멈추므로 프리징 현상이 발생.
이벤트 버블링,캡쳐링
이벤트 버블링
특정 요소에서 이벤트가 발생했을 때, 해당 이벤트가 하위애서 더 상위의 화면 요소로 전달되어가는 특성을 의미.
= 하위의 클릭 이벤트가 상위로 전달됩니다.
이벤트 캡쳐링
이벤트 버블링과 반대의 방향으로 진행.
해당 이벤트를 감지하기 위해서 하단으로 내려갑니다.
event.stopPropagation()
이벤트 전파를 막아줍니다. 캡쳐링의 경우 클릭한 요소의 가장 최상단 부분에 대해서만,
버블링의 경우 클릭한 부분에 대해서만 이벤트를 동작시킵니다.
Event Delegation (이벤트 위임)
HTML로 리스트를 만들고, 각 아이템에 대해 이벤트를 달아주는 상황. 아이템이 많아질수록 각각 달아주긴 버거울것이다. 이때 부모 element에 이벤트 리스너를 달아주게되면 상위로 이벤트가 버블링되니까 개꿀!
Execution Context (실행 컨텍스트)
참고
=https://boycoding.tistory.com/27
실행 가능한 코드(전역코드, 함수코드)의 정보를 담고 있습니다.
이 때 정보란 : 전역/지역/매개 변수, 함수 선언, 유효범위, this
객체
- 전역객체
- 전역 변수, 전역 함수 포함
- 함수객체
- argument 객체, 지역변수, 내부함수
- 링크의 예제에서 context1은 내부함수가 아님을 주의하자
실행 컨텍스트 생성 순서
- 변수 객체 생성
- 실행 객체 내부의 함수, 변수 정보 담음
- 활성객체 생성(함수알 때)
- argument 부분이 있음(변수객체와의 차이). 함수 실행시 활성객체가 변수객체가 됨.
- argument 객체 생성
- 스코프 정보 생성
- 각 실행 컨텍스트별 어디까지 참조하는지 알려줌
- 변수 생성
- 내부에서 사용되는 변수에 대해 메모리 할당.
- 실제 연산에 들어갈때까지 값은 할당 x.
- this 바인딩
- 어떤 객체를 참조하는지 알려줌.
- 코드 실행
- 초기화, 연산, 할당이 이루어짐.
* 스코프 체인
각 함수가 변수의 값에 대해 알고자 할때, 스코프체인을 참조한다.
함수의 실행 컨텍스트가 만들어 질때, 자신의 스코프체인을 다음과 같이 만든다.
스코프체인 = 현재 실행 객체의 변수 객체 + 상위 컨텍스트의 스코프 체인
렉시컬 스코프(Lexical Scope)
소스코드가 작성된 문맥에서 결정.
var x ="global";
function func1 () {
var x ='local';
func2();
}
function func2() {
console.log(x);
}
func1(); //global
func2(); //global -> func2의 상위스코프는 func1이 아니라 window영역이기 때문이다.
이벤트 루프
자바스크립트는 단일스레드 기반의 언어입니다. 이 때, 동시성 작업을 수행하기 위해 이벤트 루프가 쓰입니다.
setTimeout의 경우 callstack에 넣었다가 pop되며 web api에 저장됩니다. setTimeout 다음의 함수가 실행될 동안, web api에서는 setTimeout에서 불러진 함수를 시간이 지난 후 task cue로 넣어줍니다. 이벤트 루프는 task cue와 call stack을 관찰하다가 call stack이 비어있고, task cue에 작업이 존재할 경우, 해당 작업을 call stack으로 불러옵니다.
메서드 체이닝
자기 자신을 반환하면서 지속적으로 다른 함수를 호출.
예시 //출처: https://recoveryman.tistory.com/368
var mySquare = function(){
this.width = 0;
this.height = 0;
this.x = 0;
this.color = "";
}
mySquare.prototype.setWidth = function(width){
this.width = width;
return this;
}
mySquare.prototype.setHeight = function(height){
this.height = height;
return this;
}
mySquare.prototype.getInfo = function(){
console.log(this.width);
console.log(this.height);
}
var _mySquare = new mySquare();
_mySquare.setWidth(2).setHeight(3).getInfo();
=> 체이닝 패턴의 장단점
(+) : 코드가 간략해진다.
(+) : 함수를 쪼개는 방법을 생각하게 되면서, 한 함수에서 여러 일을 다루는 것이 아니라, 작고 특화된 함수를 생각한다.
(- ) : 디버깅이 어렵다. 여러개의 메서드가 존재하는 가운데 에러가 발생시, 실패한 메서드가 어느 곳인지 알 수 x.
DOM에서 Id와 Class의 차이
id는 유일, class는 중복 가능한 값.
https://www.youtube.com/watch?v=xls6jEZNA7Y
링크의 코드를 실행하면 left와 right이 겹친다. 이는 부모 앨리먼트가 float에 대해서는 감싸지 않기 때문이다.
해결 방법 1. 부모 엘리먼트의 맨 끝에 빈 div를 넣고 style="clear:both"를 적용한다.
해겹 방법 2. 내부에 빈 엘리먼트 코드를 넣지 않는다. 대신 CSS적으로 해결
.container:after{
content:"";
clear:both;
display:block;
}-> 내부적으로 빈텍스트 영역이 생김.
CORS(크로스 도메인 이슈)
동일 출처 정책(same-origin-policy)(=샌드박스)
: 하나의 웹페이지에서 다른 도메인 서버에 요청하는 것을 막는다 .JS 자체의 규율.
예시 : 카카오에서 다음의 정보를 가져올때, 서로 다른 도메인 - 문제 발생.
특정 사용자에게 어떻게 허용해 줄까?
1) Header
response.setHeader("Access-Control-Allow-Origin", "*");
//모든 도메인에 대한 접근을 허락해준다. 특정 도메인으로 지정도 가능.
2) jsonp
클로저란
실행이 끝난 함수의 스코프를 참조할 수 있는 함수.
function fncCount() {
var count = 0;
function addCount() {
count++;
return count;
}
return addCount;
}
var closure= fncCount();
console.log(closure()); //1
console.log(closure()); //2
console.log(closure()); //3
정리 :
- 클로저는 부모함수에 대해서 접근성을 가진 자식 함수를 반환할 때 유용하다.
자바스크립트 타입
Number / String / Boolean / undefined / null
Object / Array / Function
NaN
수치 연산을 해서 정상적인 값을 얻지 못할 때.
console.log(1-'a');
delete 연산자
객체 프로퍼티를 삭제하는 경우. 객체는 삭제 불가능함.
obj = {
name: "Dahee",
age: 16
}
delete obj.name
Array와 Object 구분방법
var arr = [];
var obj = {};
arr.constructor.name; //Array
obj.constructor.name; //Object
Delete 와 splice 연산자
var arr = [1,2,3];
delete arr[1]
console.log(arr); //[ 1, <1 empty item>, 3 ] <<undefined로 변환. index 살아있음.
var arr = [1,2,3];
arr.splice(1,1);
console.log(arr); // [1,3]
호이스팅
함수와 변수의 선언이 유효범위의 최상단으로 자동으로 끌어올려지는 것을 이야기함.
즉, 변수의 정의가 그 범위에 따라 선언과 할당으로 분리되는 것을 의미.
이때 함수 선언은 끌어올리지만, var foo = function(){}과 같이 선언된 경우 foo만 올라가고, 여기에 할당된 함수는 올라가지 않는다. (https://asfirstalways.tistory.com/197 참조)
함수의 length 속성
function func(a,b) {return a;}
console.log(func.length); //2
생성자 함수
function Developer(name, stack, city){
this.name= name;
this.stack = stack;
this.city = city;
}
var dev = new Developer('captin','web','Daegu');
var dev1 = new Developer('prince','DB','Seoul');
console.log(dev);
console.log(dev1);
즉시 실행함수
함수를 정의함과 동시에 바로 실행하는 함수. 다시 호출 불가. ->최초 한번의 실행만 요구하는 코드에 적합.
function (name) {
console.log('This is immediate function:' + name);
})('foo')
Arguments 객체
함수 호출시 사용된 parameter의 정보를 가진 배열
function add(){
console.dir(arguments);
}
console.log(add(1,2,3));
argument의 활용 : 매서드에 넘겨 받을 인자의 개수 모를 때.
argument는 index를 가지지만 배열은 아니다. 객체와 비슷한 배열을 array-like object라 한다.
call & apply
call은 this를 바꿀 때 쓰인다. 즉, 다른 객체의 함수를 자기것마냥 쓸 때 쓰인다.
var obj = {
name: "boki",
greet: function(){
alert("hello "+this.name);
}
}
var obj2 = {
name: "momo"
}
obj.greet();
obj.greet.call(obj2);apply는 리스트를 사용한다. e.g. obj.greet.apply(obj,[2,3])
생성자와 메소드 체이닝 재정리
class calculate {
constructor(){
this.total = 0;
}
add = (added) => {
this.total =+ added;
return this;
}
subtract = (subtracted) => {
this.total =- subtracted;
return this;
}
getTotal = () =>{
return this.total;
}
}
const calc = new calculate();
const result = calc.add(10).subtract(2).getTotal();
console.log(result);
this
1) 전역에서 this === window는 true
2) 함수에서
function test(){
console.log(this)
}
의 경우 전역에 대한 this
3) object에 대한 this
var obj = {
name:"Dahee",
age: 28,
printInfo: function () {
console.log(this.name, this.age);
}
}
obj.printInfo();
코딩테스트 시 유의사항
1. var, let 혼용하지 말기.
2. ; 붙이기
3. == 대신 === 사용하자
4. 불변성 유지
sort 와 같이 원래 array를 변경하는 경우는 nono. slice를 이용해서 먼저 다른 arr 만들어주고, 해당 arr 변환 적용
원활한 커뮤니케이션
1. 백앤드와 프론트엔드에 대한 지식을 모두 가진 사람이 PM으로 있어야한다
2. 프로젝트의 우선 순위 확인
3. Component 기반의 개발 프로세스
4. 개발 Framework 설정.
5. 코딩 표준을 정하라.
출처: https://blog.naver.com/algorithmjobs/221321627646
jQuery의 단점
무겁다..무겁다...
출처: