하루에 0.01%라도 성장하자
반응형

Develop 104

Vue - Component 간의 Method 호출 방법

우선 Vue는 Component 를 많이 사용한다. 아주 기본적일 수 있지만 우선 Component 간의 통신에 대해서 간단하게 설명한다. 먼저 처음에 개념을 잘못 잡고 갈 수 있는 부분이 있어서 간단하게 설명한다. [ 예시 ] 화면에 UI가 저렇게 구현되어 있다고 하자. 저기서 헤더는 Component로 구현했다면 코드는 이렇게 구성된다. // page.vue 페이지 import TheHeader "@/component/Header.vue" export default{ component : { "the-header" : TheHeader, }, method:{ callPageMethod(){ console.log("저는 페이지 메소드 입니다.") } } } // TheHeader.vue 헤더 expor..

Develop/Vue.js 2021.12.01

Vue - select 태그에서 default Value 셋팅하기.

기본적으로 select 는 이렇게 쓴다. 보기를 선택하세요 프라우드먼 YGX Hook 라치카 코카N버터 웨이비 원트 이렇게 하면 보기를 선택하세요가 보여지고 하단에 셀렉트 박스가 보여지는데, vue에서는 v-model을 사용한다. 따라서 v-model을 사용하게 되면 이런 코드가 된다. 보기를 선택하세요 프라우드먼 YGX Hook 라치카 코카N버터 웨이비 원트 이렇게 v-model을 주는데, 그렇다면 우리는 어떻게 default value를 설정할 수 있는가? v-model을 사용하면 checked와 selected 속성을 무시한다! 따라서 우리는 초기데이터를 셋팅해 주어서 default value를 셋팅해야 한다. 보기를 선택하세요 프라우드먼 YGX Hook 라치카 코카N버터 웨이비 원트 {{ SWF...

Develop/Vue.js 2021.11.23

Android - Compose Codelab

이번에 GDG 에서 안드로이드 Compose DevFest2021 행사를 시작했다. 우연히 카카오톡 광고를 통해 알게되었고 바로 신청 ㄱ ( 카카오톡 광고의 재발견이랄까 .. ) 알고보니 이번에 JetPack Compose 1.0 버전 출시로 코드랩 행사를 하는 것이었다. 11월 1일 ~ 30일 동안 9개의 코드랩을 수행하고 그중 7개를 정상적으로 클리어 하면 수료되는 과정 ( 당연 무료. 구글 만세 ) 이 회사에 와서 안드로이드만 하는 것이 아니기 때문에 안드로이드 정책이나 다양한 툴의 발전에 많은 관심을 두지 못하였다 ( 사실 그전에도...ㅎ ) 하지만 이번에 이렇게 좋은 기회를 만나서 한번 해보려고 한다. 사실 아직 작성은 안했지만, 이글을 쓰는 이순간 Codelab Week1은 끝냈다.. 하하 b..

Develop/Android 2021.11.16

Android - 코로나 정책

최근에 코로나 정책 때문에 구글 플레이 스토어 배포에 아주 애를 먹었다. 구글 코로나 관련 정책 안내 우선 이 업데이트는 2021년 8월 17일에 최종 업데이트 되었다. 구글 콘솔 개발자 계정에 들어가면 새로운 앱 컨텐츠 항목이 생겼는데, 이렇게 생겼다. 즉 출시한 앱이 코로나19 관련 앱인지 확인하는 것. 현재 개발 중인 앱은 코로나 백신 접종자를 대상으로 항체검사를 진행해 항체가 있는지 여부를 확인해주는 기능과 메뉴를 제공하려고 했는데, 해당 메뉴에 '코로나19' 라는 문구가 들어가다 보니 리젝을 받았다 .. 그러면서 알게된 코로나 정책. 즉 코로나19 가지고 뭔가 기능을 제공하면 리젝이구, 코로나19 관련된 뉴스기사를 제공하거나 '코로나19'가 메인이 아닌 '코로나19 시대에 어울리는 취미' 같은 ..

Develop/Android 2021.11.09

v-show, v-if 의 차이

v-show와 v-if는 특정한 영역을 보여줄것인가 보여주지 않을 것인가에 대한 기능으로 사용된다. 다만 초반에는 v-show와 v-if가 비슷한 것으로 알려져 있는데, 이는 조금 다르다. v-if의 경우에는 조건이 맞을 경우에만 렌더링을 한다. v-show의 경우에는 조건이 맞지 않아도 우선 렌더링을 하고 display 옵션을 none으로 처리한다. 따라서 v-if의 경우 렌더링이 무거운 화면일때 주로 사용하고 v-show의 경우 dialog 처럼 on/off가 잦은 화면이나 뷰에서 사용한다.

Develop/Vue.js 2021.10.10

UX - 인터렉션의 이해

인터렉션 둘 이상의 물체나 대상이 서로 영향을 주고 교감하는 하는 행동 크게 사용자 사용자 제스처와 디바이스 효과로 나눌 수 있음. 디바이스 효과(Device effect) 개념 모바일 앱 화면 전환 효과를 말함. 페이드 인 & 아웃 A 에서 B로 화면이 전환될 때 A가 흐려지면서 B가 진해지는 효과 슬라이드 전환 방향에 따라 레프트, 라이트, 업, 다운으로 구분 슬라이드 오버레이 새로나오는 B 화면이 기존에 A화면 위로 올라오는 효과 모바일 앱에서는 메뉴, 설정, 마이페이지 등에 많이 사용됨 슬라이드 리비얼 기존의 A 화면이 나가고 그 자리에 B 화면이 나오는 효과 서브 화면에서 다시 메인화면으로 넘어갈 때 사용 슬라이드 푸시 B 화면이 A 화면을 밀어내면서 나오는 효과 주제가 다른 화면이나 메뉴로 이..

Develop/UI & UX 2021.10.05

Android - DataClass, DataBinding

DataClass 와 DataBinding을 이용한 MVVM 패턴 구현하기 첫번째 스텝이다. 먼저 DataBinding을 진행하려면 아래와 같은 설정을 해준다. 설정 project 단위의 gradle에 아래와 같은 설정을 해준다. plugins { id 'kotlin-kapt' } android { .... dataBinding{ enabled = true } } DataClass 만들기 User라는 DataClass를 만들어서 Model 형태로 사용한다. data class User( val firstName : String, val lastName : String } layout.xml 에 DataBinding 진행하기 xml 파일로 되어있는 layout 파일에 dataBinding을 해준다. 여기서..

Develop/Android 2021.06.30

Vue - .vue 파일에서 commit 이용하기

기본적으로 Vuex를 사용하면 mutation을 이용한 action.js 파일에서 commit을 한다. 즉, API를 이용해 받은 response값을 commit으로 저장하여 getter를 호출해 가져오는 형태로 사용한다. 하지만 가끔 *.vue 파일에서 특정한 값을 저장해서 getter로 손쉽게 불러와야 하는 경우가 발생한다. 이때. 우리는 아래와 같이 쓴다 this.$store.commit("setData", this.data); 이미 main.js에 store가 선언되어 있고 setData라는 mutations을 사용하는 방법이다. 위 코드를 사용하면 setData 를 통해서 this.data 값이 미리 선언된 글로벌한(?) 변수에 저장이 되고 이를 getter를 이용해 가져다 쓸수 있게 되는 것...

Develop/Vue.js 2021.05.21
반응형