[항해99] 개강준비과정-웹 미니 프로젝트_7조 회고록

10-11 ~ 10-13 동안

flask 프레임워크를 활용하여 웹 미니 프로젝트를 진행했다.

배달주문앱의 기본적인 기능을 구현한 미니 웹 프로젝트이다.

훌륭한 팀원분들과 짱 멋진 팀장님 (4명) 과 작업해서 3일간 배운게 혼자 공부한 10일 분량보다 많은듯

 

http://honge7694.pythonanywhere.com/store/

Hanghae

(내가 다시 aws에 배포하게되면 수정해야겠다.)

 

 

https://github.com/hanghae17-7/hanghae-eats

GitHub - hanghae17-7/hanghae-eats: 항해99 웹 미니 프로젝트 7조

github organization 프로젝트 링크

 

 

와이어프레임

 

내가 개발한 기능

GET, POST 요청을 통해 로그인, 회원가입 기능 구현,

회원가입 시 werkzeug.security 라이브러리를 활용한 비밀번호 암호화

jsonify를 활용한 서버→클라이언트 에러메세지 전달

jwt토큰을 활용한 로그인 기능 구현

JWT 토큰을 이해하며 서버 인증방식에 대해서 찾아봤다.

2023.10.13 - [웹] - [JWT] 웹 서버 인증 방식 총정리 (쿠키, 세션, 토큰, JWT)

[JWT] 웹 서버 인증 방식 총정리 (쿠키, 세션, 토큰, JWT)

 

배운 것

html 상속 활용시 CSS 적용방법

깃허브 branch 구조 및 Feature별 branch 활용, merge 방법 등

 

2023.10.13 - [IDE && Tools/Git] - [Github] 첫 깃허브 협업 및 브랜치 머지 회고

 

 

느낀 점

jwt 토큰 기능을 구현하면서 라이브러리에 이미 로직이 존재하는데, 잘 찾아보지않고 주먹구구식으로 구현해서, 나름 좋은 경험이였지만 어떤 기능이 필요할 때, 라이브러리를 잘 가져다 사용하는 것도 실력이니까 라이브러리를 잘 찾는 능력을 키워야겠다.

 

아쉬운점

flash로 임시 서버 세션 메세지를 활용했었는데, 다른 기능들이 변경되면서 작동하지 않아서 폐기했다.

내 주문내역과 내 정보를 확인할 수 있는 내 정보 페이지 도 개발하려고했는데, 시간 부족 문제로 FE단의 개발을 하지 못해서 json 데이터가 브라우저로 넘어오는것 까지만 확인했다. 완성하지못해서 아쉬움

jwt 토큰 구현간에 시간이 부족하여 refresh토큰은 구현하지 못한점이 아쉽다.

 

 

---

트러블 슈팅 기록

flask서버에서 css, js 파일 연결하는 방법

flask서버를 사용한 경우 css파일과 js파일을 static폴더에 넣은 뒤 html파일에서 아래의 코드를 통해 불러오면 된다.

<!-- CSS -->
<link href="{{ url_for('static', filename='style.css') }}" rel="stylesheet">
<!-- JS -->
<script src="{{ url_for('static', filename='script.js') }}" > </script>
<!-- 만약 static폴더 내부의 js폴더의 script.js 파일이라면? -->
<script src="{{ url_for('static', filename='js/script.js') }}" > </script>

 

 

fetch 사용 중 주의할 점 headers Content-Type 과 body 타입 일치

fetch('<https://httpbin.org/post>', {
    method: 'POST',
    cache: 'no-cache',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        aaa: 'a1',
        bbb: 'b1'
    })

위와 같은 코드로 HTTP요청을 보내고자한다면, header에 내 body에 담긴 데이터들이 어떤 데이터인지 미리 알려주는 ‘Content-Type’ 이라는 키가 존재한다, 이 값에 올바르게 내 body에 담길 데이터의 타입을 전달해줘야하는데,

위의 예제는 json타입을 body에 담고 json 타입을 주겠다고 header에 포함하고있으니 올바른 사용이다.

만약 form 타입으로 데이터를 전달하고싶다면,

Content-Type을 application/x-www-form-urlencoded로 지정해야 한다고 구글링해서 찾았는데,

나의 경우는 웬 걸 Content-Type을 지정해주지 않으니까 오히려 잘 전달되었다.

 

 

fetch 함수의 비동기 실행 및 응답 객체(Promise) 간략 이해

[올바르지 않은 예시]

아래처럼 fetch함수를 사용하려고 하면, 비동기로 작업 중인 응답 Promise객체를 json으로 변환하라고 하는 이상한 명령을 내린 꼴이 된다.

fetch(요청 보내는 로직)
.then((response)=>{
	console.log(response.json());
}

참고로 위의 결과는 비동기 응답 객체인 Promise 객체이다.

응답(response)가 왔다면, 그것을 json으로 바꿔봐, 바꾸는데까지 문제가 없다면 json으로 변경된 서버의 응답에서 필요한 부분만 사용할게

fetch(요청 보내는 로직)
.then((response) => response.json())
    .then((data) =>

fetch 함수에 체인으로 실행하는 then 메서드가 비동기처리의 핵심인듯? 너무 flask denpendent한거같기도해서 적당히 이해하고 넘어가서 틀린 정보가 있을 수도 있다.

 

 

SQL Alchemy 사용중 테이블 수정사항 발생시

SQL Alchemy 테이블 수정시 database.db 삭제 하고 다시 서버를 열어야 반영된다

auto migrate 되는줄 알았더니 왜이런다.. 별로다.

 

 

 

vscode로 python flask 프로젝트 실행중 정상 작동하는데 print함수로 콘솔에 출력되지 않는 문제

 

2023.10.13 - [Framework && Library/Flask] - [Flask][트러블슈팅] vscode 로 python flask 프로젝트 실행중 print 함수가 콘솔에 출력되지 않는 문제