NULL

navigation("/search", { state: { value: e.target.value, movieData: props.movieData, tvData: props.tvData, }, }); input검색창에서 값을 입력받으면 검색결과 컴포넌트로 props을 보내고 싶었다. 알아보니 해당 url파라미터와 state을 이용해서 원하는 컴포넌트 링크로 props을 보낼 수 있었다.

제목과 동일하게 슬라이드 퍼블리싱에 애니메이션 효과를 입히는 도중 확대되면서 크기가 부모 요소를 벗어나도록 되어있는 애니메이션을 구현 중이였다. 부모 요소에 크기가 고정으로 설정되어있어서 어떻게 해결할지 찾는 도중 부모 요소를 벗어나도록 허용하여 화면에서 잘림없이 애니메이션을 처리 할 수 있었다. 결론은 overflow: visible을 찾아서 해결하였다.

NetFlix클론을 하다가 Navbar에 일정 스크롤을 내리면 불투명도를 주고 싶었다. 수 많은 방법이 있지만 그 중에서 Framer-Motion을 통해서 스크롤 애니메이션으로 처리할 수 있는 방법을 선택하였다. const { scrollY } = useScroll(); const bg = useTransform( scrollY, [0, 80], ['rgba(0,0,0,1)', 'rgba(0,0,0,0.5)'] ); scrollY : 사용자의 스크롤 동작에 따라 동적으로 업데이트되는 스크롤 위치를 나타낸다. [0, 80] : 입력 범위로, 여기서 0은 스크롤의 시작을 나타내고, 80은 스크롤 범위의 끝을 나타낸다. 이 범위는 스크롤 위치에 따라 배경 색상의 전환을 결정하는데 사용된다. ['rgba(0,0..

react-hook-form을 다루면서 마주했던 오류를 기록하는 회고록이다. CSS는 styled-components를 사용했다. Input컴포넌트에서 onChange이벤트를 등록하고 싶었다. 그래서 onChange이벤트를 넣어줬는데 동작하지않는 상황에 직면하였다. 구글링으로 찾아보니 react-hook-form만의 사용방법이 따로 존재하였다. 해결방법은 간단하다. onChangeHandler(e), })} aria-invalid={errors.id ? "true" : "false"} placeholder="이메일을 입력해주세요." /> register함수 옵션안에 이벤트를 등록해주었더니 해결되었다. 참고링크 : https://velog.io/@rlorxl/react-hook-form-%EA%B4%80%..

var car = ['소나타', 50000, 'asd']; // array console.log(car); var car2 = {name: '소나타', price : 50000}; // object자료형 //key : value형태로 저장가능한게 장점. // 실제 저장되는 값은 value이고 key는 자료의 이름이다. console.log(car2.name); // 사용방법 1 console.log(car2['price']);// 사용방법 2 array/Object 차이 array는 순서개념이 존재한다. (왼쪽에서 오른쪽으로 가는 순서) 하지만 Object는 순서개념이 없다. (어느 곳에 위치하든 순서영향이 없다.) 순서개념이 존재하는 array는 - 0번부터 0번까지 자르기 - 0번 바꾸기 - 맨 뒤,..

이벤트 버블링 어떤 html태그에 이벤트가 발생하면 그 html의 상위요소까지 이벤트가 실행되는 현상을 이벤트 버블링이라고 한다. click이라는 이벤트를 예로 들자면, html 태그에 클릭이 발생하면 그의 모든 상위요소까지 자동으로 클릭이 된다는 뜻이다. hello 위의 코드를 보면 p태그의 hello라는 글자를 클릭하게 되면 브라우저는 사용자가 클릭을 총 3번 했다고 인지한다. 예 ) p위에 div와 그 위의 div 위와 같은 현상이 이벤트 버블링이다. 브라우저는 원래 이렇게 동작하도록 되어있으며 이 사실을 잊은 채 코드를 짜다보면 가끔 이상한 현상이 발생할 수 있다. (← 해당 창을 누르면 모달창 닫으라는 코드를 짬) 모달창 내용 사용자가 이거 클릭해도 이벤트 버블링 때문에 이것도 클릭한 것이 된다..

js. jquery 퍼센트 스크롤 JS window.addEventListener("scroll", function () { var per = ((window.scrollY / (document.body.clientHeight - window.innerHeight)) * 100); box.style.width = per + "%"; console.log(per.toFixed(0) + "%"); }) jquery $(window).on("scroll", function(){ var percent = ($(window).scrollTop() / ($(document).height() - $(window).height())) * 100; $('.box__width').css('width', percent+"%..

스크롤 이벤트리스너 window.addEventListener('scroll', function(){ console.log('123') }); 스크롤바를 조작하면 scroll 이벤트가 발생한다. 그래서 scroll 이벤트리스너를 전체 페이지에 달면 전체 페이지를 스크롤할 때마다 원하는 코드를 실행할 수 있다. 코드를 실행하고 스크롤을 조작하면 할때마다 123이 콘솔에 출력된다. 참고로 window는 그냥 전체 페이지를 의미한다. document도 전체 페이지인데 window가 약간 더 큰 개념이고 scroll 이벤트리스너는 관습적으로 window에 붙인다. 스크롤 관련 유용한 기능들 window.addEventListener('scroll', function(){ console.log( window.sc..

return 함수를 반환해준다. 그리고 함수 종료의 뜻도 있다. 리턴을 만나면 함수가 종료되서 리턴 아래 코드들은 생략된다. function 함수(){ return 123 console.log(456); } console.log(함수()); 123을 출력해주고 함수가 종료되서 456은 출력되지 않는다. 함수는 숫자를 집어넣으면 규칙에 따라 다른 숫자가 나오는 변환기역할을 한다. 변환기 만들 때 return 문법이 유용하게 사용된다. 예시 - 부가세 계산기 console.log(60000 * 0.1); console.log(50000 * 0.1); console.log(80000 * 0.1); 예를 들어 6만원, 5만원, 8만원짜리 상품 3개의 부가세를 구해서 콘솔창에 출력하려면 이렇게 필요할 때 마다 0..

.includes() 문자에서 찾을 단어가 들어있는지 검사하고 있다면 true / 없으면 false 반환한다. '문자'.includes('찾을단어') // 사용법 'abc'.includes('a'); // true 'abc'.includes('ab'); // true 'abc'.includes('ac'); // true 그외에 값은 false 문자 abc중 하나라도 포함하고 있으면 true를 반환한다. 하지만 한글, 영어가 들어있는지, a로 끝나는지, 마침표 다음 영어가 있는지 등등 이와 같은 경우는 includes() 만으로 검증하기 힘들다. 정규표현식 (regular expression) 정규식은 문자 검사를 할 때 사용하는 식이다. 어떤 문자에 "abc"라는 단어가 들어있는지 확인할 때 사용한다. ..