HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
플랩풋볼 2차 기술 면접

플랩풋볼 2차 기술 면접

👨🏽‍💻
날짜 : 22년 2월 8일 진행 방식 : 3 대 1 대면 면접 면접관 : HR담당자 1명, 개발팀 리더 1명, 프론트엔드 개발자 1명 (1차와 동일) 시간 : 총 1시간 진행 특이사항 : 같이 일하게 될 프론트엔드 개발자 분과 1 : 1 토의식으로 진행

면접방식

  • 코드형식의 ‘HTML 1문제 + CSS 2문제 + JS 4문제’ 를 모니터에 연결하여 대화를 나누며 풀이
 

HTML

[문제]
  • 플랩풋볼 메인 페이지를 축약한 html 마크업 구조가 주어짐
    • body > header > nav > main > section > article + 사이사이 h1~h5, p 태그
    • 이 때, 마치 책의 목차를 표현하듯이 페이지를 문서 객체로 표현한다면, 계층구조를 어떻게 표현할 수 있을까요
      • // 문제 그 자체가 아닌, 간소화함
<body>
	<header>
		<h1>플랩풋볼</h1>
	</header>
	<nav> <h2>메인페이지</h2></nav>
	<section>
		<h3>배너</h3>
		<article>
			<h4>이주의 팀</h5>
			<div>A<div>
			<div>B<div>
			<div>C<div>
		</article>
	</section>
</body>
[풀이]
  • 문제 자체를 이해하지 못함!
    • 어떤 방식의 결과를 말하라는 것인지 도무지 이해할 수 없었다..
    • 예상되는 시각적인 레이아웃으로 접근하였으나, ‘계층구조’ 를 알려달라고 하심
    • 약 5분간 헤매었고, 건님의 도움을 받아 원하는 방향으로 접근할 수 있었음
      •  
[정답]
  • HTML의 heading 태그를 통한 페이지의 논리적 계층 구조에 대한 질문이었다.
    • h태그는 h1 > h2 > h3 > h4 > h5 순으로 논리적 계층 구조를 가지게 되는데, 이 때 독립적인 영역을 나타내는 태그인 nav, section, article 를 만나게 되면, 하나의 새로운 계층을 만들게 되고, 그 안에서 h태그의 순서에 따라 계층을 형성한다.
      • 플랩풋볼
	메인페이지
	배너
	이주의팀

CSS

[문제1]
여러 CSS selector들로 조합된 코드가 주어지고, 가장 우선순위가 높아 적용되는 코드를 말해주세요.
// 문제 그 자체가 아닌, 간소화함

#div .class {
	display: block
}

#div .class {
	display: flex !important
}

#div [class='class'] {
	display: inline
}
[풀이1]
css 선택자 우선순위에 대해 온전히 알고있지는 않아서, 찍기 보다는 내가 아는 부분만 설명드리고, 그에 따른 선택과정에 대해 설명
  1. css 선택자는 4가지 기준에 의해 점수가 판별되어 우선순위를 가지게 된다.
    1. 그 중 하나는 inline이냐
  1. id(#) 선택자는 class 선택자(.) 보다 높은 우선순위를 가진다
  1. !important 는 가장 높은 우선순위 지정 키워드 이다.
따라서 !important 가 적용된 display flex 가 적용된다.
[정답]
css 선택자 우선순위의 대원칙은 점수가 높은 선택자에 스타일이 적용된다
점수가 같으면 뒤쪽에 나온 css가 적용
  • 점수 판별
    • 만의자리 > !important 여부
    • 천의자리 > inline 스타일 여부에 따라 1/0
    • 백의자리 > id 선택자 개수
    • 십의자리 > 클래스 선택자 개수
    • 일의자리 > 일반 태그 선택자 개수
 
[문제2]
flex에 대한 코드를 보고, 어떤 레이아웃이 그려지는지 설명해주세요.
  • 각 속성에 대한 설명
  • 부모 container의 너비가 100px으로 준다면?
.container {
	display: flex
	flex-wrap: wrap;
  flex-direction: row;
	justify-content: space-between;
  align-items: center;
}

.child {
	width: 100px;
	height: 100px;
	flex: 1 1 100px
}
[답변]
  • flex-wrap과 flex shrink 속성은 부족하게, 나머지는 올바르게 설명
    • overflow 되어 넘친다고 함 잘못대답
[정답]
  • flex-wrap: wrap : 부모컨테이너를 넘쳤을 경우, 다른 행을 추가하여 배치
    • nowrap : overflow 되도록 배치
  • flex shrink : 1 이므로 flex-item 들은 부모 컨테이너의 너비에 맞게 줄어든다.
    • flex-basis가 100px 이라고 유지되는 것은 아님

Javascript

  • 전반적으로 호이스팅과 변수선언/메모리에 대한 개념이 출제
[문제1]
출력 결과와 이유를 설명해주세요
console.log(x)
var x
[답변]
  • 호이스팅의 개념 설명 (선언키워드 끌어올리는 가상동작, 실행컨텍스트 렉시컬환경의 식별자 수집 중 발생)
  • var의 특징 (선언과 초기화 동시에 이루어진다)
  • 정답 undefined
 
[문제2]
출력결과와 이유는?
console.log(x) 
x=10
console.log(x)
var x
console.log(x)
[답변]
  • 런타임이전과 이후의 동작과정 설명
  • 정답
    • undefined > 10 > 10
 
[문제3]
출력결과와 이유는?
console.log(funcA(1,2))
console.log(funcB(1,2))


function funcA(a,b){
	return a + b
}

var funcB = (a,b) => a + b
[답변]
  • 함수의 호이스팅 설명 ( 선언은 함수자체를, 표현식은 식별자만)
  • 정답
    • 3 > error
[문제4]
출력결과와 이유는?
var a = 1

if(true){
	var b = 10
}

function funcA(){
	var c = 100

	function funcB(){
		var d = 1000
		...
	}
	funcB()
}

funcA()


console.log(a)
console.log(b)
console.log(c)
console.log(d)
[답변]
  • 함수스코프와 블록스코프
    • let, const와의 차이
  • 정답
    • 1 > 10 > 참조에러 > 참조에러
 
[문제5]
출력결과와 이유는?
var obj = {
	a : 10
	b : {
		c: 20
	}
}

var objB = {...obj}

console.log(obj === objB)
console.log(obj.a === objB.a)
console.log(obj.b === objB.b)
[답변]
  • 식별자와 원시타입과 동적타입의 메모리 저장방식에 대한 설명
    • 식별자가 메모리의 저장 주소를 보고있다. 동적타입은 또 다른 저장주소에 저장
  • 정답
    • false > true > false 틀림
      • 옳은 정답: false, true, true
[풀이]
전개연산자는 얕은 복사를 하게 됨
즉 objB의 b프로퍼티의 { c: 20 } 이 저장된 메모리 참조 주소가 복사됨
따라서 obj.b === objB.b 는 true 임
obj.b.c = 30 으로 변경 시, objB.b.c 도 30으로 변경되어 위험가능성 내포하게 됨
 
[문제6]
가비지 컬렉터의 개념으로 설명해주세요.
var a
a = 10
a = 20

console.log(a)
[답변]
  • 재할당 가능하므로 20 출력
  • 가비지컬렉터 개념 설명
    • 해당 메모리를 참조하는 식별자가 존재하지 않을 경우, 해당 값의 주소는 주기적으로 수거해간다.