rhanziy

페이지네이션 라이브러리를 안쓰고 큰 흐름을 파악하고자 직접 구현해봤다. 의도한대로 동작은 되었는데 3번은 갈아 엎은듯. 하하. 페이지네이션이 이렇게 복잡한 것일 줄이야. 그래서 구현과정을 정리해보고자 제목을 [페이지네이션 구현기]로 정했다. 1차 시도 데이터 배열 slice처음에는 단순하게 데이터가 리스트가 담긴 배열을 현재페이지 * 보여줄 페이지 개수 ~ 다음페이지 * 보여줄 페이지 개수로 slice해서 보여줬었는데 데이터가 많아지면 비효율적이기때문에 일찌감치 리팩토링 했다.arr.slice((currentPage - 1) * itemCountPerPage, Math.min(currentPage * itemCountPerPage, totalItems) 2차 시도 searchParamsuseSearchP..

오픈그래프(Open Graph)웹페이지가 소셜 미디어에서 공유될 때 페이지의 제목, 이미지, 설명 등을 어떻게 보여줄지 제어하는 메타데이터 표준이다. 오픈 그래프 태그는 검색 엔진 최적화(SEO)에 직접적인 영향을 주기보다는, 소셜 미디어에서의 공유를 최적화함으로써 간접적인 SEO 효과를 기대할 수 있다. 보통 og태그라고도 하며, 이 글에서는 이미지 설정을 주로 다룰 예정. 최소 이미지 사이즈는 200px * 200px이며, 페이스북에서 사용되는 기본 사이즈는 1200px * 630px 이다. 오픈 그래프 이미지를 설정하는데에는 3가지 방법이 있다. 프로젝트의 규모에 따라 달라질 것 같으니 천천히 읽어보고 선택해보쟈. 레츠고 1. 경로로 설정하기오픈그래프 이미지에 허용되는 확장자는 다음과 같다. .jp..

사이트맵(sitemap)검색 엔진이 웹사이트를 보다 효과적으로 이해하고 크롤링할 수 있도록 도와주며, 이를 통해 웹사이트의 SEO 성능을 향상시킬 수 있는 중요한 도구이다. 사이트맵 파일을 올바르게 관리하고 업데이트하는 것은 검색 엔진 최적화(SEO)에 긍정적인 영향을 미칠 수 있다. 사이트맵 파일을 생성하게 되면 아래와 같은 이점이 있다.1. sitemap.js | ts 파일 생성app 디렉토리의 하위에 sitemap.js/ts 파일을 생성한다.// app/sitemap.js export default function sitemap() { return [ { url: 'https://test.com', lastModified: new Date(), changeFrequency: 'yearly', pri..

SEO(Search Engine Optimization)검색 엔진 최적화를 의미하며, 웹사이트나 웹 페이지가 구글/네이버 등과 같은 검색 엔진에서 더 잘 보이도록 최적화하는 과정.이 과정을 통해 웹사이트는 검색 엔진 결과 페이지에서 상위에 노출되게 되어 자연스럽게 더 많은 방문자를 유도할 수 있다. seo를 적용하게 되면,검색 엔진 결과에서 높은 순위: 대부분의 사람들은 검색 결과의 첫 페이지에 표시된 사이트만 방문하는 경향이 있는데 SEO를 통해 사이트가 상위에 노출되면 더 많은 사람들이 사이트를 방문하게 된다.자연 트래픽 증가: 광고에 의존하지 않고 검색 결과에서 유입되는 자연 트래픽을 확보할 수 있다.브랜드 인지도 향상: 검색 결과 상위에 나타나면 사용자들이 사이트나 브랜드를 더 신뢰하게 되고, 브..

저번에 작성했던 나의 삶의 지도를 게시 한 후 며칠이 지나 글또 10기에 선정되었다 ! 야호 🙌 지금 기록하는 흔적들이 나중에 읽어봤을때 부끄러울지언정 2024년의 날 한 조각 맛볼 수 있겠지... 어떤 맛이려나.... 보통 남는건 사진이라고들 하지만 거기에 추가로 글은 당시의 내 관심사, 깊이, 상태를 엿볼 수 있는 도구임에 분명하다. 나를 크롬에 띄워놓고 ctrl+shift+c 하는 것..... 아이쿠 이게 주제를 정하지 않고 작성하다보니 의식의 흐름대로 타이핑을 하고 있는 것 같다. 어제 제출했던 글또 10기의 Action Item 3가지 중 첫 번째가 '개인 공부할 때 글쓰기 주제를 제일 먼저 선정하기' 였는데 전제조건을 수정해야겠다. '글 쓰기 전 주제를 제일 먼저 선정하기'로ㅋㅋ 오늘의 제목은..

질풍노도의 첫번째 시기 중딩'어린 시절'을 당장 떠올리면 나는 중딩시절이 떠오른다. 동네를 벗어나 새로운 친구들을 만나고, 빠르게 바뀌는 유행을 경험하며 취향 스펙트럼이 확장되는 나이여서 그런 것 같다. 그 때는 또래집단의 power✨가 컸기때문에 정신없이 휩쓸리기도 했지만 혼자만의 시간이 주어졌을 때 내가 몰래 즐겼던 것들이 떠오른다. 일단 혼자만의 시간은 역시 모두가 잠자는 조용한 새벽을 좋아했다. 이때부터 올빼미 기질이 형성되었나... 어린시절의 나는 참 상상력이 풍부했던 것 같다. 그 당시 유행하던 책 시크릿ㅋㅋ을 감명 깊게 읽고는 눈을 감고 미래에 나는 어떤 모습일지를 마음 속으로 생생하게 그려봤는데, 아직도 선명하게 기억나는 건 ‘높은 낭떠러지를 끼고있는 도로에서 스포츠카를 타고 달리는 멋진 ..

filter를 이용한 배열의 중복 요소 제거 Uniq() { return this.filter((v, i, self) => self.indexOf(v) === i)}  객체 배열 정렬const todos = [ {id:4, content: 'JS'}, {id:1, content: 'HTML'}, {id:2, content: 'CSS'}]//배열 key값 타입에 따라 정렬function compare(key){ // 프로퍼티 값이 문자열일 경우 산술연산으로 비교하면 NaN이 나오므로 비교 연산 사용 // 비교함수는 양수/음수/0을 반환하면 되므로 산술연산 대신 비교연산을 사용할 수 있다. return (a,b) => typeof a[key] === 'string' ? a[key].localeCo..

슬라이딩 윈도우 알고리즘?하나의 특정 범위를 지정해놓고, 윈도우를 이동시키면서 범위 내에 있는 원소들을 계산해주는 원리.배열과 그 배열의 subArray(부분배열)의 원소들을 어떠한 조건하에 계산하는 상황에서 사용된다. O(n)의 시간복잡도.ex. 구간 합 구하기, 일정한 사이즈의 범위 값 계산하기, 가장 긴 부분 문자열 구하기 등.  예제) 사이즈가 K인 부분배열의 최대 합을 구하시오.Function maxSumOfArray(arr: number[], k:number){ let windowSum = 0; let maxSum = -Infinity; // arr에 음수가 포함될 경우 대비 for(let i = 0; i = k-1){ maxSum = Math.max(windowSum, ma..