Application/Python-Django

대신보다 프로젝트 작업내용 (Django, PWA, TailwindCSS, FCM)

winney916 2022. 12. 14. 14:20
728x90

기본 구조

- Django

   : 장고 기반으로 작업했다.

- Django - PWA(Progressive Web App)

   : 시간 절약을 위해서 모바일 친화적 웹을 모바일로 다운받아 사용할 수 있는 PWA 구조를 채택했다.

- TailwindCSS

   : 스타일링 라이브러리이다.

- FCM (Firebase Cloud Message)

   : PWA는 자체적으로 알림기능을 제공하지 않는다. 이 때문에 Firebase에서 제공하는 토큰을 활용한다.

 

위 과정을 진행하면서 깨달은 점들을.. 적어보자.

TailwindCSS 

- CSS가 반영되지 않을 때 (CSS가 작동하지 않을 때)

  : 브라우저(크롬 등)의 캐쉬를 날려라.. 몇번이고 해봤는데 자꾸 까먹고 답답해하는 멍청한..

 

- gulp 에러

  우선 gulp란? 프론트엔드 웹 개발 스트리밍 빌드 시스템이다. 쉽게말하면 웹 프론트를 개발하는데서 발생하는 번거로운 일들을 자동으로 처리해주는 역할을 한다. 해당 프로젝트에서 gulp를 사용하는 이유 중 하나는 tailwindcss가 postCSS를 사용하는 라이브러리이기 때문이다. 

    - postCSS : JS 플러그인을 이용하여 CSS를 변환하는 툴. 언어가 아니라 신기술 css를 자동으로호환 가능하도록 만들어주는 역할.

 즉, postCSS를 사용하면 CSS를 다룰 때 필요한 수많은 플러그인들을 손쉽게 적용할 수 있다. 하지만 이를 css로 변환해주기 위해 Gulp나 node.js를 사용해야한다. 여기서는 gulp를 사용하는 것이다.

 이 전, airbnb 클론코딩 과정에서 장고를 사용하면서 경험해본 일이다. 하지만 이번에는 에러가 발생했다.

gulp파일을 작성하고, gulp라는 스크립트로 css변환 및 소형화 작업을 진행하는데, 에러가 발생했다.

 

-> [18:00:51] Error: Node Sass does not yet support your current environment: OS X Unsupported architecture (arm64) with Unsupported runtime (108)

 

하단을 보면 알겠지만, 결국 arm64... m1 맥의 호환성 문제로 나타났다. 해당 버전(뭔지 기억이 안남)에서 m1맥을 지원하지 않는 것이다. 때문에 노드 전체의 버전을 바꿔줘야한다.

nvm install 14.17.3

노드의 버전을 14대로 맞춰줬더니 잘 작동한다.

이 외에도 의존성 패키지들의 버전도 잘 맞춰줄 필요가 있다. (피곤...)

 

PWA (Progressive Web APP)

pwa에는 여러가지 개념들이 추가로 필요하다. pwa builder, work box, maskable.app 등,,,

 

HTTPs통신 기반일 경우에만 제작이 가능하고, Application Manifestf 라는 json파일을 만들고, Service Worker라는 js파일을 통해서 네트워크 요청을 관리한다. 하지만 나는 이런 작업들을 진행하지 않았다. Django에서 PWA를 위해 제공하는 Django-pwa라이브러리가 있었기 때문이다.

 

https://github.com/silviolleite/django-pwa

 

GitHub - silviolleite/django-pwa: Looks like an app, feels like an app, but IS NOT an app.

Looks like an app, feels like an app, but IS NOT an app. - GitHub - silviolleite/django-pwa: Looks like an app, feels like an app, but IS NOT an app.

github.com

 

깃허브를 참고했다. 

ServiceWorker.js 와 Manifest.json 부분을 잘 읽어보면 알 수 있지만 따로 작성하지 않아도 디폴드된 파일로 장고가 진행해준다. 하지만 custom을 원할 경우 작성해주면 된다.

 

라이브러리 적용 순서는 다음과 같다.

1. 일단 깔아라

 - pip install django-pwa

 - 하지만 오류가 날게 뻔하다. 장고 버전문제인데,, 최신 버전의 장고를 지원하지 않는다.

 - 장고 버전을 다운그레이드 해줘야한다.

   - pip uninstall django

   - pip install django==3.2

 

2. 그리고 세개의 파일을 수정하면 된다.

  - urls.py

    - 루트 파일이어야 한다. (최상위 위치의 urls.py)

    - urlpatterns 리스트에 다음을 추가한다.

        path('', include('pwa.urls'))

from django.urls import url, include

urlpatterns = [
    ...
    url('', include('pwa.urls')),  # You MUST use an empty string as the URL prefix
    ...
]

  - settings.py

    - INSTALLED_APPS 리스트에 다음을 추가하자. 'pwa'

INSTALLED_APPS = [
    ...
    'pwa',
    ...
]

    - 그 뒤 pwa를 위한 (모바일 환경을 위한) 추가적인 정보들을 작성하면 된다. 

    - 원하는대로 커스텀 하자

Settings.py에 추가하기

PWA_APP_NAME = 'My App'
PWA_APP_DESCRIPTION = "My app description"
PWA_APP_THEME_COLOR = '#0A0302'
PWA_APP_BACKGROUND_COLOR = '#ffffff'
PWA_APP_DISPLAY = 'standalone'
PWA_APP_SCOPE = '/'
PWA_APP_ORIENTATION = 'any'
PWA_APP_START_URL = '/'
PWA_APP_STATUS_BAR_COLOR = 'default'
PWA_APP_ICONS = [
    {
        'src': '/static/images/my_app_icon.png',
        'sizes': '160x160'
    }
]
PWA_APP_ICONS_APPLE = [
    {
        'src': '/static/images/my_apple_icon.png',
        'sizes': '160x160'
    }
]
PWA_APP_SPLASH_SCREEN = [
    {
        'src': '/static/images/icons/splash-640x1136.png',
        'media': '(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)'
    }
]
PWA_APP_DIR = 'ltr'
PWA_APP_LANG = 'en-US'

 

+) 아니 티스토리... 리스트로 작성하면 자동으로 Identation이 되길래 쓰고있는데,, 코드블럭은 또 Identation이 안되네... 아 ..... 다시 손으로 Identation 시작..

 

    - 물론 static에 저장된 파일들을 사용하기 위해서, 경로를 잡아줄 필요도 있다.

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]

 

  - 마지막으로 수정할 파일은 Templates 내부의 HTML 파일인데, base.html 파일을 기반으로 상속해서 사용하고 있길 바란다. base.html 파일의 상단에는 {% load pwa %}, head 태그 내부에는 {% progessive_web_app_meta %} 를 추가하면 된다.

{% load pwa %}

<head>
    ...
    {% progressive_web_app_meta %}
    ...
</head>

깃헙 readme를 보면 serviceworker를 만들고 등록하는 과정이 나오는데, 커스텀이 필요할 때에만 진행하면 된다.

 

마지막으로 위 과정이 잘 진행되었는지를 보려면, (크롬 기준) 개발자도구에서 application을 봐주면 된다. Manifest와 Service Workers가 존재하면, 잘 진행됐다는 뜻이다.

그럼 로컬 환경에서 테스트는 어떻게 할까?? 모바일 테스트를 해야하는데... 배포를 해야되는..?

-> 배포할 필요는 없다. 그냥 노트북에서 runserver를 하고, 그 노트북으로 ios simulator로 접근해 테스트 했다. (android emulator도 되지않을까? 안해봐서 잘 모르겠다.)

 

 

이렇게 웹 브라우저로 접근하고, 하단의 설정창? 등을 누르고

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

홈 화면에 추가를 해주면 된다.!

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

FCM 적용하기

FCM(Firebase Cloud Token)은 안드로이드, IOS, 웹 용 메시지 및 알림을 위한 크로스 플랫폼 솔루션이다. 즉 OS에 구애받지않는 push 알림 기능을 구현할 수 있는 API이다.

이 또한 FCM-django라는 라이브러리가 존재하는 듯 하다.

https://fcm-django.readthedocs.io/en/latest/

 

fcm-django — fcm-django latest documentation

Django app for Firebase Cloud Messaging. Used as an unified platform for sending push notifications to mobile devices & browsers (android / ios / chrome / firefox / …). Supports Firebase Cloud Messaging HTTP v1 API. If you’re looking for the legacy API

fcm-django.readthedocs.io

하지만 어떤 이유에서인지 작동하지 않는다는 팀원의 의견으로 인해.. (직접 해보진 않았다.) FCM API를 직접 적용했다. 

아래 깃헙 README를 참고하여 구현했다.

https://github.com/seyyedaliayati/django-fcm-sample-project

 

GitHub - seyyedaliayati/django-fcm-sample-project: The aim of this repository is to provide a step-by-step guide and a basic pro

The aim of this repository is to provide a step-by-step guide and a basic project sample to implement FCM (Firebase Cloud Messaging) feature into a django-based project. - GitHub - seyyedaliayati/d...

github.com

 

저작자표시

'Application > Python-Django' 카테고리의 다른 글

파이썬 가상환경 venv - 자꾸 까먹는 금붕어같은 나를 위하여  (0) 2022.02.28
Django 에어비앤비 클론 4부 (21.12.06 ~ )  (0) 2021.12.06
Django 에어비앤비 클론 3부 (21.04.05 ~ 12.06)  (0) 2021.04.05
Django 에어비앤비 클론 2부 (21.03.16 ~ 04.05)  (0) 2021.03.22
Django 에어비앤비 클론 1부 (21.02.01 ~ 25)  (0) 2021.03.22

'Application/Python-Django'의 다른글

  • 현재글대신보다 프로젝트 작업내용 (Django, PWA, TailwindCSS, FCM)

관련글

티스토리툴바