sorecord 님의 블로그

css코드까지 다 구현했으니 이제 자바스크립트 코드를 살펴보자   let currentSlide = 0; 현재 보여지고 있는 슬라이드를 나타내는 변수다. 초기값으로 0을 설정하여 첫 번째 슬라이드를 표시하도록 했고 const slides = document.querySelectorAll('.quote-slide')는 HTML 문서에서 모든 슬라이드 요소를 선택하여 slides 변수에 저장한다.showslide함수를 만들어주는데 특정 슬라이드를 보여주는 함수이다. foreach는 slides 배열의 각 슬라이드에 대해 반복한다. (slide는 현재 슬라이드 요소, i는 인덱스) 마지막 조건문은 현재 인덱스(i)가 보여주려는 슬라이드의 인덱스(index)와 같다면, 해당 슬라이드에 .active 클래스를 추..

문득 들었던 생각이다. 다른 사이트에서 유명한 문구가 옆에 작게 공간을 차지하고 슬라이드 쇼처럼 지나가는 것을 본적이 있다.  비슷하게 내 사이트를 꾸며주면 괜찮을 것 같아서 바로 코드를 짜보았다.  일단 어떤 문장이든 상관이 없었기 때문에 옛날 사람들이 한 명언들을 복사 붙여넣기 했다.  "행복은 선택이다." - 에픽테토스 "우리는 우리가 반복적으로 하는 것이다." - 아리스토텔레스 "할 수 있다고 믿는 것이 반이다." - 테오도르 루즈벨트 "성공은 준비가 기회를 만나는 곳이다." - 세네카 "미래는 우리가 만드는 것이다." - 엘리너 루즈벨트  이후 css로 어떻게 슬라이드 바꿀지 코드를 구현했다. .quote-slider { position: relative; ..

앞서 view파일로 값을 보내주었으니 이제 값을 받아서 view파일에서 어떻게 처리하는지를 정리해보자  def manage_my_posts(request): selected_posts = request.POST.getlist('selected_posts') if request.POST.get('action') == 'delete': if selected_posts: Post_information.objects.filter(pk__in=selected_posts).delete() elif request.POST.get('action') == 'change_category': new_category = request.POST.get('new..

my_post라는 공간은 내가 작성한 글을 좀더 편리하게 정리하고 관리할 수 있는 공간이다.  그렇기에, 직관적으로 좀 더 빠르고 간편하게 처리할 수 있는 기능이 필요할 것이라고 생각을 했다. 각 게시물 앞에 체크박스를 두고 선택된 게시물을 일괄 삭제하거나 카테고리명을 바꿀 수 있게 한다면 직접 수정 영역에 들어가서 일일히 수정하는 것보다 간편할 것 같다고 생각했다.  게시물이 조건문으로 나열이 되기 때문에 위의 코드를 추가해서 각 게시물 앞에 체크박스를 만들어주었다. 결국 삭제나 카테고리를 변경하기 위해서는 view에 접근을 해야 한다. 그러기 위해서는 form을 사용해줘야 하는데 원래 삭제하는 기능 한가지만 있는 함수에 값을 보내려고 했다. 간단히 말해, delete_my_post 라는 view함수를..

작성 글 화면을 만들어가는 과정에서 기존의 오류를 찾아낼 수 있었다. 정렬 버튼을 사용할때 이미지 경로가 제대로 전송이 되고 있지 않다는 사실이다.  이 부분을 해결하기 위해 세션에 저장을 해야하는 것인지 아니면 이런 경우 사용하는 장고의 특정 함수가 있는지 구글링을 해보았다. 영 탐탁찮은 코드 뿐이었고 하나하나 코드를 되짚어가면서 해결책을 생각해보았다. 그 결과 아주 간단한 문제라는 것을 깨달았다 정렬 버튼을 누르면 post_sort함수가 실행이 되는데 그곳에 게시글만 전송해주는 context만 있고 프로필이미지의 경로를 보내주는 값이 없었던 것이다.  user_id = request.session.get('user_id') try: user_profile = UserP..

이미지를 바꾸는 문제는 잘 해결했는데 이미지가 버튼의 사이즈에 맞지 않는 문제가 발생했다.  그래서 이미지 자체를 resize하면 된다고 생각해서 코랩에 들어가서 아래와 같이 코드를 짰다. from PIL import Imageimport matplotlib.pyplot as plt# 이미지 경로image_path1 = '/content/sample_data/like_button.png'image_path2 = '/content/sample_data/liked_button.png'image1 = Image.open(image_path1)image2 = Image.open(image_path2)new_size = (100, 50) # 예시: 100x100 픽셀resized_image = image1.re..

{% if comment_user in like_user %}liked{% endif %} 위의 코드를 설명하기 위해서는 전체적인 조건문을 간단히 설명해야 한다.  {% if comment_user in user_check %} {% csrf_token %} 좋아요좋아요 수: {{ like_count }} ...... 위와 같은 구조를 가지고 있다. user_check는 모든 회원의 정보가 들어있는 리스트이다. 그 안에 comment_user의 값이 있을 경우 좋아요 버튼을 클릭하고 댓글을 작성할 수 있게 만들어 두었다. 이 부분을 이용하면 좋아요 버튼도 문제없이 구현할 수 있을 것 같았다. 그러기 위해서는 좋아요를 ..

프로필 이미지를 추가하면서 media에 이미지를 저장할 수 있게 만들어 두어서 훨씬 수월하게 진행했다. 어제는 이미지를 추가하는 것에 성공했으니 이제 이미지를 클릭했을때 새로운 이미지로 변환이 되게 구현을 하고 싶었다.   event.preventDefault(); // 기본 폼 제출 방지 const likeBtn = document.getElementById('like-btn'); // 버튼의 배경 이미지 변경 if (likeBtn.style.backgroundImage.includes('like_button.jpg')) { likeBtn.style.backgroundImage = "url('...liked_button.png')"; // 눌렀을 때 이미지 } els..

이제 ajax에서 url로 연결한 뷰함수를 작성할 차례이다  @csrf_exempt # CSRF 보호를 비활성화 (API 엔드포인트에 필요할 수 있음)def post_upload_image(request): if request.method == 'POST' and request.FILES.get('image'): image = request.FILES['image'] fs = FileSystemStorage() filename = fs.save(image.name, image) file_url = fs.url(filename) file_url_with_book = f"/book/media/{filename}" return ..

어제 readimage함수가 실행이 된다고 하고 글을 마무리 지었다. const readImage = function () { const file = this.files[0]; const formData = new FormData(); formData.append('image', file); // AJAX 요청 $.ajax({ url: "{% url 'post_upload_image' %}", // 이미지 업로드 URL type: 'POST', data: formData, processData: false, // FormData 객체를 처리하지 않도록 설정 contentType: false, // 기본 콘텐츠 타입을..