지난 포스트에서는 지도를 띄우고 여러 개의 마커를 등록해 보았습니다.이번 포스트에서는 등록한 마커를 커스텀하고 커스텀 오버레이를 활용하여 infowindow를 구현해보고자합니다. 마커 디자인 변경처음 아무런 설정 없이 마커를 등록하고 애플리케이션을 실행시키면 아래 사진과 같이 카카오에서 기본 제공되는 마커로 표시되는 것을 확인할 수 있는데요. 저는 애플리케이션에 맞게 마커를 바꿔주려고 해요. 1. 먼저 바꿔줄 이미지를 준비해 줍니다.2. 바꿔줄 이미지를 코드로 등록해 줍니다. 이미지를 등록하는 코드 이외 지도를 다루는 부분은 이전 포스트를 참고하시면 됩니다.(https://ohamin26.tistory.com/36?category=1193802) 3. 애플리케이션을 실행해 보면 이미지가 정상적으로 바뀐..
지난 포스트에서 Kakao Map API를 등록하고 로컬 환경에서 맵을 띄우는 것까지 해보았습니다.이번 포스트에서는 여러 개의 마커를 등록하는 과정을 정리해 보고자 합니다. 마커 여러 개 등록하기마커를 등록하기 위해서는 Kakao Map이 구현된 상태에서 진행해야 합니다. 관련 내용은 이전 포스트인 https://ohamin26.tistory.com/36를 참고하시면 됩니다. 1. 맵을 띄우는 것까지 완료되었다면 먼저 마커를 표시하기 위한 데이터를 준비해 줍니다. 데이터는 lat, lng, title를 포함하고 있으면 되고 형식은 편한 형식으로 사용하시면 됩니다. 저는 다음과 같이 데이터를 준비하였습니다. 2. 데이터 준비가 완료되었으면, 이전에 작성했던 mapScript에서 마커 정보를 등록해 줍니다..
프로젝트를 진행하는 중 지도 API를 활용해야 할 일이 있어 Kakao Map API를 사용하여 구현하였습니다.Kakao Map API에는 유용한 기능들이 많아 기능들에 대해 정리해 보았습니다. 더보기※ 개발 환경vscodetypescriptreact Kakoa Map API 사용하기React에서 Kakao Map API를 사용하기 위해서는 먼저 Kakao developers에 애플리케이션을 등록해주어야 합니다. Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com 홈페이지에 들어가 우측 상단에 내애플리케이션을 클릭해 줍니다. 2. 애플리케이션 추가하기..
문제 구름LEVEL난이도별 다양한 문제를 해결함으로써 SW 역량을 향상시킬 수 있습니다.level.goorm.io 문제 설명거울 단어는 단어의 오른쪽에 거울을 두고 단어를 비춰봤을 때, 거울 속에 비친 단어가 원래 단어와 똑같은 단어를 의미합니다. 한 알파벳을 거울에 비춰봤을 때 어떤 알파벳으로 보이는지 표로 정리하면 아래 사진과 같습니다. 표에 없는 알파벳은 거울에 비춰봤을 때 쌍을 이루는 알파벳이 없음을 의미합니다.거울 단어의 예시를 들자면 poq나 bidbid와 같은 단어가 해당됩니다. 반면 level이나 dpb와 같은 단어는 level의 경우 e에 대응되는 다른 알파벳이 없기 때문에 거울 단어가 아니고, dpb는 거울로 비췄을 때 dqb로 보이기 때문에 거울 단어가 될 수 없습니다.알파벳 소문자로..
문제 구름LEVEL난이도별 다양한 문제를 해결함으로써 SW 역량을 향상시킬 수 있습니다.level.goorm.io 문제 설명구름이는 소수점 거래 기능을 지원하는 어떤 증권사의 서비스를 이용하여 해외 주식 거래를 시작했다고합니다.소수점 거래 기능은 구매 수량을 소수점 단위로 할 수 있어 일 만원으로 한 주에 백 만원이 넘는 주식도 구매할 수 있습니다.구름이는 1번 회사부터 N번 회사까지, 총 N개의 회사에서 발행한 해외 주식을 구매했고, 구름이가 보유한 해외 주식에 대한 정보는 보유한 주식의 개수 V(i)와 주식 1개 기준 가격인 w(i)로 나타냅니다.구름이는 다음과 같은 순서로 가지고 있는 모든 주식을 순서대로 판매하려 한다고 합니다.주식의 평가 금액이 높은 회사의 주식부터 판매합니다.평가 금액은 보유한..
문제 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 문제 설명위 사진과 같은 카펫이 있다고 합니다. 카펫에서 갈색 적자의 수를 담은 변수 brown, 노란색 격자의 수를 담은 변수 yellow가 매게변수로 주어질 때 카펫의 가로, 세로 크기를 순서대로 배열에 담아 반환하면 되는 문제 입니다. 더보기※제한 사항갈색 격자의 수 brown은 8 이상 5,000 이하인 자연수입니다.노란색 격자의 수 yellow는 1 이상 2,000,000 이하인 자연수입니다.카펫의 가로 길이는 세로 길이와 같거나, 세로 길이보다 깁니다.풀이중앙은 모두 노란색 격자로 채워지는 카펫이..
문제 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 문제 설명게시판 불량 이용자를 신고하고 처리 결과를 메일로 발송하는 시스템을 개발하려 한다고 합니다. 개발하려는 시스템은 다음과 같습니다.각 유저는 한 번에 한 명의 유저를 신고할 수 있습니다.신고 횟수에 제한은 없습니다. 서로 다른 유저를 계속해서 신고할 수 있습니다.한 유저를 여러 번 신고할 수도 있지만, 동일한 유저를 계속해서 신고할 수 있습니다. K번 이상 신고된 유저는 게시판 이용이 정지되며, 해당 유저를 신고한 모든 유저에게 정지 사실을 메일로 발송합니다.유저가 신고한 모든 내용을 취합하여 마지막..
문제 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 문제설명알파벳 소문자로만 이루어진 어떤 문자열에서, 2회 이상 나타난 알파벳이 2개 이상의 부분으로 나뉘어 있으면 외톨이 알파벳이라고 합니다.예를 들어 "aba" 형태로 있으면 a가 2회 이상 나타나고 붙어있지 않으므로 외톨이 알파벳입니다.또다른 예시로 "aabaa" 형태로 있으면 aa가 2회 이상 나타나고 붙어있지 않으므로 외톨이 알파벳입니다.주어진 문자열에서 외톨이 알파벳을 모두 찾아 중복 없이 알파벳 순서대로 반환해주면 되는 문제입니다. 더보기※제한 사항1 input_string은 알파벳 소문자로만 구..
문제 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 문제 설명어떤 숫자가 있을 때 여기서 k개의 수를 제거했을 때 얻을 수 있는 가장 큰 수를 구하는 문제입니다.예를 들어, 숫자 number = 1924와 k=2로 주어졌을 때 만들 수 있는 숫자는 [19, 12, 14, 92, 94, 24] 이고 이 중 가장 큰 수인 94를 반환하면 되는 문제입니다. 더보기※제한 조건number는 2자리 이상, 1,000,000자리 이하인 숫자입니다.k는 1이상 number의 자릿수 미안인 자연수입니다.풀이가장 작은 수 k를 제거해서 가장 큰 수를 만든 다는 말은 가장 큰 ..
문제 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 문제 설명선행 스킬은 어떤 스킬을 배우기 전에 먼저 배워야 하는 스킬을 뜻합니다.A스킬 -> B스킬 -> C스킬과 같은 순서로 되어 있다고 할 때 A스킬을 배우지 않고서는 B스킬을 배울 수 없고 B스킬을 배우지 않고서는 C스킬을 배울 수 없다는 것을 의미합니다. 하지만 A->B->C 스킬 트리가 있다고 했을 때 스킬 트리에 포함되지 않는 스킬들은 순서에 상관 없이 배울 수 있습니다. ex) A->D->B->C선행 스킬 순서 skill과 유저들이 만든 스킬트리를 담은 배열 skill_trees가 매게변수로 주..
