Programming/.JS
-
[에러로그]파이어폭스에서 리액트 SVG 리사이징하기Programming/.JS 2021. 2. 6. 15:45
파이어폭스에서만 적용이 되지 않는 svg 아이콘 사이즈 개인적으로 파이어폭스를 애용하는 중인데, 유독 다른 브라우저에서는 모두 아이콘이 정상적으로(크롬, 사파리, 엣지)작동하는 것에 비해 파이어폭스에서는 적용되지 않는 것이 보였다. 블링크나 웹킷 엔진 기반에서는 사이즈가 제대로 반영이 되지만 게코 엔진(발음이 이상하지만 gecko engine이다)과 다른 것이 무엇일까 생각하면서 한참을 github 이슈나 구글링을 통해서 찾아본 결과 크게 다른 이슈될만한 버그리포트나 티켓들을 찾아볼 수 없었다. 그래서 직접 개발자도구로 해당하는 Attribute를 타겟팅해서 태그를 직접 비교해봤다. 놀랍게도 아주 미묘한 차이를 발견할 수 있었는데 다른 브라우저에서는 스타일 태그의 width와 height에 자동으로 px..
-
Vue.js로 To Do List 애플리케이션 만들기(하)Programming/.JS 2020. 6. 14. 23:00
2020/06/13 - [Programming/.JS] - Vue.js로 To Do List 애플리케이션 만들기(상) TodoList.vue TodoList는 추가한 값들이 로컬스토리지에 저장되고 그 저장된 것을 가져와서 차례대로 뿌려줄 컴포넌트이다. 세션이나 DB에 저장한 뒤에 처리할 수도 있지만 간단하게 로컬스토리지를 통해서 이를 구현하도록 하자. {{ todoItem }} 새로운 디렉티브가 등장했다. v-for는 지정된 갯수만큼 반복해서 HTML을 표시하는 반복문 디렉티브이다. 여기서 반복시킬 propsdata는 상위 컴포넌트로부터 전달받은 데이터를 이용할 것이다. 상위 컴포넌트인 App.vue에서 보내주지 않은 지금 상태에서는 propsdata가 로컬스토리지에서 가져온 데이터임을 가정하고 작성한다..
-
Vue.js로 To Do List 애플리케이션 만들기(상)Programming/.JS 2020. 6. 13. 23:02
할일 관리 앱은 프론드앤드 프레임워크를 배울 때 가장 대중적으로 도전하는 활용 예제이다. 제일 무난하게 시작할 수 있는 낮은 입문턱이지만 데이터 조작(CRUD)이 어떻게 사용되는지, 컴포넌트의 구조와 컴포넌트간의 통신이 어떻게 이루어지는지도 알수있는, 간단해보이지만 이 안에 많은 것들이 함축되어있고 또한 이것을 알게된다면 여기서 응용하여서 다른 더 고도화된 앱들을 구성할 수 있다. TO DO APP 구상하기 위 사진은 우리가 만들어볼 할일 관리 앱의 완성본이다. 반응형으로 구성되어 웹 뿐만 아니라 모바일에서 봐도 문제가 없도록 UI를 구성하였다. 할 일을 input에 적어서 +버튼을 누르면 목록에 추가되고 휴지통 아이콘을 눌러서 낱개로 지우거나 Clear All버튼을 눌러서 한번에 다 지우는 것도 가능하..