구성하고 있는 프로젝트 노션에서 프로젝트 설정에 대한 노트를 적어두고 있는데 그대로 날라가는 모습이 안타까워 따로 기록하게 되었다.
일주일 단위로 노트가 새로 생성되며 노트 단위로 코멘트로 추가하고 있다.
b2b-service (이름이 뭐 이런지..)
개발환경을 구성을 시도를 해보는데 구현은 실패했습니다.
현재 공식팀에서 지원하는편이 아니고 찾아봤더니 자료가 매우 부족했습니다. 가끔 올라온 이슈에서 성공했다는 케이스도 제대로 동작이 안되는 패턴이 대부분이었습니다.
현재까지는 vue + ant-design 까지 구현이 가능하지만 SSR을 사용해야 한다면 다른 방향을 생각해야 할지도 모르겠습니다. (아마 베스트픽은 next.js 일지도..)
엘리먼트 플러스에서 nuxt3 예제를 보고 시도해볼만한 아이디어가 떠올라 개발모드와 빌드, 라이드서버 여는데까지 성공했습니다. (버튼 ant-design 컴포넌트를 넣고 테스트)
자동으로 컴포넌트를 불러오는 방식보다는 컴포넌트를 디펜던시에 있는 곳으로 각자 임포트해오니 더이상 오류가 나오지 않았습니다. (엘리먼트 플러스도 마찬가지..)
단순히 모듈이나 플러그인으로 끼워넣는다고 해결되는 문제가 아니어서 일일히 컴포넌트를 불러다 사용해야 하는겁니다.
그래서 작업을 하게 되면 대단히 불편해질거 같아서 ant-design 컴포넌트를 가져와서 내부 컴포넌트로 사용할 수 있도록 중간 영역을 만들어야 할거 같습니다.
페이지 <-> 브릿지 컴포넌트 <-> ant-design 컴포넌트
이런 방식이 좋을 수 있는 이유는 각 브릿지 컴포넌트에서 ant-design 컴포넌트를 삭제하고 새로 만들어서 커스터마이즈 할 수 있습니다. ant-design 컴포넌트를 사용한다면 그대로 리턴해 주는것이죠.
중간 컴포넌트는 auto import 할 수 있어서 일일히 import 할 필요가 없어집니다.
다만 각각 ant-design 컴포넌트와 연결하는 컴포넌트를 만들어야 하기 때문에 그대로 쓰는것보다 다소 손이 많이가게 되지만 사용하는 컴포넌트만 만들면 될것입니다.
인증서버는 브라우저에서 요청할때 CORS 오류가 나서 일단 보류할까 했으나 SSR 특성상 백엔드에서 내용이 출력되어야 하기 때문에 타이밍이 빠른 쿠키에다 토큰을 저장하려 했습니다. (처음에는 로컬스토리지에서 사용할 예정이었습니다.)
백엔드 영역에서 로그인이 되었는지 판단하고 컨텐츠 데이터를 요청한 후에 내용을 출력할 수 있게 되었지만 인증서버로 요청하고 받는 과정에서 한단계 추가되었습니다.
브라우저 <-> 클라이언트 서버 <-> 인증서버
이러한 과정을 선택한 이유는 클라이언트 서버에서 인증서버로 통신을 할 수 있다는점과 http 쿠키를 저장할 수 있다는 점입니다.
인증서버의 작동방식에 의해서 클라이언트 서버에서 인증처리하는 것보다 브라우저에서 인증처리하는 방식으로 변경하는쪽으로 플로우를 조정하게 되었습니다.
아직 CORS 관련 오류로 인해서 바로 작업은 할 수 없고, 동작 플로우만 따로 그려두면서 정리해두었습니다.
commented 2022-06-28
일단 피그마에 그려진 와이어프레임대로 만들어보려는데 한계가 있는점이 보인다.
레이아웃 사용에 대한 확정인지 아닌지에 대한 요소가 하나도 없는 상태이다보니 이대로 만들어야 하나 고민이 자꾸 생긴다.
이대로 만들어야할지 아닐지에 대한 요소들이 모두 존재하니 머릿속을 비우고 진행할 수 없다.
그냥 나 혼자 구상하고 만드는 작업이라면 나혼자 와이어프레임 그리고 디자인 만들고 코딩하면 그만인데 앞 단계에서 정해줘야지 진행할 수 있는 입장이 좀 답답할 뿐이다.
일단 다른페이지로 이동할 수 있도록 글자로 네비게이션만 구성해두는것이 최선인거 같다.
commented 2022-06-29