api 기반으로 spa 구현했습니다. - 제로보드XE,라이믹스의 SPA 리액트로의 전환으로

api 기반으로 spa 구현했습니다. - 제로보드XE,라이믹스의 SPA 리액트로의 전환

이온디 1211

현재 게시판은 XE,라이믹스 API 모듈을 통해 데이터를 출력하고,
json 데이터를 React로 SPA 시스템으로 구현하였습니다.

역대급으로 빠르네요


[구현기능/구현예정기능]

  • 글읽기
  • 페이지이동
  • 검색
  • 목록/카드/갤러리
  • 글쓰기/글수정(지금은 이것만 빼곤 다 spa로 빨라요)
  • 글삭제
  • 댓글쓰기/수정/댓글삭제
  • 대댓글쓰기/수정/대댓글삭제
  • 글추천/추천취소
  • 댓글추천/추천취소

 

  • [파일 및 썸네일 관련]
  • 1. 썸네일 표시 작업 버그있음
  • 2.글 삭제시 연결된 파일 삭제 안되는 버그 있음.
  • > 해결함. 

@if($document_srl)

          <input type="hidden" name="document_srl" value="{{ 

  $document_srl }}" />

          @endif 이 부분에서 if문이 문제였음.

 

  • [댓글규칙]
  • # 제목, ## 중간제목, ### 작은제목
  • ``` ... ``` 코드로 표시
  • 댓글 한 줄 띄어쓰기 반영 안됨.
  • - 자식댓글달린부모댓글삭제시 삭제된댓글입니다 표시
  • - 삭제된부모댓글이 자식댓글다삭제되면 같이 다 삭제되기
  • **댓글에 이미지 파일 첨부시 하단에 이미지 첨부되기, 댓글 삭제시 해당 파일 이미지도 같이 삭제되기**
  • >댓글+파일첨부,대댓글파일첨부,댓글수정파일첨부 이 부분이 아주 어려웠음; API 모듈도 삽질하고.
  • 스크랩 기능(글본문,글리스트,댓글) & 스크랩 해제
  • 아직 글이 2번 등록되는 버그 있음 (간헐적이라 현재는 발견되지 않고 있으나 계속 이 부분은 주의해서 살펴볼 것임)
  • 카테고리기능출력
  • - 댓글이 달리면 수정은 불가(댓글이 달린 글은 수정 버튼 비활성화 처리하기)
  • 관리자의 경우 리스트에서 선택 글 이동 기능 없음
  • 공지사항 - 글 리스트와 별개로 처리하는 작업 미완료

  • 카테고리 쉽게 변경하는 기능


  • 글을 다른 게시판으로 옮기는 기능?-api를 활용하는데 가능할까는 의문이지만 기존 라이믹스 기능을 활용하는 선에서라면 가능할듯.


  • 사용자확장변수 컨트롤 (보여주기,수정하기,삭제하기,이미지업로드 연결 등)

(대)댓글과 본문에 첨부된 이미지 클릭시 라이트박스 갤러리 기능 활성화


[SEO관점]

SEO는 웹페이지간에 연결성이 핵심입니다.

검색엔진-도메인-네비게이션메뉴-리스트-글보기로 이어지는 구조를 만들어야합니다. 간단한데 이게 기본입니다.

1. 리스트

리액트로 렌더링하기 전에 리스트 구조를 보여주기

- 글 리스트

- 페이지 

- 카테고리

2. 글보기

리액트로 렌더링하기 전에 본문 구조 먼저 보여주기


[불편한 점] (중요도 낮음)

  • 1. 피씨에서 스크롤 내려서 목록 이동시 스크롤 다시 최상단으로 가는 점은 불편함.
  • 2. 모바일에서도 글을 읽다가 뒤로 갔을 때 최상단으로 가는 점은 불편함.
  • 3. 최상단으로 가는 버튼은 우측 하단에 넣기
  • 4. 이전 히스토리를 기억해서 마우스 좌측 버튼 클릭하면 이전 페이지로 이동은 하는데, 다시 다음 페이지로 되돌아가려고 할 경우엔 이건 url은 변경이 되지만, 실제 화면 이동은 안됨.


[단축키]

글 목록에서 이전 화살표 : 이전 페이지
글 목록에서 다음 화살표 : 다음 페이지

글보기 하단에 이전글, 다음글 링크 추가
글보기에서 이전 화살표 : 이전글(과거글)
글보기에서 다음 화살표 : 다음글(최신글)

글쓰기 에디터 및 댓글 작성 화면에서 cmd + s : 저장 및 수정


[에디터 단축키] (프로알라에디터 커스텀이라 일단 어려울거 같아서 패스, 댓글에서만 적용하기로 함.)
# 제목 -> h1
## 제목 -> h2
--- -> 가로선
``` -> 코드
tab > 들여쓰기
shift+tab > 들여쓰기 취소


[추가기능]

쪽지 시스템 ->채팅 기반으로

회원 ->팔로워,팔로잉 


[태그]

카테고리 보다는 태그 기능을 활용할 수 있도록


[위젯]
우측 사이드바 표시 위젯 기능
- 최근 달린 댓글
- 방문자 그래프 위젯
- 인기글 위젯
- 이 게시판 구독하는 유저 위젯
- 달력위젯(프로젝트일정, 1:1문의게시판 위젯 - 글이 달리면 바로 확인 가능한 게시판 시스템)


[구성품]

el_api // 레이아웃 스킨

eb_api // 게시판 스킨

es_api // 통합검색 스킨


[품질테스트]

SEO계속 테스트 해나가기

https://eond.com/seo/481695

https://eond.com/seo/481699


[통계]

1) 깃헙 스타일의 잔디 찍기 : 월별 작성 횟수를 카운트하여 게시판 상단 또는 하단에 보여줌.

2) 통계보기기능 : 

최고 조회수 글,
최고 좋아요 글,
최고 인기글(조회수+좋아요) 글,
최고 댓글 참여수 많은 글

+ 기간별(일주일,한달,90일)


리스트 스타일 : 블로그 추가하기