IT기술/javascript25 [javascript] 모바일 환경 pc환경 구분하기 웹사이트를 개발하다보면 모바일 환경인지, PC환경인지에 따라서 소스를 분리시켜야 하는 경우가 생기기도 합니다. 이런 기능을 쓰는 이유는, 웹과 모바일 환경에서 사이트를 접속하며, 상대적으로 가벼운 웹사이트를 요구하는 모바일 환경에 대응하기 위한 부분도 있고, 모바일용 페이지와 웹용 페이지를 별도로 만들지 않고 운영하기 위한 부분도 있기 때문입니다. 요즘은 이런 기능을 위한 별도 js 스크립트도 개발되어 배포되고 있다고 하지만, 단순히 적용 가능한 방법을 기술해보려 합니다. 바로 자바스크립트 내장함수인 navigator.userAgent 를 이용하는 것입니다. 이는 여러 페이지에서 접속되는 디바이스를 구분하여 출력하는 함수인데, 이것만 가지고 모바일 환경인지 구분하는 것은 현대에선 좋은 방법이라고 보지 않.. 2024. 1. 23. [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. VSCode 오류 : 이 시스템에서 스크립트를 실행할 수 없으므로 에러 해결하기 VSCode의 터미널을 통하여 npm혹은 yarn을 사용하여 처음 작업을 수행할 때, 다음과같은 에러가 발생할 수 있습니다. 내용은 "이 시스템에서 스크립트를 실행할 수 없으므로 ~(블라블라)~ 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오." 로, 시스템의 설정에서 스크립트를 실행할 수 있는 권한이 부여되어있지 않은 상태라서 해당 작업 명령을 수행할 수 없어서 발생하는 오류입니다. Window10 기준으로, Windows PowerShell 앱을 통하여 시스템의 스크립트 실행권한을 변경하여 해결할 수 있습니다. 1. Windows PowerShell 앱을 검새하여.. 2023. 8. 1. [javascript] 배송조회 API 예전에 가지고있던 괜찮은 링크가 있어 공유한다. https://tracker.delivery/guide/ 2023. 7. 31. [javascript] Uncaught TypeError: Cannot read property of null 해결방법 Uncaught TypeError: Cannot read property of null 보기만해도 정겹고 빡치는 명령어인데, 자바스크립트 개발하다보면 자주 보이는 오류다. 자바스크립트에서 요소의 값을 읽어오는데 읽어와 지지 않은 경우에 볼 수 있는 흔한 오류인데, 왜 못읽어 들여서 이런 에러를 발생시키는지 짜증난다. 1 2 // We want to get the value of an input. var inputVal = document.getElementById("input").value; cs 이처럼 요소의 값을 읽어오도록 선언했지만 실제로 읽어 오지 못했을 경우 발생하는 오류다. 이럴 경우 어떻게 해야 값을 읽어올 수 있도록 적용할 수 있을까? 페이지의 Element의 ID가 input인 것이 있는.. 2023. 7. 31. [JavaScript] Alert에 JSON 형식의 데이터를 출력하는 방법 ajax통신으로 결과를 출력할 때 json형식으로 출력할 필요가 있었다. api로써 데이터 전송 후 출력해볼 때 사용하는것도 가능할 듯 하다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 function fnDoLoadCategory() { $.ajax({ url: "category/loadCategoryAjax.do", type:'POST', cache: false, dataType: "json", data: $('#form1').serialize(), async: false, success: function(data) { // alert(data); alert(JSON.stringify(data)); }, error: function(e) { console.l.. 2021. 9. 30. [javascript] JAVASCRIPT / JQUERY 를 이용한 ID, NAME, CLASS 값 가져오기 document에서 id를 이용해서 name / class를, name을 이용해서 id/ class를, class를 이용해서 id와 name을 가져올 수 있다. javascript에서 object로써 값을 불러오거나 갱신할 때 등 사용할 필요가 있을 경우가 많기에 알아두면 좋다. 페이지 전환시 name으로 값을 전달하고, 해당페이지에서 javascript를 활용할 때 id로 참조하는 경우가 많기에 등 요소에 id와 name을 같이 입력하기도 한다. jQuery 사용시 1 2 3 4 5 6 7 8 9 //1. By id var name_by_id = $('#test_id').attr('name'); var class_by_id = $('#test_id').attr('class'); //2. By class.. 2021. 9. 30. 자바스크립트 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. 이전 1 2 3 다음
