본문 바로가기
  • 오늘도 한걸음. 수고많았어요.^^
  • 조금씩 꾸준히 오래 가자.ㅎ

javascript11

[JavaScript] 자주 사용하는 ES6 문법 정리 Node.js와 React관련 프로젝트를 진행하면서 기존에 배워왔던 jQuery를 활용한 ES5 문법으로 JavaScript 코드를 작성하였지만 이제는 최신 트렌드에 맞게 ES6 문법으로 JavaScript 코드를 작성하는 요구사항이 많아지기 시작했습니다. 여기서는 새로 추가된 기능을 모두 설명하는 대신 자주 사용하는 기능위주로 설명하겠습니다. ES6(ECMAScript6)는 무엇인가요? ECMAScript 2015로도 알려져 있는 ECMAScript 6는 ECMAScript 표준의 가장 최신 버전입니다. ES6는 새로운 언어 기능이 포함된 주요 업데이트이며, 2009년도에 표준화된 ES5 이후로 언어 기능에 대한 첫 업데이트이기도 합니다. 현재 주요 JavaScript 엔진들에서 ES6 기능들을 구현 .. 2023. 8. 4.
[JavaScript] ECMA, ECMAscript 개념 정리하기 기본적으로 javascript는 알고있으나 java를 공부하면서 ECMA라는 개념을 활용해 로직을 짜는걸 보게되었는데, 개발하면서 ECMA라는 걸 들어본적이 없다보니, 별도로 공부가 필요하게되어 정리해봅니다. javascript와 ECMAscript라는 게 별개로 구분되는데, 이게 뭔 소린지 구분해보겠습니다. 1. Ecma 인터내셔널(Ecma International) 알기 https://www.ecma-international.org/ Ecma 인터내셔널은 정보 통신에 대한 표준을 제정하는 비영리 표준화 기구입니다.(사이트는 안들어가집니다.) 먼저 Javascript는 1990년대 Netscape 회사의 Brendan Eich 라는 사람에 의해 최초 개발되었습니다. 자바스크립트가 잘 되자, MS에서 J.. 2023. 8. 3.
자바스크립트 async & await async, await 는 무엇인가?? 비동기 처리 방식인 callback, promise의 단점을 보완하고 가독성을 상승시킨 기능이다. 최근에 나온 패턴으로 알아두면 좋다. async 함수 async 함수에서 async는 function앞에 위치할 수 있으며, 반드시 promise형으로 반환한다. 명시적으로 Promise를 붙여 반환할수도 있지만 결과는 같다. 1 2 3 4 5 6 async function f() { // return 1; return Promise.resolve(1); } f().then(alert); // result가 1인 promise로 반환됨 그래서 then에서 alert 호출시 1출력 await 자바스크립트에서 await는 async함수 안에서만 동작한다. async함수가 .. 2021. 2. 7.
자바스크립트 Promise Promise란 어떤 것인가? 주로 서버에서 데이터를 불러오고 화면에 표시할 때 사용한다. 3가지 처리 상태를 이용하여 불러오는 상황에 맞춰 원하는 결과를 표시 할 수 있다. 데이터를 불러오기 실패한 경우에 대한 처리도 가능하다. Promise 사용 목적 서버에서 데이터를 받아올 때 의도치 않게 데이터를 다 받아오지 못했는데도 화면에 표시하려 하면 이는 오류로 처리되거나 빈 데이터로 표시된다. 이런 상황에 대한 처리를 할때 사용하는 방법 중 하나가 Promise다. 즉, 자바스크립트에서 오류나 예외처리가 필요할 때 사용할 필요가 있다. Promise 동작 예제 1 2 3 4 5 6 7 8 9 function getData(callbackFunc) { $.get('url 주소/products/1', fun.. 2021. 2. 6.
자바스크립트의 비동기 처리 비동기 처리란?? 특정 코드의 연산이 끝날때까지 코드의 실행을 멈추지 않고 원하는 코드를 실행하는 자바스크립트의 특성이다. 이 특성을 통해 코드의 실행중에 원하는 function을 불러와 실행가능하다. 이렇게 특정 로직의 실행이 끝날 때까지 기다려주지 않고 나머지 코드를 먼저 실행하는 것이 비동기 처리다. 자바스크립트의 특성들은 다음과 같다. - 자바스크립트는 null과 undefined 타입을 제외하고 모든 것을 객체로 다룬다. - 객체로 다루기 때문에 함수를 변수 or 다른 함수의 변수처럼 사용할 수 있다. - 객체로 다루기 때문에 함수의 인자를 callback, finishFunc 로 사용할 수 있다. - 비동기 처리를 통해 코드 중간에 객체인 메소드를 추가하여 실행가능하다. 비동기처리로써 사용되는.. 2021. 2. 6.
[javascript] JavaScript를 사용하여 새 탭에서 URL 열기 function openInNewTab(url) { var win = window.open(url, '_blank'); win.focus(); } 2018. 10. 30.
팝업창에서 부모창의 함수 호출 방법(opener) 팝업 기능을 이용해야 할 때가 가끔씩 아주 가끔씩 있다. 그런데 버튼 하나로 팝업창 작업 후 부모창도 어떤 작업을 수행하도록 구현하는게 좋을 때가 있다. 팝업창으로 사진을 올려서 저장시켰을 때 이미지가 바로 보여지게 한다거나, 리스트로 가게 한다거나 하는 것 처럼 말이다. 그러면 예시를 하나 만들어 보겠다. 부모창 1 2 3 4 5 6 7 8 9 10 11 12 var parentWindow; function openCBAWindow(){ parentWindow = window.open('', 'CbaWindow', 'width=410, height=450, resizable=0, scrollbars=no, status=0, titlebar=0, toolbar=0, left=300, top=200' );.. 2018. 10. 30.
자바스크립트(Javascript) display 속성 이용해서 숨기기 보이기 함수 하나로 영역 또는 개체 보이게 하거나 사라지게 할 수 있다. 이런 기능을 토글 기능 이라고 하는데, 더보기 버튼/숨기기 버튼으로 구현도 가능하다. document.getElementById() 함수로 특정 개체의 ID를 가져와서 처리해야 하는데, 즉 이 기능은 해당 영역 또는 개체가 ID를 가지고 있어야 작동한다. javascript에서 Id를 가져와서 동적으로 DIV 개체의 display 속성을 block 또는 none으로 변경하는 원리다. 소스를 통해 알아보자. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 var bDisplay = true; function doDisplay(){ var con = document.getElement.. 2018. 10. 30.
Layer Pop-up (레이어 팝업) http://webclub.tistory.com/189 참조함 html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 일반 팝업레이어 Thank you. Your registration was submitted successfully. Selected invitees will be notified by e-mail on JANUARY 24th. Hope to see you soon! Close 딤처리 팝업레이어 1 Thank you. Your registration was submitted successfully. Selected invitees w.. 2018. 10. 7.
[jquery] 팝업 창(윈도우) 크기 변경 (window.innerHeight window.outerHeight) 자바스크립트에서 팝업 창을 띄울 수 있다. 그런데 그냥 띄우기만 해서는 의미가 없을 수도 있다. 팝업창의 사이즈가 일정하면 훨씬 깔끔하게 출력이 가능하며, 원하는위치에 배치 할 수록 더 깔끔하기 때문이다. 이를 jQuery를 이용하여 구현할 수 있다. 자바스크립트의 width, height 변경은 웹표준 문제 때문에 웹 개발자들이 꺼려하는 부분 중 하나다. 자바스크립트에서 지원되는 크기 관련 속성은 clientHeight, innerHeight, outerHeight, screenHeight 등 여러가지가 존재 하는데, 가장 문제가 되는 부분은 브라우저별로 각 속성의 값이 다르게 해석 된다는 점이다. 게다가 같은 브라우저에서도 버전에 따라 서로 다른 속성과 계산법이 사용되기 때문에 작업을 완료 하더라도 .. 2018. 10. 7.
substring과 substr의 차이점 문자열을 잘라서 써야 할 때 쓰는 함수가 2개 있다. 물론, 다른 함수들도 많이 있지만, 대표적으로 많이 사용되는 함수가 substring과 substr 이다 이 두개의 함수는 문자열을 자르는 공통점이 있으나 차이점도 있다. 아래를 보면 이해가 쉽다. 1 2 3 4 var str = "abcdefg"; alert("substr : " + str.substr(2,4)); // 첫번째 예시 alert("substring : " + str.substring(2,4)); // 두번째 예시 substr을 했을 때, 위 처럼 문자열이 잘린다. (몇 번째부터, 얼마나) 이런 뜻이다. substring을 했을 때, 위처럼 문자열이 잘린다. (몇 번째부터, 몇 번째까지) 이런 뜻이다. 2018. 10. 7.

티스토리툴바