기존 인프런 서비스를 유지하면서 일부분을 모던하게 개선하기 위해서는, 스타일 충돌이 필연적으로 발생합니다. 이를 shadow DOM을 이용해 해결한 과정을 공유합니다.

IT 채용 플랫폼 랠릿의 거대한 Form을 react-hook-form으로 마이그레이션한 이유와 과정을 공유합니다.

인트로 안녕하세요 인프랩 프론트엔드 개발자 라비입니다:) 온라인 강의 플랫폼 인프런을 서비스하고 있는 저희는 올해 초 채용 서비스인 랠릿을 런칭했는데요. Vanilla JS로 개발한 인프런과 달리 React를 사용하여 웹 페이지를 개발하면서, 특히 이력서라는 특성상 복잡한 폼을 다루면서 렌더링 성능 이슈 등 다양한 문제에 직면했고, 이를 해결하기 위한 다양한 고민 과정을 정리하여 글로 공유하려고 합니다. 랠릿에는 한 페이지에 최대 700여개의 인풋창이 렌더링되는 개인 프로필 페이지와 지원서 작성하기 페이지가 존재합니다. 구직자가 이력서를 작성할 때 필요로 하는 최대한 다양한 유형의 정보를 한 페이지에서 입력하고 관리할 수 있도록 하기 위함입니다. 구직자 입장에서는 여러 페이지를 오고가면서 정보를 관리할 필요 없이 단일 페이지에서 자신의 모든 이력을 관리할 수 있기 때문에 편리하지만, Input, Select 등 다양한 Form Control의 값과 유효성 등의 상태를 관리하는 입장…

올해 저희 개발팀에서 기존 인프런 서비스 코드를 신규 스택으로 개편하는 프로젝트를 진행하였습니다. 여러 서비스 중 강의실 페이지 개선이 첫 번째 목표였고 최근 작업이 완료되었습니다. 이번 포스트에서는 프로젝트 진행에서 겪은 경험을 공유하고자 합니다. 개편의 필요성 기존 인프런 프로젝트는 다음과 같은 스택으로 구성되어 있습니다. Node.Js Postgresql Express FxJS MQL FxDOM FxJS 과 같은 함수형 라이브러리와 FxSQL 이라 불리는 쿼리빌더보다 더 이전에 나온 MQL2 를 사용합니다. 본 포스트에서는 같은 Fx 기반의 라이브러리임을 표시하기 위해 MQL 대신 FxSQL 으로 기술하겠습니다. 대부분의 애플리케이션 로직은 의 함수를 활용해 여러 단위의 함수를 합성하는 형태로 이루어져 있습니다. 아래 코드를 보시면 sql 을 실행한 결과로부터 시작해 , 같은 함수를 사용해 가공작업을 진행합니다. 유인동님의 함수형 프로그래밍 강의를 수강하신 분들이라면 익…