기록

Vite, TypeScript, Vue.js, Vueuse 를 사용하는 프로젝트에서 로컬 빌드 시 발생한 타입에러transforming (704) node_modules/.pnpm/axios@1.8.4/node_modules/axios/lib/helpers/isAbsoluteURL.jsnode_modules/.pnpm/@vueuse+core@13.0.0_vue@3.5.13_typescript@5.8.3_/node_modules/@vueuse/core/index.d.mts:627:15 - error TS2304: Cannot find name 'BluetoothLEScanFilter'.627 filters?: BluetoothLEScanFilter[] | undefined; ..

Nuxt.js 프로젝트를 배포하던 중, 정확히는 배포를 하기 위해 "빌드"를 하는 중에 EC2 CPU 사용량이 급증하여, 서버가 다운되는 현상이 발생했다. 기존의 배포 방식:Github Actions 워크플로에서 main/develop 브랜치에 커밋이 푸시됨EC2 서버에 접속(SSH가 아닌 SSM 방식으로 - 도입하기 전에 참조한 포스팅 -)깃 코드를 풀 받고, pnpm install --frozen-lockfile, pnpm run build빌드된 결과물을 pm2로 실행하여 반영문제 발생:EC2 모니터링을 통해 확인했을 때, 빌드를 하는 중에 CPU 사용량이 급증하는 것이 확인되었다.이것이 정확한 원인인지는 알 수 없으나, 급하게 반영할 코드가 생겨서 연속적으로 배포(빌드)할 경우, 더 급상승하다가 서..

1. 간단하게 먼저 pm2로 배포하기1.1 생성한 ec2에 key.pem으로 원격 접속ssh -i "pwa-test-key.pem" ubuntu@123.**.**.** 1.2 sudo su로 관리자 권한으로 변경하고, node.js 설치(참고로 nvm을 사용한 방식과 아래와 같이 apt 패키지 관리자를 사용하는 방식이 있는데, 하나의 Node.js 버전을 사용할 예정이라서 아래 방식을 사용하였다. nvm을 사용하면 상황에 따라 여러 버전의 Node.js를 사용하기 편리하다.)apt-get update &&apt-get install -y ca-certificates curl gnupg &&mkdir -p /etc/apt/keyrings &&curl -fsSL https://deb.nodesource.co..

사이드프로젝트에 무료 도메인을 연결하려고 검색하다가 내 도메인 한국 라는 사이트를 알게 되었다.EC2 인스턴스를 생성하여 이 도메인을 연결하는 전체 과정을 간략히 메모. 1. AWS EC2 인스턴스 시작1.1 이름 입력1.2 AMI는 가벼운 Ubuntu를 선택.1.3 인스턴스 유형프리티어 사용 중이니까 기본 t2.micro 선택1.4 키 페어 - 새 키 페어 생성 - RSA - .pem 생성(나중에 원격으로 접속할 때 사용하기 위함)1.5 네트워크 설정 - 편집인바운드 보안 그룹 규칙에 ssh가 기본으로 선택돼 있는데, "보안 그룹 규칙 추가"를 눌러 http 80도 추가해준다. http로 이 인스턴스에 접근할 수 있도록 하기 위함. 1.6 스토리지 구성프리티어는 최대 30GB의 스토리지를 사용할 수 있..

유저의 스크롤 위치를 감지하여 다음 페이지를 불러오는 무한스크롤 기능을 구현하였다.목록을 불러오는 컴포넌트는 이러하다. 위와 같이 ScrollObserver 컴포넌트를 사용하고 있다. ScrollObserver 내의 특정 엘리먼트가 화면에 나타나면, emit을 통해 이벤트를 발생시켜서 loadMoreList 메서드를 호출하기 위함이다.ScrollObserver 컴포넌트는 이렇게 구성하였다.

Primevue autoImport: false로 설정한 이후로,(이슈) primevue의 toast 컴포넌트를 사용하려고 할 때 ToastService를 불러오지 못하여 직접 플러그인 파일을 생성하여 nuxt.config.ts에 적용하였다.// /plugins/primevue-toast.tsimport Toast from "primevue/toast";import ToastService from "primevue/toastservice";export default defineNuxtPlugin((nuxtApp) => { nuxtApp.vueApp.use(ToastService); nuxtApp.vueApp.component("pp-toast", Toast);}); 그런데 직접 등록한 ToastSer..

방송통신대학교 컴퓨터과학과 UNIX시스템 수업을 수강하면서 Rocky Linux를 설치 할 일이 있었다.나중에 필요하면 찾아볼 수 있게 간단하게 절차를 정리하려고 한다.Rocky Linux를 설치하려면 DVD나 USB 메모리 스틱에 설치하는 방법 외에 가상머신에 설치하는 방법이 있다. 간편한 가상머신 방법을 사용하고자 한다. 그러기 위해 가상머신 소프트웨어를 설치하고 이곳에 리눅스를 설치한다. 그러면 게스트 운영체제가 리눅스 운영체제가 된다. 1. VM 설치하기다음 포스팅을 참조하여 UTM이라는 가상머신을 설치할 수 있다.참조: https://ssunw.tistory.com/entry/M1-mac-%EA%B0%80%EC%83%81%ED%99%98%EA%B2%BD%EC%97%90-Linux-%EC%84%A..

4. Next.js + Supabase를 사용하여 로그인 기능 추가하기이전 포스팅에 구독과 푸시 알림 테스트는 마쳤으니, 이제 본격적으로 사용자별 알림 기능을 만들기 위해 로그인을 붙인다.1) email, password 인풋 2개로 간단하게 만들고, 2) 로그인 또는 회원가입 버튼을 선택할 수 있게 한다.supabase 공식문서 설명을 따라 진행하였다. 4.1 테이블 세팅supabase에서 제공하는 방식(ex. supabase.auth.signUp() 등)으로 회원가입을 할 경우,유저의 정보가 auth.users에 저장되는데, 그것을 내가 만든 public.user에서도 관리할 수 있다. 1) 외래키 설정유저 정보를 담는 users 테이블을 public에 새로 만들고, users의 id를 supaba..

(ios, mac 기준으로 작성)1. iPhone - 설정 - Safari - 맨 하단 "고급" - 웹 인스펙터 On2. Mac과 iPhone을 연결하고 두 기기 모두 Safari를 켠다.3. Mac Safari 상단 메뉴 - 개발자용 - 현재 연결한 기기 연결 클릭4. iPhone에서 신뢰 여부를 묻는 팝업이 나타남. 신뢰 선택.5. Mac Safari - 개발자용 - 현재 연결된 기기 - JSContexts에 대한 웹 인스펙터 자동으로 보기6. iPhone Safari로 로그를 확인하려는 웹 사이트를 실행하면, Mac Safari에 해당 웹 사이트를 선택할 수 있으며 이를 통해 로그 확인이 가능.모바일에서만 발생하는 현상에 대한 디버깅을 pc로 할 수 있어서 간편하고,콘솔로그에 나오는 사이트로 손쉽게..

사이드 프로젝트의 로그인 기능을 아직 구현하지 않은 상황이었다.간단하게 Supabase를 사용하여 기능 테스트하기 위해 Supabase 서비스 역할 키(Service Role Key)를 사용하여 RLS(Row Level Security)정책을 일시적으로 비활성화 한 기록테스트 할 table의 Enable Row Level Security (RLS) 을 체크해제 하는 방법도 있고, 더 간단하지만, 다른 방법도 알게 되어 정리함. Next.js + Supabase0. Supabase 프로젝트 및 테스트 테이블 생성1. Project Settings > API > Project API Keys > service_role을 .env에 가져온다.NEXT_PUBLIC_SUPABASE_URL=https://...NE..