플러터 , 스프링 이용 프로젝트 만들기

플러터를 이용하여 웹과 앱을 동시에 만들려고 하였으나

플러터를 이용하여 웹을 만들게 되면 SEO에 취약하다는 점을 알게 되었다.

취약하다기 보다는 방식이 달라 안된다고 생각하면 된다.

Flutter과 같이 single page application 은 페이지 하나를 로딩 후 그안에

자바스크립트를 이용하여 이벤트에 따라 요소들을 만들거나 사용하는데

그러다 보니 검색엔진에서 특정 페이지나 데이터가 이벤트가 없이 나타나지않고

주소랑 데이터를 매칭시킬수가 없는 것이다

반면 server side rendering 방식은 서버에 주소를 요청하면 그 주소에 대응하는

내용이나 페이지등이 반환되므로 이 데이터들을 검색엔진이 기억하고 있다가

노출 시키거나 연결 시켜 줄수 있는데 플러터나 앱등 spa류는 이게 불가능 한것이다.

react는 next.js 같은 프레임웍이 있는걸로 알고 있지만 플러터는 아직

해결 방법이 정확히 모르겠다

앱 위주의 방식이라면 플러터도 괜찮은데 기존 웹처럼 검색 엔진에 노출이 되고 싶다면

다른 대안을 찾아 보는게 좋겠다.

그렇지만 저는 플러터도 좋고 사용해 보고 싶어 플러터로 앱을 만들고 스프링으로

ssr을 만들어서 사용해 보려 한다.

플러터는 주로 파이어베이스 기반으로 해서 로그인등

기본 기능들을 사용하기 편하게 되어 있고 요즘 웹도 구글 로그인등

소셜 로그인을 많이 이용하기에 데이터베이스에서 아이디 비번대신

구글 로그인등을 이용하여 계정계를 만들려 하기에

그 접점이 Firebase 일거 같아 이걸로 묶어서 만들어 보려 한다.

Flutter는 파이어베이스를 사용하여 로그인등 편하게 구현할수 있고

문제는 스프링쪽에서 firebase js를 이용하여 원할하게 하는것인데

이를 실습해 보려 한다.

스프링 프레임웍에서 Firebase ui js를 사용하여 로그인 하는 방법이 있고

내부에 구현체를 이용하여 로그인 시키는 방법이 있는데

js를 사용하면 스프링 프레임웍 내부 컨트롤 단에서 권한등 체크하는게

애매해질거 같고 토큰을 jwt로 변환하고 검증하는 부분을 구지

서버에서 처리하면 서버에 부하만 줄거 같아 js를 이용하는 방법을

실습해 볼것이다.

일단은 스프링에서 js를 사용하여 로그인까지 되는 단계까지 만들어 놓았고

플러터에서도 파이어베이스 auth를 이용해 로그인까지는 만들어 놓았다

플러터

- 플러터 파이어베이스 프로젝트 생성

- 로그인 기능 간단히 만든다

스프링

- 프레임웍 초기 세팅

- 페이지에서 js 호출 로그인 페이지까지 구현

파이어베이스 홈페이지 프로젝트와 그 안에 제공되는 코드를

가져와서 스프링의 페이지에서 js 실행 로그인 기능 실행

이제부터는 로그인 권한을 적용하는 방법등을 알아 보려고 합니다

jwt를 이용해야 할거 같은데 아직까지는 막막하네요 하나씩 기능을

만들어 보겠습니다.