Coding
-
[개취존중] 데굴데굴 굴러가는 Progress bar를 만들어보자 🤩Coding/etc 2020. 8. 19. 17:22
안녕하세요 ! 이번 포스팅에서는 현재 제 블로그에서 사용하고 있는 이미지가 굴러가는 듯한 애니메이션의 Progress bar를 만든 방법을 공유합니다. 외부 라이브러리 조금과, 간단한 제이쿼리 기능만 사용하면 아주 쉽게 추가할 수 있습니다! 잠깐!😳 이번 포스팅은 다음을 전제로 합니다. 1. 데굴데굴 굴러갈 커여운 이미지가 준비되어 있다. - 스크롤에 따라 0~360도까지 회전하기 때문에 원형에 가까울 수록 좋습니다. 2. 페이지 소스에 제이쿼리가 적용되어 있다. - 저의 블로그에는 jQuery v3.3.1이 cdn으로 적용되어 있습니다. 3. June의 prognroll.js를 적용하는 포스팅(https://enfanthoon.tistory.com/156)을 보고왔다. 1. prognroll 붙이기 위..
-
[Javascript] 브라우저가 Internet Explorer 인지 체크하기Coding/JavaScript 2020. 8. 18. 19:04
자바스크립트의 navigator.userAgent 객체에는 브라우저에 대한 정보가 나와있습니다. 따라서 현재 클라이언트가 접속한 브라우저가 익스플로어(IE)인지 체크하기 위해서는 appName에 익스플로어(msie)가 있는지 체크하기만 하면 됬죠. 실제로 서비스되는 웹 페이지에서 익스플로어에 호환 문제가 제일 많이 발생하기 때문에 아오 익스플로러 체크를 해서 따로 처리를 해주는 경우가 많습니다. (jQuery 3 이상은 IE 낮은 버전에서 사용이 안되고, history API 같은 경우는 IE 11의 일정 버전 이상에서만 작동합니다. 대체 왜?) 근데, IE 12 이후로 알 수 없는 이유로 익스플로어의 appName이 'Netscape'로 바뀌었습니다. 따라서 IE 12 이상도 대응을 하기 위해서는 다음..
-
[History] SPA에서 URL을 업데이트하는 효율적인 방법Coding/JavaScript 2020. 8. 2. 20:46
안녕하세요 이번 포스팅에서는 History API에 대해 알아보겠습니다. 일반적으로는 주소에 따라 데이터를 띄울때 라우팅을 연결하는 것이 기본적입니다. 특정 URL로 접근하였을 때 로드될 내용을 잘 연결해 놓는다면 URL에 따른 적절한 내용을 로드할 수 있겠죠. 그렇기 때문에 우리는 보통 이러한 방법들을 이용하여 URL을 업데이트하고 페이지를 이동합니다. 1. window.location.href="" 2. form action="/" 3. server에서 리다이렉트 시켜주기 ... 하지만 SPA에서는 우리가 자주 사용하는 URL 이동 방법들을 사용하기 적절하지 않습니다. Single Page라는 특성상 데이터를 페이지가 올려져 있을 때도 비동기적으로 로드하기 때문에 페이지 새로고침이 일어나면 맨 처음으..
-
[HTML/jQuery] 짧은 코드로 Progress bar / Scrollbar 커스터마이징하기Coding/etc 2020. 8. 2. 20:15
안녕하세요 이번 포스팅에서는 여러분들의 블로그를 간단하게 꾸미는 방법에 대해 소개합니다. 1. Progress bar Progress bar는 진행 상황을 나타냅니다. 보통은 div나 span으로 구현하기도 하지만, 간단하게 외부 라이브러리를 이용하는 것도 좋은 방법이겠습니다. 다음 코드를 HTML 파일에 추가해 봅시다. (티스토리의 경우 스킨 편집 -> HTML 편집에서 추가할 수 있습니다) 제이쿼리를 사용하여 prognroll을 HTML 요소에 붙이는 것을 볼 수 있습니다. 티스토리의 경우는 제이쿼리가 옛날버전으로 추가되어 있지만, 다른 플랫폼을 사용하시는 경우 제이쿼리 cdn까지 추가해 주어야 합니다. 이때 중요한 점은 Progress bar가 적용될 부분입니다. 다음 코드에서는 body에 붙이고 ..
-
2년차 개발 블로그의 애드센스 수입은 어느정도일까?Coding/etc 2020. 6. 9. 11:53
안녕하세요~ 오늘로써 제가 티스토리에 포스트를 업로드한지 대략 400일 정도가 되었습니다. 그동안 쉰 기간도 많고, 정말 하루에 2~3개씩 포스팅을 하며 불태운 기간도 있었는데요. 오늘 포스팅 주제는, 2년 차 개발 블로그의 애드센스 수입은 어느정도 나올 지에 대해 알아보도록 하겠습니다. 애드센스란 구글에서 제공하는 광고 프로그램인데요. https://www.google.com/adsense/new/u/0/pub-9382586972339738/home Google 애드센스 - 웹사이트에서 수익 창출하기 Google 애드센스의 웹사이트 수익 창출 기능을 사용하여 수익을 올려보세요. Google 애드센스에서 광고 크기를 자동으로 최적화하여 광고의 노출 및 클릭 가능성이 높아집니다. www.google.co...
-
[개발일지] Github Api 연동 App CommitManager- 3) router 연결하기Coding/Dev.log 2020. 6. 9. 11:25
잠깐! 저의 개발일지를 처음 보시는 분이라면 읽어주세요. 더보기 커밋매니저 서버의 경우, 백엔드를 처음 공부해 보는 학부생의 기준에서 작성한 코드입니다. 더 깔끔하고 좋은 코드가 나올 수 있고, 부족한 부분이 많습니다. 적극적인 피드백 환영합니다. 감사합니다. 안녕하세요~ 😃 오늘은 API를 호출 URI를 생성하기 위한 라우팅 설정을 해보도록 하겠습니다. 그 전에, 커밋매니저에서 사용할 기능에 대한 검토가 필요한데요. 우선 저희 기획 단계에서는 커밋매니저 프로로타입 버전의 기능을 다음으로 정하기로 했습니다. 1. 사용자의 api 활용을 위한 토큰을 얻는 과정에서, 직접 personal access token을 발급해 입력하는 것이 아닌 OAuth 인증을 통해 구현한다. 2. 사용자의 오늘 날짜에 해당하는..
