Song Minu

넉스트3를 하나하나 알아보기 위해 최근 설치했다. 알아보기 위해 설치했는데 컴포넌트나 디자인 같은 것들을 하나하나 만들기엔 너무 많은 시간이 소요될 것 같아 디자인 프레임워크를 찾아봤다. https://nuxt.com/modules?category=UI Modules · Nuxt Comprehensive UI toolkit for Vue.js and Nuxt.js that empowers you to build amazing user interfaces with ease. With Vunix, you can leverage the power of popular utility-first CSS frameworks like Tailwind CSS, Unocss, WindiCss, or use your own..

프로젝트 설치 npx nuxi init 공식문서에 나와 있는 설치 방법으로 설치를 하면 이렇게 생성이 된다. nuxt2에서는 설치 시 기본적인 디렉터리들을 생성해줬었는데 nuxt3는 없다. 처음 설치하고 봤을 때 조금 당황... 공식문서를 봐보면 layouts 규칙 적용 방법이 여러가지로 보이는데 nuxt2와 같은 형식으로 빠르게 적용 방법만 작성 layouts, pages 디렉터리 생성 먼저 app.vue는 삭제해버린 후 layouts, pages 디렉터리를 추가한다. layouts layouts 디렉터리 안에 기본 레이아웃 용 파일로 default.vue와 테스트를 위해 sub.vue 파일을 생성 후 아래와 같이 소스코드 작성 //default.vue default.vue //sub.vue sub.v..

요즘 대부분의 라이브러리들은 타입스크립트를 기반으로 많이 만들어져 공유되고 있다. 그래서 타입스크립트 환경에서 해당 라이브러리들을 사용할 때는 별문제 없이 사용한다. 하지만, 자바스크립트로만 만들어져 있는 라이브러리들의 경우 타입스크립트 환경에서 사용할 때 애먹는 경우도 생각보다 있다. 타입스크립트 환경의 프로젝트에서 타입 정의가 되어 있지 않은 라이브러리를 사용할 경우 볼 수 있는 에러 중 하나이다. 위 설명 처럼 @types를 통해 설치하면 되는 경우도 있지만 없는 경우도 있다. 없을 경우 본인이 스스로 타입 정의를 해줘야 한다. 몇 번 겪고서 상당히 불편함을 느꼈었는데, 오늘 강의를 듣던 중 알게 된 사이트가 있어서 공유할 겸 블로그 글을 작성하게 되었다. https://www.typescriptl..

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

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

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

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

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

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

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