React Coding Challenge 수요일 - 완벽한 픽셀 헤더 구축(스크린캐스트 포함)

앞으로 몇 주 동안 매주 수요일마다 난이도가 높아지는 새로운 React 코딩 챌린지를 공유하겠습니다.

많은 새로운 개발자가 CSS와 씨름합니다. 당연히 그들은 오히려 UI 프레임워크를 사용합니다. 그러나 프론트엔드 개발자가 디자인 작업을 하고 커스텀 CSS를 작성하는 것은 중요한 기술입니다. 특히 세련된 UI 라이브러리를 사용하지 않는 고객 대면 제품을 작업할 때 그렇습니다.

그래서 오늘은 간단한 도전으로 CSS 기술을 연습해 봅시다. 이(및 이후의 모든 과제)는 this professionally created project on GitHub 및 Figma의 다음 디자인을 기반으로 합니다.

과제: 헤더를 픽셀 단위로 완벽하게 만들기

이 과제는 간단한 UI 작업입니다. Figma 디자인을 기반으로 애플리케이션의 랜딩 페이지에 대한 헤더 구성 요소를 빌드합니다.

Here is the current state of the website 이하 디자인입니다.

테스트한 기술: CSS

난이도: 쉬움

작업

설계를 기반으로 헤더를 구현합니다.

탐색 링크는 / , /products , /documentation 및 /pricing 를 가리켜야 합니다.

"대시보드 열기"링크가 이미 있지만 디자인에 맞게 조정해야 합니다.

자원

The repository

The design on Figma.

로컬 머신에서 앱을 실행하려면 다음 명령을 사용하십시오.

git clone https://github.com/profydev/prolog-app.git
cd prolog-app
npm install
npm run dev

힌트

편집해야 하는 파일은 저장소 내부에 pages/index.jsx 있습니다.

현재 CSS에는 styled-components이 사용됩니다. 코드에도 사용하는 것이 좋지만 대신 CSS 모듈이나 인라인 스타일을 사용할 수 있습니다. 여기서 라이브러리는 그다지 중요하지 않습니다.

프로젝트 자체는 TypeScript로 작성되었지만 이 문제의 파일은 일반 JSX입니다. 마음에 드시면 파일 형식을 .tsx로 자유롭게 변경하십시오.

디자인 작업을 해본 적이 없거나 픽셀 단위까지 완벽하게 만들고 싶어서 도움이 필요한 경우 페이지 하단에 있는 양식에 이메일을 입력하면 추가 리소스를 얻을 수 있습니다.

더 어려운 도전을 원한다면 도전할 수 있습니다.

코드를 기존 코드 베이스에 통합합니다.

헤더에 대한 Cypress 테스트를 기존 테스트 모음에 추가합니다.

해결책

다음은 이 첫 번째 작업에 대한 솔루션입니다. 이것은 기본적으로 주니어 후보자가 그러한 도전을 위해 구축할 것으로 기대하는 것입니다(아마도 CSS를 픽셀 완벽하게 만들지 않고). 모든 코드는 단일 파일에 있으며 별도의 구성 요소로 나뉘지 않습니다.

고급 솔루션

여기에서 기존 코드베이스에 맞게 위의 솔루션을 리팩터링하는 것을 볼 수 있습니다. 기능 기반 폴더 구조, 기존 스타일 구성 요소 테마를 사용하고 헤더에 대한 Cypress 테스트를 추가합니다.

나는 이것을 주니어 후보에게 기대하지 않을 것입니다. 특히 알려지지 않은 코드베이스에는 없습니다. 그래도 보는 것은 흥미로울 수 있습니다.