개발자.. 너란놈..

아래 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/

SASS란?

Sass: Syntactically Awesome Style Sheets의 약자로 CSS를 만들 때 좀 더 편리하게 쓸 수 있게 만들어주는 CSS 전처리기 언어 이다.

SASS 설치를 하기 위해서는 Node.js를 설치 하여야 한다.

Node.js 설치 주소

https://nodejs.org/ko

※보통은 안정성이 있는 LTS 버전을 사용하고 신규 버전은 새로운 것들이 추가되어 안정성이 있는 LTS 버전 보다는 안정성이 떨어져서 LTS 버전을 다운로드 받는 것을 추천한다.

node.js를 다운로드 받고 '다음'을 눌러서 설치를 완료하고 나면 '명령 프롬포트' 에서 정상 설치가 되었는지 확인 할 수 있다.

위와 같이 Node가 설치 되면 'npm' 을 사용하여 SASS를 설치 할 수 있습니다.

npm install sass -g

설치가 완료되고 나면 아래와 같이 VS code를 통해서 SASS / SCSS를 사용 할 수 있습니다.

1. VS CODE에서 터미널을 열고 (Ctrl + `)

2. 터미널에 명령어를 입력 합니다.

3. 명령어가 제대로 동작하면 scss 스타일에서 코딩 하는 것을 바로 CSS 전처리기인 SASS가 css로 변환 해줍니다.

VS CODE를 사용하면서 유용한 확장 프로그램을 아래와 같이 정리 하려고 한다.

※추후 다시 세팅을 하기 위한 메모

[ VS CODE 설치 링크 ]

https://code.visualstudio.com/

[ 확장 프로그램 ]

auto rename tag : 여는 태그 변경 시 닫는 태그도 변경됨
community material Theme : VS CODE 테마 추가
ES7 React/Redux/GraphQL/React-Natvie snippets : React할 때 컴포넌트 만들 때 자동으로 만들어짐
ES7 + React/Redux/React-Native snippets : React할 때 컴포넌트 만들 때 자동으로 만들어짐
ESLint : Javascript 잘못 쓸 때 수정 시켜 줌
html tag wrapper : 드래그 후 (컨트롤 + i) 누르면 div로 감싸짐. (auto rename tag와 같이 사용하면 좋음)
indent - rainbow : 들여쓰기 태그 열고 닫고 하는 걸 색상별로 정렬 되어있음.
Material Theme : VS code 테마
Material Theme Icons : VS code 테마 아이콘
Prettier - Code formatter : 코드 이쁘게 정리 하는 것
Tailwind CSS IntelliSense : react 할 때 class 및 코드화 시켜서 바로바로 사용 할 수 있게 쓰는것
vscode-icon : VS code 테마 아이콘
vscdoe-styled-components : react 할때 자동완성 쓸 수 있다.
Live Server : vs code 아래 go Live 생겨서 바로 볼 수 있음 

[VS Code] 확장 프로그램 설치 이후 Setting.json 

{
  "editor.wordWrap": "on",
  "editor.fontFamily": "D2Coding ligature",
  "editor.fontLigatures": true,
  "editor.mouseWheelZoom": true,
  "editor.lineNumbers": "on",
  "editor.minimap.enabled": false,
  "editor.colorDecorators": true,
  "editor.codeLens": false,
  "liveServer.settings.donotShowInfoMsg": true,
  "workbench.iconTheme": "vscode-icons",
  "vsicons.dontShowNewVersionMessage": true,
  "liveServer.settings.CustomBrowser": "chrome",
  "liveServer.settings.donotVerifyTags": true,
  "editor.tabSize": 2,
  "prettier.tabWidth": 2,
  "prettier.useTabs": true,
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "javascript.updateImportsOnFileMove.enabled": "always",
  "prettier.vueIndentScriptAndStyle": true,
  "prettier.jsxSingleQuote": true,
  "prettier.singleQuote": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "prettier.quoteProps": "consistent",
  "editor.codeActionsOnSave": {},
  "editor.formatOnSave": true,
  "workbench.startupEditor": "none",
  "prettier.printWidth": 100,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "html",
    "vue",
    "css"
  ],
  "workbench.colorTheme": "Material Theme Palenight High Contrast",
  "window.zoomLevel": 1
}

[VS code] 사용하기 유용한 명령어 정리

GUI 늘리기 : Ctrl 누른 상태에서 + -

텍스트 늘리고 줄이기 : Ctrl + 마우스 휠

터미널 단축키 : Ctrl + `

[VS Code] HTML 입력 시 자동으로 여러개를 만들 수 있는 명령어 모음

html:5 - html5 기본 문법을 자동으로 생성 해줌

.CLASS명 - class명이 입력된 div 태그를 만들어준다.

#ID명 - ID명이 입력된 div 태그를 만들어준다.

.CLASS*숫자 - 숫자만큼 CLASS 태그를 넣어준다.

시멘틱태그 - 시멘틱 태그의 HTML 태그를 자동으로 만들어준다.

시멘틱태그>시멘틱태그 - 부모 시멘틱 태그 안에 자식 시멘틱 태그를 만들어준다.

A[href=''] - A태그의 href를 입력해서 태그를 만들어준다.

[VS Code] CMD를 이용한 Vs code 실행 (폴더 삽입 추가)

1. 폴더를 만들고 싶은 경로로 가서 폴더를 생성한다.

 mkdir 폴더명

2. 새로 생성된 폴더명으로 들어간다.

 cd 신규 생성 폴더명

3. 아래 명령어를 치면 해당 폴더가 열린 vs code가 열리게 된다.

 code .

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시간 정도 허비 한거 같습니다.. ㅎㅎ;;

매번 SMTP를 25번 , 587번으로만 보내다가 465 Port는 보내지지 않았었는데

해당 아래 소스로 465번 포트도 보내지는 것을 확인했다.

아래 소스로 이메일 전송 로직을 만들었다.

[HttpPost]
public void SendEmail_PORT465(HttpFileCollectionBase files, string strPath, string strSubject, string strBody)
{
    System.Web.Mail.MailMessage msg = new System.Web.Mail.MailMessage();
    msg.Subject = strSubject;

    msg.Body = strBody;
    msg.BodyFormat = System.Web.Mail.MailFormat.Html;
    msg.BodyEncoding = System.Text.Encoding.UTF8;

    msg.From = "From";
    msg.To = "To";


    msg.Fields.Add("http://schemas.microsoft.com/cdo/configuration/smtpserver", "Host");
    msg.Fields.Add("http://schemas.microsoft.com/cdo/configuration/smtpserverport", "465");
    msg.Fields.Add("http://schemas.microsoft.com/cdo/configuration/sendusing", "2");

    msg.Fields.Add("http://schemas.microsoft.com/cdo/configuration/smtpauthenticate", "1");
    //User name
    msg.Fields.Add("http://schemas.microsoft.com/cdo/configuration/sendusername", "smtp ID");
    //Password
    msg.Fields.Add("http://schemas.microsoft.com/cdo/configuration/sendpassword", "smtp PW");
    msg.Fields.Add("http://schemas.microsoft.com/cdo/configuration/smtpusessl", "true");

    System.Web.Mail.SmtpMail.SmtpServer = "smtp Host";
    System.Web.Mail.SmtpMail.Send(msg);


}