프런트엔드 도장: 개발자 기술을 교육하는 프로젝트(신규 5개 + 기존 43개)

1. Клон Notion

Приложение Notion полюбилось многим, оно позволяет оптимизировать рабочий процесс, работать с документами, планировать задачи, синхронизировать данные между устройствами.

www.notion.so

Чему вы научитесь, создавая клон Notion:

• HTML Drag and drop API. Пользователь может «схватить мышкой» 드래그 가능 элемент и поместить его в 떨어 뜨릴 수있는 존.
• Как синхронизировать в режиме реального времени данные между компьютером и смартфоном.
• Мы позволяем пользователям создавать, читать, обновлять и удалять записи, тем самым мы тренируем CRUD-навыки.

이 기사는 EDISON Software의 지원으로 번역되었습니다. разрабатывает приложения и сайты과 스타트업에 투자한다.

2. Клон Repl.it

Repl.it -это инструмент для совместного редактирования кода в реальном времени. Можно выбрать несколько языков: JavaScript, Python, Go и выполнять код прямо в браузере. Очень полезно для быстрых демонстраций и код-интервью.

반복

Чему вы научитесь, создавая клон Repl.it:

• Как запускать и выполнять код (server-side) в браузере (client-side).
• Считывать входные данные (исходный код) и выводить на экран результат выполнения.
• Как создавать файлы и папки в вебе и сохранять результаты.
• Как подсвечивать синтаксис кода.

3. Клон Google Photos

Google Photos это сервис для хранения и обмена фоток.
Любое современное приложение по работе с фотографиями умеет выполнять базовые функции: загружать, обрезать и пр. Люди хотят создавать свои аватарки и делиться фотками котиков, поэтому надо уметь работать с изображениями.

www.google.com/photos/about

Чему вы научитесь, создавая клон Google Photos:

• Как создавать адаптивные изображения на телефонах, планшетах, ноутбуках и даже на гигантских экранах телевизоров.
• Как обрабатывать загрузку изображений, особенно больших изображений (>1МБ) и массовых загрузок.
• Обработка файлов изображений, обрезка и изменение размера фотографий для миниатюр или при открытии галереи.
• 보너스 : как хранить изображения в облаке или локальной базе данных.

4. Клон Gifsky

기프스키 конвертирует видео в GIF используя функцииpngQuant для эффективных палитр кросс-кадров и временного сглаживания. В результате получается гифка с тысячами цветов на кадр.

gif.ski

Чему вы научитесь, создавая клон Gifski:

• Как конвертировать видео файлы (.mp4 в .gif).
• Как использовать API Drag and Drop HTML.
• Как работают оптимизация и обработка изображений.

참고 : Gifsky — это проект с открытым исходным кодом и есть на GitHub!

5. Мониторинг курсов криптовалют

React Native cryptocurrency tracker

Чему вы научитесь, создавая трекер курса валют:

• Как работать с API и получать данные удаленно из API.
• Как отобразить данные в виде списка.
• 보너스 : Если вам интересно, я недавно написал туториал по созданию трекера цен на криптовалюту с React Native.

참고 : 여기에 GitHub example repository.

Подборка проектов из предыдущих публикаций.

층

www.reddit.com/r/layer

레이어(Layer)는 누구나 공유하는 '보드'에 픽셀을 그릴 수 있는 커뮤니티입니다. 원래 아이디어는 Reddit에서 탄생했습니다. r/Layer 커뮤니티는 모든 사람이 창작자가 되어 공통의 대의에 기여할 수 있다는 공유 창의성에 대한 은유입니다.

나만의 레이어 프로젝트를 만들 때 배우게 되는 내용:

• JavaScript 캔버스 작동 방식 캔버스를 작동하는 방법을 아는 것은 많은 응용 프로그램에서 중요한 기술입니다.
• 사용자 권한을 조정하는 방법. 각 사용자는 로그인하지 않고도 15분마다 한 픽셀을 그릴 수 있습니다.
• 쿠키 세션을 생성합니다.

Squoosh

squoosh.app

Squoosh는 다양한 고급 옵션을 갖춘 이미지 압축 애플리케이션입니다.

GIF 20MB

나만의 Squoosh 버전을 만들면 다음 내용을 배울 수 있습니다.

• 이미지 크기 작업 방법
• Drag'n'Drop API의 기본 사항 알아보기
• API 및 이벤트 리스너의 작동 방식 이해
• 파일을 업로드하고 내보내는 방법

참고 : 이미지 압축기는 로컬입니다. 추가 데이터를 서버에 보낼 필요는 없습니다. 압축기를 집에 둘 수도 있고 서버에서 사용할 수도 있습니다.

계산기

어서 해봐요? 진지하게? 계산자? 네, 정확히는 계산기입니다. 수학 연산의 기본과 함께 작동하는 방식을 이해하는 것은 애플리케이션을 단순화하는 데 중요한 기술입니다. 조만간 숫자를 다루어야 하며 빠를수록 좋습니다.

jarodburchill.github.io/CalculatorReactApp

나만의 계산기를 만들면 다음 내용을 배울 수 있습니다.

• 숫자 및 수학 연산 작업
• 이벤트 리스너 API 연습
• 요소를 정렬하고 스타일을 이해하는 방법

크롤러(검색 엔진)

누구나 검색 엔진을 사용해 본 적이 있을 것입니다. 자신만의 검색 엔진을 만들어 보는 것은 어떨까요? 정보를 검색하려면 크롤러가 필요합니다. 모든 사람이 매일 이를 사용하며 이 기술과 전문가에 대한 수요는 시간이 지남에 따라 증가할 것입니다.

구글 검색 엔진

자신만의 검색 엔진을 만들어서 배울 수 있는 내용은 다음과 같습니다.

• 크롤러 작동 방식
• 사이트를 색인화하는 방법과 평점 및 평판을 기준으로 순위를 매기는 방법
• 색인화된 사이트를 데이터베이스에 저장하는 방법 및 데이터베이스 작업 방법

뮤직 플레이어(스포티파이, 애플 뮤직)

모두가 음악을 듣습니다. 음악은 우리 삶의 필수적인 부분입니다. 현대 음악 스트리밍 플랫폼의 기본 메커니즘이 어떻게 작동하는지 더 잘 이해하기 위해 음악 플레이어를 만들어 보겠습니다.

스포티 파이

나만의 음악 스트리밍 플랫폼을 만들어서 배울 점은 다음과 같습니다.

• API로 작업하는 방법. Spotify 또는 Apple Music의 API 사용
• 다음/이전 트랙 재생, 일시 정지, 되감기 방법
• 볼륨을 변경하는 방법
• 사용자 라우팅 및 브라우저 기록을 관리하는 방법

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의 기능을 보여줍니다.

Форма кредитной карты

부드럽고 즐거운 마이크로 인터랙션을 갖춘 멋진 신용카드 모양입니다. 숫자 형식 지정, 확인 및 자동 카드 유형 감지가 포함됩니다. Vue.js를 기반으로 구축되었으며 완벽하게 반응합니다. (너는 볼 수있어 여기에.)

신용카드 형태

당신이 배울 내용:

• 양식 처리 및 유효성 검사
• 이벤트 처리(예: 필드가 변경되는 경우)
• 페이지에 요소, 특히 양식 상단에 표시되는 신용 카드 정보를 표시하고 배치하는 방법을 이해합니다.

막대 그래프

히스토그램은 나타내는 값에 비례하는 높이나 길이를 갖는 직사각형 막대로 범주형 데이터를 나타내는 차트 또는 그래프입니다.

수직 또는 수평으로 적용할 수 있습니다. 수직 막대 차트를 선 차트라고도 합니다.

당신이 배울 내용:

• 체계적이고 이해하기 쉬운 방식으로 데이터를 표시합니다.
• 추가: 요소 사용 방법 알아보기 canvas 그리고 그것으로 요소를 그리는 방법

여기에 세계 인구 데이터를 찾을 수 있습니다. 연도별로 정렬되어 있습니다.

Анимация сердечка Twitter

2016년에 트위터는 트윗에 이 놀라운 애니메이션을 선보였습니다. 2019년 기준으로 여전히 그 부분이 중요해 보입니다. 직접 만들어 보는 것은 어떨까요?

당신이 배울 내용:

• CSS 속성으로 작업 keyframes
• HTML 요소 조작 및 애니메이션
• JavaScript, HTML 및 CSS 결합

Репозитории GitHub с функцией поиска

여기에는 멋진 것이 없습니다. GitHub 저장소는 단지 미화된 목록일 뿐입니다.
목표는 저장소를 표시하고 사용자가 이를 필터링할 수 있도록 하는 것입니다. 사용 공식 GitHub API 각 사용자에 대한 저장소를 얻으려면.

GitHub 프로필 페이지 - github.com/indreklasn

당신이 배울 내용:

• API에서 데이터 수신
• API의 데이터 표시
• 각 검색에 대한 관련 데이터 필터링 및 표시
• 선택 사항: 도전에 응하고 싶다면 다음을 사용하세요. API v4, GraphQL을 사용하여 구축되었습니다. GraphQL을 배우고 싶다면 이전 기사 중 하나로 이동하세요..

Чаты в стиле Reddit

채팅은 단순성과 사용 용이성으로 인해 널리 사용되는 의사소통 방법입니다. 하지만 현대 채팅방에 실제로 활력을 불어넣는 것은 무엇일까요? 웹소켓!

당신이 배울 내용:

• WebSocket, 실시간 통신 및 데이터 업데이트 사용
• 사용자 액세스 수준 작업(예: 채팅 채널 소유자에게 역할이 있음) admin및 방에 있는 다른 사람들 - user)
• 양식 처리 및 유효성 검사 - 메시지 전송을 위한 채팅 창은 다음과 같습니다. input
• 다양한 채팅 생성 및 참여
• 개인 메시지로 작업하세요. 사용자는 다른 사용자와 비공개로 채팅할 수 있습니다. 기본적으로 두 사용자 간에 WebSocket 연결을 설정하게 됩니다.

Навигация в стиле Stripe

이 탐색을 독특하게 만드는 것은 팝오버 컨테이너가 콘텐츠에 맞게 변형된다는 것입니다. 새로운 팝오버를 열고 닫는 전통적인 동작에 비해 이 전환에는 우아함이 있습니다.

당신이 배울 내용:

• CSS 애니메이션을 전환과 결합
• 콘텐츠를 어둡게 하고 플로팅 요소에 활성 클래스를 적용합니다.

팩맨

나만의 팩맨 버전을 만들어보세요. 이것은 게임이 어떻게 개발되는지에 대한 아이디어를 얻고 기본을 이해하는 좋은 방법입니다. JavaScript 프레임워크인 React 또는 Vue를 사용하세요.

Вы знаете:

• 요소가 이동하는 방법
• 누를 키를 결정하는 방법
• 충돌 순간을 결정하는 방법
• 더 나아가 고스트 이동 컨트롤을 추가할 수 있습니다.

이 프로젝트의 예를 찾을 수 있습니다 저장소에 GitHub의

사용자 관리

계획 저장소에 GitHub의

사용자 관리를 위한 CRUD 유형 애플리케이션을 작성하면 개발의 기본 사항을 배울 수 있습니다. 이는 특히 새로운 개발자에게 유용합니다.

Вы знаете:

• 라우팅이란 무엇입니까?
• 데이터 입력 양식을 처리하고 사용자가 입력한 내용을 확인하는 방법
• 데이터베이스 작업 방법 - 작업 생성, 읽기, 업데이트 및 삭제

Проверка погоды в вашем местоположении

계획 저장소에 GitHub의

앱을 만들고 싶다면 날씨 앱으로 시작해 보세요. 이 프로젝트는 Swift를 사용하여 완료할 수 있습니다.

애플리케이션 구축 경험을 쌓는 것 외에도 다음을 배우게 됩니다.

• API로 작업하는 방법
• 위치정보를 사용하는 방법
• 텍스트 입력을 추가하여 애플리케이션을 더욱 동적으로 만드세요. 여기에 사용자는 자신의 위치를 ​​입력하여 특정 위치의 날씨를 확인할 수 있습니다.

API가 필요합니다. 날씨 데이터를 얻으려면 OpenWeather API를 사용하세요. OpenWeather API에 대한 추가 정보 여기에.

채팅창

내 채팅 창이 두 개의 브라우저 탭에서 열립니다.

채팅 창을 만드는 것은 소켓을 시작하는 완벽한 방법입니다. 기술 스택의 선택은 엄청납니다. 예를 들어 Node.js는 완벽합니다.

소켓의 작동 방식과 구현 방법을 배우게 됩니다. 이것이 이 프로젝트의 가장 큰 장점이다.

소켓 작업을 원하는 Laravel 개발자라면 제 글을 읽어보세요. статью

깃랩 CI

출처

CI(지속적 통합)를 처음 사용하는 경우 GitLab CI를 사용해 보세요. 몇 가지 환경을 설정하고 몇 가지 테스트를 실행해 보세요. 별로 어려운 프로젝트는 아니지만, 이 프로젝트를 통해 많은 것을 배울 수 있을 거라 확신합니다. 현재 많은 개발팀이 CI를 사용하고 있습니다. 사용법을 알아두면 유용합니다.

Вы знаете:

• GitLab CI 란 무엇입니까?
• 구성 방법 .gitlab-ci.ymlGitLab 사용자에게 무엇을 해야 할지 알려줍니다.
• 다른 환경에 배포하는 방법

Анализатор сайтов

웹사이트의 의미를 분석하고 등급을 매기는 스크레이퍼를 만드세요. 예를 들어 이미지에 누락된 대체 태그가 있는지 확인할 수 있습니다. 또는 페이지에 SEO 메타 태그가 있는지 확인하세요. 스크레이퍼는 사용자 인터페이스 없이 생성될 수 있습니다.

Вы знаете:

• 스크레이퍼는 어떻게 작동하나요?
• DOM 선택자를 만드는 방법
• 알고리즘을 작성하는 방법
• 거기서 멈추고 싶지 않다면 사용자 인터페이스를 만드세요. 확인하는 각 웹사이트에 대한 보고서를 작성할 수도 있습니다.

Определение настроений в социальных сетях

출처

소셜 미디어의 감정 감지는 기계 학습을 소개하는 좋은 방법입니다.

하나의 소셜 네트워크만 분석하는 것부터 시작할 수 있습니다. 모든 사람은 대개 트위터로 시작합니다.

이미 머신러닝 경험이 있다면 다양한 소셜 네트워크에서 데이터를 수집하고 결합해 보세요.

Вы знаете:

• 머신러닝이란?

Клон Trello

Indrek Lasn의 Trello 클론.

당신이 배울 내용:

• 요청 처리 경로 구성(라우팅)
• 끌어서 놓기.
• 새 개체(보드, 목록, 카드)를 만드는 방법.
• 입력 데이터 처리 및 확인.
• 클라이언트 측: 로컬 저장소를 사용하는 방법, 로컬 저장소에 데이터를 저장하는 방법, 로컬 저장소에서 데이터를 읽는 방법.
• 서버 측에서: 데이터베이스를 사용하는 방법, 데이터베이스에 데이터를 저장하는 방법, 데이터베이스에서 데이터를 읽는 방법.

다음은 저장소의 예입니다., React+Redux로 제작되었습니다.

Панель админа

Github 저장소.

기본 사항을 학습하는 데 이상적인 간단한 CRUD 애플리케이션입니다. 배우자:

• 사용자를 생성하고 사용자를 관리합니다.
• 데이터베이스와 상호 작용 - 사용자 생성, 읽기, 편집, 삭제.
• 입력 유효성 검사 및 양식 작업.

Трекер криптовалют (нативное мобильное приложение)

Github 저장소.

무엇이든: Swift, Objective-C, React Native, Java, Kotlin.

우리는 공부합니다 :

• 기본 애플리케이션의 작동 방식.
• API에서 데이터를 검색하는 방법.
• 기본 페이지 레이아웃의 작동 방식.
• 모바일 시뮬레이터로 작업하는 방법.

이 API를 사용해 보세요. 더 좋은 것을 찾으면 댓글에 적어주세요.

관심이 있다면 여기로 여기 튜토리얼이 있습니다.

Настроить собственный конфиг webpack с нуля

기술적으로 이것은 애플리케이션은 아니지만, webpack이 내부에서 어떻게 작동하는지 이해하는 것은 매우 유용한 작업입니다. 이제 그것은 "블랙박스"가 아니라 이해할 수 있는 도구가 될 것입니다.

요구 사항 :

• es7을 es5로 컴파일합니다(기본).
• jsx를 js로 컴파일하거나 - .vue를 .js로 컴파일합니다(로더를 배워야 합니다).
• webpack 개발 서버 및 핫 모듈 재로딩을 설정합니다. (vue-cli와 create-react-app 둘 다 사용)
• Heroku, now.sh 또는 Github를 사용하여 웹팩 프로젝트를 배포하는 방법을 알아보세요.
• CSS(scss, less, stylus)를 컴파일하기 위해 선호하는 전처리기를 설정하세요.
• webpack에서 이미지와 SVG를 사용하는 방법을 알아보세요.

이것은 완전 초보자를 위한 놀라운 리소스입니다.

Клон Hackernews

모든 제다이는 자신만의 Hackernews를 만들어야 합니다.

그 과정에서 배울 내용은 다음과 같습니다.

• hackernews API와 상호작용하는 방법.
• 단일 페이지 애플리케이션을 만드는 방법.
• 댓글보기, 개별댓글, 프로필 등의 기능을 구현하는 방법입니다.
• 요청 처리 경로 구성(라우팅)

Тудушечка

TodoMVC.

진지하게? 투두슈카? 수천 개가 있습니다. 하지만 이런 인기에는 이유가 있다고 믿습니다.
Tudu 앱은 기본 사항을 확실히 이해할 수 있는 좋은 방법입니다. 바닐라 Javascript로 하나의 애플리케이션을 작성하고, 선호하는 프레임워크로 하나의 애플리케이션을 작성해 보십시오.

배우다:

• 새 작업을 만듭니다.
• 필드가 채워졌는지 확인하세요.
• 작업을 필터링합니다(완료, 활성, 모두). 사용 filter и reduce.
• 자바스크립트의 기본을 이해합니다.

Сортируемый drag and drop список

Github 저장소.

이해하는 데 매우 도움이 됨 드래그 앤 드롭 API.

배우자:

• 드래그 앤 드롭 API
• 풍부한 UI 만들기

Клон мессенджера (нативное приложение)

웹 애플리케이션과 기본 애플리케이션이 어떻게 작동하는지 이해하게 되어 회색 덩어리와 차별화됩니다.

우리가 공부할 내용:

• 웹 소켓(인스턴트 메시지)
• 기본 애플리케이션의 작동 방식.
• 기본 애플리케이션에서 템플릿이 작동하는 방식.
• 기본 애플리케이션에서 요청 처리 경로를 구성합니다.

텍스트 에디터

텍스트 편집기의 목적은 서식을 유효한 HTML 마크업으로 변환하려는 사용자의 노력을 줄이는 것입니다. 좋은 텍스트 편집기를 사용하면 사용자가 다양한 방식으로 텍스트 서식을 지정할 수 있습니다.

어느 시점에서 모든 사람이 텍스트 편집기를 사용해 본 적이 있을 것입니다. 그래서 왜 안돼 직접 만들어 보세요?

Клон Reddit

레딧 소셜 뉴스 수집, 웹 콘텐츠 평가 및 토론 사이트입니다.

Reddit이 대부분의 시간을 차지하지만 계속해서 Reddit에 참여하고 있습니다. Reddit 복제본을 생성하는 것은 (Reddit을 탐색하는 동시에) 프로그래밍을 배우는 효과적인 방법입니다.

Reddit은 매우 풍부한 정보를 제공합니다. API. 기능을 빠뜨리거나 함부로 작업하지 마세요. 클라이언트와 고객이 있는 현실 세계에서는 아무렇게나 일할 수 없으며, 그렇지 않으면 빨리 직장을 잃게 됩니다.

똑똑한 고객은 작업이 제대로 수행되지 않고 있음을 즉시 깨닫고 다른 사람을 찾을 것입니다.

레딧 API

Публикация пакета NPM с открытым исходным кодом

Javascript 코드를 작성하는 경우 패키지 관리자를 사용할 가능성이 있습니다. 패키지 관리자를 사용하면 다른 사람이 작성하고 게시한 기존 코드를 재사용할 수 있습니다.

패키지의 전체 개발 주기를 이해하는 것은 매우 좋은 경험을 제공할 것입니다. 코드를 게시할 때 알아야 할 사항이 많이 있습니다. 보안, 의미론적 버전 관리, 확장성, 명명 규칙 및 유지 관리에 대해 생각해야 합니다.

패키지는 무엇이든 될 수 있습니다. 아이디어가 없으면 나만의 Lodash를 만들어 게시하세요.

로다쉬: lodash.com

온라인에서 어떤 일을 했다면 다른 사람보다 10% 더 앞서게 됩니다. 다음은 유용한 리소스입니다. 오픈 소스 및 패키지에 대해.

Учебный план freeCodeCamp

FCC 커리큘럼

freeCodecamp는 많은 것을 수집했습니다 종합 프로그래밍 코스.

freeCodeCamp는 비영리 단체입니다. 이는 대화형 웹 기반 학습 플랫폼, 온라인 커뮤니티 포럼, 대화방, 매체 간행물 및 모든 사람이 학습 웹 개발에 접근할 수 있도록 하려는 지역 조직으로 구성됩니다.

전체 과정을 이수한다면 첫 번째 직업에 대한 자격을 충분히 갖추게 될 것입니다.

Создайте HTTP-сервер с нуля

HTTP 프로토콜은 인터넷에서 콘텐츠가 이동하는 데 사용되는 주요 프로토콜 중 하나입니다. HTTP 서버는 HTML, CSS, JS와 같은 정적 콘텐츠를 제공하는 데 사용됩니다.

HTTP 프로토콜을 처음부터 구현할 수 있으면 사물이 상호 작용하는 방식에 대한 지식이 확장됩니다.

예를 들어 NodeJ를 사용한다면 Express가 HTTP 서버를 제공한다는 것을 알 수 있습니다.

참고로 다음을 수행할 수 있는지 확인하세요.

• 라이브러리를 사용하지 않고 서버 설정
• 서버는 HTML, CSS 및 JS 콘텐츠를 제공해야 합니다.
• 라우터를 처음부터 구현하기
• 변경 사항 모니터링 및 서버 업데이트

이유를 모른다면 다음을 사용하세요. 고랭 그리고 HTTP 서버를 생성해 보세요 캐디 기스로부터.

Десктопное приложение для заметок

우리 모두 메모를 해요, 그렇죠?

메모 앱을 만들어 보겠습니다. 애플리케이션은 메모를 저장하고 데이터베이스와 동기화해야 합니다. Electron, Swift 또는 원하는 것을 사용하여 시스템에 적합한 기본 앱을 구축하세요.

이것을 첫 번째 챌린지(텍스트 편집기)와 자유롭게 결합해 보세요.

보너스로 데스크톱 버전을 웹 버전과 동기화해 보세요.

Подкасты (клон Overcast)

팟캐스트를 듣지 않는 사람은 누구입니까?

다음 기능을 사용하여 웹 애플리케이션을 만듭니다.

• 계정 생성
• 팟캐스트 검색
• 팟캐스트 평가 및 구독
• 30초 동안 정지 및 재생, 속도 변경, 앞으로 및 뒤로 기능을 수행합니다.

iTunes API를 출발점으로 사용해 보세요. 다른 자료를 아시는 분은 댓글에 올려주세요.

affiliate.itunes.apple.com/resources/documentation/itunes-store-web-service-search-api

화면 캡처

안녕하세요! 지금 화면을 촬영하고 있어요!

화면을 캡처하고 클립을 다른 이름으로 저장할 수 있는 데스크톱 또는 웹 앱을 만듭니다. .gif

여기에 몇 가지 팁이것을 달성하는 방법.

소스

• 개발자를 위한 5가지 대담한 교육 프로젝트(Layer, Squoosh, Calculator, Website Crawler, Music Player)
• 프론트엔드 기술을 연마하기 위한 9가지 프로젝트
• 프론트엔드 개발자를 위한 XNUMX가지 과제
• 개발자를 위한 재미있는 연습
• 8개 교육 프로젝트
• 연습할 또 다른 프로젝트 목록

출처 : habr.com