JavaScript18 [Next.js] HTTP Security headers 적용 Next.js에서 브라우저에 더 나은 보안헤더 향상 방법을 제공해주고 있다. https://nextjs.org/docs/advanced-features/security-headers Advanced Features: Security Headers | Next.js Improve the security of your Next.js application by adding HTTP response headers. nextjs.org `next.config.js` 파일에 내용을 추가하는 방식으로 손쉽게 강화가 가능하다고 한다. 1) 크로스사이트스크립팅 공격감지 시 페이지 로드 중지 2) iframe 안에 심어져 있을 수 있는 해커의 클릭재킹 공격 방지 3) 사용자가 파일을 업로드하고 공유할 수 있는 XSS 악용.. 2023. 3. 30. window.scroll smooth 크로스브라우징 이슈 window의 객체의 scrollTo API에 behavior: "smooth" 속성이 있다. 크롬에서는 smooth 하게 잘 동작을 하나 iOS / safari 에서는 정상 작동이 되지 않는다. 그러하여 폴리필이 필요하고, https://www.npmjs.com/package/smoothscroll-polyfill 해당 라이브러리를 이용해 이슈를 해결한적이 있다. 폴리필을 이용해 브라우저에서 지원해주지 않는 기능을 변환하여 사용할 수 있다. import smoothscroll from 'smoothscroll-polyfill'; ... const scrollToTop = useCallback(()=> { window.scrollTo({top: 0, left:0, behavior: 'smooth'}), .. 2023. 3. 30. [Next.js] body태그에 overflow-x:hidden 을 사용할 시 문제점 // src/styles/globals.css body { overflow-x:hidden; } x축 (가로) 스크롤을 없애기 위해 body에 CSS로 overflow-x:hidden을 사용할경우 window.addEventListener('scroll', func) 가 정상적으로 작동이 되지 않는다. document.getElementById(__next).addEventListener // 안됨 document.body.addEventListener // 안됨 이러한 방법을 사용해봤지만, 적용이 안되었다. 결론은 위처럼 사용할시 scroll event 함수를 줄수가 없다. body::-webkit-scrollbar { display:none; } 이렇게 scrollbar를 없애는 방법이 있다. Ref.. 2023. 3. 27. [React-Native] 안드로이드 시뮬레이터에서 localhost 동작하기 / 안드로이드 adb reverse 명령 사용하기 iOS의 경우는 http://localhost:3000 으로 바로 사용가능하지만, AOS의 경우는 설정을 해줘야 접속이 가능하다. 안드로이드 스튜디오에서 시뮬레이터 연결 확인 후 CLI를 통해 간단한 명령어로 localhost를 사용할 수 있다. 1) adb devices (연결된 디바이스 확인) 2) adb -s 시뮬레이터이름 reverse tcp:3000 tcp:3000 2023. 3. 27. 이전 1 2 3 4 5 다음
