자바스크립트 끄적끄적 (23) 썸네일형 리스트형 자바스크립트 - 정규표현식 정리 언젠가 꼭 정리해야 겠다 생각했던.. 정규표현식을 정리할려고 한다.. 딱대라 정규야.. 정규표현식이란? 문자열 패턴을 표현하기 위한 도구입니다. 근데 누누히 말하지만 정규표현식은 해독하기가 어려움.. 또 여러 구글링을 통해 내용을 찾아봐도 당채 이해가 안가는게 문제임. 해서 나는 쉽게 이해되는 원리? 규칙을 소개하고자한다. 정규표현식의 문법이나 활용 또는 공식은 간단하게 복붙에서 붙이겠다. 내용은 아래와 같다. 정규 표현식의 용어들정규 표현식에서 사용되는 기호를 Meta문자라고 표현한다. 표현식에서 내부적으로 특정 의미를 가지는 문자를 말하며 간단하게 정리하면 아래의 표와 같다. 표현식 의미 ^x 문자열의 시작을 표현하며 x 문자로 시작됨을 의미한다. x$ 문자열의 종료를 표현하며 x 문자로 종료됨을 의.. 자바스크립트 - 제네레이터 제너레이터 ECMAScript 6부터 추가된 개념. 일반 함수는 하나의 값(혹은 0개의 값)만을 반환합니다. 하지만 제너레이터(generator)를 사용하면 여러 개의 값을 필요에 따라 하나씩 반환(yield)할 수 있습니다. 제너레이터와 이터러블 객체를 함께 사용하면 손쉽게 데이터 스트림을 만들 수 있습니다. 제너레이터 함수 제너레이터를 만들려면 '제너레이터 함수’라 불리는 특별한 문법 구조, function*이 필요합니다. 예시: function* generateSequence() { yield 1; yield 2; return 3; } 제너레이터 함수는 일반 함수와 동작 방식이 다릅니다. 제너레이터 함수를 호출하면 코드가 실행되지 않고, 대신 실행을 처리하는 특별 객체, '제너레이터 객체’가 반환됩.. 경로 관련 문제가 나올 때: Error: Cannot find module 'wish' 아니 분명 wish을 전역적으로 설치 했고, package-json을 보면 제대로 추가 된거 같고? 하는데 왜 못찾는거야!! 해당 test js 파일 var wish = require('wish'); function checkHand(hand) { if(hand[0]==='2-H' && hand[1]==='3-C' && hand[2]==='4-D' && hand[3]==='5-H' && hand[4]==='2-C'){ return 'pair'; }else{ return 'three of a kind'; } }; describe('checkHand()', function() { it('handles pairs', function() { var result = checkHand(['2-H', '3-C', '.. undefined? undeclared? null? 의 차이 + html태그 doc? Undefined (미정의 변수) 접근 가능한 스코프에 변수가 선언되었으나 현재 아무런 값도 할당되지 않은 상태. var test; console.log(test); //undefined console.log(typeof test); //undefined 타입이 정의되지 않았음을 알 수 있다. => 면접에서 undefined를 undeclared처럼 설명하고 ㅋㅋ Undeclared (미선언 변수) 접근 가능한 스코프에 변수 선언조차 되어있지 않은 상태. console.log(test2); // 오류를 뱉어낸다. /* Uncaught ReferenceError: test2 is not defined at :1:13 */ // 이것의 타입을 살펴보면 undefined console.log(typeof te.. 자바스크립트 프로토타입이란? 상속(inheritance) 상속(inheritance)이란 새로운 클래스에서 기존 클래스의 모든 프로퍼티와 메소드를 사용할 수 있는 것을 의미합니다. 상속을 통해 새로운 프로그램의 요구에 맞게 기존 클래스를 수정하여 재사용할 수 있습니다. 또한, 클래스 간의 종속 관계를 형성함으로써 객체의 관계를 조직화할 수 있는 장점이 있습니다. 따라서 이러한 상속은 추상화, 캡슐화와 더불어 객체 지향 프로그래밍을 구성하는 중요한 특징 중 하나가 됩니다. 하지만 C#이나 C++과 같은 클래스 기반(class-based)의 객체 지향 언어와는 달리 자바스크립트는 프로토타입 기반(prototype-based)의 객체 지향 언어입니다. 프로토타입 기반이기 때문에 상속의 개념이 클래스 기반의 객체 지향 언어와는 약간 다릅니.. SPA 기반 사이트 만들어 보기 with. 바닐라 자바스크립트 #2 이제는 콜핵함수를 리턴해주는게 아니라. 각각 path에 따라 엡 페이지를 나타나게 해줄 생각입니다. 우선 해당 웹페이지 컴포넌트를 만들어 봅시다. 추상화 컴포넌트(있는말 아님) c++ virtual처럼 윤곽이 되는 컴포넌트를 만듭니다. ./path/AbstractView.js export default class { constructor(params) { this.params = params; } // 페이지 타이틀 setTitle(title) { document.title = title; } // 뿌려질 Html async getHtml() { return ""; } } ./path/Dashboard.js import AbstractView from "./AbstractView.js"; export d.. SPA 기반 사이트 만들어 보기 with. 바닐라 자바스크립트 #1 바닐라 자바스크립트를 이용하여 spa형태의 웹페이지를 만들어 보려고 한다. 도브라는 유튜브 강의를 참고하여 만들었다. 1. 모든 웹의 근간이 되는 싱글 웹 페이지를 작성한다. 자기소개 http 요청 맛보기 기타 2. 기타 라이브러리 사용을 관리하는 pakage.json 세팅과 경로 지정에 이용할 exprsss 설치 합니다. - npm init -y // npm init 를 할때 생성될때 질문하는 질문에 대해여 모두 yes하겠다는 뜻 - npm install express 3. express.js를 이용하여 서브를 라우팅 할거다. express를 이용하면 url을 통해겨 경로 지정할 수 있다. 이번 페이지 설계에서는 http요쳥을 해서 restapi설계는 하지 않을 거지만 이런식으로 한다는 느낌을 주는 형.. 헬퍼 함수란? Helper Function (헬퍼 함수) 다른 함수 안에서 특정 기능을 하고 있는 함수를 헬퍼 함수라고 함 function helper(rows, columns) { return rows * columns; } function general(rows, columns){ return monitorCount(rows, columns) * 200; } const totalCost = general(5, 4); console.log(totalCost); general함수 안에 들어있는 helper라는 함수가 헬퍼 함수임 이전 1 2 3 다음
