48. 내일배움캠프 - 37일차 TIL

---

 

 

TIL

 

📌
오늘 한 일

팀 코드 리뷰
장고 심화 2주 차 완강
게시글 작성, 게시글 전체 보기 기능 구현
자바스크립트 공부 예정

오늘 아침 쪽지시험 보고 바로 장고 2주 차 강의를 들었다.

2주 차 강의를 거의 하루 종일 들은 거 같다.

필기도 하고 스스로 스스로 코드 작성도 하고 모르면 동영상 돌려보고

이런 식으로 해서 시간이 오래 걸리는 거 같다.

2시에 팀 코드 리뷰를 했다. 회원가입, 로그인 부분이었는데

난 기존에 거북이 반에서 배운 것을 토대로 만들어서 오류 수정을 하지 못했다.

다른 사람들 코드를 보니깐 '저렇게도 하는구나 내가 몰랐던 내용은 저렇게 

추가하면 되는구나'라고 느꼈다.

다음에 나도 저렇게 써봐야지라고 느낌

그리고 내일 코드 리뷰할 게시글 작성, 게시글 전체 보기 기능 구현을 했다.

원래 게시글 코드 리뷰라 기능 들이 많았는데 난 2가지밖에 구현을 못했다.

하다가 모르는 점이 있어서 팀원한테 도움을 너무 많이 받았다.

진짜 코드 리뷰가 도움이 많이 된다. 생각해보면 귀찮을 수 있지만 해보는 것과

해보지 않는 건 차이가 큰 거 같다. 

이제 틸 쓰고 자바스크립트 공부해야 한다. 팀 프로젝트 블로그도 써야 하고 

자바스크립트 블로그도 써야 하는데 생각보다 쓸 시간이 없다.(요즘 집중이 안되긴 함)

그래도 이번 주 안에는 써보아야겠다...

 

오류
author = request.author
이렇게 request뒤에 없는 값을 줬음 그래서 오류가 남

해결
author = request.user
request.객체
이 객체들은 아래 주소에서 확인 가능!
https://docs.djangoproject.com/en/4.1/ref/request-response/

 

 

장고 심화 2주 차

 

DRF 프로젝트 세팅

1. 가상환경 만들고 실행
python -m venv venv
source venv/Scripts/activate

2. 장고 다운
pip install django

3. DRF사용하기 위해서 
pip install djangorestframework

4. pip freeze > requirements.txt 해서 텍스트에 다운로드한 리스트들을 넣어줌
(다른 사람이 깃 허브에서 어떤 것을 다운로드하여서 사용했는지 알 수 있음)
다운로드하는 방법
pip install -r requirements.txt

5. 장고 프로젝트 만들기
django-admin startproject '프로젝트이름' .
뒤에 점은 현재 폴더에 프로젝트 생성
접을 제거하면 폴더가 하나 더 생기며 그 안에 생김

6. .gitignore 만들기

7. git init

8. 깃허브에서 레포 만들기

9. git remote add origin '리포트 주소'

10. git add .
git commit -m '커밋 메시지'

11. 깃에 푸시하기
git push origin main

12. 장고 레스트프레임워크를 사용했기 때문에 추가로 해야할 것이 있음
rest_framework를 setting.py에 INSTALLED_APPS에 추가해주기

==================================================

Serializer?
파이썬 데이터를 JSON타입의 데이터로 변환해준다


======Swagger 사용하기========
https://drf-yasg.readthedocs.io/en/stable/readme.html
1. 가상환경 들어가기

2. pip install drf-yasg 설치

3. pip freeze > requirements.txt 설치한 거 requirements.txt 반영

4. settings.py > INSTALLED_APPS에 추가해주기
   'drf_yasg',

5. urls.py > 

from django.contrib import admin
from django.urls import path, include, re_path #re_path 추가한 부분

#아래 3개 추가한 부분
from rest_framework import permissions
from drf_yasg.views import get_schema_view
from drf_yasg import openapi

#추가한 부분
schema_view = get_schema_view(
    openapi.Info(
    title="Snippets API",
    default_version='v1',
    description="Test description",
    terms_of_service="https://www.google.com/policies/terms/",
    contact=openapi.Contact(email="contact@snippets.local"),
    license=openapi.License(name="BSD License"),
    ),
    public=True,
    permission_classes=[permissions.AllowAny],
)

urlpatterns = [
    path('admin/', admin.site.urls),
    path('articles/',include('articles.urls')),

    #아래 추가한 부분
    re_path(r'^swagger(?P<format>\.json|\.yaml)$', schema_view.without_ui(cache_timeout=0), name='schema-json'),
    re_path(r'^swagger/$', schema_view.with_ui('swagger', cache_timeout=0), name='schema-swagger-ui'),
    re_path(r'^redoc/$', schema_view.with_ui('redoc', cache_timeout=0), name='schema-redoc'),
]
=================================

 

====클래스형 뷰====
articles > views.py
https://www.django-rest-framework.org/tutorial/3-class-based-views/
아래 함수를 클래스형 뷰로 바꾼다.

@api_view(['GET','POST'])
def articleAPI(request):
    if request.method == 'GET':
        articles = Article.objects.all()
        serializer = ArticleSerializer(articles,many=True)
        return Response(serializer.data)
    elif request.method == 'POST':
        serializer = ArticleSerializer(data = request.data)
        if serializer.is_valid():
            serializer.save()
            return Response(serializer.data, status=status.HTTP_201_CREATED) #status : 상태코드
        else:
            print(serializer.errors)
            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)


1. from rest_framework.views import APIView #임포트

2. class ArticleList(APIView) 만들어 준 후 그 안에다 작성

class ArticleList(APIView):
    def get(self, request, format=None): #GET부분을 복붙하기
        articles = Article.objects.all()
        serializer = ArticleSerializer(articles,many=True)
        return Response(serializer.data)

    def post(self, request, format=None): #POST부분 복붙하기
        serializer = ArticleSerializer(data = request.data)
        if serializer.is_valid():
            serializer.save()
            return Response(serializer.data, status=status.HTTP_201_CREATED) #status : 상태코드
        else:
            print(serializer.errors)
            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

3. views.py를 변경했으니 urls.py도 변경해줘야 함
urls.py > 

path('',views.articleAPI, name='index'), #기존에 경로
path('',views.ArticleList.as_view(), name='index'), #바뀐 경로



======스키마 틀 보여주기======
views.py >
from drf_yasg.utils import swagger_auto_schema #schema 데이터베이스 틀을 보여준다

원하는 곳 함수 위에 작성
 @swagger_auto_schema(request_body=ArticleSerializer)

===========================

 

 

Fetch 사용하기
https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch

 

======CORS에러=====
CORS 에러 :
별도에 origin이 다른 곳 주소와 포트

오류 해결하기 

1. python -m pip install django-cors-headers 설치

2. settings.py > INSTALLED_APPS에 
"corsheaders", 추가해주기
 
3. settings.py > MIDDLEWARE 에 (순서중요)
"corsheaders.middleware.CorsMiddleware", #추가
"django.middleware.common.CommonMiddleware", <- 이 코드 위에 추가해주기

4. settings.py > CORS_ALLOW_ALL_ORIGINS = True 추가

=================

 

 

====프론트와 백엔드 연결====

index.js 를 만든 후 작성

window.onload = async function loadArticles(){
    const response = await fetch('http://127.0.0.1:8000/articles/', {method:'GET'})

    response_json = await response.json()
    console.log(response_json)

    const articles = document.getElementById("articles")

    response_json.forEach(element => {
        const newArticle = document.createElement("div")
        newArticle.innerText = element.title
        articles.appendChild(newArticle)
    });
}


index.html에 <script src="index.js"></script> 스크립트 경로 주기

=====================