초보자를 위한 9가지 흥미로운 React 프로젝트 아이디어 및 주제 2022
게시 됨: 2021-01-06따라서 React의 기본 사항을 마스터했으며 JavaScript에 대해서도 확실히 이해했습니다. 이제 기본 자습서가 상당히 쉽기 때문에 한 단계 업그레이드할 생각입니다. 하지만 어떻게?
이것은 React 라이브러리의 기초를 완료하고 학습의 중간 단계에 도달할 때 많은 React 신입생이 직면하는 문제입니다. 앞으로 나아가는 가장 좋은 방법(아마도 가장 생산적인 방법)은 React 프로젝트 개발에 집중하는 것입니다.
아니요, 우리는 큰 산업 프로젝트를 수행하는 것을 말하는 것이 아니라 이론적인 기술을 실제 경험으로 구체화하는 데 도움이 될 수 있는 작은 실제 프로젝트를 수행하는 것입니다. 실제 React 프로젝트에서 작업함으로써 React 초보자가 되는 것과 전문 개발자가 되는 것 사이의 격차를 해소할 수 있습니다.
Swiggy, Quora, IMDB 등과 같은 애플리케이션을 빌드하는 방법을 배우십시오.
React 프로젝트를 개발하면 React 기술을 강화할 수 있을 뿐만 아니라 창의적인 측면을 탐색할 수 있습니다. 그러나 React 프로젝트에 대한 논의를 시작하기 전에 먼저 React 프로젝트 개발의 "이유"와 "방법"에 대해 설명하겠습니다.
읽기: 상위 20가지 React 인터뷰 질문 및 답변
목차
왜 React 프로젝트에서 작업해야 합니까?
"연습이 완벽을 만든다"는 옛말을 들어보셨죠? 이 상황은 동일합니다. React의 기본 개념을 숙달했다면 React 프로젝트 구축에 익숙해져야 합니다. React 프로젝트를 개발하는 과정에서 실제로 작동하는 앱을 개발하는 방법을 배우게 됩니다.
게다가 React 프로젝트 개발을 시작할 때 어떤 도구와 React 생태계를 어떤 React 프로젝트에 사용할지 배우게 됩니다. React로 앱을 빌드할 때의 가장 큰 장점은 앱을 성공적으로 배포한 후 포트폴리오에 통합하여 잠재적 고용주에게 깊은 인상을 줄 수 있다는 것입니다.
그러나 프로세스에서 가장 까다로운 부분은 어떤 React 앱을 빌드해야 하는지 파악하는 것입니다. React 프로젝트 개발로 얼음을 깨는 데 도움이 되도록 초보자를 위한 React 프로젝트 목록을 작성했습니다.
React 앱 개발 프로세스를 시작하는 방법은 무엇입니까?
React 프로젝트 개발에 대해 기억해야 할 첫 번째 사항 중 하나는 이것이 대부분 자기 주도적인 프로세스라는 것입니다. 온라인 자습서 및 학습 자료를 통해 React의 기본을 배우는 것과 달리 React 프로젝트를 빌드하는 데 안내할 내용은 많지 않습니다. 시행착오를 거쳐 배워야 합니다.
읽어보기: 초보자를 위한 전체 스택 코딩 프로젝트 아이디어
그러나 이것이 React로 프로젝트 개발의 기초를 배우는 데 도움이 되는 것이 전혀 없다는 것을 의미하지는 않습니다. React 프로젝트 개발을 시작하는 방법에 대한 많은 자료를 찾을 수 있습니다. 소스 코드와 함께 앱 개발의 핵심 단계를 가르치는 수많은 온라인 기사가 있습니다.
초보자에게는 React 프로젝트를 처음부터 개발하는 작업이 어려워 보일 수 있지만 프로세스를 단순화하는 비결이 있습니다. 애플리케이션을 더 작은 구성 요소로 나누는 것입니다. 한 번에 하나의 기능을 구축하는 데 집중하고 계속해서 점을 연결하세요. 다양한 React 도구와 생태계를 계속 연습하고 실험하면서 앱 개발의 일반적인 패턴과 React 앱의 특정 기능을 개발하는 데 가장 적합한 도구를 이해하게 될 것입니다.
추가 팁 : 종종 초보자는 앱의 백엔드를 처음부터 빌드해야 한다는 오해를 품고 있지만 반드시 필요한 것은 아닙니다. AWS Amplify, Firebase, Hasura와 같은 서버리스 기술을 활용하여 앱에 즉시 사용 가능한 백엔드를 제공할 수 있습니다. 이러한 도구는 시간을 절약할 뿐만 아니라 생산성을 높이는 데도 도움이 됩니다.
자세히 알아보기: 인도의 전체 스택 개발자 급여
초보자를 위한 React 프로젝트 아이디어
1. 소셜 미디어 앱
Facebook, Instagram, Snapchat, Twitter와 같은 소셜 미디어 앱이 정교한 앱의 대표적인 예이기 때문에 인도 소셜 미디어 마케팅의 미래는 놀랍습니다. 이러한 앱은 점점 더 많은 고급 기능을 가지고 있기 때문에 React 프로젝트에 큰 영감을 줄 수 있습니다. React를 사용하여 소셜 미디어 앱을 구축할 때 가장 좋은 점은 앱에 어떤 종류의 기능을 포함해야 하는지 알고 있다는 것입니다. 거의 모든 소셜 미디어 앱의 가장 일반적인 기능은 다음과 같습니다.
- 사용자 인증
- 알림 및 뉴스피드
- 다른 플랫폼과의 손쉬운 통합
- 게시, 공유 및 댓글 달기
기본적으로 소셜 미디어 앱은 실험을 위한 충분한 범위를 제공합니다. 가장 기본적인 기능(위에 언급된 기능)을 추가한 후 최종 사용자가 요구 사항 및 기본 설정에 따라 프로필과 계정을 조정할 수 있도록 하는 사용자 지정을 위한 추가 기능을 만들 수 있습니다.
사용할 수 있는 기술:
- 게시물, 메시지 및 좋아요를 위한 동적 UI를 만들기 위한 React App 또는 React Native를 만듭니다.
- 실시간 데이터를 위한 AWS Amplify, Firebase 또는 Hasura(GraphQL 구독 사용).
- 앱 알림을 위한 AWS Lambda 또는 Firebase Functions
- 사진 및 동영상 업로드를 위한 Firebase 또는 Cloudinary 저장소
2. 전자상거래 앱
전자 상거래가 주류 산업에 침투한 이후로 전자 상거래 앱(Amazon, Flipkart, Nykaa 등)은 어디에나 존재하게 되었습니다. 이러한 앱은 이제 우리 삶의 필수적인 부분입니다. 따라서 기능적인 전자 상거래 앱을 구축하면 업계의 최신 트렌드를 따라갈 수 있는 실제 기술이 있음을 보여줄 것입니다. 말할 필요도 없이, 당신은 잠재적인 고용주보다 먼저 매력적인 후보자가 될 것입니다.
우리는 Amazon이나 eBay와 같은 큰 시장이 아니라 특정 산업에 더 중점을 둔 소규모 전자 상거래 프로젝트를 개발하는 것에 대해 이야기하고 있음을 명심하십시오. 전자 장치(모바일, TV, 랩톱 등)와 같이 관심 있는 산업을 선택하고 이를 중심으로 전자 상거래 앱을 개발할 수 있습니다.
전자 상거래 앱은 제품이나 서비스를 제공할 수 있습니다. 어떤 경우든 제품이나 서비스를 탐색하는 것과 별개로 고객이 원활한 고객 서비스를 즐길 수 있도록 해야 합니다. 이는 앱 성공에 매우 중요합니다. 모든 경우에 걸친 고객 지원과 우수한 고객 경험은 성공적인 앱의 두 가지 핵심 요소입니다.
앱 기능에 관한 한 레이아웃과 인터페이스를 깔끔하고 탐색하기 쉽게 유지하고 배달 위치 옵션을 포함하고 장바구니 및 위시리스트를 통합합니다. 체크아웃 프로세스에 필요한 인증 옵션(게스트 또는 등록된 사용자)이 포함되어 있는지 확인하십시오.
사용할 수 있는 기술:
- Create React App 또는 Gatsby는 제품/서비스를 표시하는 상점을 구축하기 위한 탁월한 선택입니다.
- Algolia는 번개처럼 빠른 제품 검색 인터페이스를 만드는 데 적합합니다.
- 체크아웃 프로세스를 처리하기 위한 Netlify/AWS Lambda.
- 지불 프로세스를 관리하기 위한 Stripe/react-stripe-elements.
- Snipcart를 사용하면 장바구니를 만들고 장바구니 제품을 관리할 수도 있습니다.
3. 날씨 앱
이것은 초보자를 위한 완벽한 React 프로젝트입니다. 간단한 프로젝트입니다. 몇 시간 만에 코딩할 수 있습니다! 이 프로젝트에서는 5일 간의 일기 예보를 표시할 수 있는 날씨 앱을 빌드해야 합니다. 이 앱의 경우 모든 기능이 정확해질 때까지 하드 코딩된 가짜 데이터를 활용할 수 있습니다.
날씨 앱은 도시 이름, 현재 날씨 아이콘, 온도, 습도, 풍속 등을 포함한 모든 기본 기능이 있어야 합니다. 날씨 앱은 화창/비/에 적합한 이미지를 포함하여 매일의 최고 기온과 최저 기온의 기록을 표시해야 합니다. 흐림/눈이 내리는 기상 조건. 반응형 디자인이어야 하고 정확한 온도와 기상 조건으로 5분마다 새로 고쳐야 합니다.
주요 기능을 갖추면 다음과 같은 방법으로 앱을 추가로 확장할 수 있습니다.
- 사용자가 특정 요일을 클릭하여 시간별 예측을 볼 수 있는 기능을 포함합니다.
- 앱에 React Router를 추가합니다(npm install react-router). 경로를 추가 하려면 빠른 시작 가이드 를 확인하세요 . 예를 들어, 5일 예보를 표시할 수 있는 경로와 그 날의 시간별 예보.
- Open Weather Map 에 가입 하여 무료 API 키를 얻고 5일 동안의 일기예보를 가져오십시오. 그런 다음 앱에 이 데이터를 제공합니다.
- 앱을 더 멋지게 만들고 싶다면 vx 와 같은 그래픽 라이브러리를 추가할 수 있습니다 . 영감을 얻기 위해 이러한 vx 예제 를 확인할 수 있습니다 .
이 날씨 앱을 개발하는 동안 외부 API에 연결하고 적절한 결과를 표시하는 방법을 배우게 됩니다. 이 실용적인 기술은 외부 소스에서 데이터를 가져와 결과를 표시하도록 설계된 다른 종류의 단일 페이지 앱을 개발할 때 매우 유용합니다.
원천
사용할 수 있는 기술:
- Node.js 와 Bower 는 이 앱을 위한 두 가지 훌륭한 옵션입니다.
- Gulp Task Runner 및 SASS CSS 전처리기를 사용할 수 있습니다 .
- 날씨 아이콘에 대해서는 Erik Flowers 를 확인하고 "요구" 모듈에 대해서는 Browserify 를 사용할 수 있습니다 .
4. 메시지 앱
메시징 앱과 메시징 서비스는 네티즌들 사이에서 큰 인기를 얻고 있습니다. 사실 WhatsApp 및 Facebook Messenger와 같은 메시징 앱은 일상 생활의 큰 부분을 차지하므로 이것이 없는 하루는 상상할 수 없습니다. 인스턴트 메시징은 이제 생활 방식입니다. 대기업이든 중소기업이든 상관없이 인스턴트 메시징의 기능에 의존하여 고객에게 연중무휴 24시간 고객 지원을 제공합니다. 따라서 메시징 앱을 구축하는 것은 React 기술을 수익화하는 가장 좋은 방법 중 하나입니다.
모바일 기반의 메시징 앱을 개발할 때 가장 먼저 고려해야 할 점은 두 명 이상의 실시간 대화를 원활하게 할 수 있는 플랫폼을 구축해야 한다는 것입니다. 실시간은 인스턴트 메시징의 본질이기 때문에 여기에서 핵심입니다. WebSocket을 통해 데이터를 전송하는 Firebase 또는 Hasura와 같은 도구를 사용하여 대화에서 즉시 메시지를 표시할 수 있습니다. React Native는 이 프로젝트에 이상적인 선택입니다.
활용할 기술:
- React Native 또는 React Native Web은 모두 모바일 메시징 앱과 하이브리드(웹 + 모바일) 메시징 앱 개발에 탁월합니다.
- 실시간으로 메시지를 보내고 받기 위한 Firebase, AWS Amplify 또는 Hasura.
- 이미지 또는 비디오 콘텐츠가 포함된 메시지를 보내고 받기 위한 Cloudinary 또는 Firebase 저장소입니다.
- 사용자가 메시지에 포함할 수 있는 이모티콘용 npm emoji-mart 패키지
5. 생산성 앱
이것은 목록에서 가장 쉬운 프로젝트 중 하나이며 생산성 앱에 대한 자습서가 풍부하다는 사실을 감안할 때 이 프로젝트는 초보자에게 비교적 쉬울 것입니다. 이름에서 알 수 있듯이 생산성 앱은 생산성 향상에 도움이 되는 앱입니다. 가장 일반적으로 사용되는 생산성 앱에는 메모 작성 앱, 팀 관리 앱, 작업 목록 앱, 시간 관리 앱 등이 있습니다.
이들은 일반적인 생산성 앱이지만 앱 개발 프로세스에 대한 자세한 소개를 제공하는 앱을 빌드해 볼 수 있습니다. 이것은 사용자가 앱 개발 단계를 따를 수 있도록 하는 단순한 디자인과 기능으로 인해 생산성 앱에 대한 훌륭한 아이디어입니다.
생산성 앱을 개발하는 동안 어떤 기능이 일일 일정이나 학습 일정을 단순화하는지 물어봐야 하며, 그것이 시작 신호가 될 것입니다. 마크다운을 사용하여 서식이 지정된 텍스트를 작성하기 위한 텍스트 편집기와 같은 간단한 기능으로 시작하십시오. 앱의 이러한 핵심 기능 하나 또는 두 개를 성공적으로 개발한 후에는 점차적으로 요소를 확장하기 시작합니다. 예를 들어, 텍스트를 컴퓨터에 개별 파일로 저장하는 옵션, 서식이 지정된 이메일을 작성하기 위해 텍스트 마크다운을 HTML로 내보내는 옵션.
사용하는 기술:
- React App(웹용) 또는 React Native(모바일 플랫폼용)를 만듭니다.
- 앱 UI에 마크다운을 표시하기 위한 react-markdown npm 패키지.
- 노트에 코드를 작성하기 위한 react-codemirror2 npm 패키지.
- 클릭 앤 드래그 옵션을 통해 목록 콘텐츠를 재정렬하기 위한 react-dragable npm 패키지.
또한 시도하십시오: 초심자를 위한 웹 디자인 프로젝트 아이디어
6. 엔터테인먼트 앱
마지막을 위해 가장 광범위한 앱인 엔터테인먼트 앱을 저장했습니다. 엔터테인먼트 앱은 영화에서 음악 및 팟캐스트에 이르는 미디어 콘텐츠에 중점을 둡니다. Netflix, Audible, Spotify 및 Soundcloud는 엔터테인먼트 앱의 몇 가지 예입니다. 흥미롭게도 오늘날 우리는 소셜 미디어와 긴밀한 관계를 공유하는 많은 엔터테인먼트 앱을 보유하고 있습니다. TikTok은 아마도 소셜 미디어 엔터테인먼트 앱의 가장 좋은 예일 것입니다. 사용자가 만든 짧은 비디오 클립이 특징이며 높은 사용자 참여를 유도합니다. 그런 다음 구독, 좋아요, 댓글을 통해 사용자 참여를 유도하는 YouTube가 있습니다.
우리의 프로젝트는 이러한 인기 있는 어떤 앱보다 훨씬, 훨씬 간단할 것입니다. 가장 관심 있는 엔터테인먼트 미디어를 선택하고 그에 따라 앱을 디자인하세요. 아이디어는 사용자가 로그인하여 원하는 콘텐츠를 보고 저장할 수 있는 엔터테인먼트 앱을 개발하는 것입니다. 기본 기능이 준비되면 사용자가 앱 콘텐츠를 좋아하고 공유하고 댓글을 달 수 있도록 하는 소셜 요소를 가지고 놀 수 있습니다.
사용할 수 있는 기술:
- 앱 UI용 React App, Next.js 또는 Gatsby를 만듭니다.
- 미디어 검색을 위한 Algolia(오디오 트랙, 영화, 팟캐스트 등의 이름).
- 미디어 재생을 위한 react-player npm 패키지.
- 미디어 콘텐츠 업로드를 위한 Cloudinary/Firebase 저장소입니다.
이 6개의 프로젝트 외에도 시도할 수 있는 몇 가지 다른 쉬운 프로젝트가 있습니다.
7. 소셜 카드
이것은 완전한 앱이 아니라 앱의 구성 요소이지만 그럼에도 불구하고 좋은 프로젝트입니다. 인터넷에는 다양한 소셜 카드 UI가 있습니다. Facebook, Twitter 및 Pinterest에서 찾을 수 있습니다. 소셜 카드는 UI를 React 구성 요소로 나누는 연습을 할 수 있기 때문에 초보자에게 이상적인 프로젝트 아이디어입니다. 또한 소셜 카드는 관련 데이터와 함께 이미지를 표시할 수 있는 완벽한 시각적 표현입니다.
원천
8. 계산기
계산기는 덧셈, 뺄셈, 곱셈, 나눗셈 및 백분율을 포함한 일련의 기본 수학 기능을 수행하는 간단한 장치입니다. 이것은 이러한 필수 기능을 수행할 수 있는 계산기인 우리 프로젝트의 이면에 있는 아이디어가 될 것입니다. 간단한 계산기를 만들려면 모든 다른 구성 요소에 대한 설정을 만들고 상호 대화형 플랫폼을 구축해야 하며 실패, 충돌 및 버그 처리를 위한 지원 시스템도 만들어야 합니다. Create React App 패키지를 사용하여 계산기 앱을 보관하고 실행할 디렉토리를 인스턴스화할 수 있습니다.
원천
9. Github 이슈 페이지
이 프로젝트는 Github의 Issues 페이지의 단순화된 버전을 디자인하는 것입니다. 다음과 같이 표시되어야 합니다.
원천
범위를 작게 유지해야 합니다. 헤더의 항목(검색, 필터링, 별표 등)을 무시하고 문제 목록을 구현하는 데만 집중하세요. 프로젝트를 시작하려면 먼저 Github의 API 에서 미해결 문제를 수집 하고 목록에 표시합니다. 그런 다음 전체 문제 목록을 쉽게 탐색할 수 있도록 페이지 매김 컨트롤을 추가합니다. React Router를 추가하면 원하는 특정 페이지로 바로 이동할 수 있습니다. 문제 세부 정보 페이지도 포함하여 페이지의 복잡성을 높일 수 있습니다.
세계 최고의 대학에서 온라인으로 소프트웨어 개발 과정을 배우십시오 . 이그 제 큐 티브 PG 프로그램, 고급 인증 프로그램 또는 석사 프로그램을 획득하여 경력을 빠르게 추적하십시오.
결론
이 기사가 앱 개발 사고방식을 이해하는 데 충분히 영감을 주었기를 바랍니다. 더 많이 연습할수록 React로 실제 프로젝트를 더 잘 개발할 수 있습니다.
반응, 전체 스택 개발에 대해 자세히 알아보려면 작업 전문가를 위해 설계되었으며 500시간 이상의 엄격한 교육, 9개 이상의 프로젝트 및 과제, IIIT-B 동문 자격, 실질적인 실습 캡스톤 프로젝트 및 최고의 기업과의 취업 지원.
