본문 바로가기

TIL

TIL 063023

https://stackoverflow.com/questions/15617595/paginate-relationship-in-django-rest-framework

 

Paginate relationship in Django REST Framework?

We are using Django REST Framework for our API and we have a need to paginate relationship fields that return multiple items. To demonstrate using examples similar to those in the documentation: ...

stackoverflow.com

이게 내가 원하는 것과 제일 가까운 코드 같아 보이는데 적용이 안된다 ㅜㅠ

아직 리뷰가 그렇게 많지 않아서 그냥 다 불러와도 괜찮을 것 같긴 한데 그래도 spot은 spot대로, review는 review대로 get 요청을 보내서 pagination을 할 수 있도록 했다.

SearchFilter로 spot__id 필드를 검색하도록 했다.

 

그렇게 백엔드를 정한 후 화면 구현.

 

spot_review들의 좋아요를 따로따로 작동하도록 하는게 조금 복잡했다.

트립어드바이저를 참고하려고 개발자 도구로 살펴봤지만 좋아요 하트 버튼들이 다 똑같았다.

나는 좋아요 아이콘 요소들을 모두 review의 id로 구분해서 개별 동작하도록 했다.


https://live-for-myself.tistory.com/54

 

[JavaScript] innerHTML / innerHTML과 append()의 비교

innerHTML은 HTML의 요소로 삽입하는 방법 중 하나이다. 다음 예제를 살펴보자. 예제 innerText vs innerHTML hello 추가하기 결과 코드를 뜯어 살펴보자. 1) innerText와 innerHTML의 비교 //대입한 문자열을 html 형

live-for-myself.tistory.com

https://sir.kr/qa/320478

 

xss .innerHtml .inner Text 문제점 > SIR

보안업체로 부터 취약점 보고서를 받았는데 다음과 같습니다. 어디서 어떤 파일을 고쳐야 하는지 제가 하수라 잘 모르겠습니다. 도움 부탁드립니다. <br/> <br/>  <br/> <br/>>상세설명 <br/> <br/>자바

sir.kr

https://m.blog.naver.com/tmondev/221070295102

 

[알쓸신팁-부록] Javascript 성능 저하 방지법

Front 개발을 하다가 작은 실수 하나로 화면의 성능이 확 떨어지게 되는 경우들이 있습니다. 이런 상황을 ...

blog.naver.com

https://velog.io/@coolchaeyoung/Cross-Site-Scripting-XSS

 

Cross-Site Scripting (XSS)

최근 Vanilla JavaScript를 사용하여 과제나 간단한 미니 프로젝트를 자주 하고 있는데 JS를 사용하여 동적으로 DOM 요소를 건드릴 때 간편함 때문에 innerHTML을 사용하는데 이 innerHTML이 XSS 공격에 취약

velog.io

https://velog.io/@bami/Javascirpt-%EC%86%8D%EC%84%B1-%EA%B0%92-%EB%85%B8%EB%93%9C-%ED%85%8D%EC%8A%A4%ED%8A%B8-%EB%85%B8%EB%93%9C

 

[Javascirpt] 속성 값 노드, 텍스트 노드

지난 포스트들에서는 요소를 다루는 법에 대해 알아봤습니다. 노드 취득, 워킹을 통해 속성 값도 또한 다룰 수 있는데요. 오늘은 어떤 방법으로 속성 값을 다룰 수 있는지에 대해 알아보겠습니

velog.io

input에 html을 입력하면 element를 생성하고 event를 설정할 수 있다는걸 발견.

innerHTML을 appendChild로 바꿔서 해결할 수 있다는 말을 들었다.

검색해보니 innerText로도 해결 가능해서 그렇게 바꿔줬다.

innerHTML과 appendChild는 속도 차이 때문에 여러 요소들을 반복적으로 많이 만드는건지 아니면 많은 요소들을 한번에 만드는건지 그런 경우에 따라 장단점이 있는 것 같다.


https://sbarrys.tistory.com/115

 

OAuth2 로그인 scope 여러개 지정하기 복수

아래에 보면 access token을 받아오기 위해 꼭 지정해야하는 네가지가 있다. response_type, client_id, redirect_uri, scope 여기서scope란 인증받은 사용자에게 구글에서 제공해주는 사용자의 정보 범위인데 나

sbarrys.tistory.com

https://zxchsr.tistory.com/314

 

[Google] Oauth 로그인 인증 scope 여러개 설정 방법

■ Google Oauth 로그인 인증 scope 여러개 설정 방법 액세스 토큰(access token) 발급을 위해서는 scope, response_type, redirect_uri, client_id 이 4가지는 반드시 설정해야 함 이 중 scope 은 구글에서 제공해주는 인

zxchsr.tistory.com

https://velog.io/@usreon/google-%EC%86%8C%EC%85%9C-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EC%82%BD%EC%A7%88-%EA%B3%BC%EC%A0%95#1-2-scope%EA%B0%80-%EB%AD%94%EA%B0%80%EC%9A%94

 

0Auth - 구글 소셜로그인 기능 구현

Store Login.js sever 이렇게 했을 때 값이 안받아졌다 scope의 주소가 내가 설정한 데이터를 볼 수 있게 해준다

velog.io


https://namu.wiki/w/XSS


spot의 리뷰들을 가로줄로 구분하기 위해 가로줄, 형제요소, lastchild 등을 검색해봤다.

https://programming4myself.tistory.com/34

 

📌 CSS 연결 선택자 정리!

하위 선택자 : 모든 하위요소에 스타일 적용 상위요소 하위요소 지정한 모든 하위 요소에 스타일 적용하기. 자손 선택자 자식 뿐만이 아니라 손자, 손자의 손자까지 모두 적용된다 자식 선택자 :

programming4myself.tistory.com

https://blog.wincomi.com/203

 

CSS 기초 강좌 - 10강. 테두리(border)를 사용해보자.

border-width 1px 2px 3px 4px 5px 6px 7px 8px 9px 10px 20px border-color skyblue border-stylenone dotted dashed solid double groove ridge inset outset * http://www.w3schools.com/css/css_border.asp 예제) border-style:soild;그런데 이렇게 쓰기는 너

blog.wincomi.com

https://hianna.tistory.com/701

 

[HTML/CSS] hr 태그로 가로줄 긋기 (굵기, 길이, 색깔, 모양, 정렬 등)

HTML의 태그를 이용하여 가로줄을 긋고, CSS를 활용하여 가로줄의 가로 세로 길이, 색깔, 모양 등을 변경하는 방법을 정리하였습니다. HTML의 hr 태그는 Horizontal Rule의 약자로, HTML에서 가로줄을 생성

hianna.tistory.com


줄바꿈: /n

https://hianna.tistory.com/460

 

[Javascript] 문자열 줄바꿈하는 2가지 방법 (여러줄 표현하기)

Javascript의 문자열에서 줄바꿈을 표현하는 2가지 방법을 소개합니다. escape 문자 사용하기 템플릿 리터럴(Template literals) 사용하기 1. escape 문자 사용하기 const str = 'a\nb\nc\n'; document.getElementById("result

hianna.tistory.com


https://www.freecodecamp.org/korean/news/cssro-mueosideun-jungang-jeongryeolhaneun-bangbeob-div-tegseuteu-deung/

 

CSS로 무엇이든 중앙 정렬하는 방법 - Div, 텍스트 등

> 중앙 정렬은 CSS에서 가장 어려운 것 중 하나입니다. 방법 자체를 이해하는 것은 그다지 어렵지 않지만, 너무나도 다양한 방법이 존재한다는 사실이 중앙 정렬을 어렵게 합니다. 중앙 정렬 하는

www.freecodecamp.org

중앙 정렬

text-align:center;은 요소 안에 있는 것들을 중앙 정렬 시키는건줄 알았는데 그 요소 자체의 중앙 정렬이 된다.

'TIL' 카테고리의 다른 글

TIL 070423  (0) 2023.07.05
TIL 070323  (0) 2023.07.04
TIL 062923  (0) 2023.06.30
TIL 062823  (0) 2023.06.29
TIL 062723  (0) 2023.06.27