본문 바로가기

⭐ Personal_Study97

Vue: Basic Syntax Basic Syntax Template Interpolation 메시지: {{ msg }} HTML 메시지 : {{ rawHTML }} HTML 메시지 : {{ msg.split('').reverse().join('') }} ✔ 가장 기본적인 바인딩(연결) 방법 ✔ 중괄호 2개로 표기 Directives 기본 구성 ✔ v-접두사가 있는 특수 속성에는 값을 할당할 수 있다. 값에는 JS표현식을 작성할 수 있음 ✔ directive의 역할은 표현식의 값이 변결될 때 반응적으로 DOM에 연결하는 것 ✔ :을 통해 전달인자를 받을 수 있음 ✔ .으로 표시되는 특수 접미사 directive을 특별한 방법으로 바인딩 v-text & v-html {{ message }} const app2 = new Vue({ el.. 2022. 11. 7.

Vue Instance Vue Instance MVVM Pattern ✔ 소프트웨어 아키텍처 패턴의 일종 ✔ 마크업 언어로 구현하는 그래픽 사용자 인터페이스(view)의 개발을 Back-end(model)로부터 분리시켜 view가 어느 특정한 모델 플랫폼에 종속되지 않도록 한다. ✔ View: 우리 눈에 보이는 부분(DOM) ✔ Model : 실제 데이터 (JSON) ✔ View Model (Vue) View를 위한 Model View와 연결(binding)되어 Action을 주고 받음 Model이 변경되면 View Model도 변경되고 바인딩된 View도 변경 View Model 데이터가 변경되고 바인딩된 다른 View도 변경 MVVM Pattern 정리 ✔ MVC 패턴에서 Controller를 제외하고 View model을.. 2022. 11. 6.

Vue Intro Vue Intro Front-end Framework ✔ Front-end(FE) 개발이란? 사용자에게 보여주는 화면 만들기 ✔ Web App(SPA)을 만들 때 사용하는 도구 SPA: Single Page Application Web App이란? ✔ 웹 브라우저에서 실행되는 어플리케이션 소프트웨어 ✔ 웹 페이지가 그대로 보이는 것이 아닌 디바이스에 설치된 App처럼 보이는 것 SPA (Single Page Application) ✔ 서버에서 최초 1장의 HTML만 전달 받아 모든 요청에 대응하는 방식 ✔ CSR(Client Side Rendering) 방식으로 요청 처리 [참고] SSR (Server Side Rendering) ✔ Server가 사용자의 요청에 적합한 HTML을 렌더링하여 제공하는 방.. 2022. 11. 6.

DynamicFieldsModelSerializer DynamicFieldsModelSerializer 개요 Django의 DjangoRESTFramework(DRF)는 자체적으로 serializer 클래스를 제공한다. 그런데 view 함수에서 해당 model의 특정 field만 출력하거나, 혹은 nested relationship에서 특정 field만 상속받고 싶은 경우가 있다. 한두 개라면 따로 serializer를 만들어줄 수 있겠지만 여러 개라면 코드가 복잡해지고 변수명 짓기도 어려워진다. 따라서 'field' 인자를 따로 정의해 원하는 field만 출력하도록 하는 DynamicFieldsModelSerializer 클래스를 따로 정의해 해결할 수 있다. 코드 Serializer 클래스 정의 from rest_framework import seri.. 2022. 11. 6.

AJAX AJAX AJAX 개요 ✔ Asynchronous Javascript And XML (비동기 통신 웹 개발 기술) ✔ 비동기 통신을 이용해 화면 전체를 새로고침 하지 않고도 서버 요청을 보내고, 데이터를 받아 화면의 일부분만 업데이트 하는 기능 AJAX의 특징 페이지 새로 고침 없이 서버에 요청 서버로부터 응답(데이터)를 받아 작업을 수행 AJAX를 이용해 Django follow 기능 구현하기 사전준비 템플릿에 script 코드 작성을 위한 block tag 영역 작성 ... {% block script %} {% endblock script %} axios CDN 작성 {% block script %} {% endblock script %} id 속성 지정 및 선택, 불필요한 action과 metho.. 2022. 11. 5.

Axios Axios Axios 개요 ✔ JavaScript의 HTTP 웹 통신을 위한 라이브러리 ✔ 확장 가능한 인터페이스와 쉽게 사용할 수 있는 비동기 통신 기능 제공 Axios 기본구조 Axios 사용해보기 ✔ get, post 등 여러 method 사용 가능 ✔ then을 이용해서 성공하면 수행할 로직 작성 ✔ catch을 이용해서 실패하면 수행할 로직 작성 고양이 사진 api 가져오기 (Python) import requests print('고양이는 야옹') cat_image_search_url = 'https://api.thecatapi.com/v1/images/search' response = requests.get(cat_image_search_url) if response.status_code ==.. 2022. 11. 5.

이전 1 ··· 8 9 10 11 12 13 14 ··· 17 다음

티스토리툴바