Web/Django-python
카카오지도 API 마커 이미지 겹치게 하기
원래 계획대로면 요로코롬 생긴 귀여운 아이콘들을 지도에 박는게 목적이었다. 그래서 카카오API에서 제공하는 마커 함수를 사용하면서, 이 마커함수에 CSS를 적용시켜 테두리 원과 색, 모양을 만드려 했는데 애석하게도 id나 class가 존재하지 않아 마커에만 CSS를 적용할 수는 없었다. 심지어 map 하위에 있는 img에 박는것도 안된다. 지도 자체가 img 태그로 불러와져서... 그럼 결국 저 마커를 하나하나 만들어 박아야되나? 라는 절망감에 빠져있었는데, 번뜩하고 뭔가 지나갔다. "지도에 마커 박는것 자체는 제한이 없으니, 저 아이콘을 마커로 만들어서 지도에 박을때 배경도 마커로 만들어 박으면 되는것 아닌가?" 그대로 실행에 옮겼다. var backMarkerImage = new kakao.maps...
docker-compose 사용해서 장고+gunicorn+nginx 서버에 SSL 적용하기
참고 링크 : https://medium.com/@pentacent/nginx-and-lets-encrypt-with-docker-in-less-than-5-minutes-b4b8a60d3a71 여러가지 방법들이 있으나, 지금 할 방법은 로컬 서버에 letsencrypt 설치 후, nginx 컨테이너에 해당 인증서를 볼륨으로 마운트시켜 사용하게 하는 방식. 이경우 certbot 컨테이너도 하나 더 추가해서 사용해야 한다. 해야하는 작업 순서 : docker-compose 수정, nginx 수정, nginx 컨테이너와 certbot 컨테이너 연결, ssl 인증서 발급 , 클라우드 서비스 포트 정책 수정 ** 1. docker-compose 파일 수정** nginx 포트에 443 포트 추가 certbot 컨..
Django에서 제이쿼리 load와 장고의 extneds, include 를 복합적으로 이용한 페이지 만들기 - 페이지 참조 및 템플릿 확장
제이쿼리에서 다른 html 페이지를 불러오는 데는 .load 라는 메소드를 이용한다. 이는 URL을 지정하여 해당 URL의 내용을 내가 선택한 객체에 넣겠다는 건데, $(#thisdiv).load("URL") 같은 식으로 사용하면 thisdiv의 내용은 URL에서 불러온 내용으로 바뀐다. 즉, 메인 페이지 이동 없이 페이지 안에서 다른 웹 페이지를 불러오게 할 수 있다는 건데, 이는 기존에 사용하던 프레임 방식을 대체한다. 프레임 방식과 다른 차이는 웹 페이지를 독립적으로 불러오는게 아니라 그 페이지의 내용을 가져와 현재 페이지 지정한 객체에 합쳐버리는것 . 해당 URL을 가진 페이지의 html소스를 가져와 현재 페이지에 삽입하는 동작을 한다고 요약할 수 있다. 이제 장고 템플릿에서 지원하는 extend..
Django에서 mysql 이용하여 로그인, 회원가입 기능 만들기
컨테이너간 연동이 끝났으니, 이제 웹 페이지에서 데이터베이스를 실제로 활용해볼 차례. 장고에서 디비를 사용할때는 모델, 뷰, 템플릿 , URL 파일 정도만 건드려주면 된다. models.py class User(models.Model): user_id = models.CharField(max_length=20) email = models.CharField(max_length=20) password = models.CharField(max_length=20) 일단 모델 생성부터. User라는 테이블을 생성하여 내용을 정의하는데, 이 방식은 장고 튜토리얼에도 나와있는 기존 장고에서 디비를 사용하는 방식과 동일하다. PHP로 웹 개발을 할때 사용하는 MYSQL을 생각하면 복잡한 쿼리문의 반복밖에 떠오르지 않는..
docker-compose를 이용해 Django와 Mysql 컨테이너 연결하기
1. env 파일을 이용한 docker-compose 작성 docker를 이용해 여러 컨테이너를 묶으려고 하는데, 그 중 mysql DB 컨테이너가 포함되는 경우 mysql 계정명과 비밀번호 등을 설정해야한다. 허나 비밀번호가 docker-compose.yml 파일에 하드코딩되는건 안될일, 다른 파일에 넣고 읽어오는 식으로 만드는게 보안상 안전하다. 그러나 yaml 문법에서는 include나 import를 지원하지 않는다. 따라서 docker-compose에서 독자적으로 지원하는 방법을 이용해야 한다. 기본적으로 docker-compose는 같은 디렉토리에 있는 .env 파일을 환경변수 세팅 파일로써 가져온다. 따라서, mysql 등과 같은 컨테이너에서 environment 인자로 계정명과 비밀번호를 세..
Django에서 ajax와 세션을 이용하여 로그인 기능 구현하기
1. 장고에서 ajax 동작시키기 template 내에서 ajax를 작성하여 views.py에 정의된 view로 데이터를 보내고 그 결과값을 반환받는 동작을 만들어주자. 값을 전송할 시에는 .serialize() 함수를 이용해 데이터를 직렬화 해 주어야 POST 형태로 잘 넘어간다. login.html $('#loginButton').on('click',function(event){ var formData = $('#loginForm').serialize(); $.ajax({ cache : false, url : "{% url 'login:loginCheck' %}" , type : 'POST', data : formData, suc..
PWA |Progressive Wep App 프로그레시브 웹 디자인 가이드라인 (작성중)
PWA란? 기존에 서비스되는 웹 페이지를 모바일 환경에서도 별도의 포팅이나 어플리케이션 개발 없이도 사용할 수 있게끔 만든 형태. 각 플랫폼별 언어를 이용한 개발이 필요하지 않으므로, 크로스 플랫폼을 완벽하게 지원한다고 볼 수 있다. PWA의 조건 HTTPS 운영 - 보안문제 해결. Lets entrypt, cert bot 등을 이용한 SSL 적용하기 웹 앱 매니페스트|Web App Manifest 존재 사이트와 관련된 정보를 담은 JSON 파일을 적용하는것. 모바일 환경에서도 잘 동작할 수 있게 대응. 서비스 워커|Service Worker 사용 백그라운드에서 동작하는 프로세스로 실행됨 App이 종료된 상태에서도 동작하거나, 캐싱 등의 다양한 기능을 제공. 반응형 디자인 적용 Offline 기능 적용 ..
Django 에서 JSON으로 데이터 파싱하고 주고받기
일단 목적은 제목과 같은데, 간단하게 순서를 정리해보자. 웹페이지에서 form을 통해 데이터 전송을 요청 파이썬에서 API로부터 JSON데이터를 받아와서 활용하기 쉬운 형태로 파싱함. 파싱한 데이터를 json 형태로 Django의 view로 전달함. view는 다시 받아온 json 데이터를 template의 html 파일로 전달함. 템플릿으로 전달된 json 데이터는 자바스크립트에 의해 활용할 수 있는 형태로 다시 파싱된다. 이제 자바스크립트를 통해서 json 데이터를 자유롭게 사용할 수 있음. 1.웹페이지에서 form을 통해 데이터 전송을 요청하기 1번부터 차근차근 해보자. 우선 웹 페이지에서 데이터를 받아오게 요청을 보내야한다. contact.html {% csrf_token %} views.py f..
Docker-Compose 를 활용한 Django + Nginx + Gunicorn Container 구축기
Docker-Compose 를 활용한 Django + Nginx + Gunicorn Container 구축기 목차 1. 도커란? 2. Django+Python 프레임워크 튜토리얼 3. 장고, Nginx, Gunicorn 각각의 역할과 차이점 4. 본격적인 구축 시작 - Dockerfile 사용하기 5. Docker-Compose 사용하여 django와 nginx 묶어주기 1. 도커란? 도커란 VMware, Virtual Box와 같은 가상화 플랫폼 중 하나로써, 다른 가상화 프로그램들과 달리 도커는 컨테이너라고 하는 독자적인 방식을 이용하는데 , 컨테이너는 별도로 만들어진 공간에서 프로세스가 동작하는 기술로 기존 가상화 기술과는 확연한 차이를 가진다. 전 가상화 (Full-Virtualization) 완..
Django의 form 핸들링 방법
장고의 폼 처리 과정 이미지 출처 : https://developer.mozilla.org/ko/docs/Learn/Server-side/Django/Forms 웹 브라우저에서 폼을 포함하는 페이지를 서버에 요청 unbound 상태 : 폼의 각 필드는 비어있거나 초기값이 채워져 있지만 유저가 입력한 값이랑은 관련이 없다. binding : 입력된 데이터를 각 폼의 형식에 맞게 결합하는 작업. 서버 작업 : 해당 URL로부터 첫 요청인가? (binding된 데이터가 있는가?) 2.1. yes : unbound 상태의 기본 폼 형태를 만들어 다시 브라우저에 반환한다. 2.2. no : binding 된 데이터가 있다는 의미. 2.2에서 -> 들어온 데이터가 유효한가? (데이터 유효성에 대한 검증) 3.1 y..