안녕하세요 지금 늦은 나이에 프론트엔드 준비중인 30살입니다 다름이 아니라 제가 프론트엔드를 위해서 공부 중인데 주변에서 이제는 제이쿼리는 포기하고 html/css기본 베이스로 바닐라js나 리액트 위주로 공부하라고 하던데 제이쿼리는 접는게 맞을까요? 혹시 그 이유도 좀 알려주시면 감사하겠습니다 나름 제이쿼리가 재미도 있고 그나마 코드중에 간단하고 쉬웠는데 왜 포기해야하는지도 좀 알려주시면 감사하겠습니다

안녕하세요. 에이콘아카데미 강남 본원 학습 매니저입니다.

​

제이쿼리가 재미있고, 코드가 간단해서 그 매력에 빠지셨다는 점 공감합니다.

주변 분들의 조언 때문에 즐겁게 배우던 기술을 포기해야 하나 고민이 많으실 것 같습니다.

​

제이쿼리가 처음 등장했을 때, 웹 개발 환경은 매우 혼란스러웠습니다.

인터넷 익스플로러, 파이어폭스, 크롬 등 브라우저마다 자바스크립트를 다루는 방식이 제각각이라, 개발자들은 똑같은 기능을 만들기 위해 브라우저별로 다른 코드를 짜야 하는 고통을 겪었습니다.

​

이때 제이쿼리는 만능 번역기처럼 등장했습니다.

개발자가 $() 라는 간단한 명령만 내리면, 제이쿼리가 알아서 모든 브라우저에서 똑같이 작동하도록 복잡한 과정을 처리해주었습니다.

제이쿼리는 개발을 매우 쉽고 빠르게 만들어준 혁신적인 도구였습니다.

​

하지만 시장이 변했습니다.

​

1. 자바스크립트(JS) 자체가 강력해졌습니다.

과거에 제이쿼리가 해주던 복잡한 일들을 이제는 순수한 자바스크립트(바닐라JS)가 더 효율적으로, 그리고 표준화된 방식으로 처리할 수 있게 되었습니다.

모든 브라우저가 표준을 잘 따르게 되면서, 더 이상 만능 번역기가 필요 없어진 셈이죠.

$('#my-element') (제이쿼리) -> document.querySelector('#my-element') (바닐라JS) .ajax() (제이쿼리) -> fetch() (바닐라JS)

2. '웹사이트'에서 '웹 애플리케이션'으로 웹의 패러다임이 변했습니다.

과거의 웹이 정보를 보여주는 '페이지' 중심이었다면, 현대의 웹은 복잡한 기능이 담긴 '프로그램(애플리케이션)'에 가깝습니다. (예: Figma, Google Maps, Notion)

제이쿼리는 화면의 특정 요소를 직접 선택하고 변경하는 방식(DOM 직접 조작)이라, 수많은 정보가 실시간으로 변하는 복잡한 애플리케이션을 만들기에는 매우 비효율적이고 코드가 걷잡을 수 없이 복잡해집니다.

(과거엔 개발을 매우 쉽고 빠르게 만들어준 혁신적인 도구였지만 현재는 그 역할을 하지 못합니다.)

​

이러한 복잡한 '웹 애플리케이션'을 효율적으로 만들기 위해 등장한 것이 바로 리액트(React)와 뷰(Vue) 같은 모던 프레임워크입니다.

이들은 웹페이지를 '레고 블록(컴포넌트)'처럼 독립된 부품 단위로 만들어 조립하는 방식을 사용합니다.

데이터가 바뀌면, 전체 페이지를 뒤엎는 것이 아니라 딱 필요한 부품만 효율적으로 교체하여 화면을 업데이트합니다.

이는 제이쿼리 방식보다 훨씬 빠르고, 코드 관리도 쉽습니다.

이것이 대부분의 기업들이 신입 프론트엔드 개발자에게 리액트나 뷰 경험을 요구하는 이유입니다.

​

프론트엔드 채용 시장에서 기업이 요구하는 기술에 집중하는 것이 현명한 전략이긴 합니다만,

  • 제이쿼리를 통해 배운 DOM 조작과 이벤트 처리 개념은 바닐라JS를 이해하는 데 도움이 될 것입니다.

  • ​

웹 개발의 가장 기본적인 작업은 HTML 요소를 선택하고(Selecting) 조작하는(Manipulating) 것입니다.

​

제이쿼리

"ID가 'title'인 요소의 글자를 '안녕'으로 바꿔라"라는 명령을 내리기 위해, 우리는 $('#title').text('안녕'); 이라고 씁니다.

여기서 질문자님은 "내가 원하는 요소를 선택해서($), 그 안의 텍스트를 바꾼다(.text())"는 핵심 원리를 이미 배우신 겁니다.

​

바닐라JS

바닐라JS는 이 과정을 조금 더 정석적으로 표현할 뿐입니다.

document.querySelector('#title').textContent = '안녕';

이렇게 말이죠. 제이쿼리 경험이 없다면 이해하기 어려울 수 있습니다.

document, querySelector, textContent 낯선 단어로 다가오니깐요.

하지만 질문자님은 쉽게 이해하실 겁니다.

아, $가 document.querySelector랑 비슷한 거구나.

.text()가 .textContent랑 같은 역할을 하는 거구나.

​

사용자의 행동(클릭, 마우스 올리기 등)에 반응하는 것은 웹의 핵심 기능입니다.

​

제이쿼리

"ID가 'myButton'인 버튼을 클릭하면, '클릭됨!'이라는 메시지를 띄워라" 라는 기능을 만들기 위해,

$('#myButton').on('click', function() { alert('클릭됨!'); });

이라고 씁니다.

여기서 "특정 요소에(.on), 특정 행동('click')이 일어나면, 정해진 함수(function)를 실행한다"는 이벤트 처리의 기본 구조를 이미 익히신 겁니다.

​

바닐라JS

바닐라JS는 이 구조를 표준 문법으로 표현합니다.

document.querySelector('#myButton').addEventListener('click', function() { alert('클릭됨!'); });

addEventListener라는 긴 단어를 처음 보더라도, 이미 .on의 역할을 알고 있기 때문에 "아, 이게 이벤트를 붙여주는 표준 방식이구나" 하고 훨씬 빠르게 받아들일 수 있습니다.

​

제이쿼리를 배우신 시간은 절대 헛된 시간이 아닙니다.

다만, 제이쿼리만 너무 중점적으로 하시는 건 채용시장에서 선호되진 않을 것 같습니다.

제이쿼리로 취업시엔 웹 퍼블리셔 라는 직무명으로 채용하는 경우가 많습니다.