전체 글

전체 글

    [Django] React -Django cors

    리액트에서 Axios 로 Django(DRF) url 로 값을 받아오려는데 문제가 생겼다. No Access-Control-Allow-Origin' 관련한 오류가 바로 Cross Domain 이슈!!!! 이를 해결하기위해서는 서버에서 접속을 허용한다고 설정을 해줘야한다고 한다! django cors header 라이브러리 설치하자! 먼저 CORS란 뭘까? CORS는 Cross Origin Resource Sharing의 줄임말입니다. 즉, 도메인 주소가 다른 서버에 http request를 전송하는 걸 이야기 합니다. 최신 웹 브라우저들이 보안상의 이유로 외부 Host로 접속하는 것을 차단하는 문제를 해결하기 위해 CORS표준이 제안되었고 요즈음엔 거의 일반화 되었습니다. 아하 ! pip install ..

    [REACT] Babel ? webpack?

    create-react-app에 기본적으로 들어있는 babel, webpack .. 가끔 종종 웹페이지 구성시 봤던것들인데 한번알아보기로했다. 깊은 이해보다는 어떤 역할을 하는지 대해 알아보자! Babel 공홈에는 간단하게 Babel is a Javascript complier 라고 적혀있다. Babel의 역할은 transpiling 이다 즉 상위버전의 js 코드로 작성된 문법을 하위 버전의 js 코드 문법으로 바꿔준다. 예를들면 ES6 ,ES7. ... 등으로 작성된 js코드를 -> ES5 로 바꿔준다. 왜 이런 transpiling 이 필요할까..? js 경우 매년 새로운 js 버전들이 나온다 . 이렇게 js 가 매우 빠르게 꾸준히 발전하는것에 반해 브라우저가 그것을 전부 다 지원하지 못하는 경우가 ..

    [REACT] 환경설정

    window 에서 리액트를 설치해보자 ! node js 설치 ! (LTS ) invalueable.tistory.com/117 [Node.js] Node.js 설치 [우분투 리눅스 / Node.js 12버전 기준 ] // build-essential , curl 설치, 설치된 경우라면 생략하면됨. $ sudo apt-get update $ sudo apt-get install -y build-essential $ sudo apt-get install curl $ curl.. invalueable.tistory.com 설치후 npm install --global yarn --global : 전역 설치를 위한 옵션 그리고 설치 확인 . npm 과 yarn이 뭘까 ?? npm( node package mana..

    [DRF] serializer , form ..

    DRF( Django rest framework) 에서는 직렬화(serializer) 기능이있다. 직렬화에대하 한번 알아보자! 모든 프로그래밍 언어의 통신에서 데이터는 반드시 문자열로 표현되어야한다! 예를 들자면.. 송신 : 객체를 문자열로 변환하여, 데이터전송 -> 직렬화 수신 : 수신한 문자열을 다시 객체로 변환하여 활용 -> 비직렬화 각언어에서 모두 지원하는 직렬화 포맷에는 대표적으로 json , xml 이있다 ! DRF 에서는 ModelSerializer 를 통해 Json 직렬화 를 한다. Serializer/ModelSerializer는 기존 장고에서의 Form/ModelForm 과 비슷한느낌이다. 코드로 보여주자면.. 굉장히 비슷하다 결론은 공통점은 폼필드 지정 or 모델로부터 읽어온다 차이점..

    [Django] django-debug-toolbar

    https://django-debug-toolbar.readthedocs.io/en/latest/ Django Debug Toolbar — Django Debug Toolbar 3.0a2 documentation © Copyright 2020, Django Debug Toolbar developers and contributors Revision 88759a74. django-debug-toolbar.readthedocs.io 장고 디버깅에 도움을 줄수있는 debug_toolbar 를 사용 하기로했다. 이렇게 편한게 있는지 몰랐네;; Django의 버전부터, cpu, 설정, 헤더, 요청, sql, 정적 파일, 템플릿, 캐시, 신호(signal), 로깅 .. 등등 많다! 다만 주의사항이 1. 템플릿에 반드..

    [Python] 아나콘다 환경에서 쥬피터 노트북 사용

    장고 사용도중 쿼리 확인이나 데이터 확인을위해 쉘을 사용했는데 너무 불편해서 쥬피터 노트북을 사용하기로했다. 그리고 데이터 시각화도 언젠가 해복고싶기도하고 ! conda install jupyter 설치하면 jupyter 명령어 사용이 가능하다. jupyter notebook 명령어를 입력하면 창이 뜨는 걸 볼수있다. 오른쪽 위부분에 new 를 클릭하고 python3 를 고르면 새로운창이뜬다. 쿼리를 확인하기위해 다음과 같이 입력했다. 빨간 박스부분은 장고 2.x 버전대는 안적어도되나 3.x 버전부터는 적어줘야지 애러가안뜬다.

    [Django] Static , Media

    static 파일 -다른 프레임워크에서도 비슷한 개념으로 쓰임 -개발 리소스로서의 정적인파일 (js,css,image ...) 개발자를 위한 파일 -앱 , 프로젝트단위로 저장 , 서빙 media 파일 -장고에만 존재 -File/Image Field 를 통해 저장한 모든파일 -DB 필드에는 저장경로를 저장하며 , 파일은 파일 스토리지에 저장 -프로젝트 단위로 저장 ,서빙 Medai 파일 처리순서 1. HttpRequest.FILES 를 통해 파일이 전달. 2. view or form 로직을 통해 , 유효성 검증을 수행 3. FIle/ Image Field 에 경로 를 저장 4. setting.py 에서 MEDIA_ROOT 경로에 파일을 저장 setting.py MEDIA_URL = '/media/' MED..

    [Django] DRF 로그인, 회원가입 [미완]

    로그인 관리를 위해 Django-rest-auth 를 사용한다. 1. pip install django-rest-auth 2. setting.py 에 추가 'rest_auth' token authentication을 통해 구현하기로했다. .. JWT로 구현하기 로 결정했다. 로그인 로그아웃 과정 1. 화면에서 사용자가 email, password를 입력을 한다. 2. 사용자가 입력한 email, password 를 서버로 보낸다. 3. Email, password 가 맞다면 고유한 TOKEN을 발행한다. 4. 발행된 토큰을 response로 보낸다 (front) 5. 토큰을 클라이언트 어딘가에 저장해 놓는다. (cookie or session) 6. 다른 API를 사용할 때마다 header에 TOKEN을..

    [Django] Django RestFramework (DRF)

    지금마음이 급해서.. 중요한것만 정리 1. pip install djangorestframework 설치후 setting.py INSTALLED_APPS에 'rest_framework ' 를 추가해준다 모델생성후 . 2 . serializers.py 작성 # Serializer는 말 그대로 직렬화하는 클래스로서 사용자의 DB안에 # 사용자 프로필 사진, 이메일, 이름, 성별이 있다고 가정하면, # 사용자 모델 인스턴스를 JSON형태 혹은 Dictionary형태로 직렬화 할 수 있다.

    Rest? , Rest Api?

    front(React) back ( Django) 개발중.. 하나 깨달은것이 있다. 내가 이해한게 맞다면. 장고 템플릿으로 front 구현하는것과 리액트 같은 웹프레임워크로 front 구현하는것은 큰차이를 가진다. 완전히 영역에 구분을 두어야한다는것이다. 장고템플릿을 사용할땐 장고에서 form을 만들어서 front에 rendering 해줬지만 리액트는 아니었다. front는 리액트에서 끝내야했다. 장고에서는 요청 ,응답만 해야한다.(정보송수신) 찾아본결과 Django restframework api 를 많이 쓰는것을 볼수있었다 이기회에 . Django restframework api 익힘과 동시에 Rest에 대한 정의도 찾아보기로했다. 1. REST란? ​ Representational status tr..