💬 이 글은 2016년 7월 11일에 올라온 해외 게시글을 제가 번역한 글입니다. [원문 출처: Keep it usable]
💦 의역하려고 했으나, 오역이 있다면 댓글로 알려주세요.

페이스북의 업데이트된 버전이 형편없다고 사람들이 불평하는 걸 몇 번이나 들어보셨나요? 업데이트 때마다 사람들은 화를 내며 다시는 페이스북을 사용하지 않겠다고 단호하게 말하지만, 결국 변화에 익숙해지고 다음번 업데이트 때까지 다 잊어버리죠. 페이스북에 대한 사람들의 반발이 타임라인으로 만들어졌을 정도니깐요!
 
페이스북은 이러한 비슷한 예시들 중 하나일 뿐이고, 인터넷 전반에 이커머스 웹사이트나 앱들을 포함해 정말 많은 예시들을 찾아볼 수 있습니다. 그런데 사람들은 왜 웹사이트, 소프트웨어나 앱의 변화에 이렇게까지 거부감을 보이는 걸까요? 변화에 대한 이러한 사용자들의 반감을 ‘아기 오리 증후군’이라고 부릅니다.
 

아기 오리 증후군

하지만 대체 아기 오리들과 사용자 행동이 무슨 상관이라는 걸까요?

이 이름의 근원지는 심리학과 동물행동학에서 찾을 수 있습니다. 콘래드 로렌츠(Konrad Lorenz)는 동물 행동을 연구했는데, 둥지를 일찍 떠난 갓 태어난 아기 오리들이 처음 보는 움직이는 물체와 어떻게 본능적으로 유대를 하고 “각인”이 되는지에 대해 관찰했습니다. (그의 경우엔 오리가 처음으로 보게 된 것이 콘래드 본인이었죠.)
 
사람들은 온라인에서 동일한 행동을 보입니다. 사용자는 어떠한 방식으로든 웹사이트나 소프트웨어와 상호작용하기 위해 시간과 노력을 들여서 방법을 배웁니다. 일단 플랫폼에 익숙해지고 좋아하기 시작하면, 사람들은 습관을 바꾸는 것에 어려움을 겪습니다. 일반적으로, 사람들은 익숙한 것이 더 쉽고 효율적이라고 받아들이고 익숙하지 않은 것은 그 반대로 받아들이죠. 사람들은 자신이 처음 배운 시스템에 “각인”이 되는 경향이 있고, 다른 시스템을 처음 배웠던 것과의 유사성을 통해 평가합니다. 기존 시스템에 변화를 주는 것은 실제로 사용하기에 더 쉽더라도, 사용자에게는 더 어렵다고 인식될 수 있습니다. 새로운 기능에 익숙해지기 위해 새로운 학습과 노력을 필요로 하기 때문이죠.
 
이것은 디지털 환경에만 국한된 것이 아닙니다. 오프라인 세상에서도 사람들은 변화에 주저하는 모습을 보입니다. 루틴을 유지할 수 있을 때 안전하다고 느끼기 때문에, 본능적인 내면의 힘이 자신들이 배운 것과 알고 있는 것을 고수하도록 자극합니다.
 
사람들은 이미 유용하다고 여겨졌던 것에 급격한 변화가 생겼을 때, 근본적으로 경험에는 차이가 없을 경우 반발합니다. 그리고 아주 금방 반발하기 시작하죠.
 
 

UX 디자이너와 프로덕트 오너(PO)의 딜레마

그래서… 여러분이 직면한 딜레마는 이겁니다. 만약 인터페이스를 그대로 유지한다면, 사용자들은 만족할 거고 편안함을 느낄 거예요. 하지만 인터페이스는 시간이 지날수록 과거에 갇혀 시대에 뒤떨어질 거라는 리스크가 있죠. 사용자 경험을 개선하기 위해 UI와 인터랙션을 바꿔야 하는 이슈가 있을 수도 있구요. 하지만 변화를 크게 바꾼다면, 그것이 비록 더 나은 것을 위함이어도 여러분의 사용자들은 반발하며 이전 버전이 더 좋다고 여길 것입니다. (심지어 이전 버전이 더 나쁘다는 것을 테스트하고 증명했더라도 말이죠!)
 
제품을 최신 상태로 유지하는 것도 물론 중요하지만, 동시에 사용자들에게 쉽고 쾌적하게 사용할 수 있는 인터페이스를 제공하여 사용자들이 만족한 상태를 유지하게 하는 것도 중요합니다. 화가 난 사용자들과 SNS는 좋은 조합이 아니니까요!
 
 

사용자의 불만을 최소화하면서 변화를 만드는 방법

• 사람들이 안심하고 지원받는다고 느껴도록 도움말을 제공해야 하며, 과도기 단계 내내 안내를 해줘야 합니다.
• 사용자들을 위해 곁에 있어주세요. 변경 내용에 대해 설명해 주고 어떻게 해야 하는지에 대해서 안심시켜주세요. 사용자들이 강요당하거나 강압적이라고 느끼지 않도록 해야 하며, 인터페이스가 사용자에게 변경사항을 만들도록 지시하는 대신에, 함께 소통해야 합니다.

 
만약 웹사이트, 앱, 또는 소프트웨어에 변경 사항을 주어 사용자를 불편하게 하는 위험을 감수할 준비가 되어 있다면, 동시에 그 변경사항이 그런 위험을 감수할 만한 가치가 있는지 100% 확신해야 합니다.
 

• 사용자 테스트를 진행해 보세요. 새로운 버전의 웹사이트나 소프트웨어를 사용하는 사용자를 관찰하고, 피드백을 기록하면서 변경 프로세스를 계속해서 진행하며 개선하세요.
• 이러한 변경사항들이 이미 테스트되었고 사용자의 이익을 위해 변경하고 있다는 것을 사용자들이 인지하도록 하여 변화에 대한 두려움을 줄여주세요. 그리고 이유를 설명해주세요.
• 모든 것을 한 번에 바꾸는 대신, 일련의 작은 점진적인 변경사항을 주도록 하세요. 이것은 페이스북이 지금 하고 있는 것이며 대부분의 사용자들은 이런 작은 변경들이 결국 같은 결과를 이끌어 내더라도 전혀 인지하지 못합니다.
• 사용자들과 상호작용하여 의견을 수렴하세요. 트윗, 페이스북, 포럼 등에서 사용자들의 기대와 걱정 등의 의견을 들어주세요.
• 인터페이스를 테스트하여 사용자가 개선 사항을 이해하고 마침내 받아들이게 할 수 있는 구체적인 증거를 모으세요.

💬 이 글은 2023년 2월 14일에 올라온 해외 아티클을 제가 번역한 글입니다. [원문 출처: 작성자 FlowMapp]

💦 의역하려고 했으나, 오역이 있다면 댓글로 알려주세요.

기술이 발전함에 따라 소비자들의 기대치도 높아지고 있습니다. 12년 전에는 직관적이고 심플한 인터페이스를 가진 웹 제품이 원활하게 작동하기만 하면 타겟 고객층에게 성공할 가능성이 있었다지만 오늘날에는 그것만으론 충분하지 않죠.

특히 요즘 사용자들은 "문제에 대한 효과적인 해결방안" 그 이상의 것을 기대하고 있어요. 좀 더 독특하고, 개개인에게 맞춤화된 경험을 원하고 있죠. 이러한 점은 통계에서도 확인할 수 있는데 Twilio의 2022 개인화 보고서에 따르면 소비자의 62%는 개인화되지 않은 경험을 제공하는 브랜드는 충성도를 상실할 것이라고 말하고 있습니다. 그렇다면, 이러한 경험을 실제로는 어떻게 제공할 수 있을까요? 

UI 개인화의 7가지 주요 방법

사용자 인터페이스를 디자인할 때 고려할만한 ‘7가지의 주요 개인화 방법’을 아래에서 제안 드려볼게요!

맞춤 설정

UI 맞춤 설정이란 보통 최종 소비자*가 어떠한 설정을 자신의 필요성이나 취향에 맞추어 원하는 대로 바꿀 수 있도록 허용하는 것을 말합니다. 하지만 이러한 기능이 기본적으로 활성화되어 있지는 않으므로 사용자가 인터페이스에서 직접 설정을 지정해야 합니다.

일반적으로, 개인화라는 것은 사용자가 무엇을 원하는지 스스로 정확히 알고 있을 때 사용자 경험을 향상시키는 것에 도움이 되죠. 따라서 이러한 부분을 구현하기 위해 인공지능(AI)을 사용할 필요는 없습니다.

*최종소비자(end user): 제품을 구입하여 사용하는 가장 마지막 단계에 있는 소비자

디자인 출처 JORDAN HUGHES

적응형 디자인

초기에는 웹사이트의 인터페이스를 어느 기기에서든 올바르게 표현하기 위한 방법으로 반응형 디자인이 사용되었지만, 요즘에는 이 개념이 더욱 엄격한 디자인 요구사항을 포괄하고 있어요.

특히 UI를 조정할 때, 특정한 물리적 배열이나 사용자 기기의 운영체제(OS)에 맞추는 것뿐만 아니라 제품의 동작이나 맥락에도 맞추어야 합니다. 이러한 권장사항은 한 번에 여러 작업을 수행할 수 있는 다기능 제품이나 다양한 사용자 역할이 있는 제품에 적합합니다.

디자인 출처 JORDAN HUGHES

개인화 컨텐츠

개인화 컨텐츠란 ‘사용자의 위치, 검색 쿼리, 클릭한 광고, 구매 기록, 성별 및 연령, 사용자 장치의 종류 (스마트폰, 태블릿, 컴퓨터 등), 사용자 장치의 운영 체제 (iOS, Android, Windows, MacOS, Linux 등), 세션 중 사용자의 행동’ 등 액세스 가능한 데이터를 기반으로 소비자에게 다양한 유형의 컨텐츠를 맞춤 제공하는 것입니다.

이러한 모든 데이터는 통합 또는 개별적으로 고려되어서 웹 솔루션이 고객과 더 나은 상호 작용을 할 수 있도록 도와주며, 결과적으로 높은 전환율을 도출할 수 있게 합니다.

디자인 출처 ALEX ARUTUYNOV

추천 시스템

추천 시스템은 사용자 데이터를 기반으로 관련이 있는 제품이나 서비스를 선택하는 알고리즘입니다. 이러한 시스템은 보통 머신러닝을 기반으로 하지만, 일부 솔루션들은 더 간단한 알고리즘을 사용하기도 하죠. 서비스와 제품에 고급 추천 시스템을 도입한 가장 선구 기업 중 하나로는 아마존과 넷플릭스가 있습니다.

현재 추천 시스템에 사용되고 있는 두 가지 주요 접근 방식은 협업 필터링과 컨텐츠 기반 모델입니다. 협업 필터링의 기본 원칙은 비슷한 관심사를 가진 다른 사용자에 대한 데이터를 기반으로 추천을 생성하는 것입니다. 반면 컨텐츠 기반 모델은 제품의 특성, 예를 들어 브랜드, 유형 또는 원산지와 같은 속성에 초점을 맞춥니다.

디자인 출처 JORDAN HUGHES

개인화 검색

개인화 검색은 각 사용자에게 맞춤형 접근 방식으로 인터넷을 검색하는 알고리즘입니다. 특정 사용자가 다음에 무엇을 찾아야 할지 예측하려고 하는 이 알고리즘은, 주로 브라우저 기록의 이전 데이터를 이용해 이러한 "추측"들을 모아내죠.

검색할 때는 특정 사용자가 이전에 방문했던 웹사이트와 사용자의 지역, 취향 등 많은 요소들이 고려됩니다. 통틀어 말하자면 총 200여 개의 요소가 있습니다.

디자인 출처 MONTY HAYTON

맥락-인지 인터페이스 

맥락-인지(context-aware) UI는 소비자가 사용하는 소프트웨어 솔루션의 상태에 따라 특정 설정을 구성합니다. 일반적으로 센서와 사용자의 환경에서 수집한 데이터를 활용해서 관련된 정보와 추천사항을 제공하죠.

맥락 민감도를 도입하는 주된 이유는 사용자 경험을 향상시키기 위해서입니다. 특히 이 기능은 필요한 클릭 수나 키 입력 수를 줄여서 특정 작업을 더욱 간편하게 만들기도 합니다. 또한 인터페이스 자체가 제한된 옵션 중에서 최상의 선택을 제공하기 덕분에, 사용자가 화면에 표시된 다양한 메뉴 항목에 혼란스러워할 필요가 없습니다.

디자인 출처 MONTY HAYTON

개인 맞춤형 메세지

마지막으로, 사용자가 특정 동작을 수행하면 화면에서 볼 수 있는 개인 맞춤형 팝업 메세지가 있겠네요. 맞춤형 언어와 보이스톤을 사용해서 소비자에게 특별한 느낌의 최고급 라이브 서비스를 제공하는 것입니다.

디자인 출처 JORDAN HUGHES

아무 옷이나 막 사고 한 철 입을만한 저렴한 옷을 사서,

그걸 또 한 철 입고 버리는 게 아니라 몇 년씩 입다 보니...

(심하지만 아직도 옷장에 고등학생 때 입던 옷들도 있다..)

나도 내일모레면 곧 서른인데, 이제는 진짜

"오래 멋지게 입는다는 생각으로 제대로 된 옷을 사모아 보자"라는 생각으로

옷장 정리도 하고, 또 괜찮은 옷을 사기 위해 이리저리 공부하는 중이다.

역시 아는 만큼 보인다고, 배우고 나니 내가 입던 옷들이 다시 보인다

가지고 있던 코트들이 울 함량이 50%도 안 되고, 폴리는 엄청 섞여 있고... 

나는 무거운 코트가 싫고, 따끔거리는 게 싫었는데,

그런 게 싫으면 어떤 소재의 옷을 사야 하는지 이제 대충은 감이 오는 것 같다.

패션 디자이너 '보라끌레르' 유튜버님의 영상들이 정말 참고가 많이 되었다.

요즘은 정말 양질의 정보를 무료로 풀어주시는 분들이 참 많은 듯....

나도 배운걸 스스로도 정리할 겸, 또 혹시라도 궁금하실 어떤 분들이 계신다면

검색으로 궁금한 점 쉽게 해결할 수 있도록.. 글로 작성해보려고 오랜만에 티스토리를 열어봤다!

신기하게도 내 티스토리에 그래도 하루에 20명씩은 항상

구글 검색으로 사람들이 들어오고 있었다.

다시 제대로 살려볼까...? 하는 생각도 든다 ㅎㅎ

물론 아직도 멀었기 때문에 새로 배우거나 수정할 부분이 생기면 또 추가해야겠다....

울 종류에 대한 정의

램스울, 버진울, 메리노울... 다양한 울이 있는데 우선 이 3가지 울 종류들은 무조건 좋은 울이라고 할 수 있다.

그래서 택에 이런 울이라고 적혀있다면 믿고 사도 된다고 한다.

램스울

어린양들의 털. 어린양의 털이기 때문에 매우 가볍고, 부드럽다. 일반 울보다 보온성이 뛰어나고, 가격도 비싸다. 

버진울

양이 자라서 처음으로 깎아낸 털. 부드럽고, 가볍고, 보온성이 높고, 비싸다. 

메리노울

메리노라는 품종의 양털로, 가볍고, 보온성이 좋다. 극한의 추위와 더위를 견딘 양이기 때문에 퀄리티가 매우 좋다.

(여름옷에 쓰면 시원하고, 겨울옷에 쓰면 따뜻함)

셰틀랜드울

쉐틀랜드 지역의 양에서 나온 울로 메리노울보다는 두껍고 거친 느낌이다. 탄력성과 내구성이 좋다. 

재생울

재생울은 이미 썼던 울을 다시 쓰는 걸로, 숨을 머금지 못해서 촉감도 거칠거칠하다.

파인울, 프리미엄울

'램스울,버진울,메리노울' 이런 식으로 적힌게 아니라 그냥 '파인울, 프리미엄울' 이런식으로 적혀있다면,

그냥 "우리는 꽤 괜찮은 퀄리티의 울을 썼다"라고 어필하는 정도로 받아들이면 된다고 한다...

울에 대한 궁금증

울100%라고 무조건 좋다?

아니다. 

울 100%라고 쓰여있어도 그 안에 '재생 울'이 얼마나 들어가 있는지 쓰여있지 않기 때문에 거칠거칠할 수도 있다.

중요한 건 어떤 울을 썼는지, 울의 퀄리티가 중요하다.

따라서, 울 70%여도 좋은 울을 썼다면 울 100%보다 좋을 수도 있다는 것!

그리고 울코트라면 울이 최소한 70~75% 정도는 섞여줘야 울코트라고 할 수 있다고 한다.

가장 따뜻한 코트 사려면 어떤 걸 사야 하는지...

캐시미어 코트가 가장 따뜻하다.

인도, 티벳, 이란 등의 캐시미어 산양으로 만든 캐시미어 울은 해외에서는 캐시미어라고 부르지만 국내에 들어올 때는 그냥 울 이라고만 적혀 들어오기도 한다고 한다. (울>캐시미어) 울 이라는 큰 대분류 안에 캐시미어가 들어가는 것.

캐시미어울은 아무리 낮은 퀄리티여도 일반울보다 3배 정도 따뜻하고,

정말 좋은 퀄리티라면 일반울에 비해 최대 8배나 따뜻하다고 한다.

가볍고, 부드럽고, 신축성도 좋고, 윤기도 좋다.

하지만 내구성은 떨어지기 때문에 관리를 잘해야 한다.

캐시미어 함량이 어느 정도 돼야 티가 나는지

최소 10%은 되야 티가 난다.

캐시미어가 3%, 5%, 7% 들어가는 코트도 많은데 사실 그런 건

그냥 마케팅 일환이라고 보면 된다고 한다. 티도 안 난다고...

실제로 캐시미어 티가 나려면 최소 10%은 돼야 하고, 그것도 역시 나머지 혼용된 것들이 잘 받쳐줘야 한다고 한다.

(ex. 버진울10% + 캐시미어90% / 램스울10% + 캐시미어90% 등등...)

혼방에 대하여

함께 섞인 것 중에, 폴리우레탄 같은 건 옷의 탄성, 스판끼를 주기 위한 것이기 때문에 신경 쓰지 않아도 된다고 한다.

폴리에스터 (폴리에스테르)

딱딱하고 거친 느낌이다.

아크릴

털이 많이 뭉치고, 필링이 많이 생긴다.

나일론

'폴리에스터, 아크릴, 나일론' 이 셋 중에서는 나일론이 그나마 제일 낫다.

레이온

레이온은 캐시미어만큼 굉장히 부드러운 재질을 가졌지만, 옷이 각을 잡아주지 못해서 실루엣이 예쁘지 않을 수 있다.

지금 이렇게 공부하고 정리는 해뒀지만....

그래서 어떤 코트를 사야 할지는 아직도 고민 중이다😅

완전히 겨울이 되기 전에 얼른 사야 할 텐데..!!

+ 코트 관련 웃긴 짤

유효범위(Scope)는 변수의 수명을 의미한다. 아래의 예제를 보자. 결과는 global이다.

var vscope = 'global';
function fscope(){
    alert(vscope);
}
fscope();

함수 밖에서 변수를 선언하면 그 변수는 전역변수가 된다. 전역변수는 에플리케이션 전역에서 접근이 가능한 변수다. 다시 말해서 어떤 함수 안에서도 그 변수에 접근 할 수 있다. 그렇기 때문에 함수 fscope 내에서 vscope를 호출 했을 때 함수 밖에서 선언된 vscope의 값 global이 반환된 것이다. 아래 예제를 보자. 결과는 '함수안 local'과 '함수밖 global'이 출력된다.

var vscope = 'global';
function fscope(){
    var vscope = 'local';
    alert('함수안 '+vscope);
}
fscope();
alert('함수밖 '+vscope);

즉 함수 안에서 변수 vscope을 조회(4행) 했을 때 함수 내에서 선언한 지역변수 vscope(3행)의 값인 local이 사용되었다. 하지만 함수 밖에서 vscope를 호출(7행) 했을 때는 전역변수 vscope(1행)의 값인 global이 사용된 것이다. 즉 지역변수의 유효범위는 함수 안이고, 전역변수의 유효범위는 에플리케이션 전역인데, 같은 이름의 지역변수와 전역변수가 동시에 정의되어 있다면 지역변수가 우선한다는 것을 알 수 있다. 아래 예제를 보자. 결과는 모두 local이다.

var vscope = 'global';
function fscope(){
    vscope = 'local';
    alert('함수안'+vscope);
}
fscope();
alert('함수밖'+vscope);

함수밖에서도 vscope의 값이 local인 이유는 무엇일까? 그것은 함수 fscope의 지역변수를 선언할 때 var를 사용하지 않았기 때문이다. var를 사용하지 않은 지역변수는 전역변수가 된다. 따라서 3행은 전역변수의 값을 local로 변경하게 된 것이다. var을 쓰는 것과 쓰지 않는 것의 차이를 이해해야 한다. 전역변수는 사용하지 않는 것이 좋다. 여러가지 이유로 그 값이 변경될 수 있기 때문이다. 함수 안에서 전역변수를 사용하고 있는데, 누군가에 의해서 전역변수의 값이 달라졌다면 어떻게 될까? 함수의 동작도 달라지게 된다. 이것은 버그의 원인이 된다. 또한 함수를 다른 에플리케이션에 이식하는데도 어려움을 초래한다. 함수의 핵심은 로직의 재활용이라는 점을 상기하자. 변수를 선언할 때는 꼭 var을 붙이는 것을 습관화해야 한다. 전역변수를 사용해야 하는 경우라면 그것을 사용하는 이유를 명확히 알고 있을 때 사용하도록 하자.

출처 생활코딩

운영체제 역할1: 시스템 자원 (System Resource) 관리자

• Operating System 또는 OS 라고 부른다
• 시스템 자원 System Resource = 컴퓨터 하드웨어
  •  CPU (중앙처리장치), Memory (DRAM, RAM)
  •  I/O device (입출력장치)
    •   모니터,마우스,키보드,네트워크
  •  저장매체: SSD, HDD (하드디스크)

운영체제 역할

컴퓨터 하드웨어는 스스로 할수있는것이 없다

1. CPU: 각 프로그램이 얼마나 cpu를 사용할지를 결정할수없다

2. 메모리: 각 프로그램이 어느 주소에 저장되어야하는지,어느정도의 메모리 공간을 확보해줘야하는지를 결정할수는없다

3. 저장매체(HDD,SSD) : 어떻게,어디에 저장할지는 결정할수없다

4. 키보드/마우스: 스스로 표시할수없다

--->

그래서 운영체제가 필요하다

OS없이 컴퓨터는 동작하지않는다.

• Windows OS, Mac OS, 그리고 UNIX(유닉스)   
• UNIX OS 
  • UNIX 계열 OS
    • UNIX와 사용법이나, OS 구조가 유사
  • LINUX (리눅스) OS
    • 프로그래머, 전공자

OS는 만들기가 쉽지 않다.

운영체제 역할2: 사용자와 컴퓨터간의 커뮤니케이션 지원

운영체제 역할3: 컴퓨터 하드웨어와 프로그램을 제어

하드웨어 뿐만 아니라, 응용프로그램까지 제어

정리

운영체제 역할1: 시스템 자원(System Resource) 관리자

운영체제 역할2: 사용자와 컴퓨터간의 커뮤니케이션 지원

운영체제 역할3: 컴퓨터 하드웨어와 응용 프로그램을 제어

<transition name="작명">중간에 애니메이션 주고싶은거</transition>

트랜지션 태그로 감싸고 name="작명" 한 후에

style로 가서 이렇게 각각 3개 쓰고 스타일 주면 됌

등장 애니메이션 

.작명-enter-from = 시작

.작명-enter-active

.작명-enter-to = 끝

퇴장 애니메이션

.작명-leave-from = 시작

.작명-leave-active

.작명-leave-to = 끝

넘모 간단하다 호고곡 

근데 중간에 애니메이션 주고싶은거 감싸둔게 자식 컴포넌트인데

거기 안에있는 요소 애니메이션 바꾸고싶으면 어떻게 하지 ㅇㅅㅇ

<input v-model.number="month">
<p>{{month}}개월 : {{oneroom_data[index].price * month}}원</p>

이렇게 input태그에 넣는걸 p태그에 똑같이 적어주는데

숫자가 아닌 문자열을 적었을때 오류를 띄우고싶음

data() {
  return{
        month:1,
    } 
}

script의 data안에 이렇게 month의 초기 데이터값을 1로 줘놓고

그 밑에

month 값이 바뀔 때마다 감시하기 위한 watch를 만들어줌

watch: { 감시할데이터(){} }

vue.js 전용 form validation 라이브러리 사용하면 watcher 안써도 됌

month라는 data를 감시하고싶다면 watch안에 month라는 함수를 만들면되고,

그 month라는 데이터가 변화할때마다 month라는 함수가 실행이 됌

watch:{
  month(a){
  // "사용자가 month를 글자로 입력하면 경고문 띄우기" 라는 함수 띄우기
    if(isNaN(a) == true){
      alert('숫자만입력하세용');
      this.month = 1;
    }
  }
},

month()의 괄호 안에 파라미터를 추가해준다.  자유롭게 작명가능

month의 입력값이 바뀔때마다 결과 데이터를 파라미터안에 넣어주게 됌

파라미터는 2개까지 가능,

예를들어 (a,b)라면

왼쪽의 a는 변경 후 데이터, 오른쪽의 b는 변경 전 데이터

더보기

(구구절절)

 

코딩애플님이 숙제내주신거 열시미 구글링해서 혼자풀어따ㅠ

다 풀고 답지봤을때 답이랑 똑같이 푼거보고 희열느껴짐

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

 

근데 답지에 1aaaa같은거 쓰면 alert안띄워지는거에 대한 답도 있을줄알았는데

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

ㅎ..더 구글링 해봐야겠다 ^^

 

 

+

 

사실 중간에 구글링 포기하고 답지 보려고 딱 스크롤 내렸는데

 

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

ㅎㅎㅎ.....하하하핳ㅎ

정말 너무 재밌으셔 ~ㅋㅋ

 

바로 닫고 다시 구글링 하러가서...결국 혼자 품..

정말. 좋은. 선생님이시다..!!ㅎㅎ

 

 

input박스에서 숫자를 넣고

그 밑에 글자로 기존가격*input에넣은숫자 하고싶을때

스크립트 안에 month 데이터를 준다

기본 1달로 설정함

export default {
    name: 'modal',
    data() {
      return{
            oneroom_data: oneroom_data,
            modalOnFlag: false,
            index:0,
            month:1,
        } 
    },
}

데이터에 지정해둔 month를 input에 내가 넣는 숫자를 지정해주고싶으면 

<input @input="month = $event.target.value">

쌩 자바스크립트로 이렇게 짜는데

이걸 vue.js 문법으로

간단히 하면

<input v-model="month">

v-model 이라는걸 쓰면 간단히 할 수 있음!

그리고 여러가지 

    <!-- 기존 쌩자바스크립트 -->
    <input @input="month = $event.target.value">
    
    <!-- input에 입력한것들은 모두 문자자료로 인식함 -->
    <textarea v-model="month"></textarea>
    
     <!-- true or false -->
    <input type="checkbox" v-model="month">
    
    <!-- 선택형 -->
    <select v-model="month">
        <option value="2314"></option>
        <option value="fgff"></option>
        <option value="13414"></option>
    </select>
 
    <!-- 더하기를 하게만들고싶으면 .number형으로 만들어줘야함 (기본은 숫자아니고 문자자료라서) -->
    <input v-model.number="month">
    
   <!-- .number형으로 지정안해줘도 곱하기는 알아서 잘 됌 -->
    <p>{{month}}개월 : {{oneroom_data[index].price * month}}원</p>

커스텀이벤트 Custom Event

자식요소에서 부모요소까지 이벤트를 전달하고싶을때
자식은 부모의 데이터를 직접 수정할수없음
따라서 커스텀이벤트로 부모데이터를 수정해달라고 메세지를 보내는것

$emit() 을 쓰면 부모에게 메세지를 보낼수있다

제이쿼리에서 쓰는것처럼

$가 들어간다면 vue에서도 뭔가 특별한 변수임  

<div @click="$emit('작명',데이터)"> 

데이터에는 숫자,문자,오브젝트,어레이 다 들어갈수있음
쓰기싫거나 쓸거없으면 안써도됌 

ex)

자식 컴포넌트 template 안에서

<div @click="$emit('openModal')"> 

부모에게 메세지 발사!

부모 컴포넌트에서는 메세지를 수신하는 코드를 또 적어줘야함 자동으로 ㄴㄴ
부모 template에 자식 컴포넌트 써둔거 예를들어 <Card/>안에 코드 적어줌

@작명한거="요안에는자바스크립트아무거나쓸수있음" 

<Card @openModal="open=true;">   

몇번째 클릭한건지 알고싶을때

자식 컴포넌트에서는

<div @click="$emit('openModal',데이터.id)">

몇번째 id를 클릭한건지 id 데이터를 같이 보내줌
이 div를 누르면 데이터파일의 id담아서 부모한테 메세지 보내달라고 코드짠것 

부모 컴포넌트에서는

<Card @openModal="open=true; clicked= $event">  

자식이 보낸 데이터는 $event 변수에 담겨있음
또는 그냥 누른거=i 해도 되긴함 같은 i일때

$emit()안에 써둔 스크립트가 너무 길어서 그냥 이걸 함수안에서 쓰고싶다면?

자식컴포넌트의 script부분에

export default{
 methods:{
   send(){
     this.$emit('openModal',this.데이터.id)
   }
 }
}

이렇게 써놓고

<div @click="send"> 

쓰면 똑같이 작동!

methods 안의 함수에서는 this를 꼭 붙여줘야 에러가 안남

함수명은 한글로하면 에러남

예를들어 App.vue 부모 컴포넌트가 있고

File.vue라는 자식 컴포넌트가 있을 시

부모에 있는 데이터들을 File.vue인 자식에게 Props 시키고싶을때 

<!-- 기본 -->
<File :작명(또는데이터이름그대로)="데이터이름"/>
 
<!-- Array나 Object 그대로 보내기 -->
<File :데이터이름="[123,456]"/>
 
<!-- 간단한 문자열들은 v-bind문법없이도 바로 보낼수있다
	글자는 v-bind없이 바로바로 간다 -->
<File 데이터이름="안녕하세요문자자료"/>
<File :데이터이름="12344(숫자자료)"/>
 
<!-- Object 데이터들을 한번에 간단히 축약해서 보내는법 -->
<File :이름="오브젝트.name" :나이="오브젝트.age"/>
 
<!-- 이렇게 이름만 써도 됌. 한번에 보내는방법. -->
<File v-bind="오브젝트"/>
 
<!-- 또는 그냥 이렇게 보내도 똑같음 -->
<File :오브젝트="오브젝트"/>