코딩 과제 1시간, 회원가입 폼 구현하기

김민아·2023년 7월 9일

오늘 본 면접에서 1시간 동안 회원가입 페이지를 구현하는 과제 테스트를 받았다. CRA 환경과 Figma 디자인이 주어졌고 onChange시 유효성 검사 조건, input, select, button 요소가 있었다.

결과적으로 보면, 구현의 10%도 하지 못한 것 같다. 나름 분석을 해 보자면 준비가 미흡했던 것, 시간 배분을 잘하지 못한 것, 스니핏이나 프로젝트 베이스의 사용이 익숙해 제로베이스부터 구현하는 훈련이 안되었던 것 등이 현장에서 여과없이 드러났던 것 같다. 덤으로 OS 환경이 달라서 시간이 지체되었다.

그리고 테스트 환경에서 인터넷을 사용할 수 있었지만 (예를 들면 정규식 등) 심리적으로 우왕좌왕하기 바빴던 것 같다. 곧 실력 부족이었다고 생각한다.

어짜피 면접은 끝났고, 어떤 부분에서 취약한지 무엇이 필요한지 알았으니 개선하는 것이 중요하다!

그래서 다시 1시간 동안 같은 조건으로 진행해 보았다. 무엇보다 중요한 건 시간 내에 구현과 왜 그렇게 했는지 코드를 리뷰할 수 있어야 한다. (모범 답안은 아니지만 이 과정 자체를 봐주시면 좋을 것 같다.)

구현 (1시간 제한)

계획 세우기(1~2분)

주의사항과 조건을 확인한다.
- 이름, 회사명, 이메일(text), 유입경로(select), 관심분야(multi check) 항목
디자인 파일을 확인하고 공통 스타일과 구조를 구상한다.
재사용할 컴포넌트를 확인하고 상태관리와 props 계획을 세운다.
어떤 함수가 필요한지, 어떤 이벤트에 걸어야 하는지 등

컴포넌트 구조

생각해보면, 계획을 세우는 것이 너무 중요하다. 중간에 구조를 바꾸는 것은 심리적으로 부담이 크다. Signup 페이지와 Input, Button, Select 컴포넌트를 생성하고 연결했다.

 app
 ㄴ page
 	ㄴ Signup
 ㄴ components
 	ㄴ signup
    	ㄴ Input
        ㄴ Button
        ㄴ Select

스타일링

주어진 Figma의 스타일을 참조하여 작성한다. 우선 반응형웹 조건이 없다면 PC 기준으로 작성한다. 시간이 남으면(?) 모바일에 대응할 수 있도록 고려하는 것도 좋다. 시간적 압박 때문에 css를 컴포넌트와 함께 분리하지 못하고 global css에 작성했다.

Hooks

// Field Values
const [name, setName] = useState("");
const [company, setCompany] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [confirmPassword, setConfirmPassword] = useState("");
const [business, setBusiness] = useState("");

// Field Validation
const [nameValid, setNameValid] = useState(false);
const [emailValid, setEmailValid] = useState(false);
const [passwordValid, setPasswordValid] = useState(false);
const [confirmPasswordValid, setConfirmPasswordValid] = useState(false);
const [businessValid, setBusinessValid] = useState(false);

const [isAllValid, setIsAllValid] = useState(false);