![]()
Vue3 프로젝트 진행중 위와 같은 에러 메시지를 만났다. 혹시나 미래의 내가 잊어버리지 않게 하기 위해 기록한다. Uncaught (in promise) DOMException: Failed to execute 'insertBefore' on 'Node' 상황은 이랬다. props로 데이터를 던져주고, 그걸 자식 컴포넌트에서 v-for로 화면에 보여주고 있었다. 실제 에러 메시지는 아래와 같았다. 해결법은 사실 간단했다. div로 한번 더 감싸주기! 나는 v-for를 실행하는 div 태그가 가장 상위의 태그였고, 그것이 문제였다. 예를 들어, 아래의 코드를 보자. 기존에 내가 했던 방식이었다. {{list}} 위의 코드를 아래처럼 바꿔주자. {{list}}
![]()
RTSP 서버를 다루다가 다시 만나게 된 TCP, UDP. 비 전공자인 나도 이해 할 수 있도록, 각각이 무엇을 의미하고 언제 사용되는지 정리해보자. (참고로 RTSP는 TCP를 사용한다... 이것때문에 날린 시간이...🥲) TCP, UDP는 OSI 7계층 중 전송 계층에서 사용하는 프로토콜을 의미한다. 7계층 중 어디에 전송계층이 있는지 알고 싶다면 아래 그림을 참고하자. 두개의 프로토콜을 비교하기 이전에, 각각에 대해 먼저 알아보도록 하자. TCP(Transmission Control Protocol)? TCP를 그대로 번역하자면, 전송 제어 프로토콜 이다. 이것만으로는 어떠한 특징을 가지는지 정확히 알 수 없으니 좀 더 자세히 알아보자. [ TCP/IP ] 우선, 한번쯤 들어봤을 TCP/IP 라는 ..
매번 Vue Project 생성 할 때 마다 발생하는 multi-word 컴포넌트 네이밍 에러를 해결하는 방법을 정리해보자. 원인 원인은 당연하게도 Component 네이밍을 하나의 단어로 했기 때문이다. 해결책 해결책은 공식 홈페이지에 나와있다. 참고링크: https://eslint.vuejs.org/rules/multi-word-component-names.html vue/multi-word-component-names | eslint-plugin-vue eslint.vuejs.org 공식 홈페이지에서는 ignores에 배열로 내가 원하는 컴포넌트 네임을 하나씩 넣어주라고 한다. package.json 파일에 eslintConfig 부분을 수정해주면 되는데, 아래코드는 Streaming.vue라는 컴..
![]()
새로운 스프링 프로젝트를 생성했는데, 다음과 같은 에러가 발생하였다. 원인과 해결 방법은 간단하다. [원인] 1. 자바 경로 설정 오류 2. 자바 버전 맞지 않음 [해결 방법] 나의 경우 vscode를 사용하고 있었기에, settings.json("command + ," 눌러 설정에서 settings.json)에 들어가서 경로를 확인했다. 아래처럼 정상적으로 설정되어져 있었다. "spring-boot.ls.java.home": "/opt/homebrew/Cellar/openjdk@17/17.0.6/libexec/openjdk.jdk/Contents/Home", build.gradle에서 자바 버전을 확인했다. 아니 왜 버전 20으로 되어져 있지? plugins { id 'java' id 'org.sp..
![]()
이번 포스트에서는 내가 원하는 아이콘을 지도 위에 출력 하는 방법에 대해 정리 해 보고자 한다. 최종 결과물은 아래와 같을 것이다. png파일을 이용한 marker와 단순한 동그라미 marker를 지도에 출력 해볼 것이다. 만약 그 이전 단계에 대해 모른다면, 지난 포스트들을 참고하자. 지난 포스트에서는 1) OSM 지도를 출력하는 방법, 2) 클릭 이벤트를 등록하는 방법에 대해 정리했었다. 목차는 아래와 같다. StepbyStep 1. Feature 생성.(Point, LineString, CustomFeature) 2. VectorSource를 생성하여 Feature를 주입. 3. VectorLayer를 만들고, VectorSource를 주입해준다. 4. VectorLayer를 Map 객체에 주입해 ..
문제 상황 대량의 데이터를 insert 하는 로직이 있었는데, 계속 데이터 일부분이 누락되는 현상이 발생 하였다. 총 400row가 insert 되어야 하는데, 380개 정도만 insert 되는 식이었다. 내가 insert하는 방식은 아래와 같았다. public Flux setDatas(List dataList){ repository.saveAll(dataList); } repository는 아래처럼 R2DBC Repository를 상속받아 사용하였다. public interface TestRepository extends R2dbcRepository 해결 방법 기존의 Iterable을 바로 인자로 넘기는 방법에서, 아래처럼 Flux형태로 바꾸어 saveAll 하는 방식으로 바꾸니 정상적으로 작동함을 볼..
