Browser

문법특정 요소가 위치한 곳까지 스크롤을 이동하고 싶을 때 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" } 옵션과 ..

파이어폭스, 사파리, 엣지 등 대부분 브라우저에서 디자인 모드를 지원한다. 크롬 콘솔에서 디자인 모드를 활성화하면 코드를 직접 수정하지 않고도 위지윅 에디터처럼 요소 콘텐츠를 수정할 수 있다. 이미지 잘라내기 / 붙여 넣기 등의 작업도 가능하다. 물론 수정했던 내용은 새로고침하면 원상복귀 된다.  크롬 개발자 도구(F12)를 열고 document.designMode 값을 'on'으로 바꿔주면 디자인 모드가 활성화 된다. document.designMode = 'on'; // 디자인 모드 켜키document.designMode = 'off'; // 디자인 모드 끄기  글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요

Next.js는 서버 사이드에서 HTML을 생성하고 클라이언트에 전달한 후, 클라이언트에선 각 요소에 이벤트 핸들러를 달아서 실행 가능하도록 만든다(이를 Hydration이라고 부름)하지만 서버 사이드에서 HTML을 생성하는 시점엔 document 객체가 존재하지 않으므로 에러가 발생하는 것. document는 DOM(객체처럼 HTML을 조작할 수 있는 모델)에 접근할 때 사용하는 객체이며, 브라우저 환경에서만 접근할 수 있다.때문에 클라이언트에서 React 컴포넌트가 마운트된 후 document 객체에 접근하도록 해야 한다. react-no-ssr 같은 라이브러리를 사용하거나 useIsMounted 같은 커스텀훅을 사용하면 위 문제를 해결할 수 있다. 💡 useIsMounted 같은 커스텀 훅은 보통..

URL 객체 현재 페이지의 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..

얼마전 웹서핑을 돌아보던 中 IE6 No More ! 라는 프로젝트를 지지하는 몇몇 블로그를 발견했습니다. 이 운동의 시작은 외국의 http://www.ie6nomore.com 에서 시작되어, 국내에서도 적지 않은 분들이 이 운동에동참하고 계시네요. 우리나라에서는 아직도 IE6을 쓰는 사람이 50%에 가깝고, 미국에서도 10% 정도 사용한다고 합니다.IE6의 큰 문제는 웹표준 문서를 제대로 표시하지 못하고 있는 실정이기 때문에 개발자 입장에서 볼때 IE6 만을 위해 2배이상의시간이 더 들어간다고 합니다. 비단 개발자들을 위해서 IE6 사용 금지 운동을 외치는건 물론 아닙니다. 마이크로소프트가 IE6의 보안 업데이트에 별로 신경을 쓰지 않아 IE6의 보안수준이 거의 밥통이라고 합니다. IE6이 나온건 20..