SPA..

대학 생활 왜 쓰지도 않는 포트란, 코볼을 살짝스하게 배우는지......뜬금포 연관성 없지만 생각났다.

언어는 발전해 간다.. 근데 왜 어떻게 발전해 가냐?????

스프링만 배운 친구는 스프링에 고마움을 모른다.. EJB를 써봤어야지.... 스트럿쳐1,2를 써봤야지...

나는 대머리 꼰대라서 ㅠㅠ

 

어쨋거나 스프링의 모토는 without EJB다. 

 

본론으로 가자.ㅋ

 

SPA는 하나의 페이지에서 모든것을 랜더링한다.

 

호랑이 담배 피던 시절.. JSP에 제이쿼리 조합 시절에는 상상도 못했지..쉬바

가상돔이 왠말이냐

 

고객의 니즈는 심플했지만 구현하기는 낫 심플했다.

RFP1) 페이지 인덱스 상태를 가지고 있어야 한다. 

 

3페이지에서 게시판을 조회하고 뒤로가니를 하거나 목록보기 버튼을  클릭하면 3페이지에 머물러 있어야 한다.

근데..안 된다. 왜.  난 SPA니깐!!

 

기획이 체계적으로 정리되어있다면....... 기획 욕하지 말자...왜? 어딜 가나 똑같으니깐. 

 

내가 그냥 확장성 있게 다 같다 붙여 쓸스 있게 만들자!!! 

최고의 확장성 코드는 리소스 변경없이 화면을 변경시키는 코드이다 매번 변덕쟁이 기획놈(?)을 신뢰하면 안 도ㅣ니깐

--> 하드코딩이 아니라 데이터를 가지고 핸들링 해야 된다는 말이다.

 

SPA가지고 오나전 옆길로 셋다.

 

게시판관련 화면이 한 화면에서 조회가 되고 등록&수정이되고 리스트가 보이고 하는 구조라면 페이지에서의 상태관리로 충분한데...

 

모바일을 위한 반응형으로 만들어야 했기 때문에 리스트/조회화면/등록화면 이 모드 별도 라우팅 되는 구조다.

따라서 조회화면과 리스트화면은 별개의 개별 상태를 갖는다.

 

또한 조회(View)화면이 리스트화면에서만 디펜더시가 걸린것이 아니다.

그림을 그려보자!! 

 

백엔드는.. 단순 CURD만 생각하면 되는데 생각보다 프론트에 더 많은 머리가 뽑히고 있다.

 

시나리오))

1. 사용자가 3페이지를 보고 있다가 글을 등록하고 싶어져서 등록하려고 샬라샬라하고 있는데 갑자기 굳이라는 마음을 먹고 "등록 취소"를 하면 3페이지를 유지하는 것이 맞는가? 1페이지로 가는것이 맞는가?

2. 비슷한 케이스에서 조회를 하고 목록보기를 하면 무조건 1페이지를 가는것이 우리가 기대하는 화면이 맞냐?

 

뎁스있는 고민을 해주면..나는 개발에만 집중하겠지...내가 뎁스를 고민해줘야 하냐? 뎁스에 대한 분기문만 고민하고 싶다..ㅋ

 

당연히 되어야하는 편의기능인데...티스토리도 안 된다^^

"개발이야기/자봐" 카테고리에 내 3페이지에 있는 녀석을 조회하고 다시 "개발이야기/자봐"를 선택하면 1페이지로 간다. ㅎㅎ

 

남들 안 된다고 안 할꺼야??

 

모든 기획은 코에 걸면 코걸이가 되고 귀에 걸면 귀걸이 배에 걸면??? 혁띄가 되는것이다^^

그렇기 때문에 밀어 붙이기 위한 나름의 타당성만 가지고 있으면 된다.

그냥 다 이렇게 하던데요??......그냥요???.. 요세 친구들은 자신만의 개똥 철학이 없다.

 

나도 뭐 해달라고 하면 그저 해주기는 하는데...납득이 가도록 충분한 설명을 해주는 친구들이 많지는 않다.

결론은 게시판 상태를 가지는 녀석을 만들었다.

boardsCondition : { 'origin' : 'view', 'pageIndex' : 2, ... }

 

전역상태가 잘 관리가 되지 않는다면..꼬인다면..

새롭게 누른 게시판도 Index=0으로 가는 것이 아닌 전역에서 관리되고 있는 Index로 설정이 될 것이다.(초기화 이슈)

 

깔끔하기 처리 하기 위한 핵심은 origin 이다! 

출처(출발지)가 list, view, save의 경우만 pageindex를 활용하고 나머지는 그냥 빵(0)으로 보내면 된다.

 

https://primevue.org/paginator/

PrimeVue | Vue UI Component Library

 

이 친구를 이용해서 네비게이션을 구현했는데.. 초기값을 어떻게 설정했는지. 삽질좀 했다..다 나와 있는데 영어만 잘했어도 ㅠ

<Paginator
    :rows=this.pageSize 
    :totalRecords=this.boardCount 
    :first=this.pageIndex
    @page="searchBoard($event.page)" 
    v-if="this.boardCount>0"
/>

: first = pageSize * page로 해야 한다.  ( 0, 10, 20, 30)

 

 

나의 마지막 뷰 프론트 작업이 되기를..

신선한 인사인트를 주신 뷰3님 고맙습니다.

 

이제 마지막 인사를 하십당!! 

혹여나 다음에.. 새로운 프론트 작업을 하게 될때 면...

 

고민이 될 것 같다... 뷰? 리액트?