Frontity? WP를 위한 React 프레임워크
워드프레스 & Frontity
Frontity 프레임워크를 이용하면 워드프레스 콘텐츠를 가져다가 React를 이용한 웹사이트를 만들어 표시해 보는 데까지 5분이면 충분합니다. (내 pc가 웹 개발 환경이 됨)
제가 워드프레스에 반했던 이유는, 프런트 앤드뿐 아니라 백 앤드까지 다 갖출 수 있으면서도 설치 및 최초 결과물을 확인하는 데 이르기까지 매우 심플하고 쉬웠기 때문이었습니다.(워드프레스 5분 설치) 물론 이후에 워드프레스의 기본 구조나 테마의 구조와 같은 개발적인 부분을 들여다봤을 때에는 알아야 할 게 많긴 했지만, 워드프레스는 누구나 쉽게 초기 진입을 할 수 있도록 잘 만들어진 프레임워크라 생각합니다. (10년 전에 비하면 지금은 거의 충돌이나 에러도 없음)
그동안 javascript를 기본으로 한 다양한 라이브러리나 프레임워크가 존재한다는 건 알고는 있었지만, 워드프레스 사이트 작업 시에는 딱히 필요는 없고, 미리 공부를 해 보자니 대체 뭐부터 시작을 해야 하는지 알 수가 없어 미루기만 했었던 것 같습니다. 오늘 검색해 본 글을 보니 못 들어본 것도 정말 많더라고요. > 베스트 js 라이브러리, 프레임워크
Frontity는 워드프레스 사이트의 REST API를 이용해서, React 라이브러리를 이용한 빠른 웹사이트를 만들 수 있게 해 주는 프레임워크입니다.
그러니 Frontity를 이용해서 'Headless Wordpress'를 만드는 걸 들여다보면, 워드프레스 활용 방법 찾기 및 javascript 라이브러리를 이용한 웹사이트를 제작하는 것 두 가지를 얻을 수 있는 기회가 될 수 있을 듯합니다.
처음 소개한 바와 같이 5분이면 결과물을 볼 수 있지만, 그전에 잠깐 개발 환경을 갖추는 작업이 필요합니다.
javascript 웹사이트를 만들기 위한 준비
1) node.js 설치
워드프레스를 로컬 pc에서 개발하는 환경을 만들 때, xampp나 mamp를 설치해서 웹이 작동할 수 있는 환경을 만들어줬다면, javascript를 이용한 웹 사이트를 만들 때에는 node.js를 설치하게 됩니다. 이때, npm(node package manager)도 같이 설치가 되는데, node 패키지들이 올려져 있는 서버와 통신을 할 수 있게 해 줍니다.
frontity도 node 환경에서 구동 가능한 형태로 제작되어 npm 서버에 올려져 있는 하나의 패키지이고,
이제 frontity 패키지를 내 pc로 다운 및 설치를 한 다음, node.js 개발 환경에서 웹앱이나 앱을 개발할 수 있게 된 겁니다.
2) CLI(Command Line Interface) 이용
윈도우와 같은 운영체제가 있기 전 MS-DOS를 쓰던 시절에는 PC를 켜면, 이 환경이 기본이었던 적이 있습니다. PC를 이용하려면 DOS를 실행해서 한글 프로그램도 구동하고...
(출처 : 위키피디아)지금도 (윈도우 환경의 경우) 윈도우 버튼 옆의 [찾기 > command]를 입력해 보면 위와 비슷한 CLI를 실행할 수 있습니다. 또는 윈도우 탐색기에서 Shift 키를 누른 상태에서 마우스 우클릭을 하면 현재 위치의 폴더 경로에서 CLI 창이 열리게도 할 수 있습니다. 명령어로 간단히 디렉터리를 이동(cd), 만들기(md)도 할 수 있고, node.js와 npm이 제대로 설치됐는지 간단히 버전 체크도 해 볼 수 있습니다.
node.js(+npm)가 설치됐고, CLI 창이 열려 있으면 이제 준비는 끝.
이제 frontity를 이용한 javascript 웹앱을 만들 수 있게 됐습니다.
저는 D 드라이브의 'frontity'라는 폴더 안에 npm 패키지 서버에 있는 frontity를 이용해서 새 프로젝트를 하나 만들었습니다. (npx도 npm과 비슷한 명령입니다. 최신 버전의 패키지를 만들 때 쓴다 생각하면 될 듯합니다.)
npx frontity create my-app
npx frontity create my-app
과정이 완료가 되면 'my-app'이라는 폴더가 추가된 걸 볼 수 있고, 폴더를 열어보면 자동으로 설치된 패키지 파일들이 보입니다. CLI에서 'my-app' 폴더로 이동 후, 다음 명령을 입력하면 개발용 서버가 구동이 되면서, http://localhost:3000/ 라는 로컬 웹 주소로 웹이 열리는 걸 볼 수 있습니다.
npx frontity dev
지금은 frontity 개발자가 만들어 놓은 테스트용 워드프레스 사이트의 콘텐츠들이 연결이 된 것인데, 내 사이트의 글들도 연결이 되는지 테스트를 해 보려면, 'frontity.settings.js'파일에서 48번 줄의 소스 url을 내 워드프레스 사이트 주소로 바꿔보면 되겠습니다.
간단한 설치 명령어 몇 줄로 frontity 프레임워크를 이용할 수 있는 웹앱이 뚝딱 만들어진 걸 볼 수 있었습니다.
추가로, 아직 React라는 것이 등장하질 않았습니다.
React는 사용자 인터페이스를 만들기 위해 Facebook에서 개발한 JavaScript 라이브러리입니다. 가장 큰 특징이라면 각 화면 요소를 '컴포넌트'라는 조각으로 제작하고, 원하는 곳에 불러다 쓸 수 있는 구조다라는 것인데, 이러한 라이브러리를 활용해서 Frontity 프레임워크를 만들어 놓은 것으로 보입니다.
javascript 대신 jQuery를 쓰려면 jQuery 라이브러리를 연결 후, 명령어를 쓸 수 있듯이 React 라이브러리를 연결 후 이 코드 작성법에 의해 화면을 구성한다, 이렇게 이해를 했습니다.
※ React에 대한 소개는 이 글이 참 좋았던 것 같습니다. > https://www.taniarascia.com/getting-started-with-react/
Frontity 참고 사이트 :
docs.frontity.org - Introduction, concepts and guides
api.frontity.org - API Reference
tutorial.frontity.org - Step-by-step guide
이후에는 mars-theme (기본 테마) 패키지를 이용해서 워드프레스 사이트에 기본적으로 필요한 기능들을 넣어보면서 정리되는 내용을 한 번 다뤄보려고 합니다.
계속...
