프레임워크 쉽게 이해하기 (웹 프론트 프레임워크)

어느 날 누군가에게 이런 질문을 받았습니다. 

 

자신이 순수 html로 작업을 하고 있는데,

Html이 점점 많아지면서 매번 navbar를 각각의 Html에 복붙 하고 있답니다.

그런데 이렇게 하면 좋은 점수(국비 발표)를 받지 못할 것 같으니

혹시 한 군데서 쓰고 다른 곳에서 다 불러와서 쓸 수 없냐고 물어보더군요.

 

이 질문을 받은 저는 정말 아무생각 없이

 

"컴포넌트나, nuxt에서 쓰는 레이아웃 개념하고 비슷하게 들리네요.

vue나 react를 이용하세요!"

 

라고 답했고, 질문을 했던 친구는 

 

"vue가 뭐죠..?"

 

라고 답했습니다. 

그래서 저는 또 아무생각 없이

 

"자바스크립트 프레임워크에요~"

 

라고 말하자 그 친구는 

"프레임워크가 뭐죠..?"

 

라고 답했습니다. 그리고 받아본 그 친구의 소스코드에는

제이쿼리가 이용되고 있더라고요.

 

저는 국비를 다녀본 적은 없지만, 주변의 사람들을 보면

순수 바닐라 자바스크립트나, 프레임워크라는 큰 개념들을 이해하지 못한 채

단순히 기능을 쉽게 구현하기 위해 제이쿼리를 쓰는 걸 꽤 자주 목격했습니다.

 

이건 그 사람의 문제라기 보단 일부 국비 시스템의 문제겠죠..

 

그래서 준비한 오늘은 '프레임워크란 무엇인가?' '또 어떤 것들이 있는가?'에 대해 포스팅하고자 합니다.

 

프레임워크란 무엇인가?

이 포스팅에서 전달하고자 하는 것은 웹 그중에서도 프론트앤드인 자바스크립트의 프레임워크에 대한 것입니다. 그러나 그전에 프레임워크가 무엇인지부터 알아야겠죠?

 

프레임워크(framework)는 단어 그대로 살펴보면

 

Frame(틀) + work(일하다)

 

틀과 일하다 라는 단어가 합쳐진 단어입니다. 즉 틀을 갖고 일을 하는 것이죠. 

아직 감이 안 오실 겁니다.

이렇게 생각해보죠. 우리가 실생활에서도 일을 하다가 어느 순간 자기가 무의미하게 정말 비효율적으로 뭔가를 계속하고 있단 생각이 든 적이 있지 않나요?

 

비효율적이지 않더라도 불편하다고 느끼는 순간들도 있을 테고요. 

 

예를 들어보죠.

 

'네모'라는 나라가 있었습니다. 여기선 사람을 부를 때 앞에 '볼페 슐레겔 슈타인 하우젠 베르거 도르프'를 넣어서 불러야 합니다. 이름을 적을 때도 말이죠. 

 

사람을 부를 때

"볼페 슐레겔 슈타인 하우젠 베르거 도르프 네모야~"

 

내 이름을 적을 때

"볼페슐레겔슈타인하우젠베르거도르프 시 네모"

 

모두 불편해하지만 계속 이렇게 해와서 별 다른 생각이 없었습니다.

그러던 어느 날 누군가 새로운 모임을 만들어서 그 모임 안에서는 '시네모!'라고만 불러도 "'볼페 슐레겔 슈타인 하우젠 베르거 도르프 시네모' 라고 알아듣자!"라고 하기 시작했고,

 

볼페 슐레겔 슈타인 하우젠 베르거 도르프 시 네모"가 공식적이고 기본적인 이름 부르기 방법이지만, 그 모임 안에서는 누구든 앞의 긴 문자를 떼고 불러도 문제가 없었다고 합니다. 

 

자바스크립트를 계속하다 보면 어느 순간, 정말 긴 코드인데 반복적으로 해줘야 하는 일들이 생겨납니다. 

예를 들면 클래스 선택자인 document.querySelector를 생각해봅시다. 

 

const button = document.querySelector('.div_button")

 

이런 식의 코드를 계속 반복적으로 코딩하다 보니 사람들은 지치기 시작했습니다. 

 

그때 누군가

 

"우리 모임을 만들자. 이 모임의 이름은 '제이쿼리'야."

 

"여기선 $(.div_button)이라고만 써도 알아서 const button = document.querySelector('.div_button") 와 똑같이 작동되게 해 줄게!"라고 하기 시작한 거죠.

 

이렇게 자바스크립트의 반복적이고 비효율적인 기능을 쉽고 빠르게 할 수 있는 것이 자바스크립트 프레임워크입니다. 

현재는 vue, react, angular, svelte 등 프레임워크의 종류도 많고, 각각의 기능도 뛰어나서 제이쿼리를 쓰지 않는 추세지만, 아마 모든 프레임워크의 등장은 아주 기본적인 생각에서 나왔을 것입니다.

 

"불편한 걸 편하게 하고 싶다"

 

이 마음을 이해한다면 프레임워크는 어렵고 복잡한 것이 아닌

그저 개발자를 더 편하게 해주는 하나의 도구라는 생각이 들 것입니다. 

 

각각 프레임워크의 장단점에 대해선 다음 포스팅에서 알아보도록 하죠!