본문 바로가기

JS

230113 JS ES6 module import export
JS 2023. 1. 13. 230113 JS ES6 module import export module import export 모듈 임포트 모듈은 JS ES6문법에서 미리 작성해 놓은 스크립트 파일이며, 모듈 안에는 변수, 함수, 클래스 등이 정의되어 있음. ES6부터는 주요기능들을 모듈로 구성하여 사용이 가능함. 모듈을 내보내는 방법은 named export방식과 default export 방식 2개가 있음 -여러 값을 내보낼 때 named export방식 -단일 값을 내보낼 때 default export방식 직접 앞에 export를 걸어도 되고, export{}로 선언해놓은 변수를 내보내기도 되고. module을 사용하려면script태그에 type="module"문을 반드시 작성해야 함. import 방법 1 (Destructing방식) import {export 한 것 중 가지고 올 것..
230113 JS ES6 class상속
JS 2023. 1. 13. 230113 JS ES6 class상속 클래스 상속 자바와 똑같이 extends 사용 생성자를 건들지 않아도 됨. 생성자를 만들 때는 super()키워드를 통해 부모자식간 연결을 반드시 해줘야 함. 자바랑 달리 직접 해야 한다. get, set(getter setter가 아닌 getter setter를 만드는 예약어임), static 예약어로 메서드를 설정할 수 있음. -잘 사용하진 않음. -선언적 함수임. ex) set setW(w) { this.w=w; } class Shape{ constructor(){} func=() => {console.log("func호출")} } class Rect extends Shape{ //프로그래머가 생성자를 직접 만들게 되면 super()를 통해 연결해야 합니다. constructor(w,h){ supe..
230113 JS ES6 class
JS 2023. 1. 13. 230113 JS ES6 class class 일반 HTML에서는 굳이 class를 사용하진 않는다. react의 class 컴포넌트를 사용한다면 알아두기. 1.클래스의 멤버변수를 선언할 때는 키워드를 사용하지 않음(구형브라우저에서는 지원하지 않을 수도 있음) 멤버변수, 생성자, 함수가 있음 -var or let등을 쓰지 않고 변수를 선언하면 멤버변수가 됨. 객체변수도 변수명={} 식으로. -생성자->JS의 생성자는 1개. 생성자 중복이 안됨. 멤버변수는 선언하지 않더라도 this.변수명을 지칭하면 자동 생성됨 constructor(){} -함수도 let 등의 타입을 적지 않음. 생성자가 아닌 함수에서 this.변수명을 써도 생성된다! class Person { //멤버변수 name = "홍길동"; age = 20; state = { a:..
230112 JS ES6 화살표함수 응용 forEach, filter, map
JS 2023. 1. 12. 230112 JS ES6 화살표함수 응용 forEach, filter, map 화살표 함수의 응용 forEach, ★filter, ★map forEach, filter, map continue나 break 등을 사용하기 어렵고, 안에서 사용한 or 만든 변수를 외부에서 사용하기 어렵다. return의 경우, undefined를 반환하므로 사용이 조금 다르다. 1.forEach - 반복문 배열을 반복할 때 콜백함수를 이용 array.forEach(callbackFunction(currenValue,index,array),thisArg) currenValue : 현재값 index : 현재인덱스 array : 현재배열 thisArg : callbackFunction내에서 this로 사용될 값. 옵션임. 쓸일이 거의 없다. list.forEach((x,y,z)=.console.log(x,..
230112 JS ES6 Arrow Function (화살표함수)
JS 2023. 1. 12. 230112 JS ES6 Arrow Function (화살표함수) Arrow Function(화살표함수) 1.화살표 함수는 기본적으로 익명함수를 대체합니다.(호이스팅 불가) 2.가독성 향상 var a=function(){console.log("실행내용")} let a=()=>{console.log("실행내용")} 문법 코드가 한개줄이면 {}생략이 가능. 한줄코드는 자동으로 return이 붙는다. {}를 쓰지 않으면 기본값으로 undefined를 반환. {}를 쓰지 않고 구문을 작성하면 return문이 됨. 매개변수가 1개라면, 매개변수 자리의 ()의 생략이 가능. 객체를 반환할때는 ()를 묶어 줌. ex)let d=()=>({key:"값"}) //기본적으로 익명함수를 대체합니다. // var a=function(){ // console.log("a실행"); // } l..
230112 JS ES6 JSON에서의 Destructuring
JS 2023. 1. 12. 230112 JS ES6 JSON에서의 Destructuring //JSON형식에서 디스트럭쳐링 let list = [ { num: 1, title: "hello", info: [1, 2, 3], profile: { birth: "2023" } }, { num: 2, title: "bye", info: [4, 5, 6], profile: { birth: "2022" } } ] let [a, b] = list; //두번째 객체의 num,title let [, { num, title }] = list; console.log(num, title); //두번째 객체의 info let [, { info }] = list; console.log(info); //두번째 객체의 profile let [, { profile }] = list; console.log(profile); ..
230112 JS ES6 for-of 구문과 Backtick
JS 2023. 1. 12. 230112 JS ES6 for-of 구문과 Backtick for of문 반복 가능한 iterable을 for문 안에서 반복시켜 연속된 결과값을 얻음 for Each문에서 지원하지 않는 break, continue, return 사용가능! let arr=["a","b","c"]; for in for(let i in arr){ console.log(i); //i는 인덱스를 담아줌 } for of for(let i of arr){ console.log(i); //값을 뽑음. } let arr = ["a", "b", "c"]; for (let i in arr) { console.log(i); //index } console.log('---------------------------'); for (let i of arr) { console.log(i); //value ..
230112 JS ES6 Destructing assignment (구조 분해 할당)
JS 2023. 1. 12. 230112 JS ES6 Destructing assignment (구조 분해 할당) Destructing assignment (구조 분해 할당) let arr=[1,2,3,4] let [a,b,c,d] =arr; a=arr[0] ~ d=arr[3]임. 중간을 비우면([a,,,d]처럼)배열의 중간값을 받지 않을 수도 있음 let [a1, a2] = arr; a1은 1, a2는 2임. 배열크기와 딱 맞춰서 하지 않아도 됨 let[a,b]=function(배열을 반환하는 함수라 할 때) ->반환하는 배열의 인덱스 0과 1번째를 가져온다는 뜻. let [...x] =arr; 배열을 전부 다 반환받는 것. 통째로. 이를 섞어서 let[k1, k2, ...all]=arr; console.log(all)은 k1과 k2가 받은 이후 남아있는 요소를 배열로 나타낸다. let arr = [1, 2, 3,..
230112 JS ES6 Spread Operator (전개구문)
JS 2023. 1. 12. 230112 JS ES6 Spread Operator (전개구문) spread operator(전개구문) 1.반복 가능한(iterable)에 적용할 수 있는 문법. 2.배열이나 문자열 등을 풀어서 요소 하나 하나로 전개시킬 수 있음. but 객체는 불가 ...배열, ...문자열의 형태로 사용. 배열의 추가 - 배열 자체를 추가하는게 아니라 배열 요소를 풀어서 추가. 즉, 새로운 배열이 되는 것. 배열의 중간추가 배열의 복사 배열의 연결 이 가능. //전개구문 - 반복이 가능한 요소에서만 사용가능함 let arr = [1,2,3]; console.log(arr);//배열 자체 console.log(...arr); //배열 요소의 나열. 전개구문 let str = "hello"; console.log(...str);//전개구문 console.log([...str]);//배..
230112 JS ES6문법 let과 const
JS 2023. 1. 12. 230112 JS ES6문법 let과 const 리액트를 배우기 전에, JS의 ES6문법을 알아야 한다. let let변수는 중복선언이 불가능하다. let변수의 유효범위는 {}블록이다. 우리가 아는 자바 변수의 일반적인 범위와 비슷해진다고 생각 목록1 목록2 목록3 목록4 1.즉시실행함수의 동작 원리->for문이 돌아갈 때마다 함수가 실행된다. 한줄로 쓰면 (function(x){lis[x].onclick = function(){console.log(x);}})(i); 이런 모양. 익명함수(매개변수); 함수를 바로 실행하는 것! var는 함수 스코프임. 때문에 for문이 끝나도 살아있기 때문에 기존 for문처럼 했을 때 i를 뽑으면 for문이 다 지난 i값이 나옴 const 완전한 상수는 아니지만, 상수와 비슷한 규칙을 가짐 중복선언 X, 변수값 변경..
JS 2023. 1. 9. 230109 JS 카카오톡 로그인 연습 인가코드를 받고, 다시 보내고, 토큰 받고, 사용자 정보 보내고 받고. 요청과 응답이 각 3번. API로 로그인이 되었다고 실제 서버에서 로그인이 된 것은 아님 서버에서 다시 로그인처리를 해 주어야 한다. =>토큰 받기 사용자가 모든 필수 동의 항목에 동의하고 [동의하고 계속하기]를 누르면 redirectUri로 인가 코드를 담은 쿼리 스트링(?키=값 형태)을 전달. 서버에서 requestgetparameter()로 받아올 수 있음 code 및 state가 전달된 경우 code의 인가 코드 값으로 '토큰 받기' 요청. Content-type : 우리가 보내는 요청에 대한 데이터 타입. 요청을 form으로만 가능하다.x-www-form-urlencoded는 form 형식이라는 뜻. 결과페이지 로그인창으로 ..
230106 JS 인터벌 실습-타이머 만들기
JS 2023. 1. 6. 230106 JS 인터벌 실습-타이머 만들기 네이버 타이머 도전하기 select태그는 시간:99 or 분:60 or 초:60으로 화면이 생성될 때 엘리먼트 생성기법으로 처리합니다. 시간설정 버튼을 클릭하면 시간이 세팅됩니다. 타이머시작버튼은 토글형태로 타이머가 동작중이라면 일시정지 버튼으로 활성화 됩니다 사용자가 버튼을 잘못클릭하는 경우를 고려하여, 어떠한 경우라도 중복으로 타이밍이 발생되면 안됩니다. 시간을 선택하세요 시간설정 타이머시작 일시정지 padStart(2,'0')을 하면 두자리수에서 빈 자리수를 앞에서부터 0으로 채움. 단, 문자열에서 동작하는 함수다. 변수-=1을 한 뒤에 변수를 toString을 한 뒤 padStart를 해주어야 한다.

티스토리툴바