Front-end6 DOM 조작 시 알아야할 Live collection, Static collection NodeList NodeList는 element.childNodes와 같은 속성이나 document.querySelectorAll()과 같은 메소드에 의해 반환되는 Node Collection이다. NodeList는 마치 Array와 비슷하게 생겼지만 배열과는 다르다. 우리는 배열과 같은 형태를 하고 있지만 배열이 아닌 객체들을 유사 배열이라고 부른다. NodeList는 배열이 아니기 때문에 배열에 사용 가능한 메소드를 대부분 사용할 수 없다. 그렇기 때문에 NodeList에 배열 메소드를 사용하기 위해서는 NodeList를 실제 배열로 변환하는 등의 방법을 사용해야 한다. (최신 브라우저에서는 NodeList에 forEach()와 같은 메소드를 지원하고 있다.) 중요한 점은 대개의 경우 NodeList.. 2021. 3. 13. 커스텀 드롭다운 메뉴 만들기 blog.campvanilla.com/reactjs-dropdown-menus-b6e06ae3a8fe ReactJS: Dropdown menus A quick guide on building dropdown menu interactions in React. blog.campvanilla.com letsbuildui.dev/articles/building-a-dropdown-menu-component-with-react-hooks Building a Dropdown Menu Component With React Hooks We'll create a dropdown menu using React Hooks. letsbuildui.dev 첫번째 게시글은 클래스 컴포넌트에서, 두번째 게시글은 함수 컴포넌트에서 .. 2021. 1. 9. useState 사용 시 배열 아이템 업데이트 방법 dev.to/brettblox/react-hooks-usestate-43en React Hooks - useState The useState hook allows us to make our function components stateful. Create and Initial... dev.to 위 글 참고했는데 더 좋은 방법이 있으면 댓글로 알려주시길 바랍니다 ㅜㅜ // 업데이트 함수 const UpdateSns = (e, index) => { setUserSns( userSns.map((item, idx) => (idx === index ? e.target.value : item)) ); }; // onChange에 업데이트 함수 넣어주기 {userSns.map((item, idx) => ( Updat.. 2021. 1. 6. css 커스텀 border 만들어주는 사이트 border dotted 간격을 넓히고 싶어 찾아보다가 유용한 사이트를 발견했습니다. kovart.github.io/dashed-border-generator/ Dashed Border Generator by @kovart With this tool you can simply increase space between dots, change dash length or distance between strokes. kovart.github.io 원하는 스타일을 지정하고 밑에 코드를 복붙하기만 하면 되서 편하네요 ! 2020. 12. 22. 이전 1 2 다음