Dnote
1.Dnote 1. 소개
안녕하세요? 딱히 제가 만든 프로젝트가 대단한 것은 아니지만, 장고와 리액트로 작업을 할때 저는 처음에 삽질을 많이 했는데요, 이러한 삽질을 하며 만들어본 경험을 바탕으로 리액트와 장고로 한줄 노트앱을 만드는 과정을 공유하고자 해서 튜토리얼을 써보게 되었습니다. https://velog.io/@killi8n/Django-React-%EB%A1%9C-%EC...
2.Dnote 2. React / Django 프로젝트 생성.
각 프로젝트 생성 > # Django - Virtual Env 생성 > # Django - Virtual Env 실행 > # django 설치 / project 생성 http://localhost:8000 으로 들어가시면 첫화면을 보시게 될 것 입니다. 다음 글에서는 React 개발 환경 설정 및 구조를 잡아 보겠습니다. 또한 sass 및 redu...
3.Dnote 3 - 1. React - 개발 환경 설정 및 구조 잡기.(sass 설정)
자 이제 프로젝트를 모두 생성했으니, 리액트쪽부터 건들여 볼까요? > # eject 하기 sass를 사용하려면 eject를 해서 설정파일들을 만져줘야 하므로 일단 eject부터 하겠습니다. 첫화면이 잘 뜬다면 다음으로 넘어가겠습니다. > # sass 설정 일단 css대신 scss를 쓰려면 다음 패키지들을 다운로드 해주세요. 그리고 config/p...
4.Dnote 3 - 2. React - 개발 환경 설정 및 구조 잡기.(프로젝트 구조잡기)
자 redux설정에 앞서 잠시 기본 적인 sass 스타일의 틀을 잡고 가보겠습니다. styles/index.scss 설명을 드리자면 도현체를 사용하기 위해서 도현체를 import시키고, 전체적인 body태그의 스타일을 해준것입니다. 또한 a 태그로 링크를 걸때, 자동적으로 나오는 못생긴 스타일들을 없애주었습니다. 이제 index.js에 이 스타일을 불...
5.Dnote 3 - 3. React - 개발 환경 설정 및 구조 잡기. (Redux 설정하기)
기본적인 스타일과 구조를 잡았으니, 이제 리덕스를 설정해야겠습니다. 리덕스는 글로벌하게 상태관리를 할수있게 도와주는 도구라고 생각하는데요, 딱히 복잡하지 않은 프로젝트에서는 굳이 리덕스를 사용하지 않아도 된다고 생각합니다. 허나 저는 API통신을 할 것이고, 평소에 리덕스를 사용해왔기 때문에, 리덕스 스토어에서 전체 상태를 관리할 예정입니다. 또한 이 ...
6.Dnote 4 - 1. Django - CRUD API 작업
이제 웹통신을 할 장고 API를 설정해보겠습니다. django쪽 디렉터리에서 앱을 하나 생성해줍니다. settings.py 일단, REST Framework를 사용할 것이기 때문에 먼저 인스톨부터 하죠. 그런뒤 마찬가지로 INSTALLED_APPS 에 추가합니다. 저희가 notes 앱 에서 쓸 파일들은 다음과 같습니다. urls.py: API 라...
7.Dnote 4 - 2. React - 페이지 구조 생성.
지난 튜토리얼에서 만든 API를 바탕으로 통신하여, 리액트에서 CRUD를 실시해보겠습니다. 일단 처음에 react-router-dom을 사용하여 클라이언트쪽 라우팅을 해보겠습니다. Root.js Root.js를 다음과 같이 BrowserRouter로 감싸줍니다. 그런 뒤 라우팅에 쓰이게 될 pages들을 생성하겠습니다. pages밑에 다음과 같은 ...
8.Dnote 4 - 3. React - 입력 폼 만들고 상태 관리.
components/notes/InsertForm/InsertForm.js components/notes/InsertForm/InsertForm.scss components/notes/InsertForm/InsertForm.js 이 InsertForm을 Main 페이지에 반영해보겠습니다. pages/Main.js 이렇게 되면 너무 넓이가 넓어지므로...
9.Dnote 4 - 4. React - 노트 생성 기능 구현.
store/modules/notes.js 위와 같이 note를 추가하는 epic과 액션, 리듀서들을 생성해주세요. 그리고, index.js에서 epic을 반영해주세요. modules/index.js 처음으로 epic이 나왔는데요, 이 epic은 configure에서 다음과 같이 등록해주어야 사용할수 있습니다. store/configure.js 이...
10.Dnote 4 - 5. React - 노트 생성 시 에러 처리.
자 이제 생성은 되는데, 아무것도 없이 엔터만 치면 에러가 나겠죠? 이 에러를 반영해주는 작업들을 해보겠습니다. redux의 initialState에 다음을 추가해줍니다. modules/notes.js containers/NoteContainer.js components/notes/InsertForm/InsertForm.js 이제 에러가 생기면 ...
11.Dnote 5 - 1. Django - 권한 설정 및 로그인 / 회원가입 구현
일단 권한을 설정 해야 하니까, Django로 돌아옵시다. django-rest-knox 라는 패키지를 다운로드 해야합니다. settings.py 이제 기본 권한을 설정했으니, notes 모델에서 owner 필드를 추가해주겠습니다. notes/models.py User 모델을 가져온뒤, foreign key로 설정했네요. 그리고 모델을 수정했으니...
12.Dnote 5 - 2. React - 로그인 및 회원가입 기능 구현.
Django API를 바탕으로, 리액트에서 로그인 및 회원가입 기능을 구현해보겠습니다. 이제 첫 화면에서는 오류가 나겠죠? 401 Unauthorized가 나옵니다. 권한 설정을 했는데, 저희는 Header에 Authorization을 주지 않아서 그런건데요, 일단 이 오류는 무시하고 로그인 회원가입 기능을 구현하겠습니다. 다음 파일들을 생성해줍니다. ...
13.Dnote 5 - 3. React - 로그인 유지 및 로그아웃 기능 구현.
자 이제는 로그인과 회원가입이 되었으니 로그인이 되었을때, 유지하는 기능을 추가하고, 로그인이 만약 안되었다면, 접속시 바로 로그인 페이지로 넘겨보고, 마지막으로 로그아웃 기능까지 구현해보겠습니다. 일단 장고 앱에서는 회원가입만 하더라도, 토큰을 부여하게 됩니다. 그러니까, 회원가입 하자마자 로그인을 한다고 생각하시면 될것 같습니다. 일단 로그인을 유지...
14.Dnote 6 - 1. React - 무한 스크롤링 기능 구현.
이제 무한 스크롤링 기능을 구현해 보겠습니다. 무한 스크롤링은 브라우저가 아래에 닿았을때, 저희가 마지막으로 보여주는 노트 아이템의 id를 기준으로 다음 10개의 노트 아이템들을 받아올 예정입니다. NoteContainer에 다음을 추가해주겠습니다. containers/NoteContainer.js 일단 스크롤링을 해야하므로 노트들을 20개정도 추가...
15.Dnote 7. React - 404페이지 완성 및 빌드된 리액트 띄우기
음 이제 마지막이네요! 그러나 로그인 후 에러가 나타나는 현상을 방지하기 위해, NoteContainer를 다음과 같이 바꿔주도록 하겠습니다! containers/NoteContainer.js 404페이지를 완성하고 장고서버로 빌드된 리액트를 띄워볼까요? 다음과 같이 NotFound 컴포넌트를 생성해주세요. components/common/Not...