2022-03-09 TIL

Fact

• 프론트엔드 인터뷰 스터디에 참여했다.
• 퀴즈 데이터, 소장 중인 퀴즈, 내가 추가한 퀴즈를 불러오는 로딩 중인 상태를 react skeleton으로 구현하려고 했는데, 퀴즈 리스트 같은 경우는 내가 몇 개를 가져오는지 알 수 있는 방법이 없다. 그래서 skeleton을 어떻게 출력해야 할지 고민 중이었는데, 기존 페이스북이나 인스타그램에서는 기존에 많이 쌓여져있는 전체 게시물 같은 데이터는 화면을 skeleton으로 채웠지만, 장바구니나 내가 추가해야 하는 게시물은 로딩 스피너를 돌리고 있는 걸 확인했고, 프로젝트에서도 버튼이나 정적, 이미 정해져있는 데이터는 skeleton으로 구현하고 동적, 내가 가져올 데이터의 개수를 모를 때는 스피너로 로딩 중임을 나타냈다.
• 좋아요 기능을 구현하다가 시간을 많이 소비했다. 로그인된 유저만 좋아요 기능을 사용할 수 있도록 구현 중에 있다.

Feelings

• 프로젝트 규모가 커질수록 기능을 추가하는 게 쉽지 않다. 로그인 상태도 고려해야 하고, 생각할게 많다.

Findings

호스트 객체와 내장 객체의 차이점은 무엇인가요?

내장 객체는 ECMAScript 사양에 정의된 javaScript 언어의 일부인 객체입니다. 예를들어 String, Math, RegExp, Object, Function등이 있습니다. 내장 객체는 애플리케이션의 환경과 관계없이 언제나 사용할 수 있습니다.

호스트 객체는 실행환경에서 제공하는 객체이고, 내장 객체가 아닌 객체는 모두 호스트 객체입니다. 예를들어 window, XmlHttpRequest, HTMLElement 등의 DOM 노드 객체와 같이 호스트 환경에 정의된 객체를 말합니다.

function Person(){}, var person = Person(), var person = new Person()의 차이점은 무엇인가요?

function Person(){}은 정상적인 일반 함수 선언식이고, var person = Person()은 생성자가 아니라 Person을 함수로 호출합니다. 함수를 생성자로 사용하려면 new 키워드를 필히 붙여주어야합니다. 일반 함수처럼 생성자를 호출하면 undefined가 반환되고 지정된 변수에 할당됩니다. 그리고 var person = new Person()은 Person.prototype을 상속받은 new 연산자를 사용하여 Person 객체의 인스턴스를 생성합니다.

function Person(name) {
  this.name = name
}

var person = Person('John')
console.log(person) // undefined
console.log(person.name) // Uncaught TypeError: Cannot read property 'name' of undefined

var person = new Person('John')
console.log(person) // Person { name: "John" }
console.log(person.name) // "John"

.call과 .apply의 차이점은 무엇인가요?

.call과 .apply는 모두 함수를 호출하는데 사용되며, 첫 번째 매개변수는 함수 내에서 this의 값으로 사용됩니다. 그러나 .call은 쉼표로 구분된 인수를 두번째 인수로 취하고, .apply는 인수의 배열을 두 번째 인수로 취합니다.

Function.prototype.bind에 대해 설명하세요.

const obj = { name: 'Tom' }

const say = function(city) {
  console.log(`Hello, my name is ${this.name}, I live in ${city}`)
}

const boundSay = say.bind(obj)
boundSay('seoul') // Hello, my name is Tom, I live in seoul

bind 함수가 call, apply 와 다른 점은 함수를 실행하지 않는다는 점입니다. 대신 함수를 리턴합니다. 위 코드에서 boundSay 함수는 이제부터 this를 obj로 갖고 있기 때문에 나중에 사용이 가능합니다. bind에 사용하는 나머지 rest 파라미터는 call과 apply와 동일합니다.

언제 document.write()를 사용하나요?

자바스크립트 document.write() 를 사용하면 화면에 직접 데이터를 출력할 수 있습니다. 출력되는 데이터는 문자열이 될 수 있고, 데이터객체 정보가 될 수 있습니다. 기능적으로는 전혀 문제가 되지 않지만, 사용상 주의가 필요한 함수입니다. 자바스크립트가 처음 등장했을 때는 데이터 값의 확인이나 디버그 등에 많이 활용되기도 하였습니다.

하지만 웹 페이지의 모든 내용이 로딩된 후에 document.write()메소드가 실행되면, 웹 페이지 내에 먼저 로딩된 모든 데이터를 지우고 자신의 데이터를 출력하게 됩니다. 따라서 document.write() 메소드를 테스트 이외의 용도로 사용할 때에는 충분히 주의해서 사용해야 합니다.

http://www.tcpschool.com/javascript/js_intro_output

Future Action

• 알고리즘을 풀어야하는데…