플랩풋볼 면접 준비

1. 면접 전 준비자료

1-1. 진행된 플랩 면접 복기

1-2. 플랩 관련 자료

대표인터뷰

• 2022/12
골 때리는 맛에 빠진 2030 女...월드컵 특수 제대로 누린 '이곳' [방준식의 레저 스타트업]
"축구는 22명이 필요하지만, 풋살은 10명만 있어도 됩니다. 풋살을 하고 싶은 사람을 언제 어디서든지 모아 팀을 만들어주니 서비스 5년 만에 전국 축덕(축구 덕후)들 31만명이 모였습니다." 축구 마니아들은 팀을 찾는 것부터 난관이다. 동호회에 가입하기에는 부담되고, 장소 구하는데도 시간이 많이 든다. 주말 아니면 함께 모여서 뛸 시간도 부족하다. 불편함을 해결하기 위해 '20년 축구 마니아'가 팔을 걷었다.

https://www.hankyung.com/life/article/202209190710i

• 2020/06

[스포츠JOB아먹기⑧ 강동규] 스타트업 열풍, 플랩풋볼 성공 비결은?

스포츠산업 카테고리를 운영하고 있는 스포츠Q(큐)가 국내 최대 스포츠산업 채용정보 사이트 스포츠잡알리오와 손을 잡았다. [스포츠 JOB아먹기]는 가파르게 성장하고 있는 스포츠산업 속 다양한 직종에 종사하는 사람들의 이야기를 들어보고자 한다. [편집자 주][스포츠Q(큐) 오세운, 홍자형 객원기자] 창업 열풍이 스포츠에서도 불고 있다. 많은 이들이 참신한 아이디어와 나름의 네트워크를 활용해 스타트업에 뛰어든다. 하지만 모든 도전이 성공에 이르지는 못한다.

https://www.sportsq.co.kr/news/articleView.html?idxno=414469

1-3. 나를 볼 수 있는 자료

성구님께 보냈던 메일

Github

Outwater - Overview

You can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or window. Reload to refresh your session. Reload to refresh your session.

https://github.com/Outwater

2. 인성/컬쳐핏 면접 준비

2-1. 자기소개서 관련

2-2. 물어볼 수 있는 질문들

2-3. 어필할 수 있는 이야기

2-4. 플랩에게 궁금한 점

• 1) 플랩풋볼의 다음은 무엇일까? 혹은 정해진 목표는 무엇일까
• 작년은 서비스적으로는 ‘전국 확대’라는 목표가, 개발팀에서는 ‘서비스의 안정’ 이라는 목표가 있었는데 올해는 서비스적으로는 어떤 목표를 가지고 있는지 궁금
• 개발은 ‘리뉴얼 프로젝트 등 기술부채 해결이라고 알고 있다.’
• 내가 생각해오는 방향과 유사하여 다음이 더 기다려졌다.
• 직장인 남성 트레이닝 매치, 제품이나 커머스로의 확대의 생각은?

• 2)개인의 성장 - 팀의 성장 - 회사의 성장이 맞춰지는 것이 이상적 개인의 성장을 이끌어내기 위한 플랩의 지원이 있는지
• 개발스터디 지원
• 업무 수행 평과 기준과 보상?
• 개발 조직에서는 목표/성과를 어떻게 정의하며, 평가는 어떻게 이루어지나요?
• 동료피드백 등

3. 직무 관련 면접 준비

3-1. 지식 위주의 질문 (스택/웹 지식)

[CSS]

참고

• HTML/CSS/FE 모의면접 리스트

• https://devowen.com/272

 

CSS보다 SCSS/SASS가 가진 장점에 대해 설명하세요.

💡

scss는 css를 조금 더 효율적으로 사용하기 위해 자체 문법을 가지고 있는 대표적인 css전처리기 중 하나입니다. [장점[ 1) 변수를 지정함으로 재사용성을 증가 ($color변수) 2) nesting(중첩)을 통해 불필요하게 중복된 selector를 선언하는 것을 막고 가독성을 높일 수 있다. 3)조건문 반복문 등의 간단한 연산가능 4) mixin을 통해 자주쓰는 속성들을 모듈화 할 수 있다. (버튼, 반응형틀) 이러한 CSS전처리기는 재사용성과 시간비용을 줄인다는 점, 유지관리가 용이하다는 장점이 있습니다. 단점) 바드시 컴파일과정 거쳐야 한다는 점

CSS in JS(styled component)의 장단점에 대해서 설명하세요.

💡

[개념] css in Js는 문서단위의 스타일 시트가 아닌 컴포넌트 단위로 스타일 시트를 추상화하여 작성하는 방식으로 js 파일안에서 css를 같이 선언하는 방식을 말합니다. [장점] 1) 컴포넌트 단위의 추상화(모듈화) - 컴포넌트 단위로 React , Vue 같은 컴포넌트 단위에 잘 어울린다. - css 별개로 문서단위로 작성하는 것 해결 - 오직 해당 컴포넌트에만 영향을 주어, 생성 수정 삭제가 자유로움 2) 유지보수의 장점 - 큰 규모의 프로젝트에서 css파일의 코드가 많을 경우 수십개의 스타일 시트를 찾아야하는 문제 - 겹치지 않는 변수명을 짓게 해준다. [단점] 외부 의존성 (초기진입속도) [↔인라인] 인라인은 DOM노드의 속성으로 추가하지만 css in Js는 별도의 style 태그를 생성하고 그 안에 작성코드를 작성한다. selector를 가지므로 js에서 핸들링 가능하다.

https://d0gf00t.tistory.com/22

https://velog.io/@dev-mish-mash/CSS-in-JS-가-좋은-이유

id와 class 셀렉터의 차이점에 대해 설명하세요.

💡

id와 class의 차이는, 유일한 요소를 지정할 때에는 id속성을 사용하고, class는 복수의 요소에 적용할 때 사용한다는 점입니다. (* id의 우선순위가 class 보다 높다)

CSS 박스 모델에 대해서 설명하세요.

💡

box model은 각각의 Object를 넓이와 높이를 가진 박스형태로 나타내어, 브라우저에 배치하기 위한 규칙입니다. 각각의 박스들은 content , padding, border, margin 로 구성된다. content - html태그가 차지하는 공간 (width, height) padding - content의 내부 여백 border - 테두리 margin - 테두리 밖 외부 여백 *기본적으로 padding, border는 width의 포함이 되지 않아, 실제 차지하는 공간의 계산이 어렵기 때문에, box-sizing: border-box 옵션을 주어 width에 padding과 border를 포함시킬 수 있다.

CSS에서 px, em, rem, vh, vw 단위들의 차이점은 무엇인가요?

💡

[px] px은 글꼴 크기 표시하는 표준단위 입니다. px은 화면 크기에 상관없이 고정되어 있기 때문에 반응형 웹등에 적합하지 않고, 화면크기가 고정적인 출력용 파일에서 유리합니다. [em, rem] px과 다르게 상대적인 단위입니다. em은 부모요소의 글꼴 크기를 기준으로 자신의 글꼴 크기가 결정됩니다. 부모요소의 크기가 10px이면 자식요소에서 2em은 20px를 의미합니다. rem은 html 루트요소의 폰트사이즈를 기준으로 하여 글꼴의 크기를 지정한다. 예를 들어 html의 font-size가 10px이라면 2rem은 20px이 된다. [ vh (vertical height) vw(vertical width)] 너비와 높이값을 뷰포트(화면)의 크기를 기준으로 작성할 때 사용한다. 화면에 꽉 차는 크기를 지정할 때 유용하다.

https://tutorialpost.apptilus.com/code/posts/css/css-size-matter/

CSS 레이아웃 기법의 종류와 특징에 대해서 설명하세요. (grid, flexbox)

https://studiomeal.com/archives/533

💡

[flex] flex는 레이아웃을 편하게 잡기 위한 css의 속성으로 단방향 레이아웃 설계에 강점이 있습니다. flex는 플렉스 컨테이너라는 부모요소와 플렉스아이템이라는 자식요소를 가지고, 메인축을 지정하여 수평, 수직 정렬을 구현합니다. flex는 요소의 크기가 불분명하거나, 동적인 경우에도 요소를 효율적으로 정렬할 수 있다는 장점이 있습니다. [grid] flex가 단방향 레이아웃 설계라면 그리드는 2차원의 두방향 레이아웃 시스템입니다. grid-template-columns, rows 속성을 통해 각 행과 열의 아이템 개수와 비율을 지정할 수 있으며 row-gap, column-gap 속성을 통해 각 행과 열 사이의 간격을 지정할 수 있습니다.

 

• flex 명령어 정리
• Flex Container 속성
• flex-direction (중심축 설정) : row; column, row-reverse, ...
• justify-content (메인축방향 정렬) : flex-start, center, space-between
• align-items (수직축 방향정렬) : flex-start, flex-end, center, baseline

---

• Flext Item 속성
• flex-grow (늘리기- defalut 0 으로 basis값 보다 큰 것허용 안함) : 0보다 큰 수 입력 시 빈공간을 메우게 된다. : basis를 제외한 여백 부분을 grow의 비율만큼 가져감 : 계산 어려우므로 보통 basis에 0을 두어 비율을 준다.
• flex-shrink (default 1 로 basis보다 작아질 수 있다.) : shrink 0 으로 지정 시 basis보다 작아지지 않아 고정폭을 가진 컬럼을 만들 수 있다. (flex-shrink: 0; width:200px)
• flex-basis (아이템 기본크기- default auto) : ex) 100px 설정시 100px 안되면 100px로 넘으면 그대로 넘은 값 유지

추가

margin과 padding의 차이

position이란 무엇인지

[ web 기반 질문 ]

컴포넌트의 역할과 책임이란 관심사가 분리 된 컴포넌트는 무엇을 의미하나요?

댓글

컴포넌트의 역할과 책임 1. 외부로 부터의 데이터 관리 (API, localStorage) 2. 데이터를 UI 로 표현 3. 사용자의 인터랙션 처리 (이벤트 핸들러)

SPA / CSR / SSR

답변 참고

CSR과 SSR의 구분은 데이터페칭 이후 렌더링과 같은 html의 동적생성을 어디서 담당하는가

: CSR은 빈html + client 데이터페칭 이후 반영하여 html 업데이트

: SSR은 server에서 데이터페칭 반영하여, html 만들어 요청결과로 내려줌

CSR은 api요청 최소화와 깜빡임이 없는 UX 장점 + 초기로딩 느리고, SEO 단점

SSR은 초기로딩 빠르고,SEO 장점, api요청이 많다는 단점

• (CSR, SSR 관련 참고)

댓글

• [x] 1 SSR (Server Side Rendering) 과 CSR (Client Side Rendering)을 각각 설명해주세요. 특징 장단점 ◦ 답변 SSR ▪ 완전하게 만들어진 HTML 파일을 서버로 부터 받아, 웹브라우저에 렌더링 ▪ (장점) 초기로딩속도 빠르다. ▪ (장점) SEO (검색엔진 최적화 가능) - meta 태그들미리 정의되어있음 ▪ (단점) 매 페이지 요청시 마다 새로고침되어 UX 떨어짐 ▪ (단점) 매 패이지 요청 때문에 서버 트래픽,부하 증가 ▪ 동작과정 • client요청 → data,css 적용된 html + js 응답(server) → html먼저 렌더링(browser) → js 다운 후 실행(browser) CSR ▪ 첫 렌더링 시, HTML과 static파일을 먼저 전부 다운로드하고, 이후 필요한 리소스가 있을 때에만 서버에 요청하고 이를 웹브라우저에 반영하는 방식. ▪ (장점) 첫 로딩이후 렌더링 속도가 빠르다. ▪ (장점) 서버 부담이 적다. ▪ (단점) 초기 로딩속도 느리다. → resource를 chunk단위로 묶어서 다운로드, Razy Loading을 통해 초기렌더링에 필요한 부분만 먼저 다운로드 받는 방법 ▪ (단점) SEO(검색엔진 최적화)에서 문제 발생 → 구글엔진만이 js까지 크롤링함 → react.helmet 라이브러리를 통해 각 컴포넌트 별로 meta 태그 지정, → 빌드시 하나의 html이기 때문에 SEO 어려움 → react-snap을 통해, 배포시에 페이지 별(router)로 html파일을 생성하도록 함 • [x] 1-1 본인이 어떤 프로젝트를 진행할 때, SSR과 CSR 중 어떤 것을 선택하였고, 선택이유는 무엇인가요? ◦ 답변 ▪ 서비스 성격에 따라 선택할 것 • 검색을 통한 상위 노출이 필요할 경우 (e-commerse) → SSR • 첫 페이지 로딩이 중요한 경우 (e-commerse detailPage) → SSR • 모바일에서 주로 사용하는 웹사이트 → CSR ▪ 참고 • https://miracleground.tistory.com/165 • [x] 2 SSR과 CSR을 중심으로, 렌더링 관점에서의 흐름 변화를 말해주세요. ◦ 답변 ▪ 전통적인 렌더링 방식 (SSR) ▪ 터닝포인트 • 모바일 기기(스마트폰)의 급격한 발전 ◦ 트래픽최소화, 속도와 반응성, 사용성(UX) 기준 올라가 반영 ▪ CSR의 흐름 • React, Vue ▪ 다시 SSR 방식의 SPA • Next.js ◦ 첫 페이지는 SSR을 통해, 채워진 Html을 받아 SEO문제를 해결하고, 다음페이지부터는 CSR 방식을 적용하여 사용성(UX), 서버부하를 해결한 프레임워크 • [x] 3 SPA(Single Page Application)와 MPA(Multi Page Application)을 각각 설명해주세요. ◦ 답변 ▪ SPA는 한 문장으로 말하면, 모바일퍼스트 전략에 부합하는 단일 페이지 애플리케이션 ▪ MPA는 link tag를 통한 화면전환 방식을 가진 멀티페이지 애플리케이션 • [x] 3-1 SPA (Single Page Application) 와 CSR (Client Side Rendering) 은 같은 개념인가요? ◦ 답변 ▪ 다르다. 포커스하는 것이 다름. SPA는 ‘페이지 수’를 기준으로 MPA와 같이 사용할 수 있는 keyword, CSR은 ‘렌더링 주체’ SSR과 같이 연결지어 말할 수 있는 키워드 ▪ 모든 SPA가 CSR방식을 채택하지는 않는다. • Next.js의 경우 SPA이지만, SSR을 사용한다. • 첫페이지 렌더링은 서버에서 담당하지만 페이지는 하나이다. • [x] 3-2 SPA 의 단점을 말하고, 해결하기 위한 방법에 대해서 말씀해주세요 lazy loading ◦ 답변 1. 초기 구동 속도 ▪ 원인 모든 정적파일을 초기에 받기 때문에 발생 ▪ 해결1 lazy Loading을 통해, 첫 화면에 필요한 파일들만 먼저 다운로드 해결2 스켈레톤 UI 등을 통한 최소 사용성 확보 2. 검색엔진 최적화(SEO) ▪ 원인 페이지의 meta태그 정보를 검색 엔진이 확인할 수 없다. ▪ 해결1 크롬 브라우저 자체 검색엔진 에서 처리하도록 함. ▪ 해결2 SSR방식의 혼합 3. 보안 ▪ 원인 js 핵심 로직이 노출될 수 있다는 점 ▪ 해결 client에서 핵심로직을 최소화하고, server에서 핵심로직 다루는 것 출처 https://m.mkexdev.net/374 • [x] 4 SEO(검색 엔진 최적화)는 무엇인가요? ◦ 답변

웹 브라우저에 URL 입력시 렌더링 전 까지의 과정에 대한 설명

답변

• 브라우저 이벤트감지 ⇒ DNS (도메인→IP) ⇒ ARP( IP ⇒ MAC) ⇒ TCP (3way)

브라우저에 URL을 입력하면 발생하는 일

브라우저 렌더링 과정 설명

 

3-2. 이력서의 역량/프로젝트 기반 질문

• 특정 프로젝트에 기여한 내용
각 프로젝트에서 가장 어려웠던 부분 혹은 고민이 있다면?
• Naver 인턴
프로젝트 설계는 어떻게 진행하셨나요?
힌트
• 과제분석 > 스택선정
• 컴포넌트 구조 설계 (Header, Overview, Widget)
• interface 설계
[프로젝트 기여 내용]
답변
1. Lighthouse 기반 성능 개선
• bundle 사이즈 감소
• 번들애널라이저는 무엇이냐
상세
로딩시간을 줄이기 위해 시도 0) webpack-bundle-analyzer를 통해 현재 bundle 분석 1) webpack mode=production으로 설정하여 최적화 2) lodash에서 사용하는 함수만을 import 하도록 하는 트리쉐이킹 3) moment 라이브러리를 dayjs로 대체 결과 총 3.98MB ⇒ 1.62MB로 감소 TBT 시간이 감소함
• CLS 지표 개선
상세
CLS지표는 컨텐츠가 변화하여 얼마나 불안정한가를 나타내는 지표 [문제] 차트를 로딩하는 동안 높이를 부여하지 못함 [해결] - chart.js 라이브러리 문서에서 canvas요소가 2:1 의 비율을 가짐을 확인 - 너비는 알고 있기 때문에 이를 통해 미리 wrapper 컴포넌트에 높이를 지정해준다. - Wrapper: width:100% , position: relative , padding-bottom: 50% [결과] CLS = 0 으로 ≤ 0.1 이 되어 좋은 평가
• 리렌더링 최적화
상세
문제] 하나의 차트가 변화가 발생하여도, 병렬적인 다른 모든 차트가 리렌더링 되는 현상 [원인] - 부모컴포넌트의 state가 바뀌면서 모두 리렌더링 [해결] - React.memo는 props가 같다면 리렌더링 되는 것을 방지 [추가] - useCalback : 부모컴포넌트가 리렌더링 되며 하위컴포넌트로 보내는 props가 재생성 되는데, props는 얕은 비교를 하기 때문에 동일참조값이어도 새로운 값으로 판단하고 리렌더링 발생 useCallback을 통해, memoization된 함수 전달 - 함수형업데이트 : useCallback의 의존성 배열로 인하여, 부모 state가 변할 때 props함수가 재정의 : setState() 첫번째 인자를 통한 함수형 업데이트 사용하여 의존성배열 제거
• 디바운스는 무엇이냐
2. 실제 데이터 기반 개선 액션 useCase 3가지 제시
• 더 shallow 한 타겟을 찾아 집중 광고 집행 원할 때
• 특정 타겟에 대하여 잘 나가는 소재를 찾기를 원할 때
 
• 개선액션 지표는 클릭률과 전환률로 설정
[가장 어려웠던 부분과 해결과정]
답변
• 도움이 되는 리포트 만들기
• 기획팀과의 회의 ⇒ 단순 위젯 보여주는 것으로는 개선액션 이끌어내기 어려움
 
• 개발적인 부분
• 구현능력 자체가 부족했었다
• chart.js 문서를 읽고, 필요한 기능 개발을 위해 주어진 인터페이스, API를 통해 드릴다운 필터링, 비교기능
• 라이브러리 사용의 장단점을 알게 되었다.
• 최적화 부분은 하나씩 원인을 찾아가며 해봤던 점이 흥미로웠고 재미있었다.
그래프는 어떤 라이브러리를 왜 사용했나요?
canvas와 svg 차이에 대해 아시나요?
답변
• svg는 선언적
• html 코드로 어떻게 그릴지 작성
• 벡터로 해상도에 따라 깨지지 않음
• 내부 css 동작
• canvas는 드로잉 API
• js를 통해 어떻게 그려야할지 명령형으로 작성
동양농산 프로젝트
[프로젝트 수행 내용]
답변
• 아버지가 운영하는 식자재마트 홈페이지 개발
• JAMStack 적용하기 (Next + Strapi)
JAM Stack 이란?
답변
JAMStack은 ‘preBuiltPage’와 ‘재사용가능한 API’ 를 통해 서버 없이 배포 및 운영되는 모던 웹 개발 구조 이다.
프로젝트 설계는 어떻게 진행했나요?
Next.js 를 사용한 이유가 있나요?
SEO를 위한 메타태그 지정은 어떻게 해주었나요?
 
[가장 어려웠던 부분과 해결과정]
Headless한 데이터 컴포넌트 개발
합성컴포넌트 패턴을 통한 Select 컴포넌트 개발
CheQuiz
[프로젝트 기여 내용]
• 퀴즈세트 생성 Form 구현
제어/비제어
성원님이 잘 설명해주셨는데요, 제어/비제어 방식이 갖는 장, 단점도 고려하셔야 합니다. 제어 방식의 경우 컴포넌트 state로 관리하고 항상 동기화가 이루어지기 때문에 복잡한 요구사항이 생기더라도 처리가 좀 더 쉬워집니다. 단점은 '동기화'에 대한 비용입니다. 만약 50개의 input이 있고 그걸 모두 제어 컴포넌트로 관리한다고 하면, 1글자만 쳐도 50개의 input이 모두 렌더링이 됩니다. 이런 경우에 useMemo 같은 별도의 최적화 작업이 필요해지며, 만약 form이 엄청 복잡한 구조(Array안에 Object안에 Array...)를 갖는 경우 골치가 더욱 아파집니다. 최근에 react-hook-form 라이브러리가 인기를 얻는 것도 이런 form 상태 관리를 성능 영향 없이 쉽게 처리할 수 있도록 구현한 덕분입니다.
비제어 방식의 경우 이벤트 핸들러(onChange, onBlur 등)로만 처리하기 때문에 제어 방식의 단점이 가진 "동기화 비용"이 0 입니다. 단점은 상태 동기화가 불가능하기 때문에 특정 요구사항 구현(ex: 다른 컴포넌트의 상태가 바뀌었을 때 해당 컴포넌트의 상태를 변경)이 어렵습니다. 실제로 서비스를 만들다 보면 다른 컴포넌트의 state에 의존하는 경우가 많아서 제어 방식으로 구현해야 하는 경우가 많이 생깁니다.
react-hook-form 라이브러리의 경우 특이하게 비제어 방식을 사용하되, state가 아닌 ref를 사용해서 컴포넌트를 제어합니다. 제어 컴포넌트의 단점인 성능 이슈를 다른 방법으로 해결한 것이죠. ref를 input에 매핑해서 처리하면 브라우저 화면의 DOM을 직접 수정하기 때문에 다른 React 컴포넌트에 불필요한 리렌더링이 일어나지 않는 장점이 있습니다. 뿐만 아니라 에러 처리, 써드파티 라이브러리와의 연동, 에러 발생 시 해당 input 자동 포커스 기능 등 흔히 개발자들이 맞닥뜨리는 케이스들을 구현해놓아서 도입을 고려해보시는것을 추천드립니다.
• 협업문화 기여 (뱅크샐러드 사례)
[가장 어려웠던 부분과 해결과정]
• 코드의 추상화 진행하던 부분
• validation 처리를 위한 hook을 만들고
홍개팅
[프로젝트 기여 내용]
[가장 어려웠던 부분과 해결과정]

• 프로젝트 + 디자인시스템
• 프로젝트에서 디자인시스템 관련 코드 작성 경험은 있는지?

3-3. 플랩풋볼 JD 기준 질문

import { jsx, css } from '@emotion/core';

type ButtonProps = {
  /** 버튼 안의 내용 */
  children: React.ReactNode;
  /** 클릭했을 때 호출할 함수 */
  onClick?: (e?: React.MouseEvent<HTMLButtonElement>) => void;
  /** 버튼의 생김새를 설정합니다. */
  theme: 'primary' | 'secondary' | 'tertiary';
  /** 버튼의 크기를 설정합니다 */
  size: 'small' | 'medium' | 'big';
  /** 버튼을 비활성화 시킵니다. */
  disabled?: boolean;
  /** 버튼의 너비를 임의로 설정합니다. */
  width?: string | number;
};

/** `Button` 컴포넌트는 어떠한 작업을 트리거 할 때 사용합니다.  */
const Button = ({
  children,
  theme,
  size,
  disabled,
  width,
  onClick
}: ButtonProps) => {
  return (
    <button
      css={[style, themes[theme], sizes[size], { width }]}
      disabled={disabled}
      onClick={onClick}
    >
      {children}
    </button>
  );
};

const style = css`
  ...
  &:focus {
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
  }
  &:disabled {
    cursor: not-allowed;
  }
`;

const themes = {
  primary: css`
    background: #20c997;
    color: white;
    &:hover:enabled {
      background: #38d9a9;
    }
    &:active:enabled {
      background: #12b886;
    }
    &:disabled {
      background: #aed9cc;
    }
  `,
  secondary: css`
    background: #e9ecef;
    color: #343a40;
    &:hover:enabled {
      background: #f1f3f5;
    }
    &:active:enabled {
      background: #dee2e6;
    }
    &:disabled {
      color: #c6d3e1;
    }
  `,
  tertiary: css`
    background: none;
    color: #20c997;
    &:hover:enabled {
      background: #e6fcf5;
    }
    &:active:enabled {
      background: #c3fae8;
    }
    &:disabled {
      color: #bcd9d0;
    }
  `
};

const sizes = {
  ...
};

export default Button;

• 아키텍쳐를 구성하는 것에 있어서 본인의 철학이 있다면?
• 관심사에 따른 분리 / 단일책임의 컴포넌트
• 확장성을 고려하되(외부 제어 위임), 재사용성이 있는 코드
• 확장성과 사용용이성(가독성) 간의 trade-off

• MVC 시스템에 대해서 아는 것이 있나요?

• 프로젝트 세팅과 관련해서 프로세스를 알고 있나요? (webpack, babel)

• 마이그레이션 경험이 있나요?

4. 플랩에게 궁금한 점

• 플랩풋볼에서는 어떻게 일을 하고 있는지 궁금
• ✅ 코드리뷰, 작업의 할당 어떻게 이루어지는지, 페어 프로그래밍
• ✅ 다른 직무와의 협업은 어떻게 이루어는지
• ✅ 하나의 새로운 기능이 출시 될 때, 기획/개발 간의 어느정도 협의/협업이 이루어지는지
• 구성원들이 어떤 비전을 얼마나 같이 공유하고 있는지
 

• 현재 개발팀에서 집중하고 있는 분야가 궁금
• ✅ 최적화, 데이터 기반 서비스 구축, 스카우터/챌린지 등 신규기능
• ✅ 제가 입사하게 된다면 맡게되는 업무가 플랩풋볼 리뉴얼 프로젝트가 맞는지?
• ✅ 플랩 리뉴얼 프로젝트 간단 소개 요청

• 개발 조직에서는 목표/성과를 어떻게 정의하며, 평가는 어떻게 이루어지나요?

• 플랩풋볼에서 일하게 된다면 해보고 싶은 일
• 확실히 페이지 전환 시 속도가 떨어지는 것 같다.
• 이러한 부분 이전 경험을 바탕으로 최적화 해보고 싶다.

• 1) 플랩풋볼에서 만들어 가고자 하는 개발문화에 대해 알고 싶다.
• 주기적인 책/주제 스터디
• 코드리뷰의 방식
• 작은PR 룰, 리뷰를 위한 공통시간 할애,
• 뱅크샐러드의 테크스펙
• 1Pager는 요약, 목표, 목표가 아닌 것, 계획, 마일스톤
 
2)개인의 성장 - 팀의 성장 - 회사의 성장이 맞춰지는 것이 이상적 개인의 성장을 이끌어내기 위한 플랩의 지원이 있는지
• 개발스터디 지원
• 업무 수행 평과 기준과 보상?
3) 정보의 공유성이 어느정도 인지
• 백엔드 레포 / 다른 서비스 레포 권한
• 사용자 데이터 / 통계에 대한 접근 가능 여부