코드노예

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

이번 포스팅부터는 윈도우 환경에서 실행되며, 포트는 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/

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

먼저 Brew 를 설치합니다.

https://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> 에 해당하는 엘리먼트를 리턴해 줍니다.

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

React – 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 엘리먼트가 있는 것을 확인할 수 있습니다. 

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 프레임워크는 웹 기술(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 앱을 빌드해 보겠습니다.

SAP UI5 APP 개발 환경은 Cloud 버전을 사용하거나 Personal Edition을 다운로드 받아서 설치하면 됩니다.

Cloud 버전은 약간의 비용이 발생하지만 SAP 에서 항상 최신 버전의 개발 환경을 제공해 준다는 장점이 있습니다.

또 하나의 단점으로는 중간에 네트워크 연결이 끊어지면 작업하던 내용이 저장되지 않는 이슈가 있었습니다. 

(2018년에 마지막으로 써봐서 아직도 그런지는 모르겠습니다..)

Personal Edition은 로컬 컴퓨터에서 개발이 가능하지만, 업데이트가 느리고 (2020년 3월 기준으로 아직도 2018년 12월에 배포한 버전 사용 중), 플러그인 들을 사용할 수 없습니다.

여기에서는 Personal Edition 을 이용한 개발환경에 대해서 설명해 보겠습니다.

WebIDE Personal Edition 을 사용하기 위해서는 Java가 설치되어 있어야 합니다. 저는 로컬에 Oracle JDK 8 이 설치되어 있습니다.

Personal Edition 은 아래 URL에서 다운로드 받을 수 있습니다.

https://tools.hana.ondemand.com/#sapui5

OS에 맞는 Download Link 를 클릭하여 다운로드를 받으면 됩니다. Trial 버전과 Production 버전에는 큰 차이는 없었던 것으로 알고 있는데, deploy 할 시스템이 있다면 Production 버전을 선택합니다.

설치는 다운로드 받은 파일의 압축을 푸는 것으로 끝입니다.

윈도우 기준 C:\WebIDE 폴더에 압축을 풀면 되는데, 파일 길이나 이름 때문에 압축 해제시 에러가 발생할 수 있으므로, 해당 기능을 지원해주는 압축 프로그램을 사용해서 풀어 줍니다. (7z 혹은 반디집 추천)

압축해제 후에 아래 경로에서 orion 을 실행합니다.

C:\WebIDE\sap-webide-personal-edition-1.53.9-prod-win32.win32.x86_64\eclipse

orion 으로 WebIDE 로컬 서버를 실행하고 나면, Web Browser 를 열어서 다음과 같이 입력합니다.

http://localhost:8080/webide/index.html

그러면, 아래와 같은 페이지로 redirect 됩니다.

처음 실행시에는 계정이 없을 테니, Create a new accout 를 눌러 새 계정으로 만들어서 사용합니다.

email 은 입력하지 않아도 됩니다.

Sign up 후에 아래와 비슷한 로그인 화면으로 갈 수 있습니다.

혹시나 로그인 후에 404 에러가 나거나 하면, JDK 버전을 의심해 보세요.

이상으로 WebIDE 개발환경 설정을 마칩니다.