전체 글70 django, vue cli 이용해서 개발한 국회도서관 자료 검색 화면 및 적용 기술 #18 지금까지 적용된 국회도서관 자료검색 화면과 적용된 기술에 대해 정리한다.국회도서관 자료검색 흐름도 스케치는 어떻게?https://yuneenelife.tistory.com/entry/국회도서관-자료-검색-vuejs-화면-스케치-14 국회도서관 자료 검색 vue.js 화면 스케치 #14국회도서관 도서검색은 5개의 흐름으로 진행한다.검색어 입력검색어로 국회도서관 도서검색 API 호출도서검색된 결과 리스트 노출특정 도서 클릭클릭된 도서의 상세정보 노출5개의 흐름을 3개yuneenelife.tistory.com공공데이터 포털 API 사용은 어떻게?https://yuneenelife.tistory.com/entry/공공데이터-포털-에서-원하는-서비스-API-신청하기-4 공공데이터 포털 에서 원하는 서비스 API .. 2024. 8. 23. vuetify v-data-table 적용하기, vue modal 모달 화면 구성하기 #17 국회도서관 자료검색 마지막 페이지인 상세페이지는 모달화면으로 작성한다.이 페이지에서는 parent 화면에서 넘어온 파라미터로 v-data-table을 적용해 본다. ☞ 소스 개발순서는 이전 글 참고https://yuneenelife.tistory.com/entry/vue-v-router-통해-타-페이지-호출-방법-및-데이터-전달-방법-15 vue v-router 통해 타 페이지 호출 방법 및 데이터 전달 방법 #15v-router로 타 페이지 호출하고, 데이터를 전달하는 방법은국회도서관 자료검색 화면을 개발하면서 적용한다.vue cli 로 화면을 개발하기 위해 먼저 개발 순서를 정하고, 이후 하나씩 개발하면서 v-ryuneenelife.tistory.comvuetify v-data-tablev-data-.. 2024. 8. 22. vue axios 로 외부 API 호출 응답 받기, vue cli 환경변수 env 세팅 #16 Axios 란node.js 와 브라우저를 위한 Promise 기반 HTTP 클라이언트 라이브러리☞ 보다 자세한 정보는 아래 링크 참고https://axios-http.com/kr/docs/intro 이번에는 국회도서관 자료검색 리스트 페이지를 개발하면서이전에 개발했던 django API 서버와 HTTP 통신하는 로직을 개발해 본다. Axios 설치외부 연계를 위한 HTTP 클라이언트 라이브러리 설치pubdweb 디렉터리로 이동한다.npm install axios으로 설치한다.pubdweb % npm install axiospubdweb % ☞ 소스 개발순서는 이전 글 참고https://yuneenelife.tistory.com/entry/vue-v-router-통해-타-페이지-호출-방법-및-데이터-전달-.. 2024. 8. 21. vue v-router 통해 타 페이지 호출 방법 및 데이터 전달 방법 #15 v-router로 타 페이지 호출하고, 데이터를 전달하는 방법은국회도서관 자료검색 화면을 개발하면서 적용한다.vue cli 로 화면을 개발하기 위해 먼저 개발 순서를 정하고, 이후 하나씩 개발하면서 v-router를 적용한다. ☞ vue router 설치는 이전 글 참고https://yuneenelife.tistory.com/entry/vue-router-vuetify-설치하기-13 vue router, vuetify 설치하기 #13vue router ?페이지간 이동을 위해 필요한 vue router 설치.Vue.js의 공식 라우터로 Vue.js 코어와 긴밀히 통합되어 Vue.js로 단일 페이지 애플리케이션을 쉽게 구축할 수 있게 해 준다.☞ 공식 사이트https://yuneenelife.tistory... 2024. 8. 20. 국회도서관 자료 검색 vue.js 화면 스케치 #14 국회도서관 도서검색은 5개의 흐름으로 진행한다.검색어 입력검색어로 국회도서관 도서검색 API 호출도서검색된 결과 리스트 노출특정 도서 클릭클릭된 도서의 상세정보 노출5개의 흐름을 3개의 페이지로 구성한다.SearchMain.vue검색 메인 페이지검색어 입력 ▶ 1번 흐름 진행vue router 활용하여 페이지 호출ResultList.vue검색결과 리스트검색어로 국회도서관 도서검색 API 호출 ▶ 2번 흐름 진행도서검색된 결과 리스트 노출 ▶ 3번 흐름 진행axios 모듈 이용하여 API 호출ResultDtl.vue상세 도서 정보특정 도서 클릭 ▶ 4번 흐름 진행클릭된 도서의 상세정보 노출 ▶ 5번 흐름 진행modal 팝업으로 노출vuetify의 data tables component로 개발화면 구성 스케.. 2024. 8. 19. vue router, vuetify 설치하기 #13 vue router ?페이지간 이동을 위해 필요한 vue router 설치.Vue.js의 공식 라우터로 Vue.js 코어와 긴밀히 통합되어 Vue.js로 단일 페이지 애플리케이션을 쉽게 구축할 수 있게 해 준다.☞ 공식 사이트https://router.vuejs.org/installation.htmlvuetify ?자바스크립트 프레임워크로 개발자들에게 필요한 기능들을 제공하는 개발 프레임워크이다.☞ 공식 사이트https://v15.vuetifyjs.com/ko/getting-started/quick-startvue router 설치vue 설치 디렉터리로 이동한다.npm install vue-router@3 로 설치vue2 버전을 설치했기 때문에 vue router 도 3으로 설치한다.vue3 인 경우에.. 2024. 8. 14. vue, vue cli 설치하고 버전 확인 #12 국회도서관 자료검색 서비스를 위한 프런트엔드 웹 환경 구성작업 환경작업폴더명public_data/pubd_web프로젝트 명pubdwebOSmacOS sonoma v 14.5☞ vue cli 의 가이드는 아래 URL에서 자세히 다루고 있다.https://cli.vuejs.org/ vue cli 는 vue.js 프레임워크를 포함하고 있어, 별도 vue.js 설치를 안 해도 된다.vue.js 프로젝트 생성 시 vue version 선택가능vue cli 설치pubd_web 폴더로 이동하여 설치npm install -g @vue/clivue cli 는 전역으로 설치되기 때문에 이전에 설치한 이력이 있으면 vue project로 바로 진행하면 된다.pubd_web % npm install -g @vue/cliVue.. 2024. 8. 13. django Test 코드 작성하여 코드 안정성 높이기 #11 API 호출 테스트 코드 작성유의사항django의 APP 디렉터리의 test.py 파일에 작성테스트 시스템은 test로 시작하는 파일에서 테스트를 자동으로 찾는다.함수명의 prefix 는 test 로 시작해야한다.테스트 시 발생한 데이터들은 임시로 작성되며 실제 테이블에 데이터들이 적재되지는 않는다.test.pyfrom django.test import TestCasefrom django.urls import reverse# Create your tests here.class APIsTest(TestCase): def test_nanet_search(self): data = { "search": "수호지", "pageno": 1, .. 2024. 8. 12. django rest framework swagger drf_yasg 설정 #10 swagger 설치작업 중인 파이썬 가상환경으로 이동한다.pip 명령어로 설치한다.pip install drf-yasg☞ installation 참고 : https://drf-yasg.readthedocs.io/en/stable/readme.html#installation(pubd_api) pubdapi % lsdb.sqlite3 manage.py pubdapi pubdapp(pubd_api) pubdapi % pip install drf-yasg...............Installing collected packages: pytz, uritemplate, pyyaml, packaging, inflection, drf-yasgSuccessfully installed drf-yasg-1.21.7 in.. 2024. 8. 9. django 공공데이터 포털 API 코드, 환경변수 설정, admin 생성하기 #9 django 코드 작성django 코드 작성은 이전 프로젝트 구조에 맞춰서 개발한다. ☞ django 프로젝트 구조는 이전 글 참고https://yuneenelife.tistory.com/entry/django-cycle-프로젝트-구조-및-language-timezone-변경하기-3 django cycle, 프로젝트 구조 및 language, timezone 변경하기 #3django cycledjango는 아래와 같은 사이클로 작동되며, 소스 코드도 아래 사이클에 맞춰 개발한다.WSGI (Web Server Gateway Interface)파이썬 스크립트(웹 어플리케이션)가 웹 서버와 통신하기 위한 인터페이yuneenelife.tistory.com작성할 코드 흐름urls.pypath는 /api/pubd/.. 2024. 8. 8. 이전 1 2 3 4 5 ··· 7 다음
