javascript26

• 

  [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] 웹(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.

• 

  [Web] 파일업로드 시 404 에러 (Current request is not of type ) [Web] 파일업로드 시 404 에러 (Current request is not of type ) 파일업로드 기능 구현 시 발생한 에러 Current request is not of type [org.springframework.web.multipart.MultipartHttpServletRequest]: SecurityContextHolderAwareRequestWrapper url 주소와 post type 등을 모두 확인했음에도 안되는 경우 확인해야하는 부분 Spring context-common.xml pom.xml commons-fileupload commons-fileupload 1.3.3 commons-io commons-io 2.5 Spring Boot globals.properties sp.. JVM/Spring 2021. 12. 9.

• 

  [JavaScript] 웹브라우저 동작원리 (Stack, Queue, Event Loop) [JavaScript] 웹브라우저 동작원리 (Stack, Queue, Event Loop) 웹 브라우저 동작원리를 알면 자바스크립트 코드를 더 매끄럽게 구현할 수 있다. 웹 브라우저 동작원리? 우리가 작성하는 자바스크립트는 브라우저가 실행을 시켜주는 것이다. 쉽게 말해 HTML, CSS, JavaScript를 해석해주는 엔진이 브라우저인 것이다. 예제를 통해 살펴보자. 다음과 같은 코드를 실행하려고 할 때 자바스크립트는 첫 번째와 세 번째 코드를 실행한 후 1초 쉬고, 두 번째 코드를 실행한다. 간혹 자바스크립트는 병렬처리다 라고 말하는 경우가 있는데, 멍청이라고 해주자. 예제 결과 왜 그런것인지 브라우저 동작원리를 통해 살펴보자 웹 브라우저는 자바스크립트를 실행시켜주는 엔진이다. 즉, 브라우저가 코드를.. 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] 자바스크립트 SNS 간편 로그인 API 구현하기 [Javascript] 자바스크립트 SNS 간편 로그인 API 구현하기 - 내 애플리케이션 클릭 - 애플리케이션 추가하기 - 플랫폼 설정하기 - web 플랫폼 등록 (일단 로컬 개발 도메인으로 설정) - 카카오 로그인 Redirect URI 설정 페이지 https://developers.kakao.com/tool/demo/login/login - Kakao Developers 카카오 로그인 데모에서 다음 코드를 복사 테스트가 가능 Front/API 2021. 5. 4.

• 

  [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.

• 

  [Javascript] Array.prototype.every( ) - 배열의 반복메서드 : break 문 활용하고 싶다? [Javascript] Array.prototype.every( ) - 배열의 반복메서드 : break문 활용하고 싶다? 자바스크립트 배열에서 제공하는 반복 메서드 forEach, some, every - every를 한 번 살펴보자. 보통 반복문을 사용할 때는 forEach를 사용하는데, 원하는 요소를 찾은 뒤 더 이상 for문을 돌고 싶지 않은 경우 break문 을 사용하려 해 본 적이 있을 것이다. forEach 에서는 break 를 제공하지 않을 뿐더러 break 문과 같은 코드를 구현하려면 try - catch를 사용하는 등 코드의 길이도 구조도 복잡해진다. 이 때 사용하기 좋은 every 메서드를 살펴보자 Array.prototype.every() callback 함수가 false를 반환하는 .. Front/JavaScript 2021. 2. 9.