hotamul의 개발 이야기

익숙하게 들어봤을 AJAX, setTimeout, DOM 조작 API들은 모두 비동기적으로 작동한다. Javascript는 싱글쓰레드인데 어떻게 비동기적으로 작동할 수 있을까? 아래 영상을 참고하면 Javascript의 비동기적인(비동기적인 것처럼) 작동 방식과 Javascript의 Event Loop, Call Stack, Callback Queue, Web APIs에 대해 이해할 수 있다. What the heck is the event loop anyway? 아래 이미지는 영상에서의 Javascript 런타임 환경에 대한 이해를 돕기 위한 이미지이다. 요약하자면 Javascript는 Call Stack에 있는 function call들을 우선적으로 처리하고 Call Stack이 비어 있을 때 Cal..

JavaScript Hoisting refers to the process whereby the interpreter appears to move the declaration of functions, variables or classes to the top of their scope, prior to execution of the code. Javascript에서 호이스팅(hoisting)이란 변수, 함수가 선언되기 전 사용될 때를 대비해서 사용하려는 scope 맨 위에 선언한 것과 같은 효과를 보이는 것을 말한다. 링크에 좋은 예시와 자세한 설명이 있으니 참고하자. 위 링크의 글을 읽다 보면 TDZ(Temporal Dead Zone)에 대한 내용도 찾아볼 수 있다. TDZ가 발생하는 이유는 let, c..

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를 추가하면 렌더링..