JavaScript9 [javascript] 문자열을 숫자형으로 바꾸기 input 에 들어가는 모든 값들은 자동으로 type이 string 으로 바뀌어서 value 값에 찍히게 된다 이런경우 숫자형으로 변환해주는 가장 쉬운 두가지 방법이 있다. 1. Number()로 감싸준다 let stringNum = "12" let number = Number(stringNum) console.log(stringNum) // "12" console.log(number) // 12 2. string 숫자 앞에 + 를 넣어준다 let stringNum = "12" let number2 = +stringNum console.log(stringNum) // "12" console.log(number2) // 12 2023. 2. 25. [javascript] 모바일 검색창 숨기기 기능 구현 (터치 떨림 보정) 모바일에서 작동하는 검색창을 구현하려던 도중 터치아웃을 하는 순간 스크롤 감지에 의해 검색바가 깜빡이는 현상에 부딧혔다. 해당 버그를 수정하기 위해서 별의 별 짓을 다햇다.. lodash의 throttle 이나 touchout, touchstart 등등 여러가지 이벤트로 핸들링 하려고 해봤지만 깜빡이는 문제를 잡기 쉽지않았다.(스크롤이 워낙 민감하게 동작하기때문에..) 그러던 도중, 해당 글을 발견했고 jQuery 대신 javascript 로 구현한 로직을 짤 수 있었다. 사실, setInterval을 쓸 생각은 하지도 못했는데 덕분에 좋은 기능 구현을 할 수 있었다. :-) javascript var didScroll; var lastScrollTop = 0; var delta = 5; var navb.. 2023. 1. 30. [javascript | Vue] 이미지 다운로드 기능 만들기 (canvas/url활용) get으로 받은 소스를 화면에 뿌리고> 그 이미지를 다운로드 받으려면 canvas를 활용해 가능하다. 👉 template (표현되어질 부분) 👉 template (다운로드 버튼) 다운받기mdi-arrow-down-bold-circle 👉 methods a 태그를 임의로 생성해 canvas 속성을 대입해 다운로드 기능을 동작하게 해준다 download() { var a = document.createElement("a"); // a.setAttribute("download", "파일이름" + ".png"); a.setAttribute( "href", document .getElementById("canvas") .toDataURL("image/png") .replace("image/png", "image/.. 2022. 12. 2. [javascript] 문자 /n 줄바꿈 변환작업 백에서 전달받는 데이터중에는 문단의 특성을 전달받지 못한 경우가 많다 그래서 replace로 /n 를 변환해준다 //cardData /n이 포함된 문자열을 포함한 배열 cardData.forEach((el, index) => { cardData[index].cont = el.contents.replace(/\n/g, " "); }); vue 환경이라 v-html를 활용했지만 p태그 안에 적용해줘도된다 2022. 12. 2. [javascript] 스크롤 내릴때 사라지고 올라갈때 나오는 검색바 만들기 (앱 호환) window.addEventListener를 사용하면 매우 많은 이벤트 함수를 실행할 수 있다. 보통은 scroll, mouseWheel 이벤트를 사용해 휠스크린을 내릴시 간단하게 화면을 조작할 수 있다. 👉 mouse wheel 이벤트 보기 Element: wheel event - Web APIs | MDN The wheel event fires when the user rotates a wheel button on a pointing device (typically a mouse). developer.mozilla.org mouse wheel 이벤트를 사용할 경우의 문제점이 휠을 사용하지 않는 앱웹에선 작동하지 않는다는점이다. 이런경우 scroll 이벤트를 사용해 처리하는것이 좋다 👉 scroll 이.. 2022. 11. 23. [javascript] while 문에 대해 알아보자 for 문의 특징 배열과 함께 주로 사용 횟수 제한이 있다. 초기값을 주고 이 값에게 주어진 조건을 만족시킬때까지 사용 while문의 특징 반복횟수를 정하지 않아도 된다. 주로 파일을 읽고 쓸때 많이 사용한다. while문은 작동하는 원리는 true / false로 구분해서 작동한다 👉 원래의 for문 for문의 경우 정확한 갯수가 필요하기 때문에 로직생성에 어려움이 있는경우가 종종있다. for(let i=0; i 2022. 11. 19. [Vue] 이미지 data로 넣는 방법 정리 + vuetify 활용예시 (v-img) 이미지를 상태에 따라 이미지와 관련된 작업을 하다보면 [ active | defult | error ] 등 상태값에 따라 다르게 보여줘야 하는 경우가 있다. 최소한의 코드를 작성하고 최대 효율을 내고 싶어하던 와중에 여태까지 경험해본 이미지 리소스에 대한 활용예시를 공유해보려고 한다. (물론 개발자마다 처리하는 방식이 다르기때문에 이 방법은 공유차원에서만 쓰는 글이다) 우선 기본적으로 v-for 문을 통해 아래처럼 배열 형식으로 소스 닉네임을 가져왔다. 보통 value가 아닌 id 값을 사용하긴 하지만 대충 적어봤다. 아래 예시는 참고용으로만 봐주시길 바랍니다. 👉 script data sortItem: [ { value: 1, active: false, }, { value: 2, active: fals.. 2022. 11. 14. [javascript] 이메일 인증 타이머 기능 구현 (+ 애플로그인 구현 썰) 애플로그인은 이메일이 필수가 아니라고요? 요즘 자체 회원가입 및 소셜 회원가입을 거쳐가면서 결국 이메일 인증 기능을 추가하기로 했다. 기존에 구현된 소셜 로그인에는 (카카오,네이버, 구글)은 별도로 이메일을 받기때문에 이런 인증절차를 자체회원가입에만 고민하면 되는 문제였는데 (사실 이 문제도 나중 스탭이였다..)🤨 애플로그인 기능을 구현 하냐! 마냐의 문제에서 결국 이메일 인증을 바로 다음 업데이트때 붙이기로 했다.. 애플로그인은 이메일을 제공할것인지 아닐것인지에 대해서 사용자가 직접 선택할 수 있다. (카카오의 경우 비지니스 계정을 등록하면 필수로 이메일을 받을 수 있다.) 어쨋든 대부분의 서비스는 이메일을 유니크값으로 사용자를 체크하기때문에 애플로그인에 대한 이메일 인증은 필수사항으로 보여졌다. 더 .. 2022. 11. 9. [javascript] 선택 날짜가 기간 사이에 있는지 체크하는 함수 localeCompare # 해당 날짜를 선택했을때, 선택된 날짜 기준으로 live 화면인 리스트 출력 로직구현 👉 reconstruction/filters /** * 시작날짜와 종료날짜를 계산해 오늘날짜가 기간 상에 있는지는 반환해줍니다 * live : 기간안에 오늘날짜가 있는 경우 * finish : 종료된 경우 * ready : 준비중인경우 * @param {*} startDate 시작날짜 * @param {*} endDate 종료날짜 * @param {*} today 오늘날짜 * @returns */ export const CheckRange = (startDate, endDate, today) => { let endValue = today.localeCompare(endDate); let startValue = toda.. 2022. 11. 1. 이전 1 다음 반응형
