XE 리액트 조합 어떤가요?

1번은 shadcnUI를 활용해 제작해본 케이스입니다. SEO면에서도 충분히 커버 가능한 수준으로 만들어보려고 하고 있습니다. 부족한 부분 눈에 띄이면 말씀해주세요

pagination 컴포넌트 방식이나, padding 부분들이 shadcnui를 따르지 않는것같아서 뭔가 테일윈드 커스텀하신건줄 알았습니다.

하단부 페이지네이션, 그리고 게시물 추천이나 각종 부분들에서 버튼과 같은 부분들에 padding 규격이 따로 노는 느낌이 있어서 이런 부분을 다시 한번 봐주시면 좋을것같아요.

SEO부분은 쉽지 않으실겁니다. 저도 한참 극초기에 nuxtjs와 연동해서 해보려고 어떻게든 발버둥치다가 포기하고 blade문법으로 개발하기 시작했거든요 ㅠㅠ

완성까지 화이팅입니다!

완벽하게 다 잡은건 아니고, 페이지마다 react로 잡아본건데 이렇게 동작하는구나 하고

다음 스텝으로 SPA 수준으로 만든게 2번째 작업물입니다. 그래서 1번도 완전히 스타일을 다 해놓은게 아니네요 ㅎ

1번은 대신 SEO를 따로 잡지 않아도 되는 수준 같아 보이는데 어떤가요.

2번은 나름 하게 한다고 했는데 어떨지 잘 모르겠네요.

SEO는 1년넘게 씨름하는 입장이라서 검색엔진님께서 마음에 들어하셔야 하는거라.. 검색엔진님이 보기좋다하더라 하면 좋은거고 아니면 아닌거라 뭐라 말씀드리기 어렵습니다 ㅠ

1년넘게 싸우다가 드디어 키워드 상위권으로 올리기 시작해서요..

1번은 페이지가 전환된다는 것이 장점이지만, 전환 후 HTML 소스에 내용이 없습니다. 반면, 2번은 서버 렌더링 컨텐츠까지 넣어두셔서 검색엔진 입장에서는 오히려 더 나을 수도 있어요.

단, 어느 쪽이든 목록 화면에서 JS를 실행하기 전에는 각각의 글읽기 화면으로 연결되는 링크를 찾을 수 없을 테니, 사이트맵 등으로 보완하는 것이 좋습니다.

아무리 요즘 검색엔진이 JS를 실행할 수 있다고 해도, JS를 실행하려면 그냥 HTML만 해석하는 것보다 많은 자원이 필요하기 때문에 크롤링에 소극적일 수밖에 없거든요. 리액트를 사용하지 않는 경쟁 사이트보다 적게 긁어가거나, 늦게 긁어가죠. 어떻게든 검색엔진의 심기를 건드리지 않는 것이 최선입니다...

1번은 만들다가 속도의 효용성을 못 느껴서 바로 2번으로 진입했습니다.

2번은 말씀대로 SEO를 고려해서 최대한 렌더링 전에 api 내용을 받아서 컨텐츠 영역에 집어넣고,

나중에 다시 렌더링한 내용을 덮어씌우는 식으로 작업했습니다.

말씀하신 부분도 리스트에서도 글본문에서처럼 그런 동작을 미리 해놓으면 좋을 거 같네요. 

1번은 React를 도입하기 위해 작업해본 코드이고 백단은 그냥 PHP 라이믹스 코어와 결합한 정도입니다. (언급하신 부분에 대해서는 크게 생각하지 못했는데 추후 추가작업할 때 참조해서 작업해두겠습니다^^)

API를 적용해서 작업하고 있는건 2번입니다. 혹시 2번에 대해서도 보안적으로 염려되는 부분이 있으실까요?

2번은 개발자도구상으로 민감한 데이터가 노출되는 것은 없어 보입니다만, 화면 전환할 때마다 호출하는 init_session.php의 역할이 궁금하네요. 에디터 시퀀스 할당과 관련된 요청인 듯 한데, 비밀글 번호를 넣어서 호출해도 정상적인 응답이 돌아오더라구요.

한국식 게시판은 사이트에 따라 권한 체계가 굉장히 복잡할 수 있는데, API 갯수가 많아질수록 일관성있게 권한 체크하기가 어려워지니, 코드 구조를 정리해서 하나도 빠짐없이 체크할 수 있도록 해보시기 바랍니다.

사용자 입장에서 보면 가장 큰 장점은 가상돔 효과죠

바로바로 화면전환. 생으로도 아약스로 가능하지만 좀 더 소스코드관리가 잘됩니다

개발자 입장에서 보면 

소스코드량은 늘어나지만

리액트 관련 라이브러리를 편하게 사용할 수 있는 점(일반 라이브러리보다 퀄이 괜찮더군요)

어려운 소스코드의 경우 오히려 좀더 코드관리가 쉬운거같고

js도 es6 모듈화가 가능하지만

처음 설계부터 좀더 잘 모듈화가 되는거같고

또 모듈화가 잘되니깐 여기저기 잘 가져다 쓸 수 있는 점(이걸 생으로도 할 수는 있지만)

리스트나 글보기 에서 화살표 이용해보시면 바로 체감하실 거에요

리액트의 넓은 에코시스템을 끌어올 수 있다는 장점이 있죠.

요즘 최신 디자인 트렌드 반영한 라이브러리가 한가득하니까요

일반 사용자 입장에선 아직 디자인 스타일을 입힌게 아니다보니

우와 하는 포인트가 없는 모양입니다 ㅎ

+ PHP레거시라고 무시하는 신규 개발자를 불러올 수 있다?(__);

꼭 리액트만의 장점이 아니라 개발하기에 따라 다르지만 현재 게시판의 경우 아래 기능을 제공하고 있습니다.

[주요장점]

화살표 기능 탑재로 원활한 뷰어 기능 제공(리스트에서는 이전/다음 페이지, 글보기에서는 이전/다음 글)

댓글 및 대댓글 페이지 전환없이 바로 작성

삭제 기능도 페이지 전환없이 바로 삭제 가능(확인창 제공)

글보기 캐시 기능 강화(처음 접속 이후 두번째부터는 로딩없이 글보기 가능함)

서버스펙의 영향을 덜 받음. 초기 접속이 느린 서버라도 실제 웹 이용 환경은 빠르게 제공 가능함

일반 웹호스팅 설치 가능함

XE/라이믹스 API 모듈을 별도 개발 후 진행하고 있습니다. (https://eond.com/sideproject/481535)

현재 SEO를 별도로 고려해서 작업한 부분이 많지 않음에도 1-2일 내에 제 사이트가 구글에 노출되고 있는 것을 보면 SEO도 크게 문제 되지는 않는 거 같습니다.

백에서 글을 노출하는 것은 기본 게시판 스킨 작업과 동일하게 진행했습니다. (이때 데이터는 백단의 템플릿이 아닌 API 데이터를 재가공해서 PHP에서 지원. 스킨단에서 PHP를 활용해서 먼저 데이터를 뿌려주고 차후 렌더링.)

그래서 현재 서버는 노드는 동작하지 않습니다.

백엔드에서 API 모듈만 지원하면, 리액트 개발자가 쉽게 레이아웃, 게시판 스킨을 제작할 수 있는 환경을 제공하려고 합니다.

게시판 뿐만 아니라 회원, 쪽지 기능에 대해서도 좀 더 사용자 입장에서 빠른 사용 환경을 제공할 수 있는 작업이 가능할 것으로 기대하고 있습니다.

대규모 커뮤니티에서 리액트, 뷰, 스벨트를 이용한 웹사이트 제작이 현재도 이뤄지고 있는 것으로 알고 있습니다.

서버의 사양이 좀 낮더라도 이런 최신 프론트엔드를 활용한 빠른 사용자 환경 개선이 가능하다는 점을 말씀드리고 싶고,

개발의 난이도가 사실 좀 올라가고 코드의 작성이 기존 HTML, SCSS, JS + PHP템플릿보다 좀 더 복잡한 것은 맞지만, 

컴포넌트의 모듈화로 복잡하고 다양한 작업물을 만들어내는데는 구조적으로 봤을 때 나름 최적화되어있는게 아닌가 하고 자체적으로 판단하고 있습니다.

이렇게 작업했을 때 사실 서드파티의 기능은 별도의 모듈이 필요없는 수준이었고, 게시판 기능을 활용해서 다양하게 작업 가능한 손쉬운 프론트엔드로써의 기능 확장이 유리한 면이 있습니다. 기존에도 저는 별도의 모듈이 아닌 단순히 스킨만으로 구현이 가능하다면 쉽게 작업을 해왔는데요, 홈페이지가 게시판 데이터를 활용하면 대부분의 작업이 가능하다고 판단하고 있습니다. 말씀대로 서드파티의 모듈들의 모든 기능들을 다 흡수해서 제공하기는 어려운 면이 있을 수 있지만, 어차피 모든 써드파티 모듈들이 제대로 된 지원이 없는 이상 기본 기능으로도 충분하지 않을까 생각 중입니다.

어느 정도 웹 사용성이 개선된 다음에는 차후 리액트네이티브나 플러터를 이용한 웹앱 개발도 생각하고 있습니다. 몇년 전에 벌써 이렇게 개발된 사례도 있었고요. 그렇게 되면 모바일 앱 개발 접근성이 낮아지는 부분도 고려하고 있습니다.

PHP로 렌더링해두고 가려버리는군요.

저도 SEO적인 부분이 이게 맞는지 잘 모르겠습니다만 일단 그렇게 하면 자바스크립트를 해석하지 않는 검색 엔진의 경우에는 도움이 되지 않을까 생각하고 있습니다.

현재 기능단 작업 중이라 SEO는 아직 신경을 못 썼는데 많은 분들이 염려하시는 부분인거 같아 우선적으로 살펴봐야할 부분 같네요.