빵 입니다.

회사 홈페이지 SEO 개선을 하면서 성능에 대해 관심이 많아졌다.이미지를 어떻게 로드해서 어떻게 보여줄지도 큰 관심거리다. 태그의 srcset, sizes 속성을 이용해 기기 해상도나 뷰포트 크기에 따라 적절한 이미지를 선택해서 로딩할 수 있다.구글링해봤는데 정리가 잘 된 자료가 있었고, 아래에 요약해서 정리했다. 더 자세히 알고 싶다면 원본글을 보시는 걸 추천합니다~~~ 📌 srcset브라우저의 뷰포트 너비나 디스플레이 해상도에 대한 반응형 이미지 소스를 정의// 사용 예시📍 언제 사용할까 1. 브라우저 뷰포트 너비에 대한 이미지 소스를 지정 2. 디스플레이 해상도에 대한 이미지 소스를 지정 3. 브라우저 뷰포트 너비에 대한 이미지 소스와 디스플레이 해상도에 대한 이미지 소스를 함께 지정 1. 브라..

대표 홈페이지 SEO 개선 작업을 시작했다.메인을 포함한 4개의 메뉴 페이지와 개인정보처리방침, 이용약관으로 이루어진 사이트이다. 📍 기존 사이트의 한계▪ 수동적인 작업 환경 - 동적 라우팅 미지원 - 불필요한 파일들과 미사용 코드 - 반복적인 하드 코딩 ▪ 플랫(Flat) 페이지 계층 구조 - 사이트 구조 재설계 필요 📍 웹 퍼포먼스 도구를 이용한 현재 사이트 성능(SEO 포함한) 테스트 ▪ 웹 퍼포먼스 도구- 웹사이트의 성능, 접근성, SEO 등을 분석하고, 공통적으로 Lighthouse 엔진을 기반으로 분석- Lighthouse와 PageSpeed Insights가 있다.더보기📍 Lighthouse V.S. PageSpeed Insights ▪ Lighthouse는 크롬 DevTools ..

📌 문제 상황>>>> In-memory PM2 is out-of-date, do:>>>> $ pm2 updateIn memory PM2 version: 5.4.3Local PM2 version: 6.0.5이미 실행 중인 PM2 데몬은 옛날 버전이라서 실행 버전과 설치 버전이 달라서 충돌이 났다. 위 에러가 계속 뜨고, 터미널창 꺼졌다 켜졌다 깜빡이는데 정작 브라우저에서 플젝이 뜨진않았다. 📌 GPT 추천 방법1. pm2 업데이트실행 버전과 설치 버전이 다르니까 업데이트 하면 된다!pm2 update이대로 해결이 됐다면 이 글을 안썼겠죠..... 역시나 안됨... 버전만 바뀌면서 에러가 계속 뜸. >>>> In-memory PM2 is out-of-date, do: >>>> $ pm2 update In..

프론트엔드 개발자를 위한 SEO 가이드프론트엔드 개발자를 위한 SEO 가이드 도서 표지📍 검색 엔진 최적화란?▪ 검색 엔진(Search Engine)정보를 검색할 수 있도록 도와주는 프로그램검색엔진 구성 단계크롤링(Crawling)웹에서 페이지를 수집한 뒤 인덱스(색인)를 생성하는 자동 소프트웨어로, 로봇(Robot) 또는 스파이더(Spider)라고 알려져 있다.웹 상에 존재하는 정보를 탐색하고 수집하는 것사용자가 키워드를 검색하면 검색 엔진은 미리 생성된 페이지를 활용하여 결과를 제공인덱싱(Indexing)검색어와 연관된 웹 페이지 정보를 담은 데이터 베이스로, 각 웹 페이지의 키워드, 제목, 본문 내용, 이미지 등의 다양한 정보가 포함된다.검색 엔진에서 수집한 정보를 분류하여 검색 결과를 빠르게 제..

Nuxt 프로젝트를 진행하는데 DB로 Firebase의 Cloud Firestore를 사용 중입니다. /board/:boardId로 라우팅했는데, /board/vOvuWpHHefg8ymJXDytZ 형식으로 라우팅되었습니다.Firestore에서 document ID를 기본적으로 랜덤 문자열로 생성하기 때문입니다. 그래서 알아보니 Firestore는 MySQL처럼 auto increment 기능을 기본적으로 제공하지 않았습니다.분산형 NoSQL이기 때문에 숫자 기반 auto increment는 충돌 위험이 크기 때문입니다. 그렇지만 각 게시글이 숫자로 된 고유 ID를 사용할 수 있도록 만들고 싶었습니다.그래서 찾아보았습니다. Firestore에서 공식 지원하는 방법은 아니고...;;;Counter 컬렉션을 ..

D&D 기능을 구현했습니다.직접 만들어볼까~ 하다가 구현해야 할 기능 공수에 비해 시간적 여유가 부족해서 라이브러리를 사용했는데요.3가지 꽤괜 라이브러리를 찾았습니다. 📌 SortableJS VS VueDraggable VS Shopify DraggableSortableJS와 Shopify Draggable는 Vanilla JS 기반이고, VueDraggable는 Vue/Nuxt에 최적화되어 있습니다. 특징을 간략하게 소개하자면... ◾ SortableJSanimation, ghostClass 등 다양한 옵션을 제공하고, VueDraggable보다 커스텀의 범위가 더 자유롭습니다.(당연, Vue와 상관없이 작동함.)다만, 배열을 자동으로 업데이트 해주지 않기 때문에 onEnd 이벤트 발생 시 splic..

📌 Nuxt의 렌더링 모드Nuxt에서는 SSR, CSR 뿐만 아니라 하이브리드 렌더링, 엣지 사이드 렌더링을 지원한다. 브라우저와 서버가 함께 JavaScript 코드를 해석하여 Vue.js 구성 요소를 HTML 요소로 변환할 수 있다. 이 단계를 렌더링이라고 한다. Nuxt는 universal 및 클라이언트 측 렌더링을 모두 지원합니다. 두 가지 접근 방식에는 장단점이 있다. 기본적으로 Nuxt는 더 나은 사용자 경험과 성능을 제공하고 검색 엔진 인덱싱을 최적화하기 위해 universal 렌더링을 사용하지만 한 줄의 구성에서 렌더링 모드를 전환할 수 있다. 📌 Universal RenderingNuxt 공식 홈페이지 https://nuxt.com/docs/guide/concepts/rendering..

📌 컴포저블 함수- 🌟 Composition API 기반으로 작성된 재사용 가능한 함수이다.- 상태 관리가 필요한 경우가 많지만, 반드시 필수는 아니다.- 이름은 보통 useXXX로 작성해 가독성과 목적을 명확히 한다. ◾ 반응형 상태 중심의 컴포저블ref, reactive, computed, watch 같은 Composition API 기능을 활용해 반응형 상태나 로직을 캡슐화한다.상태를 관리하고 컴포넌트에서 상태 변화에 따라 UI가 갱신한다.ex) useCounter() 같은 상태 관리 함수◾ 부수 효과 (Side Effect) 중심의 컴포저블onMounted, onUnmounted, API 호출, 이벤트 리스너 등록 등 Vue의 생명주기나 외부 효과 관리(Side effect)한다.반응형 상태는..