빵 입니다.

프론트엔드 개발자를 위한 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)한다.반응형 상태는..

📌 서론지도를 그리려고 합니다!근데 이제 타입스크립트를 곁들인.... 기존엔 Chart.js만 사용했고, Chart.js에서 제공하는 기본 차트만을 사용했습니다.여러 지도 라이브러리가 있었는데, 무료이면서 메르카토르 도법으로 작업이 가능한 것을 찾았습니다.(+커스텀을 위해 자료들이 많은 것도 한 몫함.)그래서 고른 것이 D3.js !더보기더보기D3.js는 오픈 소스 라이브러리이기 때문에, 개인 프로젝트, 상업적 프로젝트, 웹 애플리케이션 등에 제한 없이 사용할 수 있습니다. D3.js 자체는 유료 버전이 없지만, D3.js를 기반으로 한 상용 라이브러리나 플러그인들은 유료로 제공될 수 있습니다.👉🏻 직접 다 그리면 공짜^^~🥰  📌 사용 패키지우선, 제가 사용한 패키지는 2가지입니다. "d3":..

nuxt3를 이용해 포트폴리오 사이트를 만들면서 익혀보려고 마음을 먹었다.틈틈이 시간날 때 셋팅하고 시작을 했고...가볍게 라우팅✔firebase 연결✔ (← 써보고 싶었음)조금조금씩 위 내용들은 실행을 했다. 그러나 슬픈 예감은 틀리지 않지... (기초적인 학습을 안하고 안해서 그런 듯...)API 통신 예제들을 적용해 보면서 외부 API와의 연결 셋팅까지만 해보려고 했는데 에러가 떴다.더보기📍 이 에러를 발생시킨 나의 코드(Nuxt에선 Data fetching을 하는 데에 사용하는 몇 가지 메서드들이 있는데, 생각없이 냅다 useFetch를 써버리니까 뜬 에러입니다.) 데이터 가져오기 로딩 중... 오류 발생: {{ error.message }} {{ post.title }..

📌 모듈 시스템◾ 자바스크립트에서 모듈 시스템은 코드를 효율적으로 분리하고 재사용 가능하게 만드는 역할을 한다.◾ CommonJS와 ESM은 모듈화를 지원하는 두 가지 방식이다. 📌 CommonJS🧿 Node.js 환경에서 사용 - Node.js 초기 설계 단계에서 채택된 모듈 시스템🧿 require() 함수로 모듈을 가져오고, module.exports로 내보낸다.// math.jsmodule.exports = { add: (a, b) => a + b, subtract: (a, b) => a - b,};// app.jsconst math = require('./math');console.log(math.add(2, 3)); // 5 🧿 동기적 모듈을 로딩- 동기적으로 모듈을 로드하기 때문에..