[ 목차 ]
1. 프레임워크 특징 및 장점
2. 프레임워크 종류 (프론트엔드/ 백엔드 프레임워크)
3. 프레임워크 vs 라이브러리
1. 프레임워크 특징 ?
프레임워크란 개발을 보다 쉽고 간편히 할 수 있도록 도와주는 도구.
- 프레임워크가 없다면 메모리 구조나 코드 재사용을 위한 설계까지 진행하기 때문에 시간과 비용이 많이 소모된다.
- 언어별 프레임워크마다 구조화되어있기에 다룰줄 안다면 유지보수에도 도움이 된다.
프레임워크 사용해야하는 이유(장점) ?
- 구조화(유지보수)
- 시간단축(인건비)
2. 프레임워크 종류
목적(프론트엔트/백엔드)이나 언어에 따라 다양한 프레임워크가 존재한다.
정적 사이트 제작 :각 언어마다 백엔드 웹프레임워크로 가능하나, (js : express, java : spring, python:django, flask)
정적 사이트는 페이지 전환마다 html, css, js가 모두 reload되는 비효율적인 단점이 있음.
SPA(Single Page Application) : 정적 사이트와 반대로, ajax 등의 기술을 이용해 필요한 부분만 가져온다.
SPA 구현이 가능하도록 도와주는 JS 프론트엔드 프레임 워크들.
프론트엔드 프레임워크(Front-End Framework)
| 프론트엔드 언어 | 프레임워크 |
| js | React, Angular, Vue.js |
(V가 view임) |
물론 각 프론트엔드 프레임워크에서도 UI프레임워크 등 세부로 사용할수도 있음.
*JAVA의 경우 spring이 애플리케이션단 프레임워크로만 생각하고 있었는데 자바는 ui언어가 아니므로 아예제외. jsp도 결국 html로 표기되긴하지만 MVC 구성파일이 다 VIEW용이 아님(2022.9.23)
1) React
- facebook에 개발된 선언형(declarative) JS lib. 높은 유입 트래픽 가진 웹페이지의 동적 UI개발/운영에 사용됨.
- 가상 DOM을 사용하기에 웹과 앱 프론트엔드 개발 위한 빠른 렌더링 속도 보장.
- 컴포넌트(데이터 입력시 지정 사용자 인터페이스 출력)기반 웹 App 반응형 뷰 레이어. 프레임워크이자 라이브러리.
2) Angular
- google에 의해 개발되었고 Typescript 기반 강력하고 효율적인 JS프레임워크 중 하나.
- 구성요소 기반 스타일과 트리 뷰(Tree-View) 구조 통해 세련된 SPA를 개발 가능함.
- 프로젝트 생성부터 테스트, 빌드, 배포까지 모든것 가능하나 틀 정해져 있어 코드 자율성은 제한받는 편
3) Vue.js
- 가장 단순한 프레임워크 중 하나. 고성능의 SPA 구축 가능.
- 웹 App 사용자 인터페이스 만들기 위해 사용하는 오픈 소스 자바스크립트 프레임워크.
- 기존 js 라이브러리 사용 중인 프로젝트에 뷰 도입하기 쉽게 설게되어 있어 사용이 간편하여 단순하고 유연함.
프론트엔드 프레임워크를 검색하는데 대부분이 JS기반으로 설명되는걸 보며 JS의 위력(?)이 느껴졌다.
넷플릭스(Netflix), 링크드인(LinkedIn), 페이팔(PayPal), OK큐피드(OKCupid), BBC World News 등의
여러 웹 앱이 자바스크립트 기반으로 개발되었다.
백엔드 프레임워크(Back-End Framework)
| 백엔드 언어 | 프레임워크 |
| js | express |
| java | spring |
| python | django, flask |
1) JS : 익스프레스(Express)
- 웹 어플리케이션 구축에 사용되는 JS(Node.js)용 무료 오픈소스 프레임워크. API를 만들고 웹 애플리케이션 구축가능.
- js기반으로 다른 언어 프레임워크에 비해 독창적이나 노드의 강력한 기능을 그대로 활용 가능한 장점.
2) java : 스프링(Spring)
- 자바 오픈소스 애플리케이션 프레임워크. 특히 우리나라 IT회사들이 많이 사용함(전자정부 표준 프레임워크).
- 규모가 커서 많은 트래픽 수용해야할 때, 스프링이 성능과 안정성 측면에서 탁월.
- 지원하지 않는 라이브러리도 간단히 감싸 사용할 수 있어 많은 라이브러리가 스프링에서 지원되고 분리하기도 쉬움.
3) python : 장고(django), 플라스크(flask)
- 장고(django) : 대표 웹 프레임워크. 로그인, 인증, 파싱 등 웹 기능들 쉽게 탑재 가능하며 개발 생산성도 높음
- 플라스크(flask) : 장고보다 조금 작은 프레임워크. 특별한 도구나 lib 필요없어 마이크로 프레임워크라 불림.
3. 프레임워크 vs 라이브러리 ?
Library :내가 코드를 컨트롤 하는건지와, Framework :누군가의 규칙을 따라 코딩하는건지에 따라 나뉜다.
둘다 누군가의 코드들.
| Library | Framework | |
| 공통점 | 누군가의 코드들을 가져와 쓰는것. | |
| 특징 | 쉽게 대체 가능 | 대체 불가. |
| 문서(설명)가 따라오나 강제적이지 않음 | 규칙과 문서가 따라옴. | |
| 개발자가 원할때 불러와서 시간 절약할 수 있음 | 템플릿, 코드, 컨트롤러나 뷰 등 규칙을 따르면 정상 작동 함 |
|
| 예시 | JQuery, React (ex) JQuery JQuery 대신 다른 lib 사용할수도 있음. 쉽게 대체할 수 있기 때문 |
django, React (ex) django 어드민패널 이용시 admin.py, url 변경시 url.py 수정하면 됨. 장고 시작시 두 파일 부르는 규칙 존재 |
* React는 홈페이지에서 라이브라고 설명한다.
폴더구조나 컴포넌트명 같은게 없으나 컴포넌트를 불러 인터렉티브하게 만들고
states, props 같은걸 컴포넌트에게 제공하기 때문에 프레임워크라고도 한다.
vue도 그런데 어떻게 말하든 상관은 없으나 개념은 알아둘것-!
[ 참고 링크들 ]
ㅇ 라이브러리? 프레임워크? 차이점 아직도 모름? 5분 순삭
https://youtu.be/t9ccIykXTCM
ㅇ 비전공자도 이해할 수 있는 프론트엔드,백엔드의 모든 것
https://spartacodingclub.kr/blog/6151aaad4002ca7968b1005e#framework
ㅇ Side Project Tips #프론트엔드 - 빠르게 빌드하는 UI프레임워크 공개
https://youtu.be/QTLLxMMgEvg
[ 프론트엔드 프레임워크 예시 Top5 ]
얘는 작성하긴 했으나 본문 내용관 무관해서 뺄까하다가 그냥 넣는다- 세번째 링크에서 참고한 내용.
1. BOOTSTRAP : html, css, js 툴킷/프레임워크. 방대한 js, css가 클래스명과 있어 html에서 이용하기 유용함.
컴포턴트 많고.. 문서 확인하고, 클래스명확인해야 함. 폼, 모달, 리스트, 쉐도우.. 없는게 없음
2. Foundation. bootstrap과 비슷하나, 프레임워크 활용한 표가 안나는게 장점임. 더 세련되고 프로처럼 활용 가능.
템플릿도 더 쿨함. 문서 보면 bootstrap과 비슷함. 클래스명이나 css에 기반해 있음.
이제 리엑트
3. Gestalt : 핀터레스트가 만듬. 아바타, 박스, 헤딩, 모달.. 전체 리스판시브 디장니. 리액트를 포함한 프레임워크임.
핀터레스트처럼 복잡하고 아름다운 디자인도 가능함
4. Ant design 더 완성된 프레임웤. 다양한 컴포넌트 있음. 소셜넷웤에서 멘션하는거도 있음
5. Atlas Kit. 빗벜킷 만든 팀이 만듬. 활용은 하지 않음(문서가 맘에 안듬.
3, 4가 좋아보임..
끝.
'웹 개발 공부' 카테고리의 다른 글
| pc 환경 설정 : JDK, IDE(IntelliJ), tomcat 설치 - 1day (0) | 2023.01.02 |
|---|
