분류 기타

코딩 기술 수준을 높이기 위해 만들 수 있는 앱 아이디어는 다음과 같습니다.(1)

컨텐츠 정보

  • 조회 224 (작성일 )

본문

무언가를 만들고 싶었지만 어떻게 해야 할지 몰랐습니까? 저자가 때때로“작가의 블록”을 가지고 있는 것처럼 개발자에게도 마찬가지입니다.


이러한 응용 프로그램은 다음과 같습니다.

  • 코딩 기술을 향상 시키기 위해 좋은
  • 새로운 기술을 실험하기에 좋습니다
  • 다음 고용주 / 클라이언트에게 깊은 인상을 주기 위해 포트폴리오에 추가하는 것이 좋습니다
  • 튜토리얼 (문서 또는 비디오)에서 예제로 사용하기에 좋습니다.
  • 새로운 기능으로 쉽게 완성 및 확장 가능


이것은 단순한 프로젝트 목록이 아니라 각 프로젝트를 충분히 자세하게 설명하는 컬렉션으로, 처음부터 개발할 수 있습니다!


각 프로젝트 사양에는 다음이 포함됩니다.

  1. 명확하고 설명적인 목표
  2. 구현해야 할 사용자 스토리 목록
  3. 기본 프로젝트 뿐만 아니라 동시에 기술을 향상 시키는 보너스 기능 목록
  4. 프로젝트를 완료하는 데 필요한 것을 찾는 데 도움이 되는 모든 리소스와 링크

Projects 


모든 프로젝트는 이를 완료하는 데 필요한 지식과 경험을 바탕으로 세 개의 계층으로 나뉩니다. 이 계층은 다음과 같습니다.

  1. 초보자 — 학습 여정의 초기 단계에 있는 개발자. 일반적으로 사용자 용 응용 프로그램 작성에 중점을 둔 사람들.
  2. 중급자 — 학습 및 경험의 중간 단계 에있는 개발자. UI / UX, 개발 도구 및 API 서비스를 사용하는 앱 구축에 익숙합니다.
  3. 고급자 — 위의 모든 기능을 갖추고 있으며 백엔드 애플리케이션 및 데이터베이스 서비스 구현과 같은 고급 기술을 배우는 개발자입니다.

아래에는 각 계층 당 5 개의 프로젝트 (총 15 개)가 있지만 이 GitHub 저장소에는 현재 30 개가 넘는 프로젝트가 있습니다. 향후 더 많은 프로젝트를 추가 할 계획이므로 확인하십시오. 


1. Notes App 


계층 : 1 — 초보자


설명 : 나중에 사용하기 위해 메모를 작성하고 저장하십시오!


사용자 스토리 

  • 사용자는 메모를 만들 수 있습니다
  • 사용자는 메모를 편집 할 수 있습니다
  • 사용자는 메모를 삭제할 수 있습니다
  • 브라우저 창을 닫으면 메모가 저장되고 사용자가 돌아 오면 데이터가 검색됩니다.

보너스 기능 

  • 사용자는 마크 다운 형식으로 메모를 작성하고 편집 할 수 있습니다. 저장하면 Markdown이 HTML로 변환됩니다.
  • 사용자가 메모를 작성한 날짜를 볼 수 있습니다

유용한 링크와 자료 

프로젝트 예 


https://codepen.io/nickmoreton/pen/gbyygq 


2. 크리스마스 조명 


계층 : 1 — 초보자


설명 : Christmas Lights 응용 프로그램은 개발 재능에 의존하여 매혹적인 조명 디스플레이를 만듭니다. 당신의 임무는 7 개의 색깔의 원을 연속으로 그리고 타이머에 따라 각 원의 강도를 변경하는 것입니다. 원이 밝아지면 이전 선이 원래 강도로 돌아갑니다.


이것은 크리스마스 휴일 동안 표시되는 것과 유사한 졸졸 흐르는 빛의 효과를 시뮬레이션 합니다.


사용자 스토리 

  • 사용자는 버튼을 눌러 디스플레이를 시작 및 중지 할 수 있습니다
  • 사용자는 강도 변화를 제어하는 ​​시간 간격을 변경할 수 있습니다

보너스 기능 

  • 사용자는 각 원을 채우는 데 사용되는 색상을 선택할 수 있습니다
  • 사용자는 강도 값을 지정할 수 있습니다
  • 사용자는 행에서 원의 크기를 변경할 수 있습니다
  • 사용자는 디스플레이에 포함 할 행 수를 지정할 수 있습니다. 1 ~ 7 개의 행을 선택할 수 있습니다

유용한 링크와 자료 

프로젝트 예 


https://codepen.io/tobyj/pen/QjvEex 


3. FlipImage 


계층 : 1 — 초보자


설명 : 리치 웹 애플리케이션은 이미지를 사용하여 사용자 인터페이스 및 사용자 경험 (UI / UX)에 가치를 더하기 때문에 웹 개발자는 이미지 조작의 기본 사항을 이해해야 합니다.


FlipImage는 이미지 조작의 한 측면 인 이미지 회전을 탐색합니다. 이 앱은 2x2 매트릭스로 표시되는 단일 이미지를 포함하는 사각형 패널을 표시합니다. 각 이미지에 인접한 일련의 위, 아래, 왼쪽 및 오른쪽 화살표를 사용하여 사용자는 이미지를 세로 또는 가로로 뒤집을 수 있습니다.


이 앱을 구현하려면 기본 HTML, CSS 및 Javascript 만 사용해야 합니다. 이미지 패키지 및 라이브러리는 허용되지 않습니다.


사용자 스토리 

  • 사용자는 2x2 매트릭스에서 반복되는 단일 이미지를 포함하는 창을 볼 수 있습니다
  • 사용자는 이미지 옆에 있는 위, 아래, 왼쪽 및 오른쪽 화살표 세트를 사용하여 이미지 중 하나를 수직 또는 수평으로 뒤집을 수 있습니다

보너스 기능 

  • 사용자는 입력 필드에 다른 이미지의 URL을 입력하여 기본 이미지를 변경할 수 있습니다
  • 입력 필드 옆에있는‘표시’버튼을 클릭하여 새 이미지를 표시 할 수 있습니다
  • 새 이미지 URL을 찾을 수 없으면 오류 메시지가 표시됩니다.

유용한 링크와 자료 


프로젝트 예 


https://codepen.io/seyedi/pen/gvqYQv 


4. 퀴즈 앱 


계층 : 1 — 초보자


설명 : 퀴즈 응용 프로그램에서 질문에 대답하여 지식을 연습하고 테스트합니다.


개발자는 다른 개발자의 코딩 기술을 테스트하기 위한 퀴즈 응용 프로그램을 만들 수 있습니다. (HTML, CSS, JavaScript, Python, PHP 등…)


사용자 스토리 

  • 사용자는 버튼을 눌러 퀴즈를 시작할 수 있습니다
  • 사용자는 4 가지 가능한 답변으로 질문을 볼 수 있습니다
  • 답변을 선택한 후 다음 질문을 사용자에게 표시하십시오. 퀴즈가 끝날 때까지 이 작업을 수행하십시오.
  • 결국 사용자는 다음 통계를 볼 수 있습니다.
  1. 퀴즈를 마치는 데 걸린 시간
  2. 그는 얼마나 많은 정답을 얻었습니까
  3. 퀴즈 통과 또는 실패 여부를 나타내는 메시지

보너스 기능 

  • 사용자는 퀴즈 결과를 소셜 미디어에서 공유 할 수 있습니다
  • 응용 프로그램에 여러 퀴즈를 추가하십시오. 사용자는 어느 것을 선택할 수 있습니다
  • 사용자는 계정을 만들고 모든 점수를 대시 보드에 저장할 수 있습니다. 사용자는 퀴즈를 여러 번 완료 할 수 있습니다


유용한 링크와 자료 

프로젝트 예 


https://codepen.io/FlorinPop17/pen/qqYNgW 


React로 빌드 된 퀴즈 앱 (Heroku에서 호스팅 될 때까지 기다립니다)


5. 로마 숫자를 10 진수로 변환 


계층 : 1 — 초보자


설명 : 로마 숫자로 표시되는 숫자 체계는 고대 로마에서 유래했으며 유럽 전역에서 후기 중세까지 숫자를 쓰는 일반적인 방법으로 남아 있습니다. 오늘날 사용되는 로마 숫자는 각각 고정 정수 값을 가진 7 개의 기호를 사용합니다.


아래 표의 기호-값 쌍을 참조하십시오.

  • I — 1
  • V — 5
  • X — 10
  • L — 50
  • C — 100
  • D — 500
  • M — 1000

사용자 스토리 

  • 사용자는 입력 필드에 로마 숫자 하나를 입력 할 수 있어야 합니다
  • 사용자는 버튼을 눌러 입력 한 로마 숫자에 해당하는 10 진수 (10 진)를 포함하는 단일 출력 필드에서 결과를 볼 수 있습니다.
  • 잘못된 기호를 입력하면 사용자에게 오류가 표시됩니다


보너스 기능 

  • 내가 입력하면 사용자가 자동으로 변환되는 것을 볼 수 있습니다
  • 사용자는 10 진수를 로마자로 변환 할 수 있어야 합니다 (그 반대)

유용한 링크와 자료 

https://en.wikipedia.org/wiki/Roman_numerals 


프로젝트 예 

https://www.calculatorsoup.com/calculators/conversions/roman-numeral-converter.php 


6. 도서 찾기 앱 


계층 : 2 — 중급


설명 : 사용자가 검색어 (제목, 저자 등)를 입력하여 책을 검색 할 수 있는 응용 프로그램을 만듭니다. 결과 책을 모든 해당 데이터와 함께 페이지의 목록으로 표시하십시오.


사용자 스토리 

  • 사용자는 입력 필드에 검색어를 입력 할 수 있습니다
  • 사용자는 쿼리를 제출할 수 있습니다. 해당 데이터 (제목, 저자, 게시 날짜, 그림 등)가 포함 된 도서 배열을 반환하는 API를 호출합니다.
  • 사용자는 페이지에 나타나는 책 목록을 볼 수 있습니다

보너스 기능 

  • 목록의 각 항목에 대해 책에 대한 자세한 정보가 있는 외부 사이트로 사용자를 보내는 링크를 추가하십시오.
  • 반응 형 디자인 구현
  • 로딩 애니메이션 추가

유용한 링크와 자료 


Google 도서 API를 사용할 수 있습니다


프로젝트 예 


https://codepen.io/chasebank/pen/wpQBKV 

https://fethica.github.io/BookSearch-React/ 


7. 카드 메모리 게임 


계층 : 2 — 중급


설명 : 카드 메모리는 카드를 클릭하여 그 안에 있는 이미지를 보고 다른 카드 아래에서 일치하는 이미지를 찾아야 하는 게임입니다.


사용자 스토리 

  • 사용자는 n x n 개의 카드가 있는 격자를 볼 수 있습니다 (n은 정수). 모든 카드는 처음에 아래로 향합니다 (숨겨진 상태) 
  • 사용자는 버튼을 클릭하여 게임을 시작할 수 있습니다. 이 버튼을 클릭하면 타이머가 시작됩니다
  • 사용자는 카드를 클릭하여 그 아래에 있는 이미지를 공개 할 수 있습니다 (표시 상태로 변경). 사용자가 두 번째 카드를 클릭 할 때까지 이미지가 표시됩니다

사용자가 두 번째 카드를 클릭하면 :

  • 일치하는 카드가 있으면 게임에서 2 장의 카드가 제거됩니다 (숨기거나 제거하거나 표시 상태로 유지)
  • 일치하지 않으면 2 장의 카드가 원래 상태 (hiddenstate)로 돌아갑니다.
  • 모든 경기가 발견되면, 사용자는 게임을 마치는 데 걸린 시간을 보여주는 카운터와 함께 축하 메시지를 보여주는 대화 상자를 볼 수 있습니다

보너스 기능 

  • 여러 수준의 난이도 (Easy, Medium, Hard) 중에서 선택할 수 있습니다. 난이도 향상 : 완료에 소요되는 시간 단축 및 / 또는 카드 수 증가
  • 사용자는 게임 통계를 볼 수 있습니다 (승리 한 횟수 / 잃은 횟수, 각 레벨에 가장 적합한 시간)

유용한 링크와 자료 

https://en.wikipedia.org/wiki/Concentration_(game) 


프로젝트 예 

https://codepen.io/zerospree/full/bNWbvW 

https://codepen.io/hexagoncircle/full/OXBJxV