TIL 052623

https://hianna.tistory.com/299

[HTML] 공백 삽입하기 (띄어쓰기)

댓글과 ❤️가 딱 붙어있는게 안 이뻐서 스페이스를 여러번 눌렀는데 간격 조절이 안됐다.

 

html 파일에서 블랭크를 여러개 입력해서 간격을 벌려도 실제로 보이는 띄어쓰기는 무조건 1칸만 나온다.

 

HTML에서 여러개의 공백을 표현하고 싶다면
표현하고자 하는 공백의 갯수만큼   를 추가해 주면 된다.

nbsp는 'Non-breaking Space'의 약자이다.

 

<h6 class="card-text" align="right">댓글 ${article.comment_count}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;❤️ ${article.like_count}</h6>

---

https://www.phpschool.com/gnuboard4/bbs/board.php?bo_table=qna_html&wr_id=104148 

WWW.PHPSCHOOL.COM

아티클의 카테고리 정보를 받아와서 수정하기 페이지가 로드될 때 해당 카테고리를 selected로 만들어주기

for문 파이썬과 조금 다르다.

 

카테고리가 총 5개니까 검색해서 찾은 코드의 for( i=0,j=ele.length; i<j; i++ )를 for( i=0, j=5; i<j; i++ )로 바꿔서 적용했는데 안됐다.

이것 저것 바꿔보다가 for( var i=0, j=5; i<j; i++ )로 하니까 됐다.

나중에 카테고리가 변경되긴 하는데 값이 이상하다는걸 발견해서 최종적으론 for( var i=1, j=6; i<j; i++ ) 이렇게 쓰니까 내가 원하는대로 됐다.

---

https://aosceno.tistory.com/487

첨부파일 input type="file" 커스텀 CSS 및, 첨부파일 추가, 파일명 변경, 첨부파일 삭제(DOM 삭제) - clone

https://blog.naver.com/PostView.nhn?blogId=lee-il-hoon&logNo=221539823382 

input[type=file] 커스텀하기

https://ofcourse.kr/html-course/span-%ED%83%9C%EA%B7%B8

HTML <span> 태그 - ofcourse

원래는 기존 아티클의 이미지 파일명을 input안에 넣어주려고 했는데 input 밑에 span으로 표시해주게 했다.

---

https://aljjabaegi.tistory.com/127

자바스크립트 문자열 자르기 javsScript slice(), subString(), subStr() method 사용법

https://gent.tistory.com/414

[JavaScript] 문자열 자르기 (substr, substring, slice)

이미지 파일명 앞의 경로를 슬라이스할 때 .slice(23)을 해줬다.

---

https://opentutorials.org/module/2919/22904

location.href 와 location.replace 차이점 - JavaScript Tips

게시글을 수정한 후 뒤로가기 눌렀을 때 이전 게시글 정보가 보이지 않도록 location.replace()를 사용

---

https://min-kyung.tistory.com/30

[Javascript] 페이지네이션 구현하기

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/parseInt

parseInt() - JavaScript | MDN

parseInt는 정수 값을 반환하기 위해 소수점 이하 값을 잘라냅니다. 선행 및 후행 공백은 허용됩니다.

일부 숫자는 6.022e23(6.022 × 10^23)처럼 문자열 표현에 e 문자를 사용하기 때문에, parseInt를 매우 크거나 매우 작은 숫자의 소수점 이하 값을 자르기 위해 사용하면 예기치 못한 결과가 발생할 수 있습니다. parseInt를 Math.floor()의 대체품으로 사용해서는 안됩니다.

 

const page_count = parseInt(article_count / 6) + 1

게시글이 7개일 경우 총 2페이지: ok

게시글이 6개일 경우 총 2페이지: X -> 게시글 수가 6개 이하일 경우 메인페이지에 게시글 로드 안됨.

 

const page_count = Math.ceil(article_count / 6)

게시글 7개 -> 2 : ok

게시글 6개 -> 1 : ok

 

처음 로드할 때 현재페이지:1

next, previous 버튼 누를 때마다 현재 페이지 넘버 바뀌게!

response에 next와 previous가 null인지 체크해서 버튼 생성 또는 삭제

 

...페이지네이션 보류

---

게시글 수정 제목과 내용만 가능한 것 이미지와 카테고리까지 수정 가능하게 완성!

 

문

게시글 수정 시 좋아요가 초기화되는 현상 발견

 

시

포스트맨에서 게시글 수정을 해보니 raw-json으로 제목, 내용만 수정하면 좋아요가 그대로다.

form-data로 이미지까지 수정하면 좋아요가 없어진다.

form-data와 json을 같이 보내기를 시도 -> 실패

https://velog.io/@huewilliams/%ED%8C%8C%EC%9D%BC%EA%B3%BC-JSON-%EB%8D%B0%EC%9D%B4%ED%84%B0%EB%A5%BC-%EB%8F%99%EC%8B%9C%EC%97%90-%EB%B3%B4%EB%82%B4%EA%B8%B0-2%ED%8E%B8-feat.-React-Express-Spring

👨‍💻 2편 React, Express, Spring으로 File과 JSON 동시에 주고 받기

https://stackoverflow.com/questions/50774176/sending-file-and-json-in-post-multipart-form-data-request-with-axios

sending file and json in POST multipart/form-data request with axios

 

해

ArticleUpdateSerializer 생성.

title, content, image, category 필드들만!

 

알

content-type에 따라 어떤 부분이 초기화될 수도 있다.

수정 시리얼라이저를 따로 만드는게 좋다.

 

+ 아티클 수정용 시리얼라이저를 만들고 좋아요가 괜찮은지 테스트 할 때 계속 400 bad request가 뜨면서 안됐는데

headers 부분의 'Content-Type': 'multipart/formdata',를 주석처리하고 보내서 그런거였다.

visual studio code에서 초록색으로 주석처리 되었어도 headers에 그대로 실려서 가는 것 같다.

---

https://www.codingfactory.net/11570

HTML / input / checkbox / 체크박스 만들기

장고 어드민 페이지처럼 기존 이미지 파일을 삭제할 수 있게 만들려고 체크박스를 알아봤으나 html 파일에 그대로 복붙해도 체크박스가 안생긴다.

보류

---

https://ourcstory.tistory.com/158

[JavaScript] 자바스크립트 Dictionary 사용하는 방법

https://velog.io/@tiinto/%EC%95%B1%EA%B0%9C%EB%B0%9C-1%EC%A3%BC%EC%B0%A8-1

Javascript 기초문법-1 변수, 리스트, 딕셔너리

const category_dict = { "1": "한식", "2": "중식", "3": "일식", "4": "양식", "5": "그외" }
    category.innerText = category_dict[response_json.category]

 

수정할 게시글 정보 보여주기에도 적용할 수 있을 것 같다.

---

https://ojji.wayful.com/2013/12/HTML-set-Two-Parallel-DIVs-columns.html

HTML DIV tag: 두개의 영역(그림, 글자, 광고 등)을 나란히 놓기 - float:left/right

카테고리와 작성자가 한 줄에 있으면 더 이쁠 것 같아서 검색해본 결과.

카테고리 div에 style="float: left;"을 추가해주니까 됐다.