frontend총 4개의 글이 있어요 👀

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
인프콘 티저 페이지 개발기 (like 해커톤)

인프런의 컨퍼런스 ‘INFCON 2022’가 8월 26일 코엑스 그랜드볼룸에서 열립니다! 🎊 티져페이지 확인하러 가기 → 안녕하세요. 프론트엔드 개발파트 리온, 록입니다. 🙂 올해 8월, 인프랩의 첫 컨퍼런스를 개최하게되었는데요. 이를 위해서 발표연사자 모집 및 개최 소식을을 알리기 위한 티져 페이지를 개발한 경험들에 대해서 공유하려고 합니다. 기술스택 홍보가 중점이 되는 사이트이다 보니, SEO에 유리한 기술 스택이 필요했습니다. 일반적으로 리액트로 만들어진 SPA 사이트의 경우 렌더링이 CSR로 이루어지기 때문에 SEO에 불리합니다. 리액트로 SEO에 유리한 사이트를 만드는 방법은 여러 가지가 있지만 저희는 그중 서버 사이드 렌더링을 도와주는 next.js를 선택하게 되었습니다. next.js는 이미 랠릿 B2C 사이트를 개발하며 사용한 경험이 있었고, Gatsby처럼 정적 페이지를 생성하는 데 도움을 주는 static HTML export 기능을 제공하고 있기 때문이었습니다.…

June 07, 2022
INFCON2022
©INFLAB. ALL RIGHTS RESERVED