Notice
Recent Posts
Recent Comments
Link
«   2024/04   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
Tags more
Archives
Today
Total
관리 메뉴

HAMA 블로그

Flask 와 AngularJS 1.x 웹개발 세팅하기 (번역) 본문

Flask

Flask 와 AngularJS 1.x 웹개발 세팅하기 (번역)

[하마] 이승현 (wowlsh93@gmail.com) 2017. 3. 15. 23:12

Angular 2,4 의 경우 아래 링크를 참고하세요.
https://github.com/ansrivas/angular2-flask



Flask 와 AngularJS 1.x 웹개발 세팅하기 


[번역] https://devcereal.com/setting-flask-angularjs/


AngularJS는 모든 어플리케이션에 사용될 수 있는 강력하고 확장 가능한 Javascript 라이브러리입니다. Flask와 함께 팀을 구성하면 웹 앱을 제작할 수있는 훌륭한 기반을 확보하게 되는데요. Flask와 AngularJS를 시작하는 것은 처음에는 어려운 프로젝트처럼 보일 수 있습니다만 이 가이드를 읽은 후에는 Flask와 AngularJS를 사용하여 기본적인 웹 앱을 만들 수 있을거라 생각합니다.

이 자습서에서는 Flask가 백엔드 역할을 하고 AngularJS를 프런트 엔드로 사용하여 기본적인 풀스택 응용 프로그램을 설정하는 과정을 안내합니다.

Download Project Source

Before We Start

웹 애플리케이션을 만들기 시작하기 전에 서버에 Flask를  installed Flask 했는지 확인해야합니다. 아직 그렇게 하지 않았다면 지금 먼저하시구요. .또한 이 글은 HTML, 자바 스크립트 및 파이썬에 대한 기본적인 지식이 있다고 가정합니다. 이제는 설정이 필요한 모든 것이 준비되었으므로 애플리케이션을 구축 할 수 있습니다. 렛츠고~!

Step 1: Project Structure

Flask와 Angular가 어떻게 통합되어 함께 작동하는지에 대한 개요를 얻기 위해 먼저 프로젝트 구조를 살펴 보겠습니다. 다음은 기본 예제 앱이 완성 될 때의 디렉토리 모습입니다.

example_project/
    app.py - Our main app
    static/ - Static files
        css/
            style.css
        img/
            angularjs.png
        js/
            app.js - Main angular file
        partials/
            index.html - Homepage partial/template
            about.html - About partial/template
    templates/
        index.html - Basic index template

이제 새 프로젝트를 만들고 위의 모든 파일과 폴더를 만들어 봅시다.

App.py

app.py 모듈은 Flask 백엔드의 두뇌가 될 것입니다. 여기서는 기본 Flask 응용 프로그램과 응용 프로그램 색인 또는 홈페이지의 URL 경로를 정의합니다. Angular에서 모든 URL 라우팅을 수행 할 예정이므로 홈페이지에 정적 템플릿만 제공하면됩니다. 앱 내의 모든 실제 페이지는 부분적으로 유지되며 Angular는 페이지 URL을 기반으로 표시됩니다.

Static Directory

CSS, Javascript, 이미지 및 Partials와 같이 제공해야하는 모든 정적 파일은 정적 폴더 안에 보관해야합니다.
이 파일들은 모두 / static /에 있습니다.

Partials

Partials는 각 페이지의 모든 데이터를 보관할 곳입니다. 그것에 대한 좋은 방법은 템플릿 입니다. Angular는 URL 경로를 기반으로 Partials 페이지를 로드하므로 모든 페이지가 단일 페이지에서 게재 될 수 있습니다.

Template Directory

템플리트 디렉토리는 모든 정적 템플리트를 보유합니다. 우리의 경우에는 홈페이지에 정적 템플릿만 필요합니다. 이렇게 하면 Angular를 로드하고 Partials 를  표시합니다.

Step 2: Setting up Flask

이제 프로젝트의 기본 구조가 완성되었으므로 Flask를 백엔드로 설정하는 작업을 시작할 수 있습니다. 대부분의 URL 라우팅과 데이터를 Angular로 표시하므로 모든 설정을 수행하는 데 많은 코드가 필요하지 않습니다.

app.py 파일을 열고 다음을 붙여 넣습니다.

from flask import Flask, send_file

app = Flask(__name__)

@app.route("/")
def index():
    return send_file("templates/index.html")
	
if __name__ == "__main__":
    app.run(host='0.0.0.0')

보시다시피, 매우 기본적인 basic Flask application.입니다. 그러나 여기엔 중요한 몇 줄의 코드가 있으며 더 자세히 설명 해 보자면

@app.route("/")
def index():
    return send_file("templates/index.html")

Flask에서 URL 라우팅을 정의합니다. 사용자가 홈페이지 ( "/")를 방문하면 index.html 템플릿이 반환됩니다.

if __name__ == "__main__":
    app.run(host='0.0.0.0')

언급 할 만한 또 다른 점은 이 예에서 호스트를 0.0.0.0으로 변경했다는 것입니다. 이것은 기본적으로 Flask가 로컬 호스트 또는 127.0.0.1에서 서버를 자동으로 실행하기 때문에 다른 컴퓨터에서 응용 프로그램에 액세스하려는 경우 불가능 합니다. 이 문제를 해결하기 위해 호스트를 웹 서버에 대한 모든 수신 연결을 허용하는 0.0.0.0으로 설정하였지요. 

Step 3: Adding an Index Template

이제 Flask 백엔드가 완료되었으며 방문을 시도 할 경우 정적 색인 템플릿이 제공됩니다.그러나 우리가 정적 템플릿을 가지고 있지 않기 때문에 별로 유용하지 않습니다. 그래서 우리는 하나 만들어야합니다. 템플릿 디렉토리로 이동하여 index.html을 열거 나 만들고 나서 다음을 붙여 넣습니다.

<!doctype html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
		<script src="http://code.angularjs.org/1.5.3/angular-route.min.js"></script>
		<script src="/static/js/app.js?x49983"></script>
		<link rel="stylesheet" href="/static/css/style.css?x49983" />
    </head>
    <body ng-app="myApp">
				
				<img src="static/img/angularjs.png" />
				
				<hr/>
			 
			 <div ng-view></div>
    </body>
</html>

이것은 기본 템플릿이 될 것입니다. 우리에게 필요한 것은 Angular를 초기화하고 페이지를 로드 할 수있게 하는 것입니다. 이제 우리는 페이지를 로드 할 수 있습니다. 이 페이지는partials으로 저장되고 로드됩니다. 전체 앱이 이 단일 페이지에서 실행된다는 점에 유의할 필요가 있습니다. 따라서 필요한 모든 CSS 또는 JS 파일을 여기서 호출해야합니다.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="http://code.angularjs.org/1.5.3/angular-route.min.js"></script>

AngularJS와 Angular-Route를 호출하는 작업을 통해 프론트 엔드는 막강해 질 것 입니다.

<script src="/static/js/app.js?x49983"></script>

커스텀 스크립트를 로드하십시오.이 스크립트는 Angular 프런트 엔드의 두뇌가 될 것입니다. URL에 / static / 접두어를 붙이십시오. Flask는 정적 디렉토리 만 공개적으로 제공합니다.

<body ng-app="myApp">

ng-app를 앵귤러 앱의 이름으로 선언하는 것이 중요합니다. 나중에 app.js 파일에서 이것을 선언해야하므로 오타를 주의 깊게 관찰하십시오!

<div ng-view></div>

ng-view  태그가 div 를 정의하였습니다. Angular 는 partials 를 로드 하기 위해 그것을 이용합니다. 이것은 후에 app.js 파일에 정의 할  URL 라우팅에 기반하여 바꿀 것입니다. 

Step 4: Setting up Angular

Flask 백엔드 및 기본 템플릿이 모두 설정되었으므로 이제 Angular 코드 작업을 시작 할 시간입니다. 이것은 URL 라우팅을 처리하고 URL을 기반으로 앱 내에 올바른 페이지를 표시합니다. App.js 파일을 열고 다음을 붙여 넣습니다.

'use strict';   // See note about 'use strict'; below

var myApp = angular.module('myApp', [
 'ngRoute',
]);

myApp.config(['$routeProvider',
     function($routeProvider) {
         $routeProvider.
             when('/', {
                 templateUrl: '/static/partials/index.html',
             }).
             when('/about', {
                 templateUrl: '../static/partials/about.html',
             }).
             otherwise({
                 redirectTo: '/'
             });
    }]);

파일의 맨 위에 'use strict'를 추가 한 이유에 대해 배우고 싶다면 StackOverflow에 대한 유용한 답변이 great answer 있습니다.

var myApp = angular.module('myApp', [
 'ngRoute',
]);

angular 앱 프로그램 이름을 angular module.로 정의하는 것입니다. 여기에서 사용하는 앱 이름이 이전에 생성 한 index.html 템플릿에서 정의한 앱 이름과 동일한 지 확인하십시오.

myApp.config(['$routeProvider',
     function($routeProvider) {
         $routeProvider.
             when('/', {
                 templateUrl: '/static/partials/index.html',
             }).
             when('/about', {
                 templateUrl: '../static/partials/about.html',
             }).
             otherwise({
                 redirectTo: '/'
             });
    }]);

그런 다음 애플리케이션 내에서 URL 경로를 선언합니다. Angular가 이를 처리하여 사용자가 about 페이지 (/ about)를 방문하면 about.html 부분을 반환합니다. 마지막으로 홈페이지로 리다이렉션 한다고 가정합니다. 이렇게 하면 깨진 링크가 있거나 방문객이 잘못된 URL을 사용하는 경우 404 또는 깨진 앱을 반환하는 대신 앱의 홈페이지로 리다이렉션됩니다.

Step 5: Creating Partials

Flask 백엔드를 설정 했으므로 인덱스 템플리트를 만들었으며 Angular를 설정했습니다. 이제는 partial 부분에 집중해야 할 때입니다. 예제 웹 앱은 단일 페이지에서 실행되기 때문에 Angular 프런트 엔드는 방문자가 요청하는 URL을 처리 한 다음 해당 페이지의 부분 URL을 반환합니다. partial 템플릿은 인덱스 템플릿에서 정의한 ng-view div 안에 표시됩니다. partial 은 원하는 만큼 간단하거나 복잡해 질 수 있습니다. 정적인 HTML 일 수도 있고 Angular를 사용하여 실시간으로 내용을 표시 할 수도 있습니다.

/ static / partials 디렉토리의 index.html 파일을 열어 다음과 같이 붙여 넣습니다.

<h1>Home Page</h1>

<p>You should head over to the <a href="/#/about">about page</a>.</p>

<h2>Here's an Angular Demo:</h2>

<div>
    <input type="text" ng-model="yourName" placeholder="Enter a name here">
    <hr>
    <h1>Hello {{ yourName }}</h1>
</div>

이 예제에서는 기본 앵귤러 데모를 포함시켜 앵귤러 구성 요소가  partials 내에서 표시되는 방법을 보여줍니다. 또한 멋지고 단순한 페이지를 추가 할 것입니다.

google로 이동하여 about.html 파일에 다음 내용을 붙여 넣으십시오.

<h1>About</h1>

<p>Hmm, not much here.</p>
<p>Best get back to the <a href="/#/">home page</a>.</p>

<p>Tip: going to an incorrect URL will take you to the homepage, <a href="/#/404">Try it!</a></p>

이번에는 앱 내의 다른 페이지에 대한 링크가있는 페이지를 간단하게 만들었습니다.

Linking

아마 색인에 포함 된 링크와 페이지에 관한 링크가 조금 이상하다는 것을 느꼈을 것입니다.

<a href="/#/">home page</a>

그렇다면 각 URL 앞에는 / # / 접두어는 무엇일까요? 이것은 단일 페이지 웹 응용 프로그램으로 작성한 모든 링크는 Angular의 URL 라우팅에 의해 선택되도록 해당 웹 페이지 내에 있어야 합니다. 이것은 우리가 실제로 페이지를 떠나는 것이 아니기 때문에 각 URL에 / # / 접두사를 추가하는 이유입니다.

연결하지 않고 연결을 시도하면 404 오류 또는 내부 서버 오류가 발생합니다.

Step 6: Testing Your Web App

이제 거의 끝났습니다. 지금해야 할 일은 응용 프로그램을 테스트하는 것입니다. 명령 프롬프트로 가서 앱을 실행하십시오.

cd /directory-where-you-saved-the-app
python app.py

Flask는 실행 중이며 들어오는 연결을 받아 들일 준비가되었음을 알려줍니다.

flask angularjs test console

브라우저에서 서버 IP를 실행하면 완벽하게 작동하는 단일 페이지 웹 응용 프로그램이 확인 할 수 있습니다.

flask angularjs test page

Flask와 AngularJS를 사용하여 아주 기본적인 웹 앱을 설치하는 데 필요한 것은이 모두입니다.

저작자표시 비영리 동일조건

'Flask' 카테고리의 다른 글

Flask,VueJS,RethinkDB 로 파일 저장 서비스 만들기 - (1) [번역]  (0) 2017.07.27
Flask 웹어플리케이션 구축하기  (0) 2017.06.28
[Flask 문서번역] Setuptools 을 이용한 디플로이  (0) 2017.06.28
Flask, Redis, Retrofit을 이용한 Android 로그인 서비스 구현하기  (0) 2017.03.15
'Flask' Related Articles more
Comments