새 JavaScript 프레임워크를 학습할 때 해결해야 할 주요 과제 > 시티즌 인사이트

본문 바로가기

시티즌 커뮤니티

시티즌 인사이트

IT&개발 정보 새 JavaScript 프레임워크를 학습할 때 해결해야 할 주요 과제

페이지 정보

작성자 GrapeCity 작성일 22-11-07 14:22 조회 135회 댓글 0건

본문

db3c7cc44d8b932f1f3b25fdfa6c31e5_1668130274_5986.png

개발자는 개발 과정에서 많은 과제에 직면하지만 가장 중요한 과제는 개발을 시작하기 전에 발생하는 경우가 있습니다. 일부 프로젝트를 수행하려면 새 프레임워크를 학습하거나 학습할 새 프레임워크를 선택해야 합니다. 프로젝트를 완수하기 위해 새 프레임워크의 크기, 성능, 확장성을 비롯한 다양한 기타 요소를 평가해야 합니다. 

하지만 다양한 프레임워크를 평가하고 프로젝트에 가장 적합한 프레임워크를 선택했다고 해서 과제가 끝나는 건 아닙니다. 새 프레임워크의 학습과 관련하여 피할 수 없는 학습 곡선이 있습니다. 해결해야 할 과제는 익숙지 않은 시스템을 사용하여 익숙한 작업을 수행하는 업무에 적응하는 일과 같이 간단할 수도 있고 팀에 적합하지 않은 프레임워크를 사용하는 일과 같이 까다로울 수도 있습니다.

개발자가 새 프레임워크를 학습할 때 직면하는 가장 일반적인 몇 가지 과제를 살펴보겠습니다.


관련성 결정


첫 번째로 마주칠 수 있는 과제는 작업하기에 가장 적절한 프레임워크를 결정할 때 발생합니다. 가장 일반적인 트렌드를 찾으며 React, Vue 또는 Angular와 같이 시장에서 인기가 좋은 프레임워크 중 하나를 선택하는 경향이 있습니다.


하지만 Backbone js, Meteor, Nest 등의 많은 프레임워크과 같이 고려해야 할 다른 프레임워크가 있습니다. 적합한 프레임워크를 찾는 일은 각 프레임워크의 사양과 함께 우리의 요구 사항에 맞출 수 있도록 좁혀줍니다. 이는 단순히 트렌드에 맞추는 것이 아닌 우리에게 정말 잘 맞는 프레임워크를 선택할 수 있도록 해줍니다.


우리가 마주치는 또 다른 과제는 고려 중인 새로운 프레임워크의 크기, 확장성 및 다기능성을 평가하는 것입니다. 기술적인 세계에서 요구 사항과 목적은 항상 변화합니다. 프레임워크를 선택할 때는 현재 크기와 프로젝트의 예상 크기 모두를 고려하고 있는지 확인해야 합니다. 이는 코드를 쉽게 빌드하고, 배포하고, 이동할 수 있도록 해줍니다.


예를 들어, Angular의 빌드는 React 또는 Vue와 같은 다른 트렌드 프레임워크와 비교할 때 가장 무겁습니다. 뛰어난 대화형의 응용 프로그램을 빌드하지 않고 몇 개의 대화형 컴포넌트 기능만 필요하다면 AlpineJS가 좋은 학습의 선택이 될 수 있습니다. 개발자 친화적인 문서와 매우 작은 크기(거의 4KB)를 차지하는 짧은 학습 곡선이 있습니다.


경쟁 제품을 이기기 위해서라면 시장 출시에 필요한 시간이 또 다른 고려 요인입니다. 예를 들어, React에는 시장 가치에 짧은 시간이 소요됩니다. 이는 React가 많은 상위 조직 내에서 널리 채택되는 프레임워크가 될 수 있는 이유 중 하나입니다.


Vue 및 LitElement와 같은 다른 프레임워크도 빠른 시장 출시 시간을 제공합니다. 커뮤니티는 느리게 성장하지만 학습 곡선이 짧습니다. 이로 인해 웹 응용 프로그램을 빌드하고자 하는 소규모의 개발자 팀에 가장 적합합니다. 개별 개발자에게도 잘 어울립니다. 하지만 여전히 커뮤니티 지원과 함께 팀이 새로운 프레임워크를 탐색하기 위해 학습하는 동안 여러 가지 커지는 문제점을 예상하게 됩니다.


새로운 프레임워크를 학습할 때 가장 큰 장애물은 익숙한 작업을 완료하는 익숙하지 않은 방식을 이해하는 데 시간이 걸린다는 것입니다.


예를 들어, 전체적으로 다른 메서드를 사용하여 컴포넌트를 만들어야 하는 경우를 발견할 수 있습니다. 이와 유사하게 디버그하고, 소스 트리와 연결하고, 파일을 여는 등의 방법을 다시 학습해야 할 수 있습니다. 간단한 작업은 간단하지 않은 양의 시간을 착수하여 끝날 수 있습니다. 이 새로운 프레임워크를 쉽게 학습하고 효율성을 높이는 능력은 새로운 프레임워크가 얼마나 잘 문서화되었는지에 따라 크게 달라질 수 있습니다.


전체 팀이 새로운 프레임워크에 대한 스킬을 높이려고 할 때 팀의 크기와 스킬 집합을 고려해야 할 수도 있습니다. 많은 새 개발자가 있는 성장 중인 팀을 관리하고 있다면 새로운 프레임워크의 개념을 학습하는 데 조금 더 오래 걸릴 수 있음을 알 수 있습니다. 이는 개발 팀을 느려지게 하고 작업을 시작하는 데 있어 지연을 시킵니다. 예를 들어 React에 대한 팀의 스킬을 높이려고 하는 경우 JSX의 개념은 새 개발자들에게 이해할 수 없는 전혀 색다른 것처럼 보일 수 있습니다.



일을 바로 실행하기에 가장 적합한 방법은 무엇입니까?


많은 프레임워크에는 새 프로젝트를 빠르게 생성할 수 있는 CLI 도구가 포함됩니다. 하지만 일부 개발자 팀에는 맞지 않는 제한된 프로젝트 구조를 도입하는 경우가 있습니다. 특정 팀과 특정 프로젝트에 적합한 아키텍처를 제공하는 프레임워크를 선택하는 일은 또 다른 과제입니다.


작업을 단순하게 하려면 MVC 아키텍처가 아주 적절한 선택이 될 수 있습니다. 반면에 클라이언트 서버 아키텍처를 설정하려면 프런트엔드 및 백엔드에 대한 별도의 프레임워크를 조사해야 합니다.


예를 들어 React와 같은 프레임워크는 create-react-app이라는 단순 원스톱 명령을 제공합니다. 이는 실행에 필요한 파일로 프로젝트를 설정합니다. 요구 사항에 따라 명령을 사용하지 않고 처음부터 설정할 수도 있습니다.


이와 유사하게 Vue JS는 이보다 더 나은 설정 시간을 제공합니다. Vue의 기능 일부만 사용하고자 한다면 CDN을 HTML 스크립트에 연결하여 Vue 컴포넌트를 추가할 수 있습니다. 더 큰 프로젝트의 경우 npm을 사용하여 설치할 수 있습니다. npm install vue 명령을 사용하여 이 작업을 수행합니다. Vue에는 가벼운 빌드와 짧은 학습 곡선이라는 이점도 있습니다.


상위 프레임워크에 몇 분 내에 프로젝트를 설정할 수 있는 CLI 명령이 있지만 설정 흐름을 강제로 따르게 하는 결점이 있습니다. 프로젝트가 커지면 구조를 쉽게 변경할 수 없으므로 이는 추가적인 문제를 일으킬 수 있습니다. 일을 수행하기에 번거롭게 됩니다.


예를 들어 React의 create-react-app을 사용하는 경우 모든 npm 모듈을 내부적으로 캡슐화합니다. 이로 인해 개발자가 간단하게 작업할 수 있습니다. 여전히 코어 모듈과 상호 작용하는 더 복잡한 모듈을 설치하려는 경우 npm run eject를 실행하여 구성 파일 및 종속성을 제어해야 합니다. 추가적인 문제점이 또 있습니다. React 프로젝트를 추출했으면 이전 구성으로 돌아갈 수 없습니다.


CLI 세대 도구가 제한되더라도 향후 구성 및 종속성 유지는 압도적이 됩니다. 이는 특히 개발 팀의 멤버가 계속해서 변화할 때 더욱 그러합니다. 우리에게 있는 또 다른 옵션은 의도된 구성 파일에 대한 액세스 권한을 제공하는 자체 스크립트를 만드는 것이지만, CLI 구성이 추출되진 않습니다.


위에 언급된 프레임워크는 프런트엔드 기능만을 위한 것입니다. 백엔드가 필요한 경우 별도의 프레임워크를 설정하고 웹 응용 프로그램이 예상대로 실행되도록 둘 사이에서 작업하도록 해야 합니다.


하지만 원하는 프레임워크로 MVC 아키텍처를 모방할 수 있는 방법이 있다면 어떨까요? 사용 가능한 많은 통합 도구 중 하나를 사용하여 이를 수행할 수 있습니다. 가장 유명한 도구는 Meteor입니다. 이를 사용하면 클라우드에서 바로 전체 스택의 JavaScript 응용 프로그램을 빌드할 수 있습니다.


Meteor는 오픈 소스 프레임워크로 JavaScript에서 웹, 모바일 및 데스크톱 응용 프로그램을 만들 수 있습니다. 호스팅과 모니터링같은 기능도 제공합니다. Meteor를 사용하거나 포괄적인 커뮤니티 지원이 있는 유사한 도구를 사용하여 응용 프로그램을 빌드하는 학습은 팀이 효율적으로 응용 프로그램을 개발하고 확장하도록 도와줍니다.



"Hello World"를 넘어선 움직임


새로운 프레임워크를 설치할 때 코딩한 첫 번째 프로그램은 일반적으로 "hello world"입니다. 우리는 프레임워크가 올바르게 설치되었는지 확인하기 위해 기본 테스트 사례를 시행합니다. Angular 또는 Angular CLI를 사용한 React 또는 create-react-app을 사용하여 프로젝트를 만드는 경우 로고와 함께 단순한 웹 페이지를 렌더링합니다. 이는 상용구 코드입니다. 개발로 뛰어들기 전에 이러한 코드를 지우고 원하지 않는 리소스는 삭제합니다. IDE를 통해 빌드하는 동안 JavaScript에서 프레임워크 규칙을 따르도록 ESLint 및 Prettier 등의 린팅 패키지를 추가합니다.


프레임워크를 시작하기에 가장 좋은 방법은 기본 프레임워크 프로그래밍의 기본을 학습하는 것입니다. 프레임워크는 개선된 방식으로 광범위하게 이러한 개념을 활용합니다.


예를 들어 React를 학습하려는 경우 기본 프로그래밍 언어는 JavaScript입니다. 변수 및 상수 선언, 기능 정의 및 컨트롤 흐름과 같은 JavaScript의 일부 개념은 새로운 프레임워크 학습의 구성 요소입니다. 이러한 개념은 모든 프로그래밍 언어에 일반적입니다.


프런트엔드 관점에서 거의 모든 프레임워크에서는 html 및 css의 일부 방식을 작성해야 합니다. Angular 및 Vue는 직접 HTML 파일을 사용하고 React 및 Svelte는 jsx 및 svelte 파일을 사용합니다.


파일 이름이 다르더라도 태그 및 코드 스타일 지정은 동일하게 유지됩니다. 이와 유사하게 CSS는 스타일 지정에서 핵심 컴포넌트로 유지됩니다. CSS 스타일 및 다중 유형 선택기를 작성하는 여러 방법을 이해하는 것은 중요합니다.


Bootstrap 또는 Material 등의 디자인 프레임워크를 사용할 때도 CSS 기본 사항을 아는 것이 중요합니다. 이는 시나리오가 기존 디자인 모듈을 재정의할 수 있기 때문입니다 SASS와 같은 일부 고급 개념을 통해 더 읽기 쉬운 방식으로 CSS는 변수를 선언하고, 계산 기능을 수행하는 작업 등을 할 수 있습니다.


백엔드 프레임워크 사용에는 데이터의 계산 및 처리가 많이 포함됩니다. 따라서 컨트롤 문 및 데이터 조작 기술의 깊은 이해가 필요합니다. 또한 배열, 목록, 트리 등과 같은 데이터 구조의 기본적인 이해도 있어야 합니다. 비즈니스 로직에는 다양한 사용 사례를 효율적으로 해결하기 위한 다양한 알고리즘 기술이 포함됩니다.


백엔드 프레임워크로 작업하는 경우 데이터베이스와 연결성에 대해서도 알아야 합니다. 모든 프레임워크는 관계형 및 비관계형 모두 대부분의 모든 데이터베이스와 연결할 수 있습니다. 백엔드 프레임워크를 통해 데이터베이스에서 기본 CRUD 작업을 알아야 합니다. 이는 데이터베이스에서 가져와 필요한 경우 검색하는 모든 데이터를 저장하기 때문입니다.


이는 API 노출을 통해 이러한 데이터를 보내는 방법으로 이어집니다. 가장 일반적인 접근 방식은 REST API를 노출하는 것입니다. 다음 섹션에서 다룬 몇 가지 도구를 사용하여 이를 더욱 간단하게 만들 수 있습니다.



지원 생태계는 어떻게 되어 있습니까?


일반적으로 프레임워크 단독으로는 의도한 모든 기능을 구현하는 데 충분하지 않습니다. 이는 특히 대규모의 웹 응용 프로그램으로 작업하는 경우 더욱 그러합니다.


사용 보기가 제한된 하나의 도구는 상태 관리 도구입니다. 조직은 종종 React와 Redux 또는 Mobx와 같은 상태 관리 도구를 연결합니다. 컴포넌트의 상태(데이터)는 그 자체와 React에서 "prop drilling" 문제에 적용되므로 단일 전역 저장소에서 이 문제를 해결할 수 있습니다.


Mobx는 React만큼 인기가 없지만 학습 곡선은 매우 쉽고 작습니다. Mobx에서 제공하는 한 가지 이점은 여러 저장소가 허용된다는 것입니다. 또는 컨텍스트 API를 사용할 수 있습니다. React 16은 컨텍스트 API를 Redux 및 Mobx에 대한 경쟁 제품으로 도입하여 너무 긴 상용구 코드를 근절하였습니다.


라이브러리인 React와는 달리 Angular는 상태 관리에 패키지가 준비된 도구가 제공되는 전체 프레임워크이며 React가 실패하는 대부분의 사용 사례를 해결합니다. Angular에는 서비스가 충분하지 않은 대규모 응용 프로그램을 위한 상태 관리용 Ngrx가 있습니다.


동일한 개념이 백엔드 응용 프로그램에 적용됩니다. NodeJS를 예로 사용하여 Express는 노드가 있는 서버 측 응용 프로그램에서 광범위하게 사용되는 인기 웹 프레임워크 중 하나입니다. Express는 적은 코딩 상용구를 제공합니다. 대규모 응용 프로그램으로 확장도 가능합니다. 쉬운 라우팅 메커니즘을 위한 단순성과 유연성을 제공합니다. Express가 없으면 모든 API를 정의하고 vanilla 노드로 서비스를 라우팅하는 작업이 종종 번거로워집니다.


ORM(개체 관계형 모델)은 백엔드에서 사용되는 표준 도구 중 하나입니다. 이 도구는 데이터베이스 테이블 또는 문서를 백엔드 코드의 모델에 매핑하는 데 사용됩니다. 원시 쿼리를 작성하는 대신 데이터베이스에서 데이터를 가져오도록 쿼리를 작성하려는 경우 ORM은 데이터를 가져와 백엔드에 있는 모델에 매핑하도록 유연한 함수 호출을 제공합니다. 이는 간단한 코드 구조, 재사용 가능성 및 코드의 유지보수를 제공합니다. 초기 학습 곡선은 더 클 수 있지만 마스터하고 나면 코드의 추가 및 조작이 훨씬 더 쉬워집니다. Sequelize는 SQL 데이터베이스의 표준 ORM이며 Mongoose는 MERN 또는 MEAN 스택 코드베이스의 표준입니다.


시장에는 많은 프레임워크가 있으며 지속적으로 새 버전으로 업데이트되고 있습니다. 개발자로서 속도를 유지하는 것은 필수입니다. 새 프레임워크를 시작하기에 가장 좋은 방법은 공식 문서를 살펴보고 기본 사항을 이해하는 것입니다. 의도한 대로 진행되지 않을 때마다 콘솔 및 터미널을 확인하여 어떤 오류가 일어났는지 살펴보고 이에 따라 코드를 변경해보십시오. 그래도 작동하지 않는 경우 웹에서 오류 문을 검색하면 도움이 될 수 있는 몇 가지 포럼이나 스레드가 있을 것입니다.


일부 개념은 과도하거나 이해하기에 어렵게 들리는 경우가 있을 수 있습니다. 하지만 학습에 가장 좋은 방법은 이러한 개념을 실시간 테스트 프로젝트에서 구현하여 알아내는 것입니다. 테스트 프로젝트를 위해 한 시간 내에 구현할 수 있는 간단한 것으로 시작하십시오. 이 방법으로 작업이 버겁지 않고 프레임워크에 대한 감각을 익힐 수 있습니다.


새로운 프런트엔드 프레임워크를 학습하는 경우 GrapeCity JavaScript 제품군대한 테스트를 고려하십시오.

  • Wijmo(위즈모) : 강력한 성능의 그리드, 차트, 입력, OLAP 등 UI 컴포넌트
  • SpreadJS : 450가지 이상의 Excel 함수를 지원하는 글로벌 NO.1 엑셀 스프레드시트 컴포넌트
  • ActiveReportsJS : 가볍고 쉬운 프론트-앤드 리포트/보고서 컴포넌트

 
  • 페이스북으로 공유
  • 트위터로  공유
  • 구글플러스로 공유
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@grapecity.com | 전화 : 1670-0583 | 경기도 안양시 동안구 시민대로 230, B-703(관양동, 아크로타워) 그레이프시티(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 Copyright ⓒ 2022 GrapeCity inc.