js 공부(ft. sparta)/4주차
4-3. Flask 시작하기 - HTML파일 주기
c_sm
2023. 4. 18. 10:13
이제 html파일과 연동을 시켜보겠다.
먼저 templates 폴더 하나 만들고 그안에 html파일 하나를 만든다.
그리고 html파일에 아래 코드를 붙여넣고 일단 저장한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function hey(){
alert('안녕!')
}
</script>
</head>
<body>
<button onclick="hey()">나는 버튼!</button>
</body>
</html>
이제 app.py에 index.html을 넣어 보겠다.
먼저 app.py에 가서 아래처럼 추가해준다.
이건 flask에 render~~을 쓰겠다는거다.
그리고 button을 썻던 자리에 아래 사진과 같이 작성해주고 저장하면 끝이다.
이제 local창에 가서 새로고침하고 버튼을 누르면 안녕!이라는 팝업창이 뜬다.
이번엔 html파일에 가서 아래 사진과 같이 작성하고 저장한다.
그리고 다시 돌아가서 새로고침해보면 아래 사진과 같이 나온다.
이렇게 실행하는것을 보면 백엔드가 html에 있는것을 가져다 주는것을 볼 수 있다.
Flask라고 하는 파이썬 백엔드 서버가 돌면서 index.html파일을 가져다가 주는거다.
이번엔 프론트엔드에서 데이터를 보내서 백엔드에서 받는것을 해보겠다.
예를 들어 회원가입같이 프론트엔드에서 입력을 받은것을 백엔드에서 잘 받았다고 알려주는것이다.
다음 장에서 이어서 해보겠다.