내가 cto 라면 어떤 질문을 하고 싶을까?

면접관은 면접에 임하기에 앞서 자신만의 모델을 세워두고 들어오지 않을까? 내가 면접관이라면 어떤 사람을 뽑고 싶을까 고민해보고 역지사지해보기 위해 글을 써보면서 내 생각을 기록해보자. 

1. 지원자의 방향성

[ 왜 스타트업인가? ] 

첫 째로, 지원자의 방향성을 궁금할 것 같다. 사람은 쉽게 바뀌지 않고 내적동기는 바꿀 수 없다. 지원자의 방향을 알고 회사의 방향과 비교해 적합한 자원을 찾으려고 노력하는게 서로가 윈윈이라고 판단할 것 같다.

그렇다면 반대로 내가 면접자라면 준비해야할 부분이 있다. 나의 방향이 어디인지 스스로 정확하게 인지하는 것이다. 나는  IT산업에 종사하면서 회사가 사회에서 어떻게 자리잡는지 내 두눈으로 직접보고 싶다. 기술이 어떤식으로 회사매출의 기여하는지 장기적으로 사람관리를 어떻게 해야하는지 내가 시장경제에 최전선에서 활동할만한 깜냥이 있는지 궁금하다. 스타트업은 야생에 뛰어들고 경쟁하는 집단이다. 나의 방향과 결이 맞는 스타트업에서 일을 해보고 싶다. 

 

[ 어떤 도메인의 문제를 해결해보고 싶어? ] 

경제, 심리 부분을 공부하는 것을 좋아합니다. 사람들의 행동을 예측하고 그 행동을 편하게 하거나 이용하거나? 하는 과정을 즐깁니다. 그래서 b2c 사업을 진행하는 스타트업, 핀테크등의 회사를 지원하고 있습니다. 현재로서는 ui/ux를 만들 수 있는 b2c 사업을 할 수 있는 산업군에서 일해보고 싶은 생각이 큽니다.

 

 

[ 학습동기가 뭐고 요즘 뭐 공부하지? ] 

요즘은 같은 시간안에 디테일까지 신경쓴 결과물을 내기위해서는 어떤 과정으로 공부하는 과정을 거쳐야하는가에 대해 고민이 많습니다. 얼마전 과제테스트를 진행하면서 이벤트 버블링문제를 해결하지못해 멘탈이 나간적이 있었는데요. 그 이후 한참고민하면서 느낀점은 나만의 공부 프로세스를 좀 더 업그레이드 해야한다는 점이었습니다.

 현재는 mui 오픈소스를 다운받아서 뜯어보면서 '컴포넌트를 만든다'함은 무엇인가에 대해서 공부를 하고 있습니다. 또, '바퀴를 만들지 말라'는 격언이 있는데 그 격언을 일을하면서 적용시키기 위해서 어떻게 공부를 진행해야하는지 고민중에 있습니다. 

 

[ 코딩을 시작한 내적동기 ] 

 둘 째로, 왜 코딩을 시작했는지 궁금할 것 같다. 난 아직 취업도 못해보고 제대로된 프로젝트를 해보지도 못했다. 하지만 하나 확실히 알 수 있는점은 있다. 코딩은 엄청나게 힘든 작업이다. 사실, 코딩을 시장에서 인정받을 정도의 실력을 갖추기 위해서 지속한 노력을 다른 분야에서 한다면 뭘 해도 성공할 수 있다고 생각한다. CTO 입장에서 내면 깊숙한 부분에서 타성에 젖어 살아온 사람인지 아닌지 궁금하지 않을까? 시스템속에서 안전하게 살던 사람을 야생에 던지기에는 부담스럽지 않을까?

 

사실 이 부분에 관해서는 나도 고민이 많았다. 그저 남말듣기가 싫어서 다른분야로 계속 가보려고 해본거 아닐까? 라는 자기의심이 들기 때문이다. 하지만 코딩은 좀 달랐던 것 같다. 일차적으로 더럽게 어려웠어서 내 단점을 고치지 않고서는 진행할 수 없는 점이 마음에 들었다. 이전 세무사 시험을 준비하면서 부족했던 점, 사람관계에서 부족했던 점, 문해력이 부족했던 점등 살아가면서 다른사람에게 폐를 끼치지 않기 위해서 배워야할 필수적인 부분이 부족하다고 컴퓨터는 매일 피드백을 전달했다. 물론, 공부를 하면서 고통스럽지만 조금씩 바뀌어가는 과정을 볼 때 이 길을 선택한 것을 후회하지 않을 것 같다. 요약하면, 나의 부족한 부분을 피드백해주는 컴퓨터를 이용한 이 직업이 마음에 든다는 것이다.

 

2. 당신이 사용한 프로젝트가 진행됐던 과정을 설명해주세요 

[ 현 프로젝트에서 이 기술스택이 필요했던 이유 ]

 

- Next

현 프로젝트는 크게 페이지가 두 개로 나뉩니다. 모든 사용자에게 차트정보를 보여주는 메인페이지, 개인에게 특화된 대시보드 페이지 Next를 활용해서 페이지를 나눠서 모든 사용자에게 같은 페이지의 경우 ssg 방식을, 개인에게 특화된 페이지는 ssr을 이용해서 기존 csr로 인한 초기페이지 반응성이 느려지는 현상을 줄여볼 수 있지 않을까해서 선택했습니다. 

 

- D3.js

가장 커스터마이징 할 수 있는 라이브러리를 고르고 싶었습니다. 처음에 목표는 여러가지 차트를 비교해보면서 보여주고 싶었기 떄문입니다. 하지만 진행을 하면서 굳이 chart.js나 리액트 차트같은 라이브러리를 안쓸 이유는 없지 않았나 고민해보게 됐습니다. 너무 커스터마이징을 해야해서요..

 

- Styled-component & Module.scss

사실 처음 프로젝트를 시작했을 때 스타일링 부분은 scss를 사용하면 되겠지 하고 기본적으로 제공하는 module.scss를 사용했습니다. 하지만 계속 프로젝트가 진행되면서 컴포넌트 분리를 계속해야하고 scss파일을 분리해서 관리하는게 생각보다 고민할거리가 많다는 것을 느꼇습니다. tailwind도 있고 스타일드 컴포넌트도 있긴했는데 scss로 작성한 코드가 많아서 스타일드 컴포넌트로 바꿔서 조금씩 진행하는게 현명하다고 판단해 선택했습니다.

 

- React-query

이전 프로젝트 기업소개홈페이지를 제작하면서 이상하다 느낀점이 있었습니다. 서버에서 데이터를 불러오고 이를 전역데이터처럼 사용하기 위해서 App.tsx에서 useEffect를 통해 redux에 저장하는 과정이었습니다. 전역상태가 이렇게 관리할게 많아지는게 좋은건가? 싶던 와중에 국비학원을 다니는 중에 react-query를 쓰는 분을 봤고 서버상태와 클라이언트 상태를 분리해서 관리하고 캐싱등의 기능을 제공해주는 react-query라이브러리가 있다는 것을 알게됐고 적용해보게 되는 계기가 됐습니다. 이를 통해 상태를 그저 렌더링의 트리거 역할로만 보는 것이 아니라 서버상태 클라이언트 상태로 분리해서 생각해 좀 더 복잡함을 줄일 수 있는 계기가 됐습니다.

 

3. 기본지식이 있나? 

난 프론트엔드 개발자로 지원했다. 브라우저에서 일어나는 상황을 만나보고 해결한 경험이 있는지 정확히 이해하고 처리하는지 궁금할 것 같다. 또, 자주 쓰이는 JS문법과 TS문법을 이해하고 있는지 질문할 것 같다. 

 

[ 스코핑을 이해하고 기본 훅들을 이해하려고 시도해봤어? ]

- 클로저에 관해서 아는대로 설명해주세요. 

=> 함수안에 함수를 의미합니다. 정적스코핑을 채택한 자바스크립트와 일급객체를 사용하는 환경에서 런타임동안 클로저 외부함수의 변수에 접근할 수 있는 함수라는 특징을 지닙니다. 

 

[ 코드를 읽고 이해할 수 있어? ]

- 비동기와 동기에 관해서 설명해주세요. 

=> 비동기는 다른일부터 처리하는 방식을 말합니다. 일의 순서가 있을 때 경중을 따지지 않고 순서대로 처리하는 환경을 동기적으로 처리한다고 말하며 작업중에 무거운작업같은 것을 나중에 처리하는 방식을 비동기 방식이라고 합니다. 

 

- Promise, async/await에 관해서 설명해주세요.

 promise는 자바스크립트에서 비동기로 실행되는 로직들을 제어할 수 있도록 제공되는 객체를 말합니다. 생성자함수를 호출하면서 resolve, reject가 인자로 제공되는 콜백함수를 전달하고 바디에 비동기로직을 담아서 처리합니다. 비동기로직을 3가지 상태로 관리할 수 있는 기능을 제공하고 그 이후 then, catch, finally등의 문법을 이용해 처리합니다.

 

- async/await에 관해서 설명해주세요.

Promise를 반환하는 함수를 선언단계에서 구별할 수 있도록 제공하는 문법입니다. Promise에서 then을 통해 비동기로직을 제어하는 방식을 좀 더 직관적인 코드구조로 만들 수 있게 도와주는 문법입니다. await는 async함수에서 비동기함수 앞에 붙일 수 있는 키워드인데요. 이 키워드를 붙이면 비동기로직을 기다려줘서 async함수로직이 동기적으로 동작하도록 제어할 수 있게 합니다.

 

- 호이스팅은 뭔가요? (undefined가 할당되냐 에러를 발생시키냐에 문제임)

호이스팅이란 변수의 값 또는 선언이 스크포의 시작지점으로 이동하는 현상을 말합니다. 이는 선언전 접근이 헷갈리는 문제를 야기합니다. 호이스팅이 일어나면 변수가 선언된 부분전에서도 참조하여 사용할 수 있는 현상이 발생합니다. var 같은 경우는 undefined가 할당되기 때문에 런타임도중에 에러가 발생하지 않습니다. 반면 let과 const는 값이 할당되지 않기에 reference error를 발생시킵니다. 

 

- tdz존은 무엇인가요? (let/const로 선언한 변수의 reference error가 발생하는 구역을 말한다.)

let과 const의 경우 선언을 한 후 값을 할당하지 않아 스코프 최상단에서 코드가 선언된 부분까지는 값이 없는 상태입니다. 이 지역을 tdz이라고 설명합니다.

 

[ 자주 만나볼 일도 없고 어려워서 하기싫은텐데 공부해봤어?  ]

- this에 관해서 설명해주세요. 

this는 함수가 호출되는 시점에 자신을 호출한 객체를 가리키는 키워드입니다. 이벤트핸들러나 객체의 메소드를 일반함수로 지정하면 자신을 호출한 객체를 선택하도록 만들 수 있어 사용해본 경험이 있습니다. 

 

- 화살표함수를 메소드로 지정했을때와 일반함수를 메소드로 지정했을 때 뭐가 다르죠?

이 부분은 솔직히 이해가 안되는 부분이 있어 공부중에 있습니다. 현재까지 아는 것을 설명드리면 this는 일반함수의 경우 자신을 호출한 객체를 가리키고 화살표함수는 자신이 속한 렉시컬스코프의 this를 할당받는 점입니다. 그래서 일반함수 내부에 함수를 선언할 때 화살표 함수를 선언하여 일반함수의 this를 사용하게 하여 이벤트핸들러에서 객체의 메소드를 사용하는 경우에 this로 인한 문제를 사전에 방지할 수 있다 정도로 알고 있습니다.

 

[ 라이브러리 그냥쓴건가? ]

- 리액트 훅이 뭐죠? 

기존 클래스 컴포넌트에서 사용되던 로직을 좀 더 사용하기 쉽게 사용할 수 있도록 리액트에서 제공한 함수라고 보면 됩니다. 함수를 이용한 컴포넌트를 제작할 때 자주사용되어집니다.

 

- 리액트 생명주기가 뭐죠?

컴포넌트가 생성되고 소멸되는 일련의 과정을 말합니다. 크게 마운트-업데이트-언마운트로 이뤄집니다. 

 

- useState에 관해서 설명해주세요.

useState란 리액트 훅 중 하나로서 컴포넌트가 사용할 state와 그 state를 불변성있게 다뤄줄 수 있는 모디파이 함수를 제공하는 훅입니다.

 

- useEffect를 설명해주세요.

컴포넌트가 마운트 된 후, 업데이트 된후에 일어날 사이드 이펙트를 제어하는 훅입니다. 2번쨰 인자로 의존성배열을 작성해 어떤 값의 변화가 사이드 이펙트를 trigger하는지 적어 컴포넌트의 사이드 이펙트를 제어합니다. 또, return 부분에서 컴포넌트가 언마운트될 때 처리해야할 로직을 작성할 수 있습니다. (가령, removeEvenetListener 등을 제어합니다.)

 

- useState와 useRef의 차이점과 언제쓰이는지 아는대로 설명해주세요.

useState는 컴포넌트의 렌더링을 제어하는 변수를 선언할 때 사용합니다. useRef는 컴포넌트에서 렌더링에 영향을 끼치지 않고 라이프사이클동안 유지될 변수를 선언할 때 사용합니다.

 

- 사이드 이펙트가 뭐죠? 

사이드 이펙트란 실행되기전에 결과 값을 100% 예측할 수 없는 로직을 말합니다. 가령, 네트워크 요청, 파일입출력등을 의미하겠습니다.

 

[ 리액트라는 시스템을 이해해보려고 노력해봤어? 라이브러리 그냥 쓴건가 질문 ]
- 리액트에서 불변성을 중요하게 여기는 이유가 뭔가요?

불변성이란 값을 변경할 때 새로운 값으로 대체하는 방법을 말하는데요. 리액트가 상태변화를 감지할 때 주소의 변경만으로 감지하는 것이 값의 변경과 비교했을 때 효율적이기 때문에 시스템의 안정성을 위해서 불변성을 지켜서 값을 변경시킵니다.

 

[ 너가 만들고 있는 애플리케이션이 돌아가는 곳에 관해서 최소한의 이해를 해봤어? ]

- 렌더링과정에 대해서 아시는게 있을까요?

렌더링 과정이란 서버로부터 또는 클라이언트 컴포넌트로 부터 생성된 html, css, js파일을 화면에 그려주는 과정을 말하는데요. 

 

- localStorage, sessionStorage, cookie 의 차이점이 뭔가요?

1. localStorage

브라우저가 데이터를 저장할 수 있도록 제공하는 저장소인데요. localStorage는 브라우저 애플리케이션에 직접 저장하기 때문에 컴퓨터가 꺼져도 삭제되지 않고 다른 브라우저 창에서도 접근이 가능합니다. 도메인별로 5mb의 크기를 사용할 수 있습니. 

 

2. sessionStorage

sessionStorage란 브라우저의 탭이 실행될 동안만 저장할 수 있도록 제공되는 저장소인데요. 동일한 탭에서만 접근할 수 있는 특징을 갖습니다. 만약 같은 도메인이어도 탭이 다르다면 접근할 수 없습니다.

 

3. cookie

cookie는 서버와 통신할 때 http 통신으로 state가 없는 부분을 보완하기 위해 사용하는 객체입니다. 서버와 통신할 때 자동으로 전송되는 특징을 갖고있습니다. http-only를 통해 사용자 스크립트로 접근하는 것을 막을 수 있고 secure 속성을 통해 https환경에서만 접근하도록 제어할 수 있습니다.

 

[ 해봤다면 알만한건데 설명해보시죠 ]

- cors가 뭔가요?

cross origin resource sharing의 웹 애플리케이션이 다른 도메인의 서버자원을 요청할 때 사용되는 정책입니다. 웹 어플리케이션의 출처(서버)가 허락하지 않는 서버에게 자원을 요청하면 브라우저에서 에러를 발생시킵니다. 이 에러를 해결하기 위해서는 서버에서 http 헤더 중 Access-Control-Allow-Origin헤더에 도메인을 포함시켜야 합니다.

 

[ 좀 더 깊게생각해보는 사람인가? ]

- rest API란 뭘까요?

웹 상에서 api를 호출하는 방식을 통일한 규칙입니다. http 메소드와 도메인, 서버자원의 경로가 하나의 문장처럼 표현되도록 api를 작성하는 것을 목표로 합니다.

 

- get과 post의 차이를 알려주실래요?

서버에서 자원을 요청할때는 get, 서버에게 자원을 전송할 대는 post를 사용합니다. 

 

- 렌더링 과정에 관해서 설명해주실래요? 

서버에서 html,css,js를 받습니다. html과 css를 각각 파싱해서 dom tree, cssom tree를 제작합니다. 이후 Layout단계를 거치며 화면에 보여줄 부분을 나타내는 렌더트리를 만들고 렌더트리에서 페인팅을 진행해 화면을 보여줍니다. 

 

- reflow, repainting에 관해서 설명해주세요.

리플로우란 렌더트리를 다시 작성하는 과정을 말하는데요. css의 width나 height가 동적으로 변경되거나 js로 인해서 dom요소가 추가되는 과정에서 렌더트리를 다시작성하는 상황이 발생합니다. 이를 reflow라고 하며 render트리를 변경하면서 painting과정 또한 다시 거치는데 이를 repainting이라고 합니다.

 

[ 왜 Next를 써본거지? ]

- ssg/ssr/csr 방식을 설명해주실래요? 

ssg란 정적사이트생성방식을 말합니다. 서버쪽에서 html파일을 빌드타임때 미리 만들어두고 렌더링하는 방식을 말합니다. ssr은 클라이언트가 요청할 때 서버에서 동적으로 html파일을 렌더링하여 전달해주는 방식을 말합니다. csr은 서버에 요청하지 않고 브라우저에 설치된 웹 애플리케이션에서 동적으로 화면을 렌더링하는 것을 말합니다.

 

- spa란 뭔가요? 

싱글페이지 어플리케이션을 뜻합니다. 하나의 html 페이지에서 js를 통해서 동적으로 화면을 렌더링하고 관리하는 방식을 말합니다.

 

4. 이력서에 기재된 내용 물어보기

[ aws를 써서 배포해보고 백엔드 api를 개발해봤다고 하는데 왜 그렇게 한거지? 그리고 어떻게 진행한거죠? ]

백엔드 개발자분이 현업에서 일을 하시는 분이었습니다. 야근이 자주 생기는 시즌이어서 일단 배포를 해보면서 수정해가며 프로젝트를 진행해보고 싶어서 배포를 해야겠다고 생각했습니다. aws는 가장 대중적인 시스템이어서 내가 모르는 분야에 정보가 많을 거라고 판단해서 선택했습니다. route 53을 통해서 https 통신이 가능한 domain을 발급받았고 pm2를 활용해 무중단 배포상태를 만들어 사용중에 있습니다. 아직 ci/cd 작업은 진행해보지 못했습니다. 

 

[ convention에 관해서 언급하셨고 타입스크립트를 그 예시로 들었는데 왜 이게 좋은 코드죠? ]

타입스크립트를 쓰는 근본적인 이유는 애플리케이션에서 돌아다니는? 데이터의 유형을 지정해 런타임단계에서 타입에러를 통해 시스템에 장애가 나는것을 방지하기 위함이라고 생각합니다. 또, 코드를 작성하는단계에서 데이터의 유형을 정확히 파악하고 데이터에 기반해 컴포넌트를 정확하게 작성할 수 있다고 생각하기 때문입니다.

 제가 작성한 이력서는 2번째 이유에 좀 포커싱이 됐습니다. 저는 좋은 타입이란 type의 이름을 명확하게 정해 가독성을 높이는 거고 데이터간의 종속성등이 있다면 이를 표현해주는게 중요하다고 생각했습니다. 또, 데이터를 사용하는 사용자가 컴포넌트라고 생각해서 컴포넌트의 타입은 interface로 지정했고 나머지 부분은 util (omit, pick)등의 기능을 활용해보며 type을 통해 표현하고자 했습니다.