본문 바로가기

코딩 프로그래밍/Javascript 자바스크립트47

dom 검색해서 반복하기 getElementsByClassName loop getElementsByClassName 이용해서 검색한 것들을 반복하고 싶었는데요. ForEach 바로 사용할 수 있을 줄 알았는데 안되더라고요. querySelectorAll 이용해서 검색해서 할 수도 있는데요. getElementsByClassName으로 하고 싶은 경우도 한번 살펴보려고 합니다. 노션에서 특정 버튼 부분을 제거하려고 했었는데요. 그래서 찾아서 해봤습니다. document.getElementsByClassName('notion-collection-view-tab-button').forEach(dom => dom.remove()) forEach 함수는 없다고 나오더라고요. 그래서 배열로 인식되어 forEach를 사용 할 수 있도록 괄호로 감 싸우면서... 연산자를 사용했습니다. [.... 2023. 5. 26.
meta viewport 자바스크립트 다루기 viewport 이용해서 모바일과 데스크톱에서 어떤 화면과 배율과 확대 조정 등을 설정할 수 있는데요. 페이지 로딩 시에 설정하는 것과 다르게 특정 버튼을 누르면 viewport 적용되도록 하고 싶은 경우에는 자바스크립트 이용해서 조작해야 하는 경우가 있어요. 일단 이미 meta viewport 태그가 있는 경우에는 meta 태그를 찾아서 수정하는 방법을 사용 할 수 있습니다. 제가 주로 사용하는 방법입니다. viewport = document.querySelector("meta[name=viewport]"); viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0').. 2023. 5. 19.
Vue 파일 분리할 때 필요한 emit App.vue 파일에서 모두 작업하려면 너무 커지는데요. 모듈화 하여 분리할 수 있으면 다른 파일로 분리하여 나중에 코드를 파악하기도 좋게 하는 것이 좋은데요. 화면만 있다면 상관없는데 서로 데이터를 주고받아야 할 때 파일 하나로 작성하면 문제없던 일들이 분리하면서 알아야 하는 것들이 있어요. vue create 명령어로 프로젝트를 시작했다면 components 폴더가 있고 HelloWorld.vue 파일도 예제로 있을 수 있어요. 살펴보는 것도 파악하는 과정에서 도움 받을 수 있어요. 일단 필요 없다면 지우고 원하는 파일을 추가합니다. TodoForm.vue 파일을 생성했습니다. 가장 기본 모양으로 만들어보고 App.vue 파일에서 불러와보세요. TO DO 파일을 만들고 나서 App.vue에서 불러와 .. 2023. 4. 4.
Vue 배열에서 특정 요소 삭제 Vue만 해당하는 것이 아니라 자바스크립트라고 할 수 있는데요. 기존에 작성하던 코드에서 이어서 진행하겠습니다. 삭제 버튼을 하나 생성 합니다. 반복문 안에서 넣어주세요. 버튼은 반복하는 개벌 항복바다 삭제 버튼이 있어야 하니까 v-for 안에 있어야 합니다. 몇 번째 있는 항목인지 넘겨주기 위해서 index도 같이 같이 가져올 수 있어요. v-for에서 반복하는 Index를 버튼을 만들 때 넘겨요. 삭제 deleteTodo 함수가 필요해요. 만든 deleteTodo를 return에 넣어야 합니다. splice는 배열에서 몇 번째 인자에 있는 항목부터 두 번째 있는 항목만큼 잘라내기 해서 반환합니다. 삭제에도 사용할 수 있습니다. const deleteTodo = (index) => { todos.val.. 2023. 4. 4.
Vue style 동적 바인딩 할당 {{ todo.subject }} style 바인딩 할당하는 방법이 여러 가지 있어요. 변수에 style 관련 내용을 먼저 선언하고 조건에 따라 변하도록 할 수 있어요. todoCompletedStyle 변수를 만들고 원하는 스타일을 넣습니다. const todoCompletedStyle = { textDecoration: 'line-through', color: 'gray' } ... return { todo, todos, errorMessage, todoCompletedStyle, onAdd } 조건에 따라 todoCompletedStyle 적용되도록 합니다. todo.completed 값이 체크되는 경우에만 적용됩니다. {{ todo.subject }} 다른 방법으로는 클래스 바인딩이 있습니다 객체.. 2023. 4. 3.
Vue 배열 이용한 체크박스 바인딩 Vue 사용하면서 배열 처리하는 부분이 생각보다 간단해서 깜짝 놀랐어요. 편하게 데이터를 바인딩하고 수정할 수도 있네요. 체크박스를 표시하기 위해서 input type 이 checkbox인것을 추가했습니다. v-model에 배열 요소인 todo.completed를 연결하는 것이 포인트입니다. todos에 데이터를 push 하는 경우 기본값으로 false가 들어가도록 합니다. 특별한 로직을 넣지 않았는데 체크박스 동작하는 부분이 신기하네요. TO DO 추가 {{ errorMessage }} {{ todo.subject }} 2023. 4. 3.
Vue v-show 적용 v-show 를 통해서 오류가 있는 경우 보여주는 예제 코드입니다. onAdd 가 실행될 때마다 todo.value를 체크하여 아무것도 없다면 errorMessage에 오류 문장을 입력합니다. errorMessage에 데이터가 있으면 표시되도록 v-show를 사용했습니다. TO DO 추가 {{ errorMessage }} {{ todo.subject }} 2023. 4. 3.
Vue 조건 v-show v-if 조건에 따라서 보여주고 보이지 않고 하는 로직을 넣고 싶은데요. 그때 사용할 수 있는 것이 v-show입니다. toggle 변수에 ref 통해서 true 초기값을 할당하였습니다. true 보여줘에는 v-show를 통해서 toggle 변수가 true이면 보이고 toggle에 느낌표를 붙여서 true가 아니면 조건식이 나오도록 해서 false 보여줘 가 보이도록 했습니다. true 보여줘 false 보여줘 토글 버튼 v-show는 css style요을 통해서 보이고 안 보이고를 구현합니다. 똑같은 것을 v-if로 해보겠습니다. true 보여줘 false 보여줘 토글 버튼 v-if 두 번 사용할 수도 있고 v-else를 사용 할 수도 있습니다. v-if는 조건에 만족하는 것이 표시되어서 개발자 도구에서도 볼 .. 2023. 4. 3.
반응형

티스토리툴바