profile
killi8n

[react + pwa + webpack] PWA 적용하기

PWA 적용하기 1. 노드 모듈 인스톨 pwa에 관련한 웹팩 모듈을 인스톨 해준다. 2. manifest.json 파일 생성 public/manifest.json 3. webpack 설정 추가 webpack.config.js src/sw.js manifest 와 service worker 설정까지 추가하였다. 4. serviceWorker ...

2019년 12월 23일
·
2개의 댓글

[react + pwa + webpack] 투두 리스트 만들기

투두 리스트 만들기 1. src/components/Root.js 생성 src/components/Root.js src/index.js 2. 스타일 관련 폴더 생성 및 sass-loader 추가 webpack.config.js 원래 스타이 설정 부분(test: css)로 되었던 부분을 아래와 같이 변경. src/styles/index.scss ...

2019년 12월 22일
·
0개의 댓글

[react + pwa + webpack] 리액트 프로젝트를 웹팩으로 설정하기.

리액트 프로젝트를 웹팩으로 설정하기. 1. 프로젝트 생성 및 깃 저장소 master 푸시. .gitignore 2. 프로젝트 구조 설정 및 기초가 되는 node module 인스톨 src 폴더 생성. public 폴더 생성. es6 문법을 사용하기 위한 노드 모듈 설치. 3. 웹팩 관련 모듈 설치 4. webpack.config.js 설정 we...

2019년 12월 22일
·
0개의 댓글
post-thumbnail

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

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

2018년 9월 21일
·
0개의 댓글
post-thumbnail

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

store/modules/notes.js 위와 같이 note를 추가하는 epic과 액션, 리듀서들을 생성해주세요. 그리고, index.js에서 epic을 반영해주세요. modules/index.js 처음으로 epic이 나왔는데요, 이 epic은 configure에서 다음과 같이 등록해주어야 사용할수 있습니다. store/configure.js 이...

2018년 9월 21일
·
2개의 댓글
post-thumbnail

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

지난 튜토리얼에서 만든 API를 바탕으로 통신하여, 리액트에서 CRUD를 실시해보겠습니다. 일단 처음에 react-router-dom을 사용하여 클라이언트쪽 라우팅을 해보겠습니다. Root.js Root.js를 다음과 같이 BrowserRouter로 감싸줍니다. 그런 뒤 라우팅에 쓰이게 될 pages들을 생성하겠습니다. pages밑에 다음과 같은 ...

2018년 9월 21일
·
6개의 댓글
post-thumbnail

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

자 redux설정에 앞서 잠시 기본 적인 sass 스타일의 틀을 잡고 가보겠습니다. styles/index.scss 설명을 드리자면 도현체를 사용하기 위해서 도현체를 import시키고, 전체적인 body태그의 스타일을 해준것입니다. 또한 a 태그로 링크를 걸때, 자동적으로 나오는 못생긴 스타일들을 없애주었습니다. 이제 index.js에 이 스타일을 불...

2018년 9월 21일
·
4개의 댓글
post-thumbnail

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

자 이제 프로젝트를 모두 생성했으니, 리액트쪽부터 건들여 볼까요? > # eject 하기 sass를 사용하려면 eject를 해서 설정파일들을 만져줘야 하므로 일단 eject부터 하겠습니다. 첫화면이 잘 뜬다면 다음으로 넘어가겠습니다. > # sass 설정 일단 css대신 scss를 쓰려면 다음 패키지들을 다운로드 해주세요. 그리고 config/p...

2018년 9월 20일
·
1개의 댓글
post-thumbnail

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

각 프로젝트 생성 > # Django - Virtual Env 생성 > # Django - Virtual Env 실행 > # django 설치 / project 생성 http://localhost:8000 으로 들어가시면 첫화면을 보시게 될 것 입니다. 다음 글에서는 React 개발 환경 설정 및 구조를 잡아 보겠습니다. 또한 sass 및 redu...

2018년 9월 20일
·
0개의 댓글
post-thumbnail

Dnote 1. 소개

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

2018년 9월 20일
·
0개의 댓글
post-thumbnail

Django + React 로 첫 화면 띄워보기

이곳에 쓰인 모든 글은 http://v1k45.com/blog 의 http://v1k45.com/blog/modern-django-part-1-setting-up-django-and-react/ 에 쓰여진 대로 진행함을 알립니다. > 또한 이 글의 원본은 https://killi8n.com 에 있음을 알립니다! (블로그 홍보는 안 비밀...) 이번에 올...

2018년 9월 19일
·
9개의 댓글