![]()
Vanilla Typescript 환경에서 `Leaflet`을 이용해 지도를 불러와봅시다. Leaflet `leaflet`은 지도 타일(이미지)와 GeoJSON을 비롯한 다양한 형태의 지리 정보를 웹에 표현하는 JS 라이브러리 입니다. 지도 라이브러리에는 leaflet 외에도 `OpenLayers`라는 라이브러리로도 있습니다. OpenLayers는 Leaflat 보다 더 많은 기능을 기본적으로 제공합니다. 단순히 웹에서 지도를 보여주고 지도에 데이터를 표시하는 프로젝트를 진행할 것이기에 Leaflet을 선택했습니다. 초기 세팅 먼저 `vite`을 이용해 vanilla Ts 환경을 세팅합니다. npm create vite@latest ./vanillaTs-leaflet npm i 설치가 완료됐으면 `lea..
![]()
React에서 드래그로 요소 크기 조절하기 KaTeX Playground에서 저장된 수식이 길면 사이드바를 넘어 안 보이는 경우가 있습니다. 드래그를 통해 사이드 바의 크기를 조절할 수 있는 기능을 추가했습니다. 드래그 기능 추가 작동 원리 먼저 드래그할 부분에 실제로 드래그할 요소를 생성합니다. 이 요소를 엣지라고 부르겠습니다. 엣지를 클릭하면 드래그가 시작되고 드래그에 따라 사이드바의 너비를 변경해 줄 겁니다. 엣지의 `mouseDown` 이벤트는 드래그의 시작을 알립니다. 드래그가 시작되면 페이지 어디서나 마우스가 움직이면 사이드바를 resize 하도록 document의 `mouseMove`이벤트에 resize 이벤트 리스너를 추가합니다. 마우스가 움직이면 `mouseMove`이벤트가 발생하고 사이..
![]()
KaTeX Playground 블로그를 글에 수식을 적는 일이 많아 KaTeX를 자주 사용합니다. 매번 미리 보기로 확인하는 것이 번거로워 바로 수식을 확인할 수 있는 `KaTeX playground`를 제작했었습니다.(관련 글) 사용하면서 예전에 썼던 문법을 찾는 일이 잦았고 수식을 저장하는 기능을 추가 해야겠다는 생각이 들었습니다. 수식을 저장, 삭제, 복사하는 기능을 추가했고 저장한 수식을 URI를 통해 공유하는 기능도 추가했습니다. URI로 공유하기 때문에 다른 사람에게 보내기도 쉽고 URI만 클라우드에 적어두면 KaTeX Playground도 클라우드를 이용하는 것처럼 사용할 수 있습니다. 예시로 제가 작성한 수식을 공유하는 링크를 올려봅니다. 사이드바에서 저장되어 있는 수식을 확인해 보세요. ..
![]()
개인 프로젝트를 진행하던 도중 데이터베이스의 쿼리 실행 시간을 비교할 필요가 생겼습니다. 쿼리 실행 시간 측정 기능을 제공하는 패키지가 당연히 있을 줄 알았지만 찾지 못했고 저와 같은 기능을 찾는 사람들이 많다는 것을 알게 되어 패키지로 제작하게 되었습니다. 패키지 제작 이유부터 중간에 했던 시행착오들을 포함한 패키지 제작과정을 기록해 볼까 합니다. ❗️이 글은 2022년 2월에 작성된 글을 블로그를 리뉴얼하며 다시 작성한 글입니다. 노드에서 MySQL 쿼리 실행 속도 측정 MySQL의 쿼리 실행속도를 노드에서 측정하는 법을 검색해 보면 아래와 같은 방법이 나옵니다. // 시작시간 var start = new Date().getTime(); // 쿼리 실행 connection.query(query, fu..
![]()
회원가입 로직에서 생긴 Promise 비동기 DB 처리와 에러 처리 고민 고민 우선 채팅을 구현하기 앞서 회원가입과 로그인을 먼저 구현했다. 고민을 얘기하기 전 상황에 대해서 설명해보면 다음과 같다. 먼저 회원가입은 아래와 같은 절차로 진행된다. 이메일, 닉네임, 비밀번호의 형식을 확인 이메일, 닉네임 중복확인(DB) 비밀번호 해쉬화 새 유저 생성(DB) 응답 이 과정에서 이메일, 닉네임 중복확인, 비밀번호 해쉬화, 새 유저 생성은 비동기 작업으로 이루어진다. 첫 번째 고민은 비동기처리를 하나하나 순서대로 await await await으로 받아 동기와 다름없이 처리하고 싶지 않았다. 먼저 비동기 작업을 모두 프로미스로 받은 후 나중에 한 번에 await으로 받고 싶었다. 처음 생각한 방법은 이메일, ..
![]()
가볍게 pug로 front end를 개발하다 결국 react로 전환하게 되었다. pug에서 react로 react를 몇 번 써봤고 state, props에는 익숙하지만 context API, routing은 개념만 알고 사용해 본적이 몇 번 없어 조금 더 써보고 나중에 프로젝트할 때 react를 써야지 하는 마음에 pug로 개발을 시작했었습니다. 아무래도 html, css, vanillaJS에 익숙한 저에게는 pug는 손발처럼 편했습니다. 하지만 pug로 개발하던 중 이럴 바에 찾아보면서 react로 하자 라는 생각이 들어 react로 전환하게 되었습니다. pug에서 느낀 불편함 pug에서 layout과 include를 적절하게 사용하면 react처럼 컴포넌트 단위 개발을 할 수 있습니다. 단순한 화면..
![]()
데이터베이스 구조부터 잡고 sequelize와 MySQL query를 이용해 스키마를 생성해보자! 데이터베이스 저는 서비스를 만들 때 기능들을 구상하고 인터페이스를 대충 생각 해보고 데이터 베이스를 설계하는 편입니다. 기능 구상은 저번 포스트에서 했고 인터페이스는 크게 신경 쓰지 않을 계획이니 바로 데이터베이스를 설계해 보겠습니다. 우선 채팅 서비스에 필요한 데이터부터 생각해보면 유저, 대화방, 메시지 정도가 있습니다. 모든 테이블에 createdAt, updateAt, deletedAt을 추가 해 시간을 이용해 대화방에서 나갔다가 다시 접속했을 때 나가기 전 메시지를 불러오지 않을 계획입니다. 대충 컬럼을 생각해봤으니 관계를 맺고 정규화를 통해 나은 방법을 찾아보겠습니다. pseudo ERD '메시..
![]()
canvas API와 nodeJS, MySQL로 간단한 웹게임을 만들어보자! Canvas로 슈팅게임 만들기 기말고사 기간 공부가 하기싫어 vs code를 열고 이짓 저짓 하다가 간단한 게임을 만들어 보기로 했다. 즉각적인 결과를 얻을 수 있고 로직도 짤 수 있는 canvas가 시험기간에 공부하기 싫을 때 놀기 적당해 보였다. 먼저 canvas를 써본적이 없으니 기본적인 사용 방법을 공부하기 위해 유투브에서 영상을 찾아봤다. 이 영상을 보고 만들었으며 추천한다. 영상을 보며 따라 만든 후 AWS EC2에 배포해 친구들에게 알려줬고 점수 스크린샷을 찍어 서로 자랑하는 모습을 보고 점수를 저장하는 서버를 만들기로했다. 이 글은 시험이 끝난 뒤 영상을 안보고 만들 수 있는지 스스로 테스트도 해볼겸 처음부터 리..
![]()
당근마켓 서버를 클론해보자! 당근마켓 서버 클론 nodeJS를 이용해 당근마켓 서버를 클론 했다. 리펙토링하며 블로그에 글로 정리해볼까 한다. 살면서 처음 만들어본 API서버이기 때문에 세상에 자랑하고 싶지만 부족한점이 많다. 나중에 이 글을 읽으며 코드를 보고 부끄러울 수 있지만 몇 줄 정도는 자랑 스러워 할 코드가 있지 않을까 하며 조심스럽게 기록을 남겨본다. 코드 외에도 당근마켓 클론의 전체적 과정을 담아보겠다. 블로그에는 api별로 코드를 뜯어와 붙여 포스트 하고 깃헙으로 전체를 공유 하겠다. 다시 한번 말하지만 첫 api서버이기 때문에 부족한점이 많다. 혹시 읽으시다가 불편하신 점, 마음에 안드시는 점, 개선이 필요하거나 부족한 부분이 있다면 메일, 쪽지, 댓글 등으로 알려 주신다면 정말 감사하..
![]()
당근마켓의 어플의 페이지별로 sql쿼리를 짜보자! 한방쿼리 SQL쿼리 연습을 위해 당근마켓의 각 페이지에 필요한 모든 데이터를 가져오는 한방쿼리를 짜보려고한다. 저번에 만들었던 당근마켓 ERD를 바탕으로 데이터베이스를 만들고 각 페이지 별로 한방쿼리를 짜보자. 당근마켓 클론의 전체적인 진행 상황이 궁금하시다면 이 글에서 확인 하실 수 있습니다! 홈 메인 페이지 select a1Name as myLocation, P.productIdx as productIdx, title, photo, sellerNickName, price, -- format(price, N'#,0') A1.name as productLocation, case when P.createdAt P.updatedAt then '끌올' else..
![]()
당근마켓의 데이터베이스를 클론해보자! 당근마켓 DB 설계 공간데이터를 많이 다루는 과 특성상 빅데이터를 많이 다루기는 하지만 그런 데이터들은 실제 서비스에서처럼 많은 관계를 갖고있지는 않다. 따라서 관계형 데이터베이스를 이해하고 실습하기위해 당근마켓의 데이터베이스를 클론해보자. 대상을 당근마켓으로 정한 이유는 플렛폼 어플리케이션에서 사용하는 기능이 대부분 들어있기 때문이다. 채팅은 socket을 사용하겠지만 DB 공부가 목적이니 데이터베이스로 구현했다. 당근마켓 클론의 전체적인 진행 상황이 궁금하시다면 이 글에서 확인 하실 수 있습니다! ERD 학교에서는 ER win을 사용했었다. 이번에는 Quick DBD라는 툴을 사용했 것이다. + 수정 (2021.10.05) 수정사항 (1) 주소 원래는 User 에..
