티스토리

개발자서기록

검색하기

블로그 홈

개발자서기록

joo0jae.tistory.com/m

주영재 님의 블로그입니다.

구독자: 6

방명록 방문하기

주요 글 목록

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 한 것 중 가지고 올 것.. 공감수 0 댓글수 0 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.. 공감수 0 댓글수 1 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:.. 공감수 0 댓글수 0 2023. 1. 13.
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,.. 공감수 0 댓글수 0 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.. 공감수 0 댓글수 0 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); .. 공감수 0 댓글수 0 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 .. 공감수 0 댓글수 0 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,.. 공감수 0 댓글수 0 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]);//배.. 공감수 0 댓글수 0 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, 변수값 변경.. 공감수 0 댓글수 0 2023. 1. 12.
230109 JS 카카오톡 로그인 연습 인가코드를 받고, 다시 보내고, 토큰 받고, 사용자 정보 보내고 받고. 요청과 응답이 각 3번. API로 로그인이 되었다고 실제 서버에서 로그인이 된 것은 아님 서버에서 다시 로그인처리를 해 주어야 한다. =>토큰 받기 사용자가 모든 필수 동의 항목에 동의하고 [동의하고 계속하기]를 누르면 redirectUri로 인가 코드를 담은 쿼리 스트링(?키=값 형태)을 전달. 서버에서 requestgetparameter()로 받아올 수 있음 code 및 state가 전달된 경우 code의 인가 코드 값으로 '토큰 받기' 요청. Content-type : 우리가 보내는 요청에 대한 데이터 타입. 요청을 form으로만 가능하다.x-www-form-urlencoded는 form 형식이라는 뜻. 결과페이지 로그인창으로 .. 공감수 0 댓글수 0 2023. 1. 9.
230106 JS 인터벌 실습-타이머 만들기 네이버 타이머 도전하기 select태그는 시간:99 or 분:60 or 초:60으로 화면이 생성될 때 엘리먼트 생성기법으로 처리합니다. 시간설정 버튼을 클릭하면 시간이 세팅됩니다. 타이머시작버튼은 토글형태로 타이머가 동작중이라면 일시정지 버튼으로 활성화 됩니다 사용자가 버튼을 잘못클릭하는 경우를 고려하여, 어떠한 경우라도 중복으로 타이밍이 발생되면 안됩니다. 시간을 선택하세요 시간설정 타이머시작 일시정지 padStart(2,'0')을 하면 두자리수에서 빈 자리수를 앞에서부터 0으로 채움. 단, 문자열에서 동작하는 함수다. 변수-=1을 한 뒤에 변수를 toString을 한 뒤 padStart를 해주어야 한다. 공감수 0 댓글수 0 2023. 1. 6.
230106 JS AJAX 서버 -yts.mx/api에서 받아오기 title --> 공감수 0 댓글수 0 2023. 1. 6.
230106 JS AJAX 서버 -공공데이터포털 공공데이터포털에서 데이터 가져오기 보건복지부_코로나19 확진자 성별 연령별 현황 REST api서버-spring End Point = 접속주소 JSON으로 받아오기 1 2 3 4 5 받아오기 AJAX서버와 데이터를 가져올 땐 양식을 확실히 맞춰야 한다. 고유키나, 필수로 입력하라는 '키=값'을 정확히 다 넣어줘야 한다. 공감수 0 댓글수 0 2023. 1. 6.
230106 JS AJAX json데이터와 xml데이터 fetch를 통해 데이터 받아오기 HTML body json파일 ajax요청 xml데이터 JSON { "id": "kkk123", "topic": "헬로", "age": 20 } function ajax() { fetch("hi.json").then(function (response) { return response.json(); //json형변환. fetch가 제공하는 기능 }).then(function (data) { console.log(data.id);//가능 console.log(data["id"]);//가능 var result = document.querySelector(".result"); result.innerHTML = data["id"]; }) } XML Windows 9 99 Mac .. 공감수 0 댓글수 0 2023. 1. 6.
230106 JS AJAX (비동기 통신) AJAX(비동기 통신) ★★★AJAX는 웹 테이지의 이동없이 필요한 데이터만 전송하는 기술. 일반적인 경우 데이터 처리는 요청 순서대로 진행하지만 AJAX는 순차적으로 진행하지 않음. 이런 방식을 '비동기 방식'이라고 함 js의 비동기 방식은 상당히 까다롭다. 이를 간단히 사용할 수 있게 해주는 최신 자바스크립트 API인 fetch API를 이용. ES6 +)ES5에선 XMLHttpRequest, ES6에선 fetch API fetch API의 일반적 구조 fetch('test') .then(function(response) { response.text();}) .then(function(text) { alert(text); }) fetch는 Promise라는 객체를 반환한다. Promise 1.pend.. 공감수 0 댓글수 0 2023. 1. 6.
230105 JS 쿠키실습 main 메인화면 popup.html 팝업찹 오늘 하루 이창을 열지 않기 popup JS var check = document.querySelector(".check"); check.addEventListener("click", function () { if (check.checked) { var date = new Date(); var date2 = new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1); document.cookie = "mainPopup=" + check.checked + "; path=/; expires=" + date2.toUTCString(); window.close(); } }) //setCookie, getCoo.. 공감수 0 댓글수 0 2023. 1. 5.
230105 JS 로컬스토리지 로컬스토리지 서버가 아닌 브라우저측의 세션 쿠키와 비슷한데 살짝 다름 -쿠키는 서버간 전송이 가능하다. -스토리지는 브라우저에서만 사용할 수 있다. 로컬스토리지는 브라우저를 종료하더라도 지속된다. 영구지속. 세션스토리지는 브라우저를 종료하면 사라진다. setItem(key, value) – 키-값 쌍을 보관함. getItem(key) – 키에 해당하는 값을 받아옴. removeItem(key) – 키와 해당 값을 삭제함. clear() – 모든 것을 삭제함. key(index) – 인덱스(index)에 해당하는 키를 받아옴. length – 저장된 항목의 개수를 얻음. 배열로 저장해도 string이 됨. 그래서 object면 JSON.stringify와 JSON.parse를 사용해야 한다. 로컬스토리지 .. 공감수 0 댓글수 0 2023. 1. 5.
230105 JS 쿠키-생성과 사용 쿠키 쿠키-브라우저에서 관리 세션-서버에서 관리 document.cookie="키; 발행처; expires=UTCString"; JS에서 쿠키는 다 문자열로 표현. 키는 키=값;의 형태로 path=/; 생략도 가능. expires=UTCString은 만료시간 동일한 이름의 쿠키는 덮어씌워짐에 주의. map과 같다. ;와 띄어쓰기가 반드시 들어간다. 쿠키이름: 쿠키벨류: 쿠키만들기 쿠키를 사용하는 방법은 개발자마다 다르다. 1번페이지에서 만든 쿠키 사용하기 찾을쿠키명 console.log(document.cookie);를 하면 키=값의 형태로, 문자열로 나온다! 공감수 0 댓글수 1 2023. 1. 5.
230105 JS navigator객체2, 콜백함수 geolocation.getCurrentPosition(함수,함수); : 현재 위치 정보를 얻어옴. 브라우저가 접속된 위치정보. 콜백->navigator를 사용한 함수가 호출되면 거기다 결과를 돌려준다. 콜백함수 동작 유사 틀 콜백함수 공감수 0 댓글수 0 2023. 1. 5.
230105 JS navigator객체 navigator 객체 사용자의 접속 환경 등을 감지할 수 있음. 버전 등도 감지 가능 appName() : 브라우저 이름을 얻어옴. geolocation.getCurrentPosition() : 현재 위치 정보를 얻어옴. 브라우저가 접속된 위치정보 +)appName : "Netscape" =초창기 브라우저가 이 회사에서 만들어졌음 +)userAgent:"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36" 어플리케이션 버전, css렌더링 엔진, 어플리케이션 정보 geolocation.getCurrentPosition(함수,함수); userAgent가 "Mo.. 공감수 0 댓글수 0 2023. 1. 5.
230105 JS history객체 history객체 history.go(-1)//기록이동. -1이면 뒤로, 1이면 앞으로, -3이면 3번 뒤로 -1을 통해 뒤로가기를 직접 지정할 수도 있다. history.back();//뒤로가기 history.replaceState(저장할데이터, 바꿀제목, 바뀐주소); //새로운기록추가. 가령 뒤로가기에서 1,2,3번페이지가 있을 때 2번페이지라는 기록을 바꾸는 것 history.pushState();첫번째는 공백(null), 두번째는 문자열로 제목-얘도 공백(''), 주소//기록을 추가. history.state //페이지데이터 저장할데이터-state객체. null일수도 있음 바꿀제목 title-대부분의 브라우저는 이 파라미터를 무시하기에 공백으로 표현 바뀐주소 url-주소 ※공백도 데이터임 1번페이.. 공감수 0 댓글수 0 2023. 1. 5.
230105 JS location객체 location객체 js 페이지 이동 location.href=주소; js 새로고침 location.reload() 네이버 이동하기 공감수 0 댓글수 0 2023. 1. 5.
230104 JS window객체와 애니메이션 실습 애니메이션이 주기적으로 동작하려면 태그가 변경되야합니다 공감수 0 댓글수 0 2023. 1. 4.
230104 JS window객체-타임아웃 setTimeout() : 일정 시간이 지난 후 함수 실행 clearTimeout() : setTimout중지 메서드 5초뒤에 경고창이 나오는데 중지하려면 누르세요 공감수 0 댓글수 0 2023. 1. 4.
230104 JS window객체- 인터벌 window객체-기본함수 alert() : 경고창 confirm() : 확인창 setTimeout() : 일정 시간이 지난 후 함수 실행 clearTimeout() : setTimout중지 메서드 setInterval() : 일정 시간마다 함수 반복 실행 clearInterval() : setInterval중지 메서드 setInterval과 clearInterval 멈춰 공감수 0 댓글수 0 2023. 1. 4.
230104 JS BOM window.open() BOM 자바스크립트의 두번째 강력한 기능 BOM은 브라우저 객체 모델이라 하며, 내장객체들을 의미함. 브라우저 상에 사건들을 다룰 때 사용 window는 생략이 가능함 window객체 window.open()-새창을 띄워주는 메서드. window.close()-현재 창을 끔 window.open(문서 주소, 이름, "옵션=값, 옵션=값, 옵션=값");으로 사용 이름은 창의 별칭. 아무거나 적어도 됨. 옵션 width, height, left, right, top, bottom,->:가 아니라 =으로 사용. location=yes 또는 no : 윈도우 주소창을 보이게 scrollbars=yes 또는 no : 스크롤바를 보이게 menubar=yes 또는 no : 메뉴바를 보이게 toolbar=yes 또는 n.. 공감수 0 댓글수 0 2023. 1. 4.
230104 JS 날짜객체 날짜객체 Date 객체는 1970년 1월 1일 UTC(협정 세계시) 자정과의 시간 차이를 밀리초로 나타내는 정수 값을 담습니다. 참고: Date 객체의 중심을 구성하는 시간 값은 UTC 기준이지만, 날짜와 시간 등 구성 요소를 가져오는 메서드는 모두 현지(호스트 시스템의 위치)의 시간대를 사용한다는 것을 기억해야 합니다. 날짜 포멧 형식은 3개. IOSString UTCString LocalTimeString 형식만 다름. timestamp가 IOSString타입. Date.now()-static메서드 월은 0부터 시작함. getDate는 일을 가져오고, getDay는 요일을 가져온다. 월요일이 1, 화요일이 2, 수요일이 3. 공감수 0 댓글수 0 2023. 1. 4.
230104 JS 정규표현식 정규표현식 외워서 쓰는게 아니라 찾아서 쓰는 것 MDN-References-Built in objects-RedExp로 or 구글링 test()함수-일치하면 true, 아니면 false 가입창 아이디: 비밀번호: 생략.... 가입 모든 키보드의 키는 keycode가 있다. if(e.keyCode=="13"), if(e.key=="Enter")로도 동작함 공감수 0 댓글수 0 2023. 1. 4.
230104 JS form객체 form 객체 document객체의 하위 객체 중 하나. body처럼. form을 이용하면 form 유효성 검사 등을 할 수 있음. document의 하위 객체이므로 유일하게 name속성으로 선택이 가능함. form의 요소는 form의 자식이므로 태그의 name으로 접근이 가능. ->ex)document.폼명, document.폼name.요소name 속성값 value : input, textarea 요소의 value값을 반환함 checked : checkbox나 radio가 체크되어 있으면 true, 체크되어 있지 않으면 false를 반환 disabled : 요소가 활성화 상태이면 false, 비활성 상태이면 true를 반환 length : 요소의 개수를 반환. 문자열.length로 사용 focus() .. 공감수 0 댓글수 0 2023. 1. 4.

문의안내

티스토리
로그인
고객센터

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