지난 시간엔 serverside를 통해서 정적인 xml로 sitemap을 생성하는 과정을 나타냈어요! 오늘은 동적인 xml을 생성하여 페이지에 들어올 때, 항상 최신 sitemap이 생성되도록 만드는 과정을 해보도록 할게요! sitemap에 대해 지난 시간보다 좀 더 알아본 후에 진행하려합니다. sitemap xml 태그 방법 https://exam-bomb-service.vercel.app/ https://zippoom.com/sitemap/sub/index.xml 2023-03-17T09:00:23.523Z 위의 첫번째 케이스는 urlset 태그로 url 자체를 알려주는 방식과, 두번째 케이스처럼 태그를 통해 해당 xml에 또다른 sitemap이 존재함을 알려주는 방식이 있어요! 두가지 방법 중에 저..

오늘은 Nextjs에서 Sitemap.xml을 자동화할 수 있는 방법에 대해 알아보려해요! 일단 Sitemap의 역할이 무엇인지 알아야지 왜 Sitemap을 만들어야하는지 알겠죠? Sitemap이란? https://developers.google.com/search/docs/crawling-indexing/sitemaps/overview?hl=ko 사이트맵이란 무엇인가요? | Google 검색 센터 | 문서 | Google for Developers 사이트맵은 Google에서 사이트를 더 지능적으로 크롤링할 수 있도록 정보를 제공합니다. 사이트맵의 작동 방식을 알아보고 필요한지 결정하세요. developers.google.com 구글 검색 센터에서 제공하는 사이트맵에 대한 정보에요. 그 중에 몇가지만 정..

6월 중순부터 사내 개발팀 스터디를 진행하고 있어요. 저는 첫번째 책으로 리팩터링 2판을 읽고 있고, 이 책을 읽으며 드는 생각과 앞으로 개발팀 내에서 어떻게 발전해나가면 좋을지 공유하고자 스터디 내용을 정리하여 공유하고자 해요! 저자의 내용을 토대로 지극히 저의 주관적인 생각을 담고 있음을 알려드립니다. 리팩터링 2판 서론.서론 내용은 다음과 같이 정리할 수 있어요. 1. 그냥 리팩터링하면 되지 않을까요? → 리팩터링엔 위험이 따라와요.동작하는 코드 수정에 미묘한 버그 생길 가능성잘못 수행시에 오류로 시간과 노력이 수포로 돌아갈 가능성그렇다면 어떻게 리팩터링 하면 좋을까요? 계획적이고 체계적이도록 실행하자!(목표를 설정?!) 2. 리팩터링이란? 겉으로 드러나는 코드의 기능(동작)은 바꾸지 않지만 내부 ..

오늘은 지난 Queue를 구현하면서 dequeue를 구현할 때 shift() 메소드를 사용하면 안되는 이유를 보려해요. 먼저 간단히 dequeue는 queue의 front를 제거하는 동작이며, shift는 javascript의 Array의 메소드 중 하나로 맨 앞의 요소를 제거해요. dequeue는 O(1)의 속도를 가지지만 shift는 O(n)의 속도를 가지기 때문에 그렇죠! shift가 O(n)을 갖는 이유는 array는 기본적으로 인덱스를 통해 접근이 가능하죠?! 그러면 맨 앞의 요소를 제거한다면, 뒤에 있는 모든 요소의 인덱스를 하나씩 땡겨주는 작업을 해야해요. 그래서 맨 앞의 요소를 제거하는 shift와 추가하는 unshift 모두 O(n)의 속도를 가져요! 그러면 다음 문제를 통해서 속도차이를..

이 문제를 사실 좋은 방법으로 풀었다고는 생각이 안들어요... 근데 제 기준으로 신박하게 해결했다고 생각해서 남겨보려해요..ㅎㅎ 일단 문제는 간단하게 food_times라는 음식을 섭취할 수 있는 개수에 대한 리스트가 있어요. 그리고 k번 섭취한 후에 다음으로 섭취할 음식의 인덱스를 구하는 문제에요. 일단 food_times의 길이가 200,000 이고 원소는 100,000,000 이기 때문에 k섭취를 위해 이중 for문을 돌리게 되면 최악으로 100,000,000 * 200,000 회? 되는거죠?? 네, 아마 그정도쯤 될거라 생각이 들어 당연히 호율성에서 안돼요! N을 100,000,000으로 M을 200,000 으로 생각해보면 O(MN)보단 작아야지 효율성에 통과될거에요. 그래서 첫번째 목표는 이분탐..

오늘은 직접 구현한 queue를 활용해서 아래 프로그래머스 lv2 문제를 풀어볼께요! https://school.programmers.co.kr/learn/courses/30/lessons/42587 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 만약 직접 구현하지 않는다면 이렇게 쉽게 끝내지만..! (사서 고생하는 스타일..) 저는 직접 구현하기로 했으니 ... 엄청 긴 코드를 꺼내보죠.... function solution(priorities, location) { let rank = 0; while(true){ const front = priorit..

오늘 공부할 자료구조는 큐입니다! 큐(Queue) 1. 큐란? 큐는 스택과 함께 많이 사용되는 기본적인 자료구조로 일렬로 늘어선 줄을 의미하기도 하며, 입구와 출구가 분리되어있는 자료구조입니다! 우리가 줄을 서서 대기한다면 먼저 선 사람이 먼저 나오게되죠?! 그 원리를 이용한 자료구조가 큐이며 선입선출[First In First Out] 특성을 가지게 돼요! 2. 큐의 연산? 큐의 연산에는 두가지가 존재해요. 첫번째는 enqueue를 통한 입력, 두번째는 dequeue을 통한 제거 (플러스로 queue의 길이 ..!?) 큐의 입구는 뒤(rear)에 있기 때문에 enqueue는 뒤로 입력, dequeue은 앞(front)에서 제거하는 구조로 되어있어요! 3. 시간복잡도? enqueue : O(1) dequ..

이번엔 지난 시간에 직접 구현한 stack을 활용하여 아래 문제를 풀어볼게요! https://school.programmers.co.kr/learn/courses/30/lessons/12906 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 굳이 ... 구현해서 안풀어도 되지만 ㅠㅠㅠ 구현 공부할겸 .. 해보도록 하죠...! class Stack { #list = []; #index = -1; push(val) { this.#list[++this.#index] = val; } pop() { if (this.#index === -1) throw new Err..

대표적인 자료구조들인 스택, 큐, 연결리스트들과 정렬 알고리즘들을 직접 구현해보며 알아보면서 공부하고자 해요! 기본적인 동작 원리나 개념은 이미 알고있지만, 직접 구현해보며 동작원리를 살펴볼께요. 오늘은 먼저 스택! 스택(Stack) 1. 스택이란? 스택은 가장 많이 사용하는 자료구조로 말 그대로 "쌓여있는 데이터 더미"이고, 입구가 하나로 이루어진 자료구조라고 생각하면 돼요! 그렇기때문에 입구에 계속 넣는다면 처음에 넣은 것이 가장 마지막에 나오게 되는 후입선출[Last In First Out] 특성을 가지게 됩니다. 2. 스택의 연산? 스택의 연산에는 두가지 종류가 있어요. 첫번째는 push를 통한 입력, 두번째는 pop을 통한 제거 (플러스로 stack의 길이 ..?!) 스택의 입구는 뒤에 있기 때..

오늘은 직접 SSR과 CSR, SSG을 Nextjs에서 결과를 통해 차이점을 알아보도록 할까요?! 요즘 프론트엔드 면접의 대표 질문이기 때문에 어떤식으로 활용해야 좋은지를 제대로 아는게 중요하다고 생각해요ㅎㅎ 오늘은 CSR과 SSG만 알아보도록 할께요! (추후에 SSR / ISR 예정) 1. CSR(Client Side Rendering) 먼저 Client Side Rendering(CSR)은 말그대로 클라이언트에서 렌더링 진행한다는 뜻으로 초기 로드시에 HTML를 통해 다운받은 JS파일 빈 HTML에 DOM을 그려나간다는 특징이 있습니다. 대표적으로 Single Page Application(SPA)의 React를 통해 사용할 수 있어요. 그렇기때문에 초기에 그리는 시간으로 인해 초기페이지 진입에 살짝..