🔤 Language/🟨 JavaScript

JS. 정규표현식 패턴(표현)

패턴(표현) ^ab / ab$ 줄 시작에 있는 ab와 일치 / 줄 끝에 있는 ab와 일치 let str = ` 010-1234-5678 kurt5451@naver.com https://www.omdbapi.com/?apikey=7035c60c&s=frozen The quick brown fox jumps over the lazy dog. abbcccdddd d hxyp http://localhost:1234 동해물과_백두산이 마르고 닳도록 하느님이 보우하사 ` console.log( str.match(/d$/gm) // ['d', 'd'] ) console.log( str.match(/^k/gm) // ['k'] ) $(달러) 기호는 한 줄마다 문장 끝에 d가 있는 것을 찾는 패턴이다. d가 끝에 있는 ..

JS. 정규표현식 플래그(옵션)

플래그(flags) 플래그 설명 g 모든 문자 일치(global) i 영어 대소문자를 구분 않고 일치 (ignore case) m 여러 줄 일치 (multi line) u 유니코드(unicode) y lastIndex 속성으로 지정된 인덱스에서만 1회 일치(sticky) 플래그 실습 g(global) 대소문자를 구별하면서 문자가 일치하는게 몇 개 있는지 배열의 형식으로 확인하는 것이다. let str = ` 010-1234-5678 kurt5451@naver.com https://www.omdbapi.com/?apikey=7035c60c&s=frozen The quick brown fox jumps over the lazy dog. abbcccdddd ` const regexp = /the/g conso..

JS. 정규표현식 메소드(method)

자바스크립트 메소드 정규표현식을 다루는 다양한 메소드이다. 메소드 문법 설명 test 정규식.test(문자열) 일치 여부(Boolean) 반환 match 문자열.match(정규식) 일치하는 문자의 배열(Array) 반환 replace 문자열.replace(정규식, 대체문자) 일치하는 문자를 대체 search 문자열.search(정규식) 일치하는 문자열의 인덱스(Number) 반환 exec 정규식.exec(문자열) 일치하는 하나의 정보(Array) 반환 split 문자열.split(정규식) 일치하는 문자열을 분할하여 배열(Array)로 반환 toString 생성자_정규식.toString() 생성자 함수 방식의 정규식을 리터럴 방식의 문자열로 반환 자바스크립트 메소드 실습 자바스크립트 메소드를 실습을 통하여..

JS. 정규식 생성

정규식 정규식은 생성자 함수 방식과 리터럴(Literal) 방식 두 가지 방식으로 작성할 수 있다. 생성자 함수 방식 RegExp 생성자 함수를 호출하여 사용할 수 있다. new RegExp('표현', '옵션') new RegExp('[a-z]', 'gi') 생성자 함수 방식의 예시를 살펴보면 아래의 코드와 같다. const str = ` 010-1234-5678 kurt5451@naver.com https://www.omdbapi.com/?apikey=7035c60c&s=frozen The quick brown fox jumps over the lazy dog. abbcccdddd ` const regexp = new RegExp('the', 'gi') console.log(str.match(regex..

JS. 정규표현식(Regex)

정규표현식 문자열을 검색하고 대체하는데 사용가능한 일종의 형식 언어 간단한 문자 검색부터 이메일, 패스워드 검사 등의 복잡한 문자 일치 기능 등을 정규식 패턴으로 수행할 수 있다. 정규표현식은 크게 다음과 같은 역할을 수행한다. 문자 검색 문자 대체 문자 추출 정규표현식 실습 npm init -y 터미널에 위 코드를 입력하고 package.json을 생성한다. npm i parcel-bundler -D parcel-bundler를 개발자용으로 설치한다. 설치하면 .cache, dist 파일과 package-lock.json 파일이 생길 것이다. npm run dev 터미널에 위 코드를 입력하기 전에 package.json 파일을 변경해주어야 한다. "scripts": { "dev": "parcel ind..

JS. OMDB API

OMDB API 아래 사이트에 들어가서 영화 데이터를 요청하고 받아오는 작업을 할 것이다. http://www.omdbapi.com/ OMDb API - The Open Movie Database www.omdbapi.com Query String 주소?속성=값&속성=값&속성=값 주소 ? apiKey = 키 값 & S = 영화 제목 E.g. 겨울왕국 영화 데이터 요청하기 http://www.omdbapi.com/?apikey=######&s=frozen axios Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다. 아래 사이트에 들어가서 axios 설치를 완료한다. https://github.com/axios/axios GitHub - axi..

JS. Storange

Storange 웹 스토리지에는 로컬 스토리지 (local Storage)와 세션 스토리지 (session Storage)가 있다. 이 두 스토리지의 차이점은 데이터가 어떤 범위 내에서 얼마나 오래 보존되느냐에 있다. 로컬 스토리지는 웹페이지의 세션이 끝나더라도 데이터가 유지된다. 세션 스토리지는 웹페이지의 세션이 끝날 때 저장된 데이터가 지워지는 반면에, Local Storange 로컬 스토리지는 브라우저에 반영구적으로 데이터를 저장하며, 브라우저를 종료해도 데이터가 유지된다. 브라우저 자체에 반영구적으로 데이터가 유지되지만, 도메인 (domain)이 다른 경우에는 로컬 스토리지에 접근할 수 없다. 즉, 같은 도메인일 경우 로컬 스토리지에 접근할 수 있다. Session Storange 세션 스토리지는..

JS. JSON

JSON JSON(JavaScript Object Notation)은 속성-값 쌍( attribute–value pairs and array data types (or any other serializable value)) 또는 "키-값 쌍"으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷이다. 비동기 브라우저/서버 통신 (AJAX)을 위해, 넓게는 XML(AJAX가 사용)을 대체하는 주요 데이터 포맷이다. 특히, 인터넷에서 자료를 주고 받을 때 그 자료를 표현하는 방법으로 알려져 있다. SON의 공식 인터넷 미디어 타입은 application/json이며, JSON의 파일 확장자는 .json이다. 자료형 수(Number) 문자열(String): 0개..

JS. Lodash 사용법

Lodash 공식 문서 https://lodash.com/ Lodash _.defaults({ 'a': 1 }, { 'a': 3, 'b': 2 });_.partition([1, 2, 3, 4], n => n % 2);DownloadLodash is released under the MIT license & supports modern environments. Review the build differences & pick one that’s right for you.InstallationIn lodash.com documentation을 클릭하면, Lodash의 여러가지 문법에 대해서 확인할 수 있는 문서가 있다. Lodash 유용한 메소드 uniqBy(a, b) 배열 데이터 내에 있는 중복 데이터를 제..

JS. 데이터 실습 가져오기, 내보내기

내보내기 변수나 함수, 클래스를 선언할 때 맨 앞에 export를 붙이면 내보내기가 가능하다. 가져오기 무언갈 가져오고 싶다면 이에 대한 목록을 만들어 import 를 붙이면 가져오기가 가능하다. import as / export as as를 사용하면 이름을 바꿔서 모듈을 가져올 수 있다. 별칭을 정하는 것이다. export default 내보내고자 하는 개체 앞에 export default 를 붙여주면, '해당 모듈엔 개체가 하나만 있다'는 사실을 나타낼 수 있다. export named 데이터의 이름을 반드시 지정해야 하는 통로, 이름을 지정한 통로는 여러 개의 데이터를 함께 내보내기를 할 수 있다. 모듈(Module) JavaScript 파일로 어디선가 사용할 수 있는 구조로 만든 파일을 모듈(Mo..