뇌 채우기 공간

https://www.gradient-animator.com/ CSS Gradient Animator A CSS generator to create beautiful animated gradients for use on your website. www.gradient-animator.com 스켈레톤으로 그라데이션이 움직이는 css를 만들고 싶어서 찾아보다가 발견한 사이트! 자동으로 애니메이션 코드를 생성해준다!

영화리스트가 있는 프로젝트를 만드는데 한번에 다 받아오기 말고 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..

2021.11.30 - [에러노트] - [에러노트] Unexpected mutation of "" prop [에러노트] Unexpected mutation of "" prop 프로젝트 : vue3 [원인] 부모에서 전달한 데이터를 props로 받고 자식에서 그것을 바로 수정하는 경우 생기는 에러 [해결] props로 받은 값을 변수화 해서 사용하고 emit을 통해 변경하면 된다. sso-feeling.tistory.com

1. vue persistedstate 2021.12.01 - [WEB/VUE.js] - [VUE.js] vue persistedstate [VUE.js] vue persistedstate sso-feeling.tistory.com 뷰에서 vuex에 넣으면 새로고침하면 사라지는 데이터들 중에서 새로 고침 했을 때 사라지면 안되는 데이터들 + 뷰엑스로 바로 반영이 되어서 화면에 반영되어야하는 것들 예를 들면 로그인 했을 시에 바로 헤더에 반영이 되는 것을 만들고 싶다던가! 그런 것을 위해서 쓰는 라이브러리. 뷰엑스에 저장했는데 로컬 스토리지에도 저장이 되어서 새로고침했을 시에 사라지지 않는다. 2. query 붙이기 2021.12.01 - [WEB/VUE.js] - [VUE.js] query string ..

1. vue 프로젝트에 대해서 https://sjquant.tistory.com/66 Vue3로 프로젝트를 진행하면서 알게 된 것들 최근에 Vue3와 Typescript를 학습하기 위한 목적으로 간단한 개인 프로젝트를 진행하였다. 해당 프로젝트를 진행하면서 알게 된 것들을 정리하고자 한다. Vue3에 대한 튜토리얼은 아니고, 시행착오에 sjquant.tistory.com 다른 사람이 정리해놓은 글인데 참고로! 2. vue suspense https://v3.vuejs.org/guide/migration/suspense.html Suspense | Vue.js Suspense new Experimental Suspense is an experimental new feature and the API coul..

1. 주석 항해 99를 할 당시 주특기 멘토님께서는 함수마다 어떤 역할을 하는지 간단하게 주석으로 적어놓는 것이 좋다고 하면서 우리팀 코드를 예시로 보여주었었다. 예를 들면 // 영화 리스트 모두 불러오기 이런식의 주석이었다. 그래서 나는 이번에도 개인 프로젝트를 할 때 함수마다 어떤 함수인지 간단하게 적어놓았다. 그런데 pr을 올리고 피드백 온 것을 보니 주석은 없을수록 좋고 주석이 필요할 정도의 코드라면 리팩토링을 하는것이 좋다는 것이다. 도대체 누구의 말이 맞는지 !?!? 그리고 난 주석이 있으면 코드 찾기도 더 쉽고 좋다고 생각했는데 실무에서는 그렇게 하지않는다니! 하면서 찾아보았다. https://danpatpang.github.io/tip/2018/04/12/Tip_java_comment/#%..

1. dotenv를 사용하여 api키 숨기기 2021.11.03 - [WEB/VUE.js] - [VUE.js] dotenv를 사용하여 api키 숨기기 / api key 환경변수로 분리하기 [VUE.js] dotenv를 사용하여 api키 숨기기 / api key 환경변수로 분리하기 문제 이번에 프로젝트를 하면서 카카오 api키와 tmdb api키를 그대로 노출해서 사용하고 있었다. 이것을 따로 분리해주어야 한다. 깃허브에 환경변수 설정하는 법, json 파일이나 txt 파일로 만들어 sso-feeling.tistory.com 2. git flow feature 브랜치 만들고 끝내는 법 2021.11.22 - [Git] - [Git] git flow feature branch 관리하기 [Git] git fl..

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