크롬익스텐션으로 웹사이트에 엘레멘트 추가하기 [크롬익스텐션 개발]

Computer 관심|2018. 5. 4. 10:50
반응형


내가 만든 웹사이트가 아닌 타인이 만든 웹사이트에 내가 만든 기능이나 화면을 넣을 수 있으면 재미있을 것 같았다. 그리고 좀 더 편리하게 인터넷을 사용 할 수 있을 것 같았다. 크롬에서 제공하는 익스텐션 덕분에 그것이 가능하다는 것을 알았다.


위의 스크린 샷은 구글에 크롬익스텐션을 이용해서 '안녕하세요~' 라고 적힌 div 엘레멘트를 추가 한 것이다.



어렵지 않으니 재미로 한번 해보자~ 


1. 폴더를 만든다.


2. 그 폴더에 크롬익스텐션에서 사용할 manifest.json 파일을 만든다.


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


위를 보면 matches 라고 어떤 사이트에 스크립트를 적용할껀지 설정 할 수 있다.

그리고 js엔 적용할 스크립트의 경로를 적는다.


3. contentScript.js를 폴더에 만든다.

 


//Creating Elements
var divElement = document.createElement("div")
var t = document.createTextNode("안녕하세요~");
divElement.appendChild(t);
//Appending to DOM
console.log('hi')
document.body.appendChild(divElement);



4. chrome://extensions/

에 들어가서 upload unpacked 를 눌러서 파일들을 저장한 폴더를 업로드 하면 끝.



댓글()

플라스크 사용해보기

Computer 관심/Flask|2018. 5. 3. 15:11
반응형

장고를 가지고 심심풀이로 API서버를 만들어 보려고 하니까

장고를 놓은지 오래되서 기억이 가물 가물 했다. 또.... 이전에 일했던 기억 때문에 쓰고 싶지 않았다.. ㅠㅠ

확실히 장고가 좋긴하지만 심플한 서버만 사용하고 싶어서 플라스크로 만들어 보면 어떨가 생각이 들었다.

 

 

 

1. 플라스크 시작하기

 

플라스크 홈페이지(http://flask.pocoo.org/)를 들어가면 아래와 같이 정말 간단하게 플라스크 서버를 만든 것을 볼 수 있다.

 

1) main.py 파일 작성

from flask import Flask
app = Flask(__name__)

@app.route("/")
def getHelloMsg():
    return "Hello World!"

 

2) command로 서버 실행하기 

$ pip install Flask
$ FLASK_APP=main.py flask run
 * Running on http://localhost:5000/

윈도우 실행시 FLASK_APP=main.py이 아닌 set FLASK_APP=main.py라고 적어야 한다.

장고서버와 비교했을 때 단 하나의 파이썬 파일 하나로 심플하게 서버를 만들 수 있다.

 

 

서버에 아무런 설정 없이 이대로 브라우저에서 요청을 할 시 브라우저는 아래와 같은 에러가 발생한다.

(브라우저가 아닌 서버를 통해 데이타를 요청하면 줌)

Failed to load http://localhost:5000/: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

 

 

 

2. 크로스오리진 문제 해결하기

 

서버에서 브라우저의 크로스브라우징을 허용을 해줘야한다. 그래야 데이타를 클라이언트에서 리턴 받을 수 있다. 여기서 사용한 모듈은 flask-cors다

 

flask-cors 홈페이지

http://flask-cors.readthedocs.io/en/latest/

 

1) 설치

$ pip install -U flask-cors

 

2) 코드에 적용

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route("/")
def getHelloMessage():
  return "Hello"

이렇게 하면 더 이상 브라우저에서 에러가 발생하지 않는다. 세부적으로 설정하는 것은 홈페이지를 확인하자

 

데이터를 받고 싶으면 아래와 같이 사용한다.

@app.route("/", methods = ['POST']) 
def getHelloMsg():
  # url 요청을 통해 받은 데이터
  search = request.args.get("search")
  page = request.args.get("page")


  # 폼을 통해 입력받은 데이터
  email = request.form.get('email')
  password = request.form.get('password')


  #json 요청을 통해 받은 데이터
  data = request.get_json()
  
  return "hello"

여기까지 하게 되면 클라이언트는 사용자의 데이터를 입력받고 서버의 내용을 출력해주는 기능만 하고 데이터의 가공은 서버에서만 하도록 테스크의 분리가 가능하다. 

 

 

 

3. flask-SQLAlchemy를 사용하여 데이터 저장하기

 

flask-SQLALchemy는 sql문을 작성하는 대신에 ORM으로 디비를 쉽게 관리 할 수 있도록 도와주는 모듈이다.

http://flask-sqlalchemy.pocoo.org/2.3/quickstart/

 

1) 플라스크 알케미 설치하기

pip install flask-sqlalchemy

 

2) SQLAlchemy를 세팅하고 DB의 모델(구조)까지 만들기

 

아래의 코드는 flask-SQLAlchemy와 사용하기 간단한 sqlite db를 사용한 공식 예제이다.

 

from flask import Flask
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:////tmp/test.db'
db = SQLAlchemy(app)


class User(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(80), unique=True, nullable=False)
    email = db.Column(db.String(120), unique=True, nullable=False)

    def __repr__(self):
        return '<User %r>' % self.username

 

3) 만들은 모델을 바탕으로 디비 생성하기

- cmd창에 python이라고 쳐서 파이썬 쉘로 들어간다.

- 아래와 같이 입력한다.

>>> from yourapplication import db 
>>> db.create_all()

 

4) 모델을 바탕으로 객체를 만들기

>>> from yourapplication import User
>>> admin = User(username='admin', email='admin@example.com')
>>> guest = User(username='guest', email='guest@example.com')

 

5) 객체를 디비에 저장하기

>>> db.session.add(admin)
>>> db.session.add(guest)
>>> db.session.commit()

 

6) 데이터에 저장된 값 불러오기

>>> User.query.all()
[<User u'admin'>, <User u'guest'>]
>>> User.query.filter_by(username='admin').first()
<User u'admin'>

그러나!!!!!!

 

 

 

4. flask-migrate를 통해 디비구조를 변경하기

 

 

이때 테이블의 구조를 수정해야 할 때 지금까지 만든 디비를 날리고 다시 만들어야 한다는 단점이 있다.

이렇게 할 필요없이 디비변경을 관리해 주는 것이 migration이라고 하는데 장고처럼시퀄알케미에서는 기본으로 제공을 하지 않았다.

이럴바엔 그냥 sql문을 작성하고 수정도 sql문으로 하는게 더 낫겠다 라고 생각이 들었다.

 

그리고 그냥 시퀄알케미를 지우고 sql문으로 디비를 직접 만들려고 하는 찰나.

flask-migrate라는 모듈이 있는 것을 알게 됬고 이걸 사용함으로써 디비구조변경을 더 간단히 할 수 있게 되었다.

https://flask-migrate.readthedocs.io/en/latest/

 

여기 나온데로 따라하면 간단하게 마이그레이션을 할 수 있다

 

 

 

추가사항!

실행하기전에 set FLASK_DEBUG=True를 커멘드에 입력을 하면 에디터에 코드가 변경될 때마다. 자동으로 리로드가 된다.

댓글()

언제 쓸지 모르겠지만...깃 설정과 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 문제를 해결하면서 쿼리셋 데이타를 통으로 받을 수 있다.

댓글()

django admin tools 설치 후 설정

Computer 비관심/Django|2017. 3. 15. 11:03
반응형

django admin tools 설치 후 설정


TEMPLATES = [

    {

        'BACKEND': 'django.template.backends.django.DjangoTemplates',


        'DIRS': [os.path.join(BASE_DIR, 'templates')],

        # 'APP_DIRS': True,

        'OPTIONS': {

            'context_processors': [

                'django.template.context_processors.debug',

                'django.template.context_processors.request',

                'django.contrib.auth.context_processors.auth',

                'django.contrib.messages.context_processors.messages',

            ],

            'loaders': [

                'admin_tools.template_loaders.Loader',

                'django.template.loaders.app_directories.Loader',

                'django.template.loaders.filesystem.Loader',

            ],


        },

    },

]

댓글()

django 빨리 실행하기

Computer 비관심/Django|2017. 3. 13. 21:24
반응형

C:\Windows\System32\cmd.exe /K "cd C:\Users\sean\Desktop\tripwith && myvenv\scripts\activate && python manage.py runserver"

댓글()

장고에서 폼 에러 찾기

Computer 비관심/Django|2017. 3. 3. 14:57
반응형

장고에서 커스텀하게 폼을 만들때는 자동으로 어떤 필드가 문제가 되는지 알려주지 않는다.

form.is_valid()를 사용해도 벨리드 한지만 알려주지 어떤것에 문제가 있는지 가르쳐 주지 않는데. 

이때는 form.errors.as_data()를 사용하면 어떤 필드에서 문제가 발생했는지 알 수 있다.



def post(self, request, *args, **kwargs):

        print('포스트')

        abc = CreateQNAForm(request.POST)

        print(abc.is_valid())

        print(request.POST)

        return HttpResponseRedirect('/help/qna/new/')

댓글()