📖 TIL/JavaScript (9) 썸네일형 리스트형 [JS] 인증번호 토큰을 만들기 토큰을 만들기 전에 필요한 메소드 들을 MDN에서 공부해보자. Math.floor : 함수는 주어진 숫자와 같거나 작은 정수 중에서 가장 큰 수를 반환 Math.random : 0 이상 1 미만의 구간에서 근사적으로 균일한 부동소숫점 의사난수를 반환 padStart : 메서드는 현재 문자열의 시작을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열을 반환 String() : 문자열로 변환 자 메소드를 보니까 어떻게 만들지 감이 잡히는가? 그럼 한번 만들어보자! 더보기 function getToken(num) { cosnt result = String(Math.floor(Math.random() * 10 ** num)).padStart(num,'0'); console.log(result); ret.. [JS] Callback함수 ⚡ Callback함수가 무엇일까 콜백함수(Callback Function)이란 함수 안에서 실행하는 함수라는 의미를 갖고있다. 이게 무슨 소리인가 하면 우리가 함수를 실행할때 파라미터 값으로 함수를 사용한다는 것이다. 단순한 코드로 한번 이해를 해보자 function plus(callback, arr) { let emptyArr = []; for (let i = 0; i < arr.length; i++) { emptyArr.push(callback(arr[i])); } return emptyArr; } plus( function(data) { return data + "a" }, ["a", "b", "c", "d", "e"] ) // output // ["aa", "ba", "ca", "da", "ea.. [JS] http 통신 ❓ http transfer(통신)이란? http(Hyper Text Transfer Protocol)이란 뜻으로 컴퓨터와 컴퓨터끼리의 하이퍼 미디어 문서를 주고 받는 길과 같은 개념이다. 이 http라는 통로를 이용해 요청(request)와 응답(response)를 할 수 있다. 근데 정의만으로는 이 구문을 정확하게 이해를 못하겠으니 하나씩 살펴보자. 다음과 같이 각각의 컴퓨터가 있고 데이터를 주고 받는다고 해보자. 내가 블로그에 글을 써서 "저장"버튼을 누르면 게시글이 등록되는데, 등록이 어떻게 되는지 과정을 엿봐보자. 데이터를 위와 같이 전송했으면 이제 응답을 받아야겠죠? 우리가 블로그에 글을 쓰면 "게시물이 등록되었습니다" 같은 안내를 받아본적이 있을 것이다. 바로 그것이 백엔드로 부터 오는 응답.. [JS] 스프레드 연산자와 rest파라미터 그리고 구조분해할당 > 같이보면 좋은 링크 :: 구조분해할당(비구조화할당) ❓ spread(스프레드)연산자란? ES6 문법에 새롭게 추가된 스프레드 연산자는 전개 구문이라고도 한다. 이를 사용하면 배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수(함수로 호출할 경우) 또는 요소(배열 같은 경우)로 확장하여 0개 이상의 키-값의 쌍으로 객체를 확장시킬 수 있다고 MDN의 정의로 나와있다. 근데 정의만으로는 이 구문을 정확하게 이해를 못하겠으니 코드를 보면서 하나씩 뜯어보도록하자. 스프레드 연산자 let classMates = { name: "뽀로로", age: 5, school: "노는게제일좋고등학교" } 와 같은 객체를 담은 변수가 있다고 가정해보자. 다음의 객체를 다른 변수에 복사하려면 다음과 같아야한다. 객체.. [JS] 구조분해할당(비구조화할당) ❓ 구조분해할당(Destructuring Assignment)이란? MDN에 따르면 구조분해할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게하는 JS 표현식이라고 한다. 객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우, 객체와 배열을 분해해서 원하는 값만을 가져올 수 있게 된다. 근데 정의만으로는 이 구문을 정확하게 이해를 못하겠으니 코드를 보면서 하나씩 뜯어보도록하자. 객체선언 const classMates = { name: "뽀로로", age: 5, school: "노는게제일좋고등학교" } 와 같은 객체를 담은 변수가 있다고 가정해보자. 다음의 객체의 key값을 각각 출력하려면 객체의 key값 담기 const name = classMates.name; con.. [JS] 템플릿 리터럴(``) ❓ 템플릿 리터럴(Template literals)이란? MDN 공식문서에 따르면 템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴이라고 한다. 여러 줄로 이뤄진 문자열과 문자 보간기능을 사용할 수 있고 ES6에 추가된 문법이라고 한다. 사용법은 단순히 이중 따옴표("") 혹은 작은 따옴표('') 대신에 백틱(``)을 이용한다. 같은 문법을 템플릿 리터럴과 아닌 방식으로 표현 해보자. 일반 문자열 연결 let age = 13; let name = "김철수"; console.log("내 이름은" + name + "이고, 나이는 " + age + "입니다." ); 문자열과 변수를 연결할때는 +를 사이사이 넣어주어서 연결해주어야한다. 하지만 템플릿 리터럴을 사용한다면? 템플릿 리터럴 let age = 1.. [JS] 배열 배열(Array) [ ] 배열.length : 몇개의 데이터가 있는지 확인가능. 배열 안의 데이터 : Index 번호를 가짐. 0번 부터 시작. Index로 배열 접근가능하다.[ 배열 ][0]; 배열에 자주 쓰일 수 있는 메소드() push() : 배열 맨 뒤에 데이터 추가. unshift() : 배열 맨 앞에 데이터 추가. pop() : 배열 맨 뒤의 데이터 삭제. shift() : 배열 맨 앞의 데이터 삭제 indexOf() : 데이터의 index 값 반환 includes() : 데이터의 존재 여부 반환 객체 - 객체는 { key: value } 값으로 나타내며 객체 안에 객체가 있을 수 있다. - 객체[ 변수명 ] => []를 사용하는 방식은 객체에 데이터가 무수히 많아서 키 값의 이름이 계속 바뀔.. [JS] Data type 과 Properties 그리고 Method 1. Data type(자료형) Boolean Null Undefined Symbol Object String Number 참과 거짓 선언⭕ 할당⭕ 선언⭕ 할당❌ 변경 불가능한 원시 타입의 값 객체 2. Properties .length : 문자열의 문자 갯수를 알려주는 명령어 3. Method - 해당번째를 알려주는 메소드 'Hello Wolrd'.indexOf("W"); // 6 - 공백 삭제 .trim() - document 객체 속의 메소드로, document안에 있는걸 선택할 때 쓴다. .querySelector('') 이전 1 2 다음
