nuxtjs에서 vuetify를 쓸때 아이콘이 나오지 않는 문제 해결

Computer 비관심/Vuejs|2019. 9. 29. 10:14
반응형

웹프로그래밍은 다시는 하고 싶지 않았지만, 회사에서 필요한 것을 빨리 만들어 내기 위해 다시 손을 댔다.ㅠ

 

가장 자주 사용했던 vuejs 프래임웍인 nuxtjs에서 vuetify를 기본으로 설정하여 사용하는데 특정한 아이콘이 나오지 않고 대신 텍스트라벨(글씨)만 보여줬다.

 

왼쪽에 있는 아이콘은 잘 나오지만 오른쪽에 있는 search아이콘은 나오지 않고 텍스트를 보여준다.

이유는 vuetify에서 두가지 아이콘을 사용하는데 nuxtjs를 통해 vuetify를 설치하면 한가지 아이콘만 default로 설치 하기 때문이다.

 

디폴트로 설치하는 아이콘은 Material Design Icons 이다. 여기에 포함된 아이콘을 사용하기 위해선 mdi-라는 prefix를 붙여서 사용한다. 

하지만 오른쪽의 search는 Material Design Icons에 속한 아이콘이 아니라 Material Icons에 속한 아이콘이다. 즉, 이것을 정상적으로 나오게 하려면 이것을 불러와야 한다.

 

nuxt에서는 이것을 아래와 같이 바꿔서 nuxt.config.js 파일에 link에 넣어준다.

link: [
      ...
      { href: "https://fonts.googleapis.com/css?family=Material+Icons", rel:"stylesheet"}
    ]

 

'Computer 비관심 > Vuejs' 카테고리의 다른 글

파이어베이스에 nuxtjs 호스팅하기  (0) 2019.11.05

댓글()

Visual studio code에서 indentation 일괄적용

Computer 비관심/PyQt5|2019. 9. 22. 18:54
반응형

개발회사에서 장고로 웹사이트를 개발할 때는 pycharm을 이용해서 개발을 했다. 개인적으로 난 pycharm을 좋아하지 않았다. 프로그램 자체가 무겁다는 느낌이 많이 들었기 때문이다. 그때 아톰에디터도 유행 하고 있었는데 가볍고 좋았는데 이상한 잔버그들이 있었다. 

 

visual studio code를 알게 되고 visual code로 자바스크립트를 코딩을 했는데 배경, 폰트, 속도 전부다 만족스러웠다.

정말 최고의 에디터라고 말할 수 있다.

 

내가 파이썬을 좋아하고 파이썬 개발자가 되었던 이유는 파이썬이 정말 간결했기 때문이다.

하지만 visual studio code를 사용할 때 마다 인덴테이션 문제가 발생하였다.

 

 

문제 해결 방법

Space:4로 바꾸어 준다. pep8 ( 코딩스텐다드 )에서 인덴테이션을 스페이스바 4개로 권장하고 있기 때문에 탭을 클릭 했을때 스페이스바 4개가 적용이 되도독 설정한 것이다. 

 

 

 

그 결과 탭 클릭시 깔끔한 인덴테이션을 볼 수 있다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

하지만 이건 일시적인 방법일 뿐이다. 다시 에디터를 열게되면 탭의 space가 2가 되버린다.

그럼 기본세팅 자체를 바꿔보자.

 

1. shift + ctr + p를 누른다.

2. open user settings를 검색한다.

3. indent를 검색한다.

4.Tab size - the number of spaces a tab is equal to. (한번의 탭이 얼마의 스페이스와 같은지를 설정하는 것이다.)

tab size란의 숫자를 아래 스크린 샷 처럼 4로 바꾸어준다.

 

댓글()

PyQt에 firestore 연결하고 exe 파일로 만들기 (2)

Computer 비관심/PyQt5|2019. 9. 14. 01:11
반응형

파이어베이스와 PYQT의 조화는 잘 사용하지 않는지 자료가 그다지 많지 않았다.

디버깅 하는 스스로 만들어내고 PYQT와 FIREBASE에서 발생하는 버그의 해결책들을 찾는데 시간이 오래걸렸다.

 

 

PyQ에 firestore연결하고 exe 파일 만들기- 파이어스토어 파이썬에 연동하는법(1)

https://infocentre.tistory.com/45 

 

 

1. 파이인스톨러 사용

 

(1) 파이인스톨러(pyinstaller)를 사용한다. 

- 파이인스톨러의 간단한 사용 방법은 이전 글에 적어 두었다. 

https://infocentre.tistory.com/3

 

2. 디버깅 (디버깅을 쉽게 하는 방법을 모르면 개고생합니다.)

 

(1). 파일인스톨러를 사용할때 디버깅을 위해서 처음엔 -w 플레그를 붙이지 않고 실행 파일을 만든다.

-w 플래그를 붙이면 console창이 나오지 않아서 어떤 버그가 발생했는지 알기 힘들다. 이렇게 해야 하는 이유는 잘 동작하던 파이썬 큐티프로그램이 exe파일로 만들면 실행이 안되는 경우가 있기 때문이다.

 

(2)try except 구문을 잘 이용한다. 

try:
	#실행할 코드 넣기~
    
except Exception as e: 
	print(e) #에러를 표시하기 위해서
	input() #멈추게 하기 위해서

 

이 구문은 app.exec_() 이전에 써 넣어야 디버깅 화면이 꺼지지 않는다.

 

3. 이렇게 해서 디버깅을 해보면 The 'google-cloud-firestore' distribution was not found and is required by the application 라는 에러가 나온다.

 

- 파이썬 인스톨러가 구글클라우드 파이어베이스 스토어를 실행 시키지 않는것이다. 그래서 훅을 만들어준다.

\Lib\site-packages\PyInstaller\hooks 에 들어가서 hook-google.cloud.py 파일에 아래 코드를 추가해준다.

 

datas += copy_metadata('google-cloud-firestore')

 

 

4. 그리고 다시 실행해보면 잘 되거나 아니면 이런 버그가 발생한다.

Exception ignored in: 'grpc._cython.cygrpc.ssl_roots_override_callback'
E0913 23:26:43.750000000  9436 src/core/lib/security/security_connector/ssl_utils.cc:448] assertion failed: pem_root_certs != nullptr

 

이번엔 hooks폴더에  hook-grpc.py를 만들고 아래와 같은 코드를 넣는다.

 

from PyInstaller.utils.hooks import collect_data_files

datas = collect_data_files('grpc')

 

작동한다! 

 

참조: https://stackoverflow.com/questions/55848884/google-cloud-firestore-distribution-doesnt-get-added-to-pyinstaller-build

 

5. pyqt5 5.13 버전과 파이인스톨러를 같이 사용할 경우 다른 컴퓨터로 옮겼을때 작동이 안될 수 있다.

에러 - ImportError: unable to find Qt5Core.dll on PATH

- 이 경우 가장 쉬운 해결 방법은 이전 버전으로 다운그레이드 하는 것이다.

pip install pyqt5==5.12.2

 

참조 : https://stackoverflow.com/questions/56949297/how-to-fix-importerror-unable-to-find-qt5core-dll-on-path-after-pyinstaller-b

 

 

 

 

 

 

 

 

댓글()

PyQt에 firestore 연결하고 exe 파일로 만들기 (1)

Computer 비관심/PyQt5|2019. 9. 12. 00:53
반응형

처음 설치하는 것은 아래와 같이 firebase사이트에 들어가면 나와있다.

https://firebase.google.com/docs/firestore/quickstart

 

아래와 같이 pip을 사용해서 firebase-admin을 다운 받는다.

 

 

이제 데이타베이스에 접속하는 코드를 입력한다.

여기서 Certificate() 라는 함수에 json 형식의 퍼미션 정보를 넣어야 한다.

 

이 인증정보는 파이어베이스 콘솔로 들어와 project overview 옆에 있는 기어창을 누르고 project settings를 누른뒤

 

service accounts > python 버튼을 클릭하면 generate new private key 라는 버튼을 발견 할 수 있다.

그걸 클릭하면 Certificate()에 들어갈 정보를 다운 받을 수 있다.

그 뒤 

 

넣고 빼고 하는건 아래처럼 사이트에 나온데로 하면 된다.

 

 

 

다음은 exe file로 만드는 것을 할 것이다.

댓글()

[장고] 실무에서 사용했던 장고 정보 모음 ADMIN위주

Computer 비관심/Django|2018. 8. 15. 14:51
반응형

장고에 대한 정보를 얻기가 쉽지가 않지만 해외 장고 유저가 적은 글을 보면 쉽게 찾을 수 있다. 하지만 장고어드민를 제대로 사용할 수 있는 정보를 찾기는 정말 어렵다고 생각한다. 하지만 장고를 사용하는데 장고어드민을 제대로 활용하지 못 한다면 장고프레임웍의 큰 장점을 버리는 셈이다. 아래 자료들은 5개월간 장고 프로그래머로써 찾았던 어드민, 혹은 장고 관련된 실무에서 발생하는 문제 해결에 관련된 자료를 모은 것을 올린것이다.

(다 지우려 했는데 혹시라도 필요하실 분들이 있을지도 모른다는 생각에 남기게 되었습니다.)


0. 커스텀 유저 만들기

https://www.youtube.com/watch?v=0bAJV0zNWQw


1. AbstractBaseUser 대신 AbstractUser를 서브클래스함

your_app.models.py

 

from django.contrib.auth.models import AbstractUser

 

class User(AbstractUser):

        pass

 

이렇게 하면 User는 디폴트 펑션을 가지게 된다.

 

2. 유저모델 세팅

settings.py

AUTH_USER_MODEL = 'your_app.User'

 

3. 어드민에 유저모델 등록

your_app/admin.py

 

from django.contrib import admin

from django.contrib.auth.admin import UserAdmin

 

from .models import User

 

@admin.register(User)

class UserAdmin(Useradmin):

        pass

 

 

this provides a Custom User model with  all the functionality of the default User model but, with the flexibility of a Custom User model in case you ever need it in the future

 

These 10 lines of code provide immediate benefit even if you don't need User table customization

- cleanly and simply customize the User Meta option, if for example you want to add custom permission to User

 

-Easily customize User methods

 

- Easily intergate third-party package admin functionality into User admin 


1. 장고 어드민 폼 수정 - 장고 어드민에서 모델 폼으로 input을 만들때 속성을 바꾸어서 서버에서 클라이언트로 보내주는 방법을 설명하는 링크

https://stackoverflow.com/questions/910169/resize-fields-in-django-admin 



2. inversion of control (제어의 역전) -장고 프레임워크에 대해서 더 깊게 이해하고 싶으면 프레임워크 - 프레임워크는 제어의 역전과 관련이 있다 - 라는 것이 무엇인지 알아야 한다. 이 유튜브 동영상은 inversion of control 에 대해 심플하게 설명한다.

(간단히 말하면 프레임워크 안에 개발자가 코드를 작성하면 프레임워크의 흐름에 맞게 그 코드를 불러내고 실행한다. 다르게 말하면 대부분의 코드의 흐름은 프레임워크가 움직이고 특정 부분만 개발자가 제어한다.)

https://www.youtube.com/watch?v=vFzP2SaMyA0



3. get_context_data 메서드를 만들어서 데이터를 받는 대신에 템플릿에서 view를 사용해서 view클레스에 있는 변수, 메서드에 접근하기

https://reinout.vanrees.org/weblog/2014/05/19/context.html



4. django-widget-tweaks 장고 폼의 속성들을 템플릿에서 바꿀 수 있도록 도와주는 패키지

https://pypi.org/project/django-widget-tweaks/



5. 클라이언트의 json 파일 장고로 넘길 때 발생하는 문제 해결 방법 

https://stackoverflow.com/questions/10035627/django-reading-array-of-json-objects-from-querydict 

장고 서버에서 받을 경우 itemList[0][id]이런식으로 각각 나온다.

request.POST['itemList']로 받을때 none이 나온다.

 

이 문제를 해결하기 위해서는

ajax로 배열딕셔너리 데이타를 

itemList: JSON.stringify(test),

이런식으로 넘겨야 한다.

lists = json.loads(request.POST['itemList'])

이렇게 해야함



6. 장고 어드민에 커스텀 액션 버튼 만들기 - 관리자페이지에서 관련 페이지 이동 같은 기능 만들때 유용

https://medium.com/@hakibenita/how-to-add-custom-action-buttons-to-django-admin-8d266f5b0d41



7. 장고 1,2,3,4, 숫자로 페이징처리 하기 + 숫자 범위 제한하기

https://jupiny.com/2016/11/22/limit-pagination-page-numbers-range/



8.장고어드민 깊게 파헤치는 유용한 동영상

https://www.youtube.com/watch?v=5ajZMpTcUZU



9. 장고 셀렉트 필드에서 -------로 처음 필드가 나오는거 지우기

https://stackoverflow.com/questions/3935602/how-to-remove-the-unselected-item-in-a-select-and-radio-input-in-django



10. 장고 어드민 템플릿에 데이터 보내기

https://stackoverflow.com/questions/9220042/django-how-to-pass-custom-variables-to-context-to-use-in-custom-admin-template 

 

https://stackoverflow.com/questions/36405426/pass-data-to-master-template 

 

add_view.context_data.update({'to': to, 'gender_type': gender_type, 'booking_id': booking_id}) 

 

이렇게 보내는 방법도 있음



11. many to many 테이블의 IT로 정렬하기

https://stackoverflow.com/questions/10331528/django-manytomany-self-relation-order-by-the-middle-table-id 


오브젝트를 받아서 할때는 테이블명 말고 그 테이블을 칭하는 오브젝트를 적음


obj.image.through._meta.db_table+'.id') 

for i in r.image.all().order_by(r.image.through._meta.db_table+'.id')

for w in obj.image.order_by(obj.image.through._meta.db_table+'.id'): 

 

즉 클래스의 인스턴스(오브젝트들)의 이미지필드를 middle table의 아이디로 정렬 함



12. 장고 어드민 템플릿 구조 - 어드민 페이지를 상속하고 변경할 때 유용한 자료 

https://manikos.github.io/django-admin-template-structure



13. 장고 어드민 객체 계층 구조 -어드민 필드 수정할 때 좋은 자료

https://searchcode.com/codesearch/view/54684984/


adminform

fieldset 

- fileldset.classes 

- name

- description

 

line.fields

filed.filed.name

field.is_readonly

filed.errors

field.is_checkbox

filed.label_tag - 한글로 지정한것 보이게 할 수 있음.

field.contents

field.value


14. 장고에서 row sql query 사용하기

https://gist.github.com/tkrajina/11378945 



15. 모델에 종속되지 않는 어드민/url

https://stackoverflow.com/questions/11288320/new-url-on-django-admin-independent-of-the-apps



16. 장고 어드민 폼과 오브젝트

https://buxty.com/b/2010/04/django-adminform-objects-and-templates/ 



17. 장고의 흐름 (장고 플로우차트) -어쩌면  이것을 익히는 것이 장고의 기본일지도 모른다. 링크는 다른 형태의 플로우차트를 보여주니 참고 하면 좋을듯

http://hitesh.in/2009/django-flow/



18. 장고 포팅관련 링크( 왜 저장 해놨는지 모르겠다..)

https://fbdjango.wordpress.com/2014/01/27/183432721693235_635727396463763/ 




19. 어드민 쿼리셋 필터링 - 자신이 원하는 정보만 어드민에 뿌려주려면 어떻게 해야하는지 나오는 자료

https://stackoverflow.com/questions/12354099/override-default-queryset-in-django-admin 

 

겟 리스트뷰에서 쓰는것 예 

https://stackoverflow.com/questions/36474515/how-to-get-filtered-queryset-in-django-admin 



20. 자주 썼던  jquery post 형식 - 계속해서 복붙해서 썼었음


$.ajax({
type: "POST",
url: "{% url 'web:review_list' profile_id=master_profile.pk %}",
data: {
'type':'write',
'rating':$('#createPersonStar').val(),
'reviewContent':$('#reviewContent').val(),
csrfmiddlewaretoken: '{{ csrf_token }}'
},
success: function(result) {
self.review_list.unshift(result['review_list']);
}
});

return HttpResponse(json.dumps(data), content_type="application/json")

21. 장고 폼셋 튜토리얼

http://whoisnicoleharris.com/2015/01/06/implementing-django-formsets.html 

 

폼에 데이터가 미리 들어가는 방법

job = UserJob.objects.all()[0]

form = UserJobForm(request.POST or None, instance=job)

 

----------------------------

 

UserJobFormset = modelformset_factory(UserJob, form = UserjobForm)

formset = UserJobFormset(request.POST or None)  #새로운 클래스를 이니시에이트 함



22. 장고 form 기본 기능중 하나 url에 적힌 text를 폼셋에서 받을 수 있음

&to={{ original.mobile }}&text=%EA%B3%A0%EA% 



23. 장고 어드민 템플릿에 기본으로 전달되는 모델 객체 받기

템플릿에 {{original}}를 사용하면 모델의 객체를 받을 수 있음


https://stackoverflow.com/questions/4635548/accessing-the-object-in-a-django-admin-template 



24. 장고 orm 쿼리 만들때 유용한 블로그 페이지

https://milooy.wordpress.com/2016/06/23/django-models-2-making-queries/



25. 장고 admin changelist에서 컨텍스트 모델에 속한 오브젝트들 받기

https://stackoverflow.com/questions/16096528/how-can-i-get-the-object-in-django-admin-chnage-list-template 

 

{% for object in cl.result_list %}
{{ object.field명 }}
{% endfor %}

 쿼리셋형태로 오브젝트들을 받을 수 있다.


댓글()

언제 쓸지 모르겠지만...깃 설정과 heroku 디플로이

Computer 비관심/Django|2017. 12. 2. 18:42
반응형

장고걸즈와 헤로쿠 사이트를 참조하면 어렵지 않다.


로컬/프로덕션 설정 (옜날 방식- 지금 장고 걸즈에 나온게 더 쉬운듯) 

세팅을 local environment와 production environment 로 나눈다.

1. 프로젝트에 settings 폴더를 만든 뒤 

그 안에 

__init__.py (모듈을 만들기 위해)

local.py

production.py

넣는다.

 

2. 원래 settings.py 를 old_settings.py로 바꾼뒤 안에 있는 내용을 production.py와 local.py에 넣는다.

3. production.py 파일에 들어가 DEBUG = False 로 BASE_DIR = os.path.dirname(os.path.dir(__file__))

4. settings/__innit__.py에서 

from .production import *

try:

from .local import * #로컬에서는 사용/ 프로덕션에서는 사용안함 gitignore함

except:

pass

 

디플로이

0. 헤로쿠cli 설치

​1. .gitignore 파일 생성, 아래 내용 추가 

venv

*.pyc

staticfiles

.env

config/settings/local.py

 

2. git init 폴더를 깃에 등록 (* 등록을 지우고 싶으면 del/f .git )

3. git add --all 스테이지에 올림

4. git commit -m"커밋메시지" 커밋함

5. heroku login 로그인 되어있을시 생략함

6. heroku create 사이트이름 -> https://사이트이름.herokuapp.com 이런 형식으로 생성됨

7. git push heroku master ※에러시 heroku config:set DISABLE_COLLECTSTATIC=1 을 한 뒤 다시 PUSH 시도 

8. heroku open

9. heroku run bash 나가기 exit;

10. heroku logs



바뀐거 수정할 때

​git add --all 스테이지에 올림 

git commit -m"" 커밋

git push heroku master

 

안될때, 장고걸즈 참조 https://djangogirls.gitbooks.io/django-girls-tutorial-extensions/heroku/

mysite/wsgi.py에 아래 내용 추가

from whitenoise.django import DjangoWhiteNoise
application = DjangoWhiteNoise(application)


로컬테스트

1. pip install gunicorn

2. pip freeze > requriements.txt

3. procfile 파일을 생성한 후 내용으로 web: gunicorn config(프로젝트 이름).wsgi --log-file- 을 넣는다.

4. 윈도우에서 실행해 보기 위해서는 Procfile.windows 파일을 만든 뒤 web:python manage.py runserver 0.0.0.0:5000 (참조 https://devcenter.heroku.com/articles/getting-started-with-python#define-a-procfile)

5. heroku local -f Procfile.windows

 

채널스 사용시 중요한 사항

1. 헤로쿠는 whitenoise를 써야함

2. 장고걸즈에 runtime.txt 버전 확인

3. 레디스를 사용하지 않을것이면 Procfile에 web:python mange.py runserver "0000:$port"로 설정

 

즉 장고걸즈에서 올리는 방법에 프록파일만 web:python mange.py runserver "0.0.0.:$port"로 설정하면 채널즈를 사용할 수 있다.

댓글()

django 가상환경 부터 앱 생성까지 순서

Computer 비관심/Django|2017. 8. 23. 22:03
반응형

1. 가상환경만들기 python -m venv myvenv

2. 가상환경들어가기 myvenv\Scripts\activate

3. 장고설치 pip install django

4. 프로젝트생성 django-admin startproject config .

5. 세팅 setting.py

6. 마이그레이션 python manage.py makemigration

7. 마이그레이트 python manage.py migrate

8. 슈퍼유저 생성 python mange.py createsuperuser

9. 앱생성 python manage.py startapp mainpage


댓글()

통으로 쿼리셋 받기

Computer 비관심/Django|2017. 5. 10. 20:43
반응형

이전에는 하나하나 키벨류로 만들어서 전달했다.


퀴리셋을 통체로 넘겨주고 싶다면 이런 방법을 사용할 수 있다.


JsonResponse(queryset, safe=False)

뷰에서 이렇게 넘긴뒤


템플릿에서 

success한 것을 

$.parseJSON(data)

이렇게 받으면


ascii 문제를 해결하면서 쿼리셋 데이타를 통으로 받을 수 있다.

댓글()