JS

[JS] Redux 리덕스

Redux 란리덕스는 JS 상태 관리 라이브러리입니다. 쉽게 설명하면 모든 컴포넌트에서 바로 state에 접속 가능한 저장소 입니다.(도서관에서는 다양한 사람들이 책을 빌려갈 수 있습니다) 상태?component 안에서 관리되는 것 사용하는 이유자식 컴포넌트가 많아지면, 상태를 관리하는 상위 컴포넌트에서 계속 내려 받아야한다. => Props drilling 이슈리덕스를 사용하면 state를 컴포넌트에 종속시키지 않고, 상태 관리를 컴포넌트의 바깥에서 관리 할 수 있게 된다. 기본 용어- Store (스토어)상태가 저장되는 저장소 - Reducer (리듀서)특정 action에 따라서 state값을 변경하는 함수이벤트 핸들러와 비슷파라미터는 state, action 두개를 받음 - Action (액션) -..

[JS] 정규 표현식

정규표현식문자열에서 특정 문자 조합을 찾기 위한 패턴 정규식 만드는 법1. 정규 표현식 리터럴 : 슬래시(/)패턴으로 감싸는 방식const regex = /pattern/flags;스크립트를 불러올 때 컴파일 되므로, 실행 도중에 바뀌지 않는 패턴일 때 사용하는 것이 좋음.일반적인 방법이며, 리터럴을 사용하면 정규 표현식 객체가ㅏ 생성된다. 2. RegExp 객체의 생성자 호출 : RegExp 객체의 생성자를 호출하여 만드는 방식const regex = new RegExp('pattern',flags);런타임에 컴파일 되기 때문에 실행 도중에 바뀔 수 있는 패턴이나, 사용자 입력에 따라서 유동적으로 바뀔 수 있을 때 활용하는 것이 좋음.플래그검색 모드정규 표현식의 옵션이므로 선택적으로 사용이 가능하다.순..

[Javascript] for, foreach

알고리즘 문제를 풀던 중 다른 분 코드에서 foreach의 사용을 보게 되었다. foreach의 존재는 알지만 for문이 익숙하다보니 foreach는 사용하지 않게 되었는데 이번 기회에 차이를 다시 한번 정리하며 어떤 문법을 사용하는것이 편한지 공부 하고자 한다. for문 const wires = [[1,2],[2,3],[3,4]] for (let i = 0; i < wires.length; i++) { let wire = wires[i]; let node1 = wire[0]; let node2 = wire[1]; tree[node1].push(node2); tree[node2].push(node1); } for (let i = 0; i < wires.length; i++) { let wire = wir..

[js] toFixed() 메서드

toFixed() 메서드 숫자를 고정 소수점 표기법(fixed-point-notation)으로 표시 Number 인스턴스의 소수 부분 자릿수를 전달받은 값으로 고정한 후, 그 값을 문자열로 반환 function financial(x) { return Number.parseFloat(x).toFixed(2); } console.log(financial(123.456)); // Expected output: "123.46" console.log(financial(0.004)); // Expected output: "0.00" console.log(financial('1.23e+5')); // Expected output: "123000.00" 구문 numObj.toFixed([소수 부분의 자릿수]) 매개변수..

[JS] 배열의 순서 (sort()메서드, reverse() 메서드)

sort() 메서드 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환 const months = ['March', 'Jan', 'Feb', 'Dec']; months.sort(); console.log(months); // ["Dec", "Feb", "Jan", "March"] const array1 = [1, 30, 4, 21, 100000]; array1.sort(); console.log(array1); // [1, 100000, 21, 30, 4] 구문 arr.sort([compareFunction]) 파라미터(compareFunction) 정렬 순서를 정의하는 함수 이 값이 생략되면, 배열의 element들은 문자열로 취급되어, 유니코드 값 순서대로 정렬 compareFunction(a, ..

[JS]BigInt

BigInt Number 원시 값이 안정적으로 나타낼 수 있는 최대치인 2^53 - 1보다 큰 정수를 표현할 수 있는 내장 객체 const alsoHuge = BigInt(9007199254740991); // ↪ 9007199254740991n const hugeString = BigInt("9007199254740991"); // ↪ 9007199254740991n const hugeHex = BigInt("0x1fffffffffffff"); // ↪ 9007199254740991n const hugeBin = BigInt("0b11111111111111111111111111111111111111111111111111111"); // ↪ 9007199254740991n BigInt Number 내장 ..

[JS] == , === 차이점

Q. 알고리즘 문제를 푸는데 본인은 항상 "===" 을 사용했는데 한 문제에서 다른 사람들의 코드를 보니 "==" 을 사용된 것을 보고 두 문자의 차이가 궁금해짐 == 연산자 == 연산자는 두 피연산자의 값의 타입이 다를 경우 자동으로 일부 피연산자의 타입을 변환 후 값을 비교 타입을 비교하지 않으므로 ===연산자에 비해 느슨함 123 == 123 // true 123 == '123' // true, 문자열을 숫자로 변환 후 값을 비교 true == 1 // true, 두 피연산자에서 불리언 값이 존재하면, 불리언 값을 1로 변환 후 값을 비교 true == '1' // true, 불리언 값을 1로 변환 후 문자열 '1'을 숫자로 변환 후 값 비교 true == 'true' // false, 불리언 값을..

[JS] 배열 특정 값 포함 여부(includes, indexOf, some, every)

1. includes() includes() 메서드는 특정 문자열이 어떤 문자열에 포함되어 있는지 판별 결과를 true 또는 false로 반환 구문 str.includes(searchString) str.includes(searchString, position) 매개변수 searchString 찾으려는 문자열 position (선택사항) 문자열에서 찾기 시작하는 위치를 나타내는 index 값 기본값은 0이며, 문자열 전체에서 찾게 된다. 반환값 searchString이 있으면 true, 없으면 false이다. let ice = ['예은', '지수', '희수', '서아', '수진', '예지']; let friend = ['수민', '인정', '민송']; ice.includes('예은') // true fr..

[JS] 배열에서 특정 값의 개수 구하기

배열(Array) 1. for문 ▶ 가장 기본적으로 배열의 모든 요소를 순회하며 특정 값이 있을 경우 count를 증가시킴 const arr = ['A', 'B', 'B', 'C', 'D' ]; let count = 0; for(let i = 0; i { if ..

[JS] Templete Literal : 백틱(``), 달러(${})

Template Literal (템플릿 리터럴) ES6부터 새로 도입된 문자열 표기법 내장된 표현식을 허용하는 문자열 리터럴 문자열 생성 시 따옴표 대신, 백틱(``)을 사용 var str = `Hello World!`; console.log(str); [출력결과] Hello World! 템플릿 리터럴을 사용하는 이유 1. 줄바꿈(개행) 백틱(`)으로 템플릿 리터럴을 사용하면, 개행문자(' \n ') 없이도 줄바꿈 가능 var str = ` hello! world! JavaScript! very good`; console.log(str); [출력결과] hello! world! JavaScript! very good 2. 표현식 삽입 ES6 이전의 따옴표 방식에서는, + 연산자를 이용 백틱(` `)안에 달..

[JS] Javascript 이론 (1)

변수 선언 var var i; // 선언, "undefined"가 저장됨 var sum = 0; // 선언과 초기화 var i, sum; // 한 번에 여러 개의 변수를 함께 선언할 수 있음 var i=0, sum=10, message=”Hello”; // 선언과 초기화를 동시에 해줄 수 있음 name = "javascript"; // 선언되지 않은 변수는 전역 변수가 됨 var문에서 변수에 초기 값을 지정하지 않는다면, 변수는 값이 설정될 때까지 undefined 값을 갖게 된다. hosting 자바스크립트 코드는 함수 안에 있는 모든 변수를 함수 맨 꼭대기로 끌어올린 것처럼 동작한다. var scope = “global”; function f() { console.log(scope); //"undef..

[JS] join() 메서드

join() 메서드 배열의 모든 요소를 연결해 하나의 문자열로 만듦 const elements = ['js', 'hufs', 'yeeun']; console.log(elements.join()); // js,hufs,yeeun console.log(elements.join('')); // jshufsyeeun console.log(elements.join('-')); // js-hufs-yeeun 구문 arr.join([separator]) 매개변수(separator) 배열의 각 요소를 구분할 문자열 생략시 배열의 요소들이 쉼표로 구분됨 반환 값 배열의 모든 요소들을 연결한 하나의 문자열을 반환 arr.length가 0인 경우, 빈 문자열 반환