전체 글 (362) 썸네일형 리스트형 [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,.. [javascript] 배열에서 특정한 문자열을 포함한 경우만 뽑아 보았다. 가짜 검색창 기능을 만들어보면서, 제일 궁금했던 것은 어떻게 특정한 문자열을 포함한 리스트를 가져오는가 였다. 구글에 검색해보니 다양한 방법들이 존재했는데, 그 중에서도 간단하게 써먹을 만한 것을 하나 기록해볼 것이다. 우선 사용된 배열의 메서드는 filter() 하고 indexOf() 메서드 두 개이다. filter 메서드는 조건에 일치하는 요소만 뽑아서 새로운 배열로 반환하는 메서드이고, indexOf 메서드는 접근한 문자열이 파라미터와 일치하는 경우 해당 문자가 위치한 인덱스 번호를 반환하는 메서드인데, indexOf 메서드에서 걸러낸 인덱스 번호에 위치하는 문자열을 filter 메서드가 순회하면서 새로운 배열로 반환해주는 과정을 거친다. 아무튼, 이에 대한 설명을 포함해서 작성해보면 다음 코드로 .. 이전 1 ··· 38 39 40 41 42 43 44 ··· 46 다음
