[Flutter] 23. 모두의 블로그 앱 만들기 (1) - 회원가입 페이지 (1)

김주희

Jun 08, 2025

[Flutter] 23. 모두의 블로그 앱 만들기 (1) - 회원가입 페이지 (1)

Contents

서버 실행 회원가입 페이지 join_body 창고 만들기 유효성 검사 ?

flutter_secure_storage : 휴대폰 디스크에 저장

애뮬레이터에서 localhost는 flutter 개발 서버가 아닌 애뮬레이터 내부를 가리켜서 인식X

dio는 내부적으로 예외 터트려서 내가 msg를 가져오기 위해 파싱 불가

_core/utils/my_http

SplashPage : 그림이 보여지는 동안 통신, 데이터 받아오기 등의 과정을 진행

서버 실행

서버 실행하기

jar 파일이 있는 폴더 열기

Open Git Bash Here로 터미널 열기

java -jar 파일명 으로 실행

jar 파일이 하나 뿐이므로 tab키를 누르면 바로 파일이 뜬다.

api 문서 열기

localhost:8080/docs/api.html 열기

회원가입 페이지

join_body

map으로 만들면 dio가 알아서 json으로 바꿔준다.

?

그림은 body만 보면 되도록 그냥 다 빼두기! (ex - JoinBody처럼 / 컨벤션임)

Form - Column으로 감싸기

Form 위젯의 기능을 안쓰더라도 그냥 form으로 감싸는게 좋다

Form : 위젯(JoinForm)으로 추출

창고 만들기

join_fm

TextEditingController 사용X!!!

vm은 화면에 뿌릴 데이터, fm은 전송할 데이터를 의미한다. → 컨벤션!

창고 데이터 타입 만들기

생성자, copyWith를 무조건 만들어야 된다!

근데 화면 변경이 아니라 모아서 전송하려고 하는거라서 리로드 될 필요 없어서 copyWith Form에서는 안만들어도 된다.

창고 만들기

데이터를 null로 초기화할 일이 없음 → ?안써도 됨

1.글자를 적을때마다 채워넣기 or 2.버튼을 눌릴때 채워넣기

적을때마다 넣으면 바로 validation 체크 가능 → UX 좋음

나중에 한방에 validation 체크 가능

상태를 변경할 때 그림만 다시 안그릴거면 기존의 상태 변경해도 됨

깊은 복사 하는 이유 = 그림 다시 그릴려고

글자 적을때 그림 다시 그릴 필요 없음 → 리로드 필요 X → validation체크할때만 그림 다시 그리면 됨

→ 깊은 복사 해야됨

⇒ 결국 나중에는 CopyWith 만들어야 됨

창고 관리자

화면 들어갈때 창고 관리자 만들어지면서 창고 만들어지고 joiModel 공백으로 만들어짐 그리고 그림 나중에 다시 안그려짐

copyWith

유효성 검사 하기 전이라서 오버스펙이긴한데

화면에 대한 창고 만들었고 ~1 : 30: 00

유효성 검사

validator_util.dart

기존의 validator_util은 textEditingController에 적용되는 거라 수정

join_fm 유효성 검사 추가

`CustomAuthTextFormField`

?

값이 들어가고 rebuild 될때 ? ~ 1:36:00

그 전에는 onchanged에 print문을 넣었는데 한타이밍 늦는 문제 → 해결

유효성 검사 에러 메세지

errorText 꾸미고 싶으면 gpt에게 물어보면 됨

위치 변경하고 싶으면 stack으로 해서 내가 커스텀 함수 만들어서 사용하면 됨

onChanded를 안쓰면 값이 갱신이 안된느데 없으면 버튼을 클릭할 때 되도록 onclick에 넣으면 됨

상태 갱신이 안되어있어서 여기서 불가능 value가 없어서 → fm.validate()가 true일때 통신하는걸로 만들면 됨

(여기가 아니라 CustomElevatedButton 회원가입 버튼의 click으로 if문 옮기기)

코드 수정

다른 항목 통과해도 유효성 검사 에러 메세지 보이도록

통과했을때 없어지도록 다시 수정


필드 1
username = 's'
usernameError = "메시지" -> null

필드 2
password = "k"
passwordError = "메세지"

유효성 검사 메세지 유지를 위한 코드 수정

errorText 가 공백을 받으면 공간을 잡지만 null을 받으면 공간을 안잡는다.

회원가입 페이지에서 상태 관리 목적 : form의 데이터를 관리하려고(통신하면 버리면 됨)

통신은 global view model을 만들거임 → 화면에 연결된 vm 아님

→ 거기에 로그인,로그아웃 등 함수 만들거임 ⇒ 유저의 세션 전역적으로 관리할거임

로그인 화면 = 사용자 입력O -

게시글 목록 화면 = 사용자 입력X - select해서 뿌리는 데이터 - vm 창고 필요 (view에 필요한 모델 가져와야됨)

게시글 쓰기 화면 = 사용자 입력O -

유저 정보 화면 = 사용자 입력X - select해서 뿌리는 데이터 - vm 창고 필요 (view에 필요한 모델 가져와야됨)

fm = 사용자 입력값 모아서 유효성 검사

vm = select해서 db에서 api 요청해서 가져와서 값 뿌리는거

유효성 검사 그냥 화면에 stack 더 쌓아서 alert 띄울거면 그림 다시 안그려도 됨

지금 코드는 화면에 유효성 검사 메세지를 바로 뿌려서 copyWith 필요한 것

state를 기반으로 화면 그림 - 게시글 목록/ 유저 정보

state를 기반으로 에러 메세지 그림 - 로그인/게시글 쓰기

MVVM 패턴

화면마다 (view마다) viewmodel이 있다. 1:1 매칭 - ui랑 비지니스 로직, 데이터 분리됨

global view model = 어느화면에도 붙어있지 않는 모든 화면에서 다 쓰는

상태가 유저 정보 관리 - 유저 정보에는 로그인된 유저인지 아닌지/유저네임/유저 토큰 저장

얘가 바뀐다고 화면 그림이 바뀌지X - watch할 필요 없고 read하면 됨 (그림 다시 그리지X)

notifierProvider = 상태가 바뀌면 알림을 주는 provider

데이터를 그냥 모으려고 쓰는 영역 = session 영역처럼 저장만 하려고 하는 = stateProvider

stateProvider를 따로 만들어야 됨 → watch 불가 = 알림을 안주는 provider라서 = read만 가능

→ 근데 우리는 stateProvider 안쓸거고 notifierProvider만 쓸거임 그냥 read만 하면 됨

(잘하게 되면 stateProvider로 read만 되도록 하게 됨!)

global view model에 상태가 변수로 isLogin이 있음 false이면 게시글 목록 들어갈때 init에서 로그인 상태인지 확인하고 ~? ~ 3 : 03 : 00

session global view model = (spring) session

fm에서 로그인 함수 만들지 X → sesison global view model에서 만들기

See more posts

[Flutter] 23. 모두의 블로그 앱 만들기 (1) - 회원가입 페이지 (1)

서버 실행

서버 실행하기

api 문서 열기

회원가입 페이지

join_body

?

Form - Column으로 감싸기

Form : 위젯(JoinForm)으로 추출

창고 만들기

join_fm

창고 데이터 타입 만들기

창고 만들기

창고 관리자

copyWith

유효성 검사

validator_util.dart

join_fm 유효성 검사 추가

CustomAuthTextFormField

?

유효성 검사 에러 메세지

More articles

[Flutter] 25. 모두의 블로그 앱 만들기 (3) - 로그인 페이지

[Flutter] 24. 모두의 블로그 앱 만들기 (2) - 회원가입 페이지 (2)

[Flutter] 22. 통신

[Flutter] 21. 모두의 마켓 앱 만들기 (6) - 내 근처 페이지

`CustomAuthTextFormField`