hotamul의 개발 이야기

freenom에서 무료 domain을 발급 받아 AWS Route 53를 이용해서 호스팅 영역 생성을 완료했다. 그리고 HTTPS를 사용하기 위해 AWS Application Load Balancer를 생성하였다. SSL 인증서 발급 및 ALB 구성은 HTTPS 사용하기 (AWS EC2, Route53, Load Balancer)을 참고했다. 하지만 위 방법대로 해도 자동으로(주소창에 share-blog.tk로만 검색) HTTPS로 리디렉션되지 않았다. 해결 방법을 찾아보다가 Nginx의 설정 파일에 제어문을 추가하여 해결할 수 있는 방법을 알게 되었다. NGINX configuration 수정 참고: Classic Load Balancer에서 HTTP 트래픽을 HTTPS로 리디렉션하려면 어떻게 해야 하..

Django Admin에서 Item을 선택하지 않고 Go(Aciton) 버튼을 클릭하면 위와 같이 Item이 선택되어야 한다는 경고 메시지를 볼 수 있다. share-blog에 블로그들의 (velog - giruboy, tistory - hotamul) 최근 게시물을 가져오는 기능을 Django Admin Action을 이용해 구현하려고 하기 때문에 해당 Error가 발생하지 않도록 해야한다. 해결 방법 action method 추가# blog/admin.py ... @admin.register(Post) class PostAdmin(admin.ModelAdmin): list_display = ( 'id', 'category', ... actions = ['get_th..

현재 app.config.settings.base 모듈에 django의 기본 설정 정보들이 담겨있다. django의 SECRET_KEY가 github repository에 공개 되지 않게 하기 위에 아래와 같이 json 파일에서 해당 key 값을 가져오도록 코드를 작성했다. SECRET_FILE_PATH = os.path.join(BASE_DIR, 'secrets.json') with open(SECRET_FILE_PATH) as f: secrets = json.loads(f.read()) def get_secret(setting): """비밀 변수를 가져오거나 명시적 예외를 반환한다.""" try: return secrets[setting] except KeyError: error_msg..

Post에 image 컬럼이 없으면 태그 이름을 통해 기본 이미지를 제공하는 기능을 추가했다. # api/utils.py ... if obj.image: post['image'] = obj.image.url else: post['image'] = get_default_img(post['tags']) ... # api/utils.py ... def get_default_img(tags): ret = 'share-blog' default_img_list = [ 'django', 'git', 'github', 'python', 'vuejs' ] while len(tags): tag_name = tags.pop().replace(".", "").lower() if tag_name in default_img_li..

참고 링크 https://whitewing4139.tistory.com/158 https://stackoverflow.com/questions/66380006/django-deterministic-true-requires-sqlite-3-8-3-or-higher-upon-running-python sqlite3 버전 변경 후 아래와 같이 진행 ❯ pip install pysqlite3-binary ❯ vim ./venv/lib64/python3.8/site-packages/django/db/backends/sqlite3/base.py ... # from sqlite3 import dbapi2 as Database # annotation from pysqlite3 import dbapi2 as Databa..

Python 3.8 설치 활성화 ❯ amazon-linux-extras | grep python3.8 44 python3.8 available [ =stable ] ❯ sudo amazon-linux-extras enable python3.8 ❯ amazon-linux-extras | grep python3.8 44 python3.8=latest enabled [ =stable ] Python 3.8 설치 ❯ sudo yum install -y python3.8 설치 확인 ❯ ls -l /usr/bin/python3.8 -rwxr-xr-x 1 root root 7048 8월 16 20:23 /usr/bin/python3.8 Python 버전 변경 현재 사용하고 있는 버전 확인 ❯ python --vers..

share-blog 프로젝트는 협업 목적으로 만들고 있기 때문에 github과 연동해서 code 인용이나 참조를 쉽게 할 수 있어야 한다. 따라서 댓글 기능을 utterances를 이용해 구현했다. ... ... 원하는 위치에 id="utte-comment"인 태그를 만들고 Vue.js 코드에서는 다음과 같이 처리했다. mounted() { console.log("mounted()..."); let script = document.createElement("script"); script.setAttribute("src", "https://utteranc.es/client.js"); script.setAttribute("issue-term", "pathname"); script.setAttribute("r..

Vue.js가 처리되기 이 전 화면에는 {{ }}와 같은 mustach 표현이나 v-if로 감춘 내용들이 아주 잠깐 동안 보이게 된다. 그 이유는 브라우저에서 페이지가 로드된 뒤에 Vue.js를 실행하면서 엔진이 Javascript를 읽어 들이는데 시간이 필요하기 때문이다. 렌더링 되기 이 전 까지의 아주 잠깐이지만 보이면 안되는 중요한 내용이 보일 수 있기 때문에 이를 v-cloak으로 해결해보겠다. v-cloak 디렉티브는 Vue.js에서 사용되는 내장 디렉티브로 Vue.js가 렌더링 되기 전까지는 남아있는 속성이다. 그리고 Vue.js가 모두 처리되고 나면 v-cloak 속성을 삭제한다. 따라서 아래와 같이 태그에 v-cloak 디렉티브를 추가하고 display: none; css를 추가하면 렌더링..

기존 home 화면에서의 vue-django 연동 과정 현재 프로젝트에서 home url(/)에 접근했을 때의 Vue-Django 연동 처리 과정이다. 처음 request(/)에는 DB에 접근하지 않고 html, css, js 파일만을 전달한다. 렌더링 시 Vue.js 코드의 created()에서 axios 객체를 이용해 두 번째 request(/api/post/list)가 실행된다. 이 때는 DB에 접근한다. 위 과정은 반드시 두 번의 request가 있어야 한다. 하지만 처음 html, css, Vue.js 를 전달할 때 DB에도 접근하여 JsonResponse를 전달 할 수 있다면 request 수를 줄일 수 있어 렌더링 시간을 줄일 수 있을 것이다. request 수에 주목하자. 기존에는 20 r..