post-thumbnail

[JS] click Event 와 버블링 활용 그리고 Memory 절약

Front 개발을 하다보면 click,keyboard 등등의 event를 숙명적으로 사용하게 된다. 근데 이것들을 사용하다보면 이벤트가 두번 씩 실행되거나, 버블링 같은 다양한 문제를 직면하게 된다. 그리고 이벤트를 발생시키는 방법이 addEventListner, o

2023년 9월 10일
·
0개의 댓글
·
post-thumbnail

Google Map Maker 종류에 따른 속도 비교

1. 서론 지도기반 웹 사이트를 사용하다보면 문서도 잘 구성되어 있고 사용성도 높은 Google Map API 사용한다. 그리고 지도를 사용하면 필연적으로 만나게 되는 기능이 Marker를 지도 위에 뿌리는 기능이다. 간단한 몇개의 Marker를 뿌리는 것은 서비스에

2023년 8월 18일
·
0개의 댓글
·
post-thumbnail

[Reactive Spring] 공부해서 실전에 적용하기 # 1 - 이해하기

Reactive Spring 내년에 진행될 프로젝트의 일부 내용이 육상,해상,항공 데이터를 실시간으로 받아서 수집하고 해당 데이터를 표출하는 내용이 있다고 한다. 데이터를 수집할 때 만약 기존의 Spring의 방식인 블로킹 방식으로 진행할 경우 접속자 수 증가에 따

2023년 8월 15일
·
1개의 댓글
·
post-thumbnail

선배들의 습관 훔치기

1. 리팩토링 할 때 주의 할 사항 프로젝트가 막바지를 향해갈 때 쯤 나는 리펙토링을 통해서 코드를 간결하게 만들었다.(내 생각) 그리고 어느날 부장님께서 잠시 부르시더니 세가지 케이스를 보여주시며 어떤게 제일 빠를 거 같은지 여쭤 보셧다 당연히 1, 2, 3 순

2023년 7월 16일
·
0개의 댓글
·
post-thumbnail

[d3.js] d3를 이용하여 google map 에 따릉이 대여/반납 flow 표현

이전에는 서울지리데이터.geojson 을 google map 위에 overlay Layer 로 올리고 따릉이 대여소 위치를 표현하였다. 그리고 오늘은 따릉이를 어디서 빌려서, 어디에 반납하는지 그 흐름을 표 나타내 보려고 한다. 오늘의 작업을 위해서는 두가지 단계가

2023년 5월 28일
·
0개의 댓글
·
post-thumbnail

부장님이 알려주신 주니어 때 가지면 좋은 개발 습관

1. 서론 이번에 프로젝트를 진행하면서 부장님과 둘이서 진행했는데, 아직 연차가 낮은 나의 개발하는 모습이 안쓰러웠는지 조용히 회의실로 부르셨다. 그러곤 회의실에서 지금 진행 중인 프로젝트에 대해서 얼마나 내가 파악을 하고 있는지 하나씩 하나씩 물어보시기 시작했고 나

2023년 5월 22일
·
0개의 댓글
·
post-thumbnail

subqeury 와 join on의 차이를 느끼다. (조회 속도도 빨라지네..)

1. 서론 화창하던 어느날. 여느때와 다름없이 개발을 하던 중 API호출 중 조회 해 올 때 갑자기 결과 값이 두개 이상이다. 라는 error messsage를 마주하였다. 왜 그런지 원인을 파악하고 쿼리를 수정을 하여 현재는 정상적으로 동작하고 그 원인과 해결한

2023년 5월 21일
·
0개의 댓글
·
post-thumbnail

[d3.js] google map에overlay 하여 d3.js 도형 올리기

google map 을 띄우기 위해서는 API-key를 발급받아야 한다. api key 발급 받는거는 google map platform을 살펴보면 받을 수 있다. CSS / div 생성 <div>요소 안에 google map을 띄우는 방식이기 때문에 width

2023년 4월 5일
·
0개의 댓글
·
post-thumbnail

[d3.js] 서울시 따릉이 대여소 위치 표현 (with QGIS)

0. 사전 지식 0.1 geojson geojson은 지리 데이터를 json 형태로 encoding한 것이다. 여기엔 feature라는 json 객체들을 담고 있고, feature 객체는 지형의 경계를 coordinates 속성에 저장하고 지형에 대한 메타 데이터를

2023년 4월 4일
·
0개의 댓글
·
post-thumbnail

[d3.js] d3 랑 친해지기 - 기초

데이터 주도문서의 약자(Data-Driven Documnt)웹에서 다양한 형식의 데이터를 이용하여 시각화를 할 수 있도록 도와준다. CSS3, HTML5, SVG등 웹 표준 기능을 최대로 활용하여 독점적인 기술은 피하고 커다란 융통성을 제공 => d3.js의 근본적

2023년 4월 3일
·
0개의 댓글
·
post-thumbnail

동시에 여러 API 호출 시 response 순서 보장하는 방법(reduce, promise)

1. 서론 프로젝트 진행 시 한번에 약 40개 정도의 API를 호출을 해야하는 상황이 있었다. 생각만해도 많은 문제가 발생할 거 같았는데, 협업의 요구사항이라서 어쩔 수 없이 진행을 하였다. 역시나 많은 문제가 있었지만, 그 중 운영기 반영 시 여러개의 API 호출 시

2023년 3월 28일
·
0개의 댓글
·
post-thumbnail

[Javascript] querySelector와 getElementById 그리고 HTMLCollection과 NodeList

서론 개발을 하다보면 특정 node를 선택해서 동적으로 작업을 하는 경우가 있다. 이때 사용하게 되는게 quertSelector, getElementById를 사용하게 된다. 근데 항상 사용할 때마다 이 둘은 무슨 차이가 있는지 궁금해서 궁금증을 해결해 보았다. g

2023년 3월 19일
·
0개의 댓글
·
post-thumbnail

개발공부 시 Git 협업 연습 방법 공유

서론 2년 전 개발 공부를 할 때 Git의 중요성에 대해서 많이 듣곤했다. 하지만 개발을 막 시작한 입장에서 어떻게 공부를 해야할지 막막했었다. 그래서 같이 공부하는 동료들과 여러가지 상황을 가정하고 그 상황에서는 어떤 이슈가 발생하는지 하나 씩 테스트 해보고 상황 별

2023년 3월 13일
·
0개의 댓글
·
post-thumbnail

[Vue.js] Html2Canvas로 PDF & Print export 하기

프로젝트를 진행하다보니 특정 화면의(컴포넌트) 전체 (스크롤 아래까지)를 스냅샷 뜨고 싶다는 고객의 요구 사항이 있었다. 지도 지반의 서비스를 구축하고 있어서 고객은 지도까지 완벽하게 나오길 바랬다. 그래서 canvas를 생성하여 png, pdf, print 까지 할

2023년 3월 11일
·
0개의 댓글
·
post-thumbnail

산소같은 HTTP 개념 공부

프로젝트를 진행하면서 한번에 최대 40개 가량 API를 호출하여 테이블과 차트를 그리는 상황이 있었다. 어떻게든 index를 먹여서 개발을 완료하고 운영 서버에 배포를 했는데 이게 왠걸?로컬과는 다르게 테이블과 차트의 순서가 엉망이 되어 있었다. 이 문제는 어떻게든 해

2023년 3월 9일
·
0개의 댓글
·
post-thumbnail

프로젝트 issue 기록 (feat. SPA 사이트 권한 설계)

글 작성 배경 작년부터 대기업 프로젝트를 Vue를 이용하여 구축하고 있다. 구글 맵 기반으로 구축된 이번 프로젝트를 통해 다양한 문제가 있었고, 그 중에 나를 너무 힘들게 했던 문제들을 하나하나 정리해보고 기록해보려고 한다. 권한 관리 비교분석 비동기 처리 프로젝

2023년 3월 7일
·
0개의 댓글
·