유니네 Library

Vue에서 v-router를 사용하여 다른 페이지로 이동하고 데이터를 전달하는 방법을 설명한다.이 예제에서는 국회도서관 자료검색 화면을 개발하며 적용된 내용을 기반으로 설명한다. ✅ Vue Router란? Vue Router는 Vue.js에서 페이지 간 이동(라우팅)을 담당하는 공식 라이브러리이다.단일 페이지 애플리케이션(SPA)에서 원활한 네비게이션을 제공하며, 동적 라우팅 기능을 지원한다. ✅ Vue Router 설치 Vue CLI 프로젝트에서 Vue Router를 설치하려면 아래 명령어를 실행한다.npm install vue-router 이전에 Vue Router와 Vuetify를 함께 설치하는 방법을 다뤘으니, 필요하면 참고한다.📌 이전 글 보기 vue router, vuetify 설치하기 #1..

국회도서관 도서검색은 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로 개발화면 구성 스케..

Vue.js 프로젝트에서 Vue Router와 Vuetify를 설치하는 방법을 정리했다. ✅ Vue Router란? Vue Router는 Vue.js에서 페이지 간 이동(라우팅)을 담당하는 공식 라이브러리이다.SPA 구조에서 URL을 변경하면서도 전체 페이지를 다시 로드하지 않도록 도와준다. 📌 Vue Router 공식 사이트🔗 https://router.vuejs.org/installation.html Vue Router | The official Router for Vue.jsThe official Router for Vue.jsrouter.vuejs.org ✅ Vuetify란? Vuetify는 Vue.js 기반의 Material Design UI 프레임워크다.버튼, 카드, 네비게이션 바 등 다양..

국회도서관 자료검색 서비스를 위한 프런트엔드 웹 환경 구성작업 환경작업폴더명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로 바로 진행하면 된다.#vue cli 설치#pubd_web 폴더로 이동하여 설치#npm ..

Django 프로젝트에서 API의 안정성을 보장하려면 테스트 코드가 필수이다.이 글에서는 Django의 TestCase를 활용하여 API 호출 테스트 코드 작성 방법을 설명한다. ✅ API 테스트 코드 작성 시 유의사항 ✔ 테스트 파일 위치: django의 APP 디렉터리(test.py)에 작성✔ 테스트 자동 탐색: test_로 시작하는 함수명을 사용해야 함✔ 테스트 데이터 관리: 임시 데이터로 진행되며, 실제 데이터베이스에는 저장되지 않음 ✅ test.py에서 API 테스트 코드 작성 test.py 파일을 생성하고 아래와 같이 코드를 작성한다.from django.test import TestCasefrom django.urls import reverseclass APIsTest(TestCase): ..

API 문서화를 위해 **Swagger(drf-yasg)**를 적용하면,API 요청/응답을 한눈에 확인하고 테스트할 수 있다. 이 글에서는 Django REST Framework에서 Swagger를 설정하는 방법을 단계별로 설명한다. ✅ Swagger 설치하기 📍 1. 가상환경 활성화 터미널에서 Django 프로젝트의 가상환경을 활성화한다.source venv/bin/activate # Mac/Linuxvenv\Scripts\activate # Windows 📍 2. drf-yasg 패키지 설치 아래 명령어를 실행하여 drf-yasg를 설치한다.pip install drf-yasg 📌 설치가 완료되면 아래와 같은 메시지가 출력된다.#swagger 설치코드#작업 중인 파이썬 가상환경으로 이동..

Django에서 공공데이터 포털 API를 활용하여 데이터를 조회하고, 환경변수를 설정하며, 관리자 페이지를 생성하는 방법을 정리했다. 1. Django 코드 작성 이번 작업은 기존 프로젝트 구조를 유지하면서 진행한다. 코드 흐름 1. urls.pyAPI 경로는 /api/pubd/상세 URL은 pubdapp 앱 내부의 urls.py에서 관리 2. views.pynanet_search() 함수 생성nanet_post() 함수 생성 3. settings.pyGit에 공유되지 않아야 할 주요 키 값 저장 4. api.pyAPI 호출을 처리하는 함수 모음axios와 연계되는 로직을 포함nanet_api() 함수 생성 5. models.py요청(Request) 및 응답(Response) 데이터를 저장할 모델 Nan..

Django 프로젝트에서 기본적으로 필요한 앱인 admin, auth, contenttypes, sessions를 실행하려면 마이그레이션(migrate) 작업이 필요하다. 이 글에서는 가상환경에서 마이그레이션을 수행하는 방법을 설명한다. 1. 마이그레이션(migrate) 실행하기 먼저, Django 가상환경에 진입한 후 마이그레이션 명령어를 실행한다.python manage.py migrate 이 명령어를 실행하면 기본적으로 포함된 Django 앱(admin, auth, contenttypes, sessions)의 데이터베이스 테이블이 자동으로 생성된다. 📌 실행 예제(pubd_api) pubdapi % python3 manage.py migrateOperations to perform: Apply ..

Python 프로젝트를 진행할 때, 가상환경(venv)을 설정한 후 VS Code에서 코드를 실행하면 “Python 원본에서 가져오기 실패” 같은 오류가 발생하는 경우가 있다.이 글에서는 pylint를 설치하여 Python 가상환경과 VS Code를 정상적으로 연결하는 방법을 알아본다. 1. 오류 발생 원인 VS Code에서 Python 코드를 실행할 때, 올바른 가상환경을 인식하지 못하면 pylint 등의 코드 검사 도구가 동작하지 않을 수 있다.이를 해결하려면 가상환경에 pylint를 설치하고, VS Code에서 해당 가상환경을 올바르게 설정해야 한다. 2. 해결 방법: 가상환경에 pylint 설치 📌 1) 가상환경(venv) 활성화 먼저, Python 가상환경에 진입한다. Mac/Linux (ba..

Django와 프론트엔드가 서로 다른 도메인 또는 포트에서 실행될 때, CORS(Cross-Origin Resource Sharing) 오류가 발생할 수 있다. 이 글에서는 Django 프로젝트에서 CORS 오류를 해결하는 방법을 알아본다. 1. CORS 오류란? CORS 오류는 브라우저 보안 정책으로 인해 발생한다.백엔드(Django)와 프론트엔드(React, Vue, Angular 등)가 서로 다른 도메인에서 실행될 경우, 브라우저는 기본적으로 교차 출처 요청을 차단한다.  예를 들어,백엔드(Django): http://localhost:8000프론트엔드(Vue.js): http://localhost:8080위와 같이 도메인 또는 포트가 다를 경우, 브라우저는 이를 보안 위협으로 인식하여 요청을 차단..