반응형

분류 전체보기 53

[CSS] 화면 가득 높이 설정 방법

CSS 높이 속성의 원리 (height property) CSS를 배워서 작업을 하다 보면 누구나 한 번쯤은 다음과 같은 상황을 겪기 마련입니다. 배경 사진이나 배경 색상을 화면에 꽉 차도록 설정하고 싶은데 혹은, footer가 화면 중앙으로 말려 올라오는 상황을 방지하고 싶어서, 해당 div의 height 속성 값을 100%로 설정하는 일 말입니다. 하지만 결과물을 보곤 금세 당황하며 고개를 갸웃거리게 될 것입니다. 그리곤 선택자(selector)를 잘못 설정했나? 스스로를 의심하며 id 선택자(#)와 class 선택자(.)를 재확인해볼 것입니다. 그래도 이상한 것을 발견하지 못하곤 결국 구글링을 시작할 것입니다. 이 모든 과정은 height의 속성을 제대로 이해하지 못하고 있기 때문에 발생한 것입니다..

HTML & CSS/CSS 2021.08.26

[Redis] 레디스 설치 및 실행 방법 (Mac 버전)

레디스(Redis) 설치 및 실행 방법 셀러리(Celery)의 메시지 브로커인 레디스를 설치하고, 정상적으로 작동하는지 확인한 다음, 실행시키는 방법에 대해 알아보겠습니다. 레디스의 설치는 홈브루(Homebew)를 이용해 설치해야 하기 때문에, 레디스 설치에 앞서 먼저 홈브루를 설치해주겠습니다. 홈브루(Homebrew) 설치 방법 먼저, 설치를 위해 터미널 창을 열겠습니다. 그리고 홈브루 메인 홈페이지에 나와있는 대로 명령어를 복사 붙여 넣기 합니다. 홈브루 공식 홈페이지 주소: https://brew.sh/ Homebrew The Missing Package Manager for macOS (or Linux). brew.sh 홈브루로 레디스 설치 맥의 터미널(terminal)을 열고 다음 명령어를 입력..

[Redis] 레디스란?

Redis는 개방형 소스(BSD 라이선스), 메모리 내 데이터 구조 저장소로, 데이터베이스, 캐시 및 메시지 브로커(message broker)로 사용됩니다. Redis는 범위 쿼리(range queries), 비트맵(bitmaps), 하이퍼 로그(hyperlogs), 지리공간 인덱스(geospatial indexes) 및 스트림(streams)과 같은 데이터 구조를 제공합니다. Redis에는 복제, Lua 스크립팅, LRU 제거, 트랜잭션 및 다양한 수준의 디스크 지속성이 내장되어 있으며 Redis Sentinel을 통한 고가용성 및 Redis Cluster와의 자동 파티셔닝 기능을 제공합니다. 문자열 추가, 해시 값 증가, 목록으로 요소 푸시, 세트 교차, 결합 및 차이 계산, 정렬된 집합에서 순위가..

[Bootstrap] 수직정렬: Vertical alignment

부트스트랩(bootstrap4 & bootstrap5)에는 inline, inline-block, inline-table, and table cell 요소일 때, 수직 정렬(vertical alignment)을 손쉽게 바꿀 수 있는 기능이 있습니다. 대표적인 inline 요소로는 span 태그가 있습니다. 필자는 테이블 작업을 할 때, vertical alignment를 자주 사용합니다. 특히, 테이블의 셀(cell)에 담긴 글자(text)나 숫자, 그림(image) 등이 셀의 중앙이 아닌 위쪽에 배치되는 경우 요긴하게 사용할 수 있습니다. 단, vertical alignment는 block 요소에는 적용되지 않습니다. 대표적인 block 요소로는 div 태그 등의 시멘틱(semantic) 태그들이 있으..

[장고] 숫자 반올림 - 템플릿 필터: floatformat

장고에서 숫자와 관련된 작업을 하다 보면 반올림을 해야 할 때가 있습니다. views.py에서 사용할 수 있는 파이썬(python)의 반올림 round 함수 말고, 장고에 기본적으로 내장돼 있는 필터로써, 장고 템플릿에서 바로 사용할 수 있는 floatformat 필터에 대해 알아보겠습니다. flotformat 필터는 장고의 내장 필터이기 때문에 따로 로드를 해줄 필요가 없습니다. 빠른 이해를 위해 바로 flotformat 필터의 사용 예시를 들어보겠습니다. 인수 없이 사용할 경우 부동 소수점 숫자를 소수점 한 자리로 반올림합니다. (단, 표시할 소수 부분이 있는 경우에만 해당합니다.) value 템플릿 결과값 3.14159 {{ value|floatformat }} 3.1 3.00000 {{ value..

[장고] REST API 사용 이유

REST API의 REST는 REpresentational State Transfer의 약자로, 사용자의 행위를 HTTP method로 분리해 url의 구조를 단순화시켜 줌으로써 개발의 확장과 수정을 용이하게 해 줍니다. 이해를 돕기 위해 보다 구체적인 예를 들어보겠습니다. 행위에 따른 카테고리의 URL들을 다음과 같이 정의해보겠습니다. /show/category/ # 카테고리 나타내기 /add/category/ # 카테고리 추가 /change/category/ # 카테고리 변경 /delete/category/ # 카테고리 삭제 만약, 각각의 카테고리마다 포스트들이 존재한다고 가정해보겠습니다. 그럼 순식간에 url이 복잡해지기 시작합니다. /showpost/category/post/ # 포스트 나타내기 ..

[장고] i18n: LOGIN_REDIRECT_URL 설정방법

i18n을 이용해 다국어로 로그인에 성공할 경우, 해당 언어의 프로필 페이지로 자동 연결될 수 있도록 설정하는 방법에 대해 알아보겠습니다. django-allauth를 사용하면, 장고는 기본적으로 로그인에 성공할 경우 /accounts/profile/로 연결하도록 설정돼 있습니다. 이는 소셜 계정(socialaccount)을 통한 로그인 또한 마찬가지입니다. 때문에 i18n을 사용해 언어마다 url주소의 접두사를 언어코드로 설정해 놓았다고 하더라도, settings.LOGIN_REDIRECT_URL을 따로 설정해주지 않는다면, 어떤 언어로 로그인을 하더라도 영어(settings.LANGUAGE_CODE가 'en'인 경우) 페이지로 로그인하게 됩니다. 보다 구체적으로 예를 들자면 다음과 같습니다. 한국어 ..

[장고] gettext: 번역기능 모듈

장고에서 언어를 번역할 때 사용하는 gettext 모듈에 대해 알아보겠습니다. >>> settings.py import os MIDDLEWARE = [ ... 'django.contrib.sessions.middleware.SessionMiddleware', 'django.middleware.locale.LocaleMiddleware', 'django.middleware.common.CommonMiddleware', ... ] LANGUAGE_CODE = 'en-us' LANGUAGES = [ ('ko', 'Korean'), ('en-us', 'English'), ('es', 'Spanish'), ('fr', 'French'), ] LOCALE_PATHS = [os.path.join(BASE_DIR, '..

[장고] i18n: 다국어 기능 Snippet

웹사이트를 제작할 때, 오로지 한국인만을 위해 만들어진 웹사이트가 아니라면, 한국어 이외에 영어, 스페인어, 프랑스어, 중국어, 일본어 등 다양한 언어를 지원해야 하는 경우가 있습니다. 언어가 추가될 때마다 영문 버전의 base.html, home.html, navbar.html, footer.html을 만들고, 스페인어 버전의 템플릿들, 프랑스어, 중국어, 일본어 등의 템플릿을 일일이 만들어서 url을 지정해줄 수도 있습니다. 하지만 그럴 경우, 언어만 다를 뿐 결국 동일한 형태의 템플릿들을 여러 개로 관리해야 하기 때문에 번거롭고 비효율적입니다. 그럴 때 사용할 수 있는 기능이 바로, 장고에서 기본적으로 제공하는 i18n입니다. 이번 포스트는 언제든지 복사 붙여 넣기 해서 쓸 수 있도록, 제가 주로 ..

[장고] i18n: 다국어 기능 사용법

장고에서 기본적으로 제공하는 다국어 지원 기능인 i18n의 사용법에 대해 알아보겠습니다. 1. 장고 프로젝트 생성 먼저, 장고 프로젝트를 생성합니다. cmd: django-admin startproject 프로젝트명 이해의 편의를 위해, 우리 예시에서는 프로젝트명: django_i18n / 앱 명: i18n_app으로 설정했습니다. * 참고 * 앱 생성 명령어는 python manage.py startapp i18n_app입니다. 2. 기본 설정 추가 settings.py 파일에 다국어(현지화) 사용 관련 설정들을 추가해줍니다. >>> settings.py import os INSTALLED_APPS = [ ... 'i18n_app', ... ] MIDDLEWARE = [ ... 'django.contr..