0. 지도가 너무 렉이 걸려!지금 작업하고 있는 프로젝트는 네이버 지도를 활용해서 사용자가 저장한 식당 위치를 지도에 띄워주는 기능이 있다. 커스텀 마커를 생성하고 마커에 대한 정보들을 html로 변환 후, 마커의 content에 추가해주었다. 네이버 지도에 마커가 하나씩 생성될 때마다 DOM 요소가 하나씩 생성된다. 즉, 마커가 생성되는 개수가 늘어날수록 렌더링 성능에 영향을 끼치게 된다. 실제로 마커가 500개 넘게 네이버 지도에 추가되었을 경우, 줌과 드래그를 할 때 너무 렉이 걸려서 사용자 경험에 악영향을 끼치게 되었다. 그래서 일주일에 걸쳐서 네이버 지도를 최적화하기 위해서 여러 가지 시도를 하며 삽질을 해보았다.1. HTML 마커 방식 대신 캔버스를 사용해보자위에서 설명했듯이, 마커가 하나씩 ..
문제 링크: https://school.programmers.co.kr/learn/courses/30/lessons/42627 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr1. 생각우선순위 큐(즉, Heap)을 사용해서 풀어야 하는 문제다. Javascript는 우선순위 큐를 직접 구현해야하는데, 아직 다 외우지 못해서 아래 블로그 글을 참고해서 우선순위 큐를 구현했다.(블로그 링크: https://velog.io/@qltkd5959/JS ) 작업의 우선순위는작업의 소요시간이 짧은 것,작업의 요청 시각이 빠른 것작업의 번호가 작은 것이다. 이 문제에서 주어지는 jobs는 [작업이 요청되는 시점, 작업의..
문제 링크: https://school.programmers.co.kr/learn/courses/30/lessons/42583 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 1. 생각제일 헷갈렸던 부분은, 트럭 한대가 다리를 건너는 데 bridge_length초 걸린다는 사실이다. 문제에서 이 부분에 대한 설명 미흡해서 이해가 어려웠다. 맨 처음, truck_weights에 다리를 지난 시간을 나타내는 time 속성을 각 객체에 map을 통하여 추가해주었다. 그리고 truck_weights의 첫 번째 트럭을 새로 생성한 bridge 배열에 넣어주고 time 속성을 +1 해준다음, 우리가 구해줘야 하는 ..
0. 제안과 고민동아리 회장을 맡아달라는 제안을 들었다. 처음에는 부담스러웠다. ‘회장’이라는 단어는 내게 너무 이질적으로 다가왔다. 초등학교 때 몇 번 반장을 맡았던 적은 있었지만 그건 그 때 뿐이었고, 내가 나서는 것을 좋아하지 않는다는 사실을 알게 된 이후로 무언가를 대표하는 직책을 맡지 않았었다. 웹 파트장도 내가 웹 프론트엔드를 좋아해서 맡은 거였다고. 회장은 자신감이 넘쳐야하고, 남들을 설득할 줄 알아야하고, 책임을 질 줄 알아야한다. 나에게는 없는 요소들이었다. 그랬기에 사실 이런 제안은 나에게 기회기도 했다. 아마 다시는 오지 않을 기회. 회장을 맡으면 더 성숙한 내가 될 수 있지 않을까. 자리가 사람을 바꾼다는 뻔한 말을 한 번 믿어볼까. ‘내가 모든 걸 망쳐버리면 어떡하지?’라는 생각이..
0. CORS 에러는 프론트에서 해결이 가능하다고?우연히 어떤 트윗을 봤다.(출처: https://x.com/robinyoondev/status/1891720787863687634)CORS 에러는 서버 측에서 Access-Control-Allow-Origin 헤더를 설정하면, 특정 출처에서의 접근을 허용함으로써 해결할 수 있다.(CORS에 대해 알고 싶다면 아래 링크에서 잘 설명되어 있다! 링크: https://www.maeil-mail.kr/question/78 )그런데 위 트윗에서는, 백엔드 개발자분께서 CORS 에러를 프론트엔드에서 해결할 수 있다고 말했다고 한다. 프론트엔드에서 어떻게 CORS 에러를 해결할 수 있을까?다음과 같은 트윗들이 달려있었는데, 이해가 가지 않는 단어들이 있어서 검색을 해..
문제 링크: https://school.programmers.co.kr/learn/courses/30/lessons/42579 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 1. 생각정렬 기준이 무려 세가지다!속한 노래가 많이 재생된 장르를 먼저 수록장르 내에서 많이 재생된 노래를 먼저 수록장르 내에서 재생 횟수가 같은 노래 중에서는 고유 번호가 낮은 노래를 먼저 수록그래서 일단 Map을 생성한 후,속한 노래가 많이 재생된 장르를 먼저 수록하기 위해genres와 plays를 순회를 돌며 genres 별로 plays들을 더해줘서 plays가 큰 순서대로 Map을 내림차순 정렬을 해주었다. (이 때, M..
문제 링크: https://school.programmers.co.kr/learn/courses/30/lessons/43162 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 1. 생각DFS를 사용해서 풀어야 하는 문제다. 자바스크립트에서 DFS를 어떻게 풀어야되는지 아래의 블로그 글을 참고했다. 링크: https://chamdom.blog/dfs-using-js/ [알고리즘] JavaScript로 구현하는 DFSdfs에 대해 알아보기 전에 우선 그래프에 대한 이해가 필요하다. 그래프에 대한 설명은 여기 에 자세히 정리해두었다. DFS란? DFS(Depth-First-Search) 는 …chamdom.b..
문제 링크: https://school.programmers.co.kr/learn/courses/30/lessons/43105 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 1. 처음 든 생각Dynamic Programming을 활용하여 푸는 문제라는 사실을 알고 있었기 때문에 고민하는데 드는 시간이 오래 걸리지는 않았다. 삼각형 칸 하나 당 배열을 생성하고, 위 칸의 배열에 존재하는 합들을 아래 칸에 더해서, 아래 칸의 배열에 넣어주는 행위를 반복하고, 맨 밑의 칸들을 순회하면서 가장 큰 값을 찾으면 될 것 같다는 결론을 내렸다. (참고로 맨 왼쪽에 있는 칸과 맨 오른쪽에 있는 칸은 윗 줄에서 한 가..
문제 링크: https://school.programmers.co.kr/learn/courses/30/lessons/42746 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 1. 풀이‘무슨 기준으로 정렬을 해야할까?’를 고민했다. 앞자리에 있는 수가 클수록 먼저 배치해야하는 것은 쉽게 알 수 있었다. 생각해봐야할 케이스는 34와 341 같은 경우이다. 둘 중에 무엇을 먼저 앞에 놓아야할까? 34134와 34341을 비교하면 34를 먼저 배치했을 때가 더 숫자가 컸다. 즉, 마지막 자리의 숫자가 더 큰 것이 먼저 배치가 되면 된다. 그래서 두 숫자를 비교할 때 각 숫자의 index를 설정하고, 맨 앞자리..
0. PWA와 FCM을 쓰려는 이유친구들과 공모전을 나가기로 했었다. 공모전에 프로젝트를 제출하려면 몇 가지 조건을 충족해야했는데, iOS와 Android에서 모두 작동해야하며, 푸시 알림이 구현되어야 한다는 조건이었다. React와 문법이 비슷한 React Native를 빠르게 학습한 후 이 언어를 활용하여 개발을 진행하는 방법이 먼저 떠올랐다. 그 다음에 떠오른 것이 바로 PWA(Progressive Web App)였다. PWA 기술을 활용하면 웹사이트지만 네이티브 앱처럼 설치하여 사용할 수 있고, 푸시 알림, 오프라인 작동 등 앱과 유사한 기능들도 구현할 수 있다. 푸시 알림은 FCM(Firebase Cloud Messaging)을 통하여 구현하기로 했다. Firebase을 독학하여 CRUD를 구현..
