본문 바로가기
반응형

분류 전체보기

 (399)
[react-error] Uncaught Error: input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`. 요약 " input 태그는 void 요소인 태그라서 ~ 사이에 빈공간, 자식요소(ex. 텍스트, 기타 태그 등)가 있으면 에러를 발생 시킨다." 에러명 Uncaught Error: input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`. 파파고좌의 해석) Uncatched Error: 입력은 void 요소 태그이며 'childreness'를 포함하거나 'dangerouslySetInner'를 사용해서는 안 됩니다. 잠깐 정리) void: 아무것도 없음, 비어있음 dangerouslySetInnerHTML: react에서는 자바스크립트 자체에서 사용하는 innerHTML 을 사용할 수 없기 때..
[javascript] 배열에서 중복값 제거 해보기 쇼핑몰을 만들어 보고 있는데, 중복되는 id가 장바구니에 포함되는 것이 너무 거슬렸다. 그래서 이를 제거하는 방법을 알아보니까 3가지나 있더라, 그 중에서 제일 어려워 보였지만 알아두면 다양한 곳에 써먹을 만한 것 하나만 정리해 놓을 생각이다. let arr = [1,2,2,2,2,4,4,5,6]; let newarr = arr.filter((arrEl,i)=>{ return arr.indexOf(arrEl) === i } ); console.log(newarr); 우선 indexof() 메서드는 배열.indexOf(찾고자하는 배열의 요소) 로 입력하게 되면, 찾고자 하는 배열의 요소가 위치한 인덱스 번호를 반환한다. 즉, 배열 [1,2,2,2,4,4,5,6].indexOf(5) 라고 했을 때 '5' 라..
[React-error] React Hook useCallback has a missing dependency: 'searchParams'. Either include it or remove the dependency array 보호되어 있는 글입니다.
[css] input 태그 클릭 시 생기는 외곽선 숨기기 input 박스를 클릭하면 보이는 테두리가 너무 거슬렸다. 이것을 없애기 위해 검색하니 나오는 한 가지 방법 입력 요소 가상 클래스 선택자 인 : focus 가 적용된 상태에서 outline 을 'none' 으로 설정만 하면 되더라. .search input:focus{ outline: none; } ↓
[js 코드] 스크롤 시 특정 위치에서 div 배경색 바꾸기 See the Pen Untitled by youngwan2 (@youngwan2) on CodePen. ㅁ pageYOffset 와 pageXOffset window.pageYOffset 으로 접근하면 현재 웹 화면의 스크롤 세로축의 현재 위치에 대한 px 정보를 확인할 수 있다. 가로축 스크롤 위치는 window.pageXOffset 으로 접근이 가능하다. 참고로 scrollY 와 scrollX 는 앞서 언급한 pageYOffset 과 pageXOffset과 동일한 기능이다. 하지만, 웹 브라우저의 호환성을 생각한다면 쓰지 않는 것이 좋다 하더라. ㅁ 기존 태그에 새로운 클래스 추가와 삭제 기존의 태그에 새로운 클래스를 추가(add)하려면 다음과 같이 접근한다. 태그요소. classList.add('..
[javascript] 현재 위치 정보 가져오기 위해 Geolocation 을 찾아보았다. 날씨 앱을 만들어 보던 중 현재 위치 기반으로 현재 날씨를 보여주는 앱을 만들면 좋겠다 싶어서 관련 방법을 찾아보았다(솔직히 내부적으로 어떻게 돌아가는지 잘 이해는 안 된다. 그냥 정보를 가져올 수 있네? 같은 감탄만 가득). 찾아보니 Geolocation API 가 존재했고, 다행히 자바스크립트 자체적으로 내장된 API 였다. Geolocation API 는 사용자의 위치를 지도에 표시하거나 사용자의 위치와 관련된 개인화된 정보를 표시하기 위해 웹 앱에서 사용자의 위치 정보를 검색하려는 경우 등에 활용하는 것으로 요약하자면 현재 위치 정보를 가져오는 API 이다. 이 API는 내부적으로 다양한 인스턴스를 가지지만, 대표적으로 위치 기반 관련 정보를 포괄적으로 가져오기 위해서는 getCurrentPosi..
[js 지식] 문서객체모델 과 노드 계층 구조 문서객체모델(DOM) 문서객체모델(DOM; Document Object Model) 은 일종의 인터페이스로 우리가 바라보는 화면의 요소(Element)에 접근할 수 있도록 돕는 역할을 한다. 즉, 현재 우리가 보고 있는 이 블로그의 UI의 각 요소에 접근하여 조작하기 위해서는 DOM 이 필요하며, 이 DOM에 접근해서 관련 요소를 조작함으로써 웹에 관한 정보를 획득할 수 있게 된다. 다시 말해, DOM이 없다면 자바스크립트는 웹 페이지에 대한 정보를 얻을 수 없다는 말과 같다. 이러한 DOM 에서 제공하는 API는 document를 통해 사용할 수 있는데, 여기서 document 객체는 모든 DOM트리의 시작점에 해당하며 브라우저가 불러온 웹 페이지를 총징한다. 요약 하자면 index.html 내에 작성..
[javascript] 버튼 클릭 시 움직이는 슬라이딩 기능 버튼 클릭 시 슬라이딩 되면서 이미지가 전환되는 기능 1. 코드 See the Pen Untitled by youngwan2 (@youngwan2) on CodePen. let btn = document.querySelectorAll('button'); let 슬라이드 = document.querySelectorAll('.container .inner div'); console.log(슬라이드); console.log(btn); btn.forEach((btnEl)=>{ btnEl.addEventListener('click',()=>{ render(btnEl); console.log(btnEl); }); }); function render(btnEl){ 슬라이드.forEach((divEl)=>{ if(bt..
반응형

티스토리툴바