개발/[시리즈] DRF + React

개발/[시리즈] DRF + React

[DRF / React] 장고 리액트 연동하기 - 8. Django 기초 개념

시리즈 8번째 글입니다. 이번엔 Django과 React를 연동하기 전, 기초적인 Django에 대한 개념 및 몇가지 팁을 이 페이지에 정리해두고자 합니다. 장고 구성 파일 위주로 설명을 작성하겠습니다. 추가적으로 장고에 대한 심화 내용들이 잘 적혀있는 위키독스 하나를 공유합니다 https://wikidocs.net/9828 01) 배포 점검사항 [TOC] # 배포 점검사항 애플리케이션 배포 전에 여러 가지 사항을 점검해야 한다. ## ```manage.py check --deploy``` 명령 Django에서 ... wikidocs.net Settings.py 장고 프로젝트 자체에 대한 여러가지 설정을 작성할 수 있는 파일입니다. ALLOWED_HOST 리스트 안에 있는 도메인에 대해서 접근을 허용합니..

개발/[시리즈] DRF + React

[DRF / React] 장고 리액트 연동하기 - 7. Django 프로젝트 설정하기

시리즈 7번째 글입니다. React에서 보내는 리퀘스트를 받아서 처리해줄 서버를 Django를 활용해서 만들어 볼 예정입니다. 우선 React 와 다른 디렉토리로 들어가주세요. 새로 디렉토리를 만들었다고 생각하고 진행할께요. 저는 backpost라는 디렉토리 안에서 진행할께요. 우선 Django는 Python 언어를 이용하기 때문에 이런 파이썬 라이브러리들을 관리해주는 패키지 매니저인 pip 와 이런 패키지들을 프로젝트에 종속시킬 수 있는 가상환경을 세팅해볼께요. python3 -m venv venv 이렇게 작성하면 새로운 가상환경을 만들 수 있어요. 이후 source ./venv/bin/activate 를 통해서 가상환경을 활성화 해주세요. 이렇게 활성화된 가상환경 상에서 pip 를 통해 장고 패키지를..

개발/[시리즈] DRF + React

[DRF / React] 장고 리액트 연동하기 - 6. 로그인, 회원가입 창 구현(Form)

시리즈 6번째 글입니다. https://www.nextree.co.kr/p8428/ HTML : 폼(form) 이해 폼은 알게 모르게 웹에서 많이 사용합니다. 사용자 의견이나 정보를 알기 위해 입력할 큰 틀을 만드는 데 사용되기 때문입니다. 폼은 입력된 데이터를 한 번에 서버로 전송합니다. 전송한 데이 www.nextree.co.kr 위 링크를 참조했습니다. HTML 작성하기 지난번 게시글( 2022.08.30 - [개발/[시리즈] DRF + React] - [DRF / React] 5. 리액트 Components 와 Props ) 에서 분리한 Login 과 Signup 컴포넌트를 수정해서 정보를 입력하고, 이를 백엔드로 보낼 수 있도록 양식을 만들어 볼 예정입니다. 어떠한 정보를 입력받고, 이를 웹 서..

개발/[시리즈] DRF + React

[DRF / React] 장고 리액트 연동하기 - 5. 리액트 Components 와 Props

시리즈 5번째 글입니다. 이번에는 컴포넌트에 정보를 넘겨주는 방법을 알아볼 예정입니다. https://chanhuiseok.github.io/posts/react-4/ [React] React의 컴포넌트(Component) - 함수형, 클래스형 컴포넌트 컴퓨터/IT/알고리즘 정리 블로그 chanhuiseok.github.io https://chanhuiseok.github.io/posts/react-5/ [React] React의 props 설정하기 컴퓨터/IT/알고리즘 정리 블로그 chanhuiseok.github.io 위 링크를 참조했습니다. Component 시리즈 3강 에서 말씀드렸던 Components 에 대한 개념을 우선 먼저 짚고 넘어갈께요. 컴포넌트는 3강에서 말씀드린대로 리액트를 이루는 ..

개발/[시리즈] DRF + React

[DRF / React] 장고 리액트 연동하기 - 4. 리액트 컴포넌트 이동

시리즈 네번째 글입니다. 이번엔 지난번에 만들어둔 컴포넌트를 이동할 수 있는 방법을 알아보겠습니다. https://velog.io/@kwonh/React-react-router-dom-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0 [React] react-router-dom 시작하기 안녕하세요이번 포스팅은 SPA앱을 만들 때 많이 사용되는 react-router-dom패키지에 대해 알아보겠습니다.create-react-app을 이용해 진행했습니다.react-router - 웹&앱react-router-dom - 웹react-router-native velog.io 위 링크를 참고하였습니다. Link Link 태그는 HTML에서의 a 태그와 같은데요, to 옵션에 붙은 URL로 이동할 ..

개발/[시리즈] DRF + React

[DRF / React] 장고 리액트 연동하기 - 3. 리액트 개별 페이지 구현

시리즈 세번째 글입니다. 이번엔 각 페이지별로 [보드, 로그인, 회원가입, 로그아웃] 의 기능을 각각 나누기 위해 리액트에서 각 페이지를 나누는 방법을 알아보겠습니다. https://velog.io/@kwonh/React-react-router-dom-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0 [React] react-router-dom 시작하기 안녕하세요이번 포스팅은 SPA앱을 만들 때 많이 사용되는 react-router-dom패키지에 대해 알아보겠습니다.create-react-app을 이용해 진행했습니다.react-router - 웹&앱react-router-dom - 웹react-router-native velog.io https://coding-hyeok.tistory.c..

개발/[시리즈] DRF + React

[DRF / React] 장고 리액트 연동하기 - 2. 리액트 프로젝트 세팅하기

들어가기 전에 이 글은 WSL 혹은 Macbook 위에서 돌아갑니다. 터미널에 대한 기초적인 지식을 가지고 있다는 가정 하에 진행되니, 모르시는 분들은 따로 학습을 하시고 오시길 추천드립니다. https://velog.io/@dev_space/React-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0

개발/[시리즈] DRF + React

[DRF / React] 장고 리액트 연동하기 - 1. 기초 개념

Django Rest Framework 와 React 를 연동시키는 시리즈 첫 글입니다. 단순히 연동만 다루는 것이 아닌 Django, React 자체를 어떻게 구성시키고, 테스트를 위한 프로젝트 설정과정을 전반적으로 살펴볼 예정입니다. 이 페이지에는 앞으로 자주 나올 공통 용어들에 대한 간략한 정의 등을 적어보고자 합니다. 수시로 갱신 될 수 있습니다. request : 클라이언트가 서버에게 정보를 (줘라, 받아라, 삭제해라, 갱신해라.. 등등) 요청하는것 response : request를 받은 서버가 클라이언트에게 제공하는 응답. Server : 정보를 제공하는 컴퓨터 Client : 정보를 받는 컴퓨터 FrontEnd : 정보를 "보여주는" 파트 BackEnd : 정보를 "제공하는" 파트 Doma..

Junhyung-Choi
'개발/[시리즈] DRF + React' 카테고리의 글 목록