본문 바로가기
반응형

분류 전체보기

 (362)
[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; } ↓
[react, type] Uncaught TypeError: local.map is not a function 리액트와 타입스크립트를 짬뽕해서 프로젝트를 만들어 보던 중 부모 컴포넌트로 부터 state 를 전달받아 state. map 형태로 리스트를 그려주려 했는데, 뜬금없이 타입 에러가 떳다. 그건 Uncaught TypeError: local.map is not a function 였는데, 이에 대해 검색해보니 map이 전달받은 local 이 배열이 아닌 경우에 띄워주는 에러 메시지 라고 하더라 ( 즉, 배열이 아닌 것에 map() 함수로 접근하니 local.map()는 함수가 아니라고 잔소리를 한 것이다.), 그래서 해결 책으로 아래의 형식으로 map 이 전달 받은 것이 배열이면 map 을 실행하고, 아니라면 null을 반환하도록 삼항연산식 을 적용 했더니 무사히 해결 되었다 (근데 local을 출력 해보면..
[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..
반응형

티스토리툴바