2023.05.18 - [Project ISL/프론트엔드] - Day 5 : 세계지도 인터랙션, 국가별 호버 이벤트와 법규(?) Day 5 : 세계지도 인터랙션, 국가별 호버 이벤트와 법규(?) 2023.05.17 - [Project ISL/프론트엔드] - Day 4 : 노력하는 자에겐 상이...? Day 4 : 노력하는 자에겐 상이...? 2023.05.16 - [Project ISL/프론트엔드] - Day 3 : SVG와 자바스크립트를 활용한 세계지도 만들기 Day 3 : SVG xpmxf4.tistory.com 위 글을 읽고 오신 다음에 이 글을 읽는 것을 추천 드립니다! 날짜를 보면 아시겠지만... 이 글은 그간과는 다르게 작업을 한지 좀 뒤에 작성하게 되는 글입니다. 핑계를 대자면 최근 코로나에..

2023.05.17 - [Project ISL/프론트엔드] - Day 4 : 노력하는 자에겐 상이...? Day 4 : 노력하는 자에겐 상이...? 2023.05.16 - [Project ISL/프론트엔드] - Day 3 : SVG와 자바스크립트를 활용한 세계지도 만들기 Day 3 : SVG와 자바스크립트를 활용한 세계지도 만들기 이 화면을 틀어두고 방법을 모색하는 데 내 화면이 너 xpmxf4.tistory.com Day 4 글을 읽고 와주시면 다음 글의 내용이 훨씬 잘 이해가 갈 거예요! 어제 각 나라별로 마우스 호버시 색깔이 바뀌도록 하는 이벤트를 설정하고 마무리했고, 오늘은 이제 법규를 날리기 위한 작업 내용을 보여드리도록 하겠습니다 :) 어제 완성된 코드부터 보시죠! window.onload =..

2023.05.16 - [Project ISL/프론트엔드] - Day 3 : SVG와 자바스크립트를 활용한 세계지도 만들기 Day 3 : SVG와 자바스크립트를 활용한 세계지도 만들기 이 화면을 틀어두고 방법을 모색하는 데 내 화면이 너무 구려보이는 것이다. 뭔가 허전하달까...? 원래는 그래서 오늘 다른 디자인을 찾다가 보니 다음 사이트를 찾을 수 있었다. https://simplemaps.co xpmxf4.tistory.com 이 전글도 보고 와주시면 감사하겠습니다!!! 오늘도 꾸준히 1시간, ISL 에 투자했습니다. 어제의 글처럼 simplemaps.com 에서의 svg는 그대로 사용하지만 위 사이트에서 제공하는 기능은 일일히 구현을 하기로 독한 마음먹고 svg 코드를 분석하는 와중에 특이한 점을 ..

이 화면을 틀어두고 방법을 모색하는 데 내 화면이 너무 구려보이는 것이다. 뭔가 허전하달까...? 원래는 그래서 오늘 다른 디자인을 찾다가 보니 다음 사이트를 찾을 수 있었다. https://simplemaps.com/world HTML5/JavaScript Interactive World Map | Simplemaps.com Fully Customizable Almost every aspect of the map can be customized. Colors, descriptions, links, labels, locations, regions and much more. simplemaps.com 해당 사이트는 정확히 내가 원하는 모양과 기능들을 모두 탑재한 svg 및 자바스크립트 기능까지 지원하는 사..

대략적인 기획이 끝나고 실제로 UI 를 보고 나서 필요해보이는 기능이 더 있을 거 같다고 판단, 어제 기획 이후에 바로 세계지도를 코드를 가져와 작성했다. https://codepen.io/Paulie-D/pen/vXzjmr SVG Dotted World Map ... codepen.io 도트형 이라는 단어 답게, 코드를 일일히 찍어야 겠다라는 생각을 하고 있었지만 예제 코드를 보니 svg 안에 태그가 무려 2,500 줄이나 있었다... // 2,500 줄 더... 역시 세계는 넓구나... 도트형 세계 지도를 찍는 거 까지는 해결. 다음 과제는 썸네일에서 나와 있듯이 바로 영역을 구분해야 한다. 왜냐하면 각 나라의 영역에 마우스를 hover 하게 되면 그 나라의 도트들만 색깔이 변해야 하기 때문이다. 생..

예전 개발을 막 시작했을 시절에는 일단 코드부터 작성하고 봤는 데 이제는 코드부터 들입다 작성하는 게 오히려 미래에 프로젝트 진행을 더 더디게 만든다는 걸 알아 기능 리스트업부터 해요. 이번 프로젝트는 저 혼자서 프론트, 백엔드, 인프라까지 전부 다 관리하기 때문에 프론트, 백엔드, 인프라에 관한 모든 일정 및 todo 리스트까지 전부 제가 짜고 관리를 합니다. 노션 관리 페이지 https://devchpark.notion.site/I-S-L-Management-03be7a6c031c4b98b42df1e7129f0143 I.S.L. Management A new tool for teams & individuals that blends everyday work apps into one. devchpark...

세상에는 다양한 사람들이 있고 이렇게 다양한 사람들이 낸 아이디어를 통해 여러 프로젝트들이 존재해요. 그동안은 항상 배우기 좋다는 이커머스 프로젝트만 진행하다 이젠 정말로 내가 만들고 싶은 "나 다운 프로젝트"를 해보자라는 생각이 들어 프로젝트 ISL 을 기획하게 되었습니다! 그렇다면 프로젝트 ISL 이 뭐냐? 프로젝트 ISL 을 설명하기에 앞서 주인장 블로그의 제목은 다음과 같습니다. 블로그이름을고민하다보니이거제목의길이가어디까지일지궁금하게되어이렇게해봤습니다 예전에 다니던 부트캠프의 한 멘토님이 보시더니 이런 말을 해주셨던 게 기억이 나네요. 사실 전 장난치는 것을 매우 좋아한다는 것을 설명 전에 미리 말씀드려 이 프로젝트에 설명에 대한 마음의 준비(?)를 시켜드리기 위해 이렇게 길게 한번 주인장에 대해..