40세 이상, 기술적 배경 지식 없이 2주 만에 프런트엔드 프레임워크를 배운 방법입니다.

지난 2주 동안 사전 지식이나 경험, 지도 없이 HTML, CSS, JavaScript의 기본을 빠르게 학습한 개인적인 경험을 공유했습니다. 그러나 당신의 목표가 나와 같은 풀스택 웹 개발자 또는 자신만의 제품을 만들 수 있는 독립 개발자가 되는 것이라면 이 세 가지 기본 기술 스택을 마스터하는 것만으로는 충분하지 않습니다. 그래서 이번 주에는 프론트엔드 프레임워크의 기본 사항을 빠르게 배우고 간단한 제품을 만드는 데 필요한 완벽한 초보자 가이드를 공유하겠습니다. 이 게시물에 포함된 모든 학습 리소스는 무료입니다!

학습을 마친 후 이 웹앱 과 같은 웹앱을 만들었습니다. 내 프로젝트를 배포하지 않고 대신 관련 튜토리얼의 프로젝트 예제를 사용한 점을 용서해 주세요. 여기 내 자신의 저장소가 있습니다. 실제로 샘플 프로젝트의 모든 효과를 90% 이상 복제했습니다. 배포하지 않는 이유는 나중에 논의됩니다. 보시다시피 이는 프런트엔드 및 백엔드 통신, 프런트엔드 애니메이션 디자인, 라이프사이클 후크 디자인, 백엔드 데이터 구조 디자인, 상태 관리, 경로 관리 등과 같은 많은 측면을 포함하는 비교적 완전한 프로젝트입니다. 리치 텍스트 편집기와 tailwindcss를 이 프로젝트에 통합하여 프런트엔드를 매우 전문적으로 보이게 만들었습니다. 나조차도 프론트엔드 프레임워크의 기본을 빠르게 익힐 수 있는데 왜 당신은 할 수 없습니까?

늘 그렇듯, 먼저 프론트엔드 프레임워크를 학습하는 과정에서 제가 겪은 우회 과정에 대해 이야기해 보겠습니다.

프런트엔드 프레임워크가 너무 많아서 초보자는 어떤 프레임워크를 선택해야 합니까?

이것은 초보자, 특히 독학 초보자에게 가장 혼란스러운 질문 중 하나입니다. 귀하의 기본 능력, 학습 경로 선택, 학습 능력, 단기 및 장기 목표, 심지어 귀하가 거주하는 국가 및 지역까지 포함하는 고도로 개인화된 질문이므로 표준적인 답변을 드리기가 어렵습니다. 초보자는 이러한 모든 요소 중에서 최상의 옵션을 평가하기 위한 지식과 업계 경험이 부족한 경우가 많습니다.

프런트엔드 프레임워크는 웹 앱을 구축할 때 사용하는 주요 프로그래밍 언어와 밀접하게 관련되어 있기 때문에 이는 중요한 문제입니다. 또한 덜 인기 있는 프레임워크를 선택하면 관련 커뮤니티 리소스를 찾기가 어려울 수 있으며, 강좌를 수강하고 다른 사람과 협력할 때 제약을 느낄 수도 있습니다. 오랫동안 이것에 대해 헷갈려 Flask와 Django를 배워보려고도 했으나 여러 가지 이유로 결국 포기했습니다.

이 문제에 대해 10,000 단어의 기사를 작성할 수 있지만 그것이 오늘 게시물의 요점은 아닙니다. 그래서 제 짧은 대답은 이렇습니다. 일자리를 찾고 있다면 React를 배우고 이를 메인 프레임워크로 만드는 것이 가장 좋습니다. 저처럼 사전 지식이 거의 없는 초보자이고 빠르게 배우고, 빠르게 구축하고, 향후 독립적으로 제품을 개발하고 싶다면 Vue3을 선택하세요. 학습 곡선은 상대적으로 부드럽고 초보자가 시작하기 쉽습니다.

초보자가 하나의 프레임워크만 배우는 것으로 충분합니까?

나는 한때 내 주요 프로그래밍 언어의 생태계에서 하나의 프런트엔드 프레임워크를 선택하면 모든 문제가 해결될 것이라고 생각한 적이 있습니다. 왜냐하면 주류 프레임워크에는 개발 시 모든 종류의 시나리오를 처리할 수 있는 매우 풍부한 생태계가 있기 때문입니다. 하지만 차츰 다른 강좌를 배워 제품을 만들어가면서 이 생각이 너무 순진했다는 걸 깨달았습니다.

예를 들어, 저는 현재 Alchemy University의 Solidity 부트캠프를 배우고 있습니다. 이 과정의 공식 전제 조건은 JavaScript에 대한 기본 지식입니다. HTML, CSS, JavaScript 뿐만 아니라 Vue3도 배웠기 때문에 이번 강좌를 수월하게 진행할 수 있을 거라 생각했습니다. 그런데 세 번째 주에 갑자기 그 주 프로젝트가 React의 프론트엔드로 구축되었다는 사실을 알게 되었습니다. 나는 어리둥절했다. 다행히 이번주 프로젝트는 간단했고 React의 기본만 필요했습니다. 그럼에도 불구하고 React의 기본을 빠르게 익히는데 반나절이 걸렸고, 드디어 주간 프로젝트를 성공적으로 마쳤습니다. 따라서 초보자로서 단일 기술 스택에 희망을 걸지 마십시오. 빠른 학습과 적응력은 우리에게 필수적인 기술입니다.

나의 프론트엔드 프레임워크 학습 전략

단순성, 실용성 및 목표 지향성

단 2주 만에 프런트엔드 프레임워크의 전문가가 될 것이라고는 기대하지 않습니다. Vue3은 React보다 초보자에게 더 친숙하지만 생태계는 Vue3 자체, Vite, Vue Router, Pinia 등과 같은 수많은 문서를 포함하여 풍부하고 콘텐츠로 가득 차 있습니다. 고품질의 프런트엔드 UI를 구축하려면 Element Plus와 같은 UI 라이브러리도 공부해야 합니다. 또한, 우리 제품에 특별한 기능이 있는 경우 웹 앱에 통합한 서식 있는 텍스트 편집기인 wangEditor와 같이 해당 기능을 위해 특별히 일부 라이브러리를 배워야 합니다.

2주 안에 이 모든 것을 배우는 것은 불가능하므로 Vue3의 핵심 기능을 파악하고 처음에는 전문가 수준의 프런트엔드를 구축하는 것을 목표로 삼았습니다.

Vue3 문서를 중심으로 연습 복잡성을 점차적으로 증가

저는 자율 학습 프로그래밍을 시작한 이후로 많은 문서를 검토했는데 Vue3가 가장 초보자에게 친숙한 문서 중 하나라는 점을 인정해야 합니다. 훌륭한 문서 작성 덕분에 프론트엔드 프레임워크를 배울 수 있었습니다. 따라서 타사 튜토리얼을 추천하는 대신 Vue를 배우고 싶은 사람들에게 Vue3 자체 문서를 핵심 학습 자료로 만들 것을 강력히 권장합니다.

좋은 학습 자료만으로는 프레임워크를 마스터하는 데 충분하지 않습니다. 프레임워크를 파악하는 가장 좋은 방법은 이를 사용하여 프로젝트를 구축하는 것입니다. 그러나 이 기사의 시작 부분에서 시연한 웹 앱을 구축하는 것은 좋은 생각이 아닐 수도 있습니다. 저는 실제로 공부하는 동안 두 개의 프로젝트를 만들었습니다. 첫 번째 프로젝트는 매우 간단했는데, 주로 프레임워크 사용에 대한 느낌을 얻고 일반적인 프로세스와 핵심 부분을 이해하기 위한 것이었습니다. 두 번째 프로젝트는 첫 번째 프로젝트의 확장으로, 프레임워크의 생태계 내에서 실제 웹 앱을 구축하는 데 필요한 리소스를 찾는 방법을 학습합니다.

학습 시간 및 일정

1. 나는 주로 일부 문서와 신중하게 선택된 두 개의 프로젝트 튜토리얼 등 가능한 학습 리소스를 분류하는 데 반나절을 보냈습니다. 문서에는 Vue3 문서 , Vite 문서 , Vue Router 문서 , Axios 문서 , Element+ 문서 및 Pinia 문서가 포함됩니다. Vue3 문서는 이들 중에서 가장 중요합니다.

   
   

2. 그런 다음 Vue 문서의 대부분을 읽는 데 약 3일 반이 걸렸습니다. 기본에 중점을 두고 있어 초보자라도 이 부분은 어렵지 않게 해낼 수 있다고 장담합니다. 하지만 후반부로 갈수록 일부 내용은 점점 흐릿해졌습니다. 초보자에게는 정상이며 괜찮습니다. 지금 당장 이해가 안 되는 부분은 메모하고 다음으로 넘어갔습니다. 모범 사례, TypeScript 및 고급 주제와 같은 일부 부분은 완전히 건너뛰기로 결정했습니다. 간단히 말해서, 가장 핵심적이고 기본적인 부분에만 집중한다면 3일 반이면 충분한 시간입니다. 나는 빨리 배우는 사람도 아니고 기초도 약해서 아마 그렇게 많은 시간이 필요하지 않을 것입니다.

   
   

3. 다음 날 반 동안 Traversy Media의 고전적인 무료 튜토리얼을 따라 작업 추적기라는 작은 프로젝트를 수행했습니다. 특히 여기서는 Brad의 교육 스타일에 대해 이야기하고 싶습니다. 그는 많은 독학자들에 의해 프로그래밍의 대부로 여겨지는 전설적인 인물임이 분명합니다. 선생님 강의를 볼 때마다 많이 배웁니다. 그는 기술 스택 내에서 배워야 할 모든 측면을 완벽하게 보여주기 위해 소규모 프로젝트를 사용하는 데 매우 능숙합니다. ** 하지만 신입생으로서 한가지 주의할 점은 기초 없이 그의 수업을 듣지 말라는 것입니다. ** 브래드의 강의 스타일은 매우 간결하고 우아하기 때문입니다. 기본기가 없으면 그의 속도를 따라가지 못할 수도 있다. 그래서 저는 의도적으로 이 작은 프로젝트 튜토리얼을 첫 번째 학습 단계가 아닌 두 번째 단계에서 계획했습니다.

   
   

4. 그의 튜토리얼을 진지하게 따라하셨다면 프레임워크를 사용하여 프런트엔드를 구축하는 느낌을 받으셨겠지만 동시에 더 많은 질문이 있으실 것입니다. 그랬기에 vite, vue Router, Axios, pinia의 문서를 빨리 찾아보고 싶었습니다. 이번에는 하루 반만 보냈습니다. vue3 프로젝트를 구축하기 위해서는 위의 기술 스택에 대한 기본 지식이 어떤 것이 필요한지 이미 대략적으로 알고 있기 때문에 이러한 내용에 중점을 둡니다. 그리고 상대적으로 복잡하지만 많이 사용되지 않는 내용들도 있어서 빠르게 찾아보았습니다. 한 번에 이해가 안 되면 그냥 넘어가세요.

   
   

5. 두 번째 주에는 상대적으로 복잡한 프로젝트를 구축하여 첫 주에 배운 기본 지식을 통합할 수 있을 만큼 자신감이 생겼습니다. 그리고 실제 웹앱을 구축하는데 필요한 요구사항에 따라 앞서 학습한 내용을 확장합니다. 이번에도 인기 있는 vue 튜토리얼 인 Traversy Media의 FireBlog를 선택했습니다. 이 튜토리얼은 John Komarnicki 가 설명합니다. 제가 이 튜토리얼을 선택한 이유를 설명하겠습니다.

   
   

• 이 프로젝트의 장점은 전문적인 프런트엔드 사용자 인터페이스와 Firebase의 도움으로 구현된 백엔드 API로 매우 완벽하다는 것입니다. 전체 프로젝트에는 프런트엔드 및 백엔드 통신, 프런트엔드 애니메이션 디자인, 라이프사이클 후크 디자인, 백엔드 데이터 구조 디자인, 상태 관리, 경로 관리 등과 같은 여러 측면이 포함됩니다. 심지어 공사 과정에서 문서를 읽었을 때 이해하지 못했던 내용도 많이 배웠습니다. 앞으로 웹앱을 개발하고 싶다면 실무 경험을 할 수 있는 좋은 기회입니다.

• 가장 큰 단점은 이 튜토리얼이 2년 전의 튜토리얼이므로 필연적으로 일부 기술 스택이 업그레이드되었다는 것입니다. 예를 들어 튜토리얼에서 사용한 vue-cli는 현재 유지보수 상태인데, 빌드할 때 vite를 사용했습니다. 또 다른 예는 튜토리얼에 사용된 서식 있는 텍스트 편집기가 오랫동안 업데이트되지 않았다는 것입니다. 저는 가벼우면서도 최신 유지 관리 기능이 있고 빌드할 때 vue3과 더 잘 통합되는 wangEditor를 사용했습니다.

  
  

6. 이 튜토리얼의 백엔드는 Firebase를 사용하여 빌드하지만 복잡하지는 않지만 우리의 실무 요구 사항을 충족하지 못할 수 있습니다. 예를 들어, 나의 이상적인 백엔드는 node.js+express+mongodb+mongoose로 구축된 편안한 API입니다. 따라서 저는 Firebase 백엔드를 구축하기 위한 튜토리얼을 따르지 않고 임시로 json-server를 사용하여 가상 백엔드를 구축하여 Restful API의 동작을 시뮬레이션했습니다. 이것이 제가 프로젝트를 온라인에 배포하지 않은 이유이기도 합니다. github 페이지와 vercel 모두 정적 웹 페이지만 배포할 수 있고 json-server 터미널은 로컬에서만 실행할 수 있으므로 배포할 수 없습니다. 이 튜토리얼을 따라갈 때 필요에 따라 선택하거나 이와 유사한 Firebase 백엔드를 구축할 수 있습니다.

   
   

7. 이 튜토리얼은 6시간 30분 동안 지속됩니다. 일반적으로 매일 한 시간씩 공부한다면 6일이면 충분합니다. 나이가 들수록 학습 속도가 느려집니다. 6일 이내에 빌드를 완료할 수 있습니다. 마지막 날에도 여전히 평소대로 이전 내용을 복습했는데, 가장 중요한 것은 2주간의 학습 동안 작성한 노트를 정리하고 좋은 치닝시트를 만드는 것입니다. 왜냐하면 나는 이 행동이 매우 중요하다고 생각했기 때문이다. 종종 학습을 마치고 한 달 뒤에 코드를 다시 열면 이해하지 못하거나 기억이 나지 않는 부분이 많습니다. 이 시점에서 새 프로젝트를 구축하려는 경우 메모와 치트 시트가 종종 유용할 수 있습니다.

몇 가지 최종 조언:

1. 이전에는 항상 "완벽한 튜토리얼"을 찾는 데 집착했습니다. 그러나 나중에 나는 실제로 완벽한 튜토리얼이 없다는 것을 발견했습니다. 두 번째 주에 배운 FireBlog 튜토리얼을 예로 들면, 단점이 많고 심지어 일부 부분도 우리 요구 사항을 충족하지 못합니다. 하지만 그래서 어쩌죠? 여전히 훌륭한 튜토리얼이자 보기 드문 실용적인 프로젝트입니다. 요구 사항을 충족하지 않는 부분만 업그레이드하거나 수정하면 됩니다.

   
   

2. 프론트엔드 프레임워크를 배우는 것은 지난 주에 이야기했던 자바스크립트를 배우는 것과 다소 비슷합니다. 2주 안에 모든 것을 성취할 것이라고 기대하지 마세요. 생태계에는 많은 콘텐츠가 있으며 지속적으로 업그레이드되고 있습니다. 말할 것도 없이, 앞서 논의한 것처럼 하나의 프레임워크를 학습하는 것으로 모든 측면을 정복할 것으로 기대하는 것은 비현실적이므로 이는 지속적인 학습 과정이 될 것입니다. 우리가 해야 할 일은 이 모든 것을 즐겨야 하며, 그것을 부담으로 여기지 않는 것입니다.

   
   

3. vue 또는 각도 대신 반응을 배우려는 경우 위에서 언급한 내용이 여전히 적용됩니다. 프론트엔드 프레임워크도 그렇구요, 학습 방법이나 학습 리소스를 선택하는 방향은 실제로 꽤 유사합니다.

   
   

#WebDevelopment #FrontendDevelopment #VueJS #JavaScript #LearningToCode #CodeNewbie #TraversyMedia #SelfImprovement #SelfTaught #CodingResources #React