SurveyMonkey 개발자가 알려준 React, Frontend 코딩 테스트 비결

친구 중에 글로벌 설문조사 소프트웨어 기업에 다니고 있는 개발자가 있다. 

이 친구가 새로 뽑을 신입의 기술면접과 코딩 테스트를 본다고 나한테 코딩 테스트하기 전에 테스트 해보고 싶다고 하여 친구의 코딩 테스트에 응해줬다.

 

실시한 코딩 테스트 조건은 이렇다.

1. React 프론트엔드 개발자이니 React를 사용한다.

2. Todo list app을 만들어 볼 것인데 다음의 주소의 api를 사용한다.  https://documenter.getpostman.com/view/8858534/SW7dX7JG

3. 40분 이내로 끝낸다.

4. 로그인, 회원가입부터 시작.

 

Todo list야 리액트를 배우는 데에 있어서 기초적인 프로젝트이면서도 웹 개발에 있어서 핵심적인 기능을 대부분 포함을하고 있다. 그리고 지금의 나한테는 쉬운 개발에 속하긴 하는데 시간이 40분이라서 당황스러웠다. 이미 컴포넌트가 생성되어 있고 연결하거나 버그 수정하는것도 아니고 40분 만에 로그인 회원가입을 포함한 Todo list를 어떻게 만들까 싶었다.

 

우선 평소 개발하는 데로 UI부터 먼저 만들기 시작했다. 아래의 코드를 만드는 데 30분 정도 쓴 것 같았다.

import React, {ChangeEvent, useState} from 'react';
import './App.css';

function App() {
  const [state, setState] = useState({
    step: 0,
    name: "",
  });

  const goLogin = () => {
    setState(s => ({...s, step: 1}));
  }

  const goSignUp = () => {
    setState(s => ({...s, step: 2}))
  }

  const goHome = () => {
    setState(s => ({...s, step: 0}))
  }
  const handleInput = (e: ChangeEvent<HTMLInputElement>) => {
    console.log(e.target.value);
    setState(s=>({...s, name: e.target.value}))
  }

  return (
    <div className="App">
      {state.step === 0 && (
        <>
          <button onClick={goLogin}>Login</button>
          <button onClick={goSignUp}>SignUp</button>
        </>
      )}

      {/* Login */}
      {state.step === 1 &&
      (<>
          <button onClick={goHome}>back</button>
          <div>
            ID:
            <input type="text"/>
          </div>
          <div>
            PW:
            <input type="text"/>
          </div>
        </>
      )}

      {/*// SignUp*/}
      {
        state.step === 2 && (
          <>
            <button onClick={goHome}>back</button>
            <div>name <input name="name" value={state.name} type="text" onChange={handleInput}/></div>
            <div>name <input type="text"/></div>
            <div>name <input type="text"/></div>
          </>
        )
      }
    </div>
  )
}

export default App;

 

우선 UI만 만들다가 시간이 지나버렸는데 이것이 내가 한 실수다.

 

로그인 회원가입이 포함되어 있는 Todo list를 만드는데 그 누가 40분 만에 만들까? 이미 만들어진 소스코드를 그데로 보고 따라서 타이핑 쳐도 40분을 넘길 것이다.

 

요점은 주어진 40분 이내에 내가 얼마나 많은 것들을 할 수 있는지 보여주는 것이었다. 내가 보여준 것은 고작 UI 만드는 데에 그친다.

하지만 이미 api가 다 만들어져 있는 주소가 있는데 그것부터 활용을 해서 Http Client 통신을 했더라면 아마 이 코딩 테스트에서 합격했지 않을까 싶다. 

 

다음은 axios를 통해서 통신한 코드이다. 먼저 회원가입과 로그인 api 메서드부터 먼저 만들고 시작했다면 나는 UI뿐만 아니라 통신까지 하는데 문제가 없다고 보여줄 수 있었을 것이다. 아 물론 api를 CRUD Class로 만들어서 보여줬으면 더 정돈된 코드를 보여줄 수 있지 않을까 싶기도 하다.

 

혹시나 프론트엔드 개발자로 이직이나 취업을 할때 코딩 테스트를 하는데 이미 만들어져있는 api를 활용하라고 되어 있으면 먼저 axios를 쓰던 fetch를 쓰던 먼저 Rest api 연동부터 먼저 보여주고 UI를 만들도록하자.