thumbnail
2018년 겨울을 맞이하며 남기는 글 Thumbnail

2018년 겨울을 맞이하며 남기는 글

요새 통 글을 쓰지 못하였다. 아니 안썼다고도 할수 있겠다. 오늘 처음으로 내게 질문 주신 분이 있어서, 정말 오랜만에 내 블로그에 방문하였다. 처음으로 질문을 받는 다는 것 자체가 나에게는 굉장히 설레는 일이었고, 누군가 나의 글을 보면서 나의 튜토리얼을 따라하는 사...

2018년 11월 14일9개의 댓글
2018년 가을을 맞이하면서 드는 생각들 Thumbnail

2018년 가을을 맞이하면서 드는 생각들

오랜만에 벨로그에 글을 남기네요! 최근 취업준비를 하다보니 글을 남길 시간이 없었습니다! 그 사이 벨로그에 좋은 글들이 많이 올라왔네요! 점점 많은 글들이 올라오는 것이 보기 아주 좋습니다. 글에 대한 설명을 하자면 제 블로그에 먼저 글을 올려서, 저에 대한 일기같은 ...

2018년 10월 17일5개의 댓글
Mongodb 덤프하고 백업하기 Thumbnail

Mongodb 덤프하고 백업하기

AWS를 쓰는 ... (무료로쓰는 혹은 돌려막기 하는...) 저같은 사용자에게 꼭필요한 DB덤프하고 덮어쓰기 ! 이 블로그 또한 10개월 남짓 남은것 같은데 한 9개월 정도 남았을때에 덤프 과정이 필요할거 같아서 서핑 후 글을 남긴다. 덤프하기 일단 몽고디비가...

2018년 9월 30일4개의 댓글
Dnote 7. React - 404페이지 완성 및 빌드된 리액트 띄우기 Thumbnail

Dnote 7. React - 404페이지 완성 및 빌드된 리액트 띄우기

음 이제 마지막이네요! 그러나 로그인 후 에러가 나타나는 현상을 방지하기 위해, NoteContainer를 다음과 같이 바꿔주도록 하겠습니다! containers/NoteContainer.js 다음과 같이 작성해줍니다. 저희의 빌드 된 파일은 fronten...

2018년 9월 23일0개의 댓글
Dnote 6 - 1. React - 무한 스크롤링 기능 구현. Thumbnail

Dnote 6 - 1. React - 무한 스크롤링 기능 구현.

이제 무한 스크롤링 기능을 구현해 보겠습니다. 무한 스크롤링은 브라우저가 아래에 닿았을때, 저희가 마지막으로 보여주는 노트 아이템의 id를 기준으로 다음 10개의 노트 아이템들을 받아올 예정입니다. NoteContainer에 다음을 추가해주겠습니다. contain...

2018년 9월 23일0개의 댓글
Dnote 5 - 3. React - 로그인 유지 및 로그아웃 기능 구현. Thumbnail

Dnote 5 - 3. React - 로그인 유지 및 로그아웃 기능 구현.

자 이제는 로그인과 회원가입이 되었으니 로그인이 되었을때, 유지하는 기능을 추가하고, 로그인이 만약 안되었다면, 접속시 바로 로그인 페이지로 넘겨보고, 마지막으로 로그아웃 기능까지 구현해보겠습니다. 일단 장고 앱에서는 회원가입만 하더라도, 토큰을 부여하게 됩니다. 그...

2018년 9월 23일0개의 댓글
Dnote 5 - 2. React - 로그인 및 회원가입 기능 구현. Thumbnail

Dnote 5 - 2. React - 로그인 및 회원가입 기능 구현.

Django API를 바탕으로, 리액트에서 로그인 및 회원가입 기능을 구현해보겠습니다. 이제 첫 화면에서는 오류가 나겠죠? 401 Unauthorized가 나옵니다. 권한 설정을 했는데, 저희는 Header에 Authorization을 주지 않아서 그런건데요, 일단 ...

2018년 9월 23일0개의 댓글
Dnote 5 - 1. Django - 권한 설정 및 로그인 / 회원가입 구현 Thumbnail

Dnote 5 - 1. Django - 권한 설정 및 로그인 / 회원가입 구현

일단 권한을 설정 해야 하니까, Django로 돌아옵시다. django-rest-knox 라는 패키지를 다운로드 해야합니다. 다음과 같이 설정하면, /api/auth/logout/ 으로 Authorization: token 토큰값 으로 실행하면 로그아웃이 됩니다...

2018년 9월 23일0개의 댓글
Dnote 4 - 6. React - 노트 리스트 구현 및 수정 / 삭제 기능 구현. Thumbnail

Dnote 4 - 6. React - 노트 리스트 구현 및 수정 / 삭제 기능 구현.

이제 할것은 노트 리스트 보여주기인데, Django API의 notes 앱의 url 중 이렇게 되면 삭제도 가능해집니다! 다음에는 권한설정 및 무한 스크롤링 기능을 구현해보겠습니다.

2018년 9월 23일4개의 댓글
Dnote 4 - 5. React - 노트 생성 시 에러 처리. Thumbnail

Dnote 4 - 5. React - 노트 생성 시 에러 처리.

자 이제 생성은 되는데, 아무것도 없이 엔터만 치면 에러가 나겠죠? 이 에러를 반영해주는 작업들을 해보겠습니다. redux의 initialState에 다음을 추가해줍니다. modules/notes.js 다음에는 생성된 노트들을 보여주는 처리를 해보겠습니다.

2018년 9월 21일0개의 댓글
Dnote 4 - 4. React - 노트 생성 기능 구현. Thumbnail

Dnote 4 - 4. React - 노트 생성 기능 구현.

store/modules/notes.js 자 이제 엔터를 치면 노트가 생성됨을 알수 있습니다. 크롬 개발자도구를 키고, network에서 보시면 201 생성이 뜨죠? Imgur

2018년 9월 21일0개의 댓글
Dnote 4 - 3. React - 입력 폼 만들고 상태 관리. Thumbnail

Dnote 4 - 3. React - 입력 폼 만들고 상태 관리.

components/notes/InsertForm/InsertForm.js 이제 리덕스 데브툴스로 보면 입력을 할때마다 값이 바뀌는것을 알수 있습니다. 다음에는 이 값을 가지고 실제 노트를 하나 생성해보겠습니다.

2018년 9월 21일0개의 댓글
Dnote 4 - 2. React - 페이지 구조 생성. Thumbnail

Dnote 4 - 2. React - 페이지 구조 생성.

지난 튜토리얼에서 만든 API를 바탕으로 통신하여, 리액트에서 CRUD를 실시해보겠습니다. 일단 처음에 react-router-dom을 사용하여 클라이언트쪽 라우팅을 해보겠습니다. 다음에는 노트를 입력하는 노트 입력 폼을 만들어보겠습니다.

2018년 9월 21일0개의 댓글
Dnote 4 - 1. Django - CRUD API 작업 Thumbnail

Dnote 4 - 1. Django - CRUD API 작업

이제 웹통신을 할 장고 API를 설정해보겠습니다. django쪽 디렉터리에서 앱을 하나 생성해줍니다. 이제 다음의 url들이 통신이 될것입니다. http://localhost:8000/api/notes/ (GET - Note List) http://localh...

2018년 9월 21일0개의 댓글
Dnote 3 - 3. React - 개발 환경 설정 및 구조 잡기. (Redux 설정하기) Thumbnail

Dnote 3 - 3. React - 개발 환경 설정 및 구조 잡기. (Redux 설정하기)

기본적인 스타일과 구조를 잡았으니, 이제 리덕스를 설정해야겠습니다. 리덕스는 글로벌하게 상태관리를 할수있게 도와주는 도구라고 생각하는데요, 딱히 복잡하지 않은 프로젝트에서는 굳이 리덕스를 사용하지 않아도 된다고 생각합니다. 허나 저는 API통신을 할 것이고, 평소에 ...

2018년 9월 21일0개의 댓글
Dnote 3 - 2. React - 개발 환경 설정 및 구조 잡기.(프로젝트 구조잡기) Thumbnail

Dnote 3 - 2. React - 개발 환경 설정 및 구조 잡기.(프로젝트 구조잡기)

자 redux설정에 앞서 잠시 기본 적인 sass 스타일의 틀을 잡고 가보겠습니다. styles/index.scss 잘 나타나나요? 그렇다면 성공입니다. 다음에서는 redux설정을 통해서 redux-devtools (크롬 웹스토어) 로 반영해보겠습니다.

2018년 9월 21일0개의 댓글
Dnote 3 - 1. React - 개발 환경 설정 및 구조 잡기.(sass 설정) Thumbnail

Dnote 3 - 1. React - 개발 환경 설정 및 구조 잡기.(sass 설정)

자 이제 프로젝트를 모두 생성했으니, 리액트쪽부터 건들여 볼까요? 자 이제 sass에 대한 환경 설정은 모두 끝났습니다.

2018년 9월 20일0개의 댓글
Dnote 2. React / Django 프로젝트 생성. Thumbnail

Dnote 2. React / Django 프로젝트 생성.

각 프로젝트 생성 http://localhost:8000 으로 들어가시면 첫화면을 보시게 될 것 입니다. 다음 글에서는 React 개발 환경 설정 및 구조를 잡아 보겠습니다. 또한 sass 및 redux등의 개발 기초작업을 해보겠습니다.

2018년 9월 20일0개의 댓글
Dnote 1. 소개 Thumbnail

Dnote 1. 소개

안녕하세요? 딱히 제가 만든 프로젝트가 대단한 것은 아니지만, 장고와 리액트로 작업을 할때 저는 처음에 삽질을 많이 했는데요, 이러한 삽질을 하며 만들어본 경험을 바탕으로 리액트와 장고로 한줄 노트앱을 만드는 과정을 공유하고자 해서 튜토리얼을 써보게 되었습니다. ht...

2018년 9월 20일0개의 댓글
개발에 대한 피로도를 푸는 나의 방법? 및 요즘 드는 생각들.. Thumbnail

개발에 대한 피로도를 푸는 나의 방법? 및 요즘 드는 생각들..

벨로그가 오래 살아남았으면 하는 바람으로 올려보는 글. 개발을 하다보면 여러가지 피로도에 휩싸이게 된다. 일단 처음에 시작한 작업들이 흐지부지 하게 되거나, 내가 할 수 있었던것 같았던 작업들이 장벽에 부딪혔을때 등등 여러가지 요인들에 의해 작업 피로도들이 점점 나...

2018년 9월 19일0개의 댓글