티스토리

devlog_zz

검색하기

블로그 홈

devlog_zz

yjae-sw.tistory.com/m

YJ_SW 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

[ Javascript ] ‘??’ 와 ‘||’ 의 차이 [ ‘??’ 와 ‘||’ 의 차이 ] ?? : nullish 병합 연산자 a ?? b // a가 null도 아니고 undefined도 아니면 a // 그 외의 경우는 b ?? 와 || 의 차이 ?? 는 OR 연산자인 || 과 유사해보인다. || : 첫 번째 truthy 값을 반환 ?? : 첫 번째 정의된 ( defined ) 값을 반환한다. Truthy / Falsy 한 값 Falsy 한 값 undefined null 0 ‘’ NaN Truthy 한 값 Falsy 한 값 외의 나머지 let height = 0; console.log(height || 100); // 100 console.log(height ?? 100); // 0 height 가 0으로 정의되어 있다. || 는 0은 Falsy 한 값이므.. 공감수 0 댓글수 0 2024. 1. 28.
[Javascript] 문자열에서 특정 문자 개수 구하기 방법 1 split() 활용하기 let str = 'aaabbbcccddd' str.split('a').length -1 // 3 방법 2 match 정규식 활용하기 일치하는 값이 없을 때 `undefined` 가 나온다는 점 주의하기 일부 특수문자를 정규표현식에서 찾으려면 아래와 같이 \ 를 앞에 써줘야 한다는 점 주의하기 let str = 'aaabbbcccddd' str.match(/d/g)?.length //3 let str = 'aa.ab.bbnc,ccd,,d,,,dddddd' str.match(/\,/g)?.length // 6 공감수 1 댓글수 0 2023. 12. 2.
Javascript Array 함수 정리 length 배열의 길이 구하는 함수 const arr = [1,2,3,4] arr.length // 4 concat() 두 개 이상의 배열을 병합하는 데 사용 기존 배열을 변경하지 않고, 새 배열을 반환합니다. const arr1 = [1,2,3,4] const arr2 = [5,6,7,8] arr1.concat(arr2) // [1,2,3,4,5,6,7,8] 💡 또 다른 배열 병합 방법 spread operator spread operator : 개별 요소로 분리 const arr1 = [1,2,3,4] const arr2 = [5,6,7,8] [...arr1, ...arr2] // [1,2,3,4,5,6,7,8] // spread 하지 않는다면 [arr1,arr2] // [[1,2,3,4],[5,6.. 공감수 0 댓글수 0 2023. 11. 26.
javascript 문자열 대문자 변환, 소문자 변환 toUpperCase() 문자열 전체를 대문자로 변환 toLowerCase() 문자열 전체를 소문자로 변환 let word = 'Hello World! 12345' word.toLowerCase() // 'hello world! 12345' word.toUpperCase() // 'HELLO WORLD! 12345' 대문자, 소문자 판별 // 대문자인지 판별하는 함수 const isUpper = (str) => { return str === str.toUpperCase() } // 소문자인지 판별하는 함수 const isLower = (str) => { return str === str.toLowerCase() } isUpper('ABCDE') // true isUpper('A') // true isUp.. 공감수 0 댓글수 0 2023. 11. 2.
string에서 특정 위치의 문자 찾기 - 배열, charAt() charAt() 문자열에서 지정된 인덱스에 존재하는 문자를 찾아서 반환하는 함수 ◦ index 범위 밖의 숫자가 입력되면 빈 문자열('')이 리턴 index 형식 배열의 index 형식으로 가져오기 • 문자열의 index를 벗어나는 값이 index값으로 지정되면 'undefined'가 리턴 let text = 'abcde' text[0] // 'a' text.charAt(0) // 'a' let emptyText = '' emptyText[0] // undefined emptyText.charAt(0) // '' undefined가 나오면 안되는 경우 charAt() 함수를 사용하는 것이 좋다. 공감수 0 댓글수 0 2023. 11. 2.
[ Javascript ] null 병합 연산자 '??' 와 논리연산자 '||' 의 차이점 null 병합 연산자 '??' (Nullish coalescing operator) 널 병합 연산자는 만약 왼쪽 표현식이 null 또는 undefined 인 경우, 오른쪽 표현식의 결과를 반환한다. let name; ... // name assign된적 없고, undefined의 값 let text = name ?? 'Hello!'; // 결과 console.log(text) // Hello! 논리연산자 ' || ' null 또는 undefined 뿐만 아니라 falsy 값 ( 0 , '' , NaN )에 해당할 경우 오른쪽 피연산자를 반환 null병합연산자 '??'와의 차이점은 falsy 값도 유효하지 않은 값으로 처리하여 오른쪽 피연산자를 반환한다는 것이다. let num; let text; ... .. 공감수 0 댓글수 0 2023. 3. 2.
[ Javascript ] Map 자료형 Map 맵은 키가 있는 데이터를 저장한다는 점에서 객체와 유사하다. 맵은 키에 다양한 자료형을 허용한다는 점에서 차이가 있다. 맵의 주요 메서드와 프로퍼티 맵 생성 new Map() key를 이용해 value를 저장 map.set(key, value) key에 해당하는 값을 반환, key가 존재하지 않으면 undefined를 반환 map.get(key) key가 존재하면 true, 존재하지 않으면 false를 반환 map.has(key) key에 해당하는 값을 삭제 map.delete(key) 맵 안의 모든 요소를 제거 map.clear() 요소의 개수를 반환 map.size 예시 var sayings = new Map(); sayings.set("dog", "woof"); sayings.set("cat.. 공감수 0 댓글수 0 2023. 2. 16.
[ Javascript ] 소수인지 판별하기, Math.sqrt(n) 제곱근 활용 소수 판별하기 1) 1이나 0은 소수가 아니므로 제외 2) num을 2부터 num의 제곱근까지 나눈 나머지가 0이면 소수 아님 √n이 될 때 까지만 반복해보면 이 수가 소수인지 알 수 있으므로 반복횟수를 줄일 수 있다. const isPrime = (num) =>{ if(num === 1 || num === 0) return false // 1이나 0 이면 소수가 아님 for ( let i = 2 ; i 공감수 0 댓글수 0 2023. 2. 11.
n진수로 변환하기 toString() , parseInt() 10진수를 n진수로 변환하기 toString() 숫자 및 BingInts 의 toString()은 선택적으로 기수(radix)를 매개변수로 취하여 10진수를 다른 진수로 변환할 수 있다. 기수 값은 최소 2부터 36까지이다. let num = 10 num.toString(2) // 10진수 -> 2진수로 변환 // 1010 num.toString(3) // 10진수 -> 3진수로 변환 // 101 n진수를 10진수로 변환하기 parseInt() 문자열을 특정 진수의 정수로 변환한다. 인수로는 parseInt('변환시키고자하는 문자열', 해당 수의 진수) 가 들어간다. parseInt('101',3) // 3진수 '101'을 10진수로 변환 // 10 parseInt('1010',2) // 2진수 '101.. 공감수 0 댓글수 0 2023. 2. 11.
배열의 각 항목별 개수 세기 배열의 항목별 개수 세기 ['a', 'b', 'c', 'b', 'd', 'a', 'c', 'c'] 이와 같은 배열이 있을 때 각 항목별 개수를 세어 아래와 같은 결과를 얻고자 한다. [ { 'a': 2 }, { 'b': 2 }, { 'c': 3 }, { 'd': 1 } ] 방법 const arr = ['a', 'b', 'c', 'b', 'd', 'a', 'c', 'c'] let result = {} arr.forEach((x) => { result[x] = (result[x] || 0) + 1; }); // result {a: 2, b: 2, c: 3, d: 1} let resultArr = [] resultArr = Object.keys(result).map((key)=>{return {[key]:re.. 공감수 0 댓글수 0 2023. 1. 13.
javascript sort() 와 sort((a, b) => a - b) 차이 javascript의 정렬함수 sort()와 sort((a,b)=>a-b)의 차이가 존재한다. sort() const arr = [10, 100, 90] arr.sort() // [10, 100, 90] 자바스크립트의 sort함수는 기본적으로 배열을 문자열 타입으로 간주하고 비교한다. '100'과 '90'을 비교할 때 앞자리인 1과 9 중에 1이 작기때문에 100이 90보다 작다고 정렬을 한다. sort((a, b) => a - b) arr.sort((a,b)=>a-b) // [10, 90, 100] 숫자 비교 정렬을 하려면 sort() 인자로 함수를 넣어 해결하면 된다. a-b값이 양수가 나오면 배열에서 자리를 교체하고 음수가 나오면 교체하지 않는다. 공감수 0 댓글수 0 2022. 11. 28.
?? 와 || 의 차이점 - falsy, truthy 개념 || 피연산자 둘 중 하나 이상이 참이면 참을 반환 ( or의 개념 ) 피연산자들이 boolean값이 아니라면 첫 번째 truthy 값 반환 ?? value1 ?? value2 value1이 존재하는 변수(null이 아니고 undefined가 아닌)라면 그 값을 반환, 그렇지 않으면 value2 null 이나 undefined가 아닌 첫 번째 피연산자 찾기 (value1 !== null && value1 !== undefined) ? value1 : value2; 두 연산자의 차이점 || 는 첫 번째 truthy 값을 반환 ?? 는 첫 번째 정의된 값을 반환 javascript에서 truthy, falsy 의 개념 falsy undefined null 0 '' NaN false truthy 위의 5가지 .. 공감수 0 댓글수 0 2022. 11. 1.
+10%, -10% 금액에서 1000원 이하 올림 +10%, -10% 금액에서 1000원 이하 올림 money가 98000원일 때 -10% : 98000-9800 = 88,200원 , 88,200원 1000원 이하 올림이므로 89,000원 +10% : 98000+9800 = 107,800원 , 107,800원 1000원 이하 올림이므로 108,000원 setMinMoney(Math.ceil(money*0.9/1000)*1000) // 88200/1000 -> 88.2 올림 -> 89에 *1000 -> 89000 setMaxMoney(Math.ceil(money*1.1/1000)*1000) // 107800/1000 -> 107.8 올림 -> 108 *10000 -> 108000 공감수 0 댓글수 0 2022. 7. 31.
1000원 이하 입력 방지하기 if( parseInt(money.replaceAll(",",""))%1000 > 0 ) { // 1000미만 입력 ex) 1,500 1,555 2,550 } 공감수 0 댓글수 0 2022. 7. 31.
금액 입력 시 자동 콤마 ( 천단위 ) 입력 - toLocaleString() toLocaleString() 사용하여 금액 입력 시 자동 콤마 ( 천단위 ) 입력하기 사용시 주의사항 1. type은 "text"여야 함 2. toLocaleString()은 number타입에 적용가능 3. number로 변환하기 전에 , 를 제거하고 변환해야 함 오류 나는 코드 const [money, setMoney] = useState(''); setMoney(parseInt(e.target.value).toLocaleString())}/> onChange에 바로 string을 number타입으로 변환하고 toLocaleString()을 적용해주었다. 이 경우에 1000이 넘어가게 입력을 하면 1,000으로 변환되기 때문에 paseInt('1,000') 값은 1 이되고 1을 toLocaleStri.. 공감수 0 댓글수 0 2022. 7. 31.
timestamp yyyy-mm-dd export const timeStamToStr = (timestamp:number|undefined) => { if(timestamp){ try{ let date = new Date(timestamp) return date.getFullYear()+'-'+fillZeroDay(date.getMonth()+1)+'-'+fillZeroDay(date.getDate()) }catch(e){return ''} } } export const fillZeroDay = (day: number):String => { return day 공감수 0 댓글수 0 2022. 5. 23.
timestamp 0시 0분 0초 구하기 오늘 날짜의 0시 0분 0초 timestamp 구하기 let today = new Date() let timestamp = new Date(today.getFullYear(),today.getMonth(),today.getDate())/1000 공감수 0 댓글수 0 2022. 5. 23.
Javascript 객체지향 프로그래밍 1.객체지향 이전의 이야기 1-1.순차적 프로그래밍 함수라는 개념이 없던 시절에는 특정 위치로 실행 순서를 강제로 변경하는 goto문 강제로 실행 순서를 바꾸다 보니 코드가 커져가면서 이 코드의 흐름을 제어하기가 힘들어진다. 1-2.절차적 프로그래밍 데이터와 데이터를 처리하는 동작을 함수 단위로 코드를 분리하고 재사용하는 형태 로 프로그래밍하는 방식 일정하게 반복되는 코드를 호출하고 나서 다시 원래 자리로 돌아오는 방식의 프로시저(함수)를 통해 개발 기본적으로 절차적 프로그래밍은 전역 변수의 형태로 만들어 사용, 코드의 덩치가 커지게 되면서 변수명 관리가 복잡해진다. => 하나의 파일단위 혹은 모듈단위로 prefix를 부여해서 관리하는 namespace(네임 스페이스)라는 방식이 등장한다. 1-3. 구조.. 공감수 0 댓글수 0 2022. 5. 11.
string 문자열 자르기 - substring, substr, slice substring substring(시작인덱스,마지막인덱스(포함하지 않음, 옵션값)) 0보다 작은 인자 값을 가지는 경우에는 0으로, stringName.length 보다 큰 인자 값을 가지는 경우, stringName.length 로 처리 만약 indexStart 가 indexEnd와 같을 경우, substring() 빈 문자열을 반환합니다. 만약 indexStart 가 indexEnd보다 큰 경우, substring() 메서드는 마치 두 개의 인자를 바꾼 듯 작동하게 됩니다. 아래 예제를 보세요. let str = 'string'; str.substring(4,6); // 4부터 5까지 값 // ng str.substring(3); // 3부터 마지막까지 값 // ing str.subs.. 공감수 0 댓글수 0 2022. 1. 24.
textarea 최대 입력 글자 수 제한 - maxLength, onKeyDown, byte maxLength maxLength로 textarea에 입력할 수 있는 최대 문자수 명시 onKeyDown 함수 제어 onKeyDown을 이용해 입력되는 값의 길이가 maxLength를 넘을 때 string 자르기 string자르기 3가지 방법 - substring,substr,slice const lengthCheck =(maxLength:number) => { if(info.length>maxLength) { setInfo(info.substr(0,maxLength)) } } ... lengthCheck(28)} value={info?info:''} onChange={e=>setInfo(e.target.value)} > onKeyDown 함수 제어 - Byte 계산 입력문자 byte 한글 한글자 2b.. 공감수 0 댓글수 0 2022. 1. 24.
async, await API 응답 받은 후 순서대로 처리방법 async, await API 응답 받은 후 순서대로 처리방법 상황 A,B,C 함수 내에서 API 호출을 함 A API 호출 A 응답 받고 B API 호출 B 응답 받고 C API 호출 C 응답 받기 원하는 대로 코드를 구현하기 위해 const sequentialSetting = async (aData,bData) => { await A(aData,bData) await B(aData,bData) C(aData,bData) } const A = async(aData,bData) => { let res = await restApi.aAPI(aData,bData).catch(err => console.log(err)) // 별개로 처리해야할 로직 let result = bData.map((data))=>{ .. 공감수 0 댓글수 0 2021. 3. 22.
동기 (synchronization) 비동기(asynchronization) 개념 동기 비동기 동기 (synchronization) A가 B에게 데이터를 요구했을 때, 이 요청에 대한 응답을 주어야만 A가 다시 작업 처리가 가능하다. 요청을 하면 시간이 얼마나 걸리던지 요청한 자리에서 결과가 주어져야 함 sync란 동시에 일어난다는 뜻 => 요청에 따른 응답이 동시에 일어난다. 비동기 (asynchronization) async 는 동시에 일어나지 않음, A요청에 따른 응답을 B가 즉시 전해주지 않아도 그 대기시간동안 A는 또 다른 작업을 처리할 수 있다. 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 실행 요청을 100개 보냈을 때 실행하고 기다리고 하면 너무 오래 걸림 A B // 비동기함수, 3초 후 응답 C => 결과 A C B B의 응답이 오기 전에 .. 공감수 0 댓글수 0 2021. 3. 10.
javascript map, forEach ( break, async await ) map map object 내의 key / value 쌍의 개수만큼 주어진 함수를 순서대로 실행함 함수의 결과를 모아 새로운 배열을 반환 return 필수 let arr = ['a','b','c','d'] arr.map((currentValue,index,array) => { return currentValue + index; }) 결과 ["a0", "b1", "c2", "d3"] forEach 배열 요소마다 한 번씩 함수를 실행함 let arr = [1,2,3,4] arr.forEach((num, index) => { return arr[index] = num * 2; }) 결과 [2,4,6,8] map, forEach break 걸 수 있을까? 배열을 순회하므로 중간에 break문을 사용할 수 없다... 공감수 2 댓글수 0 2021. 3. 9.
allow함수 ES6의 allow 함수와 function은 형태의 차이뿐 아니라 this의 scope차이가 있음 - 주의 const a { bbb:1, ccc:2, test1 = () =>{ console.log(this.bbb) // 안뜸 } test2 : function () { console.log(this.bbb) // 1 } } 공감수 0 댓글수 0 2020. 12. 17.
바벨(Babel) & 웹팩(Webpack) 바벨(Babel) 바벨은 코드를 재작성해주는 트랜스파일러 프로그램 바벨은 최신 자바스크립트 문법을 구형 브라우저에서 돌 수 있도록 코드 자체를 변환 웹팩(Webpack) 모던 프로젝트 빌드 시스템은 코드가 수정될 때마다 자동으로 트랜스파일러를 동작시킴 의존성을 분석해 모듈을 번들(여러 개를 하나로 묶어주는)시켜주는 역할을 한다. 수 많은 라이브러리들을 빌드(build)를 통해 하나의 파일로 만들어 준다. 공감수 0 댓글수 0 2020. 12. 7.
역따옴포 역 따옴표로 변수나 표현식을 감싼 후 ${…}안에 넣어주면, 아래와 같이 원하는 변수나 표현식을 문자열 중간에 손쉽게 넣을 수 있습니다. ` 안녕하세요 제 이름은 ${name} 입니다. 저는 ${age}살 입니다.` 공감수 0 댓글수 0 2020. 11. 25.
javascript 변수 상수 - let, var, const 변수 선언 방법 let – 변수 선언 키워드 : 일반적으로 사용 var – 오래된 변수 선언 키워드 : 잘 사용안함 const – 상수선언 값을 변경할 수 없음 공감수 0 댓글수 0 2020. 11. 25.

문의안내

티스토리
로그인
고객센터

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