YumeHANA YUME'S DEV

검색한 장소를 카카오 지도에 표시하기 위해서 카카오지도 api를 활용했다. 카카오 개발자 센터에서 api를 발급받고 난후 카카오 지도는 Javascript Key를 사용한다.Initializedkakao sdk를 사용하기위해 해당 라이브러리를 설치해준다.react-kakao-maps-sdk는 kakao map을 react에서 편하게 쓸 수 있게 되어있는 라이브러리이어서좀 더 편하게 사용할 수 있다. 예전에는 ref로 직접 참조해서 사용했었는데 해당 라이브러리를 사용하면 단순히 컴포넌트만 불러와서 사용할 수 있어서 편하다.npm install react-kakao-maps-sdk 이후 .env.local파일에 환경변수를 등록해준다.앞에 NEXT_PUBLIC을 안붙히면 route에서만 해당 환경변수를 불러올..

네이버랑 카카오 api를 활용하여 데이터를 가져오는 프로젝트를 하고 있는데이 경우에 계속 api를 호출하면 횟수가 금방 줄어들기때문에 이를redis를 활용하여 캐시 관리하여 횟수를 줄이고자 했다. upstash를 활용하여 redis를 사용하기로 했다.Upstash는 Redis나 Kafka를 서버리스 방식으로 사용할 수 있는 서비스이다.https://upstash.com/ Upstash: Serverless Data PlatformUpstash is a serverless data platform providing low latency and high scalability for real-time applications. Optimize your data infrastructure with Upstash'..

db를 사용하기 위해 간단한 정보를 저장할 것이기에 무료 클라우드 DB인 mongoDB를 사용하기로 했다. Installment우선 mongoDB를 사용하기 위해 mongoDB라이브러리를 설치npm install mongodbInitalizedmongoDB 페이지를 에서 connect 버튼을 누르면 connect정보를 준다. 이를 .env.local에 환경변수를 등록 이때 env.local에 환경변수를 저장할때는 따옴표 안에 넣어서 사용 이상하게 따옴표안에 안넣으면 계속 DB연결에서 오류가 발생했다. 이후 mongoDB util파일을 만든다.이는 매번 DB를 호출할때 DB를 연결을 하지 않기 위해서처음 실행했을때 해당 유틸이 실행되면서 client instatnce에 연결정보를..

채팅 기능을 구현하기 위해 무료로 사용할 수 있는 소켓을 찾아서 이걸 활용하고자 했다. https://ably.com Login to your Ably dashboardAbly provides a suite of APIs to build, extend, and deliver powerful digital experiences in realtime. Organizations like Toyota, Bloomberg, HubSpot, and Hopin depend on Ably’s platform to offload the growing complexity of business-critical realtime dataably.com 우선 ably에서 회원 가입을 한 후 새로운 프로젝트를 생성ably에서 발급..

next js 에서 svg icon사용할때는 SVG 아이콘을 컴포넌트로 직접 만들어서 사용하는 방법과 webpack을 이용해서그냥 사용하는 방법이 있는데svg를 추가할때마다 계속 컴포넌트로 만들어주는게 귀찮을 것같고,vue처럼 svg icon컴포넌트를 만들까 하다가 지금 진행하는 프로젝트에서는 svg icon을 많이 쓰지는 않을 것같아서 그냥 진행하기로 했다. Installment우선 webpack을 설치npm install --save-dev @svgr/webpack 이후 next.config.ts 파일에서 turbopack에 아래 규칙을 넣어준다.turbopack을 사용하면 turbopack에 규칙을 넣어줘야하고, turbopack을 사용하지 않으면 webpack에 규칙을 넣어주면 된다.import ..

로딩하는 과정을 표현하기 위해서 spinner를 이용spinner component는 이렇게 만들어서 사용 그럼 이런 식의 모양의 spinner 가 나오며 border는 스피너의 크기이며, border-top-color는 spinner의 로딩바 색상을 나타낸다.그럼 spinner는 기본적으로 로딩 시작 전후로 나뉘어서 나타났다가 사라져야하므로 이 기능을 구현 하기 위해 true false변수를 사용store를 사용하여 spinner의 렌더링 여부를 결정const loadingSpinner = ref(false); 사용시에는 이 loadingSpinner의 값만 타이밍에 맞춰서 바꿔주기만 하면 된다.하지만 단순히 이렇게 설정한 경우에는 바로 요청시 spinner가 돌면 결과가 엄청 빨리 return되는 ..

input태그를 사용하다가 입력한 크기만큼 자동으로 조절이 안돼서직접 함수를 만들어서 처리하고 이것저것 해보았지만 원하는 느낌이 안나오다 찾아보니 간단하게 해결할 수 있었다. field-sizing: content 를 활용하면 input의 width값이 자동으로 조절이 된다.input { field-sizing: content; min-width: 50px; } 이처럼 해당 css만 넣어주면 알아서 input의 width값이 자동으로 적용된다.추가적으로 min-width값으로 placeholder의 크기를 고려해서 설정해준다. field-sizing 속성은 사용자가 직접 데이터를 입력하는 요소에만 적용이 되며, div나 span 같은 이런 요소에는 적용이 되지 않는다.따라서 UI컴..

date-picker를 찾다보면 대부분의 date-picker가 dropdown형식으로 되어서 vcalendar로 달력으로 바로 날짜를 선택할 수 있도록 기능을 구현 VCalendar를 사용하면서 css 작업이 생각보다 다른 라이브러리보다 좀 건드리기가 복잡했기에혹시 css설정 관련해서 필요한것이 있으면 알려드리겠습니다.Installmentvcalendar docs를 보며 진행https://vcalendar.io/getting-started/installation.html vcalendar를 사용하기 위해 라이브러리를 설치npm install v-calendar@next @popperjs/core 전역으로 VCalendar를 전역으로 사용하기위해 main에서 전역으로 VCalendar 플러그인을 등록im..