티스토리

개발공부 임고미

검색하기

블로그 홈

개발공부 임고미

lily-im.tistory.com/m

임고미 님의 블로그입니다.

구독자: 13

방명록 방문하기

주요 글 목록

[Javascript] 문자열 자르기 (Substring( ) / Substr( ) / split( ) ) 문자열 자르기! substr, substring 먼저 각자의 반환 값을 알아보면, substring( start, end ) : start인덱스부터 end인덱스 전까지 출력 substr( start, end ) : start인덱스부터 end개의 문자 출력 (end가 어울리는 이름은 아니지만... 비교하려고 굳이 end로 적었습니다) 1) substring (0,3) : 0부터 3전까지니까 인덱스 2번인 N까지 출력되는걸 확인할 수 있습니다. 2) substr(0,3) : 0부터 3개 출력할꺼니까, N까지 출력되는걸 확인할 수 있다. 3) 원본 문자열은 바뀌지 않는다. ! end를 적지 않는경우엔? 끝까지로 인식 제가 더 많이 쓰는건 ? substring을 더 많이 쓰는것같습니다, 찾고자하는 문자가 몇글자.. 공감수 1 댓글수 2 2021. 8. 17.
[CSS/JS]아이폰 터치 감도 올리는법? 가끔 안드로이드에서는 터치가 잘 되는데 아이폰에서는 꾸욱 누르거나 2번씩 터치해야 터치가 먹을때가 있다. js를 통해 하는법은 addEventListener에서 click 을 걸어주는게 아니라 touchstart로 걸어주는것이다 그런데 이렇게 되면 아이폰에선 잘 될지 몰라도 안드로이드에선 너무 민감하게 반응하므로 스크롤 와중에 클릭이 되는경우도 발생한다. (- 디바이스 분기를 태워도 되긴하는데,,,, 굳이...?) 개선방법은 간단했다 클릭이 필요한 컨텐츠에 다음 css를 추가해주면 된다. cursor: pointer; 모바일이라 커서가 보일일이 없어 잘 사용안했었는데 아이폰 대응하면서 위대함을 알았다.. 공감수 1 댓글수 1 2021. 7. 13.
[Javascript] safari에서 window.open * 해당 작업은 react라이브러리로 페이지 작업하다 확인한 이슈임니당 결론 : safari에서 window.open 쓸땐 함수에 함수에 함수 타지 말고, 직접적으로 넣어주자 ---------- 상황 : 하이브리드앱 (웹앱) 만드는 중에 앱, 웹, 모바일 웹 을 구분해서 alert 을 띄워야 하는상황이 있었습니다 먼저 구분은 1. 모바일 앱 : 웹단에서 구분할 수 없으므로 안드로이드, IOS에서 작업해서 넘겨줘야합니다 (따라서 확인값만 알면 구분할 수 있습니다.) 2. 이 외 //pc구분 export const isPc = /win16|win32|win64|mac|macintel/i.test( window.navigator.userAgent ); //safari구분 export const isSafari.. 공감수 0 댓글수 0 2021. 7. 13.
[JavaScript] 연산자 operators에대해 알아보자! 1. Increment and decrement operators let counter = 2; const preIncrement = ++counter; // 앞에 연산자가 있는 경우, 더해주고 할당한다! counter = counter + 1; preIncrement = counter; const preIncrement = counter++; // 뒤에 연산자가 있는 경우, 할당해주고 더해준다! preIncrement = counter; counter = counter + 1; ▶ ' -- ' 연산자도 마찬가지의 순서로 한다! 2. Assignment operators let x = 1; let y = 2; x += y; //x = x+y; x -= y; x *= y; x /= y; 3.Comparsi.. 공감수 0 댓글수 0 2020. 12. 22.
[JavaScript] Symbol에대해 알아보자! Symbol은, 고유의 식별자를 처리하기위해 사용합니다. 따라서, 이름 충돌할 만한 위험이 없는 객체에서 유일한 프로퍼티 키를 만들때 사용하기도 합니다. 간혹 식별자를 string으로 처리하기도 하는데, 그럴때 이런 symbol을 사용해주면 동일한 'id'로 만들었지만 동일하지 않다고 판단합니다. const symbol1 = Symbol('id'); const symbol2 = Symbol('id'); symbol1 === symbol2 //false 만약, 동일한 symbol을 만들고 싶다면? 주어진 string에 맞는 symbol을 만들어 달라고 요청하는, Symbol.for('')을 사용해 만들어 사용해주면 됩니다. - 출력 symbol은 그냥 출력하면 안나오고, symbol1.description.. 공감수 0 댓글수 0 2020. 12. 22.
[JavaScript] null과 undefined 개념 1. null null 과 Null 은 다릅니다 ( 대소문자 구별). 의도적으로 값이 없음을 표현할때 사용합니다. 2. undefined 값이 선언됐지만, 할당된 적 없을때 undifined가 출력됩니다. null과 undefined는 falsy한 값으로 치부합니다. null == undefined ( 0 ) // 없다와, 할당 되지 않았다는 둘다 falsy 한 값이긴 하지만 null === undefined ( X ) // 완전 동일하진 않습니다. 따라서, 예를들어, test의 값이 undefined 또는 null값일때 !test 로 표현이 가능합니다. 값이 꼭 있을때만 값을 넣겠다! 라고 표현할땐 test && ~~~ 로 작성 할 수 있다 공감수 0 댓글수 0 2020. 12. 21.
[JavaScript] 호이스팅 호이스팅이란? 어디에 선언을 하든, 가장 위로 데려오는 것을 의미합니다. -> var 키워드 사용하면 안되는 이유 ? 호이스팅 & 블록 스콥을 무시하기 때문입니다. console.log(test) // undifined test = 5; var test; console.log(test) // 'test' 자바스크립트의 미친짓! 1. 선언전에 console.log(test) 찍기! 2. 선언전에 값 할당하기! 다른 언어들이라면, 1번 줄에서 console 찍었을때 에러 났을거에요 값 할당하는건 상상도 못할일!🤦🏻‍♀️ 1번 콘솔결과, 없는걸 물어보내 ? 하면서 에러를 출력해야하지만, JavaScript에서는 undifined를 나타냅니다. test에 값 할당도 잘 됩니다! ( 잘 되면 안되지만 됨) 위의 .. 공감수 0 댓글수 0 2020. 12. 21.
[JavaScript] script 로드하기 (async 와 defer) 1. head에 로드 2.body에 하단에 로드 3. head 안에 async 와 defer 브라우저는 한줄 한줄 읽어 내려가므로, 1. head head에 로드를 하게 되면 script의 크기가 커졌을때 로드가 느려지므로, 사용자는 페이지를 느리게 볼 수 밖에 없음 2. body 하단 본문입니다. 하단에 로드를 하게되면, 페이지는 빨리 읽어질 순 있겠으나, 스크립트를 통해 불러오는 부분같은건 여전히 느리게 보임 3-1. Head 안에 script async 병렬로 다운 - 전제) 스크립트의 크기 : main2 > main1 > main3 - 다운로드 완료 순서 및 실행순서: main2 > main1 > main3 * 병렬적으로 다운받아 다운받는 속도는 줄이겠지만, 해당 스크립트에서 뒤에 로드되는 htm.. 공감수 0 댓글수 0 2020. 12. 21.
[JavaScript] toLocaleString() 활용하기 toLocaleString(); 정의하는 객체 ( = 사용할 곳 ) date / number / array 에서 활용해줍니다! date number array 사용자의 문화권에 맞는 시간표기법으로 년,월,일 시간을 리턴 3자리 숫자마다 콤마 array의 내용을 다 문자로 반환해서 보내줌 재밌는건, date나, 숫자들에도 다 toLocaleString()이 적용되어서 나온다는 점! -> 만약, array내용 toLocalString()적용 안되게해서 문자열로 반환하고 싶다면 toLocaleString() 사용하지 말고, join() 활용 공감수 2 댓글수 0 2020. 12. 21.
[CSS] 언어별 폰트 다르게 적용하기 ( unicode-range ) 시작 전 알아야 할 부분! 예전엔 firefox에선 지원이 안됐지만 지금은 지원합니다. 확인하는 주소 : caniuse.com/?search=unicode-range 적용 방법 1. 폰트를 다운받는다. 2. 적용 하고자 하는 언어 폰트를 다 같은 이름으로 font-family를 맞춰준다. ex ) 저의 예시에는 font-family : foo; 로 맞춰줬습니다. 3. 공통을 하나 맞추고, 유니코드별 원하는 언어를 설정해준다. ex) 아래의 예시에서는, 공통 : AndikaNewBasic-Regular 영어 : NotoSansKR-Black 숫자 : Langar-Regular 많이 쓰이는 유니코드 1. 특수문자 범위: U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007.. 공감수 1 댓글수 0 2020. 12. 20.
[Javascript] parseInt() / Number()를 알아보자 parseInt() / Number()...둘 다 정수로 만들어준다. 그럼 언제 타입을 수정해 주어야 하는걸까? 그냥 값과 값의 종류(Data Type)를 다 비교하는 === 을 사용하지 않고 == 을 사용하면 되는거 아닐까 ? tip! ==는 Equal Operator이고, ===는 Strict Equal Operator ex)( string vs number ) "10" == 10 // true "10" === 10 // false 물론, 받은 값에 숫자를 더하고 빼고 할 일 이없으면,,,,, 그래도 안된다. 저렇게 타입이 다른 두 값을 비교하는 상황은, 의도적으로 피해줘야합니다. 결론 : 서로 다른 두 타입을 비교하는 것은 권장하지 않는다. type 을 바꿔 줘야하는 상황의 대표적인 예를 가지고, .. 공감수 0 댓글수 0 2020. 10. 6.
[html / Javascript] 커서(cursor)부분 작업하기 ( 커서 모양 ) ( 2 ) → 결론 : 비추, css 쓰세요! ( 1 )에서는 css style을 통해 커서모양을 만들어 줬다면, 이번엔 간단하게 html의 a 태그를 이용해서 만들 수 있습니다. 포인트는, a tag의 href를 사용하지 않고 javascript의 window.open( )을 이용해 작업해준다는 것이다. a태그를 사용하는 이유는, css를 먹이지 않고 화살표 모양이 나오게 하기 위해서이다. (사실상 커서모양 바꾸기는 이 태그를 사용하는 것만으로도 끝난것입니다. 이하의 내용은 사용 방법과 이유에대한 내용입니다.) 클릭 코드를 하나하나 살펴보자면, href: 이동할 주소 , onclick: 실행시킬 함수 입니다. Q. a태그를 사용할껀데 왜 window.open을 사용해주는걸까? A. 새창의 사이즈를 조절해주기 위해.. 공감수 0 댓글수 0 2020. 10. 3.
[css] 커서(cursor)부분 작업하기 ( 커서 모양 ) 커서모양 바꾸기 작업을 하다보면 a(anker)태그를 사용하지 않고 커서모양을 화살표에서 손가락 모양으로 바꿔야 할 때가 있다. 이때, css 속성 cursor을 이용해서 간단하게 작업이 가능하다. //기본값(default) : auto; cursor: auto; //손가락 모양 : pointer; ( hand는 ie에서만 지원하는 비표준이므로 pointer으로 작업해줍니다. ) cursor: pointer; 이 외의 다양한 모양은 아래의 태그에서 확인 할 수 있다. developer.mozilla.org/ko/docs/Web/CSS/cursor cursor CSS cursor 속성은 요소 위에 마우스 커서가 올라갔을 때 보여줄 모양을 지정합니다. developer.mozilla.org 같이 보면 좋은 .. 공감수 0 댓글수 1 2020. 10. 2.
[Javascript] includes() / startsWith() / endsWith() includes() startsWith() endsWith() 그 단어 를 포함하고 있니? 로 시작하니? 로 끝나니? 사용가능한 범위 arr, string string string ================================================ includes( ) - Array 메서드는 배열이 특정 요소를 포함하고 있는지 판별합니다. 반환값 : Boolean ( true || false ) arr.includes(valueFind[, formIndex]) valueFind : 탐색할 요소 문자나 문자열을 비교할 때, 대소문자를 구분합니다. formIndex : 이 배열에서 searchElement 검색을 시작할 위치입니다. 음의 값은 array.length + fro.. 공감수 1 댓글수 0 2020. 9. 25.
[Javascript] find() / findIndex() / filter() let products = [ { id: 'apple', }, { id: 'banana', }, { id: 'orange', }, { id: 'avocado', }, { id: 'peach', }, { id: 'kiwi', }, ]; 배열 내 특정 상품 찾기 filter callback 함수에 정의한 조건에 부합하는 배열의 모든 값을 새로운 배열로 리턴합니다. 조건에 부합하는 배열 값이 없을 경우 빈 배열을 리턴합니다. find() 함수와 동일합니다. 리턴값 callback 함수에 정의한 조건에 부합하는 배열의 모든 값을 새로운 배열로 리턴합니다. 조건에 부합하는 배열 값이 없을 경우 빈 배열을 리턴합니다. arr.filter(callback(element[, index[, array]])[, thisA.. 공감수 1 댓글수 0 2020. 9. 24.
[Javascript] sort() : 내림차순 / 오름차순 arr.sort([compareFunction]) 반환 : 정렬한 배열. 원 배열이 정렬되는 것에 유의하세요. 복사본이 만들어지는 것이 아닙니다. compareFunction : 정렬 순서를 정의하는 함수. 생략하면 배열은 각 요소의 문자열 변환에 따라 각 문자의 유니 코드 코드 포인트 값에 따라 정렬됩니다. 1.숫자 정렬 var number = [ 100, 30, 35, 110, 25, 73, 10 ]; var numberString = [ "100", "30", "35", "110", "25", "73", "10"]; function compare ( a , b ) { return a - b; } number.sort ( compare );(O) numberString.sort ( compare );.. 공감수 2 댓글수 0 2020. 9. 24.
[Javascript] 반복문 for / forEach / map 데이터 세팅 - 반복문을 사용하여 id를 출력해보기 let products = [ { id: 'apple', }, { id: 'banana', }, { id: 'orange', }, { id: 'avocado', }, { id: 'peach', }, { id: 'kiwi', }, ]; for 초기값에서 조건부에 부합하면 계속 순회합니다. 특징 : break 문을 사용 할 수 있습니다. - 특정 조건을 만나면 멈추는것 1) 처음부터 배열의 길이만큼출력하기 for( let i=0; i < products.length; i++) { console.log(products[i].id); } : apple ~ kiwi까지 출력됨 2) 'orange'를 발견하면 반복문 멈추기 for( let i=0; i < prod.. 공감수 1 댓글수 0 2020. 9. 24.
[React / Js] 다음 우편번호 ie 버그 / 상세주소 입력 안될때 chrome에서는 문제가 없었으나, ie를 확인하는 과정에서 이름, 전화번호, 이메일 등 다 입력 후 다음 우편번호 api를 통해 우편번호를 받아온 뒤, 상세 주소를 입력하기 위해 input창을 클릭하자 focus가 걸리지 않는 문제가 발생했다. 해결 방법: 우편번호 결과가 들어오는 함수에서 상세주소 input에 inputName.focus(); 걸어주면 해결 (document.getElementById("detail-address") as HTMLInputElement).focus(); - 리액트에서 해당 문제를 맞닿뜨려서 이렇게 해결했는데, js에서도 마찬가지로 focus() 함수를 사용하면 됩니다. + 추가 내가 ie에서 격은 문제 상황을 좀 더 서술하자면 해당 페이지는 결제 페이지였고, 최초 진입.. 공감수 0 댓글수 0 2020. 9. 22.
[Javascript] swiper 크기만큼 이동시켜주기 1. html에 swiper를 만들어줍니다. 2. 원하는 크기를 설정해줍니다. .swiper-container-mainNav .swiper-wrapper { width: auto !important; } .swiper-container-mainNav .swiper-wrapper .swiper-slide { width: 190px !important; } .swiper-container-mainNav .swiper-wrapper .swiper-slide:nth-child(3) { width: 140px !important; } 원래 스와이퍼에서 제공하는 css가 있어서, 내가 정한 크기가 무시될 수 있으므로 !important 를 넣어줍니다. 저는 190px과 140px 두가지 크기를 설정하였습니다. 3... 공감수 2 댓글수 2 2020. 9. 21.
[Javascript] 아이폰 터치 민감도 높이기 아이폰이 javascript에서 'click'에 대한 민감도가 낮아서 클릭이 잘 안되는 경우가 있는데 이럴땐 click을 touchend로 바꿔 사용해주면 된다. var clickTouch = (function () { if ('ontouchend' in document.documentElement === true) return 'touchend'; else return 'click'; })(); 사용 $(document).on(clickEvent, '.btn', function(e) { console.log('건들였다!') }) 그런데 너무 예민하므로, 필요할때 잘 사용할것 공감수 0 댓글수 0 2020. 9. 16.
[Javascript] input 글자수 체크하기 1. type text/ tel 간단하게 설정가능 2. type number //html //js //숫자 maxLength check function maxLengthCheck(object){ if (object.value.length > object.maxLength){ object.value = object.value.slice(0, object.maxLength); } } tel 이나 number으로 type을 설정할경우, mobile에서 input focus되면 숫자키보드만 뜬다. ( text같은경우엔, 자판까지 뜬다. ) 공감수 1 댓글수 0 2020. 9. 16.
[Javascript] selectbox placehorder 만들기 select box placehorder 만들기 1. html 완전 placehorder 처럼 만들기위해선 disabled와 hidden 속성이 필요합니다. 기본값입니다. 바다 산 계곡 빨강 노랑 파랑 여기서, "기본값입니다." 만 placeholder취급해서 기본값으로 바꾸는게 목적 이게 만약 opt그룹이 아니었다면, option:first-child로 간단하게 처리가 가능했을 수도 있다. 그런데 opt 그룹이 되면서 opt 그룹의 첫번째요소도 색이 변하는걸 확인할 수 있다. /* css */ select option:first-child { color: red; } 확인시켜주고자 html 에서 hidden 과 disable을 제거한 상태 완벽한 placehorder을 만들고자, 다음과 같이 진행 2... 공감수 4 댓글수 0 2020. 9. 14.
[Javascript] 전부 동의했는지 체크하기 function agreeAll() { var chkbox = document.getElementsByClassName('agree'); var chk = false; for(var i=0 ; i 공감수 0 댓글수 0 2020. 9. 14.
[JavaScript] 타이머 만들기 html html에 들어갈 위치 만들어주기 Js 시 + 분 + 초 //시 분 초 var countDownDate = new Date('2020-09-18').getTime() + (1000 * 60 * 60 * 15); var x = setInterval(function () { var now = new Date().getTime(); distance = countDownDate - now; if (distance > 0) { var h = Math.floor(distance / (1000 * 60 * 60)); var m = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); var s = Math.floor((distance % (1000 * 60)).. 공감수 0 댓글수 0 2020. 9. 14.
[java script] 공백(빈공간) 제거하기 빈공간 제거는 언제 필요한가요? 1. 웹페이지 검색기능을 구현하는 경우 - 이 경우 입력폼에 두개 이상의 빈공간이 실수로 들어가는 등 다양한 오류를 사전에 방지하기 위한 목적이거나 또는 둘 이상의 공백을 하나로 바꾸어 처리함 2. Url주소나 쿼리스트링, 파라미터 주소에 포함된 빈공간을 변경시 - 현재의 url 주소나 입력받은 주소등을 변경할 경우에 사용하기도 하며 또한 이메일을 입력값에 잘못된 공백이 있는 경우에도 자동으로 제거하기 위함 3. 백쪽에서 해달라고 했을때 - 해달라면 해줘야 한다. 1. 문자열 앞 뒤 공백만 제거하기 trim() 문자열의 앞 뒤 만 제거 할 수 있습니다. ( 중간부분은 제거 불가 , 중간공백은 2번을 참고해주세요.) 공백제거 해주는 trim() 내장함수가 자바스크립트에는 존.. 공감수 0 댓글수 0 2020. 9. 10.
[Java script] 플러그인 사용안하고 정규식 체크(Validate) Jquery 에서는 $.test() 메서드로, PHP 에서는 preg_match() 함수로 사용 전화번호 체크 정규식 function isMobile(phoneNum) { phoneNum; phoneNum = phoneNum.split('-').join(''); //하이픈 없는버전 var regExp =/(01[016789])([1-9]{1}[0-9]{2,3})([0-9]{4})$/; //중간에 하이픈 넣는 버전 var regExp = /^01([0|1|6|7|8|9]?)-?([0-9]{3,4})-?([0-9]{4})$/ var myArray; if(regExp.test(phoneNum)){ myArray = regExp.exec(phoneNum); //핸드폰번호 형식에 해당하는 경우 return tru.. 공감수 1 댓글수 0 2020. 9. 10.
[Java script] 객체 빈값 확인하기 다음처럼 확인해주면 됩니다~ //확인하고자 하는객체 let emptyObj = {}; //빈값인지 확인하는 함수 function isEmptyObject(obj) { return Object.keys(obj).length === 0; } //확인해보기 isEmptyObject(emptyObj) 공감수 0 댓글수 0 2020. 9. 10.
[Javascript] Daum 우편번호 서비스 사용하기 통합 로딩방식을 이용한 서비스 사용방법 1. html하단에 아래와 같은 script를 로드합니다. //html 2. 어떻게 보여줄 것인지 선택하기 - iframe방식과 팝을을 이용하는 방법 팝업이 더 편리하기는 하나, 아래와 같은 경고문을 발견하였다. 몇몇 Webview기반 브라우저의 window.open 미대응으로 인하여, Webview기반 서비스에 적용시 embed()를 이용한 레이어모드를 추천합니다. 그러므로, iframe을 이용하여 레이어를 띄우기로 결정 3. 예제코드 확인하고 가져오기 postcode.map.daum.net/guide#sample Daum 우편번호 서비스 우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 .. 공감수 0 댓글수 0 2020. 9. 8.
[Javascript] flatpickr를 이용해 간단한 달력만들기 간단한 달력 기능이 필요했고, 여러가지 플러그인을 살펴본 결과 flatpickr로 가장 쉽고 간편하게 만들 수 있었다. 테스트결과 chrome/ ie /safari 까지 모두 잘 작동하는것을 확인하였다. 세팅 1. html 예약일 2. js var dateSelector = document.querySelector('.dateSelector'); dateSelector.flatpickr(); ============================================================================ 활용1. 달력 1. 특정 날짜 금지하기 ( disable ) var dateSelector = document.querySelector('.dateSelector'); dateSe.. 공감수 5 댓글수 0 2020. 9. 8.
[Javascript] 웹브라우저 뒤로가기버튼 제어하기 뒤로가기 제어하기 방법 1. window.onpopstate = function(event) { // "event" object seems to contain value only when the back button is clicked // and if the pop state event fires due to clicks on a button // or a link it comes up as "undefined" if(event){ // Code to handle back button or prevent from navigation } else{ // Continue user action through link or button } } 방법 2. 페이지 리로드하지 않고 url만 변경하기 history... 공감수 8 댓글수 0 2020. 9. 4.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.