Front/javascript

[Javascript] 클릭해서 드래그로 가로 스크롤 구현 하기 (click and drag)[목표]가로 스크롤이 필요한 부분을 제공하는 스크롤을 이용해서가 아닌 마우스로 클릭 후 드래그하는 방법으로 구현해보고자 한다.  [코드] 1. 변수 및 초기화 //스크롤을 할 컨테이너를 선택henniee.tistory.com위의 글과 연결 되는 내용인데, 내가 윈도우로 가로 드래그를 구현 후 맥에서 빌드를 하면 자꾸 드래그가 안된다는 이슈가 발생하여 아예 마우스의 휠로 드래그를 할 수 있게 스크립트를 만들었다.  [코드]scrollContainer.addEventListener("wheel", (e) => { e.preventDefault(); const delta = e.deltaY || e.deta..

[목표]가로 스크롤이 필요한 부분을 제공하는 스크롤을 이용해서가 아닌 마우스로 클릭 후 드래그하는 방법으로 구현해보고자 한다.  [코드] 1. 변수 및 초기화 //스크롤을 할 컨테이너를 선택 const scrollContainer = document.getElementById("scrollContainer");let isMouseDown = false; //사용자가 마우스를 클릭 했는지 여부를 추적let startX; // 마우스를 클릭한 최초의 x 좌표 let scrollLeft; // 드래그 시작 시 컨테이너의 가로 스크롤 위치 2. 마우스 누를때 이벤트  scrollContainer.addEventListener("mousedown", (e) => { isMouseDown = tr..

코드를 짜던 도중 textarea가  text 높이에 따라 자동으로 높이 조절을 구현 하고 싶었다.  textAreaElement.style.height = textAreaElement.scrollHeight + 'px'; 이렇게 적어주면 된다는 많은 블로그들의 말에 따라 했는데 이상하게 낮은 버전의 web에서는 이게 안먹히는것이다...... 그래서 원인을 찾던 중 알게 된 scrollHeight 와 clientHeight를 간단하게 작성해보려고 한다.  scrollHeight정의: 요소의 전체 콘텐츠 높이로, 스크롤 여부와 상관없이 요소 내의 모든 콘텐츠 높이를 포함.특징: 요소의 내부 콘텐츠가 현재 뷰포트에 보이지 않더라도 해당 영역까지의 전체 높이를 반환.예시: 텍스트가 많아 세로로 스크롤이 필요한..

[재귀함수]함수에서 자기 자신을 다시 호출해 작업을 수행하는 방식이다. 특정 분기까지 자기 자신을 계속해서 호출하는데, 주로 반복문을 구현할 때 사용한다. [목표]api응답으로  String 형태의 객체 안에 3개의 배열을 받아온다. 그중 각 배열의 첫 번째 요소만 사용하되 이미 동일한 내용이 있으면 그다음 요소 저장하도록 하는 걸 구현하고 싶다.간단하게 설명하면  [a,b,c]   [a, b, c]  [d, e, f] 면  [a, b, d] 저장하는 식으로!  근데 String 형태이기 때문에 json 파싱이 안되서 match를 통해 원하는 정보를 빼주고 이전의 정보와 비교하면서 같은 게 있으면 다음 match로 넘아가는 방법으로 코드를 짜 주었다. [구현]if (fileList) { ..