분류 전체보기
[pinterest clone (1)] 기술스택
1. Frontend : HTML, CSS 2. Backend : MariaDB, NGINX, django, docker 3. django app 구분 -Account -Article -Project -Comment
source tree에서 push error
아직 해결못했다.. ssh 인증 문제인거 같은데 private repository에 push할때마다 이런다. ssh키도 만들고 등록도 다해줬는데 이유를 모르겠다. ssh에 대해 언제한번 제대로 이해하고 넘어가야할 것 같다. 서칭중에 깃 관련해 괜찮은 사이트를 발견해 기록해둔다. wanochoi.com/?p=1551 Git 설정 및 사용법 – Wanho Choi 1. git 설치 및 계정 생성 (client->server) ssh root@11.22.33.44 #ssh로 원격 서버(여기서는 IP주소가 11.22.33.44라고 가정)에 접속 root@11.22.33.44’s password: [server의 root 암호 입력] yum install git #git 설치 adduser wanochoi.com..
[Django Tutorial] Blog 만들기 (18)
Vue-Django Read API axios list Srialize api/views_util.py 를 만들어 obj_to_post() 메서드를 정의해준다. def obj_to_post(obj): post=dict(vars(obj)) # convert to string return post obj를 dictionary로 바꿔주고 post dictionary에 있는 내용을 string으로 바꿔준 다음에 최종 딕셔너리 타입은 post를 리턴해준다. json 타입을 serialize 한다는 의미를 간단하게 얘기하면 파이썬의 객체를 string의 형태로 형변환하는 과정이라고 말할 수 있다. * django shell에서 실습해보자.python manage.py shell >>> from blog.models..
[Django Tutorial] Blog 만들기 (17)
Vue-Django Read API axios list Django coding django에서 /api/post/list/ 처리하는 로직 만든다. 1 blog에 만들어도 되지만 api 따로 만들어 모으자. python manage.py startapp api 만들어진 앱에서 __init__.py, apps.py, views.py 제외하고 필요없는건 지웠다. (테이블은 다른 앱에서 만들고 api에서는 다른 앱에 있는 테이블을 임포트해서 사용하는 방식으로 할거니까) * 역시 settings.py -> models.py -> urls.py -> views.py -> (templates) 순으로 코딩한다. client에 json 응답을 줄것이기 때문에 templates 처리는 불필요하다. 테이블도 안만들거니까..
[Django Tutorial] Blog 만들기 (16)
Vue-Django Read API axios-list vue coding django table로 부터 가져온 실제 데이터를 devServer에서 보여줄 수 있게 한다. # 템플릿 내용 생략 mdi-pencil mdi-delete Reset PostList.vue 파일을 보면 화면을 구성하는게 v-data-table이 전부다. :headers 와 :items 만 잘해주면 됨. 1 headers부터 보자 headers의 value에 넣을 값은 장고로부터 받은 데이터중에서 해당 커럼에 대응되는 변수명을 넣어주면 된다. headers: [ { text: "ID", align: "start", sortable: false, value: "name", }, { text: "제 목", value: "title" ..
[Django Tutorial] Blog 만들기 (15)
웹팩 devServer 와 Django runserver에 대하여 1. 웹팩 devServer (8080포트) 실행명령 : npm run servehtml 위치:~/dist/home.html~/dist/post_list.html~/dist/post_detail.html 2. Django runserver (8000 포트) 실행명령: python manage.py runserverhtml 위치: ~/templates/home.html~/templates/blog/post_list.html~/templates/blog/post_detail.html 이때 devServer와 runserver의 url을 맵핑하는 방법이 서로 다르다. devServer는 url과 html의 맵핑을 vue.config.js에 정의..
[Django Tutorial] Blog 만들기 (13)
vue project에서 만든걸 django에서 보려면 웹팩 결과물들을 django directory로 이동해야한다. 지금까지는 수동으로 했는데 이걸 자동으로 해주는 웹팩 플러그인이 있다. : filemanager-webpack-plugin-fixed filemanager-webpack-plugin-fixed www.npmjs.com/package/filemanager-webpack-plugin-fixed filemanager-webpack-plugin-fixed This Webpack plugin allows you to copy, archive (.zip), move, delete files and directories before and after builds www.npmjs.com 제공된 예시가..
[Django Tutorial] Blog 만들기 (12)
DevServer vue의 devserver를 실행시켰을때 에러가 발생하고 화면에는 빈 화면이 출력되는 것을 볼 수 있다. 원인: 루트 URL에 대해서 index.html을 찾고 있는데 빌드결과물에 index.html이 없다. (index.html은 없고 home.html을 포함 3개 html을 만들었음.) localhost:8080/home으로 접속했더니 화면을 확인할 수 있었다. 나머지도 마찬가지. 위 에러는 웹팩개발서버가 루트 URL에 대해서 디폴트로 index.html을 찾아서 발생하는 에러이다. 해결: vue.config.js에 devServer항목을 추가해준다. (웹팩서버를 devserver라고 한다.) devServer: { index: 'home.html', }, 루트를 다른 html로 변..
[Django Tutorial] Blog 만들기 (14)
Vue-Django UI 꾸미기 vuetify를 써볼거다. vuetifyjs.com/en/getting-started/installation/ Get started with Vuetify Get started with Vue and Vuetify in no time. Support for Vue CLI, Webpack, Nuxt and more. vuetifyjs.com UI Components / Bars / App bars Dense 를 써볼거다. Codepen 을 지원해주기 때문에 거기서 바꾸고 가져올거다. ///////// UI 과정은 귀찮아서 여기 따로 기록하지 않기로 했다. * Vuetify에 대해 더 공부하고 따로 기록할 필요가 느껴진다. 웹팩의 devServer를 확인해 만든것이 화면에 잘..
yarn serve , npm run serve 시의 URIError
yarn serve 후 주어진 주소로 들어가면 터미널에 에러가 나타난다. URIError: Failed to decode param '/%3C%=%20BASE_URL%20%%3Efavicon.ico' 화면엔 아무것도 안나타난다. 원인: 루트 URL에 대해서 index.html을 찾고 있는데 빌드결과물에 index.html이 없다. (index.html은 없고 home.html을 포함 3개 html을 만들었음.) localhost:8080/home으로 접속했더니 화면을 확인할 수 있었다. 나머지도 마찬가지. 위 에러는 웹팩개발서버가 루트 URL에 대해서 디폴트로 index.html을 찾아서 발생하는 에러이다. 해결: vue.config.js에 devServer항목을 추가해준다. (웹팩서버를 devserve..