d3.js로 코드를 만들어 나가는것도 흥미로웠는데, 이 부분은 좀 더 배워서 들고와야겠다...!
[D3.js] svg 지도 파일을 활용해서 나만의 지도 만들기! #1에서 코드에 svg파일을 넣으면
화면에 이렇게 나올 것이다.
svg 파일에서 background-color를 변경하기 위해서는 스타일 속성의 fill의 값을 주어야한다.
styled-components를 사용하여 각각의 path의 배경과 hover시의 배경을 지정해주었고,
이렇게 전체적인 배경 색깔과 호버한 부분의 색깔이 변경되는 것을 확인할 수 있다.
이제 원하는 지역에 색칠을 하는 방법을 알게 되었으니 다음으로 해야하는 일은 각 path가 어떤 지역인지를 파악하는 부분이었는데... 이 부분은 개발자 도구의 elements 탭에서 하나씩 눌러보며 찾았다...ㅎ
path 코드의 순서대로 배열을 만들어 두고 적용하였다.
const cityArr = ['서울', '부산', '대구', '인천', '광주', '대전', '울산', '경기', '강원', '충북', '충남', '전북', '전남', '경북', '경남', '제주특별자치도', '세종특별자치시'];이후의 작업은 svg파일을 다루는 것 보다 자바스크립트였기에 작업은 수월했다.
처음의 코드에서는 주소 전체를 받아와 직접 파싱을 했어야 했는데, 생각해보니 서울 여행을 하면서 인천과 경기도 주소지의 여행지도 갈 수 있겠다는 생각이 들었고, 그렇게 된다면 내부적으로 파싱을 하기보다는 사용자가 직접 어느지역의 여행기인지를 고를 수 있도록 하는 것이 나만의 지도를 만드는 목적에 맞다고 생각해 사용자가 글을 작성하면서 기록이 될 여행지를 선택할 수 있도록 했다.
백에서 받아오는 데이터를 파싱하는 함수는
function parsingData(data) {
const cityObj = {};
data.forEach(i => {
const cityName = i.cateCity;
if (!cityObj[cityName]) {
cityObj[cityName] = { posts: [], color: '' };
cityObj[cityName].posts.push(i);
} else if (cityObj[cityName]) {
cityObj[cityName].posts.push(i);
}
});
const notInData = cityArr.filter(i => !Object.keys(cityObj).includes(i));
notInData.forEach(i => (cityObj[i] = { posts: [], color: '' }));
Object.keys(cityObj).forEach(i => {
if (cityObj[i].posts.length === 0) {
cityObj[i].color = '#ccc';
} else if (cityObj[i].posts.length === 1) {
cityObj[i].color = '#FFB677';
} else if (cityObj[i].posts.length > 1 && cityObj[i].posts.length <= 4) {
cityObj[i].color = '#FF9457';
} else if (cityObj[i].posts.length > 4 && cityObj[i].posts.length < 9) {
cityObj[i].color = '#FF8364';
} else {
cityObj[i].color = '#FF572D';
}
});
return cityObj;
}데이터를 파싱하는 함수에서는 우선 내부적으로 cityObj라는 객체를 만들고, 받아온 데이터에 있는 지역부터 그 지역의 포스팅 갯수를 세어 cityObj에 기록한다.
이후 위에 만들어둔 cityArr에는 존재하지만 cityObj에는 없는 지역 key값을 찾아 cityObj의 형태로 값을 만들어 준다.
예를들어, 부산지역의 포스트가 1개, 경남지역의 포스트가 0개라면
cityObj = {
'부산':{posts:[{title:...}], color:''},
'경남':{posts:[], color:''}
}
color의 값을 빈 문자열로 주는 이유는 이후 포스트의 길이에 따라 달라지는 색을 스타일에 바로 사용하려면 모든 키의 객체에 color라는 키가 필요했기 때문에 빈 문자열을 가진 키를 만들어 주었다.
이렇게 만들어진 cityObj 각각의 지역 posts 배열의 길이를 기준으로 조건문을 작성하여 색깔을 할당해 주었다.
이렇게 만들어진 cityObj를 콘솔에 찍어보면
이렇게 만들어져 있는 것을 확인할 수 있다.
cityObj의 값들을 활용하여 바로 각 path의 스타일에 적용시켜주었고,
이렇게 여행한 위치 정보를 기반으로한 나만의 지도가 완성이 되어진다!!
최종 발표를 하며 직접 구현한 것이냐는 질문을 받았을때 왠지 엄청 뿌듯했고ㅎㅎㅎ 프로젝트를 리팩토링 하면서 좀 더 지역을 세분화한 지도로 발전시키면 좋을 것 같다는 피드백을 받아 지역 데이터를 노가다 방법이 아닌... 좀 더 효율적으로 받아올 수 있는 방법도 공부해야겠다는 생각이 들었다!!
2차 프로젝트에서 나만의 지도 부분, 로그인과 회원가입, 커뮤니티 부분을 맡아 구현하였는데 시간이 되면 oauth 2.0 카카오 로그인으로 돌아와야겠다!!
뿅✨
