TopCode

📝정규표현식이란? 정규 표현식은 문자열에 나타는 특정 문자 조합과 대응시키기 위해 사용되는 패턴입니다. 자바스크립트에서, 정규 표현식 또한 객체입니다. 이 패턴들은 RegExp의 exec 메소드와 test 메소드 그리고 String의 match메소드 , replace메소드 , search메소드 , split 메소드와 함께 쓰입니다 . 정규 표현식 - JavaScript | MDN 정규 표현식은 문자열에 나타는 특정 문자 조합과 대응시키기 위해 사용되는 패턴입니다. 자바스크립트에서, 정규 표현식 또한 객체입니다. 이 패턴들은 RegExp의 exec 메소드와 test 메소드 , developer.mozilla.org 정규표현식, 이렇게 시작하자! 매일 쓰는 것도, 가독성이 좋은 것도 아니지만, 모르면 안되는..

📒 OMDB API란? OMDb API는 영화 정보를 얻기 위한 RESTful 웹 서비스이며 사이트의 모든 콘텐츠와 이미지는 사용자가 제공하고 유지 관리합니다. 📒 사용방법 Usage Send all data requests to : http://www.omdbapi.com/?apikey=[yourkey]& Poster API requests: http://img.omdbapi.com/?apikey=[yourkey]& 📒 Query String Query : 검색 String : 문자 데이터 주소?속성=값&속성=값&속성=값 📒 Axios로 가져오기 Promise based HTTP client for the browser and node.js ⇒ HTTP요청을 처리해주는 JS 패키지 OMDb API - ..

💼 localStorage란? localStorage 읽기 전용 속성을 사용하면 Document 출처의 Storage 객체에 접근할 수 있습니다. 저장한 데이터는 브라우저 세션 간에 공유됩니다. Application ⇒ Storage localStorage : 데이터를 반영구적으로 사용가능 sessionStorage: 페이지를 닫을 때 데이터가 지워짐. Window.localStorage - Web API | MDN localStorage 읽기 전용 속성을 사용하면 Document 출처의 Storage 객체에 접근할 수 있습니다. 저장한 데이터는 브라우저 세션 간에 공유됩니다. developer.mozilla.org localStorage.setItem('myCat', 'Tom'); const cat =..

🧀 JSON이란? JSON (제이슨[1], JavaScript Object Notation)은 속성-값 쌍 ( attribute–value pairs and array data types (or any other serializable value)) 또는 "키-값 쌍"으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷이다. 속성-값 쌍 브라우저/서버통신 (AJAX) 서버와의 통신에서 데이터를 주고 받는 포맷 JSON의 공식 미디어 타입은 applicaiton/json 이며 JSON의 확장자는 .json https://ko.wikipedia.org/wiki/JSON JSON - 위키백과, 우리 모두의 백과사전 JSON(제이슨[1], JavaScript O..

📒 Lodash 사용법 Lodash Documentation _(value) source Creates a lodash object which wraps value to enable implicit method chain sequences. Methods that operate on and return arrays, collections, and functions can be chained together. Methods that retrieve a single value or may return a primiti lodash.com _.uniqBy(array) 중복데이터 제거. concat, _.uniqBy, _unionBy import _ from 'lodash' const usersA = [ { u..

🎁 JavaScript의 데이터 연결 Import : 가져오기 Default export : 내보내기1, 이름 지정 필요 X 하나의 파일에서 하나의 데이터만 내보낼 수 있음. Named export : 내보내기2 , 이름 지정 ⇒ import 할때 {} 사용 여러 데이터를 내보낼 수 있음. // main.js import {random, user} from './getRandom' // getRandom.js // getRandom.js // 이름이 필요한 통로 // 여러 데이터를 내보낼 수 있음. export function random() { return Math.floor(Math.random() * 10) } export const user = { name: 'HEROPY', age: 85 } 모..

✏️ 얕은 복사 Shallow Copy const copyUser = Object.assign({}, user) // 복사 : .assign(대상객체, 출처객체) ✏️ 깊은 복사 Deep Copy const copyUser = {...user} // 전개 연산자를 사용하여 복사. 깊은 복사 : lodash 사용 (.cloneDeep) Lodash Documentation _(value) source Creates a lodash object which wraps value to enable implicit method chain sequences. Methods that operate on and return arrays, collections, and functions can be chained tog..

🍋 JS 불변성 데이터 불변성 (Immutability) 원시형 데이터 : 불변, (String, Number, Boolean, undefined, null) 참조형 데이터 : 가변, (Object, Array, Function) 원시 값 - 용어 사전 | MDN JavaScript에서 원시 값(primitive, 또는 원시 자료형)이란 객체가 아니면서 메서드도 가지지 않는 데이터입니다. 원시 값에는 7종류, string, number (en-US), bigint (en-US), boolean, undefined, symbol, 그리고 null이 developer.mozilla.org JavaScript에서 원시 값(primitive, 또는 원시 자료형)이란 객체가 아니면서 메서드도 가지지 않는 데이터입..

📒 JS 전개 구문 전개 구문을 사용하면 배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수 (함수로 호출할 경우) 또는 요소 (배열 리터럴의 경우)로 확장하여, 0개 이상의 키-값의 쌍으로 객체로 확장시킬 수 있습니다. 전개 구문 | MDN 전개 구문을 사용하면 배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수 (함수로 호출할 경우) 또는 요소 (배열 리터럴의 경우)로 확장하여, 0개 이상의 키-값의 쌍으로 객체로 확장시 developer.mozilla.org // 전개 연산자 (Spread) const fruits = ['Apple', 'Banana', 'Cherry', 'Orange'] // 배열 데이터 console.log(fruits) // ... : 전개 연산자 : 하나의 ..

📒 JS 구조 분해할당 (Destructuring assignment) 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다. 구조 분해 할당 | MDN 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다. developer.mozilla.org 📒 비구조화 할당 const user = { name: 'Heropy', age: 85, email: 'thesecon@gmail.com', address: 'USA' } // 객체 데이터는 이름으로 구조분해. // 기본값이 비어있다면 지정해줄 수 있음. address = "Korea" // name이라는 변수를..

📒 JS 객체(Object) prototype이 붙어있지 않은 메소드는 정적 메소드(정적 static) Object.assign(대상객체, 하나 이상의 출처 객체..) : 열거할 수 있는 하나 이상의 출처 객체로부터 대상객체로 속성을 복사할 때 사용합니다. 대상객체를 반환합니다. 두 객체를 병합해서 새로운 객체 반환. 출처객체 내용이 대상객체에 덮어씌워짐. 출처객체 → 대상객체. Object.assign(대상객체, 출처객체) https://developer.mozilla.org/ko/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Object Object | MDN Object 생성자는 객체 래퍼(wrapper)를 생성합니다. developer.mozill..

✏️ JS 배열(Array) - 1 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array Array | MDN JavaScript Array 전역 객체는 배열을 생성할 때 사용하는 리스트 형태의 고수준 객체입니다. developer.mozilla.org JS의 배열의 길이와 요소의 자료형은 고정되어 있지 않습니다. 따라서 밀집도가 보장되지 않습니다. 목적에 맞지 않는다면 형식화 배열(typed array)을 사용하는 것을 고려해보세요. // 배열 // 제로베이스. // 인덱스 : 배열 내 순서 // element(요소), item : 배열 내 요소 const numbers = [1, 2, 3, 4] const..

🍋 JS 숫자 데이터 toFixed() : 괄호 안에 숫자만큼의 소수점 뒷자리까지 문자로 바꿈 parseInt() : 문자열을 정수로 변환 parseFloat() : 문자열을 실수로 변환(소수점 단위 포함) const pi = 3.14159265358979 console.log(pi) const str = pi.toFixed(2) // 소수점 뒷자리까지 문자로 바꿈 console.log(str) console.log(typeof str) // 전역함수 // setTimeout, setInterval, clearTimeout, clearInterval const integer = parseInt(str) // 문자열을 정수로 변환 const float = parseFloat(str) // 문자열을 실수로 ..

🎃 JS 문자데이터 문자 데이터 종류 String: "", '', `` Number Boolean: true, false undefined null Array: [] Object: {} 🎃 String - JavaScript/MDN https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String String - JavaScript | MDN String 전역 객체는 문자열(문자의 나열)의 생성자입니다. developer.mozilla.org 리터럴 : '' {} [] 기호를 통해서 데이터를 손쉽게 만드는 방법 브라켓([ ]) 표기법을 사용하여 문자에 접근하는 경우 , 이러한 프로퍼티들에 새로운 값을 할당하거나 삭제할 ..

🧀 1. 생성자 함수(prototype) Javascript에서는 객체를 상속하기 위하여 프로토타입이라는 방식을 사용합니다. 프로토타입 체인에서 한 객체의 메소드와 속성들이 다른 객체로 복사되는 것이 아님을 재차 언급합니다. 체인(-)을 타고 올라가며 접근할 뿐입니다. 같은 내용의 메소드가 반복되면 클래스를 활용! const heropy = { firstName: 'Heropy', // 속성 혹은 멤버 lastName: 'Park', getFullName: function () { // 메소드 return `${this.firstName} ${this.lastName}` // this : 현재 객체를 지칭 } } console.log(heropy) console.log(heropy.getFullName(..

🍯 조건문 if, else import random from './getRandom' // 조건문 (If statement) // console.log(random()) const a = random() if (a === 0) { console.log('a is 0') } else if (a === 2) { // if 조건이 false일때 넘어옴. console.log('a is 2') } else if (a === 4) { // 맞으면 나머지 무시. console.log('a is 4') } else { console.log('rest...') } 🍯 조건문 Switch 조건문 (Switch statement) 깔끔해보이지만 수직으로 길어짐. 값이 하나로 딱 떨어질 때 사용하면 효율적. import r..

🍋 ECMA Script 개요 자바스크립트 국제 표준화 기구 2015년도에 6버전이 나오면서 JS의 전성기가 시작됨. 클래스와 모듈같은 복잡한 응용 프로그램을 작성하기 위한 새로운 문법이 추가 프로젝트가 어떤 버전을 적용하는지 확인하기 최신버전에서 구버전에서도 구동될 수 있도록 해주기도 함. 'JAVA' 와는 다른 새로운 문법. 자바와 직접적인 관계가 없음. https://ko.wikipedia.org/wiki/ECMA%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8 ECMA스크립트 - 위키백과, 우리 모두의 백과사전 ECMA스크립트(ECMAScript, 또는 ES[1])란, Ecma International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 ..