반응형

PROJECT 2

[미니 프로젝트] 미군 근처 카페에서 사용할 메뉴 한화 달러 자동 계산기(1)

지인이 미군 근처의 카페에서 일하게 됐다고 한다. 그 카페는 당연히 미군들이 많이 와서 달러로 메뉴가 되어있고, 달러를 받는다. 그런데 한국이니 한화도 사용할 수 있다. 여기서 문제가 생긴다. 하루하루 환율에 따라서 메뉴의 가격이 변동된다는 것이다. 그러니 한화 계산은 계산기로 매번 환율을 적어가며 계산하는 노동이 생긴다는 것이다. 그 이야기를 듣다가 아무 생각없이 말했다. "자동 계산하는 프로그램 만들어줄까?" 아... 사실 진짜 만들기 전까지는 그냥 뚝딱 하면 만들어질 줄 알았다. 뚝딱 만들기는 했다. 디자인은 안건들어서.. 그런데 뚜~~~~~~~~~~~~~~욱 다~~~~~~~~~~~~~~~~~~~~~~악 만들었다. 굉장히 길고 험난한 여정이었다. 다시는 함부로 이야기 하면 안되겠다는 생각을 하기도 ..

동적 패딩 구현하기 : window의 크기에 반응하는 padding

안녕하세요. 미래를 개발하는 남자... ㅎ 김준수입니다. 스터디에서 진행하고 있는 프로젝트를 진행하는 도중, 레퍼런스를 보고 있는데 참 신기한 것을 봤습니다. 요즘은 모바일 환경에서도 웹에 접속을 많이 하기 때문에 웹 페이지를 반응형으로 다 만듭니다. 그걸 쉽게 구현할 수 있는 것이 바로 부트스트랩 같은 프레임 워크를 이용하는 것이죠. 저도 왠만하면 부트스트랩이나 vue 같은 경우는 quasar를 통해서 구현을 하고 있었습니다. 그런데 이 레퍼런스는 조금 다른 방식을 이용해서 반응을 하도록 만들었더라구요? 바로 window의 width크기에 반응해서 요소의 right padding이 줄어들었다가 늘어났다가 하는 방식으로 반응을 하더라구요. 처음에 쉬워보여서 바로 구현에 들어갔다가 두드려 맞고 나왔습니다...

IT Tech/vue.js 2024.01.03
728x90
반응형