픽클 - 이직? 연봉부터 픽!

픽클 - IT 경력인재, 픽클에서 픽!

업무 내용 개괄

1. 경력직 구직자와 구인 기업 사이를 구직자의 희망 연봉을 기반으로 블라인드 매칭해주는 서비스 개발 착수
2. 개발 기간 단축을 위해 Backend를 No-Code 툴 기반으로, Frontend를 React기반으로 개발하기로 결정
3. 사용된 No-Code 툴과 목적은 다음과 같음
   • DB: Airtable
   • Server: AWS Lambda(토큰 인증), Zapier(회원 가입 과정)
   • Auth: Memberstack
   • FE Server: Webflow (Path별 라우팅, Landing)
4. 빌드된 React 코드가 script tag를 통해 AWS S3에서 각 페이지 별로 로딩되어야 했기 때문에 각 페이지별 소스를 package로 묶어 Mono-repo로 관리함
   • 복잡한 Mono-repo가 아니었기 때문에 NPM의 Workspace 기능을 사용함
   • Mono-repo를 구성하게 된 가장 큰 이유는 디자인 시스템에 기반하여 작성된 코드를 효율적으로 재사용하기 위함임
   • 지속적으로 개발을 진행해본 결과, 리팩토링 과정에서의 효율성이 높다는 사실 역시 확인함
5. 구인 구직 사이트 특성상 Input이 많은 페이지가 많아 상태 관리에 난항을 겪음
   • 기본적으로 React에서 State 변경은 re-render를 발생시키기 위해 Input의 값을 State에 저장하지 않음
   • 동시에 Input의 값이 바뀔 때마다 validation 혹은 서비스에서 의도한 반응을 사용자에게 제공하기 위해서는 실시간으로 Input의 값을 모니터링하고 DOM을 수정해야할 필요가 있었음
   • 때문에 Input이 수정되는 이벤트마다 별도의 Ref에 값과 유효성 검사 결과를 저장하고, 직접 Rendering된 DOM을 수정하기로 결정했음
6. 초기 서비스라서 참가 신청서의 내용을 자주 수정해야 하는 문제가 있었음
   • 수정이 발생할 때마다 JSX를 수정하는 것은 너무 비효율적이었음
   • 모든 Input은 일전에 작성한 디자인 시스템에 따라 일률적인 디자인을 가지고 있었음
   • 따라서, 가장 기본이 되는 Input Set을 Common package에 작성한 후에 모든 페이지 package에서 공유할 수 있도록 했음
   • 복잡한 Input(글자수 카운터와 제한이 있는 텍스트 Input, 선택 개수 제한이 있는 Multi Select 등)은 기본이 되는 Input Set의 합성을 통해 구현했음
   • JSON을 통해 간략한 설정 파일 포맷을 만들어 공통된 Input Rendering Component에 설정 파일을 넣었을 때, 양식이 한번에 수정될 수 있도록 구현했음

기술 스택

Langs

• Javascript

Back-end

• Zapier
• Airtable
• Memberstack
• AWS Lambda

Front-end

• React
• TailwindCSS