자바스크립트
lodash
import _ from 'lodash'
_.uniq([2,1,2]); // [2,1]
중복되는 내용들을 제거할수 있습니다 .
저는 보통 set을 이용해서 중복되는 내용들을 제거후에 다시 배열에 할당해서 그 배열을 고차함수를 돌리는 작업들을 종종했습니다
const newArrayFromApi = [ ...new Set(list.map(item => item.category) ]
이렇게 작성하면 list라는 배열에 들어있는 category항목중 중복되는 값을 모두 제거한 새로운 배열이 탄생하게 됩니다 .
이것말고도 유용한 메소드들이 많이있는것 같습니다 .
로컬스토리지와 세션스토리지
로컬스트리지는 사이트를 닫아도 데이터가 날아가지않고 , 세션스토리지는 날아갑니다 .
localStorage.setItem('key' , 'value');
첫번째 값은 키값을 , 두번째 값은 밸류값을 저장하는데 중요한점은 둘다 string타입이어야 합니다 .
따라서 로컬스토리지에 배열이나 객체의 값을 저장하고싶을때에는 string타입으로 변환 후에 저장을 하고
get을할때 다시 parse를 통해 배열이나 객체의 값으로 되돌리고 사용합니다 .
const myArray =[1,2,3,4,5]
localStorage.setItem('key' , JSON.stringify(myArray))
localStroage.getItem(JSON.parse('key'));
url Querty String
주소?속성=값&속성=값&속성=값
https://www.omdbapi.com/?apikey=7035c50c&s=frozen
https://www.omdbapi.com => 주소
? 후에 속성 = 값
?apikey(속성) = 7035c50c&s (값) & (다른속성과 값을 대입할 예정 ) s(속성) = frozen(값)
(공부하기 위한 url로 실제 동작하지 않습니다 )
axios
api를 fetch해주는 라이브러리 . 항상 사용중입니다 .
axios.get(end point).then(res => console.log(res))
res 에 각종 데이터들이 있고 .을 통해서 접근하여 데이터를 뿌리거나 조작하거나 기타등등의 작업을 할 수 있습니다 .
저는 보통 데이터를 잡아오는 함수를 하나 만든후에 , 이벤트 리스너에서 DOMcontentLoaded 타입에서 그 함수를 돌려줌으로써 데이터를 가져오고 , 이벤트 리스너에서 체이닝을 실행하여 개발을 했습니다 .
정규표현식
정규 표현식이란 문자열을 검색하고 대체하는데 사용 가능한 일종의 형식 언어(패턴)입니다 .
간단한 문자 검색부터 이메일 , 패스워드 검사 등의 복잡한 문자 일치 기능 등을 정규식 패턴으로 빠르게 수행 할 수 있습니다 .
단 정규식 패턴이 수행 내용 과 매치가 잘 안되어 가독성이 좀 떨어집니다 .
정규표현식은 크게 다음과 같은 역할이 있습니다 .
1. 문자 검색 (search)
2. 문자 대체 (replace)
3. 문자 추출 (extract)
자바스크립트는 직접 빌드된 정규표현식을 지원하는 언어 중 하나입니다.
생성자 함수 방식
RegExp 생성자 함수를 호출하여 사용 할 수 있습니다 .
const regexp1 = new RegExp("^abc");
리터럴 방식
정규표현식은 /로 감싸진 패턴을 리터럴로 사용합니다 .
const regexp1 = /^abc/;
보통의 경우에는 리터럴 방식이 훨씬 편리합니다 .
재할당
사용중인 정규식을 재할당할 수 있습니다.
단 상수가 아닌 변수로 선언해야 합니다 .
let regexp1 = /ipsum/g;
regexp1 = /lorem/i;
자바스크립트에는 정규표현식에서 제공하는 다양한 속성(Properties)이 있습니다.
속성설명
| flags | 플래그(String) 반환, /^abc/gi.flags |
| source | 표현식(String) 반환, /^abc/gi.source |
| global | 플래그 g 여부(Boolean) 반환, /^abc/gi.global |
| ignoreCase | 플래그 i 여부(Boolean) 반환 |
| multiline | 플래그 m 여부(Boolean) 반환 |
| sticky | 플래그 y 여부(Boolean) 반환 |
| unicode | 플래그 u 여부(Boolean) 반환 |
아직 잘 모르겠습니다 정규식은 .. 좀어렵네요 공부를 다시해야할거같습니다