어느 서비스 구성하기 일지

TODO

• 인증방식 파악하고 클라이언트에서 인증을 어떻게 구현할지 구상하기 (with 김병수)
• 프로젝트 개발환경 구상
• 저장소 만들기
• 환경 구성
• 인증 처리쪽 구성

nuxt3 + ant-design

개발환경을 구성을 시도를 해보는데 구현은 실패했습니다.
현재 공식팀에서 지원하는편이 아니고 찾아봤더니 자료가 매우 부족했습니다. 가끔 올라온 이슈에서 성공했다는 케이스도 제대로 동작이 안되는 패턴이 대부분이었습니다.
현재까지는 vue + ant-design 까지 구현이 가능하지만 SSR을 사용해야 한다면 다른 방향을 생각해야 할지도 모르겠습니다. (아마 베스트픽은 next.js 일지도..)

• 만약 설정을 성공하지 못할때의 선택지
  • nuxt3만 사용한다. ⇒ UI 컴포넌트 직접개발
  • nuxt + (ant-design or vuetify) ⇒ 과거 버전으로 돌아감
  • next.js ⇒ 리엑트 진영이지만 완성도가 가장 높습니다. 하지만 리엑스 손댄지 오래되어서 좀 해맬지도..
  • vue3 + ant-design ⇒ 플랫폼 관리자에서 구현했기 때문에 사용 보장되지만 SSR을 사용할 수 없습니다.

설정 재시도

엘리먼트 플러스에서 nuxt3 예제를 보고 시도해볼만한 아이디어가 떠올라 개발모드와 빌드, 라이드서버 여는데까지 성공했습니다. (버튼 ant-design 컴포넌트를 넣고 테스트)

자동으로 컴포넌트를 불러오는 방식보다는 컴포넌트를 디펜던시에 있는 곳으로 각자 임포트해오니 더이상 오류가 나오지 않았습니다. (엘리먼트 플러스도 마찬가지..)
단순히 모듈이나 플러그인으로 끼워넣는다고 해결되는 문제가 아니어서 일일히 컴포넌트를 불러다 사용해야 하는겁니다.

브릿지 컴포넌트

그래서 작업을 하게 되면 대단히 불편해질거 같아서 ant-design 컴포넌트를 가져와서 내부 컴포넌트로 사용할 수 있도록 중간 영역을 만들어야 할거 같습니다.

페이지 <-> 브릿지 컴포넌트 <-> ant-design 컴포넌트

이런 방식이 좋을 수 있는 이유는 각 브릿지 컴포넌트에서 ant-design 컴포넌트를 삭제하고 새로 만들어서 커스터마이즈 할 수 있습니다. ant-design 컴포넌트를 사용한다면 그대로 리턴해 주는것이죠.
중간 컴포넌트는 auto import 할 수 있어서 일일히 import 할 필요가 없어집니다.

다만 각각 ant-design 컴포넌트와 연결하는 컴포넌트를 만들어야 하기 때문에 그대로 쓰는것보다 다소 손이 많이가게 되지만 사용하는 컴포넌트만 만들면 될것입니다.

인증처리

• 서비스 접속 → 로그인 화면으로 이동(첫 실행)
• 로그인 정보 요청 → 서버에서 토큰받기
• 클라이언트 영역 내부 스토어에 보관하면서 로컬서버 저장
• 내부 컨텐츠를 요청할때 헤더에 토큰을 넣고요청 → 데이터를 받고 화면에 표현
• 토큰이 만료된다면.. (이건 환경을 구성하면서 만들계획)

구현한 인증처리

• 서비스 접속 → 쿠키에 토큰이 없다면.. → 로그인 페이지로 이동 → 이메일과 비밀번호를 입력하고 서브밋 → 로컬 서버로 요청 → 인증서버로 요청하고 응답받기 → 로컬 서버에서 쿠키저장하고 토큰값 응답 → 응답받은 토큰값을 스토어에 저장 → 컨텐츠 요청에 토큰값 사용
• [아직 미구현] 컨텐츠 요청(헤더에 토큰값 들어있음인

인증서버는 브라우저에서 요청할때 CORS 오류가 나서 일단 보류할까 했으나 SSR 특성상 백엔드에서 내용이 출력되어야 하기 때문에 타이밍이 빠른 쿠키에다 토큰을 저장하려 했습니다. (처음에는 로컬스토리지에서 사용할 예정이었습니다.)
백엔드 영역에서 로그인이 되었는지 판단하고 컨텐츠 데이터를 요청한 후에 내용을 출력할 수 있게 되었지만 인증서버로 요청하고 받는 과정에서 한단계 추가되었습니다.

브라우저 <-> 클라이언트 서버 <-> 인증서버

이러한 과정을 선택한 이유는 클라이언트 서버에서 인증서버로 통신을 할 수 있다는점과 http 쿠키를 저장할 수 있다는 점입니다.

인증서버의 인증특징

• 엑세스 토큰의 유지시간은 4시간
• 리프레시 토큰은 인증서버쪽 도메인 패스로 쿠키로 받지만 신경안써도 될법하다.
• 인증이 만료되었으면 재발급 요청을 해서 엑세스 토큰을 업데이트 하면 될것이다. (구현 후에 알수있다.)

인증동작 플로우 재조정

인증서버의 작동방식에 의해서 클라이언트 서버에서 인증처리하는 것보다 브라우저에서 인증처리하는 방식으로 변경하는쪽으로 플로우를 조정하게 되었습니다.
아직 CORS 관련 오류로 인해서 바로 작업은 할 수 없고, 동작 플로우만 따로 그려두면서 정리해두었습니다.

레이아웃 작업

일단 피그마에 그려진 와이어프레임대로 만들어보려는데 한계가 있는점이 보인다.
레이아웃 사용에 대한 확정인지 아닌지에 대한 요소가 하나도 없는 상태이다보니 이대로 만들어야 하나 고민이 자꾸 생긴다.

이대로 만들어야할지 아닐지에 대한 요소들이 모두 존재하니 머릿속을 비우고 진행할 수 없다.

그냥 나 혼자 구상하고 만드는 작업이라면 나혼자 와이어프레임 그리고 디자인 만들고 코딩하면 그만인데 앞 단계에서 정해줘야지 진행할 수 있는 입장이 좀 답답할 뿐이다.

일단 다른페이지로 이동할 수 있도록 글자로 네비게이션만 구성해두는것이 최선인거 같다.