반응형

이번에는 request 에 대해서 알아보겠습니다.

 

먼저 HTTP 요청 방식은 GET, POST, PUT, PATCH, DELETE 등이 있습니다.

이것은 하나의 convention 으로, 클라이언트에서 요청할 때 method 를 지정하며, 서버쪽에서는 method 에 맞게 response 를 구현해 주면 됩니다.

 

curl 을 이용해서 테스트를 해 보겠습니다. 

 

참고로 -X 옵션을 따로 지정하지 않으면 GET method 로 요청을 합니다. 

 

GET 방식으로 요청

> curl -X GET http://localhost:5000

 

GET 요청에 대한 리턴

<p>Hello World</p>

 

 

POST 방식으로 요청

> curl -X POST http://localhost:5000

 

같은 url 을 요청했는데, POST 방식에서는 다음과 같이 리턴이 왔습니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<title>405 Method Not Allowed</title>
<h1>Method Not Allowed</h1>
<p>The method is not allowed for the requested URL.</p>

 

내용을 살펴보면 해당 method 를 지원하지 않는다고 합니다.

이슈를 해결하기 위해서 이전에 작성한 app.py 코드를 다음과 같이 수정해 봅니다.

from flask import Flask

app = Flask(__name__)

@app.route("/test")
def path_test():
    return '<p>test</p>'

@app.route("/", methods=['GET', 'POST'])
def hello_world():
    return '<p>Hello World</p>'

 

"/" 경로에 method 를 추가해 준 것입니다.

변경 후 재 실행 하면 POST 요청에 대한 리턴도 GET 과 같은 것을 확인 할 수 있습니다.

 

 

이번에는 method 에 따라 다른 결과를 보내주는 코드를 작성해 보겠습니다.

요청을 구분하기 위해서는 request.method 사용합니다. 

 

먼저 request 를 import 해주고, 아래처럼 분기하면 요청 method 에 따라 다른 결과가 리턴 됩니다.

from flask import Flask, request

app = Flask(__name__)

@app.route("/test")
def path_test():
    return '<p>test</p>'

@app.route("/", methods=['GET', 'POST'])
def hello_world():
    if request.method == 'GET':
        return '<p>GET: Hello World</p>'
    elif request.method == 'POST':
        return '<p>POST: Hello World</p>'

 

반응형
반응형

지난번 포스트에서는 기본적인 서비스를 시작해 보았습니다.

이번 포스팅부터는 윈도우 환경에서 실행되며, 포트는 default인 5000번을 사용한다고 가정하고 진행하겠습니다.

 

이번에는 경로를 추가해 보겠습니다.

 

app.py 파일을 열어서 아래와 같이 편집합니다.

from flask import Flask

app = Flask(__name__)

@app.route("/test")
def r_test():
    return '<p>test</p>'
    
@app.route("/")
def hello_world():
    return '<p>Hello World</p>'

 

flask 앱을 다시 실행하고, 웹브라우저에 다음과 같이 입력합니다.

 

http://localhost:5000/test

 

그러면 화면에 test라고 나옵니다.

 

 

flask 앱에 test 라는 경로가 추가되었습니다.

 

따라서 원하는 경로를 추가하려면, @app.route 에 경로를 지정하고, 바로 method 를 구현해 주면됩니다.

여기서 method 이름은 크게 중요하진 않지만, 다른 method 이름과 중복되지 않게 적어 주셔야 합니다.

 

만약 같은 경로를 중복해서 지정하면 어떻게 될까요?

 

아래와 같이, 같은 경로(/test)에 여러 개의 method를 구현하면, 제일 처음에 나오는 r_test()가 실행됩니다.

from flask import Flask

app = Flask(__name__)

@app.route("/test")
def r_test():
    return '<p>test</p>'

@app.route("/test")
def r_test2():
    return '<p>test2</p>'

@app.route("/")
def hello_world():
    return '<p>Hello World</p>'

 

반응형
반응형

Python Flask를 이용해서 REST 서비스를 구현해 보겠습니다.

 

먼저 Python 3.x가 설치되어 있다고 가정하고 진행해 보겠습니다.

 

Python 의 가상환경을 이용할 예정이며, 테스트 환경은 Windows 10 이지만, OS 의 영향이 거의 없을 듯 합니다.

 

Python 의 가상환경은 가상으로 isolated 된 실행 환경을 생성해 주며, 각 환경 별로 다른 모듈을 설치하여 실행할 수 있게 해줍니다.

 

 

프로젝트 실행 위치를 myApp 폴더라고 가정하겠습니다.

 

명령프롬프트를 사용해서 해당 위치로 이동후에 아래 명령어로 가상환경을 생성합니다.

 

> python3 -m venv venv

마지막의 venv는 가상환경이 생성되는 경로이기 때문에 원하시는 폴더로 변경해서 지정할 수 있습니다.

 

 

가상환경을 실행합니다. (윈도우)

> venv\Scripts\activate

맥OS나 리눅스에서는 다음과 같이 실행합니다.

$ source venv/bin/activate

 

참고로 가상환경을 종료할 때는 deactivate 명령어를 입력하면 됩니다.

 

 

실행후에는 명령프롬프트 앞쪽에 가상환경에 대한 정보가 나타납니다.

(venv) >

 

Flask 모듈을 설치합니다.

(venv) > pip3 install flask

 

 

간단한 Flask 앱을 만들어 보겠습니다.

 

먼저 app.py 파일을 생성해서 편집기로 열고 다음과 같이 입력합니다.

from flask import Flask

app = Flask(__name__)

@app.route("/")
def hello_world():
    return '<p>Hello World</p>'

 

그리고 가상환경의 명령프롬프트에서 다음과 같이 입력합니다. (윈도우)

> set FLASK_APP=app
> flask run

 

맥OS나 리눅스라면 다음과 같이 입력합니다.

$ export FLASK_APP=app
$ flask run

 

실행시키면 어떤 포트에서 실행 중인지에 대한 정보가 화면에 나타납니다.  참고로 default 는 5000포트인데, 맥에서는 AirPlay Receiver 서비스가 해당 포트를 사용중이기 때문에, 서비스를 중지시키거나 다른 포트를 사용해야 합니다.

 

Monterey 에서 서비스 중지시키는 방법:

System Preferences > Sharing > AirPlay Receiver 체크 해제

 

포트 지정은 -p 옵션을 사용합니다.

$ flask run -p 4999

 

웹 브라우저를 열어 아래 주소를 입력해서 결과를 확인해 봅니다.

 

http://localhost:5000 

 

브라우저에 Hello World 라고 나오면 성공입니다.

 

 

 

 

 

반응형
반응형

프로젝트 Jupyter는 오픈 소스 소프트웨어, 개방형 표준, 그리고 여러개의 프로그래밍 언어에 걸친 인터랙티브 컴퓨팅을 위한 서비스 개발을 위해서 설립된 비영리 단체입니다. 현재 Jupyter Notebook , Jupyter Hub, Jupyter Lab을 개발, 지원하고 있습니다.

 

https://jupyter.org/

 

Project Jupyter

The Jupyter Notebook is a web-based interactive computing platform. The notebook combines live code, equations, narrative text, visualizations, interactive dashboards and other media.

jupyter.org

 

M1 Mac에서 Jupyter를 실행하기 위해서는 몇 가지 프로그램 설치가 필요합니다.

 

먼저 Brew 를 설치합니다.

https://brew.sh/

 

Homebrew

The Missing Package Manager for macOS (or Linux).

brew.sh

 

 설치는 Terminal 에서 아래 명령어를 입력하면 됩니다.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

 

설치 이후에는, 다음의 명령어로 업데이트를 해줍니다.

brew update && brew doctor

 

그리고 python 버전을 관리해주는 pyenv를 설치합니다.

brew install pyenv

 

pyenv를 이용해서 python 3.9.x 를 설치합니다. (2021.11월 기준 3.9.7이 pyenv에서 지원하는 최신 버전이네요..) 아래 명령을 이용하면 pyenv에서 지원하는 3.9.x 중에서 가장 최신 버전을 설치 할 수 있습니다.

pyenv install --list | grep 3.9 | grep -v miniconda | tail -1 | xargs pyenv install

 

아니면 아래 명령어로 원하는 버전을 지정해서 설치하면 됩니다.

pyenv install 3.9.7

 

설치가 끝나면 다음 명령으로 환경변수에 pyenv path를 초기화 해주는 명령어를 추가해 줍니다.

echo 'eval "$(pyenv init --path)"' >> ~/.zprofile

 

pyenv 에서 사용할 python 버전을 설정합니다. (여기서는 3.9.7을 선택)

pyenv global 3.9.7

 

다음은 pip3를 이용해서 jupyter를 설치합니다.

pip3 install jupyter

 

아래 명령으로 jupyter notebook을 실행합니다.

jupyter notebook

 

기본 세팅은 8888 포트로 서비스 됩니다. 브라우저를 열고 http://localhost:8888 을 입력하면 jupyter notebook 을 사용할 수 있습니다.

 

혹시 포트를 변경하고 싶다면 아래처럼 --port 옵션으로 원하는 포트 번호를 지정합니다.

jupyter-notebook --port=5000

 

jupyter를 실행하면 브라우저가 자동으로 열리는데, 그걸 막으려면 아래와 같이 입력합니다.

jupyter notebook --no-browser

 

다음 명령으로 비밀번호를 설정할 수 있습니다.

jupyter notebook password

 

참고로 터미널이 열려 있는 것이 싫다면 아래 명령어를 이용하면 됩니다.

nohup jupyter notebook --no-browser >/dev/null 2>&1 &

 

나중에 주피터 프로세스를 종료할 때는 아래 명령어를 이용합니다.

ps | grep jupyter | grep -v grep | awk {'print $1'} | xargs kill -9

 

 

참고자료

 

pyenv 설치시 다음과 같은 에러가 나오면, brew를 리셋해 줍니다.

No available formula with the name "pyenv".

 

리셋 방법은 다음 명령어를 입력하면 됩니다.

brew update-reset

 

커널 스톱 이슈

M1 Mac에서 Jupyter 실행시 커널이 멈추는 이슈가 발생하는 경우 아래의 방법으로 조치가 가능합니다.

 

George Hotz의 유튜브 영상에서 해결하는 과정을 볼 수 있습니다.

https://www.youtube.com/watch?v=mwmke957ki4&feature=youtu.be&t=2740 

 

먼저 문제를 일으키는 eventloops.py 스크립트를 검색합니다.

find / -name eventloops.py

 

저는 아래 위치에서 해당 코드를 찾았습니다. 위치는 다를 수 있으며, 비슷하게 나오면 아래 [USER NAME] 부분만 사용자 이름으로 변경하면 될 거 같습니다.

vi /System/Volumes/Data/Users/[USER NAME]/.pyenv/versions/3.9.7/lib/python3.9/site-packages/ipykernel/eventloops.py

 

코드에서 아래 부분을 수정해 줍니다.  return 부분에 조건을 하나 추가합니다.

 

변경 전

def _use_appnope():
    """Should we use appnope for dealing with OS X app nap?

    Checks if we are on OS X 10.9 or greater.
    """
    return sys.platform == 'darwin' and V(platform.mac_ver()[0]) >= V('10.9')

 

변경 후

def _use_appnope():
    """Should we use appnope for dealing with OS X app nap?

    Checks if we are on OS X 10.9 or greater.
    """
    return sys.platform == 'darwin' and V(platform.mac_ver()[0]) >= V('10.9') and platform.mac_ver()[2] != 'arm64'

 

 

 

반응형
반응형

이번에는 React Component 와 속성에 대해서 알아보겠습니다.

 

컴포넌트는 UI를 독립적이고, 재사용이 가능한 조직으로 나눌수 있게 해줍니다. 각 컴포넌트는 격리되어 동작합니다. 

 

개념적으로, 컴포넌트는 JavaScript function 와 비슷합니다. 컴포넌트는 입력을 받을 수 있고 (속성), React element 를 반환해 줍니다.

 

 

컴포넌트를 정의하는 방법에는 Javascript function로 작성하거나 Class를 이용해서 작성할 수 있습니다. 클래스형의 경우 React.Component를 상속받아서 작성하며, render 메써드를 반드시 정의해 줘야 합니다.

 

아래는 화면에 Hello 메시지를 표시해주는 컴포넌트의 예시입니다.

 

함수형 예시

function Welcome(props) {
    return <h1> Hello, {props.name}</h1>;
}

 

클래스형 예시

class Welcome extends React.Component {
    render() {
        return <h1> Hello, {this.props.name}</h1>;
    }	
}

 

이전의 코드를 아래와 같이 변경하면 컴포넌트를 이용한 결과를 확인할 수 있습니다.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

function Welcome(props) {
    return <h1> Hello, {props.name} </h1>;
}

const element = <Welcome name="Maria"/>;
ReactDOM.render(element, document.getElementById('root'));

 

 

코드에 대해서 약간의 부연 설명을 하면,

element 생성시,

이전에는 React.createElement 매써드를 사용했었는데, 컴포넌트를 사용할 때는 태그를 이용해서 생성을 하면 됩니다.

속성으로 지정된 name 은 Welcome 이 생성될 때, prop 값에 {name: "Maria"} 형태로 전달이 됩니다.

Welcome 컴포넌트는 받아온 속성을 이용해서 렌더링된 <h1> Hello, Maria </h1> 에 해당하는 엘리먼트를 리턴해 줍니다.

 

참고로 component 이름은 대문자로 시작하는 관습이 있습니다.  예를 들면 컴포넌트 이름을 welcome 으로 하지 말고 Welcome 으로 해야 한다는 것입니다.

 

 

반응형

'프로그래밍 > React' 카테고리의 다른 글

[React] 시작하기  (0) 2021.08.20
반응형

React는 UI 개발에 사용되는 Javascript Library 입니다. 

 

React – A JavaScript library for building user interfaces (reactjs.org)

 

React – A JavaScript library for building user interfaces

A JavaScript library for building user interfaces

reactjs.org

 

React의 특징으로는 선언형 스타일을 사용하며, Javascript를 이용한 컴포넌트 기반의 아키텍처를 사용합니다. 그리고 강력한 추상화 기능을 제공합니다.

 

Javascript Native 기능을 이용하는 문법을 사용하기 때문에, 다른 프레임워크에 비해서 빠르게 습득할 수 있으며, Virtual DOM 방식을 이용해서 UI 속도가 매우 빠릅니다.

 

 

현재 (2021.08.20) React는 17.0.2 버전이 출시되어 있으며, 버전 18이 준비 중 입니다.

 

React 프로젝트로 "원활히" 개발을 진행하기 위해서 먼저 node.js 를 설치합니다.

 

명령 프롬프트를 실행하여 프로젝트 폴더로 이동해서 아래 명령어를 입력합니다.

 

npx create-react-app my-app

 

my-app 이라는 폴더가 생성되고 기본 프로젝트 코드가 생성됩니다.

 

현재 설정된 패키지 버전은 다음과 같습니다.

 

 

yarn 혹은 npm 명령어를 이용해서 프로젝트를 실행합니다.

 

yarn start

 

혹은

 

npm start

 

처음 실행시에는 필요한 라이브러리를 다운로드 받기 때문에 시간이 조금 걸릴 수 있습니다.

 

웹브라우저에서 http://localhost:3000 를 입력하면, 생성된 프로젝트 결과물이 나옵니다. (설정에 따라 포트 번호는 달라질 수 있습니다.)

 

아래와 같은 화면이 나옵니다.

 

Hello World 를 출력해 보기 위해서, src 폴더에 있는 모든 파일들을 삭제하고,

 

index.css, index.js 파일만 새로 생성해 보았습니다.

 

 

아래 파일들 삭제

 

신규 파일 생성

 

index.js 파일을 열어서 아래와 같이 코드를 작성합니다.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

var element = React.createElement('h1', null, "Hello World!")
ReactDOM.render(element, document.getElementById('root'))

 

저장 후 웹브라우저를 리프래시 하면 아래와 같이 나옵니다.

 

 

작성한 코드에 대해서 간단히 설명하자면,

React.createElement 매써드는 html 엘리먼트를 생성해서 돌려주기 때문에,

element 에는 <h1>Hello World!</h1> 에 해당하는 엘리먼트가 지정됩니다.

 

그리고, ReactDOM.render 매써드는 해당 엘리먼트를 렌더링해 줍니다.

코드는 element에 지정된 것을 root 라는 아이디를 가진 엘리먼트를 찾아서 렌더링 해주라는 의미이고,

public 폴더에 있는 index.html 파일을 열어보면, body 에 "root" 라는 아이디를 가진 div 엘리먼트가 있는 것을 확인할 수 있습니다. 

 

 

반응형

'프로그래밍 > React' 카테고리의 다른 글

[React] Component 와 속성  (0) 2021.09.11
반응형

Ionic 을 이용하면 Mobile 앱을 만들 수 있습니다.

 

이 포스트에서는 Android 앱을 생성하는 방법에 대해서 설명해 보겠습니다.

 

 

지난 포스트에서 생성한 myApp을 이용합니다. myApp이 없다면 아래 명령으로 생성합니다.

ionic start myApp sidemenu --type react

 

먼저 명령 프롬프트를 열고 myApp 폴더로 갑니다. 모바일 앱 프로젝트를 설정하기전에 빌드를 한번 합니다.

ionic build

빌드를 한번 해주는 이유는 capacitor에서 모바일 앱 프로젝트 추가시 build 폴더가 없으면, webDir이 www로 잡히기 때문입니다. 설정 파일에서 변경해 주면 되지만 편의를 위해서 build를 먼저 해 주었습니다.

 

그리고 모바일 앱 프로젝트를 시작합니다. 시작을 위해서는 npx 명령어를 사용합니다.

저는 npm을 주로 쓰기 때문에 npm으로 했지만 yarn도 지원합니다.

npx cap init --npm-client=npm

App name 에는 "My App"을 입력하고, App Package ID 에는 com.example.myapp 을 입력합니다.

 

해당 정보는 capacitor.config.json 에서 변경이 가능합니다.

 

이제 Android 플랫폼을 추가하기 위해서 아래 명령을 입력합니다.

npx cap add android

 

Android 빌드 하기전에 아래 명령어를 통해 리소스 및 변경된 플러그인을 싱크(업데이트) 합니다.

npx cap sync android

 

Android 빌드는 android 폴더에서 진행하는데, gradlew 명령어를 이용합니다. 원래 경로로 돌아오기 위해 마지막 cd .. 명령어도 추가하였습니다. gradle을 통해 Android 빌드하기 위해서는 환경변수에 ANDROID_SDK_ROOT 를 설정해야 합니다. Android Studio를 설치하고 SDK ROOT를 환경변수에 미리 추가해 둡니다.

cd android
gradlew assembleDebug
cd ..

 

생성된 Android 빌드는 프로젝트 경로 > android > app > build > outputs > apk > debug 에서 찾을 수 있습니다. (app-debug.apk)

 

 

코드 변경 후에 한번에 빌드를 하기 위해서는 아래와 같이 실행하면 됩니다.

ionic build && npx cap sync android && cd android && gradlew assembleDebug && cd ..

 

Production 빌드를 생성할 때는 다음과 같이 실행하며,

gradlew assemble

빌드는 프로젝트 경로 > android > app > build > outputs > apk > release 에 생성됩니다.

 

 

참고로 아래 명령을 사용하면 ionic build 와 npx cap sync android 실행 후 Android Studio 가 실행됩니다.

ionic capacitor build android

 

Android Studio 만 실행하고자 한다면, 아래 명령을 실행하면 됩니다.

ionic capacitor run android

 

Android Simulator 에 빌드를 배포할 때는, 아래 명령을 이용합니다.

ionic build && npx cap sync android && cd android && gradlew installDebug && cd ..

 

반응형

'프로그래밍 > Ionic' 카테고리의 다른 글

[Ionic] 설치 및 프로젝트 생성하기  (0) 2021.03.13
반응형

Ionic 프레임워크에 대해서 소개하는 글입니다.

 

 

Ionic 프레임워크는 웹 기술(html, css, javascript)을 이용해서 모바일 / 데스크탑 앱을 만들어 주는 오픈소스 UI 툴킷이라고 정의하고 있습니다. 현재 Angular, React, Vue 를 지원하고 있습니다. 부가적으로 Appflow 등을 이용하면 앱 빌드 및 배포도 편리하게 관리할 수 있습니다.

 

Ionic document 사이트

Ionic Framework - Ionic Documentation

 

 

Ionic 으로 앱을 개발하기 위해서는 Node & npm 만 설치되어 있으면 됩니다. 그 외에 개발시 사용할 editor로는 Visual Studio Code를 권장한다고 합니다. 

 

 

Ionic 설치는 터미널에서 진행합니다. Windows의 경우 Window 키를 누르고 cmd 라고 입력하면 명령 프롬프트가 검색되는데, 클릭 (혹은 enter를 입력) 해서 실행합니다. (혹은 Powershell에서 작업하셔도 됩니다.) 

 

 

명령 프롬프트에서 아래와 같이 입력하고 enter를 입력해서 ionic-cli 를 설치합니다. (install 대신 i 라고 입력해도 됩니다.)

> npm install -g @ionic/cli

 

 

Ionic 설치는 global로 진행되기 때문에 어느 경로에서 설치해도 상관 없지만, 프로젝트를 시작할 때는 시작할 경로에 가서 실행합니다.

 

아래 경로에서 프로젝트를 생성한다고 가정하고, 아래 명령어를 입력해서 ionic 프로젝트 폴더로 이동합니다. (입력 전에 탐색기를 이용해서 C:\Projects\ionic 폴더를 만들어 주세요.)

> cd C:\Projects\ionic

 

 

이제 아래 명령어로 ionic 앱을 생성합니다.

> ionic start myApp

 

실행을 하면, 프레임워크를 선택하라고 나옵니다. (Ionic 6.12.3 기준)

 

파란색 커서를 화살표 키로 위 아래로 움직여서 프레임워크를 선택할 수 있습니다. 원래 Angular가 기본이었는데, 요즘 핫한 React를 본격적으로 지원하는 것 같습니다. 본인이 익숙한 프레임워크를 선택하면 되는데, 저는 React를 선택해 보겠습니다.

 

프레임워크 선택 후에는 템플릿을 선택하라고 나옵니다.

 

역시 커서를 움직여서 선택해 주면 됩니다. 자유도가 높은 blank로 시작할 수도 있지만, 생성 후 간단한 화면을 보기 위해서 sidemenu 를 선택해 보겠습니다.

 

템플릿을 선택하고 나면, 프로젝트가 생성되고, 해당 프로젝트에 필요한 모듈들이 설치가 됩니다.

 

마지막에 Ionic 계정을 만들거냐고 물어보는데, 일단 N을 눌러 만들지 않고 넘어 갑니다. 

 

설치가 끝나고 나면, 다음에 해야할 액션들에 대해서 설명을 해줍니다.

cd 명령어로 생성된 프로젝트 폴더로 가서, ionic serve 명령으로 앱을 실행할 수 있다고 나와 있습니다.

 

> cd myApp
> ionic serve --no-open

--no-open 은 실행 후 브라우저가 자동으로 열리는 것을 막는 옵션입니다.

정상적으로 실행되었다면, Development server running 이라고 나오면서 접속 URL을 알려줍니다.

웹 브라우저를 열어서 주소를 입력해 봅니다. 보통 8100 포트가 사용되고 있지 않으면 8100으로 설정되지만, 사용중인 경우에는 다른 포트 번호로 세팅 됩니다.

http://localhost:8100

 

실행해 보면 다음과 비슷한 화면이 나옵니다. (화면크기에 따라서 보여지는 내용이 조금 다를 수 있습니다.)

왼쪽 메뉴들을 눌러보면 오른쪽에 각각에 연결된 페이지가 나타납니다.

 

Visual Studio Code를 이용해서 프로젝트 폴더아래 있는 src 경로의 소스를 편집해서 앱 개발을 할 수 있습니다.

 

다음 포스트에서는 android 앱을 빌드해 보겠습니다.

반응형

'프로그래밍 > Ionic' 카테고리의 다른 글

[Ionic] Android 앱 만들기  (0) 2021.03.19

+ Recent posts