ㅇㅅㅇ

사이트를 이용하다보면 내가 예약한 일정 혹은 미팅 안내 등을 메일로 받아 캘린더에 저장한 적이 있을 것이다. 이 기능은 많이 사용되어 실무에서 요구하는 대표적인 기능 중 하나라고 한다. 그래서 이 기능을 Nodemailer와 ics를 사용해 내 Gmail로 일정 안내 메일을 보내고 받아 캘린더에 저장해보고자 한다. 사용할 모듈 : Nodemailer, ics Nodemailer : 쉽게 이메일을 보낼 수 있도록 하는 Node.js 애플리케이션용 모듈. 유니코드 지원, 파일첨부 가능, SMTP 연결을 위한 프록시 사용 가능 등의 특징이 있다. ics : 아이캘린더(iCalendar), 인터넷 사용자들이 다른 인터넷 사용자들에게 전자 메일을 이용하여 미팅 요청과 할 일을 보내거나 .ics 확장자로 파일들을 ..

로그는 시스템을 개발하는 중에만 필요한 것이 아니라 시스템을 효과적으로 운영하기 위해서 반드시 체계적으로 로그 관리를 해야 한다. 시스템을 운영하다 보면 예기치 못한 오류가 발생할 수 있고, 때로는 치명적인 오류로 인해 시스템이 다운되는 상황도 발생할 수 있다. 그래서 개발자가 로그 관리 프로그램을 구현하는 것은 필수라 할 수 있습니다. 이번 포스팅에서는 Node.js의 winston 모듈을 사용해서 로그를 로그 레벨 및 파일로 관리하는 방법을 알아보고자 한다. 로그 기록을 위해 사용할 모듈 서론에 기재한 winston와 함께 winston-daily-rotate-file, app-root-path를 사용하고자 한다. winston : 실제 서버를 운영할 때 파악이 어렵고 서버가 종료되는 순간에 쌓여 있..

vue를 공부하면서 vue없이 작성했던 소스들을 적용하는 연습 중에 있다. 이번에는 회원가입, 배송정보 입력시 주소 찾기 및 입력에 많이 사용하는 다음주소 API를 Vue에 적용해보고자 한다. 다음주소 API도 카카오 맵처럼 js를 vue 환경에 맞게 수정해 적용할 수 있다고 한다. 공식문서에 들어가면 예시 및 사용방법을 확인할 수 있다. Daum 우편번호 서비스 우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다. postcode.map.daum.net 적용하기 공식문서에서 스크립트 소스를 가져와 public/index.html head에 추가한다. 혹은 관련 특정 페이지에 스크립트 ..

네이버 지도 api와 함께 많이 사용하는 카카오 Maps API를 vue-cli에 적용해 보려고 한다. (Vue에 적용하려는 이유는 특별히 없다. 현재 공부중인 프레임워크라서 일뿐...) 카카오 Maps API의 공식문서에는 Vue에 적용하는 방법은 따로 기재되어 있지 않지만 javascript로 적용방법이 잘 적혀 있어 Vue에 맞게 적용하면 된다. 1. 준비하기 : 내 애플리케이션 등록 및 카카오 키 발급 카카오 Maps API를 가져오기 위해서는 Javscript API가 필요한데 발급을 받아야 사용할 수 있다. 이 키를 발급받기 위해서는 카카오 계정이 필요하다. 카카오 개발자센터 접속 및 회원가입, 로그인 후 내 애플리케이션 메뉴 클릭 애플리케이션 추가하기 클릭 및 정보입력 후 저장 클릭(정보입력..

백엔드 지식이 없거나 구축하기가 번거울 때, 간단하게 서버와 연동해서 테스트를 하고자 한다면 json-server를 설치해 사용해 볼 수 있다. json-server란? 실제 배포할 서비스용(프로덕션)이 아니라 로컬에서 혼자 연습할 때 사용하기 좋은 기본적인 Rest Api의 기능은 다 가지고 있는 라이브러리이다. json-server 설치방법 npm을 이용해 설치 npm install -g json-server 데이터베이스 역할을 할 db.json 파일 생성 { "todos": [ { "id": 1, "content": "HTML", "completed": true }, { "id": 2, "content": "CSS", "completed": false }, { "id": 3, "content": "..

배열(Array)에 사용할 수 있는 내장함수 toString() : 배열을 하나의 문자열로 바꿔주는 함수 let brands = ["애플", "구글", "아마존", "마이크로소프트", "메타"]; console.log(brands.toString()); // 애플, 구글, 아마존, 마이크로소프트, 메타 join() : 피라미터로 전달된 문자가 요소 사이사이마다 삽입되어 하나의 문자로 결합 해주는 함수 let brands = ["애플", "구글", "아마존", "마이크로소프트", "메타"]; console.log(brands.join(" * ")); // 애플 * 구글 * 아마존 * 마이크로소프트 * 메타 console.log(brands.join(" ")); // 애플 구글 아마존 마이크로소프트 메타 p..

쇼핑몰에서 판매 중인 상품이나 장바구니 등의 정보 등 대부분의 웹 사이트에서 사용자나 서버에서 입력받은 정보를 처리하는 방식으로 동작하는데, 이러한 정보를 저장할 때 변수가 사용된다. 여기서 말하는 변수는 무엇이고 어떻게 선언할까? 변수란? 자바스크립트에서 변수는 데이터를 담는 그릇을 의미한다. 변수는 var, let, const 키워드를 사용하여 선언하고, let x; 할당 연산자(=)를 사용해 값을 할당한다. let x = "a";// 문자열 저장 그리고 식별자인 변수명을 사용해 변수에 저장된 값을 참조한다. let x; x = 'a'; alert(x); // 변수에 저장된 값을 보여준다. 한 줄에 변수 선언과 값 할당을 할 수 있으며, 한 번에 여러 변수를 선언할 수 있다. // 한 줄에 변수 선언..

간혹 하나의 이미지에 여러개의 링크를 담아야 할 때가 있다.(ex. 쇼핑몰 프로모션 이미지에 여러개의 링크 걸기 등) 그럴 때 가장 쉽게 할 수 있는 방법으로 image map태그가 있다. 태그 요소와 함께 이미지 맵(클릭 가능한 링크 영역)을 정의할 때 사용한다. 기본작성법 img 태그로 이미지 맵을 적용할 이미지를 불러온다. map 태그를 추가하고 name을 지정해 img 태그와 연결한다. img의 usemap과 map name가 동일해야 한다. img usemap에는 # + map name으로 작성한다. map 태그 내부에 이미지맵 영역을 설정할 area 태그를 추가로 입력한다. shape : rect(사각형) circle(원형) poly(다각형) 3가지 중 하나의 좌표 모양을 선택한다. coord..

모든 입력폼을 input type="text"으로 사용한다면 PC환경에서는 큰 차이가 못 느끼지만, 모바일에서는 작은 화면에서 제공되는 키패드를 사용하기 때문에 상황에 따라 불편을 느낄 수 있다. 이것을 해소해 주는 것이 input 태그의 type 속성이다. input 태그의 type 속성은 아래의 이미지 처럼 속성에 따라 최적화된 입력 환경으로 사용자에게 편의를 제공한다. (이미지는 안드로이드 버전) number : 숫자패드가 나온다. tel :숫자패드가 나오는데 number과 다른점이 있다면 *,+,#를 입력할 수 있는 버튼이 있다. email : 숫자+영문패드가 나온다. 하단에 .com을 입력할 수 있는 버튼도 있다. search : 입력하면 입력창 우측에 x버튼이 생기고 누르면 작성했던 내용이 지..

의미없는 태그와 css로는 시각적으로 강조하는 모양은 만들 수 있으나 검색엔진과 시각장애인에게 의미는 전달할 수 없다. 검색엔진 최적화(SEO)와 시각 장애인들이 스크린 리더기를 통해 웹 사이트를 이용하는데 도움이 될 수 있도록 명확한 정보전달을 위해 의미전달이 필요한 콘텐츠가 있다면 거기에 맞는 의미있는 태그(Semantic Tag)를 사용해야 한다. 이번 글에는 의미있는 태그(Semantic Tag) 태그에 대한 개념과 효과 텍스트에 적용할 수 있는 의미있는 태그 만 정리해본다. 의미있는 태그(Semantic Tag) 사람과 기계가 읽을 수 있는 방식으로 의미를 명확하게 설명하는 요소를 말한다. 의미있는 태그를 사용하면 아래와 같은 효과을 얻을 수 있다. 검색엔진 최적화 SEO (Search engi..