데이터베이스 2023. 11. 4.
[DB] 카탈로그와 스키마 차이 (MySQL 에 카탈로그가 없는 이유)
📣 들어가며 최근 JDBC로 (정확히는 node-jdbc) 테이블 목록을 가져올 일이 있었는데, getTables api 를 요청해도 빈 배열만 반환됐다. 분명 테이블들이 있는데도... 한참의 삽질 끝에 getCatalogs 또는 getSchemas api 를 사용 후, 스키마나 카탈로그 정보로 테이블 목록을 가져와야한다는 걸 알 수 있었다. 그런데 카탈로그가 있는 DB가 있고, 없는 DB가 있었다. 때문에 카탈로그가 없다면 스키마를 적절히 조회해서 그 조회 정보로 테이블을 가져왔어야했는데, 도통 감이 잡히지 않아 이번 포스팅을 작성해본다. 사실 이런 의문점은 DBeaver를 쓸 때부터 갖고 있던 생각이었다. (다른 DB 툴도 비슷하리라고 생각된다.) DBeaver를 사용하다보면 어떤 DB는 Databa..
JAVA 2023. 10. 29.
JDBC란?
📢 들어가며 최근에 node-jdbc를 사용하면서 헷갈렸던 JDBC api 와 인터페이스들을 다시 복습하고자 포스팅을 작성한다. 이번 포스팅에선 JDBC에 대해 알아본다. 🤝 JDBC란? Java Database Connectiviy 의 줄임말이다. 직역하면, 자바 데이터베이스 연결성이란 뜻이다. 결론적으로 JDBC는 Java 라이브러리이다. Java프로그램과와 DB 간의 연결을 위한 Java API의 집합이다. 라이브러리, API 개념을 잘 모르겠다면 아래 두 포스팅을 참고. 프레임워크(Framework), 라이브러리(Library), 플러그인(Plug-in), 모듈(Module)의 차이 SDK, API의 개념과 차이점 JDBC는 JDK에 포함되어 있기 때문에, JAVA를 사용한다면 별도의 다운로드 과..
기타 2023. 7. 26.
[Quasar + Electron] node-jdbc 적용 시 발생하는 오류 해결 방법 (feat. node-java)
📢 환경 Node: v16.15.0 Quasar: v2.7.5 electron: v18.3.5 node-jdbc: v0.7.6 🚨 문제 Quasar + Electron 환경에서 node-jdbc 라이브러리를 install 및 import 하자 실행 및 빌드가 되지 않는 문제 발생. 이 문제는 Electron 환경에 node-java 를 사용하고자 했을 때도 똑같이 발생할 것이다. 아래에서 설명할 문제와 해결방법은 서로 연계되고 있으니 참고. 🚨 에러 코드 ...라이브러리 경로 was compiled against a different Node.js version using NODE_MODULE_VERSION 93. This version of Node.js requires NODE_MODULE_VERSI..
기타 2023. 7. 19.
[Quasar + Electron] 빌드 시 Error: EBUSY: resource busy or locked, unlink... 에러 해결 방법
🚨 상황 $ quasar build -m electron 위 명령어로 퀘이사로 일렉트론 빌드를 하려고 하였으나 아래와 같은 오류가 뜨며 빌드가 중단됨. Error: EBUSY: resource busy or locked, unlink 'nsis 압축 파일 경로' UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "undefined". 버전 업을 위해 빌드를 하는 것이라..
자바스크립트 2023. 7. 9.
PEG.js 란? 개념과 사용법 (feat. Peggy)
📣 들어가며 이번 포스팅에선 PEG.js 의 설치 및 사용법에 대해 다룬다. PEG.js 란? PEG.js 는 Parsing Expression Grammer(PEG) 를 기반으로 하는 자바스크립트 파싱 라이브러리이다. PEG.js 를 사용하면 문자열이 특정 문법 규칙을 따르는지 검사하거나, 구문을 분석하여 구조화 데이터로 변환하는 작업을 수행할 수 있다. PEG.js 설치 및 사용 방법 PEG.js 설치 PEG.js 는 어떤 변환 작업을 수행하는 컨버터이다. pegjs 라는 명령어로 .pegjs 라는 확장자 명을 가진 파일을 javascript 로 변환 시킬 수 있다. 또는, 프로젝트 내에서 PEG.js 를 주입하여 런타임 중 변환을 시킬 수도 있다. pegjs 명령어를 통해 변환을 시키려면 pegjs..
경제 2023. 6. 6.
청년버팀목전세자금대출 (HF 보증) 후기 (feat. 하나은행)
📣 들어가기 전에 나는 곧 독립한다. 첫 자취를 앞 두고, 내가 그랬던 것 처럼 다른 사람들에게 조금이라도 도움이 되었으면 하는 마음에 청년버팀목전세자금대출 후기를 포스팅해보려한다. 내게도 굉장한 경험이었던 만큼, 글을 쓰다보면 정보보단 사담이 많을 수 있을 듯 하다...ㅋㅋ 글 마지막에 최대한 요약해보겠음ㅎㅎ 🏠 집 구하기 나는 회사에서 1시간 거리에 부모님이 살고 계셨기 때문에, 취업하고 자취를 할 필요가 없었다. 하지만 출퇴근하다보니 1시간이 너무 길게 느껴져서 곧 자취를 계획했다. 월세는 회사 주변 시세가 너무 비싸서 내겐 대출 낀 전세만이 유일한 자취방법이었다. 차곡차곡 자취를 위한 돈을 모은 결과, 올해 초에 아, 이제 대출 끼면 대충 자취를 할 수 있겠군 할만한 경제적 여유가 생겼다. 그래서..
기타 2023. 4. 19.
ChatGPT란? GPT-4, GPT-3, GPT-3.5 와의 차이
📢 들어가며 요즘 IT에 관심이 없는 사람이라도 한번씩은 챗GPT 라는 말을 들어봤을 것이다. 챗GPT와 채팅을 하는 컨텐츠를 제작하는 유튜버도 보이고, 뉴스에서도 자주 언급되고 있다. 대충 챗(Chat) 이라는 말이 들어가는 걸 보면 채팅을 하는 어떤 것이라고 추측할 수 있는데, 챗Gpt 는 정확히 어떤 걸 의미하는 걸까? 이번 포스팅에선 요즘 핫한 챗GPT 에 대해 알아본다. 🧠 ChatGPT 란? ChatGPT 는 AI 기술로 구동되는 자연어 처리 도구이다. 자연어, 즉, 우리가 일상 속에서 사용하는 언어를 말한다. 쉽게 얘기하자면, 일상 속 언어를 구사할 수 있는 AI(인공지능)을 ChatGPT 라고 한다. 🧠 ChatGPT 사용법 https://openai.com/blog/chatgpt 위 Ch..
개인 프로젝트 2022. 11. 17.
맛집 지도 만들기(9) - 검색 기능 구현 (like, full text search)
📌 공지 본 포스팅 시리즈는 '맛집 지도 만들기' 라는 토픽으로 연재하고 있었으나, 개인적인 사정으로 더 이상 연재하지 않습니다. (변명을 좀 하자면... 최근에 부서이동을 하였는데, 현 부서에선 JAVA, Spring을 사용하지 않아 다른 언어나 기술 공부에 시간을 써야할 것 같습니다. 그리고... 바빠서 허둥대는 사이에 Vue2에서 Vue3로 버전업이 되면서 본 프로젝트 진행 메리트가 사라지게 되었습니다...) '맛집 지도 만들기' 프로젝트는 CRUD + 파일 첨부 + 페이징 + 검색 + 지도 기능 구현을 끝으로 마무리 되었습니다. 읽어주셔서 감사합니다. 질문과 피드백은 언제나 환영입니다. 😇 📢 들어가며 이번 포스팅은 지난 포스팅에서 이어진다. 지난 포스팅에선 페이징을 구현하였다. 이번 포스팅에선 ..
기타 2022. 10. 17.
카카오사태로 알아보는 DR 관련 개념과 용어
📢 들어가며 10월 15일 토요일 오후 3시 30분 경, 경기도 성남시 삼평동에 위치한 SK주식회사C&C 판교 캠퍼스 A동 지하 3층 전기실에서 화재가 발생했다. 이 과정에서 전원 공급이 끊겨 그 곳에 위치한 카카오 서버가 작동 되지 않아 카카오의 모든 서비스가 마비되는 사건이 발생했다. 나는 이 때 오랜만에 친구랑 서울 나들이를 했었는데, 애용하던 카카오맵이 동작하지 않아 집에 못 올 뻔했다. 😂 꽤 오래 복구 되지 못하길래 무슨 일일까 싶어서 SNS와 커뮤니티를 둘러보았다. 그 중 '카카오는 DR도 없냐?' 또는 '이중화도 안 되어 있냐?' 라는 글을 제일 많이 보았는데, 그 뜻이 궁금하여 찾아보게 되었다. 이번 포스팅에선 카카오톡과 같은 재해, 재난 상황 시 익혀두면 좋을 용어와 여러 추측들을 살펴..
개인 프로젝트 2022. 10. 13.
맛집 지도 만들기(8) - 리뷰 목록 페이징 구현
📢 들어가며 이번 포스팅은 지난 포스팅에서 이어진다. 지난 포스팅에선 파일 업로드 기능을 구현하였다. 이번 포스팅에선 주니어 개발자의 필수코스... 페이징 및 무한 스크롤을 이해하고 구현해볼 것이다. 사이드 바에 페이징 또는 무한스크롤로 구현된 리뷰 목록을 출력할 것이다. 개선된 코드가 많아 포스팅에서 다소 빠진 부분이 있을 수 있다. 모든 소스코드는 깃헙에서 확인할 수 있다! 🍜 기능 및 코드 보완 본격적인 구현에 앞서, 기존에 구현했던 코드를 살짝 수정했다. 🍥 메소드 명 변경 setInputState 라는 Vuex mutaion 메소드 명을 setIsDisabledInput 으로 수정했다. isDisabledInput 상태를 bool 데이터로 set 해주는 메소드 였는데, InputState 라는 ..
Vue.js/ESLint & Prettier 2022. 9. 27.
Vue CLI 프로젝트 ESLint, Prettier 적용 방법
📢 들어가며 이번 포스팅에선 "Vue CLI"로 설치한 프로젝트에 ESLint와 Prettier를 적용하는 방법에 대해 다룬다. 맛집 지도 토이 프로젝트를 진행하며 겪었던 삽질을 정리하고자 글을 작성해본다. 👑 ESLint란? ECMAScript/JavaScript 코드 버그를 식별/회피하기 위한 도구. 버그를 잡음과 동시에 포맷 기능도 지원하고 있다. 코드 품질 에러를 잡는 데 도움을 준다. (ex. no-unused-vars , no-extra-bind , no-implicit-globals , prefer-promise-reject-errors...) Vue-cli v3 이상에서는 자동으로 eslint 가 추가된다. 또는 vue create 시에 ESLint 옵션 선택으로 자동으로 설치가 가능하다...
개인 프로젝트 2022. 9. 15.
맛집 지도 만들기(7) - 이미지 파일 업로드 구현
📢 들어가며 이번 포스팅은 지난 포스팅에서 이어진다. 지난 포스팅에선 CRUD API를 적용하고, 지도에 리뷰를 출력하고 오버레이를 추가해 보았다. 이번 포스팅에선 사진 파일 업로드/다운로드(화면에 출력) 기능을 구현해볼 것이다. 참고로, 디테일한 부분은 포스팅에서 다소 빠졌을 수도 있다... 자세한 건 깃헙코드를 참고! 모든 소스코드는 깃헙에서 확인할 수 있다. 🍜 파일 저장 위치 선정 이미지 파일을 저장하는데엔 크게 두가지 방법이 있다. 파일 시스템 스토리지(storage) 에 업로드 하는 방법. DB엔 해당 파일 관련 정보(크기, 이름, 업로드 시간 등)를 저장. DB에 바이너리 형식으로 파일 자체를 저장하는 것. 어떤 방법을 선택해야할까 고민하다가 좋은 레퍼런스를 찾았다. 파일 저장 방식은 그 파..
알고리즘/leetCode 2022. 8. 23.
[leetCode] 169. Majority Element (Easy) 풀이
❓ 문제 Given an array nums of size n, return the majority element. 크기가 n인 배열 개수가 주어지면 가장 많은 요소를 반환하세요. The majority element is the element that appears more than ⌊n / 2⌋ times. You may assume that the majority element always exists in the array. 가장 많은 요소는 ⌊n / 2⌋번 이상 나타나는 요소입니다. 가장 많은 요소가 항상 배열에 존재한다고 가정할 수 있습니다. Example 1: Input: nums = [3,2,3] Output: 3 Example 2: Input: nums = [2,2,1,1,1,2,2] O..
알고리즘/leetCode 2022. 8. 17.
[leetCode] 136. Single Number (Easy) 풀이
❓ 문제 Given a non-empty array of integers nums, every element appears twice except for one. Find that single one. 비어 있지 않은 정수 배열이 주어지면 모든 요소는 하나를 제외하고 두 번 나타납니다. 그 하나를 찾으십시오. You must implement a solution with a linear runtime complexity and use only constant extra space. 선형 런타임 복잡성이 있는 솔루션을 구현하고 일정한 추가 공간만 사용해야 합니다. Example 1: Input: nums = [2,2,1] Output: 1 Example 2: Input: nums = [4,1,2,1,2] ..
자바스크립트 2022. 8. 8.
Node.js란? NPM이란? NVM이란? (feat. Express.js)
🐸 Node.js 란? 공식 문서에 따르면, "Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다." 라고 설명하고 있다. 💡 Chrome V8 JavaScript 엔진 구글에서 제작한 자바스크립트 엔진 여기서 자바스크립트 엔진이란 자바스크립트 코드를 실행하는 프로그램 또는 인터프리터를 뜻한다. 💡 JavaScript 런타임 런타임은 프로그래밍 언어가 구동되는 환경을 말한다. 즉, JavaScript 언어가 구동되는 환경. 종합하자면, Node.js는 Javascript 를 실행 시킬 수 있도록 하는 오픈소스 서버 환경이다. 로컬 컴퓨터에서 JavaScript 로 개발을 하고싶다면 Node.js 를 설치해야한다. 🤓 Java를 개발하기 위해 JRE(JVM..
네트워크 2022. 7. 27.
WebSocket이란? 개념과 동작 과정 (+socket.io, Polling, Streaming...)
📢 들어가며 직장에서 자동 업데이트 기능을 구현할 일이 생겼다. 누군가 웹의 데이터를 수정했을 때 다른 PC를 사용 중인 사람의 화면에도 해당 데이터가 자동으로 실시간 업데이트 되게하는 기능이었다. 나는 이 기능을 구현하기 위해 5초마다 한번 씩 데이터의 수정된 시간를 DB에서 가져왔고, DB에서 가져온 수정된 시간이 기존 수정된 시간과 다르다면 화면이 refresh 되도록 구현했다. (구현할 땐 몰랐는데, 이렇게 일정 주기로 통신하여 가져오는 방법을 Polling 이라고 한단다.) 그런데 대리님께서 이렇게 하는 것도 틀린 건 아니지만 웹 소켓을 사용하는 방법이 있다고 말씀해주셨다. 나는 웹 소켓에 대해 전혀 알지 못했다... 그래서 부랴부랴 공부하고 Polling 방식으로 구현된 코드를 웹 소켓 방식으..
네트워크 2022. 7. 25.
HTTP/HTTPS란? TCP, UDP, HandShake 개념 정리
🧣 HTTP란? HyperText Transfer Protocol 클라이언트와 서버 간 데이터를 주고 받기 위한 규칙(프로토콜)이다. 여기서 데이터는 텍스트, 이미지, 동영상 등 모든 종류를 말한다. HTTP 종류에는 TCP 와 UDP 방식이 있으며 80 포트를 사용한다. TCP Transmission Control Protocol. 1:1 연결을 지향하며 신뢰할 수 있는 통신을 제공한다. 여기서 1:1은 각각 클라이언트와 서버를 의미한다. 양 단에 연결을 수립한 뒤 데이터를 전송하고 연결을 종료한다. 일반적인 HTTP 통신은 TCP 방식을 따르고 있다. UDP User Datagram Protocol. 1:1 혹은 1:N 비연결을 지향하며 신뢰할 수 없는 통신을 제공한다. 여기서 '비연결' 이라는 말은..
알고리즘/leetCode 2022. 7. 25.
[leetCode] 69. Sqrt(x) (Easy) 풀이
❓ 문제 Given a non-negative integer x, compute and return the square root of x. 음이 아닌 정수 x가 주어지면 x의 제곱근을 계산하고 반환합니다. Since the return type is an integer, the decimal digits are truncated, and only the integer part of the result is returned. 리턴 타입이 정수이기 때문에 소수점 이하 자릿수는 잘리고 결과의 정수 부분만 리턴됩니다. Note: You are not allowed to use any built-in exponent function or operator, such as pow(x, 0.5) or x ** 0.5...
개인 프로젝트 2022. 7. 22.
맛집 지도 만들기(6) - 리뷰 지도에 표시하기 및 리뷰 수정, 삭제
📢 들어가며 이번 포스팅은 지난 포스팅에서 이어진다. 지난 포스팅에선 CRUD API를 구현해보았다. 이번 포스팅에선 구현했던 API를 적용하고 OpenLayers의 overlay 기능을 활용해 지도의 아이콘에 hover 기능을 추가할 것이다. 모든 소스코드는 깃헙에서 확인할 수 있다. 🍜 API 기능 모듈화 지도에 맛집 리뷰들을 출력시켜볼 것이다. 이를 위해 지난 포스팅에서 구현했던 /api/review/getReviews API를 활용하려한다. 그런데 활용하려니, 저번에 구현했던 try, catch 부터 스피너용 processingCount 까지 증가하는 코드를 반복적으로 구현해야하는게 보기 좋지 않은 것 같았다. 그래서 나는 이 부분을 모듈화해주기로 했다. frontend/src/common 경로에..
알고리즘/leetCode 2022. 7. 19.
[leetCode] 67. Add Binary (Easy) 풀이
❓ 문제 Given two binary strings a and b, return their sum as a binary string. 두 개의 이진 문자열 a와 b가 주어지면 그 합을 이진 문자열로 반환합니다. Example 1: Input: a = "11", b = "1" Output: "100" Example 2: Input: a = "1010", b = "1011" Output: "10101" ❗ 내 답변 /** * @param {string} a * @param {string} b * @return {string} */ var addBinary = function(a, b) { const digitA = getDigit(a); const digitB = getDigit(b); const digi..
알고리즘/leetCode 2022. 7. 14.
[leetCode] 66. Plus One (Easy) 풀이
❓ 문제 You are given a large integer represented as an integer array digits, where each digits[i] is the ith digit of the integer. 정수 배열 자릿수로 표현되는 큰 정수가 주어집니다. 여기서 각 자릿수[i]는 정수의 i번째 자릿수입니다. The digits are ordered from most significant to least significant in left-to-right order. The large integer does not contain any leading 0's. 숫자는 왼쪽에서 오른쪽 순서로 최상위에서 최하위 순으로 정렬됩니다. 큰 정수에는 선행 0이 포함되지 않습니다. Increm..
알고리즘/leetCode 2022. 7. 13.
[leetCode] 58. Length of Last Word (Easy) 풀이
❓ 문제 Given a string s consisting of words and spaces, return the length of the last word in the string. 단어와 공백으로 구성된 문자열 s가 주어지면 문자열의 마지막 단어 길이를 반환합니다. A word is a maximal substring consisting of non-space characters only. 단어는 공백이 아닌 문자로만 구성된 최대 부분 문자열입니다. Example 1 Input: s = "Hello World" Output: 5 Explanation: The last word is "World" with length 5. Example 2 Input: s = " fly me to the moon "..
Linux 2022. 7. 12.
리눅스, 쉘, 배시, 터미널 개념 정리
📢 들어가며 이번 포스팅에선 나 혼자 헷갈려하던... 리눅스, 쉘, 터미널 등의 개념 및 용어 정리를 해볼 것이다. 🐧 리눅스(Linux) 윈도우나 MacOS 같은 컴퓨터의 운영체제(Operating System). 💡 운영체제 (Operating System) 컴퓨터 하드웨어를 구동하고 사용자의 요청을 받아 여러가지 응용 프로그램을 실행시키는 프로그램 통상적으로 운영체제 그 자체라고 정의되어있긴 하지만, 사실 리눅스는 커널이다. 💡(kernel) 커널 운영체제(OS)의 주요 구성 요소. 컴퓨터 하드웨어와 프로세스를 잇는 핵심 인터페이스이다. 직역하면 '핵심'이라는 뜻이다. OS 내에 위치하고, 하드웨어의 모든 주요 기능을 제어하기 때문에 붙은 이름이다. 메모리 위에 항상 상주. 때문에 리눅스 커널 혼자..
알고리즘/leetCode 2022. 7. 12.
[leetCode] 35. Search Insert Position (Easy) 풀이
❓ 문제 Given a sorted array of distinct integers and a target value, return the index if the target is found. If not, return the index where it would be if it were inserted in order. 고유한 정수의 정렬된 배열과 대상 값이 주어지면 대상이 발견되면 인덱스를 반환합니다. 그렇지 않은 경우 순서대로 삽입된 경우 인덱스를 반환합니다. You must write an algorithm with O(log n) runtime complexity. 런타임 복잡도가 'O(log n)'인 알고리즘을 작성해야 합니다. Example 1 Input: nums = [1,3,5,6], t..
알고리즘/leetCode 2022. 6. 28.
[leetCode] 28. Implement strStr() (Easy) 풀이
❓ 문제 Implement strStr(). strStr()을 구현합니다. Given two strings needle and haystack, return the index of the first occurrence of needle in haystack, or -1 if needle is not part of haystack. 두 개의 문자열 needle과 haystack이 주어지면 haystack에서 needle이 처음 나타나는 색인을 반환하거나 needle이 haystack의 일부가 아닌 경우 -1을 반환합니다. Clarification: What should we return when needle is an empty string? This is a great question to ask dur..
알고리즘/leetCode 2022. 6. 27.
[leetCode] 27. Remove Element (Easy) 풀이
❓ 문제 Given an integer array nums and an integer val, remove all occurrences of val in nums in-place. The relative order of the elements may be changed. 정수 배열 nums와 정수 val이 주어지면 nums에서 val의 모든 항목을 제자리에서 제거합니다. 요소의 상대적 순서는 변경될 수 있습니다. Since it is impossible to change the length of the array in some languages, you must instead have the result be placed in the first part of the array nums. More form..
알고리즘/leetCode 2022. 6. 27.
[leetCode] 26. Remove Duplicates from Sorted Array (Easy) 풀이
❓ 문제 Given an integer array nums sorted in non-decreasing order, remove the duplicates in-place such that each unique element appears only once. The relative order of the elements should be kept the same. 내림차순으로 정렬된 정수 배열 nums가 주어지면 각 고유 요소가 한 번만 나타나도록 중복을 제자리에서 제거합니다. 요소의 상대적 순서는 동일하게 유지되어야 합니다. Since it is impossible to change the length of the array in some languages, you must instead have th..
개인 프로젝트 2022. 6. 19.
맛집 지도 만들기(5) - CRUD API 구현하기 (feat. Axios, 함수형 컴포넌트)
📢 들어가며 이번 포스팅은 지난 포스팅에서 이어진다. 지난 포스팅에선 클릭이벤트로 주소를 입력 받거나 출력하는 기능을 구현하였다. 이번 포스팅에선 본격적으로 백엔드 기능을 구현해볼 것이다. Spring Boot + MyBatis + MySQL을 연동하고 주소, 후기 및 별점을 저장하거나 불러오는 API를 만들어볼 것이다. 사진 파일 업로드까지는 이 포스팅에서 다루지 않는다. 파일을 다루는 방식이나 (ex. blob) Vue 의 slot 기능을 구체적으로 알아보기 위해 다음 포스팅에서 자세히 다뤄볼 예정이다. 모든 소스코드는 깃헙에서 확인할 수 있다. 🍜 Spring Boot, Mybatis, MySQL 연동 이 프로젝트의 첫번째 포스팅에서 언급했던 것처럼 MySQL 이 설치된 상태로 가정하고 진행한다. ..
개인 프로젝트 2022. 5. 16.
맛집 지도 만들기(4) - 지도 클릭 이벤트로 주소 입력 받기 (Nominatim API)
📢 들어가며 이번 포스팅은 지난 포스팅에서 이어진다. 지난 포스팅에선 글꼴, 아이콘 등 구체적인 UI를 구현했었다. 이번 포스팅에선 본격적으로 기능을 구현해볼 것이다. 지도를 클릭했을 때 주소를 입력 받을 수 있게하거나 주소를 입력하면 지도에 위치가 표시되도록 하는 기능을 구현할 것이다. 모든 소스코드는 깃헙에서 확인할 수 있다. 🍜 지도 클릭 이벤트 Openlayers는 지도 클릭 이벤트를 지원한다. 지난 포스팅에서 만들었던 olMap에 클릭 이벤트 기능을 추가해주는 방식으로 구현 가능하다. 일단 본격적인 기능 구현에 앞서, 지도에서 클릭한 부분의 위도, 경도를 받아와지는지 확인하자. olMap 을 생성해준 mounted 부분에, 아래 코드를 추가해보자. // ... import {fromLonLat,..
