전체 글
![](https://tistory1.daumcdn.net/tistory/4446718/skin/images/no-image.jpg)
주소?속성=값&속성=값&속성=값
![](https://tistory1.daumcdn.net/tistory/4446718/skin/images/no-image.jpg)
http://www.omdbapi.com OMDb API - The Open Movie Database www.omdbapi.com API Key 발급 후 사용 import axios from 'axios' function fetchMovies() { axios .get('https://www.omdbapi.com/?apikey=7035c60c&s=frozen') .then((response) => { console.log(response) }) }
![](https://tistory1.daumcdn.net/tistory/4446718/skin/images/no-image.jpg)
localStorage : 데이터 만료되지않음 sessionStorage : 페이지를 닫을 때 데이터 사라짐 localStorage.setItem('myCat', 'Tom') localStorage.getItem('myCat') localStorage.removeItem('myCat') // 객체 저장하고 가져오기 localStorage.setItem('user', JSON.stringify(user)) JSON.parse(localStorage.getItem('user'))
![](https://tistory1.daumcdn.net/tistory/4446718/skin/images/no-image.jpg)
.uniq() : 중복 데이터 삭제 .uniqBy(arr, id) : arr 배열에 id를 기준으로 중복 데이터 삭제 .unionBy(arr1, arr2, id) : id를 기준으로 중복없이 arr1, arr2 합체 .find() : 배열에서 조건에 맞는 값 찾아 반환 .findIndex() : 배열에서 조건에 맞는 값 찾아 인덱스 반환 .remove() : 조건에 맞는 값 삭제 const usersA = [{ userId: 1, name: 'a' }, { userId: 2, name: 'b' } ] const usersB = [{ userId: 1, name: 'a' }, { userId: 3, name: 'c' } ] const usersC = usersA.concat(usersB) import _ ..
![](https://tistory1.daumcdn.net/tistory/4446718/skin/images/no-image.jpg)
데이터 불변성 원시 데이터 : String, Number, Boolean, undefined, null 참조 데이터 : Object, Array, Function const user = { id: 123, emails: ['abc@gmail.com'] } 얕은 복사 : 내부의 또 다른 참조 데이터는 복사 안됨 // assign() 이용 const copyUser = Object.assign({}, user) // 전개연산자 이용 const copyUser = {...user} 깊은 복사 : 참조 데이터까지 복사 // lodash 이용 import _ from lodash const copyUser = _.cloneDeep(user)
![](https://tistory1.daumcdn.net/tistory/4446718/skin/images/no-image.jpg)
.find() : 주어진 판별 함수를 만족하는 첫번째 요소의 값을 반환 .concat(arr2) : 두 개의 배열을 병합 (원본 데이터는 수정되지 않음) .forEach() : 배열의 개수만큼 반복 실행 .map() : 배열의 개수만큼 반복 실행하고 새로운 배열을 만들어 반환 .filter() : 특정 기준에 맞는 요소를 배열로 반환 .find() : 조건에 맞는 요소를 찾아 반환 .findIndex() : 조건에 맞는 요소를 찾아 인덱스를 반환 .includes() : 특정 데이터 포함되어있는지 확인 .push() : 배열 맨 뒤에 데이터 추가 .unshift() : 배열 맨 앞에 데이터 추가 .reverse() : 배열 뒤집기 (원본 수정됨) .splice(n, k, i) : 인덱스 n부터 k개의 데..
![](https://tistory1.daumcdn.net/tistory/4446718/skin/images/no-image.jpg)
정규표현식 테스트 사이트 https://regexr.com/ RegExr: Learn, Build, & Test RegEx RegExr is an online tool to learn, build, & test Regular Expressions (RegEx / RegExp). regexr.com 정규식 생성 // 생성자 new RegExp('표현', '옵션') new RegExp('[a-z]', 'gi') // 리터럴 /표현/옵션 /[a-z]/gi 정규식을 다루는 메소드 정규식.exec(문자열) : 일치하는 하나의 정보(Array) 반환 정규식.test(문자열) : 일치 여부(Boolean) 반환 문자열.match(정규식) : 일치하는 문자열의 배열(Array) 반환 문자열.search(정규식) : 일..
![](https://tistory1.daumcdn.net/tistory/4446718/skin/images/no-image.jpg)
1. npm init -y 2. npm install parcel-bundler -D 3. main.js 파일 생성 4. index.html 파일 생성 5. index.html 파일에 main.js 연결 6. package.json 파일 scripts 변경 "scripts": { "dev": "parcel index.html", "build": "parcel build index.html" }, 7. npm run dex * parcel-bundler 버전이 맞지 않을 경우 npm i parcel-bundler@(원하는 버전) -D * git에 올릴때는 폴더 gitignore .cache/ dist/ node_modules/