본문 바로가기

Front-End: Web/JavaScript

(85)
crypto로 비밀번호 암호화하기 crypto? js 내장 모듈. 여러 해시 함수를 통한 암호화 기능 제공함 전에 스마게 강의에서 사이드 플젝 정도면 SHA-256 사용하면 적당하다고 해서 이거 사용할 것임 utils/createHashedPassword.ts import crypto from "crypto"; const createHashedPassword = (password: string) => { return crypto.createHash("sha256").update(password).digest("base64"); }; export default createHashedPassword; auth.ts import mysql from "mysql"; import dbconfig from "../config/database"; i..
[js] Map이란? Map Map 은 객체 형태다. key-value 쌍과, 키의 삽입 순서를 기억한다. 모든 값을 키로 사용할 수 있다. (그냥 객체는 String, Symbol만 가능) 키는 unique한 값이다. for...of 루프를 돌면 [key, value] 로 이뤄진 배열을 반환한다. 삽입된 순서대로 반복한다. (set을 한 순서대로) 키 동일성은 SameValueZero를 기반으로 한다. 0 ≠ -0 Nan === Nan 객체 vs 맵 둘이 유사하다. 맵은 아이템 수를 size 로 쉽게 가져올 수 있지만, 객체는 일일히 봐야함 맵은 순회가능(iterator)하므로 for…of문 사용 가능하지만, 객체는 아니다. 맵이 객체보다 성능이 더 좋다. (키-값 쌍이 빈번하게 추가/제거되는 상황에 최적화되어 있음) 메서..
[js]tilde(~)와 double tilde(~~) tilde(~) 연산자 비트 연산자. NOT의 기능을 한다. 2진수의 0 1 로 바꾼다. const a = 5; // 0000000000000101 console.log(~a); // 1111111111111010 // expected output: -6 const b = -3; // 1111111111111101 console.log(~b); // 0000000000000010 // expected output: 2 하지만 저것을 콘솔에 실행시켜 보면 expected output과 같이 -6,2 가 나온다. 이를 이진수로 직접 눈으로 확인 하는 법은 없을까? toString() 메서드를 이용하여 이진수로 변환하기 toString() 메서드를 이용하면 10진수를 이진수로 바꿀 수 있다. const a =..
[js] 변수를 사용하기 전에 꼭 알아야할 "TDZ(Temporal Dead Zone)" TDZ란? 직역하면 일시적 사각지대 let, const, class 구문의 유효성을 관리함 즉, 변수를 선언 및 초기화하기 전 사이의 사각지대를 말함 (선언 및 초기화 전에 변수를 사용하게 되면 ReferenceError 에러가 발생함) 따라서 변수를 선언하기 전에 변수를 절대 사용하지 말자! TDZ의 영향을 받는 구문 const let class constructor() 내부의 super() 기본 함수 매개변수(Default Function Parameter) const 변수 😃 상단에서 본 사진과 동일하다. 꼭 const 변수를 선언한 후 사용하도록 하자. const pi = 3.14; pi; // 3.14 let 변수 😭 let도 선언 전 줄까지 TDZ의 영향을 받는다. count; // throw..
[js] 객체 복사: Object.assign vs. object spread object spread는 항상 새로운 객체를 생성함 const a = { name: 'Joe Bloggs' } const b = { ...a, age: 27 }; console.log(a === b) //=> false Object.assign은 이미 존재하는 객체를 mutate하게도 가능함 const a = { name: 'Joe Bloggs' } const b = Object.assign(a, { age: 27 }); console.log(a === b) //=> true Object.assign을 활용해서 객체를 복사하려면 첫 번째 파라미터로 빈 객체를 넣으면 된다. const a = { name: 'Joe Bloggs' } const b = Object.assign({}, a, { age: 27..
[JavaScript] eval() 함수를 사용하지 마세요! eval() is evil! eval()문자로 표현된 JavaScript 코드를 실행하는 함수.php, javascript와 같은 스크립트 언어에서 사용할 수 있다.eval(string)매개변수string : 자바스크립트 표현식, 명령문, 또는 연속되는 다수의 명령문을 나타내는 문자열. 표현식은 이미 존재하는 객체의 변수나 속성을 포함할 수 있음반환값주어진 코드를 평가하여 얻은 값. 값이 없다면 undefined를 반환(예제)console.log(eval('2 + 2'));// expected output: 4console.log(eval(new String('2 + 2')));// expected output: 2 + 2console.log(eval('2 + 2') === eval('4')..
[js] lastIndexOf (+ 활용법 with indexOf) array.indexOf(s)가 앞에서부터 보고 문자열(s)가 나온 최초의 인덱스를 반환한다면(없다면 -1을 반환) array.lastIndexOf(s)는 그 반대로 뒤에서부터 본다. 그래서 이 두 메서드를 활용하면, arr.indexOf(s) === arr.lastIndexOf(s) 해당 조건을 만족하는 arr는 문자열 s가 한 번 밖에 등장하지 않는다. 참고 자료 String.prototype.lastIndexOf() - JavaScript | MDN lastIndexOf() 메서드는 주어진 값과 일치하는 부분을 fromIndex로부터 역순으로 탐색하여, 최초로 마주치는 인덱스를 반환합니다. 일치하는 부분을 찾을 수 없으면 -1을 반환합니다. developer.mozilla.org
[js] includes vs in Array.includes() array 내 값이 존재하는지 확인 in operator 객체 내 key가 존재하는지 확인 (array의 경우, 해당 index가 존재하는지 확인) 예제 var arr = [5]; console.log('Is 5 is an item in the array: ', arr.includes(5)); // true console.log('do we have the key 5: ', 5 in arr); // false console.log('we have the key 0: ', 0 in arr); // true 참고 자료 https://stackoverflow.com/questions/48499181/what-is-the-difference-between-in-operator-an..

반응형