뇌 채우기 공간

영화리스트가 있는 프로젝트를 만드는데 한번에 다 받아오기 말고 10개씩 끊어서 받아오고 싶은 것이다. https://developer.mozilla.org/ko/docs/Web/API/Intersection_Observer_API Intersection Observer API - Web API | MDN Intersection Observer API는 타겟 요소와 상위 요소 또는 최상위 document 의 viewport 사이의 intersection 내의 변화를 비동기적으로 관찰하는 방법입니다.Intersection Observer API는 타겟 요소와 상위 요소 또는 developer.mozilla.org 1. Observer.vue 만들기 이 컴포넌트는 무한 스크롤을 구현하고 싶은 컴포넌트 맨 하단..

vue cli 버전 : 3.0.0 sass-loader : 10.2.0 (sass loader는 설치했다고 간주한다.) 나는 미디어쿼리를 적용하기 위해서 글로벌로 모바일, 타블렛, 데스크탑 크기를 정해놓고 mobile, tablet , desktop 이 이름만 컴포넌트에서 쓰고 싶었다. 1. 글로벌 변수 파일 만들기 먼저 src폴더 아래에 style폴더를 만들고 _mixin.scss _variables.scss 파일을 만들었다. //_variables.scss $breakpoint-mobile: 335px; $breakpoint-tablet: 758px; $breakpoint-desktop: 1024px; //_mixin.scss @import './variables'; @mixin mobile { @m..

computed와 watch — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org [주제] 프로젝트를 만들면서 computed와 watch를 사용했는데 둘다 어떤 데이터에 의존해서 그 값이 변경하면 실행되는 것이 비슷한 것이다! 프로젝트에서는 거의 store 에서 값을 가져올때 computed를 쓰고 watch는 자동완성 검색 기능을 만들때 썼는데 적합하게 쓰고 있는 것인지 궁금하다! computed속성과 watch속성에 대해 알아보자! [computed 속성] {{ message.split('').reverse().join('') }} 예시에 나온 코드이다. 템플릿에 이렇게 복잡한 코드를 넣으면 좋지 않다. 한눈에 무슨 값이 들어가는지도 어려울 것이다. 이럴때 c..

https://kr.vuejs.org/v2/guide/forms.html 폼 입력 바인딩 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org v-model과 v-on v-model input과 textarea 엘리먼트에 양방향 데이터 바인딩을 생성할 수 있다. 연결을 해두면 자동으로 업데이트 된다. message인풋에 값을 입력하면 밑에 변수에 바로 바인딩 되어 나온다. 메시지: {{ message }} v-on : dom 이벤트가 트리거될 때 js를 실행할 수 있는 이벤트 리스너다. v-on을 줄여서 @로 작성한다. 이벤트의 종류 click : 마우스로 클릭했을 때 실행되는 이벤트 dblclick: 마우스로 더블클릭했을 때 실행되는 이벤트 mouseover : 마..

문제 이번에 프로젝트를 하면서 카카오 api키와 tmdb api키를 그대로 노출해서 사용하고 있었다. 이것을 따로 분리해주어야 한다. 깃허브에 환경변수 설정하는 법, json 파일이나 txt 파일로 만들어서 gitignore에 추가하고 불러오는 방법 등을 찾아보았는데 마음대로 잘안됐다. 해결 https://www.npmjs.com/package/dotenv dotenv Loads environment variables from .env file www.npmjs.com # with npm npm install dotenv # or with Yarn yarn add dotenv 1. dotenv를 설치 dotenv는 환경변수를 파일에 저장할 수 있도록 해주는 라이브러리이다. 2. root경로에 .env 파..

[데이터 바인딩이란?] 앱 UI와 해당 UI가 표시하는 데이터를 연결하는 프로세스 화면에 보이는 데이터와 브라우저 메모리에 있는 데이터를 일치시키는 것 바인딩 설정이 올바르고 데이터가 적절한 알림을 제공하는 경우 데이터 값이 변경될 때 데이터에 바인딩된 요소에 변경 사항이 자동으로 반영된다. [양방향 데이터 바인딩] 컨트롤러와 뷰 양쪽의 데이터 일치가 모두 가능한 것이 양방향 데이터 바인딩이다. 데이터의 변화를 감지해 템플릿과 결합해 화면을 갱신, 화면의 입력에 따라 데이터를 갱신하는 것이다. (HTML -> JS, JS -> HTML 양쪽 모두 가능) 양방향 데이터 바인딩은 데이터의 변경을 프레임워크에서 감지하고 있다가, 데이터가 변경되는 시점에 DOM 객체에 렌더링을 해주거나 페이지 내에서 모델의 변..

https://kr.vuejs.org/v2/guide/events.html 이벤트 핸들링 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org [이벤트 핸들링] {{ year }} 더하기 빼기 버튼에 onclick을 v-on:click으로 쓰고 plus와 minus라는 이름으로 정의한 method와 연결시킨다. 공식문서에서 보면 인라인으로도 쓸 수 있지만 methods에서 꺼내 쓰는 방법만 하겠다. [이벤트 수식어] 이벤트에는 요러한 수식어가 있는데 아래와 같이 사용한다. ... ... 예시 submit 여기서는 form태그에 submit의 수식어로 prevent를 써주었는데 이것은 submit을 하고 페이지가 새로고침되는 것을 방지해준다 .

[데이터 바인딩 하는 법] {{ nextYear("안녕하세요") }} 데이터 바인딩을 하려면 태그의 속성 앞에 v-bind: 라고 쓰거나 간단하게 : 라고 쓰면 된다. 이것은 Vue 인스턴스의 data안에 값과 연결된다. value에는 inputData에 있는 hello라는 값이 들어가고 type에는 type에 있는 number값이 들어간다.

뷰 공식 문서 시작하기 | Vue.js 시작하기 NOTE 이미 Vue 2를 알고 있고 Vue 3의 새로운 점을 배우고 싶으신가요? Migration Guide를 확인하세요! Vue.js가 무엇인가요? Vue(/vjuː/ 로 발음, view 와 발음이 같습니다.)는 사용자 인터페이스를 v3.ko.vuejs.org [시작하기] 기본적인 html파일을 만들고 script 코드를 추가해주면 간단하게 vue를 사용할 수 있게 된다. 이 코드를 head태그 안에 넣어준다. {{ name }} id를 app으로 주고 뷰 인스턴스를 만들어서 id가 app으로 연결시킨다. data안에는 객체형태로 값이 들어가있을 수 있다. name이라는 변수로 lee라는 값이 들어가있는데 그러면 id가 app인 div안에 {{ name..

[Vue란?] 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크 웹 페이지 화면을 개발하기 위한 프론트엔드 프레임워크 뷰 코어 라이브러리는 화면단 데이터 표현에 관한 기능들을 중점적으로 지원 프레임워크의 기능인 라우터, 상태관리, 테스팅 등을 쉽게 결합할 수 있는 형태로도 제공 [Vue의 장점] 배우기 쉽다 리액트와 앵귤러에 비해 성능이 우수하고 빠르다 리액트의 장점과 앵귤러의 장점을 가지고 있다. 앵귤러의 데이터 바인딩 특성과 리액트의 가상돔 기반 렌더링 특징을 모두 가지고 있음 [Vue의 특징] MVVM 패턴 화면을 모델 - 뷰 - 뷰 모델로 구조화 하여 개발하는 방식 뷰(View) : 사용자에게 보이는 화면 돔(DOM) : HTML문서에 들어가는 요소(태그, 클래스, 속성 등)의 정보를 담고 ..