Frontend 인턴 필기 시험 문제 공유

총 6문제 / 25분
모두 서술형

필기 시험이라고 해서 운영체제와 컴퓨터구조 CS문제를 보고 갔는데,
Frontend 직무다보니, JavaScript 기초, CSS 구현, 함수 구현, 결과 출력 예시와 이유를 서술하는 유형이 출제되었다

회사의 기술 스택은 Vue+Typescript, SCSS였지만 해당 기술 스택으로 구현하라고 명시되어있진 않았다

---

Q1. CSS 작성

아래 조건을 만족하는 CSS를 작성하시오.

<div class="page">
  <div class="card">Login</div>
</div>

조건

• .page는 뷰포트를 가득 채울 것
• .card는 페이지 내에서 좌우, 위아래 가운데 정렬
• 모바일 뷰에서는 최대 너비 360px
• PC 뷰에서는 너비 100%
• 좌우 마진은 16px

---

Q2. 얕은 복사

아래 코드의 출력 결과를 작성하고,
원본 user를 보존할 수 있도록 copyUser를 다시 구현하시오.

const user = {
  name: 'noah',
  age: 25,
  city: 'seoul'
}

const copyUser = { ...user }

copyUser.name = 'Kim'
copyUser.city = 'busan'

console.log(user.name)
console.log(user.city) 

---

Q3. 실행 순서

아래 코드의 출력 순서를 작성하고, 이유를 설명하시오.

console.log('1')

setTimeout(() => {
  console.log('2')
}, 0)

Promise.resolve().then(() => {
  console.log('3')
})

console.log('4')

---

Q4. 함수 구현

원하는 출력 결과가 나오도록 함수를 구현하시오.

const users = [
  { userId: 1, amount: 12000, status: 'pending' },
  { userId: 2, amount: 7000,  status: 'pending' },
  { userId: 1, amount: 2000,  status: 'process' },
  { userId: 1, amount: 3000,  status: 'pending' }
]

출력 결과

userId 1: 15000
userId 2: 7000

---

Q5. 클로저 카운터

아래 코드의 출력 결과를 작성하고, 이유를 설명하시오.

function createCounter() {
  let count = 0

  return function() {
    return ++count
  }
}

const counterA = createCounter()
const counterB = createCounter()

console.log(counterA())
console.log(counterB())
console.log(counterA())
console.log(counterB())

---

Q6. 상태값 & 주의사항

상품 목록 API를 호출해 상품 목록을 받아온다.
로딩 중에는 로딩 상태를 노출하고, 실패 시 에러 상태를 노출한다.
사용자는 검색어를 빠르게 여러 번 입력할 수 있다.

1. 필요한 상태값 3가지를 작성하시오.

2. 이 구현에서 주의할 점을 2가지 이상 작성하시오.

---

회사 이름은 명시하지 않았습니다