JS

Element의 HTML을 읽어오거나 설정할 수 있다. 태그 안에 있는 HTML 전체의 내용을 들고 온다.해상 노드가 가지고 있는 텍스트 값을 그대로 가져온다.콘솔로 찍었을 때 결과값은console.log(document.getElementById('test').inn

메뉴 슬라이딩 애니메이션을 만들어보자!codepenjieunbin95/embed/NWoNGOm?default-tab=html%2Cresult메뉴버튼을 누르면 언더바가 자동으로 움직이면서 해당 메뉴로 자연스럽게 슬라이딩 되는 애니메이션 효과를 줄 수 있다만들고자하는 메뉴

한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작합니다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작합니다.!codepenjieunbin95/embed/abXNxKE?

모달 외의 다른 곳을 클릭할 경우 모달의 창을 닫게 하는 Hooks를 만들어보자먼저 모달창과 그 외의 부분을 구별해주어야 하는데 모달창에 해당하는 태그에 ref={ref}로 지정해주어 구분해준다ref의 초기값을 null로 지정해주고 useOnClickOutside에 r

사용자가 미리 결정한 시간동안 타이핑을 멈출 때까지 이벤트의 처리를 지연시킨다서버로 전송되는 api 호출 수도 크게 줄어들어 성능이 저하되거나 백엔드의 불필요한 로드가 추가되는 것을 방지 할 수 있다유저가 value값을 입력하고 지정한 시간 내에 또다른 값을 입력 했다

해당 요소에 마우스를 올리면 추가적인 정보가 나타나게 하는 효과npm install react-tooltiptooltip을 import해준 후, tooltip태그를 만든다.tooltip태그에 id값을 넣어준다.(id값과 data-tooltip-id값이 같아야 한다)그

외부에 알려지면 안되는 api_key 또는 db관련 정보등 보안이 필요한 값들은 유지보수를 위해 .env파일에 환경변수로 만들어 변수를 꺼내와 사용한다.env파일은 항상 최상위 루트에 파일을 만들어야 한다.env파일은 깃에 올라가면 안되기 때문에 gitgnore에 추가

포트폴리오 작성 중 mp.4영상을 삽입해야했다.먼저 assets폴더에 영상을 넣고 import하는데 아예 폴더 자체가 나오지 않는다;;해결을 위해 여러 블로그를 찾아본 결과https://stackoverflow.com/questions/60794257/reac

홈페이지를 만들면서 scroll to top버튼을 만들어 보기로 했다!버튼을 감싸주는 div와 top icon태그를 가지고 오고 클릭하였을 때 스크롤 해줄 onClick 함수를 넣어주자. 그리고 조건부 랜더링을 위해 논리연산자 && 을 사용해 준다.top icon태그

!codepenjieunbin95/embed/eYXOmRE?default-tab=html%2Cresultnew Date()생성자를 사용하여 타이머를 만들어보자!new Date()로 시작(현재)시간을 선언한다setInterval()을 사용해 1초가 지나가는 현재\_시간을