티스토리

hyeoneee's blog

검색하기

블로그 홈

hyeoneee's blog

hyeonyeee.tistory.com/m

hyeoneee 님의 블로그입니다.

구독자: 3

방명록 방문하기

주요 글 목록

[Vuex] Vue의 상태 관리 및 Helper( mapState, mpaGetters, mapMutations, mapActions) Vuex를 다시 일하면서 쓸일이 생겼다.. ㅎㅎ.. 알고는 있지만 정확하게 이해하고 있는거 같진 않아서 다시 정리해보고자 한다! (백엔드 위주로 하고싶은데.. 참,,, FE 를 놓지 못하게 한다 회사가) 1. Vuex 란? Vue의 상태(State) 관리 도구 상태: 여러 컴포넌트 간에 공유되는 데이터 속성 서비스가 복잡해 졌을 때, 데이터를 다른 컴포넌트에 공유해야 할 수도 있음 컴포넌트 레벨이 깊어지거나 관계가 복잡했을 때 상태관리 도구는 유용하게 사용 컴포넌트에서 API를 불러와 화면을 그리는 것이 아닌, Vuex에서 API를 불러옴 Vuex의 State에 API로부터 받아오 데이터를 담음 State를 컴포넌트에 전달하여 화면을 그림 Vuex 구성요소 state : 여러 컴포넌트에 공유되는 data.. 공감수 0 댓글수 0 2024. 1. 29.
[Vue] CodeMirror 사용하기 , Max Length 설정하기 vue 에서 code Mirror를 쓰는 방법과 더나아가 MaxLength를 설정하는 방법을 알아보좌! 1. Code mirror 설치 npm install vue-codemirror --save 그러면 package.json에 codemirror가 추가된걸 확인 할 수 있다. 2. main.js 에 선언 import Codemirror from 'vue-codemirror'; Vue.use(Codemirror); 3. code mirror 컴포넌트 사용 v-model에는 codemirror에 입력되는 값을 변수 선언한 뒤 넣어주고 다양한 모드와 옵션이 있는데 그건 부모 컴포넌트에서 options 로 선언해주고 props로 내려주면된다. 나같은 경우에는 query를 입력하는 창이라 관련되어서 옵션을 da.. 공감수 0 댓글수 0 2021. 11. 8.
[Vue] Component Force Rerendering 하기 (강제로 rerender) vue 개발을 하다가 data의 값이 잘 바꼈는데 컴포넌트 rerendering이 잘안돼서 그대로 이상한 값이 남아 있는 경우가 있었다. 그래서 찾아보니 좋은 stackOverFlow를 발견.. 강제로 rerendering을 시켜주고 싶었다! https://stackoverflow.com/questions/32106155/can-you-force-vue-js-to-reload-re-render Can you force Vue.js to reload/re-render? Just a quick question. Can you force Vue.js to reload/recalculate everything? If so, how? stackoverflow.com 이중에 어떤 방법을 할까하다가 처음엔 당연히 t.. 공감수 7 댓글수 4 2021. 10. 26.
[Vue] computed , watch 중에서 뭐써야하지??? 헷갈리네 이번에 vue.js 개발을 많이 하게되면서 가장 헷갈리게 된 포인트가 이것이다 언제 computed를 쓰고, 언제 watch를 쓰지? 사실 두개다 얻어지는 결과값은 엇비슷하기 때문이다 그래서 이 고민을 많이 했다 그러면 더 이상 고민하지 않도록 정리보도록 하쟈 ㅎㅎ 예제도 쓰면 좋지만 ㅎㅎ vue 공식문서에 있는것을 보면 될듯 싶다. 1. computed : 반응형 getter - 사용하기 편하고, 자동으로 값을 변경하고 캐싱해주는 반응형 getter - 선언형 프로그래밍 방식 - 계산된 결과가 캐싱된다. computed 속성은 해당 속성이 종속된 대상이 변경될때만 함수를 실행한다 이는 method와 다른 점이다. method를 호추하면, 렌더링을 할 때마다, 항상 함수를 실행한다. - computed는.. 공감수 1 댓글수 0 2020. 10. 30.
[Vue] 컴포넌트를 특정부분만 수정해서 쓰고싶다면? Slot ( 컴포넌트 재사용하기) 업무를 하면서 잘쓰던 컴포넌트가 있었다. 엄청 여러 화면에서 범용적으로 쓰는 컴포넌트 였다 그런데 어떤! 특정한 화면! 에서만 비지니스적인 요구사항에 의해 특정 부분 예를들어 버튼이나. 문구 등을 바꾸고 싶었다 그렇다고 문구나 명명 한두개만 바꾸면 되는데 굳이 새로운 컴포넌트를 만들어야 할까??? 아니. 근데 또 기존 컴포넌트를 이용하고 싶은데 기존 이 컴포넌트는 가져다 쓰는 화면에서는 영향도가 없었으면 좋겠어! 이런 요구사항이 있었다.. 정말 완벽하게 딱 맞는 개념이 있다 그거슨,,, 바로 Slot 1. Slot 이란? 컴포넌트의 재사용성을 높이기 위해서 사용하는 기능이다. 2. 예시 의 부모 Your Profile 이런식으로 해주면 의 부분에 Your Profile이란 글씨가 나오게된다. 3. 컴파일.. 공감수 0 댓글수 0 2020. 6. 25.
React : Functional component 와 Class component의 차이점 React를 공부하다보니깐 compoent의 종류가 두가지가 있었다 Functional compoent와 class component 두개의 차이점이 궁금해졌다 그래서 알아보고자한다 사실 create-react-app 으로 프로젝트 생성할때 이전에는 class component로 생성 되었던거 같은데 이번엔 functional component로 생성되길래 오잉또잉??ㅇㅅㅇ??? 해서 찾아보게 된것이다,,, 후후 이글은 사실 https://medium.com/@Zwenza/functional-vs-class-components-in-react-231e3fbd7108 다음글을 거의 해석한것과 다름없다. 그럼 시작해보자 꼬고! 1. Functional Component VS Class Component Fu.. 공감수 0 댓글수 0 2020. 3. 24.
Angular vs React vs Vue.js 비교 Angular React Vue 출시 2010년에 Google에서 2013년에 Facebook에서 2014년 Google직원인 Evan You TypeScript X X DOM Real DOM Virtual DOM Virtual DOM 바인딩 단방향 , 양방향 데이터바인딩 단방향 데이터 바인딩 단방향 , 양방향 데이터바인딩 Template HTML파일에 마크업을 작성 JSX 기술 HTML파일에 마크업을 작성 Popularity 3. 1. 2. Usercase Google, The Guardian , Weather.com Facebook, Twitter, Whatsapp, Instagram 9Gag, GitLab develop Angular CLI Create React App Vue CLI 저번주에는 개.. 공감수 0 댓글수 0 2019. 12. 6.
Angular vs React vs Vue 비교 Front end Framework 3개중 고민하는 사람이 많을 것으로 생각한다. 예전에는 Angular가 대세였지만 요새는 React와 Vue 중에서 고민을 하는거같다 그래서 세개를 다양한 관점에서 비교해 봤다. 해당 사이트를 요약해서 표로 만들어 봤다 (https://hackernoon.com/angular-vs-react-vs-vue-which-is-the-best-choice-for-2019-16ce0deb3847) Angular React Vue Popularity 3. 1. 2. Introduction to the background Released in 2010 by Google Released in 2013 by Facebook Released in 2014 by Evan you who i.. 공감수 0 댓글수 0 2019. 11. 25.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.