[장고] 실무에서 사용했던 장고 정보 모음 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 %}

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


댓글()

게스트하우스 알바 고르는 노하우

기타|2018. 7. 31. 19:22
반응형

영어를 공부하고 돈도 번다! 얼마나 좋은 일인가? 

24살 처음으로 게스트하우스 아르바이트를 했다. 4개월 동안 영어 실력이 많이 느는 경험을 할 수 있었다.

그 이후로 4번의 게스트하우스 알바를 했다! 그러면 내 영어실력은 과연 그 만큼 늘었을까?



게스트하우스 알바를 고려하는 분들을 위한 팁s!

1. 리셉션을 한다. 

- 게스트하우스에서 일한다고 외국인과 만나고 일할 가능성이 무조건 많은건 아니다. 리셉션이 아닌 청소를 하게되면 외국인과 대화할 기회는 없다고 봐야한다. 차라리 편한일을 하고 그 돈으로 영어 학원을 다니자.


2. 리셉션과 청소를 같이 하는 경우 게스트하우스의 구조와 방의 갯수를 보자

 - 3층 이상의 게스트하우스가 엘리베이터가 없는데 청소를 해야하는 경우엔 몸이 정말 힘들 수 있다는 걸 명심해야한다. 4층인 경우 당신의 무릎이 하루에 수백번 수천번을 올라가는 계단을 버틸수 있을지 고려해보자. 청소하다보면 외국인 고객과 대화를 나눌 시간도 없을 수도 있다!


3. 게스트하우스 청소를 하는 경우 

1) 팀으로 일하는 곳을 들어간다 - 혼자 일하는 것과 팀으로 일하는건 정말 엄청난 체력적인 차이가 난다. 

2) 세탁물은 맡기는 게스트하우스에서 일하자 - 세탁까지 하는 경우 할 일이 배로 늘어난다.



정말 중요한 것은

좋은 게스트하우스에 외국인을 도와주며 영어를 늘릴 수 있는 게스트하우스는 

흔치 않으니(최저시급 주면서 영어도 배우고 돈도 벌자~ 로 꼬득이는 게스트하우스 많음- 해보니 그냥 청소부....) 잘 생각하고 고르시길 바란다!



댓글()

[nuxtjs] vuejs 패키지 설치하기

카테고리 없음|2018. 6. 11. 18:33
반응형


https://www.youtube.com/watch?v=vVVgB5fZJy0 를 보고 vuetify.js를 설치하는 법을 알수 있었다.


vuetify.js 공식홈페이지에서의 가이드를 따라하면 index.js나 main.js에 


import Vue from 'vue'
import Vuetify from 'vuetify'
 
Vue.use(Vuetify)

이렇게 설치하라고 하는데 index.js파일은 .nuxt폴더 안에 있고 자동으로 수정된 내용이 복구가 되는 것 같았다.


모듈을 설치할때는 그냥 vuejs에서 하는 것과 다르게 nuxt.config.js에서 설정을 해야한다.

1. plugins:['~plugins/인덱스js에 추가할 js 파일 ex) vuetify.js'] 추가

2. css: ['~assets/app.styl']

3. plugins 폴더에 vuetify.js에 

import Vue from 'vue'
import Vuetify from 'vuetify'
 
Vue.use(Vuetify)

를 추가


4. npm install --save-dev stylus stylus-loader

5. ~assets/app.styl 파일에 

공식홈페이지에 나온데로 

// main.styl
@import '~vuetify/src/stylus/main'

를 추가한다.

6. 헤더에 폰트 추가nuxt.config.js 파일안 link에 rel: 'stylesheet', href:'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons'}



댓글()

방콕 카오산로드 여행 그리고 팁 (ATM, 숙소, 대중교통, 인터넷)

기타|2018. 6. 10. 12:04
반응형

퍼스 - 멜번 - 쿠알라룸푸르 - 페낭 - 핫야이 - 방콕



1. ATM 수수료 싼곳 찾기

태국에 와서 놀란것 중에 하나가 ATM 수수료이다. 인터넷을 검색하면 여행 정보가 오래되서인지 ATM수수료가 제각각이였다. 내가 현금을 인출했을 땐 220바트였다. 국내에서 EXK카드를 발급해서 가면 수수료가 거의 없을 정도로 저렴한 비용으로 인출을 할 수 있다고 하지만 호주에서 바로 여행을 왔기 때문에 만들지 못했다.


하지만 운이 좋게도 수수료가 150바트인 곳을 찾을 수 있었다.



AEON ATM


220 바트  → 150 바트 (무려 70 바트나 저렴했다. 70바트면 길거리에서 팟타이를 사먹을 수 있으니 ㅠㅠ)

만약 태국에 간다면 EXK 카드를 만들어가고... 그렇지 못했을 경우에는 AEON ATM에서 150 바트에 현금을 인출 할 수 있으니 참고 하면 좋을 것 같다.



2. 숙소

당연한 것이지만 숙소는 미리 예약 하면 저렴한 가격에 좋은 숙소를 얻을 수 있다.  내가 이용한 호텔 예약에 이용한 사이트는 북킹닷컴(www.booking.com)이다. !!!!방을 연장할 경우 비수기라도 예약을 미리미리 안하는 경우엔 쫒겨날 수 있다. 원래 이용했던 호스텔은 카오산로드 길 안쪽에 있는 저렴한 트윈룸이였다. 그런데 연장을 하려니까 왠걸... 이미 예약이 다 차서 더 이상 묶을 수 없다고 하는 것이다. 보통은 그런경우 남은방이나 대안을 말해줄텐데... 그냥 쫒겨나왔다.


그래서 우리가 묶은 곳은 바안방콕호스텔(baanbangkok hostel). 바안방콕 호스텔은 깨끗했다. 가장 좋았던 것은 리셉션이 영어를 잘 하고 친절했다는 것이다.  카오산로드에서 걸어서 3분 정도에 있어서 조용하게 아침에 커피를 마시기 좋았다. 저렴한 가격에 머물기 좋은 호스텔 중에 하나인거 같다.

 


바안방콕 호스텔에서 준비중인 카페





3. 대중교통

대중교통 옵션은 3가지다. 

1 택시 2. 그랩 3. 버스


택시는 35 바트가 기본요금이고 그랩은 앱을 다운 받으면 예상비용이 나온다.

그랩 오토바이는 다른 오토바이가 있는 곳에선 부르면 그곳으로 그랩오토바이가 못 온다. ( 그랩오토바이 드라이버랑 다른 오토바이드라이버랑 사이가 안좋은 듯)


하지만!! 엄청 저렴하게 이동할 수 있는 수단은 바로 버스!! 이다.

버스타는 방법 아래와 같다.


1. 구글맵을 켠다.

2. 갈 장소를 정한다.

3. 버스정류장을 찾아 걸어간다.

4. 수금요원에게 지도를 보여준 뒤에 동전을 보여주면 알아서 잘 가져간다. 매우 저렴!

5. 구글맵을 계속보면서 내릴곳 근처에 가까이 가면 내린다.


  

  


※주의 할 것 구글 지도를 100% 믿지는 말 것... 버스 정류장이 구글에 나온 곳과 다를 수 있음 - 이 경우 버스가 지나가면 손을 흔들어서 세우면 보통은 외국인인걸 알아서 그러는지 태워준다.



카오산로드에서 먹거리가 많은 인디마켓까지 6.50 바트!!



4. 인터넷

세븐일레븐에서 심카드와 데이타를 신청해서 사용할 수 있지만 비쌌고 세븐일레븐 직원들이 정말 불친절했다. 내가 쓰고 있는 인터넷은 AIS의 통신사를 쓰고 있는데 현지인들이 가장 좋다고 했다.







댓글()

해외에서 핸드폰 수리

기타|2018. 5. 15. 14:07
반응형


내가 사용하고 있던 v20 핸드폰 액정이 깨져서 제대로 사용하지 못하고 있었다. 핸드폰을 수리하려고 하니 가격이 너무 비쌌지만 큰 마음먹고 $170 달러를 주고 핸드폰 수리점에 가서 수리를 했다.


그런데 이게 웬걸... 전면 카메라가 제대로 작동을 하지 않는 것이다. 핸드폰 액정이 깨진 이후에도 잘 사용하던 전면카메라인데 액정을 교체하고 나니까. 초점이 맞지 않는 문제가 발생한 것이다. 


해외에서 핸드폰 액정이나 전면 카메라가 고장났을때 과연 어떻게 해야할까? 비싼돈 내고 고쳐야 할까?


난 벌써 값비싼 수업료를 내고선 알았지만......

핸드폰 부품을 고치는것은 생각보다 어렵지 않다. 부품별로 조립하는 조립하는 모듈형으로 이루어져 있기 때문이다. (조금만 인터넷에 찾아봤으면.....)


핸드폰이 고장났으면 유튜브에 '(핸드폰 모델이름) teardown '을 쳐보자. 그리고 알리익스프레스나 이베이같은데서 부품을 주문해서 그대로 유튜브에 나온데로 따라하면 된다. 


갤럭시 s8 수리영상




단점은 

1. 배송하는 시간이 오래걸린다. (1주일) 

2. 손재주가 너무 없으면 뭘 부러트릴지도..... (그러면 그 부러진 부품을 또 사야하고 그럼 1주일이 더 걸릴지도)




댓글()

프론트엔드 vuejs를 선택할 것인가?

Computer 관심/이것저것|2018. 5. 9. 14:27
반응형

Jquery 정말 유용한 기술이다. 긴 시간 동안 front-end를 만드는데 사용되왔기 때문에 어떤것이든 검색을 하면 답이 웬만하면 다 나온다. 하지만 답을 찾는 것과 별계로 Jquery를 가지고 프론트엔드를 만들시 나 같은 초보가 만들면 정리가 되지 않은 더러운 코드를 쓰게 되고 유지보수의 난이도를 상승시킨다...



VUE.JS


1년전 즈음 회사를 다닐때 Jquery를 가지고 html을 랜더링을 하는것이 귀찮고 힘들어서 vuejs를 썼다. 회사 프로젝트를 만드는 건데 멋데로 vuejs를 써서 욕을 먹긴 했지만 내가 아닌 다른 사람이 유지보수를 할때도 금방 적응해서 사용하는 것을 보고 참 다행이다 싶었다.

그때도 지금도 가장 많이 쓰는 것은 reactjs나 angularjs다. 하지만 angularjs는 정말로 공부해야 할게 많고 reactjs는 angualarjs보다는 쉽다고 느껴지지만 vue나 react를 사용해서 프론트엔드를 만들때 사용하는 flux패턴은 vuex가 redux 보다 심플하다.

가장 큰 장점은 vuejs의 심플하지만 명확한 다큐먼트인거 같다. 한글화도 잘 되어있고 한글을 보지 않고 예제 코드만 봐도 알기 쉽게 다큐먼트를 만들어 놨다. 어떤 유튜버는 개발의 필요한 모든 것들은 vuejs공식 홈페이지에서 제공하는 다큐먼트만 봐도 알 수 있다고 말했다.

 



vuejs를 어디에 써야 하는가?


1. 기존에 있던 프로그램 정리 

vuejs는 npm으로 모듈을 인스톨 하는 것과 jquery 처럼 cdn방식으로 간단하게 붙여서 사용할 수도 있다. 그렇기 때문에 기존에 jqeury를 가지고 만든 웹사이트를 vuejs로 바꾸어 사용하면 더 편리하게 유지보수를 할 수 있다.


2. 기존에 있던 프로그램의 새로운 페이지

기존에 있는 사이트의 세로운 페이지를 vuejs를 가지고 만들면 jquery를 사용하지 않고도 컴포턴트 단위로 페이지를 만들 수 있다. 


3. 개인 프로젝트

리액트처럼 개발자를 구하는 회사가 아직까지는 많지 않다. 그렇기 때문에 vuejs를 간단한 개인 프로젝트에 사용하면 간편하게 사용할 수 있다.




배우는 방법


자바스크립트에 대한 조금의 지식만 있으면 공식홈페이지의 가이드(https://kr.vuejs.org/v2/guide/index.html)만 봐도 시작할 수 있다. 유튜브에 vuejs라고 치면 많은 튜토리얼이 나온다. 그리고 정말로 따라하기 어렵지 않다.




vuejs를 배울 것인가 아니면 reactjs를 배울 것인가?


프로그래밍은 계속해서 다른 것을 배우게 만든다. 이것을 선택할지 저것을 선택할지 고르지 못하면 고민으로 시간만 보내게 된다. vuejs를 배울지 reactjs를 배울는 자신이 처해 있는 환경에 따라 다를 것 같다. 


1. 자신의 회사에서 JQeury 를 가지고 전통적인 방식으로 개발 하고 있다. -> vuejs를 배우고 적용 기존에 진행하고 있는 프로젝트에 적용을 시켜보면 좋을 것이다.


2. 리액트가 너무 어렵게 느껴진다. -> vuejs는 확실히 발을 들여놓기 쉽다. vuejs와 reactjs는 비슷한 점이 많기 때문에 vuejs를 하다보면 reactjs에 대해 감을 잡을 수도 있다.


3. reactjs를 사용하는 회사에 취업을 준비한다 -> 이 경우는 확실히 리액트를 배워야 한다. 채용시장은 reactjs가 훨씬 유리한듯 하다.


4. php를 한다. -> php프레임웍인 라라벨에서 공식적으로 vuejs를 사용하는걸 권장했으므로 자료가 많다.




개인적으로 vuejs는 정말 잘 만들어진것 같다. 결론은 사용해도 후회 없는 프레임웍일 것이다. 끝


댓글()

윈도우에 rabbitMQ 설치하기 - install rabbitMQ on windows

Computer 관심/이것저것|2018. 5. 5. 22:37
반응형

프로그래밍이라는 것도 어려운 일이지만 어떤거 하나 설치하는 것도 프로그래밍 만큼 쉬운 것은 아니라는 것을 다시 한 번 느낀다. 

윈도우에 rabbitMQ를 설치하는 방법을 찾기 어려웠고 잘 되지 않아 구글을 뒤져 하나하나 찾았다.




RabbitMQ를 실행한 화면

1. 얼랭 사이트에 들어가 얼랭 64bit 을 받는다. https://www.erlang.org/downloads 

2. rabbitMQ 사이트에 들어가서 (https://www.rabbitmq.com/#getstarted) 다운로드 인스톨레이션을 클릭한 뒤 With installer (recommended) 이걸 클릭한다. 실수로 menual 들어가서 그대로 설치하면 삽질 할 수 있으니 With installer라고 적힌걸로 설치한다.


끝...... 인 사람도 있겠지만 나는 그렇지 않았다.

tcp connection succeeded but Erlang distribution failed

이런 에러가 발생 하였다.


뭐 쿠키가 미스매칭이된게 원인이라고 하는데 뭐가 뭔지 잘 모르겠고 일단 고쳐본다.


1. %USERPROFILE% 를 탐색기에 친다. 

2. 그러면 유저 폴더가 나오는데 여기 erlang.cookie가 저장되어 있다. 

3. 여기 있는 elang.cookie를 삭제한다.

4. C:\Windows\System32\config\systemprofile 이 안에 있는 erlang.cookie를 복사해서 유저 폴더에 넣는다.


이러면 저 에러가 발생 하지 않는다. rabbitmqctl status 를 치면 주루룩 잘나온다.


그래도 위 스크린샷에 나온 화면으로 들어갈 수 없으면 rabbitmq-plugins list 를 쳐보자 아마 플러그인이 enable이 되지 않아서일 것이다.

 그러면  rabbitmq-plugins enable rabbitmq_management 쳐본다.


이제 다시한번 rabbitmq-plugins list를 쳐보면 rabbitmq management가 enable이 된것을 볼수 있고 저 로컬호스트 포트로 들어가면 저 화면을 볼 수 있을 것이다


아이디 비번 모두

guest

로 기본 설정 되어 있다.

끝 이제 셀러리도 깔아볼 수 있겠다.

댓글()

크롬 익스텐션에 vuejs 사용하기 (development of chrome extension with vuejs)

Computer 관심|2018. 5. 4. 14:06
반응형

content script를 사용해서 뭘 만들라 할때 html을 순수 자바스크립트로 만드는건 너무 귀찮은 일이다.


이걸 어떻게 해야 할까.....하다가 vuejs와 html 템플릿을 사용하면 어떻까 싶었고!  삽질을 했다.

먼저 매니페스트 파일을 이렇게 수정하였다.


manifest.json

{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"manifest_version": 2,
"content_scripts":[
{
"matches": ["https://www.google.com/*"],
"js": ["vue.js","contentScript.js"]
}
],
"web_accessible_resources": ["template.html"]
}


여길 보면 js에 vue.js 스크립트를 넣어서 Vue객체를 받을 수 있도록 하였다. 또 템플릿을 추가 하기 위해 web_accessible_resources 를 추가한걸 볼 수 있다.

그 템플릿 파일을 보면


template.html


{{ message }}



contentScript.js

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var div = document.createElement('div');
div.setAttribute("id", "app")
div.innerHTML = this.responseText;
document.body.insertBefore(div, document.body.firstChild);
} else {
console.log('files not found');
}
};
xhttp.open("GET", chrome.extension.getURL("/template.html"), true);
xhttp.send();


setTimeout(function(){
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
}, 100);


비동기 요청을 한뒤에 템플릿을 body 안에 추가한다. 그런데 비동기 요청이 시간이 더 오래걸리기 때문에 vue 객체를 생성할때 setTimeout을 주어서 템플릿이 바디에 먼저 들어간뒤 뷰객체가 생성되도록 하였다.  프로미스로 해볼려 했는데 ㅠㅠ 잘 안됬다 (내가 못해서 그런듯)



더 좋은 방법 있으면 알려주시면 감사하겠습니다.



댓글()