2024/09 30

개발 일지 27 - 프로필 이미지 추가 2

어제는 프로필 화면 구현과 setting.py와 url.py로 이미지에 연결할 경로까지 만들어 주었다. 오늘은 들어온 이미지를 view.py에 보내는 순간이다.  def upload_profile_pic(request): user_id = request.session.get('user_id') print(f"User ID from session: {user_id}") if request.method == 'POST' and request.FILES['profile_pic']: profile_pic = request.FILES['profile_pic'] fs = FileSystemStorage() filename = fs.save(profile_pic..

장고 2024.09.10

개발 일지 26 - 프로필 이미지 추가

이미지를 추가하는 작업을 하는 과정은 생각만으로 복잡할 것 같아서 미뤄왔던 작업이다. 일단 장고에서 이미지를 어떻게 가져올 수 있는지 부터 알아야 한다. setting.py에 추가할 요소인 아래 2 요소에 대해 먼저 알아야 한다. MEDIA_URL: 미디어 파일에 접근하기 위한 URL 경로를 설정. 사용자가 업로드한 파일을 웹에서 접근 할 수 있게 한다.MEDIA_ROOT: 실제로 미디어 파일이 저장될 파일 시스템의 경로를 설정. 사용자가 업로드한 파일은 이 경로에 저장된다.MEDIA_URL = '/media/' # 미디어 파일에 접근하기 위한 URLMEDIA_ROOT = os.path.join(BASE_DIR, 'media') # 실제 파일이 저장될 경로 경로를 저장하는 방법은 다양하겠지만 난 os..

장고 2024.09.09

개발 일지 25 - 깃과 vscode 연결

장고를 맨 처음 시작할 때 vscode와 깃을 연결했다. 하지만 그때는 블로그에 글을 적지 않았을 때라서 기록으로 남기지 못했다.  그래서 이번에 새로운 폴더를 만들고 깃과 vscode를 연결하는 과정을 기록해두려고 작성한다. 일단 C:/경로에 새로운 폴더 파일을 만들어주었다. new 폴더라고 하자. 1. vscode에서 new 폴더를 선택한다. 2. 터미널 버튼을 클릭한다.  3.  git 사이트에서 저장소를 만들고 그곳에 적혀있는 그대로 따라하면 된다.  아래 코드는 new 폴더의 터미널에 입력을 하면된다. echo "#memo" >> README.mdgit init #터미널에 입력을 해주면 된다.git commit -m "first commit" #-m을 무조건 적어줘야 함 안 적었다가 오류가 발생..

git 2024.09.08

개발 일지 24 - 게시글 작성시 글자 크기,굵기.. + TinyMCE

게시글을 작성할때 티스토리처럼 글씨 굵게 만들고 크기도 자유롭게 키울 수 있는 코드를 짜려고 했다. 자바 스크립트의 execCommand라는 함수를 사용하려고 했다. 내가 원하는 영역을 선택했을때 그 부분만 글씨의 크기를 키우고 줄일 수 있는 것이다.  그렇게 코드를 짜다가 TinyMCE라는 것을 알게 되었다.  TinyMCE는 WYSIWYG (What You See Is What You Get) 에디터이다. 이 뿐만 아니라 Quill, CKEditor이 있다. 외부에 있는 에디터를 사용을 해보는 것이 처음이라 지금껏 열심히 짜두었던 코드에 내가 모르는 어떤 문제가 생기면 어떡하지? 하는 마음으로 사용을 하지 않으려 했다. 하지만 막상 사용해보니까 문제가 생길 부분은 없었고 잘 동작하는 것을 확인할 수 ..

장고 2024.09.07

개발 일지 22 - 페이지 이동

페이지를 이동할때 다른 사이트를 보면 다음, 이전 버튼만 있는 것이 아니라 직접 숫자를 입력을 해서 해당 번호 페이지로 넘어가는 기능이 있다. 똑같이 구현을 하고 싶어서 어떻게 해야 할지 고민을 했다.  form 형식으로 보내서 구현을 해야 하나? 아니면 하나씩 다 적는 하드 코딩을 해야 할까?고민 끝에 자바 스크립트 코드를 이용하면 훨씬 간단해진다는 것을 알았다.   이동 잘못된 입력입니다! 위와 같이 코드를 만들어준다. input에 최소 최대 값을 정해준다. document.getElementById("movePageBtn").addEventListener("click", function() { var input = document.getElementById("..

장고 2024.09.05

개발 일지 20 - 랭킹 (조회수) 구현

index.html 메인파일이름이다. 이곳은 어제 나누어둔데로 content영역과 sidebar영역으로 나누어져있다.  sidebar 아래에 조회수 랭킹 5순위를 실시간으로 나열을 해주는 코드를 구현하고자 했다.  {% for post in rank %} {{ post.title }} 조회수: {{ post.views }}{% endfor %} ranking_list.html을 만들어주었다. 간단히 rank 값만 받아오면 리스트 형식으로 5순위를 알려줄 것이다. 첨에는 post_detail을 사용을 하면 될 것이라고 생각을 했다. 짧은 생각이었던게 post_deatil은 말 그대로 게시물을 클릭하고 게시물 안에서 사용될 값을 보내줄때 사용을 하는 곳이었다. ranking_update라는 새로운..

장고 2024.09.03

개발 일지 19 - html 메인 파일 수정

아무것도 모르는 상태에서 이 프로젝트를 실행했다. 그러다 보니 html구조가 뒤죽박죽으로 섞여있었다. body를 헤더 부분과 content부분으로 나누지도 않고 하나로 통합한 상태로 사용을 하고 있었고 content부분을 나누지도 않았으니 자연스레 content내부도 각 요소들이 쪼개지지 않은채 중구난방으로 사용이 되고 있었다. 다른 커뮤니티 사이트를 f12를 누르면서 html의 구조를 확인한 후 내 코드가 좀 잘 못되었구나 라는 사실을 깨닫고 수정에 들어갔다. 일단 body를 header부분과 content_body부분으로 크게 나누었다.   content_body내부에서 main_content로 한 번더 묶어주면서 margin값을 넣어주었다.main_content내부를 content와 sidebar로..

장고 2024.09.02

개발 일지 18 - 카테고리 별 분류

간단하게 카테고리를 1,2로 나누었다. 게시글을 나열하고 출력하는 부분은 다 구현을 했으니 값을 받아올때 카테고리 별로 나누어서 받아오면 된다고 생각했다.  category = request.GET.get('category','all') # 선택된 카테고리 가져오기 print(category) if category == 'all' or category == '': post_list = Post_information.objects.all().annotate(like_count=Count('like_users')).order_by('-created_at')#좋아요도 표시 else: post_list = Post_information.objects.filter(ca..

장고 2024.09.01