Next.js는 React.js를 기반으로 만들어진 프레임워크이다.
요 문장을 이해하기 위해서 강의자료와 구글링하다 찾은 여러 웹문서 내용, 그리고 챗지피티와의 대화한 내용을 정리해보았다.
너무 기초적인 내용이라 다른 사람이 보면 바보같은 질문일 수도 있겠지만 개념을 정리해보고 싶었기 때문에 기록용으로 남긴다.
🤔프레임워크와 라이브러리의 차이점
프레임워크:
- 개발자가 기능 구현에만 집중할 수 있도록 모든 프로그래밍적 재원을 지원하는 기술의 조합
- 개발자는 프레임워크 안에서 작업할 때, 특정한 패턴이나 방식에 따라 코드를 작성해야 한다.
- 이 특정 규칙에 따라 코드를 작성하고, 프레임워크가 제공하는 기능을 활용하여 웹 애플리케이션을 개발한다.
라이브러리:
- 재사용 가능한 코드의 집합으로, 특정 기능을 수행핟기 위한 도구나 함수 등을 제공한다.
- 개발자가 필요할 때 라이브러리에서 원하는 기능을 선택적으로 호출하여 사용할 수 있다.
🤔리액트는 프레임워크인가?
No!
리액트는 사용자 인터페이스를 만들기 위한 라이브러리이다. 리액트에서 상태 관리를 위해 Redux, 라우팅을 위해 React-router-dom과 같은 라이브러리를 추가로 사용할 수 있다.
리액트 자체만으로 프레임워크라고 불리기엔 리액트에서 기본으로 제공하는 기능이 부족하다.
라이브러리인 리액트에서 또다른 라이브러리를 필요에 따라 함께 사용할 수 있다.
🤔Next.js는 리액트를 기반으로 만들어졌는데 왜 프레임워크인가?
React를 기반으로 하기 때문에 리액트가 없으면 작동할 수 없으니 그런 점에서는 Next.js도 라이브러리 아닐까?
No! Next.js는 프레임워크로 간주된다. Next.js가 리액트를 기반으로 한다는 점은 사실이지만, Next.js는 보다 확장된 기능을 제공하여 개발자가 더 쉽고 빠르게 리액트 애플리케이션을 개발할 수 있도록 돕는다.
- 프로젝트 구조, 라우팅, SSR, SSG 등을 제어할 수 있는 제어 흐름을 제공한다. 이는 리액트에 자체 내장되어 있지 않은 기능들이다.
- 리액트는 UI라이브러리로, 개발자가 UI를 구성하는 데에만 집중하지만,
Next.js는 프로젝트의 전반적인 구조를 제공하므로 더 큰 범위에서 프레임워크의 특성을 가진다.
프레임워크는 라이브러리보다 개발자에게 더 큰 범위의 기능과 제어 흐름을 제공한다. 반면 라이브러리는 특정 기능을 수행하기 위한 도구를 제공한다.
🤔그럼 리액트에서 npm... 설치하여 사용하는 것들은 라이브러리인가?
Yes!
일반적으로 npm 어쩌구로 설치해서 사용하는 모듈들은 대부분 라이브러리이다. 이 모듈들은 재사용 가능한 코드의 집합이다. 개발자가 필요할 때 선택적으로 사용할 수 있으며, 이 코드의 흐름을 개발자가 직접 제어할 수 있다.
리액트 프로젝트에서 사용되는 모듈들은 리액트 자체와 함께 사용되는 라이브러리도 있고, 리액트를 보완하거나 확장하기 위한 외부 라이브러리도 있다.
예를 들어 axios는 서버와의 HTTP 요청을 쉽게 만들고 처리할 수 있도록 도와주는 라이브러리이다. styled-components는 리액트에서 컴포넌트 스타일링을 위한 방식을 제공하는 라이브러리이다. 이들은 모두 리액트 프로젝트에서 자주 사용되는 추가 도구들 중 하나이다.
🤔그럼 Next.js는 모듈을 설치하지 않아도 axios와 같은 기능을 자체적으로 제공하나?
Yes! Next.js에서는 기본적으로 내장된 fetch API를 사용하여 서버 또는 외부 API로의 비동기 데이터 요청을 처리할 수 있다. 따라서 axios와 같은 다른 HTTP 클라이언트 라이브러리를 설치할 필요가 없다.
🤔프레임워크 없이 라이브러리만으로 개발이 가능한가?
Yes! 여러 모듈을 설치하여 리액트로 프로젝트를 만드는 것이 바로 그 경우. 상태 관리나 라우팅 같은 추가 기능을 필요에 따라 보충하여 사용할 수 있다. 이렇게 필요한 기능을 선택적으로 추가하고 조합하여 라이브러리 만으로 개발을 할 수 있다.
🤔그럼 반대로 라이브러리 없이 프레임워크만으로 개발이 가능하겠지?
Yes! 프레임워크는 보다 큰 범위의 기능과 제어 흐름을 제공한다. 라이브러리를 추가로 설치할 필요가 없으며, 프레임워크가 제공하는 기능을 사용해서 애플리케이션 개발을 할 수 있다.
🤔아주 예전에 사용했던 '나모 웹 에디터'같은 프로그램은 라이브러리인가?
No! 나모 웹 에디터는 일반적으로 프론트엔드, 백엔드 웹개발에서 이야기하는 프레임워크, 라이브러리와 같은 개념과는 다른 차원의 것이다.
개발자가 코드를 직접 장성하는 것이 아니라 WYSIWYG(what you see is what you get) 방식으로 웹페이지를 시각적으로 디자인하고 레이아웃을 편집할 수 있게 해주는 응용 프로그램이다.
개발자들이 특정 프레임워크나 라이브러리를 사용하여 웹 페이지를 개발하는 것과는 다른 개념이며, 웹 개발자들이 사용하는 통합 개발 환경과는 목적과 사용자층이 다를 수 있다.
🤔그럼 WYSIWYG 에디터는 아직도 사용되고 있을까?
Yes!
개인 블로그 같은 곳에서는 코드를 작성하는 것보다 시각적인 편집이 더 편리하기 때문에 여전히 사용되고 있다.
wix.com과 같은 웹사이트 빌더 플랫폼에서도 WYSIWYG 에디터를 제공한다.
또한 이메일 마케팅 툴에서도 WYSIWYG 에디터를 통해 이메일 콘텐츠를 디자인하고 편집할 때 코드 작성 없이 문서를 작성할 수 있다.
🤔아하! 블로그나 이메일 작성폼에서 제공하는 에디터가 WYSIWYG 에디터인가?
Yes! 이러한 에디터들은 사용자가 문서를 작성하고 디자인할 때 실제 결과물을 실시간으로 보여주므로, 작성한 내용이 최종적으로 어떻게 보일지 미리 확인할 수 있다.
🤔WYSIWYG 라이브러리도 있나?
Yes!
리액트용 WYSIWYG라이브러리가 있다. react-draft-wysiwyg 혹은 react-quill이 바로 그것이다.
이 라이브러리를 사용하면 게시판 기능을 개발할 때, 글쓰기 input 대신 에디터를 사용할 수 있다.
예를 들어 react-quill은 리액트에서 사용할 수 있는 간단하고 강력한 WYSIWYG 에디터 라이브러리로, 텍스트 편집을 위한 다양한 기능과 스타일링을 지원하여 마치 블로그와 같은 기능을 구현할 수 있다.
의식의 흐름대로 작성하다보니 Next.js와 전혀 상관 없는 내용으로 흘러가버렸다. 에디터 기능을 제공하는 라이브러리를 최종 프로젝트 때 활용해 봐도 괜찮을 것 같다.
