본문 바로가기

분류 전체보기474

영화 정보 반환 API 만들기 axios 사용방법 사이트 axios/axios: Promise based HTTP client for the browser and node.js (github.com) GitHub - axios/axios: Promise based HTTP client for the browser and node.js Promise based HTTP client for the browser and node.js - GitHub - axios/axios: Promise based HTTP client for the browser and node.js github.com functions -> movie.js 파일 생성 const axios = require('axios') exports.handler = async f.. 2022. 1. 15.
Netlify-CLI 구성 공식문서 URL Netlify CLI Command List Netlify CLI Command List Netlify CLI Command List Welcome to the Netlify CLI! This site provides online access to all help strings in the Netlify CLI. For a more in-depth guide, please see our Getting Started guide on our main docs site. If you have questions, ideas, or would like cli.netlify.com netlify-dev x0 What is Netlify Dev? Watch the introduction (24 min.. 2022. 1. 15.
Netlify Serverless Function 기존 Netlify를 이용하여 웹페이지를 동작하면 개인의 데이터가 보여지는것을 확인할 수 있다. Get방식으로 파라미터가 전부 보여진다. 따라서 Function 설정을 따로 해주어야한다. 공식문서 url: Build functions with JavaScript | Netlify Docs Build functions with JavaScript Netlify builds, deploys, and hosts your frontend. Learn how to get started, find examples, and access documentation for the modern web platform. docs.netlify.com 기존 프로젝트에 폴더 및 파일 생성 1. 루트경로 -> netlify.tom.. 2022. 1. 14.
SPA Traditional Web Application: 데이터를 요청할 때마다 페이지로드(전통적인 웹 어플리케이션) 위 방법의 단점을 해결하기 위해 SPA로 대체한다. SPA: Single Page Application 페이지 로드 없이 데이터 요청 SPA 장점 1. 빠르고 자연스런 전환으로 훌륭한 사용자 경험 제공 2. 더 적게 요청해 빠르게 렌더링 가능 3. 컴포넌트 단위 개발로 생산성 향상 4. 쉬운 분업화 SPA 단점 1. 느린 최초 로드 => Lazy loading, 브라우저 캐싱를 이용하여 보완 2. 어려운 검색 엔진 최적화(SEO) => SSR, Serverless Functions를 이용하여 보완 3. 모든 데이터 노출 => 비즈니스 로직 최소화하여 작성하여 보완 2022. 1. 14.
검색 정보 초기화 및 페이지 전환 스크롤 위치 복구 스크롤을 첫 화면에서 제일 밑으로 하고 다음 페이지로 이동하면 스크롤 위치가 제일 밑으로 되어 이동되는 현상 방지하는 방법 스크롤 동작 | Vue Router (vuejs.org) 스크롤 동작 | Vue Router 스크롤 동작 클라이언트 측 라우팅을 사용할 때 새로운 경로로 이동할 때 맨 위로 스크롤하거나 실제 페이지를 다시 로드하는 것처럼 컨텐츠 항목의 스크롤 위치를 유지할 수 있습니다. vue-router router.vuejs.org router --> index.js 코드 추가 export default createRouter({ // 화면이동시 스크롤 위치 제일 위쪽으로 설정 scrollBehavior() { return {top: 0} }, 다시 메인으로 이동시 검색 초기화 설정 store .. 2022. 1. 13.
반복적인 내용을 효율적으로 관리하는 방법: Vuex Helpers 반복적으로 해당 데이터를 보여줄때 효율적으로 관리하는 방법 url: State | Vuex (vuejs.org) State | Vuex State Single State Tree Vuex uses a single state tree - that is, this single object contains all your application level state and serves as the "single source of truth." This also means usually you will have only one store for each application. A single st next.vuex.vuejs.org 예제 코드 변경전 computed: { image() { return this.$.. 2022. 1. 13.

티스토리툴바