전체 글 75

vue router, vuetify 설치하기 #13

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 프레임워크다.버튼, 카드, 네비게이션 바 등 다양..

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로 바로 진행하면 된다.#vue cli 설치#pubd_web 폴더로 이동하여 설치#npm ..

django Test 코드 작성하여 코드 안정성 높이기 #11

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): ..

django rest framework swagger drf_yasg 설정 #10

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 코드, 환경변수 설정, admin 생성하기 #9

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 APP들을 위한 마이그레이션(migrate) 작업#8

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 ..

pylint 로 python 가상환경 venv 코드와 vs code 와 연결시키기 #7

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 크로스 도메인 오류 해결 #6

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

django REST Framework 로 API 서버 구성하기 #5

Django에서 API 서버를 만들기 위해 Django REST Framework(DRF)를 사용한다.DRF는 웹 API를 쉽게 구축할 수 있도록 지원하는 강력하고 유연한 툴킷이다. 1. Django REST Framework란? Django REST Framework(DRF)는 Django에서 API 개발을 위한 가장 널리 사용되는 라이브러리이다.쉽고 강력한 API 설계 가능JSON 기반의 직렬화(Serialization) 지원세션 및 토큰 기반 인증(Authentication) 제공권한(Permissions) 및 필터링(Filter) 기능 내장📌 공식 문서: Django REST Framework 2. 가상환경 활성화 및 패키지 설치 📌 1) 가상환경 활성화 먼저, Django 프로젝트의 가상환경..

공공데이터 포털 에서 원하는 서비스 API 신청하기 #4

공공데이터 포털에서는 다양한 공공 API를 무료로 제공하고 있다.이번 글에서는 공공데이터 포털에서 원하는 API를 검색하고 신청하는 과정을 소개한다. 1. 공공데이터 포털 회원가입 및 로그인 API를 사용하려면 먼저 공공데이터 포털 회원가입이 필요하다.아래 사이트에서 회원가입을 진행한다. 🔗 공공데이터 포털: https://www.data.go.kr/ 공공데이터 포털국가에서 보유하고 있는 다양한 데이터를『공공데이터의 제공 및 이용 활성화에 관한 법률(제11956호)』에 따라 개방하여 국민들이 보다 쉽고 용이하게 공유•활용할 수 있도록 공공데이터(Datasewww.data.go.kr  공공데이터 포털은 정부 및 공공기관이 보유한 데이터를 개방하여,국민 누구나 쉽게 데이터를 검색하고 활용할 수 있도록 지원..