Intro
학교에서 진행하는 '온라인 교육 플랫폼 제작 프로젝트'에 참여하여 팀장 역할과 프론트엔드를 담당하고 있다. 기존 팀이 하고 있던 프로젝트를 이어받아 진행하는데 인수인계가 잘 이루어지지 않아 프로젝트의 제일 처음부터 다시 보고 있다.
프론트엔드에선 Next.js(+ React.js)를 메인으로 채택하여 사용하고 있다. 이들을 기초부터 다시 공부하다 보니 Next.js는 프레임워크, React.js는 라이브러리라고 한다. 그런데 프레임워크와 라이브러리의 차이점이 뭔지 스스로 말로 설명해보려 하니까 입이 떨어지질 않았다.
"무언가를 단순하게 설명할 수 없다면, 당신은 그것을 충분히 잘 이해한 것이 아니다." - 아인슈타인
머릿속으론 알겠는데 막상 말로 설명해보려 하니 마땅한 표현이 떠오르지 않았다. 그래서 기초부터 공부하는 참에 배우는 것들을 앞으로도 기록으로 남길 겸, 오늘은 프레임워크와 라이브러리의 차이점에 대해 간략하게 정리하려 한다.
Framework와 Library의 차이점
Framework
프레임워크의 사전적 의미는 '뼈대, 틀, 체제'라는 뜻으로, 전체적으로 fix 된 구조를 뜻한다. 프레임워크를 사용하면 코드 작성부터 파일/폴더명까지 모두 해당 프레임워크 제작자들이 정해둔 틀 내에서 정해진 룰에 따라야 한다. 간단히 말하면, 프로그램이 내 코드를 호출하는 것이다. 이를 전문용어로 'Inversion of Control'이라고도 한다.
예를 들어, Next.js로 웹 개발을 하면 각 페이지는 pages 디렉토리 내에 있는 파일명으로 URL이 결정된다. "localhost:3000/about" URL로 접근하면 path가 /pages/about.tsx인 파일이 웹에 뜨는 것이다. 이때 pages 폴더명은 바꾸어선 안 되며, 홈페이지가 될 페이지 파일은 파일명이 반드시 index.tsx여야 한다.
Library
Library는 도서관이란 의미처럼, 이미 작성되어 있는 코드에서 함수, 변수, 파라미터와 같이 필요한 부분을 프로그래머가 필요로 하는 시점에 원하는 만큼 자율적으로 가져다 쓸 수 있는, 코드 도서관 같은 프로그램 덩어리를 말한다. 프레임워크와 달리 라이브러리는 프로그래머가 라이브러리 코드를 호출한다.
라이브러리의 대표적 예로 python 라이브러리 numpy와 pandas 등이 있다. 이들을 import 하기만 하면 해당 라이브러리들에 구현되어 있는 기능들을 프로그래머가 원하는 시점에 원하는 만큼 가져와 쓸 수 있기 때문이다.
etc.React
그렇다면 위의 정의에 따르면 React.js는 라이브러리가 아니지 않나? useState나 useEffect와 같은 hook은 반드시 Component 내에서 작성해야 하고, 상위 Component에서 하위 Component로 Props를 전달할 때도 정해져있는 방식으로만 전달해야 하는데, 그럼 Framework가 아닐까?
위 이미지는 React.js 공식 홈페이지에서 React를 소개하는 글이다. "React is a library." 공식 홈페이지에서 못 박았다. React는 library라고. React.js는 component들을 모아 웹 개발을 도와주지만, 웹에서 가장 중요한 것들인 data fetching과 routing에 대해서 어떻게 해야 하는지 규정하고 있지 않기 때문에 React는 library다.
하지만 React는 부분적으로 framework의 특징을 가지고 있다는 점 또한 인정하는 듯하다. 위에서 언급한 Props를 하위 Component로 전달하는 행위 등 정해진 규칙에 따라야 하는 경우 부분적으로 Framework의 특징을 가지고 있는 것이다.
Outro
프레임워크와 라이브러리의 간략한 차이점에 대해 알아봤다. 차이점을 요약하면 다음과 같다.
프레임워크: 프로그램이 내 코드를 호출한다. (Inversion of Control)
라이브러리: 내가 프로그램 코드를 호출한다.
앞으로도 공부한 것들을 간략하게나마 기록으로 남기려 한다.
