https://play.google.com/store/apps/details?id=net.ib.android.smcard 

 

monimo (모니모, 삼성금융네트웍스) - Google Play 앱

모이는 금융, 커지는 혜택! monimo 모니모

play.google.com

 

추천인코드: N6H4U0F

 

안녕하세요!

이번에는 모니모 로 돌아왔습니다.

앱테크하시는 분들은 이미 다들 알고 계실거라 생각합니다. 그만큼 쏠쏠하다는 사실!

 

 

모니모를 추천하는 이유!

1) 현금화 가능
2) 금액 제한 없이 출금 가능
3) 삼성 금융상품을 이용한다면 더 좋음!(이유는 뒤에서 설명드릴게요~)
4) 쉬운 미션

현금화가 가능하다는 게 가장 큰 장점인 것 같아요.

그리고 토스의 경우, 일정 금액을 넘기지 못하면 수수료를 떼어가는 것 같았는데요, 모니모는 그런 게 없어서 좋았습니다.

 

모니모 이용 방법

모니모에서는 "젤리"로 포인트를 얻는데요, 일반 젤리스페셜 젤리가 있습니다.

-일반젤리: 10원 이상 모니머니 금액 획득 가능
-스페셜젤리: 1,000원 이상 모니머니 금액 획득 가능

젤리들을 얻을 수 있는 방법젤리를 교환할 수 있는 방법에 대해 말씀드릴게요.

 

1) 출석체크

-매일 출석 체크를 하면 젤리를 받을 수 있어요.

-출석 체크를 하지 못했을 경우 한 달에 최대 3번 젤리로 출석보충 가능하고, 100% 출석 시 스페셜 젤리를 받을 수 있어요.

-위치: 혜택 탭 / 이벤트 / 하루 한 번, 출석체크로 젤리 모으기

저는 혹시라도 잊을까봐 "출석체크 알림"을 켜놔요. ㅎㅎ

만약 출석체크를 놓쳤다면! 걱정하지 마세요. 젤리를 사용해서 한 달에 최대 3번까지 출석을 보충할 수 있습니다.

 

2) 이 달의 미션

- 한 달에 한 번, 모니모 앱을 둘러보는 것으로 스페셜 젤리를 받을 수 있어요.

이번 달의 미션을 한 번 보여드릴게요.

이렇게 모니모 앱 안에서 확인할 수 있는 것들을 미션으로 줍니다.

모두 확인 완료하면 스페셜 젤리를 받을 수 있어요. 스페셜 젤리 받기 버튼을 눌러서 젤리를 받아주세요!

상품을 가입하거나 친구초대를 한 명 이상하는 등의 미션이 아니고, 확인만 해보면 되는 미션이라서 좋은 것 같아요.

상품 가입하는 미션은 솔직히 조금 부담스럽잖아요...ㅎ

난이도도 낮고, 무엇보다도 스페셜 젤리를 주기 때문에 꼭! 한 달에 한 번씩 참여합니다.

 

3) 걷기

-매일 5천 보 이상 걸으면 젤리를 얻을 수 있어요.

-위치: 더보기 / 걷기 or 더보기 / 젤리 챌린지 / 걷기미션탭

-젤리 챌린지에 꼭 참여해야 해요! (2주차부터 열리는 도전, 신청하고 다음 달 부터 참여할 수 있는 젤리 챌린지입니다.)

다른 만보기 어플들은 만 보가 기준인 것이 많았는데, 모니모는 5천 보 이상이라 부담없이 할 수 있어 좋았어요.

젤리 챌린지

 

젤리 챌린지 혜택

중간중간 기간을 나눠서 그 기간 동안 인증을 매일매일 빼먹지 않고 한다면 추가 젤리를 지급하고 있어요.

까먹지 말고 매일매일 인증해서 추가 젤리까지 받는 게 좋겠죠?

 

4) 기상

-매일 아침 6시 ~ 7시 30분에 인증하면 젤리를 얻을 수 있어요.

-위치: 더보기 / 젤리챌린지 / 기상미션탭

-젤리 챌린지에 꼭 참여해야 해요! (2주차부터 열리는 도전, 신청하고 다음 달 부터 참여할 수 있는 젤리 챌린지입니다.)

젤리 챌린지
챌린지 설명
젤리 챌린지 혜택

기상 미션도 까먹지 않고 매일매일 인증한다면, 추가 젤리가 있어요.

여태까지 얘기드렸던 것 중에서는 난이도가 조금 있다고 볼 수도 있는데요,(주말에도... 인증해야 해서요... 전 주말엔 늦잠을 자서..ㅎㅎ)

그래도 매일 인증한다면 추가 젤리가 있으니 챙기는 게 좋겠죠!

 

5) 젤리로 투자

-모니모에서 모은 젤리로 교환을 한다고 합니다. 사실 저는 삼성 증권 CMA/종합 계좌를 만들지 않아서 이 챌린지는 하지 않았어요. 😅

대신 이 챌린지에 대해 설명되어 있는 이미지 함께 첨부합니다!

챌린지 설명

 

 

젤리 교환소 

가장 중요한 것이죠! 저희는 돈을 얻어야 하잖아요?

혜택 탭으로 들어가면 바로 젤리를 교환할 수 있는 탭이 나옵니다.

"머니 받기" 버튼을 누르시면 젤리 교환소로 들어가게 되는데요,

파란 젤리가 일반 젤리, 핑크 젤리가 스페셜 젤리입니다.

이번 달 받은 금액 옆에 Lv.2가 있죠? 이 레벨은 삼성 금융상품에 가입하면 늘어나더라구요.

저는 삼성화재에 가입되어 있어서 2레벨입니다. 

삼성 금융상품을 많이 이용하시는 분들은 더 좋을 것 같아요!

 

일반 젤리 하나를 넣어볼게요.

12원이 나왔는데, 저는 레벨 2이기 때문에 1.1배를 해서 총 14원을 얻었어요!

이런 식으로 배수가 되어 받을 수 있는 구조입니다. (스페셜 젤리도 마찬가지구요.)

 

유의사항 함께 남겨놓을게요!

 

 

이제 출금을 해볼까요?

저는 저번 달에 두 번째 출금을 했는데, 총 30,916원이었어요. ㅎㅎ

 

출금 버튼을 누르시면 여태까지 모은 모니머니를 출금할 수 있어요.

 

출금하기를 누르시면 이렇게 짠! 연결된 계좌로 보낸다고 뜹니다.

 

이렇게 보내기 버튼을 누르면 출금 완료입니다!

 

개인적으로 가장 잘 이용하고 있는 앱인데, 어떠신가요?

앱테크를 처음 하신다면 한 번 도전해보셔도 될 것 같습니다.

미션도 어렵지 않고, 금액도 꽤 쏠쏠하니까요. ㅎㅎ

 

도움이 되셨다면 공감 꾹! 부탁드려요!

다음에 또 다른 앱테크를 발견해서 돌아올게요!

 

https://play.google.com/store/apps/details?id=io.balso&pcampaignid=web_share 

 

발로소득 – 전국민 일상지원금으로 돈벌기 - Google Play 앱

매주 일상지원금 100% 지급! 습관으로 돈 버는 리워드 앱

play.google.com

 

추천인코드: MCID9Q

1,000코인 지급 초대장 링크: https://balso.onelink.me/g9qe/5rdtemq2

 

안녕하세요!

앱테크에 대해 꾸준히 관심을 가지며 실제로도 이것저것 사용해보고 있는데요,

그 중 "발로소득"에 대해 소개 및 추천을 해보고자 합니다!

 

먼저 말씀드릴 건, 현금화는 불가능하다는 점인데요.

그럼에도 불구하고 추천드리는 이유는!

1) 쉬운 미션
2) 포인트가 금방금방 쌓이는 느낌이다.
3) 포인트로 기프티콘을 바꿀 수 있다.

이 세가지를 꼽을수 있겠네요. ㅎㅎ

 

처음 들어가면 보이는 화면부터 소개해드릴게요!

기본 홈 화면에 들어가면, 몇 걸음을 걸었는지와 일상 챌린지 목록을 확인할 수 있습니다.

걸음수에 따라 코인을 얻게 되는데요, 걸은 다음 코인을 누르면 코인이 쌓이게 됩니다. 

 

 

챌린지 탭에 들어가면 현재 진행중인 챌린지와 현재 나의 소득을 확인할 수 있어요.

저는 현재 7,854코인을 모았네요. ㅎㅎ

일주일에 한 번씩 일상 지원금으로 3,000포인트를 주는데 이 포인트로 챌린지에 참여하면 됩니다.

현재 음악 한 곡 듣기, 오늘 지출 확인, 하루 5천보 걷기 이렇게 3가지를 하고 있는데요.

그 중 오늘 지출 확인을 한 번 보여드릴게요!

하단에 보면, 챌린지마다 챌린지 안내가 있는데요.

이런 식으로 인증 방법에 대해 설명이 나와있습니다. 

지출 확인의 경우, 지출이 적힌 아무 사진이나 업로드하면 인증 완료입니다!

인증하실 때에 다른 사람들에게도 보이기 때문에 개인정보가 들어가 있는 사진은 올리시지 않는 게 좋아요.

 

현재 참여할 수 있는 일상 챌린지 목록을 한 번 보여드릴게요.

정말 다양하지 않나요?

 

제가 이것저것 해보며... 가장 하기 쉬웠던 챌린지는 위에 올렸던 세 가지 챌린지 입니다.

1. 음악 한 곡 듣기

2. 오늘 지출 확인

3. 5천보 걷기

 

개인마다 쉽게 느끼는 항목에 대해서는 차이가 있을 수 있겠지만, 저에게는 이 세가지가 가장 쉬운 것 같았습니다. ㅎㅎ

 

이렇게 모은 포인트는 구매 탭에 가서 기프티콘과 교환할 수 있습니다.

 

처음에는 인증하는 걸 많이 까먹었는데, 요즘에는 습관이 되어서 빼먹지 않고 포인트 다 받아가는 것 같아요. 역시...습관이 한 번 들면 쭉 가네요...

 

괜찮나? 생각하고 반신반의하며 깔았던 어플인데 생각보다 괜찮아서 쭉 사용하고 있습니다.

추천! 합니다 ㅎㅎ

 

다음에 또 다른 앱테크로 돌아올게요~~ 

도움이 되셨다면 공감 꾹!

* 경주 여행 일정 공유: https://mume.tistory.com/85

 

경주 여행 일정 공유(2박 3일, 친구들과)

#인원 5명 # 20대, 친구들과 함께 # 2023.08.13. (일) ~ 2023.08.15. (화) # 항상 그랬듯이, 일정은 유동적으로 :) 안녕하세요! 오랜만에 올리는 여행 일정이네요. 이번엔 경주입니다!!! 2023.08.13. (일) [서울역-

mume.tistory.com

 

* 도미: https://naver.me/5tj4du86

 

도미 : 네이버

방문자리뷰 591 · 블로그리뷰 623

m.place.naver.com

월, 수, 목, 금, 토, 일
11:30 - 21:00 영업 (20:00 라스트오더)
15:00 - 17:00 브레이크 타임
화 정기휴무

경북 경주시 중앙로 10

 

안녕하세요!

오늘은 "도미"라는 식당 리뷰를 써볼까 합니다.

친구가 여기가 그렇게 맛있다고... 추천을 해서 그렇게 맛있단 말이야? 하고 가봤습니다.

간판이...꽤나 귀엽군

저희는 인원수가 많아서(5명) 웨이팅이 조금 길었지만, 2명이신 분들은 빨리 빨리 들어갈 것 같았어요.

직원분께서 자리나면 연락드린다고 주변 둘러보고 오셔도 된다 해주셔서 주변에 있는 대릉원 구경하고 왔네용. ㅎㅎ

 

그렇게... 들어간 도미!!!!!!!!!

내부는 요래요래 생겼어요.

 

하지만 여러분이 제일 궁금하신 건... 음식이겠죠???????????

저희는 스튜, 마르게리타 피자, 루꼴라 피자, 페퍼로니 피자를 시켰어요.

술은... 모카 스타우트를 시켰습니다.

 

스튜

주변 분들이 다들 스튜를 하나씩 시키더라구요? 그래서 이거... 꼭 먹어야 하는건가...? 하지만 우리 시간이 별로 없는데...하며 직원분께 "스튜...오래 걸리나요?" 라고 여쭤봤는데 돌아오는 희망찬 답변, "10분 정도면 나와요~! 금방 나와요!"

앗싸... 그래서 저희는 스튜를 먹을 수 있었습니다. 너무너무 맛있었어요. 또 먹고 싶었는데 기차 시간 때문에 어쩔 수 없이 ㅠ 후닥 먹고 나왔답니다...

 

피자... 허리피자...어깨피자...인생피자... (죄송합니다...)

이 야심한 밤에 이 맛있어보이는 사진을 보려니... 힘드네요...후

맛있어보이죠...! 실제로도 맛있었습니다...

 

페퍼로니 피자부터 보여드릴게요!

페퍼로니의 짭쪼롬한 맛이 딱 적당해서 느끼하지도 않고... 맛있었어요. 원래 페퍼로니 피자 별로 안 좋아하는데 여기에서는 맛있게 먹었어요. ㅎㅎ

뿌려먹으라고 소금?도 같이 주시는데 같이 먹으니 금상첨화입니다.... 따봉

 

다음은 루꼴라 피자!

제가 살아오면서 먹었던 루꼴라 피자 중에 이게 젤 맛있었어요...

이건 같이 먹으라고 기름..? 매운 기름...? 소스를 주셨던 것 같아요. 피자 시키시면 어떻게 어떻게 먹으라고 안내해주시니 걱정 마세요! ㅎ.ㅎ

 

마르게리타 피자!

향이 은은하게 나고... 맛있었어요. 맛있다고밖에...표현을 못하네요... 저... 많이 먹고 표현력을 길러오겠습니다...ㅠ

근데 저... 진짜 맛있어야 맛있다고 한다는 건... 알아주세요.... 맛이 그냥 그러면 그냥 그래...라고 하는 사람이랍니다...

부모님이 올해 이탈리아에 다녀오셨는데, 마르게리타 잘 하는 집이 잘하는 집이라고 하네요!!(진짜인지는 모름)

시켰던 피자 3개 중에 또 뭘 먹을거냐, 하면 전 마르게리타를 고를 것 같아요. 그 정도로 맛있었습니다!

 

술...모카 스타우트!

이게 무슨 술일까 하고 시켜보았는데요, 정말 커피 맛이 나는 흑맥주였어요.

개인적으로는 음... 피자와 어울리지는 않는 느낌? 그냥 맥주를 시키거나 음료를 시킬걸, 했어요.

단독으로만 마시면 맛있었습니다! ㅎㅎ

 

 

친구들과 짠~ 도 하고

 

야외석 구경도 조금 하다가,

들어오는 햇빛이 넘 예뻤다...
야외라 더울 줄 알았는데 사실은 야외같은 실내였던 것! 에어컨도 있었다.

 

배를 통통 뚜들기며 경주를 떠났습니다. ㅎㅎ

 

다음에 경주에 또 오게 된다면 재방문 하고 싶은 식당이었습니다.

 

 

#인원 5명

# 20대, 친구들과 함께

# 2023.08.13. (일) ~ 2023.08.15. (화)

# 항상 그랬듯이, 일정은 유동적으로 :)

 

안녕하세요! 오랜만에 올리는 여행 일정이네요.

이번엔 경주입니다!!! 

 

2023.08.13. (일) [서울역-경주(저녁 도착)]

16:53 신경주역 도착
16:53 - 17:30 신경주역 - 숙소 택시로 이동(약 17분~20분)
17:50 숙소 체크인 후 짐 풀고 저녁 먹으러 나가기
17:50 - 18:00 숙소 - 저녁 먹을 식당(황리단길) 택시로 이동(약 7분)
18:00 저녁 식사 - 카츠라운지
19:30 - 19:40 첨성대까지 도보로 이동(약 11분)
19:40 - 20:20 첨성대 야경 구경/카페(첨성로179)
20:20 - 20:40 첨성대 - 동궁과 월지 도보 이동(약 16분)
20:40 - 21:30 동궁과 월지 야경 구경(입장마감 21:30 / 영업 종료 22:00)
21:30 -  동궁과 월지 - 숙소 택시 이동(약 2분)

 

2023.08.14. (월) [갈비먹고 루지타고 레이저아레나하고 경주엑스포대공원에서 뽕뽑기!(루미나 호러나이트 악귀의 숲...상당히 본격적이었다......ㅠ무서워...)]

10:00 - 11:00 숙소-들안길참숯화로숯불갈비(11:00오픈)
버스로 이동 23분 OR 택시로 이동 10분
11:00 - 12:30 점심(들안길참숯화로숯불갈비)
12:30 - 14:30 경주루지월드(점심 식당에서 도보 1분걸림)
- 레이저아레나도 시간되면 하기 현장발권과 가격 같음
14:30 - 14:40 경주루지월드 - 경주엑스포대공원 (버스 약 11분)
14:40 - 18:00 경주엑스포대공원에서 놀기
추천코스: https://www.cultureexpo.or.kr/open.content/ko/guide/course/
>카페선덕(카페)
>미디어아트(관람 소요시간 40분)
>신라공예체험(목공예,금관만들기,곡옥만들기,칠보공예,유리공예,도자기공예)-15,000원
>솔거미술관
18:00 - 19:30 저녁먹기(화수브루어리 경주점 / 삼손 짜장 / 조가네떡갈비 / 피자빙고 / 피자빙고 / 서민식당)
20:00 - 22:00 루미나 호러나이트 악귀의 숲(20:00~23:00운영) / 인터넷 8,000원 / 경주엑스포대공원 입장권 구매했을 경우 5,000원에 구매 가능
22:00 -  숙소로 돌아오기

+추가정보)

-경주엑스포대공원 미디어아트(관람 소요시간 약 40분)

-경주엑스포대공원 신라공예체험(주말 11:00~18:00/문화센터 2층/예약문의:010-2806-0866)

신라공예체험

→목공예, 금관만들기, 곡옥만들기, 칠보공예, 유리공예, 도자기공예>>전화 문의했을 때 목공예와 금관만들기만 체험가능하다고 하셨습니다.

금관만들기는 초등학교 저학년까지 즐겁게 할 수 있을 것 같고, 목공예는 적당히 체험한다고 생각하면 어른까지도 괜찮은 것 같습니다.(저는 경대 만들기 체험을 했습니다.) 곡옥만들기, 칠보공예 등과 같은 나머지 공예들은 인원이 많을 경우 진행할 수도 있다고 하셨고, 평소에는 진행하지 않는다고 하셨습니다.

자세한 사항은 담당자분의 전화로 문의주시길 바랍니다.

 

2023.08.15. (화)

기차 시간이 오후 3시 반쯤이었기 때문에... 세세하게 계획을 짜지 않았습니다.

대략적으로 알려드리자면, 밑의 표와 같이 될 것 같습니다.

11:00 숙소 체크아웃
11:00 - 11:30 점심 식사 장소로 이동(도미 https://mume.tistory.com/86)
11:30 - 12:30 웨이팅하며 대릉원 구경 및 천마총 구경
12:30 - 13:30 점심 식사
13:30 신경주역 이동 

 

어떠셨나요??

이번 여행을 다녀오며 친구들이 만족해하는 걸 보고 저도 뿌듯했네요...

MBTI J인 저는... 같이 간 친구들이 만족해하는 것 그 이상 그 이하도 바라지 않습니다...

만족만 해준다면... So Happy. . .

경주 여행기를 올리고 링크 달아놓겠습니다. 기다려주세요!!!

 

도움이 되셨다면 공감 꾹!!! 눌러주세요:D

다음 포스팅의 양분이 됩니다! 냠냠

 

즐거운 여행 되세요!

- 일단 혼용률 & 총장

울=모 / 캐시미어 / 나일론

총장은... 키 - 55 정도 하면 된다더라...(무릎 정도 오는 길이)

 

- 이제 막 첫 코트를 알아보기 시작한 사람에게 유튜브 영상 추천

> 영하10도에도 OK! 따뜻한 코트 알아보는법! 얼죽코 필수영상🐏 소재,가공,디자인,안감

https://youtu.be/HqH0H8r3YXo

> 이건 그냥... 나중에 코트 산 다음에 참고할 영상

https://youtu.be/8OvjErl0zIE

 

 

- 후보 브랜드들

어디까지나 주인장 뇌피셜임

입어본 것도 있지만 안 입어본 것도 다수. 그저 참고용으로만!

 

-스튜디오 톰보이

https://www.musinsa.com/brands/studiotomboy

 

스튜디오 톰보이 | 무신사 스토어

스튜디오 톰보이(STUDIO TOMBOY)는 한국을 대표하는 자유로운 감성의 컨템포러리 캐주얼 브랜드입니다. 시간이 지나도 변하지 않는 모던하고 감각적인 라이프스타일을 이끌어갑니다.

www.musinsa.com

> 전체적으로 오버핏인듯(내가 본 건 그랬음..ㅎㅎ) 근데 이쁨

> 캐쥬얼룩에 입기 좋아보임

> 두껍고 무거운 편

 

-킨더살몬

https://kindersalmonshop.com/category/outerwear/42/

 

E-boutique - Outerwear

Outerwear

kindersalmonshop.com

> 총장 긴 편(120cm~ )

> 혼용률 좋아보임

> 깔끔함

> 여기저기 입기 좋아보임

 

-모한

https://www.wconcept.co.kr/Shop/500005/Products?mcd=M33439436&ccd=2_001001000 

 

W컨셉(W CONCEPT)

유니크 디자이너 편집샵 W컨셉! 단독, 콜라보 상품, 기획특가, 신규회원 10% - W컨셉(WConcept)

www.wconcept.co.kr

> 내가 원하던 예쁜 짙은 브라운 색이 많다!

> 혼용률 괜찮아보임

> 내가 맘에 드는 건 이미 사이즈가 다 품절이다 ^^ㅠ....

 

-파사드패턴

https://facadepattern.co.kr/?gclid=CjwKCAiAqaWdBhAvEiwAGAQltqf5op54YVcIwSBxWYz2LuboOY2oleXMitum1Gm3Kb2EjC0535qqKBoC7HwQAvD_BwE 

 

파사드패턴 FACADE PATTERN

매일 입어도 과함이 없고, 매일 입어도 불편함이 없는 옷

facadepattern.co.kr

> 깔끔하다...

> 다른 곳보다 가격대가 좀 더 있다

> 이쁜데 ... 이쁜 건 다 예약구매네....

 

-닐바이피

https://nilbyp.com/product/list.html?cate_no=43 

 

Shop Women - Shop Women

Shop Women

nilbyp.com

 

 

-룩캐스트

https://lookast.com/product/list.html?cate_no=257 

 

SHOP - OUTER

OUTER

lookast.com

 

 

난... 코트를 못 사고 말거야... 살 수 있을까...? 내 코트는 어디에 있을까...

 

 

 

 

 

https://youtu.be/38PWm8TgaV0?list=PLfLgtT94nNq3Br68sEe26jkOqCPK_8UQ- 

Vue 6강: 상품목록 만들기 진짜 데이터로 ( import / export )

 

실제 상품데이터를 가져와서 HTML에 꽂아서 보여주자

데이터가 너무 길면 따로 뺄 수 있다. (다른 파일에 넣은 후 import하는 식으로)

 

 import / export 문법 쓰는 법

> 내보낼 파일

var apple = 10;

export default apple //어떤 변수를 내보내겠습니다 라는 것임
export default 변수명
export {변수1, 변수2, ...}

 

> import 할 곳

import 변수 from 경로
import {변수1, 변수2, ...}

 

아무데나 oneroom.js라는 파일 생성하고, 데이터를 복사-붙여넣기

var a = [ { }, { }, { }, ... ,{ } ]로 작성해도 되지만, 귀찮으면 export default = [ { }, { }, { }, ... , { } ]로 해도 됨.

 

script 부분에서 import data from '경로'; 로 가져오기

 

data 부분에 원룸들 : data, 로 데이터를 넣어줬음.

* 현재 data: object형으로 저장된 배열임.

 

template 부분에서 이런 식으로 데이터를 가져오면 된다.

{{ 원룸들[0].title }}

 

* HTML 태그 안의 속성 데이터바인딩은 :어쩌구

* HTML 태그 안의 내용 데이터바인딩은 [{어쩌구}]

<img :src="원룸들[0].image">

 

 

오늘의 숙제

> 6개 상품 전부 진열하기(v-for 사용)

  <div v-for="(item,index) in 원룸들" :key="index">
    <img :src="원룸들[index].image" class="room-img">
    <h4>{{ 원룸들[index].title }}</h4>
    <p>{{ 원룸들[index].price }}원</p>
  </div>

 

https://youtu.be/UyESqYSb0gY?list=PLfLgtT94nNq3Br68sEe26jkOqCPK_8UQ- 

 

<img> 넣는 법

> 절대경로는 그냥 넣기

> 상대경로는 이미지를 준비해야 함. | src/assets 폴더 안에 이미지 넣기 - src에 있는 거 가져올 때 경로는 ./부터

  <img src="./assets/room0.jpg">

 

* 절대경로: 처음부터 시작해서 목적지까지의 절대적인 경로/변하지 않는 주소

* 상대경로: 특정 경로를 기준으로 다른 경로를 표시하는 방식.

 

> 이미지가 너무 크게 나와요! - class값을 줘서 style 변경

template

<img src="./assets/room0.jpg" class="room-img">
style

.room-img{
  width:100%;
  margin-top:40px;
}

 

modal 창 만들기

* vue-router 설치하면 다른 페이지도 만드는 것도 가능함 *

style 부분에 추가


body{
  margin:0
}
div{
  box-sizing:border-box;
}
.black-bg{
  width:100%; height:100%;
  background:rgba(0,0,0,0.5);
  position:fixed; padding:20px;
}
.white-bg{
  width:100%; background: white;
  border-radius: 8px;
  padding:20px;
}
.room-img{
  width:100%;
  margin-top:40px;
}

그럼 이렇게 나오는데, 항상 모달창이 떠있는 건 아니니까 기능 구현을 해봅시다!

 

동적인 UI 만드는 법

0. HTML CSS로 디자인해두기(기본)

1. UI의 현재 상태를 데이터로 저장해둠

2. 데이터에 따라 UI가 어떻게 보일지 작성

 

ex)

1. data부분에 처음 보여줄 모달창의 값을 정해줌.

모달창열렸니 : false

2. 모달창열렸니 data가 true라면 이걸 보여줄거임.

  <div class="black-bg" v-if="모달창열렸니 == true">
    <div class="white-bg"> 
      <h4>상세페이지</h4>
      <p>상세페이지 내용</p>
     </div>
  </div>

 

* v-if="조건식"

 

이런 것도 할 수 있겠죠!

> 역삼동원룸 글씨를 눌렀을 때 모달창이 열리게!

<h4 @click="모달창열렸니 = true">{{ products[0] }}</h4>

 

* data 부분을 리액트에서는 state라고 부른다더라 ㅇ_ㅇ 데이터를 담는 공간이기도 한데 UI의 상태를 저장하는 공간이기도 하기 때문에 상태(state)라고 함.

 

오늘의 숙제

> 모달창 닫기 버튼과 기능 만들어오기

  <div class="black-bg" v-if="모달창열렸니 == true">
    <div class="white-bg"> 
      <h4>상세페이지</h4>
      <p>상세페이지 내용</p> 
      <button @click="모달창열렸니 = false">닫기</button>
     </div>
  </div>

 

https://youtu.be/Agm-F366ZwY?list=PLfLgtT94nNq3Br68sEe26jkOqCPK_8UQ- 

 

이벤트 핸들러

: HTML 클릭 시 코드 실행하는 법

 

허위매물신고 버튼을 누르면 신고수가 1 증가되게 해보자.

    <button>허위매물신고</button> <span>신고수 : 0</span>

자스로 할 때: <button onClick=""></button>

Vue로 할 때: <button v-on:click=""></button> 또는 @click=""

 

자스: 버튼 누르면 숫자 찾아서 +1 하고 +1된 걸 HTML에 반영

뷰: 버튼 누르면 관련된 데이터만 +1 (Vue는 데이터 변하면 HTML에 바로 반영됨)

    <button @click="신고수++">허위매물신고</button> <span>신고수 : {{신고수}}</span>

 

데이터 부분

export default {
  name: "App",
  data() {
    //데이터 보관 통, 데이터는 object형으로 저장
    return {
      신고수 : 0,
      메뉴들: ["Home", "Shop", "About"],
      products: ["역삼동원룸", "천호동원룸", "마포구원룸"],
    };
  },
  components: {},
};

 

Vue 특징

> 데이터가 변하면 관련된 HTML은 자동으로 바뀐다.

신고수+=1

와 신고수++1 은 같다.

 

<button @mouseover="신고수 +=1">허위매물신고</button>

마우스 오버했을 때 신고수++하는 코드

 

(참고) @이벤트이름 으로 여러가지 이벤트 사용가능

 

Q. 입력할 코드가 좀 길면..

함수를 사용한다!

 

함수

함수 만드는 공간은 정해져 있다.

데이터 부분 뒤 methods : { 함수( ){ } } 안에 함수를 만들면 된다.

 

* Vue에서 함수 만들 때 주의사항

: 함수 안에서 데이터 쓸 땐 this.데이터명 

<button @click="increase">허위매물신고</button> <span>신고수 : {{신고수}}</span>
export default {
  name: "App",
  data() {
    //데이터 보관 통, 데이터는 object형으로 저장
    return {
      신고수 : 0,
      메뉴들: ["Home", "Shop", "About"],
      products: ["역삼동원룸", "천호동원룸", "마포구원룸"],
    };
  },
  methods :{
    increase(){
      this.신고수+=1;
    }

  },
  components: {},
};

 

 

오늘의 숙제

> 모든 상품에 신고버튼기능 만들어오기

힌트

> 상품마다 신고수를 기록하는 곳이 있어야 함

template

 
  <div>
    <h4>{{ products[0] }}</h4>
    <p>50 만원</p>
    <button @click="신고수[0]++">허위매물신고</button> <span>신고수 : {{신고수[0]}}</span>
  </div>
  <div>
    <h4>{{ products[1] }}</h4>
    <p>가격은 아무거나</p>
    <button @click="신고수[1]++">허위매물신고</button> <span>신고수 : {{신고수[1]}}</span>
  </div>
  <div>
    <h4>{{ products[2] }}</h4>
    <p>가격은 아무거나</p>
    <button @click="신고수[2]++">허위매물신고</button> <span>신고수 : {{신고수[2]}}</span>
  </div>
script 

export default {
  name: "App",
  data() {
    //데이터 보관 통, 데이터는 object형으로 저장
    return {
      신고수 : [0,0,0],
      메뉴들: ["Home", "Shop", "About"],
      products: ["역삼동원룸", "천호동원룸", "마포구원룸"],
    };
  },
  methods :{
    increase(){
      this.신고수+=1;
    }

  },
  components: {},
};

 

 

for문으로 한 번에 할 수는 없을까? 🤔

싶어서 template 부분을 바꿨다. 😀

  <div v-for="(a,i) in 신고수" :key="i">
    <h4>{{ products[i] }}</h4>
    <p>50 만원</p>
    <button @click="신고수[i]++">허위매물신고</button> <span>신고수 : {{신고수[i]}}</span>
  </div>

 

+ Recent posts