전체 글 157

[NodeJS] nodemailer로 이메일 보내기

옛날에 개발을 시작한지 얼마 안 됐을 때, 회사 내부에 자바로 만들어진 이메일 관련된 기능을 수정을 해본 적이 있었는데 참 어려웠었다. 최근 npm 이것저것을 둘러보다가 문득 그때 생각이 나서 노드로 이메일을 보낼 수 있는 npm이 있지 않을까 하고 찾아봤는데 역시나 있었다. 사용법도 매우 간단하다. 작업할 프로젝트 생성(생략해도 됨) npm init CommonJS 모듈 방식이 아니라 ECMAScript 모듈 방식으로 작업하고 싶어서 프로젝트를 생성 후 작업했습니다. 꼭 이렇게 할 필요는 없습니다. package.json에 "type": "module" 추가 패키지 설치 npm install nodemailer dotenv dotenv는 코드 작성 내용 중에 커밋하면 안 되는 항목이 있어서 설치 .en..

Node.js 2023.04.19

[토이프로젝트] PUBG your.stat

길고 긴 작업 끝에 드디어 끝났다. 완벽하게 끝낸 건 아니지만 너무 오랜 시간 작업을 했고, 다른 하고 싶은 것들을 계속 못하고 있어서 이 정도로 마무리하기로 했다. 해결할 수 없어 포기한 부분도 있고, 해결하는 데 애먹은 부분들도 있고, 처음 사용해 보는 타입스크립트와 정보가 부족해 공식문서에 최대한 의지한 파이어베이스, PUBG API 그리고 vue3 플러그 인들을 쓰면서 많은 경험을 한 것 같아 만들면서 많은 도움이 된 것 같다. 이 프로젝트를 만든 이유와, 개발환경, 기술 스택, 구현된 화면 캡쳐 및 설명, 배포된 사이트 주소 등의 내용은 아래 깃허브 README에 모두 작성해 두었다. https://github.com/smw0807/pubg_your.stat GitHub - smw0807/pub..

ETC 2023.03.24

[VueJS] Vue3 CompositionAPI에서 Props 사용(+TypeScript)

vue3에서 compositionAPI 방식으로 props를 사용하는 방법이 좀 다양하다. 사용할 때마다 자꾸 헷갈려서 작성하게 됐다... 자세한 설명은 공식문서에 있으니 본문 하단에 링크를 첨부하고 종류와 소스로만 간단하게 작성할 생각이다. 첫 번째로 optionsAPI방식과 유사한 방식으로 이런 방법이 있다. defineProps의 경우 defineEmits와 같이 별도로 Import 할 필요 없고 바로 사용이 가능하다. 두 번째 방법으로는 순수 타입으로 props를 정의하는 방법으로 좀 더 간결하게 작성이 가능하다. 세 번째로는 interface를 이용한 props 정의하는 방법이다. 하지만 첫 번째 방법을 쓰기엔 compositionsAPI를 쓰는 것 같지도 않고, 타입스크립트를 쓰는 것 같지 않..

VueJS 2023.03.02

[VueJS] Vite에 NuxtJS의 layouts, pages 규칙 적용해보기

Nuxt를 사용하면서 제공되는 기능들 중에 마음에 들었던 기능은 layouts와 pages 디렉터리의 기능이었다. pages안에 생성된 디렉터리와 파일명에 맞춰 자동으로 라우트 경로를 만들어 줘서 편리했고, 각 페이지 파일마다 보여줄 레이아웃을 지정해 줘서 기본 화면들에선 메뉴가 보이다 특정화면에선 메뉴가 없는 다른 레이아웃을 보여줄 수 있어 편리했다. pages의 자동 라우트 경로 생성 기능은 사람마다 호불호는 좀 있는 것 같았다. 위 예시로 pages/vuetify/vuetify1.vue가 http://localhost:5000/vuetify/vuetify1로 자동으로 페이지 경로가 생성된다. 그리고 pages/login.vue의 경우는 layouts의 login.vue 파일로 레이아웃을 잡아놔서 로..

VueJS/Vite 2023.02.06

[VueJS] Firebase 구글 로그인(Vite, Vue3, TS)

1. 파이어베이스 프로젝트 생성 https://console.firebase.google.com/u/0/?hl=ko 로그인 - Google 계정 이메일 또는 휴대전화 accounts.google.com 여기에 접속해서 사용할 프로젝트를 추가한다. 여기까지 다 되면 사용준비는 거의 다 끝이다. 2. 파이어베이스 프로젝트 설정 위 생성이 끝나면 메인화면에 아래와 같이 5개의 아이콘이 있다. 우선 웹만 사용할거라 아이콘 5개 중 3번째 아이콘 웹을 선택한다. 앱 닉네임을 입력한다. 난 그냥 프로젝트와 동일한 이름으로 입력했고, 호스팅 설정은 체크하지 않았다. 앱 등록 버튼을 클릭하면 아래와 같이 출력된다. npm과 script로 사용할 때 사용할 수 있는 방법을 알려준다. 여기선 npm으로 사용해서 만들 예정..

VueJS/Vite 2023.01.24

2022년을 마치며

작년보다 1년이 더 빠르게 지나간 느낌이고, 올해 나에게 있어 큰 이슈가 있다면 퇴사인 것 같다. 첫 회사에서 5년 7개월이라는 시간을 보냈다. 회사 사람들이 좋아서 오래다닐 수 있었던 것 같고, 첫 회사이기도 해서 새로운 회사와 새로운 동료들과 일을 해보고 싶어 퇴사를 결심하게 됐다. 특히 회사에서 vue.js를 쓰게 되면서 재미도 있었고 여기서 한 것과 vue.js를 쓰는 다른 회사에 가서도 내가 얼마나 할 수 있었는지도 궁금했다 그리고 다른 곳은 어떻게 사용하는지 알고 싶었다. 이직 준비하며서 여러 일도 있었고, 올해를 보내면서 내 깃허브 레파지토리 중에 포크가 조금 생긴 신기한 경험도 했다. 1. 이직 이직에 관해선 https://minu0807.tistory.com/143 이 글의 마지막 부분에..

ETC 2022.12.31

[VueJS] vue-timeago3 typescript 환경에서 사용하기

vue-timeago3는 현재 타입스크립트를 사용할 수 있도록 처리되어 있지 않다. 이전 글에서 작성한 방법대로 import 후 사용해도 아마 되긴 할 텐데, 선언한 곳에 빨간 줄이 생기고 확인해보면 아래 사진과 같은 문구를 확인할 수 있을 것이다. 그래서 npm run dev로 실행은 되지만 빌드는 되지 않는다. 해결 방법은 위 문구에서 마지막 문장을 해주면 된다. declare module 'vue-timeago3'; 을(를) 포함하는 새 선언 (.d.ts) 파일 추가 먼저 프로젝트 최상위 위치에 @types 디렉터리를 생성한다. 그리고 그 안에 선언 파일을 추가할 모듈명과 똑같은 디렉터리를 생성하고 index.d.ts 파일을 생성한다. 모듈명이 vue-timeago3 였기 때문에 똑같이 만들어 준다..

VueJS 2022.12.25

[VueJS] Vue3 vue-timeago3 사용해보기

글 예시로 작성한 소스 및 프로젝트는 Vite, Vue3와 디자인 프레임워크 퀘이사를 사용하였습니다. 먼저 예제 화면 각 이미지 하단 캡션 글자가 vue-timeago3를 이용해 보여주었다. 사용방법은 매우 간단하다. # 모듈 설치 npm i vue-timeago # 한글 표시를 위한 모듈 설치 npm i date-fns 먼저 이렇게 2개를 설치. main.js를 열어서 아래 소스를 추가한다. import timeago from 'vue-timeago3'; app.use(timeago); 이러면 준비가 끝난다. 사용하고자 하는 컴포넌트를 열어서 코드를 작성 이게 끝이다. 데이터의 날짜도 new Date()를 이용해 값을 셋팅해도 되고, 위 소스에서 aDay2~6처럼 string으로 그냥 타이핑해도 된다...

VueJS 2022.12.24

NHN FORWARD 22 후기

10월 말쯤, 어디서 보고 신청을 했었는지 기억이 안 나는데 아마 핸드폰으로 인터넷 돌아다니다 광고가 뜬 걸 보고 신청했던 것 같다. 이런 기술 컨퍼런스를 한 번도 안 가봐서 경험해보고 싶어 신청을 했었다. 신청하면 추첨을 통해 당첨된 사람만 참가할 수 있다는데 신청해놓고 까먹고 있다가 11월 15일에 참가가 확정되었다는 이메일을 받고 생각이 났었다. 일정은 09:00 ~ 10:00 등록 10:00 ~ 10:40 키노트 11:00 ~ 11:40 세션1 11:40 ~ 13:00 점심시간 13:00 ~ 13:40 세션2 14:00 ~ 14:40 세션3 15:00 ~ 15:40 세션4 16:00 ~ 16:40 세션5 17:00 ~ 17:40 세션6 11시부턴 강연장 같은 곳이 총 7 트랙이 있고, 각 트랙별로..

ETC 2022.11.24

PUBG API 사용기

현재 친구들과 저녁 즈음엔 배틀그라운드를 많이 하고 있다. 그러다 보니 dak.gg와 op.gg를 자주 사용하고 있다. 양쪽 다 사용해보니 "이런 정보도 보여줬으면 좋겠는데...", "여긴 이게 없네?", "오 여긴 이것도 있네?" 등등의 생각이 들었었다. 그래서 아 그럼 내가 한 번 내 입맛에 맞게 만들어보면 어떨까? 하는 생각으로 시작했다. 기술 스택은 Vite, Vue3(compositionAPI), TypeScript, Pinia, Element+ 로 시작했고 https://developer.pubg.com/ Official PUBG API Start building your own website today using official PUBG data. developer.pubg.com 여기서 A..

ETC 2022.11.07