mobssie

doc : vuex.vuejs.org/kr/ 상태관련 라이브러리 VueX 모든 컴포넌트가 공유할수있는 집중식 저장소. 상태는 앱을 작동하는 원본 소스 뷰는 상태의 선언적 매핑 액션은 뷰에서 사용자 입력에 대해 반응적으로 상태를 바꾸는 방법 액션이 바뀌면 상태가 바뀌고 매핑되어있는 뷰가 바뀌는 단방향 데이터가 흐르고있다. 여러개의 컴포넌트가 있을경우, 또는 중첩되는 컴포넌트가 깊어질수록 prop가 장황해질수있음. 그래서 중앙에서 관리할수있는 전역 저장소가 있다면 이 문제를 해결 할 수 있음. 1. 상태 (State) VueX는 단일 상태 트리를 사용. mapState : 컴포넌트가 여러 저장소 상태 속성이나 getter를 사용해야 하는경우에 사용 import {mapState} from 'vuex' com..

브라우저 저장소 : 로컬스토리지, 세선스토리지, 쿠키 ▶ HTML5에서 제공하는 기능으로, 해당 도메인과 관련된 특정 데이터를 서버가 아니라 클라이언트 웹브라우저에 저장할수있는도록 제공하는 기능. ▶ 로컬스토리지는 브라우저를 닫고 다시 열어도 유지, 영구적으로 보관이 가능 ▶ 세선스토리지는 브라우저 리로딩시에는 유지되나 닫으면 유지안됨. 브라우저 컨텍스트가 다르기 때문에 브라우저가 다르면 다른 영역이 된다. ▶ 쿠키는 방문자의 정보를 컴퓨터 메모리에 저장 Web Storage와 Cookie 차이 - Cookie는 매번 서버로 전송되고, 문자열만 저장이 가능하며, 용량에 제한이 있고, 만료 일자가 존재. Web Storage는 데이터를 클라이언트에 저장만 할 뿐 서버로 전송되지는 않는다. polyfill ..

자바스크립트 기능 : 기본적인 객체와 데이터 유형으로 구분한다. 문자열, 숫자, 불리언 데이터유형은 문자열, 숫자, 불리언과 연관된 기능을 제공한다. 내장 RegExp, 날짜(Date), Math객체는 각각 정규표현식, 날짜, 필수적인 수학 연산과 같은 기본 기능을 제공 자바스크립트의 기본적인 구성 요소는 시간이 지나면서 변했다. 자바스크립트 객체(object), 원시(primitive), 리터럴(literal) 구분 자바스크립트 리털럴은 인용 문자열(String), 부동 소수점수(Number), 불리언(Boolean)과 같은 특정한 형식의 값을 나타냄. 자바스크립트 원시(primitive)는 데이터 유형의 인스턴스를 나타내며 문자열, 숫자, 불리언, null, undefined 등 다섯 가지 형식이 있..

keys(), values(), entries()를 사용할 수 있는 자료구조는 Map, Set, Array Object.keys(obj) – 객체의 키만 담은 배열을 반환합니다. Object.values(obj) – 객체의 값만 담은 배열을 반환합니다. Object.entries(obj) – [키, 값] 쌍을 담은 배열을 반환합니다. Object.keys(obj) json형태의 객체를 반복문 Object를 활용한 방법 var json = {text:'abcd', number:1234, desc:'efg'}; Object.keys(json).forEach(function(k){ console.log('키값 : '+k + ', 데이터값 : ' + json[k]); }); for in 을 활용한 방법 var ..

객체를 복사할때 Object.assign({}, state) 첫번째 인자를 빈 객체를 주고, 두번째 인자를 state를 주게되면 state의 property들이 첫번째 인자에 복제되어 첫번째 인자가 리턴된다. Object.assign({}, state, {color:'red'}) 이렇게 세번째 인자를 넣게되면, 세번째 인자가 첫번째 인자 덮어씌어져 복제된다.

www.npmjs.com/package/speed-measure-webpack-plugin speed-measure-webpack-plugin Measure + analyse the speed of your webpack loaders and plugins www.npmjs.com 일단, 체크 speed-measure-webpack-plugin 1. loader 줄이기 2. transpileOnly, experimentalWatchApi - ts-loader는 기본 옵션이 TS를 JS로 변환하는 transpile 작업과 type check 작업을 같은 스레드에서 동시에 실행. - type check는 개발자에게 편의 제공을 위한 기능이지 type이 브라우저에게 넘어갈 결과물에 까지는 영향을 주지 않기 때..

style html/css 사용 할 수 없다. StyleSheet.create 메소드를 이용해 스타일 object를 작성하여 컴포넌트에 style props를 전달. CSS .ico { ... } RN ico: { ... } * 각 스타일 속성의 구분은 ;가 아닌 ,로 한다. - 스타일 object 뒤에 다른 스타일 object의 구분 역시 ,를 사용 CSS .bigBlue { color: blue; font-weight: bold; font-size: 30px; } .red { color: red; } RN bigBlue: { color: 'blue', fontWeight: 'bold', fontSize: 30, }, red: { color: 'red', } * 스타일 속성명의 하이픈(‘-’)이 아닌 ..

JSON(JavaScript Object Notation) JSON.parse() : parse 메소드는 string 객체를 json 객체로 변환 JSON.stringify() : stringify 메소드는 json 객체를 String 객체로 변환

화면을 구성할때 스타일 내기위해 자주사용하는 자바스크립트를 정리해보려고 한다. 1. 부모의 자식요소 갯수를 구해 스타일로 분기처리 할때 - 부모에 아이디값을 셀렉 후 자식요소의 length를 구한다. - classList를 사용해 부모에 클라스를 추가해 스타일을 조건에 따라 활성화한다. var listOrder = document.getElementById('listOrder'); var nodelist = listOrder.getElementsByTagName('li').length; if(nodelist < 16){ listOrder.classList.add('few') } else{ listOrder.classList.add('many') } 2. 스크롤 헤더 sticky 효과 - 부모에 아이디값을..

.setAttribute() .setAttribute()는 선택한 요소(element)의 속성(attribute) 값을 정한다. element.setAttribute( 'attributename', 'attributevalue' ) attributename에는 속성 이름을, attributevalue에는 속성값을 넣습니다. document.getElementById( 'xyz' ).setAttribute( 'title', 'This is title' ) ▶ id 값이 xyz인 요소의 title 속성을 This is title로 정합니다. 만약 이미 속성값이 존재한다면 그 값을 지우고 새 값을 적용합니다. CODING FACTORY ▶ id 값이 abc인 요소의 href 속성값을 변경하는 예제입니다. fu..