frontend에 총 10개의 글이 있어요 👀

인프랩이 지난 2년간 플랫폼 팀 없이 오픈 소스를 이용해 디자인 시스템을 만들고 운영한 경험과 그 과정에서 했던 고민들을 공유합니다.

Next.js로 OG 이미지 동적 생성기를 개발한 경험을 공유합니다.

Jenkins CI 환경에서 Turborepo 기반 모노레포 CI 소요시간을 최대 4.6배 개선한 경험과 pnpm 의존성 캐시 및 Turbo Task 캐시를 Jenkins 에이전트 간에 공유하는 방법을 소개합니다.

랠릿 B2C 패키지에서 Docker 를 이용하여 어떻게 standalone 을 적용했는지에 대해 설명합니다.

Code generator의 구현 과정을 공유합니다.

Code generator를 만들기까지의 고민을 공유합니다.

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

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

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

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