개발야 기하하자

오늘은 HTML5 Canvas 라이브러리인 Fabric js 를 알아보겠습니다.

canvas 는 HTML 페이지에서 사각형 영역이며 HTML page, <canvas> 요소로 정의됩니다.

쉽게 말해서 그림판이라고 생각하면 됩니다.

안에 애니메이션을 넣을 수도 있고 이미지를 크게하거나 작게하거나 위치조절등 이러한 것들을 할 수 있습니다.

fabricjs.com/

function yyyymmdd(timestamp) {
                var d = new Date(timestamp * 1000), // Convert the passed timestamp to milliseconds
                yyyy = d.getFullYear(),
                mm = ('0' + (d.getMonth() + 1)).slice(-2),  // Months are zero based. Add leading 0.
                dd = ('0' + d.getDate()).slice(-2),         // Add leading 0.
                hh = d.getHours(),
                h = hh,
                min = ('0' + d.getMinutes()).slice(-2),     // Add leading 0.
                ampm = 'AM',
                time;
                /*
                if (hh > 12) {
                    h = hh - 12;
                    ampm = 'PM';
                } else if (hh === 12) {
                    h = 12;
                    ampm = 'PM';
                } else if (hh == 0) {
                    h = 12;
                }
                */ // 이부분은 AM, PM으로 나누고싶을 때 추가하면된다.
                
               time = yyyy + '.' +  + mm + '.' + dd + ' ' + h + ':' + min 
                    
                return time;
            }

yyyymmdd함수에 timestamp값을 넣어주면 날짜로 retrun 된다.

이런식으로 나온다.

map?

map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.

const testArr = [ 1, 2, 3, 4];

const mapTest = testArr.map( x => x + 2);

console.log(mapTest); // Array [3, 4, 5, 6];

 이런예제로 사용할 수 있습니다.

구문

arr.map(callback(currentValue[, index[, array]])[, thisArg])

매개변수는 

callback새로운 배열 요소를 생성하는 함수. 다음 세 가지 인수를 가집니다.

currentValue처리할 현재 요소.

index Optional처리할 현재 요소의 인덱스.

array Optionalmap()을 호출한 배열.

thisArg Optionalcallback을 실행할 때 this로 사용되는 값.

이렇게 있습니다.

보통 저의 경우 currentValue, key 값을 많이 사용합니다.

특히 API 호출을 할 경우 많이 사용하는데

const test = [ 
    {
      testimg: img,
      name: "테스트1"
    },
    {
      testimg: img,
      name: "테스트2"
    },
    {
      testimg: img,
      name: "테스트3"
    },
    {
      testimg: img,
      name: "테스트4"
    },
    {
      testimg: img,
      name: "테스트5"
    },

  ] 
  // 실제로는 API 를 받아 올 값 지금은 목업데이터를 넣어둠)
  
  return( 
  	<View>
    	{test.map((data, index) => { 
    	<TouchableOpacity style={styles.myGroupStyle} key={index}>
    		<View>
    			<Image source={data.testimg}/>
    		</View>
    		<View>
    			<Text>{data.name}</Text>
    		</View>
    	</TouchableOpacity>
    	)
    	})}
    </View>
   )
   
         

이런식으로 react-native에서 사용합니다.

api 호출 후 return 값을 받아 data를 적용할 때 많이 쓰는 것 같습니다!

그리고 저는 map을 사용할 때 test.map((data, index) => 여기 부분에서 test라는 Array를 data로 key값은 index로 해서 사용합니다. 참고로 key값을 안넣어주면 오류가 나니까 넣는 것을 추천드립니다.

// 이메일 체크 정규식
function isEmail(asValue) {

var regExp = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;

return regExp.test(asValue); // 형식에 맞는 경우 true 리턴

}

// 핸드폰 번호 체크 정규식

function isCelluar(asValue) {

var regExp = /^01(?:0|1|[6-9])-(?:\d{3}|\d{4})-\d{4}$/;

return regExp.test(asValue); // 형식에 맞는 경우 true 리턴

}



//비밀번호 체크 정규식

function isJobPassword(asValue) {

var regExp = /^(?=.*\d)(?=.*[a-zA-Z])[0-9a-zA-Z]{8,10}$/; //  8 ~ 10자 영문, 숫자 조합

return regExp.test(asValue); // 형식에 맞는 경우 true 리턴

}

// 이메일 체크 정규식

function isEmail(asValue) {

var regExp = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;

return regExp.test(asValue); // 형식에 맞는 경우 true 리턴

}

// 핸드폰 번호 체크 정규식

function isCelluar(asValue) {

var regExp = /^01(?:0|1|[6-9])-(?:\d{3}|\d{4})-\d{4}$/;

return regExp.test(asValue); // 형식에 맞는 경우 true 리턴

}

비밀번호 체크 정규식

function isJobPassword(asValue) {

var regExp = /^(?=.*\d)(?=.*[a-zA-Z])[0-9a-zA-Z]{8,10}$/; //  8 ~ 10자 영문, 숫자 조합

return regExp.test(asValue); // 형식에 맞는 경우 true 리턴

}

자주 쓰이게 될 것 같아서 공유해봅니다.

저 같은 경우는

출처: https://suyou.tistory.com/150 [수유산장]