25.11.11 24일차 [fastapi_html에 메모 게시판 데이터베이스 생성,삭제,수정 적용_로그인 고객인증,암호화,로그아웃 ]
Datadesigner2025. 11. 11. 12:47
같이 듣는분이 빼빼로 줬다
오늘은 fastapi를 이용해서
html상에서 데이터베이스에 데이터를 생성, 삭제, 수정하는 기능을 적용하는 실습을 진행하였고
이후 로그인을 할 때 필요한 고객 인증, 고객 정보 데이터베이스 저장, 로그인, 로그아웃 등도 진행하였다.
jinja2 메모 등록 화면에서 메모 등록 처리 후 새로고침 적용
1. 메모 추가 버튼에 이벤트 함수를 추가해준다 = onclick = createMemo
2. createMemo에 기능을 부여해준다
memoTitle, memoContent 변수에 각각 값을 부여해준다 이 값은 문서.키를 찾아라 그 키가 어디? 메모 입력창에 있는 id이다. id에서 키를 찾아서 그 값을 가져와서 변수에 넣는 함수이다 232~233 그 이후 데이터베이스와 통신을 위해서 밑에 있는 fetch기능을 사용한다. fetch기능은 가이드가 정해져있고 우리가 입력하는 값만 수정해준다. 마지막에는 페이지 새로고침기능을 넣어서 바로 출력되게 만든다. 아무것도 없는 게시판데이터가 추가된 모습이다.
jinja2 메모 삭제 처리 적용
1. 게시판에 아까 적용한것처럼 삭제버튼칸에 이벤트를 추가해준다221번줄/ 빨간 줄은 무시해도 된다. 진자는 글뭉치로만 본다. 그리고 그 값을 불러올때 id를 사용한다.
id는 211번줄을 통해서 main.py에서 request해서 가져오게 된다,
2. deleteMemo 함수를 정의해준다
특정한 id를 가진 데이터만 삭제해야하기 때문에 경로매개변수를 사용해준다 260번 코드 그리고 메서드를 delete로 설정해주고 통신은 그대로 대입한다.
알림창과 함께 삭제되는 데이터
삭제된 모습
jinja2 메모 편집 적용, 토글기능 처리
1. 마찬가지로 게시판에 수정버튼에 이벤트 함수를 추가해준다 219번 코드
2. 전체 코드
2-1 : 272~278 먼저 요소를 get.....id를 이용해서 특정해준다 그리고 변수를 대입한다. 윗 사진의 214, 216번 코드에 id가 있다.
그리고 수정을 위해서는 readOnly 기능이 꺼졌다 켜졌다 해야한다. 이를 토글 기능이라 칭한다.
curIsEdit = readOnly기능으로 변수를 대입하고 이가 버튼이 눌릴때마다 꺼졌다 켜졌다 하고 꺼졌을때 수정 후 키면 그 수정된 값을 보내야 한다. 2-2 : 278~286 토글기능 관련 코드 제목과 글 내용의 readOnly가 curIsEdit로 되어서 이게 false일때는 수정이 되고 true일때 수정이 반영되는 if문을 작성해준다. 288~290 : 그리고 그 값을 데이터베이스로 보낼 수 있도록 .value를 통해서 수정된 값을 구해온다 통신 부분 코드 이렇게 획득한 값을 통신을 통해서 보내준다. 이때 editTitleElement, editContentElement는 수정된 값을 가지고 있는 변수이다. 그 값을 데이터베이스로 보내주면 끝
회색으로 표시되는 창
수정 버튼을 클릭하면 회색 창이 수정 가능하게 변한다.값을 입력하고 수정을 누르면 알림창과 함께 수정이 적용된다
그 이후는 회원가입, 로그인,로그아웃 등의 기능을 실습하였다.
1. Branch 생성
오른쪽 아래 DESIGN-DEV를 누르고 CREATE NEW BRANCH FROM...에서 새 브런치를 만들어준다. 로그인 작업은 다른 브런치에서 할 예정이다.
2. Auth / 고객 인증 시스템의 목표
# Auth - 인증처리 - 기본 - ID, PW(암호화), 세션처리 - 고객 테이블 구성 -> 회원가입, 회원정보수정, 회원탈퇴, 로그인, 로그아웃 - 메모 작성 시 고객 정보가 세팅 -> 회원별 메모작업 가능 - 발전 -> 차후 단계적 적용 - JWT 적용하여 토큰 기반으로 고객 인증 관리 - redis(No-sql 계열) 를 이용하여 세션 관리에 활용할 수 있음 - 확장 -> 차후 단계적 적용 - oAuth 적용하여 카카오/ 네이버/ 구글 등등 외부 (신뢰할 수 있는) 서비스와 연동 - 각각 외부 서비스와 관리 ID 만 저장(통상적 내용) - 관련 API는 dev.kakao.com, dev.naver.com, ...
1. 고객 테이블 구성, DTO(Data Transfer Object) 구성
sqlAlchemy를 참조하는 BaseTableModel을 참조하는 클래스 User를 만든다. 그리고 테이블을 만들어주는데 40~45 코드가 그 내용이다.
sql로 대입해서 보면 확실히 이해 될것이다. hashed_password인 이유는 비밀번호는 사이트에 넘어갈때 무조건 암호화를 거친후 가야하기 때문이다.
그 다음 DTO를 구성해준다. 맨 위는 데이터를 담을 테이블을 만드는것 가운데는 User가 회원가입할 때 입력할 정보를 담을 그릇 마지막은 User가 로그인할때 입력할 정보를 담을 그릇 이다.
2. Auth 암호화 패키지 모듈 최신형 적용
모듈 가져오기에서 11번 코드 bcrypt를 가져온다.
암호화 함수의 코드이다. 60~62번 코드가 한 단락 66~68번 코드가 한 단락 이라고 생각하면 된다 bvcrypt의 문법인데 utf-8로 인코딩을 하였고, gensalt는 그냥 외우고, 그 다음 다시 decode를 해줘야 암호화된 비밀번호가 바이트형이 아니라 제대로 나온다고 한다. 그리고 밑의 내용은 ori_password=일반 비밀번호, hashed_password=해시된(암호화된)비밀번호 가 동일한가?를 체크하는 함수이다
회원가입 url 파트 코드이다. UserInsert를 참조하는 변수 user가 있고, 세션을 만드는 기본 문법인 db_conn을 복사해왔다. 이후 암호화 함수를 사용해서 hashed_password 변수를 만들었고 이 함수의 인자는 user 변수가 가져왔다. new_user는 User 클래스에 있는 사용자명, 이메일, 암호화된 비밀번호를 가지고 있는 객체를 만드는 ORM함수이다. 그 이후 db_conn 이용해서 add, commit, refresh를 진행해준다. 마지막엔 성공할 시 메세지와 user id를 출력해서 제대로 작동하였는지 확인한다.
thunderclient로 확인했을때 잘 작동하는 모습
Auth 회원가입 테스트 완료, 로그인 처리
/signin/ url을 만들어주고 signin 함수를 정의해준다. 먼저 데이터베이스에서 회원가입자 정보를 받아오기 위해 request를 사용하고, UserLogin dto에서 값을 받아서 login_data에 넣는다. target_user는 로그인하는 사람이고 이 사람이 unique 값인 username을 가지고 있는지, 가지고 있다면 클래스의 username과 UserLogin의 username 과 값이 일치하는지, 한개라면 ok이다. 그 이후 if target_user (이 값이 참인지, 없다면 바로 and에서 걸려서 로그인 안된다) and 비밀번호 체크함수에서 원래 패스워드와 해싱한 패스워드가 같은지 둘다 참이면 세션을 생성한다 = 180번 코드 그리고 로그인 성공 이 중 하나라도 걸리면, 로그인 실패 password = qqq / 로그인 실패password = ppp / 로그인 성공
세션 생성, 적용, 로그아웃 처리
기존에 작업했던 세션 형성 코드 그대로 가져온다 = middleware 괜히 불안해서 가림 ㅎ
사진 상 180번 코드, 195번 코드가 세션에 관련된 코드이다. 180번 코드는 세션 생성 문법이고 195번 코드는 세션 삭제 문법이다. 처음에 배운 pop으로 데이터를 뺀다고 한다.
로그인 페이지 html 적용
login url을 만들어주고 기본적으로 사용했던거 그대로 가져온다. index.html은 강사님께서 제공해주셨다.
오늘은 요기까지
태그를 바꿔야 하나 모가 문제지 사람들이 들어올 만한 내용을 안써서 그런가
조희수때문에 시작한 블로그는 아니었는데 어제 조회수 2회나오니까 신기해가지고 오늘 0회 니까 괜히 딴 생각 든다
다른사람들은 어떻게 올리길래 많이 들어오는것인가 제목이 특이한가?
하긴 나도 티스토리 들어올때면 원하는 키워드가 있어서 그걸 검색해서 들어올 때 아니면 들어올 일이 없었던것 같다
이런거 보면 네이버 블로그, 인스타그램, 유투브로 돈 버는 사람들은 정말 대단하다
어떻게 그 밑바닥부터 시작해서 몇만명, 몇십만명이 자기를 보게 만들지
인터넷을 이용하지 않으면 바보인 세상이라고 모두들 말하고 생각하면서도 정작 그걸 제대로 활용하기는 정말 힘들다
사람은 변화와 도전에 본능적으로 보수적인 생각을 가지기 때문이다
참 어렵다 사는게
수업은 요즘 웹페이지 쪽으로 많이 가고있는 느낌이 든다, fastapi의 기능이라서 그런가
이전에는 우리 과정이 풀스택개발자 개념이었다고 들었다
그런데 이제 ai활용까지 합쳐진 새 과정을 만든것이라고
풀스택 맞는거같긴 하다 어떤 특정 기능 쓸때에는 웹 페이지가 아예 필요 없다고 하던데
그래서 같이 수업듣는 분이 어떤쪽에 관심이 있는지, 그런 부분을 잘 생각해야 한다고 하셨다,
