목록분류 전체보기 (341)

수학과의 좌충우돌 프로그래밍

[Django] Channels, 비동기적 채팅 구현하기 - WebSocket (2)

저번 시간 WebSocket (1)에서는 이론적인 개념들과, 약간의 실습을 진행해보았습니다. 하지만 아직 채팅은 보내지지 않고 에러가 발생하였습니다. 지금부터 그 문제를 해결해보도록 하겠습니다. 소비자 만들기 django의 기본 원리를 생각해보면 HTTP 요청을 받아들이고 매핑된 URL 로 이동, 이에 따라 views 에 함수를 실행합니다. 이와 유사하게 Channels역시 WebSocket 연결을 받아들이면, root routing configuration에서 소비자를 찾은 후에, 이벤트를 처리하기 위한 함수들을 호출합니다. # chat/consumers.py from channels.generic.websocket import WebsocketConsumer import json class ChatC..

웹프로그래밍/Django 2019. 7. 11. 14:18
[Django] Channels, 비동기적 채팅 구현하기 - WebSocket (1)

비동기적, 즉 실시간 채팅을 구현하기 위해서 WebSocket 을 사용하고자 하였고, django에서 이를 가능하게 해주는 Channels 라이브러리를 알아보았습니다. 전체적인 내용은 공식 문서 를 참고하였습니다. WebSocket 이란? WebSocket은 프로토콜로서, 실시간으로 데이터를 양방향 통신 할 수 있게 해주는 기술 입니다. Socket 이란 쉽게 생각해서 통신을 위한 통로라고 생각하면 됩니다. 이런 통로를 Web 에도 도입하게 되었는데 기존의 Web이 정보를 어떻게 주고 받는지 생각해보면 socket이 필요한 이유를 알 수 있습니다. Web 환경은 필요한 정보를 HTTP 기반으로 Request/Response로 연결하여 데이터를 주고 받아 네트워크의 연결을 유지하지 않는 특징을 가지고 있습..

웹프로그래밍/Django 2019. 7. 10. 15:08
[html] input 파일 첨부시 파일 확장자 제한하기

input 태그로 파일을 첨부하게 할 수 있는데 예상치 못한 이슈가 생겼습니다. 사용자의 사진을 첨부받을 목적으로 만들었는데 엑셀, 텍스트 파일, 비디오 파일 등 예상치못한 파일을 첨부하는 일이 발생했습니다. 다행히도 input 의 accept속성을 통해서 확장자를 제한할 수 있었습니다. 여러 개의 확장자를 원할 경우 , 로 연결해주면 됩니다. 자주 사용하는 확장자에 대해서 정리를 해보았습니다. Excel Files (.xls) Excel Files (.xlsx) Text Files (.txt) Image Files (.png/.jpg/etc) HTML Files (.htm,.html) Video Files (.avi, .mpg, .mpeg, .mp4) Audio Files (.mp3, .wav, etc..

웹프로그래밍/html,css 2019. 7. 8. 14:01
[Django]message framework 알아보기

로그인을 실패했을 때 사용자가 확인 할 수 있도록 알람을 띄워줘야 합니다. javascript alert 을 통해서 알람을 쉽게 띄울 수 있지만 로그인에 성공했을 때, 혹은 실패했을 때 다른 알람을 띄워줘야 합니다. 구현하는 방법이야 다양하겠지만 django 의 messages framework 를 사용해보았습니다. Messages Framework 위의 예시처럼 로그인을 실패하였습니다. 등 과 같은 1회성 메세지를 담는 용도로 사용합니다. 메세지를 남기는 방식은 HttpRequest 인스턴스를 통해 남기며 1회성이기 때문에 새로고침하면 사라집니다. 그렇기 때문에 전체 유저에게 한 번에 메세지를 보낼 수 없고 한 명의 유저에 대해서 메세지를 보낼 수 있습니다. Message level message 에는..

웹프로그래밍/Django 2019. 7. 6. 04:15
[Django]Date와 Time을 나타내는 template filter

모델에 따라서 날짜와 시간을 필드로 필요로 하는 경우가 많이 존재합니다. 이럴 경우, DateField 나 DateTimeField 를 사용하여 값을 저장합니다. 하지만 이럴 경우에 데이터는 기본적으로 July 4, 2019, 9:37 a.m. 다음과 같은 형식으로 나타나게 됩니다. 이를 원하는 형식으로 템플릿에 나타내기 위해서는 template filter 를 사용할 수 있습니다. {{chatting.pub_date | date:'m-d,H:i' }} 다음과 같이 뒤에 date 를 어떤 방식으로 표시할 지를 명시해 줄 수 있습니다. date 에 관련된 template filter는 어떻게 사용해야하는지 알아보도록 하겠습니다. 문자 설명 예시 d 일 수에 대해서 2자리 숫자로 나타냅니다. 01~31 j ..

웹프로그래밍/Django 2019. 7. 5. 14:59
[javascript] 회원가입 시, 아이디 중복 확인하기 - ajax

회원가입을 조금 더 완벽하게 하기 위해서 아이디 중복 확인을 구현해보았습니다. 중복 검사 버튼을 눌렸을 경우, 동일한 아이디가 있는지 확인하고 없다면 절차를 진행하도록 합니다. html 코드는 다음과 같습니다. 중복검사 아이디를 입력하는 input, 중복 검사를 실시하는 button, 중복 검사가 완료되었을 때 표시 해주는 img 가 있다. 중복 검사전과 후 모습은 아래 이미지와 같습니다. 이제 중복검사 버튼을 클릭할 시, id_overlap_check 라는 함수가 실행되는데 이 함수를 살펴보도록 하겠습니다. $('.username_input').change(function () { $('#id_check_sucess').hide(); $('.id_overlap_button').show(); $('.us..

웹프로그래밍/javascript 2019. 6. 30. 03:32
[html]input의 필수값을 지정하는 required

개발자가 의도한 대로만 사용자가 움직여주면 좋겠지만 실상은 그렇지 않습니다. 예상치도 못한 버그를 많이 생산? 해내며 이를 사전에 예방 해줘야 합니다. input 태그가 있지만 사용자가 무시하고 submit을 해버린다면 해당 input의 데이터는 존재하지 않을 것입니다. 하지만 아이디, 패스워드 등 주요한 input 이라면 꼭 입력값을 받아줘야 합니다. 필수 input 폼을 채우지 않았을 경우, 재출버튼을 눌렀을 때 경고창을 띄워주면 이러면 문제를 사전에 예방할 수 있습니다. 이는 별도의 js 없이 html 만으로 구현이 가능합니다. 아이디: 다음과 같이 input 태그 안에 required 를 추가해주면 해당 input을 입력하지 않고 제출을 누를 시 경고창이 뜨게 됩니다. 남성 여성 이번에는 여러 개..

웹프로그래밍/html,css 2019. 6. 25. 00:03
[html] form 안에 button이 있으면?

장고 form은 input이나 button 을 통해서 제출하는 기능을 구현합니다. 가입하기 위와 같이 두 가지 선택지가 있습니다. 하지만 form 안에서 정보를 채우기 위해서 button 을 사용해야 할 경우도 있습니다. 저 같은 경우 회원가입 form 을 만들다보니 주소 정보가 필요했고, 주소를 찾는 검색 버튼을 구현한 결과, 주소를 찾기 위해 button을 누르면 form 이 보내졌습니다. 그 이유는 바로 button type 에 있었습니다. button 도 여러 type을 가지게 되는데 그 중 form 을 제출하는 submit 이라는 속성이 있고 이 속성이 default 입니다. 가입하기 가입하기 위에 두 경우는 같은 경우인것이죠. 일반적인 버튼을 만들기 위해서는 아래와 같이 해주어야 합니다. 이 ..

웹프로그래밍/html,css 2019. 6. 2. 04:31