전체 글 (401) 썸네일형 리스트형 [javascript] 드래그 이벤트로 형제 태그 끼리 위치 교환 하기 보호되어 있는 글입니다. [javascript] npm 과 package, package.json 공부정리 의존성 관리 npm package package.json 의존성 설치와 삭제 1. 의존성 관리 과거 자바스크립트 파일들은 CDN(캐시서버) 을 통해서 웹 서버 또는 로컬 환경에서 별도로 파일을 관리하였다고 한다. 그러나 이러한 방식은 전역 스코프를 공유하기 때문에 다른 파일에도 영향을 줄 수 있었고, 각 파일이 의존성에 맞게 순서대로 로딩되어야 하는 문제로 인해 파일 간의 의존성이 어떠한지 일일이 확인해야 하는 번거로움이 존재했다. 이외에도 다양한 이유로 인해 이를 보완하기 위한 다양한 방법들이 등장했고, 그 중에서도 유명해졌고, 현재에도 각광 받고 있는 것이 node.js 와 npm을 활용한 의존성 관리이다. 2. npm 구글의 자바스크립트 엔진 v8를 기반으로 구동되는 자바스크립트 런타임 플.. [react] 드래그로 캐러셀 움직이는 법 보호되어 있는 글입니다. [javascript] 브라우저 pageX,Y / clientX,Y 등 참고하려고 만든 자료 간단정리 clientX ,Y : 유저가 브라우저의 전체 페이지에서 스크롤을 조작했을 때 보이는 화면의 X축과 Y축 pageX,Y : client X,Y 축을 포괄하는 전체 브라우저의 X,Y 축 위 축들은 스크롤에 아무런 조작을 하지 않은 상태에서는 동일한 결과를 반환한다. page는 브라우저에 보이든 안 보이든 전체를 기준으로 보는 반면, client 는 용어 그대로 고객이 눈으로 인식할 수 있는 크기를 기준으로 결과를 반환하기 때문이다. offsetHeight, offetWidth : 유저가 선택한 태그 요소가 차지 하는 높이와 넓이로 margin(태그의 젤 바깥 여백)을 제외하고, padding(margin 과 content 사이에 위치한 내부 여백)과 border(태그의 테두리)의 폭을 포함하여 나.. [javascript] 크롬 개발자 도구에서 자바스크립트 호출 스택 단계를 확인하려면 '검사' -'소스' -'디버깅 도구' 를 사용하면 된다. 간단정리 자바스크립트는 단일 스레드 이므로 한 번에 한 가지 작업 밖에 하지 못한다. 즉 자바스크립트는 근본적으로는 동기적 언어이다 다시 말해 하나의 일을 시작하면, 이 일이 다 끝나야지만 다음 일을 시작하는 것이다. 이러한 특성에 의거하여 자바스크립트는 함수를 호출하면 호출 스택이라는 곳의 젤 밑바닥 부터 호출된 함수들이 쌓인다. 그리고 쌓인 스택들은 처음에 들어온 순서대로 사용되는 것이 아니라 스택의 꼭대기에 쌓인(마지막으로 들어온) 함수부터 차례대로 처리한다 예외적으로 자바스크립트는 비동기적 작업을 수행할 수 있는데, 만일 오래 걸리는 코드(setTimeout 등의 비동기적 함수)가 있다면 이를 웹 API에서 처리 후 콜백 큐에서 대기하고 있다가 이전에 먼저 실행된 코드가 완료될 때 까지 기다렸다가.. [react ] 리액트- 타입에서 img의 onError 에 대체 이미지를 넣으려면 "event: SyntheticEvent<HTMLImageElement> " 하면 된다. 간단 정리 자바스크립트에서 사용되는 이벤트 핸들러인 onclick 이나 onchange 등과 같은 이벤트 핸들러는 브라우저 마다 이벤트의 구현이나 동작들이 다를 수 있다. 하지만 리액트에서는 모든 브라우저에서 공통되게 이벤트 핸들러가 작동할 수 있도록 감싸주는 래퍼 객체가 존재한다. 래퍼 객체의 예시로는 onClick 같은 경우에는 MouseEvent 가 있고, onChange 는 ChangeEvent 가 그것이다. 다시돌아 와서 img의 이벤트는 앞서 MouseEvent 와 같이 일치하는 이벤트 래퍼 객체가 없기 때문에, 모든 이벤트 래퍼 객체의 시작이라고 할 수 있는 최상위 래퍼 객체인 SyntheticEvent 를 사용하여 정의한다. 따라서 이러한 이유에 따라 다음과 같이 img 의 이벤트 타입을 .. [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,.. 이전 1 ··· 43 44 45 46 47 48 49 ··· 51 다음
