choi95의 TIL📝

문제 window.addEventListener('scroll', () => { box.style.width = `${window.pageYOffset}px`; }); 다음과 같이 스크롤된 Window.pageYoffset값 만큼 임의의 박스 요소의 가로 너비를 동적으로 늘어나게 코드를 작성하였다. 화면에 랜더링된 임의의 박스의 가로 너비가 늘어나는 애니메이션 효과는 언뜻 보면 자연스러운 것처럼 보이지만 스크롤을 방향키를 통해 내려본다면 다소 부자연스럽게 끊기는 거를 확인할 수 있다. 이러한 현상을 해결하기 위해서 requestAnimationFrame의 동작 원리를 살펴보고 구현해 보고자 한다. requestAnimationFrame https://developer.mozilla.org/ko/docs/..

문제 다음과 같이 리스트 항목을 JS 상에서 동적으로 추가되게끔 구현하였다. 하지만 리스트 항목이 현재 상위 요소의 view를 overflow하게 되면 새롭게 추가된 항목으로 스크롤 뷰가 자동으로 맞춰지지 않는 UX적으로 불편함이 발생하였다. 이를 해결하기 위해 처음에는 scrollElement의 scrollTop의 상대적 위치 값을 이용하였지만 이보다 더 간편하게 특정 요소 위치로 스크롤 뷰를 이동할 수 있는 방법이 있어 포스팅하고자 한다. 문제해결_element.scrollintoView() https://developer.mozilla.org/ko/docs/Web/API/Element/scrollIntoView element.scrollIntoView - Web API | MDN Element 인터..

https://choi95.tistory.com/manage/newpost/149?type=post&returnURL=https%3A%2F%2Fchoi95.tistory.com%2F149 https://choi95.tistory.com/manage/newpost/149?type=post&returnURL=https%3A%2F%2Fchoi95.tistory.com%2F149 choi95.tistory.com 이전 비밀지도 문제를 풀 때 이진수 값을 구하기 위해서 다음과 같은 함수를 만들어 주었다. function changeBinary(x, n) { let tmpArr = []; while (x) { tmpArr.push(x % 2); x = parseInt(x / 2); } while (tmpArr.le..

다음과 같이 별점을 평가할 수 있는 Rating UI를 구현하고자 한다. 별점 Container와 마우스 Position 가져오기 현재 별점 UI를 랩핑하고 있는 클래스가 stars인 컨테이너가 좌측으로 얼마만큼 떨어져 있는지와 마우스 커서의 현재 위치 값을 알아야지 컨테이너 내에서 현재 마우스 커서가 얼마만큼 이동했는지 파악할 수 있다. 또한 현재 마우스 커서가 컨테이너 내에서 이동한 비율이 별점 0.5점 단위로 계산되어야 하기 때문에 전체 star 컨테이너 내에서 별점 가로 너비/2의 값을 확인해야 된다. MouseEvent 인터페이스의 clientX 읽기 전용 속성은 이벤트가 발생한 애플리케이션 viewport 내에 수평 좌표를 제공한다(페이지 내의 좌표와는 반대) const calculateSco..

백준에서 JavaScript를 사용하여 문제를 풀게 될 경우 테스트 케이스 입력에 관한 스켈레톤 코드를 제공하는 프로그래머스나 LeetCode 플랫폼 등과는 다르게 사용자가 직접 파일을 읽어서 테스트 케이스를 입력받는 사전 설정 코드를 작성해줘야 한다. 지금까지는 백준에서 문제 지문만 가져와 외부 코드 에디터에서 알고리즘 로직을 작성하거나 solution 함수 내부에서 문제만 풀어도 되는 프로그래머스를 사용하였는데 백준에서 조금 더 다양한 문제를 풀어보고 싶은 욕심에 nodeJS의 입출력 관리에 대해서 다음 백준 문제를 예시로 포스팅하고자 한다. 문제 https://www.acmicpc.net/problem/4344 4344번: 평균은 넘겠지 대학생 새내기들의 90%는 자신이 반에서 평균은 넘는다고 생각..

https://choi95.tistory.com/115 axios Intercept requests_API 요청 처리 동안 UI 요소 보여 주기 기존 코드 $searchInput.addEventListener('keyup', async function(event) { $loadingIndicator.style.visibility = 'visible'; //loading UI 웹 상에 랜더링 await searchKeyword(event.target.value, searchKey.. choi95.tistory.com 이전 포스팅에서 API 요청 처리 동안에 loading UI를 랜더링해주고 API 요청이 끝나면 다시 사라지도록 axios Intercept requests와 await를 이용한 비동기 처리를..

기존 코드 $searchInput.addEventListener('keyup', async function(event) { $loadingIndicator.style.visibility = 'visible'; //loading UI 웹 상에 랜더링 await searchKeyword(event.target.value, searchKeywordApi, showKeyword); }) const searchKeywordApi = (data) => { let res = fetch(`${API_URL}?q=${data}`).then(data => { return data.json(); }) return res; } const searchKeyword = async (data, callApi, callback) =..

다음과 같이 form 태그 내에서 Input value 값을 가져오기 위해서 formData 인터페이스를 사용하였다. 이후 formData 인스턴스를 코드 상에서 참조 및 사용하기 이전에 콘솔 창에서 어떤 정보가 출력되는지 확인하려고 했으나 formData에 대한 직접적인 데이터 정보가 아닌 FormData 객체에 대한 정보를 반환할 뿐이었다. formData 객체 The FormData interface provides a way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using the XMLHttpRequest.send() meth..