DOM
[HTML/CSS] 원하는 위치에 노드 삽입하기 — insertAdjacentHTML
[HTML/CSS] 원하는 위치에 노드 삽입하기 — insertAdjacentHTML
2024.06.02insertAdjacentHTML vs innerHTMLelement.insertAdjacentHTML(position, htmlString) element.insertAdjacentHTML() 메서드는 인자로 전달한 문자열(htmlString)을 HTML로 파싱해서 지정된 위치(position)에 삽입하는 메서드다. 사용자 입력을 받지 않는 곳에 사용하면 createElement() 메서드를 사용하는 것 보다 간편하게 요소를 삽입할 수 있다. 사용자 입력을 받아서 처리할 때는 XSS 공격을 방지하기 위해 별도의 sanitizing이 필요하다. 비슷한 메서드로 element.innerHTML()이 있지만 삽입 위치를 지정할 수 없고, 기존 요소를 덮어쓰기 때문에 전체 요소를 다시 파싱해야 하는 단점이 있..
[HTML] select, option 태그 주요 속성과 특징
[HTML] select, option 태그 주요 속성과 특징
2024.05.29Option 생성자 함수 | MDN💡 HTML 옵션 태그의 selected 어트리뷰트와 자바스크립트로 접근하는 option.selected 속성(프로퍼티)은 서로 독립적인 기능을 가진다. 옵션 태그의 selected 어트리뷰트는 초기 선택 상태를 나타내고, option.selected 속성은 현재 선택 상태를 반영하고 제어하는데 사용한다.// Option 생성자를 사용하면 document.createElement() 보다 더 간결하게 작성할 수 있다new Option(text?, value?, defaultSelected?, selected?) ◼︎ text : 옵션 요소에 표시할 텍스트 | 기본값 "" 빈 문자열text에 지정한 값은 option.textContent로 설정된다.◼︎ value : 옵..
[JS] 특정 요소 위치로 스크롤 이동하기 - scrollIntoView
[JS] 특정 요소 위치로 스크롤 이동하기 - scrollIntoView
2024.05.11문법특정 요소가 위치한 곳까지 스크롤을 이동하고 싶을 때 element.scrollIntoView 메서드를 이용하면 간편하게 구현할 수 있다. scrollIntoView 메서드는 총 3가지 방법으로 사용할 수 있다. (MDN)element.scrollIntoView(align) ❶ 파라미터 없음 — element가 브라우저 화면 가장 위로 오도록 스크롤(정렬)element.scrollIntoView(); // element.scrollIntoView(true)와 동일 ❷ boolean 파라미터// { block: "start", inline: "nearest" } 옵션과 동일element.scrollIntoView(true); // { block: "end", inline: "nearest" } 옵션과 ..
[DevTools] 구글 크롬 디자인 모드 (Design Mode)
[DevTools] 구글 크롬 디자인 모드 (Design Mode)
2024.05.10파이어폭스, 사파리, 엣지 등 대부분 브라우저에서 디자인 모드를 지원한다. 크롬 콘솔에서 디자인 모드를 활성화하면 코드를 직접 수정하지 않고도 위지윅 에디터처럼 요소 콘텐츠를 수정할 수 있다. 이미지 잘라내기 / 붙여 넣기 등의 작업도 가능하다. 물론 수정했던 내용은 새로고침하면 원상복귀 된다. 크롬 개발자 도구(F12)를 열고 document.designMode 값을 'on'으로 바꿔주면 디자인 모드가 활성화 된다. document.designMode = 'on'; // 디자인 모드 켜키document.designMode = 'off'; // 디자인 모드 끄기 글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요
[Next.js] document is not defined 오류 해결 방법
[Next.js] document is not defined 오류 해결 방법
2024.05.08Next.js는 서버 사이드에서 HTML을 생성하고 클라이언트에 전달한 후, 클라이언트에선 각 요소에 이벤트 핸들러를 달아서 실행 가능하도록 만든다(이를 Hydration이라고 부름)하지만 서버 사이드에서 HTML을 생성하는 시점엔 document 객체가 존재하지 않으므로 에러가 발생하는 것. document는 DOM(객체처럼 HTML을 조작할 수 있는 모델)에 접근할 때 사용하는 객체이며, 브라우저 환경에서만 접근할 수 있다.때문에 클라이언트에서 React 컴포넌트가 마운트된 후 document 객체에 접근하도록 해야 한다. react-no-ssr 같은 라이브러리를 사용하거나 useIsMounted 같은 커스텀훅을 사용하면 위 문제를 해결할 수 있다. 💡 useIsMounted 같은 커스텀 훅은 보통..
[React] 리액트 드래그앤드롭 파일 업로드 구현
[React] 리액트 드래그앤드롭 파일 업로드 구현
2024.05.05요즘 대부분 웹사이트에서 파일을 업로드할 때 마우스로 원하는 파일을 끌어 놓는 드래그&드롭 기능을 지원한다. 리액트에선 React DnD 같은 라이브러리를 사용할 수도 있지만 HTML5에서 제공하는 드래그 드롭 API를 이용해서 직접 구현할 수 있다. 생각보다 어렵지도 않다. 기본 구조더보기export interface IFileTypes { id: number; object: File; // File 객체}const DragDrop = ( { /* ... */ },) => { const [isDragging, setIsDragging] = useState(false); const [files, setFiles] = useState([]); const fileId = useRef(0);..
[JS] 자바스크립트 URL 객체 / searchParams
[JS] 자바스크립트 URL 객체 / searchParams
2024.04.27URL 객체 현재 페이지의 URL이 아래와 같다고 가정했을 때... 참고로 %20 은 빈칸(space) 1개https://example.com/?name=Jonathan%20Smith&age=18 url 객체의 search 속성을 이용해 모든 쿼리 스트링 내용을 가져올 수 있다const url = new URL(window.location.href); // 현재 urlurl.search; // '?name=Jonathan%20Smith&age=18' name age 같은 특정 쿼리 스트링만 가져오고 싶다면 URLSearchParams 메서드를 이용하면 된다. get으로 값을 조회하고 append(기존 값에 이어붙이기) 혹은 set(기존값 교체)으로 새로운 값을 추가할 수도 있다.url.searchPara..