본문 바로가기

front-end/javascript18

[Javascript] 자주 사용하는 정규표현식과 공부 사이트 서론자바스크립트를 연습하다가 발견한 점. python에서 replace()를 사용하면 문자열 전체에서 해당하는 문자가 바뀌는데 자바스크립트는 가장 처음 나오는 문자 하나만 바뀌었다.a = "this text is for test" print(a.replace("t", "r")) #rhis rexr is for restlet a = "this text is for text"; console.log(a.replace("t", "r")); //rhis text is for text이 문제를 해결하기 위해선 정규표현식을 사용해 console.log(a.replace(/t/g, "r"));이런 식으로 표현해야 했는데, 파이썬의 편리함을 느끼는 한 편, JS로 데이터 처리를 잘 하기 위해서 정규 표현식을 제대로 .. 2019. 9. 21.
[Javascript] ES6, let vs const, 호이스팅과 객체 리터럴, 디스트럭쳐링 기존 자바스크립트의 특징 함수 레벨 스코프 함수의 코드 블록만을 스코프로 인정하기 때문에 함수 외부에서 생성한 변수는 모두 전역 변수로 취급한다. 변수 호이스팅 변수를 선언하기 이전에 참조 가능하다. 위와 같은 특징은 변수의 유효 범위가 너무 커지기 때문에 에러의 발생 가능성을 높인다. 대부분의 프로그래밍 언어는 블록 레벨 스코프(if문, for문을 포함한 모든 코드 블록을 포함해 그 안에 작성된 모든 변수는 지역 변수로 생각된다. ) 인 반면 자바스크립트는 함수 레벨 스코프이기 때문에 함수 내에서 선언된 변수만 지역 변수에 해당한다. var example = 123; console.log(example); { var example = 456; } console.log(example); 위 코드를 실행시.. 2019. 9. 20.
[javascript] ES6 rest 파라미터와 Spread Syntax(전개 구문) REST 파라미터 Rest 파라미터는 매개변수 이름 앞에 세개의 점을 붙여 정의한 매개변수를 의미한다. Rest 파라미터의 특징은 특정 인수의 갯수를 지정할 필요가 없이 들어온 인수를 배열로 바꿔 전달받을 수 있다는 점이다. function example(...rest){ console.log(rest); } example(1,2,3,4,5,6); 함수에 전달된 인수들은 순서대로 파라미터와 rest 파라미터에 할당된다. function example(param1, param2, ...rest){ console.log(param1); console.log(param2); console.log(rest); } example(1,2,3,4,5,6); 또한 ES6 문법 중 하나인 화살표 함수에는 함수 객체의 a.. 2019. 9. 6.
[javascript] StopWatch를 통해 보는 시간지연함수 clearInterval(), setInterval() 타이머 함수라도고 불리는 setInterval()은 지정된 시간 간격으로 작업을 수행하기 위해 만들어진 함수이다. clearInterval은 실행중인 작업을 중지하는 게 아니라 주어진 작업을 모두 끝낸 후 다음 작업을 중지시키는 함수이다. HTML Stopwatch Vanilla JavaScript Stopwatch 00:00 Start Lap Stop Reset Javascript 초기세팅 var seconds = 00; var tens = 00; var appendTens = document.getElementById("tens") var appendSeconds = document.getElementById("seconds") var butto.. 2019. 9. 4.
자바스크립트 AJAX (1/2) , XMLHttpRequest 그리고 HTTP METHOD AJAX 브라우저에서 웹페이지를 요청하거나 링크를 클릭하면 화면 갱신이 발생한다. 보통 서버로부터 데이터를 받을 때 css 및 js까지 불러오게 되어 필연적으로 속도 저하가 된다. 페이지 일부만 변화 할 때 그 부분만을 로드하여 효율적으로 웹을 관리하는 것이 ajax 비동기 방식이다. JSON JSON은 클라이언트와 서버간 데이터 통신을 할 때 사용 되는 가장 흔한 데이터 포맷이다. 일반 텍스트보다 구조적이며 xml보다 가볍다. JSON은 다음과 같이 key와 value 값을 가진다. { "name": "amber", "gender": "female", "height" : 160, } 여기서 JSON파일이 브라우저 상에서 조작되기 위해서는 javascript의 string 형태로 변환해 주어야 하며, 이.. 2019. 8. 28.
[javascript] Web Storage 웹 스토리지와 쿠키의 개념과 사용법 웹 스토리지 & 쿠키 웹 스토리지란 클라이언트 측에서 데이터를 저장할 수 있도록 지원하는 html5의 새로운 기능으로 쿠키와 비슷한 기능을 한다. 다만 쿠기보다 웹 스토리지가 큰 용량을 가지며 전송 갯수의 제한이 없고 서버로 정보를 보내는 것이 아니라 클라이언트 측에 저장하는 것이기 때문에 트래픽을 낮출 수 있다는 장점이 있다. 웹 스토리지에는 Session Storage와 Local Storage가 있으며 서로 다른 특성을 가지고 있다. 둘의 공통점은 하나의 도메인마다 스토리지가 생성된다는 점이다. Local Storage 로컬 스토리지는 브라우저에 데이터를 반영구적으로 저장한다. 즉, 브라우저를 닫았다 다시 열거나 새 탭에서 정보를 저장해도 그 정보가 남아있기 때문에 쿠키를 대신하기에 적합하다. 로컬.. 2019. 8. 24.
Javascript 동기와 비동기 callback부터 async&await javascript 동기와 비동기 자바스크립트는 싱글 스레드 언어이기 때문에 효율적인 작업 처리를 위해 비동기 처리를 사용한다. 동기 : 요청 처리가 완료 된 후 다음 요청을 처리 하는 방식으로 이전 요청을 처리하는 시간이 다음 요청에 영향을 준다. (요청과 응답이 같은 시간대에 있다. 일반적으로 작성한 코드는 보통 동기 방식으로 처리된다. console.log("1"); console.log("2"); console.log("3"); 비동기 : 하나의 요청 처리가 완료되기 전에 다음 요청을 처리 하는 방식. 요청과 응답이 다른 시간대에 일어날 수 있다. 자바스크립트의 비동기 처리의 대표적 방식은 setTimeOut, callback, promise 등이 있다. 각각 일장일단이 있지만 최근 ES8에서 a.. 2019. 8. 23.
Javascript 이벤트 버블링, 위임 target과 currentTarget의 차이 자바스크립트 이벤트의 동작 javascript의 이벤트는 브라우저 상에서 사용자와 상호작용을 통해 제어되는 동작들을 통칭한다. 이벤트 등록 자바스크립트에서는 이벤트 리스너를 통해 사용자의 특정 동작과 그 특정 동작이 발생했을 때 발생시킬 이벤트를 함수로 표현한다. window.onload = function () { alert("Hello World"); };위 함수는 window가 load 되었을 때 다음 함수를 실행시킨다. var div = document.querySelector('div'); div.addEventListener('click', function(){ console.log("hi"); });위 함수는 div가 클릭되었을 때 콘솔창에 “hi”를 입력시킨다... 2019. 8. 22.
Javascript Transition Event 제어 자바스크립트를 통해 CSS 애니메이션을 제어하는 방법에 대해 알아보자. 먼저 다음과 같은 엘리먼트가 있다고 생각해 보자. 아래 e.clientX 와 e.cilentY에는 현재 클릭한 윈도우 상의 좌표값을 반환한다. const box= document.querySelector('box'); window.addEventListener("click, function(e){ console.log(e.clientX, e.clientY); box.style.transform = 'translate(' +e.clientX + 'px,' + e.clientY + 'px)'; }); 여기서 만약 box를 position:absolute로 띄우지 않으면 이 window가 가지는 마진값에 영향을 받기 때문에, 정확히 내가 .. 2019. 8. 21.