티스토리 꾸미기 tistory - 이전글 다음글 플로팅 추천 글 기능 만들기 #3 들어가면서.. "이전글 다음글 플로팅 추천 글 기능 만들기 #2"까지 했다면 이제 이전글 다음글이 제대로 버튼에 나타나도록 보완한다. 그리고 #2에서 말했듯이 현재 시간 (분)에 따라 홀수면 초록 짝수면 분홍색으로 뜨도록 수정한다. ↓↓↓ 이전글 다음글 플로팅 #2 티스토리 꾸미기tistory - 이전글 다음글 플로팅 추천글 기능 만들기#2 티스토리 꾸미기 tistory - 이전글 다음글 플로팅 추천 글 기능 만들기 #2 들어가면서.. "이전글 다음글 플로팅 추천 글 기능 만들기 #1"에서 줄리박님 디자인으로 변경하고, 플로팅 뜨는것 까지 확 yourusername.tistory.com 이전글, 다음글 링크 기능 보완작업 ..
Spring 한글깨짐 Encoding UTF-8 fetch, ajax 해결방법 현상 fetch로 Spring 컨트롤러를 호출해서 Json 데이터를 받는데, 한글이 깨지는 현상이 발생했다. fetch('/yourusernames/api', { method: 'POST', headers: { 'Content-Type': 'application/json;charset=utf-8' }, body: JSON.stringify(this.formData) }) .then(function (response) { return response.json(); }) .then(function (data) { console.log(data); }) .catch(function (err) { console.log(err); })..
fetch 로 Json 데이터를 promise Reject 해서 catch 오류를 받을 경우 Json으로 받는방법 상황 fetch로 Json데이터를 가져오는 api를 호출하는데.. http staus가 정상이 아니면 catch 로 가도록 Promise.reject 시킨다. 근데 reject하는 json 객체 안에 error코드가 있는데.. 넘긴 json객체는 안넘어오고 Promise 객체가 넘어왔다. reject 시 json객체로 넘기는 방법을 찾아봤다. fetch('/api/', { method: 'POST', headers: { 'Content-Type': 'application/json;charset=utf-8' }, body: JSON.stringify(this.formData) }) .then(..
Alpine.js 기초 이벤트(event) #3 상황 Alpine.js 기초, 셋팅 #2 에 이어 이제 이벤트들을 달아보려고 한다. 개발 - 이벤트 벨리데이션 체크 함수들은 기초 유효성 체크 #2번에서 첨부한 validation.js 라이브러리를 사용한다. https://yourusername.tistory.com/143 Alpine.js 기초 유효성 (validation) 체크 #2 Alpine.js 기초 유효성 (validation) 체크 #2 상황 Alpine.js 기초, 셋팅 #1 에 이어 이제 유효성 체크를 해보려한다. 개발 - 유효성 체크 오류나 장애로 인한 처리는 일단 표시만 해놓고 backend 처리할때 추 yourusername.tistory.com 오류나 장애로 인한 처리는 일단 표시만..
Alpine.js 기초 유효성 (validation) 체크 #2 상황 Alpine.js 기초, 셋팅 #1 에 이어 이제 유효성 체크를 해보려한다. 개발 - 유효성 체크 오류나 장애로 인한 처리는 일단 표시만 해놓고 backend 처리할때 추가작업을 해준다. 1. defaultChkTime (기본 인증번호 유효시간)을 alpine.data에 추가 한다. (기본값 60초) 2. displayChkTime (표시해줄 인증번호 유효시간)도 alpine.data 에 추가한다, 기본값 0 3. 인증번호 입력창은 처음은 disable 상태로 시작한다. 4. 이름은 require, 핸드폰번호는 require + 휴대폰양식(숫자만) validation 체크를 한다. 5. 이름 핸드폰번호 둘중 하나라도 입력이 안되있거나,..
티스토리 꾸미기 tistory - 이전글 다음글 플로팅 추천 글 기능 만들기 #2 들어가면서.. "이전글 다음글 플로팅 추천 글 기능 만들기 #1"에서 줄리박님 디자인으로 변경하고, 플로팅 뜨는것 까지 확인했다. 이제 상미넴님 스크립트를 참고해서 이전글보기, 다음글보기, 닫기를 화면에 추가하고 기능을 달아보자 ↓↓↓ 이전글 다음글 플로팅 추천 글 기능 만들기 #1 티스토리 꾸미기 tistory - 이전글, 다음글 플로팅 추천 글 기능 만들기 #1 티스토리 꾸미기 tistory - 이전글 다음글 플로팅 추천 글 기능 만들기 #1 들어가면서.. 먼저 상미넴님 티스토리에서 가져온 코드와 구글링하면서 코드팬에 귀염귀염한 박줄리님이 만드신(?) 디자 yourusername.tistory.com html 화면 수정..
티스토리 꾸미기 tistory - 이전글 다음글 플로팅 추천 글 기능 만들기 #1 들어가면서.. 먼저 상미넴님 티스토리에서 가져온 코드와 구글링하면서 코드팬에 귀염귀염한 박줄리님이 만드신(?) 디자인이 있어서 한번 믹스해 보았다. 코드는 상미넴님 티스토리 https://sangminem.tistory.com/574 티스토리 플로팅 추천 글 기능 만들기 블로그 방문자들이 다른 글을 보도록 유도하기 위해 이전 글, 다음 글을 추천하는 기능을 만들어 보겠습니다. 디자인은 제 전문 분야가 아니라 기대하시면 안 되구요 ㅎㅎ 먼저 이 기능을 사용 sangminem.tistory.com 디자인은 코드팬 juliepark님 (줄리박?님... 우리나라사람인가..) https://codepen.io/juliepark/pe..
Alpine.js 기초, 셋팅 #1 상황 간단한 화면 한 두개가 필요한데 앵귤러나, 리엑트, vue등을 사용하기엔 닭잡는데 소잡는 칼을 쓰는것같고.. (사실 앵귤러나 리엑트는 잘 모름), jquery처럼 간단하게 셋팅(cdn)하여 사용할 수 있는게 없을까 해서 찾은게 바로 Alpine.js 다. Vue와 거의 유사(v- 가 아닌 x- 로 사용) 하다. Alpine 사이트 참고. https://alpinejs.dev/ Alpine.js Alpine is a rugged, minimal tool for composing behavior directly in your markup. Think of it like jQuery for the modern web. Plop in a script tag and get..
