Dev/WEB
[SEO] 검색 사이트 노출(검색) 방지 및 수집 금지 요청
최근 고객사에서 개발서버의 웹사이트가 노출되어 고객에게 혼란을 줄 수 있다는 요청이 들어와 확인을 해보니 예전에 누가 등록을 한건지 검색이 잘 되고 있었다. 처음엔 소유권을 뺐어 사이트 노출 금지 요청을 하려 했으나, 등록된 사이트를 전부 아는 것도 아니고 추후 프로젝트 담당자가 변경된다면 누군가는 같은 일을 할 것이라고 생각했다. 하여 검색 엔진의 수집 로봇에게 수집 금지 요청을 하면 자동으로 내려갈 것 이라고 생각했고 검색을 해보니 해당 내용이 맞았다. 위 내용을 잘 보면 robots.txt파일에서 경로를 차단해버린다면 아예 크롤링 시도를 하지 않아 meta태그의 noindex, nofollow의 내용을 인지하지 못해 안된다는 내용이 있다. 해더에 해당 내용을 삽입한다면 profile이 dev일 때,..
[JS] URL에서 파라미터, get, path 등 가져오기
웹개발 중 현재 페이지에서 URL에 있는 param값을 가져오고 해당 값으로 js단에서 처리를 하고자 할 때 값을 가져오는 방법은 html dom api인 Location, URLSearchParams 를 사용하면 금방 구현 할 수 있다. 쉽게 url의 값을 가져올 수 있습니다. How to use const url = 'https://devpuer.tistory.com/view.do?detailsKey=1&focus=1'; // 전체 url https://devpuer.tistory.com/view.do?detailsKey=1&focus=1 console.log(location.href) // url중 get 부분 ?detailsKey=1&focus=1 console.log(location.search..
[JS] scrollIntoView 해당 요소로 Focus하기, 해당 요소로 스크롤 하기
리스트 형식의 화면을 구성하거나, 한 페이지에서 스크롤을 사용하고 싶은 경우 예전에는 그 움직이고자 하는 요소의 위치 값을 받아와 scollto 함수를 사용하여 스크롤을 하곤 했는데 더 좋은 방법을 찾았네요. 스크롤 기능을 구현할 때 다른 방법으로는 jQuery 스크롤, window함수 사용 등 다양한 방법이 있지만 해당 요소의 위치 값을 얻어오고 전체 list에서 위치값을 구해 옮기는 등 다소 불편하고 복잡한 경우가 있는데 이 방법은 진짜 간단하게 jQuery 추가 없이 스크롤만 사용하기엔 너무 좋은 방법이라 공유 및 정리합니다. 저는 이코드를 프로젝트에서 리스트 안에 2번째 img태그부터 스크롤이 되어 출력되고자 했고 부가적인 기능은 없었습니다. 이미지의 요소(dom)을 받아와 해당 함수만 실행해주면..
[Fullcalendar] 라이브러리 이용해서 달력 만들기, 사용법 정리
FullCalendar 달력 기능을 구현할 때 많이들 사용하는 라이브러리로 간단하게 소개 및 사용법을 정리하고자 합니다. 포스팅의 모든 내용은 공식 홈페이지에서 확인할 수 있으며, 단순 정리와 어떻게 사용했는지에 대한 내용을 정리 용도로 작성하겠습니다. js로 달력을 만들기 위해 fullcalendar를 사용할 것이며 아래의 공식 링크에서 보다 자세한 사용법을 알 수 있습니다. FullCalendar - JavaScript Event Calendar Open Source... With over 10 years of open source and over 120 contributors, FullCalendar will always have a free and open source core. Learn mor..
[http-server] HTML 테스트를 위한 웹 서버 띄우기 (빠르게)
들어가기 전 얼마 전, 흥미로운 글을 확인해서 로컬에서 따라해보던 중, cors오류를 만났다. cors오류는 다른 도메인에서 소스를 불러올 때 동일한 출처가 아니면 불러오지 못하게하는 오류인데 로컬에서 로컬의 모듈을 불러오는데 오류가 뜨고 있었다. 브라우저가 html에서 모듈을 불러오는거라 문제가 없어보였는데 확인해보니 이런식으로 모듈을 불러온다면 cors오류가 난다고 한다. cors 오류가 나는 이유는 동일 출처 도메인 정책으로 동일한 도메인에서 나온 리소스만 허용한다는 정책이다. 즉, 이걸 해결하기 위해선 웹서버를 구축해서 같은 도메인을 사용해야 한다는 것이다. node, vue, react 등 프레임워크를 사용하여 구현할 수 있지만 생각보다 오래걸리기에 더 빠른 방법을 찾아보다. Microsoft에..
[CSS] Web font 적용 (with. Apple SD Gothic Neo)
Font Download 사이트 (추천) 눈누 상업용 무료한글폰트 사이트 noonnu.cc Fonts - Apple Developer Get the details, frameworks, and tools you need to use system fonts for Apple platforms in your apps. developer.apple.com 적용하기 폰트 파일이 있다면 프로젝트에 넣고 해당 경로를 맞춰준 뒤 설정한 font-family 이름으로 적용할 요소에서 적용한 방식으로 사용하면 된다. 폰트 파일이 없다면, 웹폰트로 사용하면 되는데 추천 사이트인 눈누에서 마음에 드는 font의 상세페이지를 들어가면 우측에 경로가 보인다. @font-face { font-family: '폰트이름'; src:..
[JS] MutationObserver - Dom의 변경 감지 (리스트 변경)
MutationObserver 페이지를 구성할 때 페이지의 요소(리스트)의 변경, 추가, 제거 등 이벤트를 감지하고 그에 맞는 함수를 추가하고 싶을 때가 있습니다. 예를 들어 상품을 보여주는 페이지를 구성 후 다음 페이지로 넘어가기 위해 ajax, axios 등 비동기 통신으로 값을 변경할 경우 기존 onload, redy 등에서 등록했던 객체의 이벤트 리스너들이 사라지거나 오류를 발생하는 현상이 있습니다. 오류까지는 아니지만 원하는 결과가 아니기에 다시 onload, redy에 사용했던 함수를 불러와 적용 시킬 수 있지만 다른 ajax나, axios 등 추가 함수를 만들게 된다면 그 때 마다 해당 함수를 추가해줘야하는 번거로움이 있습니다. See the Pen observer before by 정재준 ..