프론트엔드9 [Javascript] 스크롤바 위치 퍼센트 구하기 scrollLeft / scrollTop을 이용하여 스크롤바가 현재 (위쪽으로부터/왼쪽으로부터) 어느 위치에 있는지 퍼센트 구하기 1. scrollTop 퍼센트 구하기(세로 스크롤) let scrollDiv = document.getElementById("#scrollDiv"); let scrollPos = scrollDiv.scrollTop / (scrollDiv.scrollHeight - scrollDiv.clientHeight) * 100; // 또다른 스크롤바 div의 위치를 scrollDiv위치와 동일하게 움직이기 $("#anotherScrollDiv").scrollTop(scrollPos); 2. scrollLeft 퍼센트 구하기(가로 스크롤) let scrollDiv = document.ge.. 2023. 1. 9. [트러블 슈팅] base 64 image to Javascript File (Feat. Naver Smart Editor 2.0) 이번에 진행한 프로젝트 중에 스마트 에디터를 사용한 게시글 쪽에서 이슈가 폭발했다.. 간단한 게시글 하나를 작성하는데도 이렇게 고려할게 많다니 이번 프로젝트를 진행하면서 많이 배운 것 같다. 😂 이건 QA 때 이슈로 올라온건 아니고 테스트하다가 발견한건데, 평소와 같이 로컬에서 테스트를 진행하다가 게시판 목록화면에 들어갔을 때 갑자기 로그가 계~~~~~~속 찍히면서 VSCode가 터져버렸다..😥 원인........ 처음엔 뭔가 로직이 꼬인 줄 알고 여기저기서 에러를 찾았는데 원인은 에디터에 등록되는 이미지 문제였다. 우린 DB를 읽어올 때 로그를 띄우는데 QA팀에서 에디터에 용량이 큰 이미지를 복붙하는데 그게 base64 이미지로 등록되면서 url길이가 어마어마하게 길어진 것이다(DB를 확인해보니까 길이.. 2022. 1. 19. [트러블 슈팅] 페이지 길 때만 top 버튼 보이기(feat. window.onload, $(document).ready 차이) 트러블 슈팅하기! Smart Editor 프로젝트의 연장선으로 QA 기간에 모바일에서 게시판 목록이랑 게시판 내용 페이지의 길이에 따라 top 버튼을 만들어달라는 요청이 들어왔다. 열심히 구글링해서 적용했는데.. 목록화면에서는 잘 동작하는데 내용화면에서는 제대로 동작하지 않았다. 원인을 분석하다가 결국 답은 window.onload()와 $(document).ready()의 차이를 이해하느냐의 문제였다. 우선 내가 작성한 코드를 먼저 보여주고 각 function의 차이를 정리해보려고 한다. 1. 스크롤이 생길 때만 top 버튼 보이기 우선 게시판 목록에서 돌아갔던 코드 $(document).ready(function() { let scrollHeight = document.documentElement.s.. 2022. 1. 17. [Javascript] onclick과 addEventListener의 차이 자바스크립트에서는 엘리먼트에 클릭 이벤트를 발생시킬 때 onclick()과 addEventListener('click', function(){}) 이 두 가지 방식을 사용한다. 둘 다 클릭 이벤트를 발생시킨다는 점에선 동일하지만 각각 차이점이 존재한다. 두 방법의 차이점에 대해 정리해보려고 한다. 1. 이벤트 덮어쓰기 vs 이벤트 누적 onclick은 이벤트를 여러 개 적용하는 것이 불가능하다. 만일 onclick 이벤트 핸들러를 이미 사용한 상태에서 새로운 onclick 이벤트를 추가한다면 이후에 추가된 이벤트가 기존의 이벤트를 덮어쓴다. addEventListener를 사용할 경우 여러 이벤트를 추가하더라도 누적되어 모든 이벤트가 동작된다. 클릭버튼을 이용하여 간단하게 예제를 만들어보았다. 버튼을 클.. 2021. 9. 21. [Javascript] Dayjs 사용법 정리 (Date Format, 날짜 계산하기 등) 이전 포스트에서는 자바스크립트 Date 객체로 날짜 계산하는 법과 DateFormat 지정하는 법, 주의사항에 대해 정리하였다. 현재 프로젝트에서 Date객체를 이용하여 모든 날짜를 처리하고 계산하고 있는데, 친구가 Dayjs 라이브러리라는 것을 알려주었다. Dayjs가 어떤 라이브러리인지, 사용법에 대해 구글링 해보았더니 Date객체에 비해 훨씬 포맷팅도 쉽고 생각보다 다양한 기능을 제공하기는 것 같아 한 번 정리해보려고 한다. 1. Dayjs 라이브러리란? Dayjs 라이브러리는 Javascript에서 날짜/시간을 쉽게 파싱하고 계산할 수 있도록 도와주는 Date 라이브러리이다. 용량도 7.1KB로 기존에 많이 사용하던 Moment.js 에 비해 훨씬 가벼운 경량 라이브러리이다. Moment.js를 .. 2021. 8. 20. [Javascript] 자바스크립트 Date 기간 조회하는 법 (+ 주의사항) 이번 포스팅에서는 자바스크립트 Date를 이용하여 기간을 조회하는 방법과, 자바스크립트 날짜 계산 시 주의할 점에 대해 발견하여 정리하고자 한다. 프로젝트를 그대로 가져올 수 없어서 간단하게 예제로 구현해보았다. 자바스크립트로 날짜 구간을 지정하고 해당 기간에 대한 결과를 조회하고자 한다. 아래와 같이 필터링이 일주일, 3개월, 6개월, 1년으로 지정되어 있고 각 버튼을 누르면 마감 날짜 기준으로 시작 날짜를 변경해주는 기능을 만들었다. 기본적으로 자바스크립트의 Date 객체는 setMonth(), setDate()를 이용하여 날짜를 직접 지정할 수 있는 기능을 제공하고, setMonth(월 + N) 과 같은 기능을 통해 날짜 계산이 가능하다. let today = new Date()// Sun Sep .. 2021. 8. 12. [Javascript] 데이터 불변성(Immutability) 데이터 불변성(Immutability)이란? 자바스크립트에서 데이터는 원시 데이터와 참조형 데이터로 분류할 수 있다. * 원시 데이터 : String, Number, Boolean, undefined, null * 참조형 데이터 : Object, Array, Function(다른 함수의 인자로 사용되는 callback 함수로 사용이 가능하기 때문에 참조형 데이터에 해당) 1) 데이터 불변성 - 원시데이터 원시데이터가 메모리에 들어있을 경우 동일한 값을 참조할 경우 새로운 메모리에 할당되는 것이 아닌, 기존 메모리를 참조하도록 함 따라서, 단순하게 생각한다면 원시데이터는 a와 b의 값이 동일하면 a===b : true이고, a와 b의 값이 다르다면 a===b : false이다. let a = 1 let b.. 2021. 7. 9. [Javascript] 전개 연산자(...) 패스트 캠퍼스의 한 번에 끝내는 프론트엔드 개발 초격차 패키지 Online 강의 중 Part 4. JavaScript Level up 내용을 정리하고, 추가 내용을 살짝 덧붙여 포스팅하였습니다. 문제가 되는 내용이 있을 경우 댓글로 알려주신다면 바로 조치하겠습니다. :) 전개 연산자 (...) 전개 연산자는 말 그대로 객체나 배열을 전개할 수 있는 연산자이다. 전개 연산자를 이용하면 기존의 것을 건들이지 않고 새로운 객체를 생성할 수 있다. 1. 배열 배열에서 전개데이터를 사용할 경우 하나의 배열 데이터를 쉼표로 구분하는 각각의 아이템으로 전개하여 출력한다. 사용법은 단순하게 배열명 앞에 ...을 붙여주면 된다. const fruits = ['Apple', 'Banana', 'Cherry'] consol.. 2021. 7. 8. [Javascript] 구조 분해 할당(Destructuring Assignment) 패스트 캠퍼스의 한 번에 끝내는 프론트엔드 개발 초격차 패키지 Online 강의 중 Part 4. JavaScript Level up 내용을 정리하였습니다. 구조 분해 할당이란? 구조 분해 할당이란, 객체나 배열을 분해하여 각 속성을 개별적으로 할당하는 것을 말한다. 구조 분해 할당, 혹은 비구조화 할당이라고 부른다. 1. 객체 객체를 구조 분해하여 원하는 속성만 꺼내서 사용 할 수 있다. 👉 중괄호 사용. 객체의 속성명을 동일하게 명시하여 할당 객체 내의 속성이 아닌 다른 속성명을 사용할 경우 해당 변수는 undefined가 된다. const user = { name: 'Hope', age: 27, email: 'hope772948@gmail.com' } const { name, age, email, .. 2021. 7. 8. 이전 1 다음 반응형
