본문 바로가기
반응형

전체 글

 (401)
[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; } ↓
[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..
반응형

티스토리툴바