본문 바로가기
반응형

전체 글

 (403)
[javeScript] 간단한 자동 슬라이드 (본인 참고용) 슬라이드 박스가 추가 되면 배열이 무너진다. 박스의 상대적 위치와 절대적 위치를 알고 이것을 적용할 수 있다면 해결 할 수 있으려나 모르겠다. 또한 마우스를 클릭한 상태에서 박스가 지정된 위치를 벗어나지 않고 다음 슬라이드로 넘어가게 하려면 드래그 관련 이벤트나 메서드, 계산법 등을 찾아봐야 겠다. 코드 See the Pen Untitled by youngwan2 (@youngwan2) on CodePen. 시연영상 간단한 캐러셀
[react] 리액트에서 select 의 option 의 값( value) 가져오려면 selected가 아닌 onChange를 써서 value 값을 가져오자 자바스크립트만 쓸 때는 select 의 옵션 값은 selected 를 써서 가져왔는데, 오늘 리액트에서 이거와 똑같이 하려고 하니까 아래 에러가 떳다. 검색해보니 리액트에서는 위의 기능을 지원해주지 않아서 그런거라 하더라. 리액트에서는 옵션 값을 가져 오기 위해서는 select 태그에서 onChange 를 적용한 후 event.target.value 를 통해 선택된 해당 값을 가져올 수 있다. 뭐가 어찌되었든 복잡하지 않아서 다행이다. const [selectVal,setSelectVal] = useState(''); const changeSelectValue = (event) =>{ setSelectVal(event.target.value) }; return ( {optionText.map((text,..
[javascript] 배열에서 특정한 문자열을 포함한 경우만 뽑아 보았다. 가짜 검색창 기능을 만들어보면서, 제일 궁금했던 것은 어떻게 특정한 문자열을 포함한 리스트를 가져오는가 였다. 구글에 검색해보니 다양한 방법들이 존재했는데, 그 중에서도 간단하게 써먹을 만한 것을 하나 기록해볼 것이다. 우선 사용된 배열의 메서드는 filter() 하고 indexOf() 메서드 두 개이다. filter 메서드는 조건에 일치하는 요소만 뽑아서 새로운 배열로 반환하는 메서드이고, indexOf 메서드는 접근한 문자열이 파라미터와 일치하는 경우 해당 문자가 위치한 인덱스 번호를 반환하는 메서드인데, indexOf 메서드에서 걸러낸 인덱스 번호에 위치하는 문자열을 filter 메서드가 순회하면서 새로운 배열로 반환해주는 과정을 거친다. 아무튼, 이에 대한 설명을 포함해서 작성해보면 다음 코드로 ..
[javaScript] 프로미스(Promise)에 대해 알아보았다(1)ㅣstate 프로퍼티 까지만 프로미스를 쓰는 이유와 형식 우리가 비동기적으로 코드를 작성하다 보면 함수 안의 함수, 그 함수 안의 함수, 또 그 함수 안의 함수 ....... 형태로 중첩되는 방향으로 콜백함수를 매개변수로 사용할 수 있는데, 이를 보통 콜백 지옥(Callback Hell) 이라 부른다고 하더라. 이런 코드들은 결국 코드의 들여쓰기가 마치 > 요런 모양으로 깊어지니까 본인 포함해서 다른 사람이 이 코드를 본다면 혼란에 빠질 수 있고, 무엇보다 유지보수에 치명적이기 때문에 이를 보완하여 비동기로 처리하는 시점을 명확히 할 수 있는 객체가 바로 Promise 라고 한다. Promise는 ES2015 에 처음으로 등장했다고 하는데, 내가 코딩 공부를 시작한게 올해 반년 뒤였으니 엄청 오래되었네. Promise는 비동기적 처..
[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; } ↓
반응형

티스토리툴바