d0ngwook1m / javascript-oop-canvas Goto Github PK

0. 그림으로 메모 그릴 수 있는 사이트 개발

   1. 백엔드 구축(express)

1. 백엔드 구축(flask)

   2. OOP 적용해보기(가능한 곳에 다)

2. 회원가입, 로그인, 로그아웃, 세션 사용하기

3. canvas 써보기(그림 그리기)

4. (옵션) DB에 메모 저장 가능한지 확인해보기

라매개발자님의 동영상을 보고

1. express 패키지를 사용해서 app.js 구동
2. pug로 템플릿 파일(html 변수, 수식 등이 적용 가능해짐) 적용해봄

내 목적은 프론트엔드가 가져야 할 백엔드 기초지식 함양인데 react가 pug의 기능을 할 수 있는 것으로 보여 과감하게 패쓰해야겠다!

3. mongoose 적용해봄

MongoDB에서 추가 기능을 사용할 수 있게 해주는 패키지

생각보다 로그인에 필요한 백엔드 구축에 시간이 많이 들 것 같아서 그냥 flask를 vsc에서 써보면서 적응하자로 방향을 바꿨다. 뼈대는 Luke Peters 님 동영상 참고하고 js 부분을 어떻게 oop처럼 쓸지 고민 많이 해봐야 할 듯...

vscode에서 mongodb로 정보가 안 넘어가서 몇시간 동안 찾아보다가 안 나와서 혹시나 하는 마음에 pycharm으로 돌려보니깐 된다.... 대체 왜???😨 OOP도 패스하고 일단 회원가입, 로그인, 로그아웃 최대한 간단하게 만들고 dashboard.html에 캔버스 실험을 해봐야겠다.

1. script.js -> formData를 미리 정리한다. -> body에서 정리한 formData models.py에 전송
2. models.py -> formData를 request.get_json()으로 받는다 -> DB에 데이터 저장 -> 성공 또는 실패 script.js에 전송

1. 암호화된 비밀번호 불러올 때 pbkdf2_sha256.verify(입력한 비밀번호, 암호화된 비밀번호) 순으로 인자를 잘 적어야 True 또는 False를 값으로 준다. 나는 반대로 넣어서 값이 안 나왔다;; 입력한 비밀번호를 다시 암호화 해서 대조하는 방법도 시도해봤지만 암호화 된 값이 달라서 적용되지 않는다.
2. 토근기능을 안 넣어도 된다고 한다! 그러면 어떤 기능을 쓰는게 좋을까?
3. 동영상에 있는 session 기능을 한 번 써봐야겠다 싶어 루크의 동영상을 보니 토큰과 같은 방식으로 작동을 하는 것이었다. https://fierycoding.tistory.com/69 여기에서 토큰와 세션의 차이점을 알 수 있었다. 권한 (예를 들어 로그인을 안한 사람이 /dashboard로 url을 입력하여 들어가면 어떡하나) 같은 문제도 들어가기전에 세션으로 먼저 검사를 하여 걸러내는 방식을 사용했다. 나중에 권한 관련한 부분은 세션 체크를 넣어주면 될 것 같다.

TypeError: Object of type ObjectId is not JSON serializable: _id를 직접설정하지 않으면 자동으로 ObjectId가 생성되는데, 이것이 JSON화 되지 못하기 때문에 생긴 현상으로 추측

start_session 생성 시 session이라는 이름의 쿠키 생성... 근데 세션과 쿠키의 차이점은 저장 장소라고 하는데 이건 왜 쿠키로 저장되는지는 잘 모르겠다...

session은 app.secret_key가 있어야 작동함 -> 터미널에 python -c "import os; print(os.urandom(16))" 으로 키 생성, 근데 아무거나 해도 작동에는 문제 없는 듯?

Decorator의 *args와 **kwargs는 얼마나 변수가 들어가는지, 어떤 형식으로 들어가는지 모를 때 넣는 값인 듯 하다. 참조 : https://code.tutsplus.com/articles/understanding-args-and-kwargs-in-python--cms-29494

jinja로 html마다 js 할당 가능! 기능 구분할 때 잘 쓰일 것

내일은 빠르게 메모 앱 기능 만들어보고 모레 업로드 한번 해봐야겠다.

canvas를 이용해서 그림을 그리고, 그 그림을 이미지로 저장하는 것까지 완료했다. 그 이상은 항해에서 필요할 때나 나중에 공부가 더 필요할 때 적용해보려고 한다. 캔버스는 캔버스 태그를 크기를 지정해 그리고 컨텍스트를 지정해서 그림을 그리는 것이 기본이 된다는 것을 배웠다. 실제로 이미지 DB저장 할 때 생기는 문제나 컨텐츠 삭제 시 권한 부여 등은 나중에 한번 고려해도 좋을 것 같다.

실제 배포까지 완료했다. dongwookim.shop 파이썬 파일을 기능별로 나누는건 이번에도 작동하지 않았다. 분명 init.py를 어떻게 바꿔야 한다는 걸 검색결과 어렴풋이 알게 되었지만 정확히 내가 원하는 정보를 찾지 못해 이번에도 app.py에 다 넣었다. run 파일 서버에서 실행하기, requirements.txt로 패키지 한번에 다운하기 다 실패로 돌아갔다ㅠㅠ 그래도 시작하기 전에 확실히 사전전검하는 느낌으로 하기에 좋았다고 생각한다. 그리고 첫번째 사전 스터디에서 우리를 좌절시켰던 몽고DB 에러가 서버에서 또 발생했는데 그냥 인스턴스 지우고 다시 하니까 문제가 해결되었다... 이것도 다시 경험해봐서 다행이라고 생각한다. 기능별로 js와 css만 진자로 나누고 파이썬 파일은 하나에 다 때려넣어야겠다.

원래 계속 flask로 백엔드 구축을 하고 싶었지만 정보부족과 언어의 장벽이라는 두 산이 나를 막는다.... 역시 다시 nodejs로 눈을 돌려야 하나 고민중이다. 생각보다 간단하게 백엔드 서버가 작동하고, 코딩테스트 언어라는 점에서 매력을 느꼈는데 아쉽다. 나중에 한번 flask 구조 어떻게 나누는지 물어나 볼까?