📄 [문서][관리자] 관리자페이지 개발 관련 안내

[Cassiiopeia]

🗒️ 설명

• 프론트에서 api 요청이나 그런거 오지않는한 관리자 화면을 만들어봅시다

1. 스프링부트 와 타임리프사용
   : 서버사이드 랜더링에서 타임리프 사용하는이유는 html을 동적으로 사용할수있기때문입니다. 이부분에 대해서도 깊게 알면 좋아요. (나도 깊게는 들여다 보지는않았는데 html인데 왜 동적인지는 모르겠네요)

2. semantic-ui , common.css(커스텀css)
   : 일단 기본적으로 semantic ui 라는 외부 css 프레임워크를 사용중이고요
   해당 프레임워크에 대한 문법이 몇가지가있어요 class에 ui form container 그런 단어들이 있는데 이게 지금 시멘틱ui 를 사용중이라 그런단어들을 쓰는겁니다

시멘틱이 막 메이저는 아니예요. 나쁘지않아요. 원래 부트스트랩이라는거 많이 사용합니다. 근데 이게 더 직관적이라고 전 생각합니다. 모든 class안에 줄임말을 안쓰거든요 이친구는
class="" 안에 뭐가 영어로 적혀있죠?? item icon ui segment list 등등등
근데 보면 읽히죠? 부트스트랩 사용하면 이제
mb-2, mb-4, mt-2, col-4, row 이런용어들을 사용해서 좀 맨처음 접했을때 힘들수가있어요
그래서 시멘틱 사용했다고 보면됩니다.

시멘틱의 단점은 무조건 jquery를 사용해야한다는거입니다.

3. table 테이블은 기본적으로 시멘틱ui의 테이블을 사용해도 당연히 됩니다. 하지만 저희는 tabulator라는 친구를 사용합니다.

• 테이블 관련 라이브러리도 이것저것 뭔가많은데요 datatable도 사용해봤습니다
• 이런 테이블 라이브러리의 좋은점은 페이지네이션, 필터링 기능을 안에서 지원해주고 파라미터도 알아서 추가해서 보내줍니다. 저희는 command에 해당하는 값을 추가해서 보내주고 service repo단에서 제대로 구현만 하면됩니다.
• 제가 좀 여기저기에서 많이써서도 한번 확인해보면됩니다

4. 보안관련된부분인데요 제가 이부분을 제대로 해보려고했는데 제가 막아놓은게 많아서 좀 어렵더라고요 그래서 페이지 파라미너토 accessToken을 같이 보내요 ^^;; 그리고 페이지별로 localStorage에 저장합니다... 그래서 참 안좋다고 볼수있죠.. 일단되긴하니까 이렇게합시다. 그래서 accessToken이 유효한 동안만 관리자화면에 머무르실수있습니다. refresh토큰개념 도입안했습니다

5. 페이지이동

• 페이지를 지나다닐떄 auth.js 안에있는 메소드 사용해서
• <a href="javascript:Auth.navigate('/admin/member')"
  이런식으로 사용해야해요
  그리고 dashboard에 있습니다

6. header와 footer

• header와 footer를 기본적으로 import해서 사용하면되고요 header에 거의 모든 js와 css가 들어있어서 따로 본인 html에 뭐 추가할필요는없어요
• 근데 tabulator는 따로 추가해야함 이유는 나도모름 import가안되던데 참~ 이해할수가없어요

7. css

• 기본적으로 모바일환경에 맞게 하려면

- 이거 사용하면 class에 따라서 css 적용되어서 table 이쁘게보입니다

팁들)

1. 리액트처럼 코드 바꾼다고해서 바로 화면에 보이지않아요 서버 재기동해야 바뀝니다
   css 임시적으로 바꿀때는 브라우저 개발자도구켜서 css 바꾸는거있는데 그걸로 바꾸면됩니다

2. style에 여러가지 문법이있는데 애초에 style="color=red;" 이런식으로 html코드안에 넣을수있지만 저희는 최대한 이 방식보다는 common.css에 해당 class를 지정하고 사용할겁니다
   그래서 겹치지않기위해서 좀 커스텀하게 쓰려고
   body에 해당 페이지 고유의 class를 정해놓습니다

모든 페이지의 body에 고유의 class를 붙입니다

그래서 같은 class여도 구분될수있게합니다
(이건 이제 제 스타일대로 만든거라서 보통 다들 어떤식으로 만드는지 몰라요 )

🙋‍♂️ 담당자

• 백엔드: 이름
• 프론트엔드: 이름
• 디자인: 이름