개발자.. 너란놈..

※ useRef

- 가상돔 요소가 담길 빈 참조객체
- 참조하고 있는 가상돔요소를 useRef로 만든 참조 객체와 연결
     EX) <article ref={article}></article>

- const 변수 = useRef(초기값) 
- 변수에는 useRef의 초기값을 활용해서 빈 참조객체가 생성 됨.
- 해당 객체안에는 current키 값이 자동생성 되면서 초기값이 담김
- 빈 참조객체를 원하는 가상돔 요소에 ref속성을 지정해서 참조 가능
- 참조된 가상요소는 이벤트 발생시 자유롭게 호출 가능
- useRef는 보통 이벤트 연결 시 제어해야 되는 가상돔을 참조할 때 주로 쓰임

- 사용 순서
     1. 변수에 useRef(null)을 대입해서 일단 빈 참조객체 생성
     2. 원하는 가상돔 요소에 ref={참조객체}로 연결
     3. 참조객체명.current형식으로 참조된 가상돔 요소를 자유롭게 호출

- useRef의 다른 사용 예 (useState를 쓰면 새로고침 처럼 되니까 전역변수처럼 쓰고싶으면 useRef를 써야된다는 뜻)
- component 안쪽에서 측정 값을 변경하고 싶은데 해당 값 변경시 component를 재호출 하고 싶지 않을 때
- component가 다른 state에 의해서 재호출 되더라도 특정 값을 초기화시키고 싶지 않을 때

React에서 onClick 이벤트를 처리하는 방법이다.

Javascript 처럼 데이터를 가져와서 하는 방법도 있지만 아래와 같이 사용 할 수도 있다.

function App() {
	const noArgs = (e) => {
		e.target.innerText = 'noname';
	};

	//인수로 원하는 텍스트를 전달해서 변경 가능 하도록 코드 개선
	const handleClick = (e, txt) => {
		e.target.innerText = txt;
	};

	return (
		<div className='wrap'>
			{/* 첫번째 버튼 클릭 시 클릭한 버튼의 글자값을 '버튼'으로 텍스트 변경 */}
			<button id='button1' onClick={noArgs}>
				button1
			</button>

			{/* 인수를 전달해야되는 함수를 이벤트 연결 할때는 wrapping 함수로 아래처럼 호출 */}
			<button onClick={(e) => handleClick(e, 'Hello')}>button2</button>
		</div>
	);
}

아래 EmailJs를 통하여 이메일을 JavaScript를 가지고 이메일을 보낼 수 있다.

https://www.emailjs.com/

※ 회원가입을 하기전의 이메일 아이디로 이메일이 가기 때문에 이메일을 받고 싶은 이메일로 하는 것이 좋다.

회원가입을 하고 나면 Email Service를 진행한다.

여러 플랫폼으로 사용 할 수 있는데 필자는 Gmail을 사용하였다. 

아래와 같이 Name과 Service_ID를 입력 하는데 필요한 정보니 입력을 해준다.

이제 메일 서비스를 하기위한 기본적인 세팅이 끝났고, 이메일을 받을 때 어떤 형식으로 받을지 세팅을 아래에서 해줄 수 있다.

아래의 이메일 형식으로 데이터를 받아서 유동적으로 보내 줄 수가 있고, {{}}는 변수명으로 나중에 직접 작업하는 HomePage에 변수명을 일치 시키면 그대로 적혀서 들어온다.

여기까지 EmailJS의 세팅은 완료가 되었고 이제 아래 사이트에서 기본적인 EmailJs를 Script에 어떻게 넣는지 알수있는 사이트이다. 

EmailJS을 어떻게 사용하는지 알려주는 사이트이다.

Getting Started | EmailJS

아래 링크는 Form을 어떻게 입력하는지 알려주는 사이트 링크이다.

Creating a contact form | EmailJS

아래의 Head 쪽에 Script을 입력해줍니다.

위쪽의 빨간 박스는 나의 public key를 입력하는 란 입니다.

아래쪽의 빨간 박스는 기능을 동작하는 EmailJS의 함수들 입니다. 

public key는 아래에서 볼 수 있습니다.

Form 요소는 Script를 가져온 링크 조금 아래에 있습니다.

name은 Email Templates에서 입력한 {{}} 여기의 변수명이라고 생각하시고 작업을 해주시면 됩니다.

Send(Submit) 버튼을 클릭 하게 되면 이메일을 보낼 수 있고 제대로 보내지면 Console창에 Success! 라고 뜹니다.

1. 구글맵스에서 원하는 위치값을 찍어서 좌표값 복사
2. 카카오맵의 클릭한 위치 마커찍기 샘플예제의 직접해보기 섹션에 해당 위치값을 붙여넣기
3. 해당 테스트화면의 정밀하게 원하는 지점을 찍고 해당 코드값을 활용

https://apis.map.kakao.com/web/sample/addMapClickEventWithMarker/

API에서 실제 데이터를 갱신하는 날짜 + 시간으로 데이터를 가져왔는데 우리나라 시간이 아닌 국제적인 표준 시간으로 날짜를 가져와서 골치가 아팠던 적이 있습니다. Coordinated Universal Time (UTC)

"2023-02-07 04:38:11"

위와 같은 데이터가 있을경우 그대로 표기 하였을 때 아래와 같은 결과물을 얻을 수 있습니다.

var vTime = new Date("2023-02-07 22:38:11");
console.log (GetTokenTime); //Tue Feb 07 2023 22:38:11 GMT+0900 (한국 표준시)

실제 시간 그대로 세팅이 되서 표기가 되기 때문에 한국 표준시로 세팅을 하려면 아래와 같이 포멧팅을 변경 해주어야 합니다.

var vTime = new Date("2023-02-07T22:38:11Z");
console.log(vTime) //Wed Feb 08 2023 07:38:11 GMT+0900 (한국 표준시)

TimeZone을 세팅을 해두면 현재 세팅되어있는 표준 시로 자동으로 날짜가 더해지니 이와같이 사용하면 될 것 같습니다.

오랜만에 또 개발 관련된 블로그를 적습니다.

현재 기준으로 저번달 첫일 , 다음달 말일을 구해서 세팅해야 되서 아래와 같이 구현하였습니다.

하나의 함수로 사용하기 위해 파라미터는 '현재날짜' , '이전 , 다음'을 넣어두었습니다

코드는 아래와 같이 사용 하면 됩니다.

//vDate : yyyymmdd or yyyy-mm-dd / vType : Prev(이전달) , Next(다음달)
function fnSetPrevNextDate(vDate, vType) {

    var vValue = vDate;
    var vValue_Num = vValue.replace(/[^0-9]/g, "");

    if (_fnToNull(vValue_Num) == "") {
        _fnAlertMsg("날짜를 입력 해 주세요.");
        return false;
    }

    //8자리가 아닌 경우 false
    if (vValue_Num.length != 8) {
        _fnAlertMsg("날짜를 20200101 or 2020-01-01 형식으로 입력 해 주세요.");
        return false;
    }

    var vYYYY = vValue_Num.substring(0, 4);
    var vMM = vValue_Num.substring(4, 6);
    var vDD = vValue_Num.substring(6, 8);

    var d = new Date(vMM + "/" + vDD + "/" + vYYYY);
    var monthOfYear = d.getMonth();
    
    if (vType == "Prev") {
        d.setMonth(monthOfYear - 1);
        vValue = d.getFullYear() + "-" + _pad(d.getMonth() + 1, 2) + "-" + "01";
    }
    else if (vType == "Next") {
        d.setMonth(monthOfYear + 1);
        var vDate = new Date(d.getFullYear(), d.getMonth() + 1, 0);
        vValue = vDate.getFullYear() + "-" + _pad(vDate.getMonth() + 1, 2) + "-" + _pad(vDate.getDate(), "2");
    }    

    return vValue;
}

//숫자 width만큼 앞에 0 붙혀주는 함수 EX) widht = 2일떄 1은 01로 찍힘
function _pad(n, width) {
    n = n + '';
    return n.length >= width ? n : new Array(width - n.length + 1).join('0') + n;
}

InnerHTML , append 등등

새롭게 데이터를 받아서 그려진 조회 리스트 및 데이터의 HTML의 데이터를 가져오기는 쉽지 않은거 같습니다.

Height 길이를 가져와야되는 부분이 생겼는데 해당 부분 가져오는 스크립트 입니다.

$("생성자").prop('scrollHeight');

오랜만에 삽질 덕분에 1시간 정도 허비 한거 같습니다.. ㅎㅎ;;