요즘 스벨트 프레임워크에 푹 빠졌습니다. 프론트엔드3 대장이라고 불리는 앵귤라, 리액트, 뷰js를 경험해 보지 못했고 자바스크립트의 "J"자 정도 아는 상태에서 스벨트로 이미지 슬라이더를 만들어 보았습니다. 아직 스벨트를 깊이 있게 공부한 것이 아니라 스벨트를 완전히 이해하고 활용하지는 못했습니다. 스벨트 공부 시작하면서 첫 번째 프로젝트로 TODO APP을 만들고 두 번째로 이미지 슬라이더를 만들어 보면서 느끼는 점은 이런 비유가 맞을지 모르겠지만 프론트엔드 개발이 마치 DB가 없는 백엔드 개발 같다는 생각이 듭니다. 스벨트 이미지 슬라이더 이미지 슬라이더는 많이 사용되는 일반적인 형태로 구성되어 있으며 단순 공부용입니다. 이미지가 자동으로 슬라이드 되면서 다음 버튼과 이전 버튼을 추가해 수동으로 이미..
자바스크립트 공부하다 보면 다른 언어랑 다르게 자꾸 한눈을 팔게 되는 것 같습니다. 자바스크립트 공부는 시작도 못하고 프런트엔드 프레임 워크 공부를 먼저 하게 되었네요. 예전에도 자바스크립트 공부 시작했다가 제이쿼리로 빠져 버려서 제대로 공부를 못했는데 이번에는 스벨트로 빠져 버렸습니다. 유튜브 노마드 코더의 리콜라스님이 리액트나 프레임 워크를 다루기 전에 자바스크립트부터 튼튼하게 공부하라고 했는데... 리액트는 혼자 공부하기가 조금 어려워 보였는데 스벨트는 투토리얼을 보면 초보자도 왠지 쉽게 할 수 있을 것 같은 느낌이 들어 시작해 보았습니다. 완성된 스벨트 TO DO APP 데모입니다. 전체 코드는 깃허브에 있습니다. let now = new Date(); let options = { weekday:..
Back to top 또는 Scroll to top으로 불리는 위로 가기 버튼, 본문 내용이나 목록 페이지가 긴 경우 또는 무한 스크롤이 있는 페이지에서 마우스 스크롤 없이 버튼 클릭만으로 페이지 상단으로 이동하는 자바스크립트 코드로 방문자 편의 기능입니다. 디자인적인 요소보다는 자바스크립트 코드에 중점을 두었습니다. html에 클릭하면 페이지 상단으로 이동하는 버튼을 만듭니다. 여기서는 이미지 대신 svg를 사용해 버튼색 변경이 유연하도록 하였습니다. 버튼의 크기는 button > svg width="38" height="38"을 조정해 줍니다. HTML : 페이지 하단에 적당한 간격을 두고 고정될 수 있게 버튼 스타일을 만듭니다. color 속성을 통해 버튼 색상을 수정할 수 있습니다. CSS Sty..
티스토리처럼 아이피 주소를 사용자가 직접 수집할 수 없는 경우 사용할 수 있는 유일한 방법일 것 같습니다. 접속자의 IP 주소는 ipify API를 통해 받아 옵니다. 특정 아이피 접속 차단 ipify에 각 언어별 아이피 주소를 체크하는 소스가 있으니 참고하시길 바랍니다. 아이피 주소 받기 아래는 자바스크립트로 아이피 주소만 받아 오기 예제 코드입니다. 출처 : https://www.ipify.org Javascript jQuery Python 역시 파이썬은 뭐든 간단하고 간결하네요! from requests import get ip = get('https://api.ipify.org').text print('My public IP address is: {}'.format(ip)) 무효 트래픽으로 의심되..
자바스크립트를 이용한 리다이렉트입니다. 서버 측 접근이 가능하다면 htaccess 파일을 이용해 301 또는 302 Redirect를 해주는 것이 가장 좋은 방법이지만 티스토리처럼 사용자가 서버에 접근할 수 없는 경우라면 자바스크립트 코드를 헤드에 넣어 주는 방법이 유일할 것 같습니다. www를 non-www "www.example.com" 도메인에서 www.이 없는 "example.com" 루트트 도메인 주소로 리다이렉트 (function () { var currURL = document.URL; if (currURL.match('www.example.com')) { var redirURL = currURL.replace('www.example.com', 'example.com'); document.l..
본 포스팅은 티스토리 포럼에 올라온 질문을 토대로 작성합니다. 무한 스크롤을 적용하기 전에 꼭 단점이 무엇인지 알아보고 적용하시기를 바랍니다. 특히 뒤로 가기 시 문제점 등 구글링을 하시면 많은 정보가 있습니다. 티스토리 #2 스킨 무한 스크롤 자바스크립트 라이브러리인 infinite scroll을 티스토리 #2 스킨에 적용해 봅시다. 인피니티 스크롤 : https://infinite-scroll.com/ 무한스크롤을 #2스킨에 적용하기 위해서는 인덱스페이지 목록을 페이지네이션과 분리되도록 박스로 한번 감싸 줘야 합니다. 블로그 관리에서 HTML 편집 창으로 이동합니다. 을 찾습니다. 아래와 같이 시작 부분과 끝나는 부분까지 inner 클래스로 감싸 줍니다. ... 다음에 윗부분에 아래 코드를 넣어 줍니..
제이쿼리를 이용한 간단한 스크롤 TOP 이동 버튼 입니다. 버튼 이미지는 우선 Font Awesome을 이용했습니다만 이미지 파일이나 css로 만들어서 사용하셔도 됩니다. 전체 코드 The example "scroll back to top" 스크롤를 아래로 내리면 버튼이 나타 납니다. 버튼을 클릭하면 상단으로 이동 됩니다. 제이쿼리 라이브러리 없는 순수 자바스크립트 맨 위로 가기 버튼 만들기, 자바스크립트 Scroll back to top Back to top 또는 Scroll to top으로 불리는 위로 가기 버튼, 본문 내용이나 목록 페이지가 긴 경우 또는 무한 스크롤이 있는 페이지에서 마우스 스크롤 없이 버튼 클릭만으로 페이지 상단으로 이동하 wonderbout.tistory.com
