전체 글

Heaon`s Blog
Programing Language/Javascript

[Javascript] event listener 사용하는 법과 event 의 종류

event listener - DOM 객체에서 이벤트가 발생할 경우 해당 이벤트 처리 핸들러를 추가할 수 있는 오브젝트 (비유하자면 이벤트라는 소리가 발생했을 때, 듣는 객체를 listener라고 명한다.) - 특정 DOM에 위에 Javascirpt 이벤트가 발생할 때 특정 함수를 호출할 수 있다. 다음은 Click 이벤트에 대한 이벤트리스너를 설정하여 제작된 예제이다. 해당 코드는 a 요소에 마우스 클릭 이벤트가 발생하면 콘솔로그로 hi 라는 글자가 찍혀 나오게 된다. 클릭 event의 종류 이벤트의 종류가 많기 때문에 공식 문서를 참고하여 이벤트 찾자 문서 : https://developer.mozilla.org/ko/docs/Web/API/Window#%EC%9D%B4%EB%B2%A4%ED%8A%B8

Programing Language/Javascript

[Javascript] getElement*, querySelector*로 요소 접근하기

📚 getElement*, querySelector*로 요소 접근하기 DOM 탐색 프로퍼티를 사용해 목표 요소에 쉽게 접근할 수 있다. 🔖 DOM : Document Object Model로 웹페이지를 자바스크립트로 제어하기 위한 객체 모델을 의미한다. 📒document.getElement* 을 통해 요소 검색하기 요소에 id 속성이 있으면 위치에 상관없이 메서드 document.getElement* 을 통해 접근이 가능하다. Element 📒document.querySelector* 을 통해 요소 검색하기 document.querySelector* 주어진 CSS 선택자에 대응하는 요소 중 첫번째 요소를 반환한다. 따라서 모든 요소를 반환하는 것을 원한다면, document.querySelectorAll..

Programing Language/Javascript

[Javascript] undefined, null 의 정의와 차이

📚 Javascript undefined vs null undefined은 변수를 선언하고 값을 할당하지 않은 상태, null은 변수를 선언하고 빈 값을 할당한 상태(빈 객체)이다. 즉, undefined는 자료형이 없는 상태이다. 📒 undefined undefined는 원시값으로, 선언한 후에 값을 할당하지 않은 변수나 값이 주어지지 않은 인수에 자동으로 할당된다. 이 값은 전역 객체의 속성 중 하나로, 전역 스코프에서의 변수이기도 하다. 따라서 undefined 변수의 초기 값은 undefined 원시 값이다. undefined는 예약어가 아니기 때문에, 전역 범위 외에서 변수 이름으로 사용할 수 있다. 그러나 유지보수와 디버깅에 어려움을 겪을 수 있으므로 피하는 것이 좋다. 아래의 경우에 변수가 ..

FrameWork/Django

django-debug-toolbar을 통한 SQL 디버깅 정보 확인하기

django-debug-toolbar Djago-debug-toolbar은 현재 request/response에 대한 다양한 디버깅 정보를 보여주는 써드파티이다. 다양한 Panel들을 지원하며 SQLPanel을 통해, 각 요청 처리시에 발생한 SQL 내역을 확인할수 있다. 참고로 Ajax 요청에 대한 지원은 불가하다 django-debug-toolbar 설치하기 📒 공식문서 : https://django-debug-toolbar.readthedocs.io/en/latest/ Django Debug Toolbar — Django Debug Toolbar 3.8.1 documentation © Copyright 2023, Django Debug Toolbar developers and contributors..

FrameWork/Django

mark_safe을 통해 Admin 페이지에서 이미지를 표현하는 방법

Admin에서 Img을 표현하는 방법 Django admin에서 list_display을 통해 해당 model의 img을 표현하고 싶다면 다음과 같이 작성한다. from django.contrib import admin from .models import Post from django.utils.safestring import mark_safe @admin.register(Post) class PostAdmin(admin.ModelAdmin): list_display = ['pk', 'photo_view','message'] def photo_view(self, obj): return mark_safe(f"") django는 기본적으로 autoscape (html 파일이 아닌 외부로부터의 코드를 모두 e..

FrameWork/Django

ERROR : django.db.utils.OperationalError: no such table 오류 해결

상황 pycharm 한번 써볼려고 vsc에서 환경을 옮겼다가 다시 vsc로 돌아왔는데, pycharm에서 python manage.py migrate 해서 문제가 난 모양이었다. 일단 이것 때문에 난생 처음으로 git reset --commit version 해서 돌아가기 까지 했었는데, 근본적으로 5시간 정도 고쳐지지 않아서 해매다 해결방법을 찾았다. 해결 일반적인 해결방법으로는 마이그레이션 디렉토리에 있는 파일들과 db.sqlite3 파일을 지워준다. # db.sqlite3은 수동 삭제 요망 find . -path "*/migrations/*.py" -not -name "__init__.py" -delete find . -path "*/migrations/*.pyc" -delete 그리고 아래 명령어..

Cloud/Git

특정 Commit으로 되돌리기

커밋 되돌리기만약 작업을 하다가, 해당 개발 기능에 문제가 심각하게 생겨서 전에 만들어 둔 커밋을 돌아가야하는 경우가 있다. 예를 들어 bugfix 커밋 부분으로 되돌아가서 처음부터 작업해야 하는 상황에 직면했다고 가정한다.  과정을 정리하면 다음과 같다. git log을 통해 커밋 해시값을 찾는다. 되돌아 가고 싶은 커밋 해시값을 이용하여 git checkout 해시값으로 해당 커밋으로 되돌아간다. 해당 커밋에서 작업을 이어가고 싶다면 git checkout -b "branch_name"을 이용하여 새로운 브랜치를 만들어 작업을 이어나간다. 일단 git log 명령어를 통해 되돌아가고 싶은 커밋의 해시를 찾는다. 일반적으로 git log 명령어로 나오는 해시값은 아주 길지만, git log --onel..

Programing Language/Python

pip tool로 패키지 설치중 ERROR: metadata-generation-failed. Encountered error while generating package metadata 오류 해결

에러가 난 상황 가상환경 설정하고 pip install -r requirements.txt로 라이브러리 다운로드하던 도중에 해당 오류가 발생했다. 해결방법 metadata-generation-failed 오류가 뜨는 이유는 여러가지 이유로 발생한다. 주로 4가지 패턴으로 자주 나타는데 이는 다음과 같다. 1. 'pip' 및 setuptools에서 오래된 버전 존재 패키지툴인 pip을 업그레이드 시켜 해결한다. 🖥️ terminal python.exe pip install --upgrade pip 2. 설치하려는 패키지가 사용하는 Python 버전을 지원하지 않는다. 설치하려는 패키지가 Python 버전을 지원하지 않음으로 가상환경을 설정할 때, 적절한 파이썬 버전을 선택하여 가상환경을 설정한다. 가상 환..

Cloud/Git

Stash

Stash만약 #1 브랜치에서 testfile1을 만들고 #2 브랜치로 이동하는 상황이라고 가정한다. 해당 경우 #1에서 testfile1을 만들고 #2 브랜치로 이동해서 #2 브랜치에서는 testfile2가 없을 것이라고 생각이 들겠지만 직접 실행해보면 스테이징되지 않은 변경사항이 계속 따라다니는 것을 알 수 있다. 현재는 #1 브랜치에서 #2 브랜치로 이동하는데 있어서 충돌나는 파일이 없어서 쉽게 이동이 가능하지만, 충돌 나는 파일이 있다면 깃에서 브랜치 이동을 하지 못하도록 막는다.  따라서 작업했던 내용을 어딘가 저장해두고 안전하게 브랜치를 이동할 수 있는 기능이 필요한대 이를 stash 명령어가 제공해준다. Stash는 커밋하지 않은 변경사항들을 임시저장하고 불필요한 커밋으로 이력이 지저분해지는..

JHeaon
JHeaon 개발일지