shadow DOM으로 신규 프로젝트의 스타일을 지키는 방법

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

August 31, 2022
legacy
frontend
react-hook-form을 선택한 이유와 적용 과정

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

July 19, 2022
React
react-hook-form
Form
React Form 컴포넌트 개발기

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

July 19, 2022
React
react-hook-form
상태관리
Form
강의실 개편

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

July 18, 2022
legacy
refactoring
©INFLAB. ALL RIGHTS RESERVED