공공데이터포털25 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. django APP들을 위한 마이그레이션(migrate) 작업#8 장고 앱들을 위한 마이그레이션 작업admin, auth, contenttypes, sessions 앱들을 실행하기 위해 migrate 한다.가상환경에서 python manage.py migrate 실행한다.(pubd_api) pubdapi % lsdb.sqlite3 manage.py pubdapi pubdapp(pubd_api) pubdapi % python3 manage.py migrateOperations to perform: Apply all migrations: admin, auth, contenttypes, sessionsRunning migrations: Applying contenttypes.0001_initial... OK Applying auth.0001_initial... OK .. 2024. 8. 7. pylint 로 python 가상환경 venv 코드와 vs code 와 연결시키기 #7 파이썬 가상환경에서 코드 생성하고, vs code에서 폴더 열기로 열어보면 아래와 같은 메시지가 나오는 경우가 있다.해결하기 위해 가상환경에 들어가서 pylint 를 인스톨한다.가상환경 진입(pubd_api) pubdapi % lsdb.sqlite3 manage.py pubdapi pubdapp(pubd_api) pubdapi % pip install pylintCollecting pylint Downloading pylint-3.2.6-py3-none-any.whl.metadata (12 kB)Collecting platformdirs>=2.2.0 (from pylint) Downloading platformdirs-4.2.2-py3-none-any.whl.metadata (11 kB)Collec.. 2024. 8. 6. django cors 크로스 도메인 오류 해결 #6 cors 오류django와 Front-End와 통신하다 보면 도메인이나 포트가 달라서 cors 오류가 발생될 수 있다.그래서, 이번에는 django 에 cors 오류를 해결하기 위한 세팅을 한다. 먼저 django cors 정보는 아래 URL에서 자세히 확인할 수 있다.☞ https://pypi.org/project/django-cors-headers/Setup cors이전에 설치한 가상환경으로 이동한다.가상환경에서 cors-headers 설치한다.python3 -m pip install django-cors-headers(pubd_api) pubdapi % lsdb.sqlite3 manage.py pubdapi pubdapp(pubd_api) pubdapi % python3 -m pip install.. 2024. 8. 5. 이전 1 2 3 다음
