Front/JavaScript29

• 

  [JavaScript] 문자열 특정 문자/정규 포현식 위치 찾기 (indexOf, search) String.prototype.indexOf 주어진 값과 일치하는 첫 번째 인덱스를 반환한다. 일치하는 값이 없다면 -1을 반환한다. str.indexOf(searchValue [, fromIndex]) searchValue 찾으려는 문자열. 아무 값도 주어지지 않으면 문자열 "undefined" 를 찾으려는 문자열로 사용한다. fromIndex (optional) 문자열에서 찾기 시작하는 위치를 나타내는 인덱스 값으로 기본 값은 0이고 음의 정수인 경우 전체 문자열을 대상으로 찾는다. 'Blue Whale'.indexOf('Blue'); // returns 0 'Blue Whale'.indexOf('Blute'); // returns -1 'Blue Whale'.indexOf('Whale', 0); /.. Front/JavaScript 2022. 4. 7.

• 

  [JavaScript] 자바스크립트 날짜 문자열 포맷 반환 함수 만들기 (기본값 매개변수 설정하기) 기본값 매개변수 기본값 함수 매개변수 (default function parameter) 를 사용하면 값이 없거나 undefined 가 전달될 경우 이름붙은 매개변수를 기본 값으로 초기화할 수 있다. function multiply(a, b = 1) { console.log(a * b); } multiply(5, 2);// console : 10 multiply(5);// console : 5 자바스크립트 함수의 매개변수는 undefined 가 기본이지만, 일부 상황에서 다른 기본값 매개변수가 필요할 때 설정한다. 위의 예제에서 만약 매개변수 b를 기본 값 설정하지 않았다면 multiply(5) 는 b가 undefined가 되어 NaN 이 표출됐을 것이다. 날짜 Date / String → 문자열 포맷 .. Front/JavaScript 2022. 4. 6.

• 

  [Javascript] 자바스크립트의 "특별한 함수" Class의 정의 Class 정의 ES6에 새로 추가된 문법 class 자바스크립트 Class는 Java와 같은 객체 지향언어와 같은 동작을 하는 것이 아닌 객체 지향의 일부개념을 활용하기 위한 "특별한 함수"이다. 함수를 함수 표현식과 함수선언으로 정의할 수 있듯이 class 문법도 class 표현식과 class 선언으로 정의할 수 있다. Class 선언식 class Rectangle { constructor(height, width) { this.height = height; this.width = width; } } Class 표현식 class 표현식은 이름을 가질 수도 있고, 갖지 않을 수도 있다. 이름을 가진 class 표현식의 이름 클래스는 body의 local scope에 한해 유효하다. (하지만, 클래스의 .. Front/JavaScript 2022. 3. 18.

• 

  [Javascript] 자바스크립트 strict mode(엄격 모드)에 대해 strict mode (엄격모드) 자바스크립트 언어의 문법을 좀 더 엄격히 적용하여 최적화 작업에 문제를 일으킬 수 있는 코드에 대해 명시적인 에러를 발생시키는 것이다. 'use strict'는 자바스크립트의 의도지 않은 여러 잠재적인 오류를 막아주는데 많은 도움을 주지만, 잘못 사용하면 없던 오류를 새로 만들어내는 애물단지가 될 수 있다. 반대로 공식적인 용어는 아니지만, 가끔 엄격하지 않은 기본값을 sloppy mode (느슨한 모드) 라고 부르기도 한다. sloppy mode 의 예제 실행결과는 무엇일까? function foo() { x = 10; } foo(); console.log(x);// 실행결과는 ? foo 함수 내 선언하지 않은 x 변수에 10을 할당했다. 이때 x 변수를 찾아 x 에 .. Front/JavaScript 2022. 3. 17.

• 

  [JavaScript] Custom URL schemes 방식의 VNC 응용프로그램 (서버IP 인자 값 넘기며) 호출 [JavaScript] Custom URL schemes 방식의 VNC 응용프로그램 (서버IP 인자 값 넘기며) 호출 방안 Custom URL Schemes 방식의 호출에 대한 자세한 설명은 아래 게시글을 참고하자. [JavaScript] 웹(Chrome)에서 응용 프로그램 실행 시키기 : Registry 이용한 Custom URL schemes 방식 호출 [JavaScript] 웹(Chrome)에서 응용 프로그램 실행 시키기 : Registry 이용한 Custom URL schemes 방식 호출 만약 프로젝트를 각 PC 배포하여 사용한다면 사용자의 레지스트리를 수정할 필요없이 Java로 간단 haenny.tistory.com RealVNC 2002-2008 버전 Custom URL schemes 호출 .. Front/JavaScript 2022. 1. 13.

• 

  [JavaScript] 웹(Chrome)에서 응용 프로그램 실행 시키기 : Registry 이용한 Custom URL schemes 방식 호출 [JavaScript] 웹(Chrome)에서 응용 프로그램 실행 시키기 : Registry 이용한 Custom URL schemes 방식 호출 만약 프로젝트를 각 PC 배포하여 사용한다면 사용자의 레지스트리를 수정할 필요없이 Java로 간단히 해결되니, 그런 경우는 아래 게시글을 참고하자. [Java] 윈도우 cmd 명령어 실행 : Java로 실행파일 실행시키기 응용 [Java] 윈도우 cmd 명령어 실행 : Java로 실행파일 실행시키기 응용 1. Java에서 cmd 명령어 실행 Java의 Runtime 클래스를 이용하여 cmd 명령어를 실행할 수 있다. Runtime.getRuntime().exec("cmd /c ".. haenny.tistory.com 웹에서 응용프로그램(.exe)를 실행시키는 방법.. Front/JavaScript 2022. 1. 12.

• 

  [JavaScript] 웹브라우저 동작원리 (Stack, Queue, Event Loop) [JavaScript] 웹브라우저 동작원리 (Stack, Queue, Event Loop) 웹 브라우저 동작원리를 알면 자바스크립트 코드를 더 매끄럽게 구현할 수 있다. 웹 브라우저 동작원리? 우리가 작성하는 자바스크립트는 브라우저가 실행을 시켜주는 것이다. 쉽게 말해 HTML, CSS, JavaScript를 해석해주는 엔진이 브라우저인 것이다. 예제를 통해 살펴보자. 다음과 같은 코드를 실행하려고 할 때 자바스크립트는 첫 번째와 세 번째 코드를 실행한 후 1초 쉬고, 두 번째 코드를 실행한다. 간혹 자바스크립트는 병렬처리다 라고 말하는 경우가 있는데, 멍청이라고 해주자. 예제 결과 왜 그런것인지 브라우저 동작원리를 통해 살펴보자 웹 브라우저는 자바스크립트를 실행시켜주는 엔진이다. 즉, 브라우저가 코드를.. Front/JavaScript 2021. 11. 1.

• 

  [Javascript] OR 연산자와 Default Parameter(ES6), Nullish coalescing(ES11) 차이점 [Javascript] OR 연산자와 Default Parameter(ES6), Nullish coalescing(ES11) 차이점 Logical OR operation (OR 연산자) result = leftExpr || rightExpr leftExpr가 truthy 면 leftExpr, falsy 면 rightExpr를 반환 falsy : false, 0, -0, NaN, ' ', " ", undefined, null Default Parameter (기본값 매개변수) (ES6 문법) function sum(a = 0, b = 0) { return a+ b; } Default Parameter는 undefined 인 경우만 설정한 기본값 매개변수를 설정해준다. function getName(name.. Front/JavaScript 2021. 11. 1.

• 

  [Javascript] 알아두면 좋은 ES11 최신 문법 : Optional Chaining, Nullish Coalescing [Javascript] 알아두면 좋은 ES11 최신 문법 : Optional Chaining, Nullish Coalescing Optional Chaining console.log(person.job?.manager?.name); 다음과 같이 person1, person2라는 Object가 있다. const person1 = { name: 'Haenny', job: { title: 'S/W Engineer', manager: { name: 'Chris', } } }; const person2 = { name: 'Bob' } 위의 두 객체를 다음과 같은식으로 작성하면 어플리케이션이 정상적으로 작동하지 않는다. function printManager(person) { console.log(person.jo.. Front/JavaScript 2021. 10. 30.

• 

  [Javascript] 자바스크립트 코드 경량화(minify)하기, 경량화(minify) 풀기 [Javascript] 자바스크립트 코드 경량화(minify)하기, 경량화(minify) 풀기 1. 자바스크립트 코드 경량화 (minify) 하기 - minifier 사이트 접속 Minify JS and CSS online, or include the minifier in your project for on-the-fly compression. Minify JS and CSS online, or include the minifier in your project for on-the-fly compression. www.minifier.org ① JS 파일을 붙여넣기 ② JS 언어를 선택 (언어를 감지해서 자동으로 선택되기는 한다) ③ Minify 버튼 클릭 그러면 ① 박스에 들여쓰기와 엔터와 같은 공백이 .. Front/JavaScript 2021. 5. 12.

• 

  [Javascript] base64 이미지 Data → File 객체로 변환 이는.. Smart Editor를 사용하면서 부딪히게 된 난항이다.. [Javascript] Naver SmartEditor 사용하기 [Javascript] Naver SmartEditor 사용하기 게시글 작성란 등에 사용되는 Editor 중에 SmartEditor와 CKEditor를 사용해보았다. 일단 UI 화면으로는 CKEditor가 훨씬 깔끔하지만, 기능 세팅이나 옵션설정은 Smar.. haenny.tistory.com SmartEditor 를 사용하여 글자를 입력할 때 입력한 글자 수를 표출하는 부분을 구현을 했는데, SmartEditor는 이미지를 복사 붙여넣기가 가능한 것. 글자 수를 표출한 것은 사용자의 편리도 있지만, 해당 내용을 저장하는 DB 의 데이터 크기를 넘어서지 않게 하기 위함이었.. Front/JavaScript 2021. 4. 30.

• 

  [Javascript] iframe 하위 객체 접근 방법 [Javascript] iframe 하위 객체 접근 방법 보통 Document 하위 객체를 접근하기 위해서는 셀렉터 사용 혹은 자식 요소를 통해 접근한다. 자식의 자식 예를들면, class가 child2인 요소를 찾기 위해서는 다음과 같은 방법 등으로 접근할 수 있는 것이다. document.querySelector(".child2"); document.querySelector(".parent").firstElementChild.firstElementChild; 하지만 iframe 요소의 하위를 찾을 때는 위와 같이 동일한 방법이 적용되지 않기 때문에 다음과 같이 활용해야 한다. iframe 내부에 iframe 내부에 .se2_inputarea 라는 요소를 찾기 위한 방법 1. JQuery var tex.. Front/JavaScript 2021. 4. 30.