📝 오늘 배운 것

📌 django-rest-framework를 복습해보자!

• 이전에 drf를 처음 학습할 때는 serializer로 db에 있는 data를 json type으로 변환해서 프론트에 보여주는 것으로 알고 있었지만 왜? serializer를 사용해야 하는지 정확히 이해하지 못하고 사용법만 익혀 사용했던 것 같다.

  이번에 drf를 복습하면서 drf에서 response가 dictionary 형태로만 전달해줄 수 있다는 것을 이해했고, ORM으로 dictionary 형태로 매번 직접 입력하여 보내주는 것은 매우 비효율적이라는 것을 알았다.
  그래서 데이터의 type을 쉽게 변환하여 주고 받기 위해 serializer를 사용하는 것이다.

• serializer에 객체를 넣고 response로 전달해줄 때 왜 serializer.data or error를 붙이는지
  잘 모르고 사용을 했었는데 serializer = serializername(object)로 serializer를 정의하고 response에 serializer만 넣게되면 AssertionError가 발생한다.

  이유는 serializer로 data type을 변환하고 표현을 해야하는데 표현인 .data나 .error가 빠진 것이다.
  따라서 serializer를 정의하고 response로 내려줄 때는 serializer.data or error를 붙여서 사용한다.

• serializer에 object를 넣을 때 여러개의 object가 담긴 QuerySet을 넣고 serializername(object)을 response에 전달하면 AttributeError가 발생한다.
  여러개의 objects를 serializer에 넣을때는 serializername(object, many=True)로 many=True 속성을 넣어주면 리스트 형태로 data를 전달해준다.

• 역참조할 모델을 ORM 할 때는 역참조할 대상 필드의 object.related_name.all or add or remove 등으로 ORM을 할 수 있고, related_name이 설정되지 않았을 경우 역참조 대상.내 모델_set으로 ORM을 할 수 있다.

# 특정 article이 가지고 있는 모든 comment
 article = get_object_or_404(Article, id=article_id)
 
 # aritlce: 위에서 가져온 특정 article
 # comment_set : comment모델의 defaul related_name(대소문자 구분없음)
 comment = article.comment_set.all()
 
 	# 특정 article이 가지고 있는 모든 like
 	article = get_object_or_404(Article, id=article_id)
 	
    # aritlce: 위에서 가져온 특정 article
 	# like: like 필드의 related_name
 	if request.user in article.like.all():
 		article.like.remove(request.user)

📌 JavaScript로 서버에 데이터 주고 받기

• JS로 서버에 데이터를 주고 받는 것을 처음 학습할 때 낯설기도 하고 python이 아닌 문법으로 사용하다보니 무작정 따라치기만 하고 코드를 외우려는 생각 때문일까 오히려 더 복잡하게 다가왔다.

  로그인과 로그아웃 기능을 구현할 때는 코드를 작성하는 방법 하나하나를 외우지 말고 흐름과 어떻게 보낼건지만 생각하면 될 것 같다.

  우선 id와 pw의 값을 각각의 변수에 담고 fetch 요청을 보낼건데 fetch가 어떤 구조인지, 어떻게 사용하는 건지는 사용할 때 구글링해서 찾아오도록 하고, 핵심은 localstorage에 사용자를 인증할 토큰을 get or set or remove 할지 생각을 먼저 해야할 것 같다.

  로그인을 할 때는 localstorage에 토큰들이 없을테니 localstorage.setItem(저장할 이름, 넣을 값)으로 저장하면되고 로그아웃을 할 때는 토큰들이 이미 등록되어 있으니
  localstorage.removeItem("지울 토큰의 이름")으로 지워주기만 하면 로그아웃 기능은 끝이다.

• JS에서 localstorage에 있는 값을 가져오기 위해서는 parse를 해야한다.
  팀 프로젝트를 할 때 payload에 있는 user_id를 가져오기 위해서 JSON.parse를 하지 않고 변수에다가 그냥 payload[0] 이렇게나 payload["user_id"] 등으로 인덱싱만 주구장창 시도하고 골치가 아팠었다.

  하지만 그럴 필요 없이 localStorage.getItem(가져올 값)으로 가져온 값을 변수에 담고, 새로운 변수를 만들어서 JSON.parse(가져온 값을 담은 변수)로 JSON 타입의 데이터를 object 형태로 변환하고난 후 가져온 값을 담은 새로운 변수.찾는 값을 입력하면 된다.

  // 로컬스토리지의 payload를 가져와 payload 변수에 담음
  const payload = localStorage.getItem("payload"); 
  // 가져온 payload를 JSON.parse에 넣어 변환된 데이터를 payload_parse 변수에 담음
  const payload_parse = JSON.parse(payload)
  // 가져다 사용할 때는 변환된 데이터가 담긴 변수.찾고있는 데이터를 입력하여 원하는 데이터를 가져올 수 있다.
  console.log(payload_parse.email)