jquery 와 vue, react, angular 에 대한 개념 문의드립니다.

Question

안녕하세요.기존 2개의 프로젝트 환경입니다.spring &#43; freemarker &#43; jqueryspring &#43; jsp &#43; jquery위의 프로젝트 처럼 freemarker 와 jsp 는 탬플릿 프레임워크입니다 (맞죠?)jquery 는 자바스크립트 프레임워크 중 하나라고 이해하고 있어요 ( 인터넷 검색해보면 자바스크립트 라이브러리 라고 나옴)자바스크립트를 기반으로 개발된 프레임워크들이 jquery, vue, react, angular 등이 있다고 이해하고 있습니다.그런데여기에서 질문 1. jquery 와 vue, react, angular 는 서로 다른 개념인가요? 여기저기 찾아보면 vue, react, angular 만 묶어서 비교하고 jqeury 는 다른 것처럼 이야기를 하는 것 같아서요. 어차피 모두 순수자바스크립트로 할 것을 편하게 하려고 jquery 와 vue, react, angular 등을 사용하는게 아닌가요?그리고예를 들어 아래처럼 신규 프로젝트 환경을 vue 를 사용해서 구성하려고 합니다.spring &#43; vuespring &#43; thymeleaf &#43; vuespring &#43; jsp &#43; vue보통 vue 를 사용하면 thymeleaf 나 jsp 를 함께 사용하지 않는 것 같더라고요질문2. 신규 프로젝트 2번 이나, 3번처럼 vue 를 사용하면 탬플릿 프레임워크인 thymeleaf, jsp 는 필요가 없게 되나요?

몰랑토끼 · Answer

jquery는 라이브러리 입니다. jsp는 프레임워크입니다. 프레임 워크안에 라이브러리를 사용할수있습니다. jquery와 vue, react, angular는 다른 개념입니다. v r a 는 spa라고 해서 한페이지에서 가상돔을 이용하여 페이지를 렌더링 하는데 기반자체가 달라서 spa관련으로 검색하면 많은 내용이 있습니다. 앵은 잘안써봤지만 vue와 react는 cdn으로 불러서 라이브러리 처럼 쓸수있지만, vue는 자체적인 문법성향이 더 강해서 프레임워크, 리액트는 라이브러리에 속합니다. jquery는 단순히 돔 컨트롤뿐입니다. spa는 그 외의 모든것을 편하게 합니다. jsp페이지 안에 일부부을 vue의 cdn으로 가져와서 할순있을거같은데 vue를 쓰느니 그냥 순수 ajax 쓰는게 통일감이 이 더 있습니다. vue를 통째로 쓰려면 jsp와 같이 쓸수 없습니다.

Gear · Answer

jQuery와 나머지는 결이 매우 다릅니다.react는 라이브러리로 분류되긴 하지만, 프레임워크라고 불러도 될 만큼 틀을 제공해줍니다.화면을 구성하는데 있어서 큰 차이가 발생합니다.jQuery는 그냥 DOM API를 편하게 쓸 수 있도록 하는 정도이기 때문에, 데이터 변경에 따른 화면 변경 로직을 작성할 게 많습니다.하지만 react, vue, angular 같은 친구들은 데이터 변경에 따른 로직을 작성할 게 거의 없고, 화면 구성에 대한 틀만 마련 해 놓으면 됩니다.jQuery와 react로 비교하는 예를 들어보겠습니다.할 일 목록을 서버로부터 불러오고, 추가하고, 지울 수 있는 화면을 구성한다고 해보겠습니다.차이를 좀 더 드러나게 하기 위해 입력 시 목록에도 바로 반영하도록 하겠습니다.화면을 그리는 부분에 주목해주세요.jQuery 사용 시

react 사용 시import { useState, useEffect } from "react"; import "main.css"; // .current { color: crimson; } 이 내용 있는 css export default function App() { const [content, setContent] = useState(""); const [list, setList] = useState([]); const refresh = async () => { const response = await fetch("/api/todo"); const list = await response.json(); setList(list); } const onChange = ({ target }) => { setContent(target.value); } const save = async () => { setContent(""); if (!content.trim()) { return; } await fetch("/api/todo", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ content }) }); refresh(); } const remove = (id) => { await fetch(`/api/todo/${id}`, { method: "DELETE", }); refresh(); } useEffect(() => { refresh(); }, []); return ( <>

{content}
remove(item.id)}>{item.content}

); }통신 하는 부분은 딱히 차이가 날 게 없으나, 화면을 업데이트 하는 부분이 차이가 많이 납니다.jQuery를 쓸 때에는 javascript 내에서 화면을 그리기 위한 dom 조작을 직접적으로 여러 가지 해줘야 했지만, react 사용 시에는 html 구조를 작성하면 데이터가 바뀔 시 자동으로 화면 변경이 이루어집니다.또한, 이처럼 javascript로 모든 화면을 제어하기 때문에 JSP 같은 것과는 어울리지 않습니다.편한 화면 제어를 두고 굳이 jsp의 기능을 이용할 필요가 없으며,jsp 등과 섞이면 오히려 혼란스러울 수 있고,빌드 도구를 제대로 활용하지 못해 기타 불편한 점이 많습니다.혹여나 SSR이 필요한 경우에는 Vue.js에서는 Nuxt.js, React.js에서는 Next.js를 사용하면 됩니다. angular는 잘 모르겠습니다.* react에서는 fetch api를 썼습니다.jQuery를 쓸 때에는 통일성 유지와 아주 미세하게 나마 편하게 쓰려고 $.ajax를 쓴 것이고, react를 쓸 때에는 굳이 jQuery를 불러올 필요가 없으므로 fetch api를 썼습니다.

jquery 와 vue, react, angular 에 대한 개념 문의드립니다.

2개의 답변

기술 목록