| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 |
- API
- java
- django ORM
- 알고리즘
- web
- django rest framework
- js
- react
- 파이썬 알고리즘
- es6
- AWS
- form
- 파이썬
- 알고리즘 연습
- PYTHON
- c++
- HTML
- 알고리즘 문제
- Django
- CSS
- 알고리즘 풀이
- DRF
- Git
- MAC
- 백준
- javascript
- django widget
- 장고
- Algorithm
- Baekjoon
- Today
- Total
목록웹프로그래밍 (163)
수학과의 좌충우돌 프로그래밍
저번 포스팅에서 HTTP 통신에 대해서 알아보았습니다. 그리고 이 정보는 상태 비 저장 프로토콜 입니다.우리가 로그인을 할 때 아이디와 비밀번호의 정보도 HTTP 통신 중 POST 방식으로 보내기 떄문에 이 정보는 저장이 되지 않습니다. 그렇기 때문에 로그인 유지하기 기능을 구현하기 위해서는 다른 방법을 사용해야 합니다. 그 방법으로 쿠키와 세션을 알아보도록 하겠습니다. 쿠키(Cookie) 쿠키란? 클라이언트인 웹 브라우저 로컬에 저장하는 키와 값이 들어있는 작은 데이터 파일 만료시점 사용자 인증이 유효한 시간을 명시 가능, 브라우저가 종료되도 유효시간이 남아있으면 인증이 유지 됨 쿠키 구성 요소 이름 : 각각의 쿠키에 대한 식별자 값 : 쿠키의 이름과 관련된 값 유효시간 : 쿠키의 유지시간 도메인 : ..
로그인 페이지를 구현하는 중, 로그인 유지 기능을 만들게 되었습니다. 로그인 유지를 할지 말지 checkbox로 선택을 받으려 했습니다. 하지만 그러기에 checkbox 의 디자인이 너무 이쁘지 않아서 새롭게 디자인 하고자 했습니다. 현재 checkbox 와 label은 다음과 같습니다. keep login 먼저 현재의 checkbox가 보이지 않게 해주었습니다. 해당 위치에 다른 checkbox 를 만들어줄 것이기 때문에 공간도 차지하지 않도록 해주었습니다. input[type=checkbox] { display: none; } 다음으로는 label 에 대한 속성을 추가해주었습니다. 옆에 checkbox가 들어갈 공간을 주기 위해서 좌측 패딩 값을 주었습니다. input[type=checkbox] + ..
User password 변경하기 User의 password 를 변경해보도록 하겠습니다. home.html 에는 password를 변경하러 가는 링크가 있습니다. 비밀번호 변경 링크를 통해 change_pw.html 에 도착하면 {{error}} # 한 번에 제출 후 오류가 있을 경우 error를 가지고 return Change Password {% csrf_token %} Origin Password New Password Confirm Password 다음과 같이 원래의 password, 새로운 password, 새로운 password 를 한 번 더 적게 됩니다. 이렇게 제출을 하면 views.py 에서 유효성을 검사합니다. from django.contrib.auth.hashers import ch..
OneToOne 사용하여 User Model 추가하기 저번에 장고에서 제공해주는 User Model을 사용하여 로그인 및 로그아웃, 회원가입을 구현하였습니다. https://ssungkang.tistory.com/entry/Django-10-%ED%9A%8C%EC%9B%90%EA%B0%80%EC%9E%85%EB%A1%9C%EA%B7%B8%EC%9D%B8%EB%A1%9C%EA%B7%B8%EC%95%84%EC%9B%83-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0 장고에서 제공해주는 기본 모델은 부족한 점이 많아보입니다. 우리가 원하는 필드들이 모두 존재하는 것이 아니었기 때문에 이를 업그레이드 시켜보도록 하겠습니다.여러 가지 방법이 있겠지만 그 중에서 가장 직관적이고 쉬운 방법을 택해..
효율적인 url 관리 https://ssungkang.tistory.com/entry/django-%ED%9A%A8%EC%9C%A8%EC%A0%81%EC%9D%B8-url-%EA%B4%80%EB%A6%AC 저번 포스팅에 이어 추가되는 내용이 있어서 보충합니다. urls.py 에서 각 url 마다 name을 지정해줌으로서 하드코딩을 피하고 클린 코드를 짤 수 있습니다. 예시를 보면서 이해하도록 하겠습니다. Sign Up Now 다음과 같이 {% url 'url의 이름' %} 과 같은 방식으로 이름에 해당되는 url로 연결을 해줍니다. 프로젝트가 확장됨에 따라서 urls.py 를 앱마다 따로 관리하고 namespace로 연결할 경우에는 앞에 추가로 namespace를 붙여주어야합니다. 이로서 다른 앱에 같은..
기본 세팅하기 기존에 django 를 이용하여 Hello World 를 출력해보는 기초를 알아보았습니다. https://ssungkang.tistory.com/entry/Django-02-Django-%EC%8B%9C%EC%9E%91-Hello-World-%EC%B6%9C%EB%A0%A5 이번에는 좀 더 나아가서 기본세팅을 정형화 해보도록 하겠습니다. 프로젝트의 이름 프로젝트 이름은 project 로 , 그 하위 폴더는 config 로, 중심이 되는 app은 core 로 하도록 하겠습니다. 다만 프로젝트와 그 하위 폴더의 이름은 자동으로 같게 되기 때문에 프로젝트의 이름을 config 로 생성 후 최상단 디렉토리를 project로 바꿔줍니다. settings 파일 장고 프로젝트를 생성하면 기본적으로 se..
투표 기능 구현하기 학교내 고양이 관리하는 사이트 UOSCAT 의 기능 중 일부이다. 길고양이 이니 만큼 이름을 투표를 통해 지어주었고 그 투표구현하는 방법을 알아보자. models.py 먼저 model 을 추가해줘야한다. 현재 있는 모델은 Cat 으로서 일반적인 Post 글에 해당한다. 각 Cat 마다 하나의 투표가 필요하므로 그 이름을 Vote 라고 한다. 그리고 Cat 과 Vote는 1대1 대응이다. 그리고 각 Vote마다 여러 개의 표가 존재하고 그 이름을 Choice 라고 하자. Vote와 Choice는 일대다 대응이다. class Vote(models.Model): created = models.DateTimeField(default=django.utils.timezone.now) # 투표는 ..
글 수정 시 기존의 내용 불러오기 글 수정 기능을 구현했지만 수정을 하게 되면 처음부터 글을 다시 쓰는 것과 다를 바가 없었다. 따라서 이를 해결하기 위해서 기존의 데이터를 불러오도록 했다. 먼저 기존에 존재하던 글 수정 함수 edit을 살펴보자. from .form import CatPost def edit(request, cat_id): cat = Cat.objects.get(id=cat_id) # 글을 수정사항을 입력하고 제출을 눌렀을 때 if request.method == "POST": form = CatPost(request.POST, request.FILES) if form.is_valid(): print(form.cleaned_data) cat.name = form.cleaned_data[..
삭제 시 경고창 띄워주기 현재 post 한 글과 댓글이 삭제 버튼을 누르게 되면 망설임없이 바로 삭제 된다. 삭제 시에는 복원이 불가능하고 실수할 가능성이 있기 떄문에 경고창을 띄워서 이를 해결하자. post한 글과 댓글 경고창을 처리한 방식의 약간의 차이가 있어서 따로 다뤄주겠다. post 글 삭제 경고창 우선 기존의 삭제는 a 태그를 통해서 글을 삭제하는 기능을 수행하도록 url을 넘겨주었다. Delete 이제 바로 url을 넘겨주지 않고 modal 을 띄워준 후 modal 에서 삭제하기 를 누를 시 이 url로 넘어가도록 하겠다. 기존의a 태그를 수정해주자. Delete data-toggle="modal": 모달 창을 여는 역할 data-target="#CatModal": 모달의 id로 연결해주는 ..
div에 이미지 꽉 채우기 이미지 크기에 따라서 div를 뚫고 나오기도 하고, 여러 문제가 발생한다. 그래서 div 크기에 딱 맞도록 이미지를 넣는 방법을 알아보고자 한다. img 태그를 이용해 고양이 사진을 넣고 이를 div로 감싸주었다. 이제 div에 크기를 결정해주어서 사용하려고 한다. .image-container{ width: 300px; height: 300px; } 하지만 그 결과 고양이 이미지가 div를 뚫고 나오게 된다. 파란색 영역엔 div를 무시하고 이미지 크기에 따라 들어간 것을 확인할 수 있다. 이럴 경우에는 다음과 같이 해결할 수 있다. .image-container{ overflow: hidden; display: flex; align-items: center; justify-..