요즘 스벨트 프레임워크에 푹 빠졌습니다. 프론트엔드3 대장이라고 불리는 앵귤라, 리액트, 뷰js를 경험해 보지 못했고 자바스크립트의 "J"자 정도 아는 상태에서 스벨트로 이미지 슬라이더를 만들어 보았습니다. 아직 스벨트를 깊이 있게 공부한 것이 아니라 스벨트를 완전히 이해하고 활용하지는 못했습니다. 스벨트 공부 시작하면서 첫 번째 프로젝트로 TODO APP을 만들고 두 번째로 이미지 슬라이더를 만들어 보면서 느끼는 점은 이런 비유가 맞을지 모르겠지만 프론트엔드 개발이 마치 DB가 없는 백엔드 개발 같다는 생각이 듭니다. 스벨트 이미지 슬라이더 이미지 슬라이더는 많이 사용되는 일반적인 형태로 구성되어 있으며 단순 공부용입니다. 이미지가 자동으로 슬라이드 되면서 다음 버튼과 이전 버튼을 추가해 수동으로 이미..
자바스크립트 공부하다 보면 다른 언어랑 다르게 자꾸 한눈을 팔게 되는 것 같습니다. 자바스크립트 공부는 시작도 못하고 프런트엔드 프레임 워크 공부를 먼저 하게 되었네요. 예전에도 자바스크립트 공부 시작했다가 제이쿼리로 빠져 버려서 제대로 공부를 못했는데 이번에는 스벨트로 빠져 버렸습니다. 유튜브 노마드 코더의 리콜라스님이 리액트나 프레임 워크를 다루기 전에 자바스크립트부터 튼튼하게 공부하라고 했는데... 리액트는 혼자 공부하기가 조금 어려워 보였는데 스벨트는 투토리얼을 보면 초보자도 왠지 쉽게 할 수 있을 것 같은 느낌이 들어 시작해 보았습니다. 완성된 스벨트 TO DO APP 데모입니다. 전체 코드는 깃허브에 있습니다. let now = new Date(); let options = { weekday:..
요즘 자바스크립트에 대한 관심이 생겨 조금씩 공부를 해 보고 있습니다. 자바스크립트는 백엔드 개발을 포함한 웹 개발언어 중 가장 인기 있고 핫한 언어라고들 합니다. 잠깐이지만 자바스크립트 공부를 하면서 느낀 점들을 얘기해 보려고 합니다. 참고로 저는 웹 개발자도 아니고 프로그래머도 아닌 그냥 평범한 일반인입니다. 그래서 용어가 틀릴 수도 있고 잘 못 알고 있는 부분도 있을 수 있습니다. 어디까지나 일반인이 느낀고 생각한 점을 말하고자 하니 너무 깊이 있게 보지는 말시길 바랍니다. 제가 생각하는 프런트엔드에서의 자바스크립트는 DOM을 조작하거나 비즈니스 로직을 구성하고 UI/UX 개발을 하는 것을 주목적으로 한다입니다. 웹 개발과 관련 없는 직종이기에 자바스크립트를 깊이 있게 공부하거나 사용한 경험이 없습..
2013년도에 출제된 코딩도장 프로그래밍 문제 중 가장 인기가 많은 "3과 5의 배수 합하기" 레벨 1의 낮은 수준 문제입니다. 저는 파이썬과 자바스크립트로 이 문제를 풀이해 보았습니다. 문제: 10 미만의 자연수에서 3과 5의 배수를 구하면 3, 5, 6, 9이다. 이들의 총합은 23이다. 1000 미만의 자연수에서 3의 배수와 5의 배수의 총합을 구하라. 1부터 1000 미만의 숫자 중 3과 5의 배수를 찾아 그 수를 합한다. 999까지 자연수 중 3과 5의 배수를 찾는다. 중복되는 3과 5의 배수는 하나만 선택한다. 찾은 3과 5의 배수를 더 한다. 파이썬 : result = 0 # 합계를 담을 변수 for n in range(1, 1000): # 1부터 999까지 1000 미만 if n % 3 =..
컴퓨팅 사고력을 키우기 위해 아주 가끔 백준이나 코딩도장 같은 알고리즘 문제 풀이하는 웹사이트에 가서 문제 풀이한 것을 구경하곤 합니다. 그때마다 드는 생각 프로그래밍은 정말 머리가 좋은 사람들 아니면 천재들만의 영역이구나! 오늘 코딩 도장에 잠깐 드려서 제목이 "구글 입사 문제 중 하나"라는 문제를 보았습니다. 난이도가 낮은 문제지만 수·알·못이라 그런지 머릿속으로 공식을 그리기가 쉽지 않았습니다. 코딩도장 프로그래밍 문제, 구글 입사 문제 중에서 1부터 10,000까지 8이라는 숫자가 총 몇 번 나오는가? 8이 포함되어 있는 숫자의 갯수를 카운팅 하는 것이 아니라 8이라는 숫자를 모두 카운팅 해야 한다. (※ 예를 들어 8808은 3, 8888은 4로 카운팅 해야 함) 문제 출처 : https://c..
Back to top 또는 Scroll to top으로 불리는 위로 가기 버튼, 본문 내용이나 목록 페이지가 긴 경우 또는 무한 스크롤이 있는 페이지에서 마우스 스크롤 없이 버튼 클릭만으로 페이지 상단으로 이동하는 자바스크립트 코드로 방문자 편의 기능입니다. 디자인적인 요소보다는 자바스크립트 코드에 중점을 두었습니다. html에 클릭하면 페이지 상단으로 이동하는 버튼을 만듭니다. 여기서는 이미지 대신 svg를 사용해 버튼색 변경이 유연하도록 하였습니다. 버튼의 크기는 button > svg width="38" height="38"을 조정해 줍니다. HTML : 페이지 하단에 적당한 간격을 두고 고정될 수 있게 버튼 스타일을 만듭니다. color 속성을 통해 버튼 색상을 수정할 수 있습니다. CSS Sty..
블로그나 웹사이트를 운영하다 보면 특정 아이피를 차단해야 하는 경우가 있습니다. 보통의 블로그 CMS나 웹사이트에는 이러한 기능을 가지고 있거나 플러그인 등을 활용해 아이피를 차단할 수 있지만 티스토리에는 이러한 기능이 없어 차단할 방법이 없습니다. 특히 애드센스를 운영하다 보면 무효 트래픽으로 광고가 차단되거나 아예 계정이 삭제되는 경우까지 발생되곤 하는데 의심되는 아이피를 발견하더라도 어떤 조치도 할 수 없어 막연하기까지 합니다. 물론 의심되는 아이피를 차단한다고 해서 완벽하게 문제가 해결되는 것은 아니지만 내가 할 수 있는 최소한의 조치라도 하는 수밖에 없는 실정입니다. 무효 트래픽으로 경고를 받지 않으려면 내가 내 광고를 클릭하는 일이 없도록 해야 하고 자주 방문하는 구독자분들이 광고를 클릭하지 ..
티스토리처럼 아이피 주소를 사용자가 직접 수집할 수 없는 경우 사용할 수 있는 유일한 방법일 것 같습니다. 접속자의 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..
실습예제로는 적당한 게 없어 네이버 실시간 검색어를 이용했습니다. C# using System; using System.Net; using Newtonsoft.Json; // NuGet 패키지 Newtonsoft.Json namespace ConsoleApp1 { class Program { static void Main(string[] args) { WebClient client = new WebClient(); // client.Encoding = System.Text.Encoding.UTF8; string data = client.DownloadString("http://rank.search.naver.com/rank.js"); dynamic json = JsonConvert.DeserializeO..
본 포스팅은 티스토리 포럼에 올라온 질문을 토대로 작성합니다. 무한 스크롤을 적용하기 전에 꼭 단점이 무엇인지 알아보고 적용하시기를 바랍니다. 특히 뒤로 가기 시 문제점 등 구글링을 하시면 많은 정보가 있습니다. 티스토리 #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
