25.11.12 25일차 [fastapi_html 로그인페이지 상세 구성, 회원가입 추가, 응답코드 획득, 로그인 성공및 실패에 대한 상세 후처리, 화면 새로고침 | aws 초기 세팅]
Datadesigner2025. 11. 12. 17:33
나는 런던으로 떠난다
오전에는 어제 진행하던 fastapi의 남은 부분을 이어서 진행했다.
로그인 페이지 상세 구성
회원가입 기능 추가
응답 코드 획득
로그인 성공 및 실패에 대한 상세 후 처리
화면 새로고침, 주소창 보안 유지
오후에는 aws 초기 세팅을 진행했다.
Auth 로그인 페이지 상세 구성
기존 코드이다, 여기서 label 부분 코드를 삭제해주고 placeholder로 화면상에 입력할 값 힌트를 띄워준다. placeholder로 수정한 코드
회원가입 기능 추가 회원가입 추가 파트 1
먼저 130~132 코드는 진행의 편의상을 위해서 입력창을 미리 채워둔것이다, 실제상황에서는 xxx
회원가입 처리용 함수를 정의한다. form 전송방식을 사용하고있기 때문에 화면이 깜빡인다. 이를 방지하고 원하는 타점에 통신을 진행하기 위해서 138코드를 사용한다. 이후 param이라는 객체를 생성하여 사용자가 입력한 값을 획득해온다, 142~145 코드
이 값들의 이름은 백엔드에 가면 확인할 수 있다.
백엔드 main.py상 값들의 키
getElementById로 입력창에서의 정보를 받아온다. 그리고 그 값인 .value를 구해온다.
파트 2
fetch 함수를 사용해서 데이터베이스상에 회원 정보를 저장한다. signup url에서 POST 방식을 사용하고, headers는 json, .169~172는 응답하는 코드의 페이지 코드를 받아내기 위해서이다, 이는 추후 로그인 처리 시에 사용된다. main.py = 백엔드 상에서 회원가입 처리 코드 그리고 어제 수행했던 백엔드상 코드를 확인하면 이 함수에 맞게 작동하면 가입완료 후 new_user 데이터가 생성된다. 만약 이 함수가 제대로 post방식으로 보낸다면 (=174번 코드 result.code == 200) 가입 성공, 그리고 회원가입 성공을 출력해야한다. 그게 아니라면, 예외처리 throw를 통해서 회원가입 실패를 잡아내고 catch로 가입 실패와 알림창을 띄운다.
결과 기존 화면, 기본값이 들어가있다.회원 가입 성공, 오른쪽에 출력되는 값들도 확한번 더 가입하면 이미 있는 값이기 때문에 가입 실패가 되고 throw한 오류메세지가 출력된다.
가입 실패가 뜨는 이유는 username이 unique 인덱스이기 때문이다.
로그인 처리 함수 파트 1, 사용자가 입력한 값을 받아낸다, 이문법은 자주 사용하였다.파트 2
파트 2에서 중요한 부분은 209~221 번이다. 먼저 기존의 백엔드를 본다면
현재는 데이터베이스에 연동되지 않고 더미데이터로 응답했다. 그래서 어떤 값이 나오든 백엔드에서는 return을 수행한다. ex/ 로그인 실패가 떠도 백엔드의 역할은 로그인 실패를 html로 보내는것이기때문에 응답코드가 200(성공)으로 출력된다.
그래서 186번에 HTTPException을 추가해서 로그인 실패시에 401, 오류문을 세팅해서 로그인 실패하면 해당 데이터를 보내주도록 세팅한다.
그 이후 209~216번 코드는 200번으로 날라온 res 를 각 body별로 할당하여서 오류코드인 401을 꺼내올 수 있게 분배해주는 역할을 수행한다. 이렇게 해야 실패한 데이터를 찾을 수 있기 때문이다. 저렇게 나눠주지 않으면 성공한 200번 데이터 안에 401이 밑에 들어가있어서 로그인 실패를 잡아낼 수가 없다. 이렇게 세팅한 이후에 218번 if문으로 응답코드가 401이라면 경고창과 로그인 실패를 하게 세팅한다. 그리고 221번 코드를 통해서 (주석 빼야된다) 새로고침시켜버린다. 그리고 225번은 로그인 성공할 시 게시판으로 이동한다. 로그인 성공
