프론트엔드 기술을 연마하기 위한 9가지 추가 프로젝트

소개

프로그래밍을 처음 접하는 사람이든 노련한 개발자이든 관계없이 새로운 개념과 언어/프레임워크를 배우는 것은 이 업계에서 트렌드를 따라잡는 데 필수입니다.

예를 들어 Facebook이 불과 XNUMX년 전에 오픈소스로 공개했으며 이미 전 세계 JavaScript 개발자에게 최고의 선택이 된 React를 예로 들어 보겠습니다.

물론 Vue와 Angular도 합법적인 팬층을 보유하고 있습니다. 그리고 Svelte와 Next.js 또는 Nuxt.js와 같은 기타 범용 프레임워크가 있습니다. 그리고 Gatsby, Gridsome, Quasar... 그리고 훨씬 더.

숙련된 JavaScript 개발자로서 자신을 증명하려면 오래된 JS로 작업하는 것 외에도 다양한 프레임워크와 라이브러리에 대한 경험이 최소한 어느 정도 있어야 합니다.

2020년에 프런트엔드 마스터가 될 수 있도록 돕기 위해 저는 XNUMX개의 프로젝트를 구성했습니다. 각 프로젝트는 여러분이 구축하고 포트폴리오에 추가할 수 있는 기술 스택으로서 서로 다른 JavaScript 프레임워크와 라이브러리에 중점을 둡니다. 실제로 무언가를 만드는 것보다 더 도움이 되는 것은 없다는 것을 기억하십시오. 그러니 앞으로 나아가고, 마음을 사용하여 그것을 실현시키십시오.

이 기사는 EDISON Software의 지원으로 번역되었습니다. 멀티 브랜드 매장을 위한 가상 피팅룸 만들기과 테스트 소프트웨어.

React를 사용한 영화 검색 앱(후크 포함)

가장 먼저 시작할 수 있는 일은 React를 사용하여 영화 검색 앱을 만드는 것입니다. 아래는 최종 애플리케이션의 모습을 보여주는 이미지입니다.

무엇을 배울 것인가
이 앱을 구축하면 상대적으로 새로운 Hooks API를 사용하여 React 기술을 향상시킬 수 있습니다. 예제 프로젝트에서는 React 구성 요소, 많은 후크, 외부 API 및 일부 CSS 스타일을 사용합니다.

기술 스택 및 기능

• 후크로 반응
• 반응 형 앱 만들기
• JSX
• CSS

클래스를 사용하지 않고도 이 프로젝트는 기능적 React에 대한 완벽한 진입점을 제공하며 2020년에 확실히 도움이 될 것입니다. 당신은 찾을 수 있습니다 예제 프로젝트는 여기. 지침을 따르거나 직접 만드십시오.

Vue와 채팅 앱

또 다른 훌륭한 프로젝트는 제가 가장 좋아하는 JavaScript 라이브러리인 VueJS를 사용하여 채팅 앱을 만드는 것입니다. 응용 프로그램은 다음과 같습니다.

무엇을 배울 것인가
이 튜토리얼에서는 구성 요소 생성, 상태 처리, 경로 생성, 타사 서비스 연결, 인증 처리 등 Vue 앱을 처음부터 만드는 방법을 배웁니다.

기술 스택 및 기능

• 뷰
• 뷰엑스
• Vue 라우터
• 뷰 CLI
• 미는 사람
• CSS

이는 Vue를 시작하거나 기존 기술을 향상하여 2020년 개발에 착수할 수 있는 정말 훌륭한 프로젝트입니다. 당신은 찾을 수 있습니다 여기 튜토리얼.

Angular 8을 사용한 아름다운 날씨 앱

이 예는 Angular 8을 사용하여 아름다운 날씨 앱을 만드는 데 도움이 됩니다.

무엇을 배울 것인가
이 프로젝트는 설계부터 개발, 배포 가능한 애플리케이션에 이르기까지 처음부터 애플리케이션을 구축하는 데 필요한 귀중한 기술을 가르쳐줍니다.

기술 스택 및 기능

• 각도 8
• 중포 기지
• 서버 측 렌더링
• 그리드와 Flexbox가 포함된 CSS
• 모바일 친화적이고 적응성
• 다크 모드
• 크라시바 인터페이스

이 포괄적인 프로젝트에서 제가 정말 좋아하는 점은 고립된 상태에서 공부하지 않는다는 것입니다. 대신 설계부터 최종 배포까지 전체 개발 프로세스를 배웁니다.

Svelte를 사용한 To-Do 애플리케이션

Svelte는 최소한 React, Vue 및 Angular와 유사한 구성 요소 기반 접근 방식의 새로운 아이와 같습니다. 그리고 이것은 2020년 가장 핫한 신제품 중 하나입니다.

To-Do 앱은 반드시 가장 인기 있는 주제는 아니지만 Svelte 기술을 연마하는 데 실제로 도움이 될 것입니다. 다음과 같이 보일 것입니다:

무엇을 배울 것인가
이 튜토리얼에서는 처음부터 끝까지 Svelte 3를 사용하여 애플리케이션을 만드는 방법을 보여줍니다. 구성요소, 스타일, 이벤트 핸들러를 사용하게 됩니다.

기술 스택 및 기능

• 날씬한 3
• 구성 요소
• CSS를 사용한 스타일링
• ES 6 구문

좋은 Svelte 스타터 프로젝트가 많지 않아서 찾았습니다. 이것은 시작하기에 좋은 옵션입니다.

Next.js를 사용한 전자상거래 앱

Next.js는 즉시 서버 측 렌더링을 지원하는 React 애플리케이션을 구축하는 데 가장 널리 사용되는 프레임워크입니다.

이 프로젝트에서는 다음과 같은 전자 상거래 애플리케이션을 만드는 방법을 보여줍니다.

무엇을 배울 것인가
이 프로젝트에서는 Next.js를 사용하여 개발하는 방법, 즉 새 페이지와 구성 요소를 만들고, 데이터를 추출하고, Next 애플리케이션의 스타일을 지정하고 배포하는 방법을 배웁니다.

기술 스택 및 기능

• 다음 .js
• 구성 요소 및 페이지
• 데이터 샘플링
• 스타일링
• 프로젝트 배포
• SSR 및 SPA

새로운 것을 배우기 위해 전자상거래 앱과 같은 실제 사례를 갖는 것은 항상 좋은 일입니다. 당신은 할 수 있습니다 여기서 튜토리얼을 찾아보세요.

Nuxt.js를 사용한 본격적인 다국어 블로그

Nuxt.js는 Vue용이고 Next.js는 React용입니다. 서버 측 렌더링과 단일 페이지 애플리케이션의 성능을 결합하기 위한 훌륭한 프레임워크입니다.
만들 수 있는 최종 애플리케이션은 다음과 같습니다.

무엇을 배울 것인가

이 샘플 프로젝트에서는 초기 설정부터 최종 배포까지 Nuxt.js를 사용하여 완전한 웹사이트를 만드는 방법을 배우게 됩니다.

페이지, 구성 요소, SCSS를 사용한 스타일링 등 Nuxt가 제공하는 멋진 기능을 많이 활용합니다.

기술 스택 및 기능

• Nuxt.js
• 구성 요소 및 페이지
• 스토리블록 모듈
• 먹장어
• 상태 관리를 위한 Vuex
• 스타일링을 위한 SCSS
• Nuxt 미들웨어

정말 멋진 프로젝트네요, 여기에는 많은 훌륭한 Nuxt.js 기능이 포함되어 있습니다. 저는 개인적으로 Nuxt로 작업하는 것을 좋아합니다. Nuxt를 사용하면 훌륭한 Vue 개발자가 될 수도 있습니다.

개츠비와 함께하는 블로그

Gatsby는 React와 GraphQL을 사용하는 뛰어난 정적 사이트 생성기입니다. 프로젝트의 결과는 다음과 같습니다.

무엇을 배울 것인가

이 튜토리얼에서는 Gatsby를 사용하여 React 및 GraphQL을 사용하여 자신만의 기사를 작성하는 데 사용할 블로그를 만드는 방법을 배웁니다.

기술 스택 및 기능

• 개츠비
• 반응
• GraphQL
• 플러그인 및 테마
• MDX/마크다운
• 부트 스트랩 CSS
• 템플릿

블로그를 시작하고 싶었던 적이 있다면, 이건 좋은 예야 React와 GraphQL을 사용하여 만드는 방법에 대해 알아보세요.

WordPress가 나쁜 선택이라고 말하는 것은 아니지만 Gatsby를 사용하면 React를 사용하여 고성능 웹사이트를 구축할 수 있습니다. 이는 놀라운 조합입니다.

Gridsome과 함께하는 블로그

Vue용 Gridsome... 좋습니다. Next/Nuxt에서는 이미 이 기능을 사용했습니다.
그러나 Gridsome과 Gatsby의 경우도 마찬가지입니다. 둘 다 GraphQL을 데이터 계층으로 사용하지만 Gridsome은 VueJS를 사용합니다. 이것은 또한 훌륭한 블로그를 만드는 데 도움이 되는 놀라운 정적 사이트 생성기입니다.

무엇을 배울 것인가

이 프로젝트에서는 Gridsome, GraphQL 및 Markdown을 시작하기 위해 간단한 블로그를 만드는 방법을 알려줍니다. 또한 Netlify를 통해 애플리케이션을 배포하는 방법도 다룹니다.

기술 스택 및 기능

• 그리섬
• 뷰
• GraphQL
• 인하
• 네티 파이

이것은 확실히 가장 포괄적인 튜토리얼은 아니지만 Gridsome의 기본 개념과 마크다운은 좋은 출발점이 될 수 있습니다.

Quasar를 사용하는 SoundCloud와 유사한 오디오 플레이어

Quasar는 모바일 애플리케이션을 만드는 데 사용할 수 있는 또 다른 Vue 프레임워크입니다. 이 프로젝트에서는 다음과 같은 오디오 플레이어 애플리케이션을 만듭니다.

무엇을 배울 것인가

다른 프로젝트는 주로 웹 애플리케이션에 중점을 두지만, 이 프로젝트에서는 Vue 및 Quasar 프레임워크를 사용하여 모바일 애플리케이션을 만드는 방법을 보여줍니다.
Android Studio/Xcode가 구성된 상태에서 Cordova가 이미 실행 중이어야 합니다. 그렇지 않은 경우 설명서에는 모든 설정 방법을 보여주는 Quasar 웹사이트 링크가 있습니다.

기술 스택 및 기능

• 퀘이사
• 뷰
• 코르도바
• 웨이브서퍼
• UI 구성요소

소규모 프로젝트, 모바일 애플리케이션 제작을 위한 Quasar의 기능을 보여줍니다.

출처 : habr.com