✔️FrameWork(프레임워크) :
- 프로그래밍에서 특정 운영 체제를 위한 응용 프로그램 표준 구조를 구현하는 클래스와 라이브러리 모임.
- Frame(틀, 규칙or법칙) + Work(일, 소프트웨어의 목적) 단어 그대로 풀어 봐도 비슷한 내용이다.
✔️Front-end FrameWork(프론트엔드 프레임워크) :
- 목적에 필요한 것을 고민할 필요 없이 이용할 수 있도록 일괄로 가져다 쓰도록 만들어 놓은 '구조화된 틀' (목적에 따라 효율적으로 구조를 짜놓은 개발 방식) 을 말한다.
- 프레임워크의 틀 안에서 코드를 작성, 라이브러리에서 필요한 코드 호출 → 개발자가 직접 모든 기능을 처음부터 만들지 않고 필요한 부분만 채워 빠르게 개발할 수 있도록하기 위한 목적을 갖는다.
✔️프레임워크를 이용했을 때의 장점
프레임워크를 이용하여 개발을 한다면, 이미 구조화 하여 만들어 놓은 코드를 호출하여 사용하기 때문에 일관성과 표준화라는 부분에서 아래와 같은 장점 갖는다.
- 개발 시간 단축: 미리 만들어진 구성 요소를 사용하여 개발 시간을 절약할 수 있다.
- 코드 품질 향상: 일관성과 표준화를 유지하여 코드 품질을 향상시킬 수 있다.
- 유지보수 편의성: 코드 구조가 일관성 있게 구성되어 유지보수가 편리하다.
- 팀 개발 효율성 증대: 팀원 간의 협업을 용이하게 한다.
반대로 프레임워크 없이 개발을 한다면? 혼자하는 개발이 아닌 협업이라는 점에서 위 장점의 반대되는 부분이 더욱 크게 부각될 것을 예측해볼 수 있다.
✔️Front-end 프레임워크와 라이브러리가 등장하게 된 이유 :
동적인 웹 페이지를 보다 효율적으로 유지 보수하고 관리할 수 있도록 하기 위함이다.
정적인 웹 페이지는 웹 서버에 이미 저장되어있는 HTML 문서를 클라이언트에게 전달하여 받은 페이지이다. 기업을 소개하는 페이지라면, 단순히 기업 정보를 전달하기 위한 목적이기 때문에 사용자와의 상호작용은 중요하지 않은 요소로 볼 수 있다. 이러한 경우에는 단순히 HTML과 CSS의 구성만으로도 충분히 멋진 웹 페이지를 만들 수 있다.
반면, 동적인 웹 페이지는 사용자의 행동 흐름에 따라 구성을 다르게 해준다. 사용자의 요청 정보를 처리한 후 제작된 HTML 문서를 클라이언트가 전달받게 된다.
최근에는 동적인 페이지가 주를 이루고 있어서 웹 페이지보다 웹 애플리케이션이라는 용어가 더 어울릴 정도로 사용자와의 상호작용을 처리하기 위한 상태 변화가 많아졌다. 이를 자연스러운 유저 인터페이스로 만들어주기 위해서 Front-end 프레임워크 / 라이브러리가 등장하게 된 것이다.
React(리액트), Angular(앵귤러), Vue.js(뷰) 3가지가 대표적으로 많이 언급되고 비교되고 있는 Front-end 프레임워크이며, 각각의 Front-end 프레임워크 / 라이브러리 들은 추구하는 방향과 특징이 다르다.
✔️ React(리액트) / Angular(앵귤러) / Vue.js(뷰) 특.장점 :
그중에서 React는 아래 특장점으로 인해 개발자들의 선호도가 높다고 한다.
- 단방향 데이터 흐름으로 구성되어 웹 어플리케이션이 거대해질수록 디버깅과 추적이 용이하다.
- React의 Virtual DOM은 성능이 아주 좋아서 잦은 UI 렌더링에도 DOM에 부담이 가지 않는다.
- React는 템플릿이 없고 바닐라 자바스크립트와 html 마크업으로 구성되었으며 UI를 함수 단위로 추상화해 개발 경험을 높여줬다.
- 크로스 플랫폼에도 유리하다. React Native의 등장으로 웹에서 모바일로 전환하는 과정이 크게 줄었다.
💻 React
데이터가 변할 때마다 화면을 새로 띄우는 대신, 필요한 곳만 업데이트 해주는 형식의 Virtual DOM을 사용하여 빠른 로딩 속도와 반응성 높은 UI 구현 가능 하단 것이 가장 큰 차별점이자 특징이다.
Virtual DOM :
변화가 발생하여 DOM에 적용해야 할 때, Virtual DOM이라는 DOM을 추상화한 가상의 객체에 우선 적용시켜 달라진 부분만 실제 DOM에 업데이트하는 방식이다. 따라서 기존 DOM을 사용하는 방식보다 더 빠르고, 불필요한 업데이트를 줄일 수 있다.
JSX : (초보자인 글쓴이는 직접 사용해 봐야 알것같다. )
- JSX(Javascript Syntax eXtension)는 Javascript 확장한 문법이다.
- JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다.
- 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.
컴포넌트(Component) :
UI를 구성하는 개별적인 뷰 단위로서, UI 개발을 레고라고 한다면 컴포넌트는 블록 역할을 한다. 이러한 블록을 조립하여 하나의 완성품을 만드는 것과 같다. 예를 들어, 웹 애플리케이션의 여러 곳에 버튼이 필요하다면, 공통된 하나의 버튼 컴포넌트를 생성하고 그 컴포넌트를 필요한 곳에 가져다 사용하면 된다.
- React로 만들어진 앱을 이루는 코드 최소 단위
- 재사용 가능한 틀
✔️React 앱을 만들기 위한 도구
각 공식 홈페이지에서 다운 받아 설치 가능하다.
- Node.js : https://nodejs.org/en/
- Visual Studio Code같은 코드 편집기
- Chrome, Safari, Edge 등 최신버전의 브라우저
- 프로젝트 관리를 위한 Git
_Sun 08-Dec-2024
앞으로 배우게 될 프론트엔드 프레임워크에 대해서 사전에 조사를 해본내용이나, 대부분이 해외내용을 복사 붙여 넣기 수준이라 비슷비슷하다. 명확하게 이해되지 않는 부분도 많아 좀더 찾아보고 나름대로 필요한 부분만 정리를 해보았다.
추후 공부하면 수정할 사항들이 많을 것 같다.
