sorecord 님의 블로그

프로필 이미지를 추가하면서 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..

좋아요 버튼에 이미지를 추가시켜서 인스타그램 좋아요 버튼 처럼 구현을 하고 싶었다. 좋아요기존 버튼에 id를 만들어주고   .like-btn{ background-image:url('.../like_button.png'); width: 100px; /* 버튼 너비 */ height: 50px; border: none; border-radius: 10px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* 그림자 효과 */ transition: transform 0.2s } .like-btn:hover { transform: scale(1.1); /* 마우스를 ..

이제 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, // 기본 콘텐츠 타입을..

tinymce를 사용해서 게시글을 저장하는 방법을 사용했다.  글 굵기나 글씨체 간격, 선 긋기, 다양한 기능이 포함이 되어있는 툴이었다. 이제 이미지를 업로드하는 기능을 추가해주려고 한다.  tinymce.init({ selector: '#content', // 사용할 텍스트 영역의 id plugins: image_code, //plugins: 'image code', license_key: 'gpl', toolbar_mode: 'floating', file_picker_types: 'image', plugins을 image_code로 바꿔주니까 insert부분에 이미지를 추가할 수 있는 기능이 생겼다.  하지만 내가 원하는 모습이 아니어서 직접 새로 만들어줘야 겠다 ..

정보 박스가 고정이 되어있어서 스크롤을 내릴때 같이 내려올 수 있게 위치정보를 바꿔주는 자바스크립트 코드를 구현했다.  window.addEventListener('scroll', function() { const shortcutBox = document.querySelector('.shortcut-box'); shortcutBox.style.top = (window.scrollY + 20) + 'px'; // 스크롤에 따라 박스 위치 조정}); shortsubBox의 top값을 스크롤 할때 변경되는 위치값과 20을 더해서 같이 내려가게 구현했다.  메인화면에는 sidebar 부분에 단축키 박스를 위치시켰다.    로그인 컨테이너 아래에 위치할 수 있게 배치했다..

게시글에서 글을 보다가 마우스로 움직이는 것이 순간 너무 귀찮아져서 단축키 기능을 만들면 좋을 것 같다는 생각이 들었다. 게시글 내부에서 바로 home으로 갈 수 있는 단축키는 1, 맨 아래로 스크롤을 내리는 키는 u, 맨 위로 스크롤을 올리는 것은 o로 설정을 했다. 코드는 아래와 같이 구현을 했다.  function goHome() { window.location.href = '/book'; // 홈 화면 URL (예: '/')}function scrollToBottom() { window.scrollTo(0, document.body.scrollHeight); // 페이지 가장 아래로 스크롤}function scrollToTop() { window.scrollTo(0, 0); ..

이미지를 출력이 성공적이다. 이제 위치만 수정해주면 된다.  아무렇게나 위치하고 있는 이미지를 닉네임 바로 옆에 위치를 시키고 싶었다. 가장 먼저 시도했던 방법은 margin을 이용하는 것이었다.  alt="Profile Picture" style="cursor: pointer; width: 30px; height: 30px; border-radius: 30%; margin-right: 500px; " > 오른쪽 margin을 큰 값으로 주면서 위치를 옮겼다. 잘 해결된줄 알았는데 문제는 대댓글을 잘성하면서 생겼다.댓글보다 한 칸 들여써지는 대댓글에 margin 500은 이미지가 닉네임 영역을 침범하게 했다. 이 방법은 아니겠다 싶어서 다른 방법을 고민한 것이 닉네임과 이미지를 div로 묶는..

생각하지 못한 문제가 발생했다.  '가'회원과 '나' 회원이 있다고 하자.가 회원으로 접근했을때 나 회원의 프로필 이미지가 보이지 않고 가 회원의 프로필 이미지가 보이는 문제가 발생했다. 어떻게 이 문제를 해결을 해줄지 고민하다가 아래 같은 방법을 사용했다. try: user_profile = UserProfile.objects.all()except UserProfile.DoesNotExist: user_profile = None UserProfile의 모든 값을 받아서 post_detail로 넘겼다.  그리고 반복문을 사용해서 댓글을 작성한 작성자와 반복되어 들어오는 UserProfile의 유저값이 일치할때만 이미지를 출력하는 코드를 구현했다. {% for profile in ..

어제 생겼던 오류를 해결할 방법은 어렵지 않았다. 새로 만든 함수를 사용을 해주는 것이 아닌 기존에 사용하던 함수를 이용해주는 방법이었다.  user_id = request.session.get('user_id') try: user_profile = UserProfile.objects.get(user_id=user_id) except UserProfile.DoesNotExist: user_profile = None # 프로필이 없으면 None으로 설정 context = { ...... 'user_profile':user_profile, } 그 후 post_detail에서 user_profile값을 comment_templ..