티스토리

Nellie's Blog

검색하기

블로그 홈

Nellie's Blog

yeees.tistory.com/m

공부한 것을 기록하고 공유하는 개발 블로그입니다.

구독자: 16

방명록 방문하기

주요 글 목록

[MQTT] MQTTX 사용해서 일정한 주기로 웹소켓 메시지 전송하기 MQTT 웹소켓을 사용하는 도중, 프론트엔드 개발자에게서 통신모듈 디버깅이 필요하다고 하며 일정한 주기로 메시지를 보내달라는 요청이 들어왔다. (예를 들어, 2초에 한번씩) 어떻게 할까 알아보던 중에, MQTTX라는 프로그램이 있는 것을 알게되었다. MQTTX는 MQTT 프로토콜을 사용하는 클라이언트 애플리케이션으로, MQTT (Message Queuing Telemetry Transport) 메시지 프로토콜을 통해 메시지를 발행하고 구독하는 기능을 제공한다. MQTT를 다운받고, 커넥션 설정해주고, 쏴주면 끝이다. 1. MQTTX 다운받기https://mqttx.app/ MQTTX: Your All-in-one MQTT Client ToolboxMQTTX: A powerful, all-in-one .. 공감수 0 댓글수 0 2024. 8. 26.
[MQTT] Kafka → 웹 소켓 메시지 전송 테스트(Vue3으로 화면 만들어 테스트) 카프카에서 웹소켓으로 메시지를 전송하여 실시간 처리를 해야한다. 지금 나는 백엔드 개발자인데, 프론트에 내가 만든 mqtt 정보 (url, 인증정보, 포트 등) 을 제공해주어야 한다. 백엔드 단에서는 테스트가 모두 완료되었지만, 제공하기 전에, 내가 직접 vue 프론트 프로젝트를 만들어서 내가 보낸 카프카 메시지를 잘 받아오는지 확인하고 싶었다. 백엔드 간단한 코드와 vue 코드를 직접 작성하고, 테스트 하는 과정을 정리했다. 사용한 기술 및 버전 스프링 부트 : 2.5.4자바 : 1.8카프카 : 3.7.0MQTT : 1.2.5 (vue 에서는 5.9.1)vue : 3.2.13 백엔드 코드1. 차량 ID 별로 MQTT 토픽 생성하여 전송먼저 카프카 컨슈머에서 데이터를 param으로 받고,ob.. 공감수 0 댓글수 0 2024. 8. 9.
[Redis] 레디스 캐시를 사용하면 조회 성능이 몇 배 정도 빨라질까? (@Cacheable) 1. 레디스 캐시 안 썼을 때 조회 시간SecuritySupportSvcImpl @Override public List getLoginUserRole(String userId) { return securitySupportDao.getLoginUserRole(userId); } 컨트롤러 @GetMapping("/mapg") public List getLoginUserRole() { final List list = securitySupportSvc.getLoginUserRole("admin"); return list; } 호출을 하면 64초 정도가 나온다. 여러번 호출해봐도 비슷하다. 2. 레디스 캐시 썼을 때 조회 시간SecuritySupportSvcImpl @C.. 공감수 3 댓글수 2 2024. 7. 31.
[Redis] Redis 라이브러리 3종 비교 (Spring redis vs Lettuce vs Redisson) 키밸류 저장소인 Redis는 유명한 클라이언트 라이브러리들이 3가지가 있습니다. Lettuce, Redisson, Jedis가 있는데, 오늘은 스프링 데이터 레디스와 Lettuce, Redisson 이렇게 3가지를 비교하며 코드를 작성해보겠습니다. (Jedis는 구현 방식이 간단하지만, 비동기 처리를 지원하지 않으며 Thread-safe 하지 않아 잘 쓰지 않는 추세라고 합니다.) 📝 목차1. spring data redis2. Lettuce3. Redisson사용 사례별 추천 💻 사용한 기술spring boot : 3.3.1java : 17Mavenspring-data-redis : 3.3.1lettuce : 6.3.1redisson : 3.16.3 1. spring data redissprin.. 공감수 1 댓글수 0 2024. 7. 28.
[WAS 이중화] 서로 다른 Jar 를 Fail over 하는 방법 (Java 코드 구현/ JSch 라이브러리 사용) 카프카 스트림즈 애플리케이션을 이중화 하기 위해, 원래 자바 프로그램에서 빼고 따로 프로젝트를 만들어서 포트만 다르게 하여 jar 로 만들었다. 운영 시, 부하 문제로 카프카 스트림즈 애플리케이션이 죽을 수도 있을 것 같아서 따로 생성을 했다. 사전 작업으로는 8088, 8089 포트를 지정하여 jar로 만든 후, 원격 서버에 scp 명령어로 전송한 상태이다. JSch 라이브러리를 사용하여 Java에서 SSH 연결을 설정하여 jar1을 10초에 한번씩 헬스체크하고, jar1이 죽으면 jar2를 원격 서버에서 실행하는 방법으로 코드를 구현했다. 1. 자바 코드 구현1. JSch 라이브러리 추가먼저, Maven을 사용한다면 pom.xml 파일에 JSch 라이브러리를 추가 com.jcraft .. 공감수 1 댓글수 0 2024. 7. 16.
[Springboot] 카멜케이스로 코드를 작성했는데 스네이크케이스로 요청이 온다면? (@JsonProperty, @JsonNaming) 카멜케이스로 코드를 작성했는데 스네이크케이스로 요청이 온다면 어떻게 할까? Jackson 라이브러리에서 제공하는 ObjectMapper 객체는 어노테이션으로 @JsonProperty와 @JsonNaming 을 제공해준다.Snake Case 데이터를 받아, Camel Case 변수에 데이터를 바인딩 해준다. 스네이크케이스 말고도, 케밥케이스 등 많은 데이터와 매핑하는 기능을 제공한다. 예제로 실습을 해보자. 컨트롤러 @PostMapping("/test/test") public TestDto testTest(@RequestBody TestDto testDto) { return testDto; } 포스트맨 요청스네이크 케이스로 데이터를 post한다.post) http://localhost.. 공감수 1 댓글수 0 2024. 7. 12.
[MQTT,Kafka] EMQX 웹 소켓 사용하여 대시보드에 실시간 데이터 보여주기 (Throughput 테스트) 차량의 실시간 위치 데이터 (위도, 경도) 를 MQTT를 사용한 웹소켓으로 대시보드에 실시간으로 변하는 데이터를 보여주었다. 카프카 컨슈머에서 받은 데이터를 바로 MQTT로 메시지 전송하였다. MQTT 프로토콜을 지원하는 메시지 브로커인 EMQX 오픈 소스 브로커를 사용하였다. 실시간으로 데이터를 보여주는 것이 목적이었고, 그 다음으로는 초당 몇건을 보여줄 수 있는지를 테스트 했다. 스프링 부트 버전 : 2.5.4자바 버전 : 1.8카프카 버전 : 3.7.0MQTT 버전 : 1.2.5 pom.xml 의존성을 아래와 같이 받아준다. org.eclipse.paho org.eclipse.paho.client.mqttv3 1.2.5 org.springframework.integrati.. 공감수 1 댓글수 0 2024. 7. 11.
[Springboot] RestTemplate을 사용한 MSA 프로젝트 만들기 (서버간 통신, JPA, H2 DB, Scheduler, FileIO) 오늘은 RestTemplate을 사용하여 요즘 매우 핫하고 확장성이 뛰어난 MSA(Microservice Architecture) 프로젝트를 만들어 보았습니다. WAS 2개를 사용하여 서버간 통신으로 데이터를 API로 전송하는 서비스를 구현하며 정리했습니다. (실제로 요구사항이 들어왔을 때를 가정하고 프로젝트를 만들어 보았습니다. ) 📝 목차 1. 데이터를 전송하는 localhost:8081 서버와 API 만들기2. 데이터를 받는 localhost:8080 서버와 API 만들기3. 테스트 👇 RestTemplate 과 동기식 요청이란 더보기🙋‍♀️ RestTemplate 이란?HTTP 통신을 위한 도구로 RESTful API 웹 서비스와의 상호작용을 쉽게 외부 도메인에서 데이터를 가져오거나 .. 공감수 2 댓글수 0 2024. 7. 6.
[Kafka] broker scale out/ scale in (카프카 브로커 스케일 아웃/스케일 인) 카프카 브로커를 스케일 아웃 하는 것은 처리량을 늘리기 위한 방법은 아니다. (처리량을 늘리려면 가장 먼저 파티션을 늘려야 한다)카프카는 리더 브로커만 실질적으로 프로듀서와 통신하고 나머지 팔로워 브로커는 복제만 담당하기 때문이다. 하지만 혹시 모를 이슈 상황을 대비해 카프카 브로커를 스케일 아웃 해보았다.현재 카프카 브로커는 3개이며 5개로 스케일 아웃을 하고, 다시 3개로 스케일 인을 해보았다. 카프카 버전 : 3.7.0총 소요시간 : 8시간 (인증세팅이 없으면 1시간도 안걸리는 작업이지만, 카프카 브로커 sasl 인증을 추가해 줄 때 Credential을 자꾸 추가해 주는 실수를 해서... 오래 걸렸다. 한번 주키퍼에 저장된 Credentail은 다시 지정해줄 필요가 없다. 인증 프로세스 숙지.. 공감수 1 댓글수 1 2024. 7. 1.
[Redis] CentOS8에 redis 설치 및 springboot 연동하기 개발 중인 회사 서비스에서 카프카에서 정제한 데이터를 임시데이터베이스에 저장하고, api로 호출해서 사용자 화면에 리턴해야 하는 기능을 개발했다. 처음엔 카프카 스트림즈에서 제공하는 KTable , RocksDB 를 사용했었다.카프카에서 제공하는 라이브러리라서 의존성만 추가해주면 사용할 수 있어서 편리하긴 하지만,카프카에 종속성이 있기에 (카프카 서버가 죽으면 외부 저장소를 사용할 수가 없다..) 리스크가 있어 외부 데이터베이스인 redis로 바꾸기로 했다. redis 를 적용하는 과정을 정리해보았다. springboot 버전 : 2.5.4redis 버전 : 3.3.1총 적용 소요시간 : 1시간 1. redis 서버 설치1) 도커로 설치docker pull redis2) 방화벽 설정firewall-cmd.. 공감수 0 댓글수 0 2024. 6. 27.
[Springboot][트러블슈팅] com.fasterxml.jackson.databind.exc.UnrecognizedPropertyException 에러 (@JsonProperty 로 해결) 회사에서 서비스를 운영하며 생긴 스프링부트 에러 부분을 정리해보았다. 문제 상황1) 실제로 카프카에 들어오는 데이터 외부 회사에서 들어오는 데이터이다.{ "obu_ID": "obu_id_test_data", "vehicle_num": "2242", "service_module_data": { "startup_mode": false, "auto_mode": true, // 중략.... "LDC_on": true, // 문제가 되는 부분 "PDU_on": false, // 문제가 되는 부분 // 중략.... }} 2) 자바 DTO 클래스들어오는 데이터를 ObjectMapper로 자바객체로 변환해주기 위해 만든 Dto 클래스이다. @Datapublic .. 공감수 0 댓글수 0 2024. 6. 26.
[Kafka] 카프카 컨슈머에서 받은 데이터 MariaDB로 전송하기 카프카 스트림즈로 필터링된 토픽을 컨슈밍하는 컨슈머를 만들고, 그 컨슈머에서 받은 데이터를 DB로 insert하도록 하는 기능을 구현했다. 카프카 커넥트로 하려고 했으나, 번거로워서 직접 컨슈머 코드 안에서 dao를 사용하여 db에 접근하여 insert 하도록 했다. 전체 코드이다. 프로듀서import org.apache.kafka.clients.producer.*;import java.util.Properties;public class KafkaProducerTest { /** * SASL 인증을 위한 JAAS Template */ private static final String JAAS_TEMPLATE = "org.apache.kafka.common.security.s.. 공감수 1 댓글수 0 2024. 6. 18.
[Kafka] 카프카 브로커 하나씩 다운시킨 후 메시지 전송 테스트 (고가용성 테스트, replication test) kafka1, kafka2, kafka3 중에 하나씩 브로커를 죽여보고 메시지를 전송해보려고 한다. 업무에 kafka 를 적용하여 운영할 예정이라, 브로커 서버가 죽었을 때 메시지가 정상적으로 전송 되는지 고 가용성 테스트를 해보기로 했다. 목차1. directTest 토픽의 partition 3들의 복제 상태 확인2. 프로듀서 메시지 전송 확인3. 브로커 하나씩 죽여보기4. 브로커 하나씩 다시 살리기 결론 ✅ 1. directTest 토픽의 partition 3들의 복제 상태 확인현재 토픽의 복제 상태를 확인하는 명령어kafka-topics.sh --bootstrap-server kafka1:9092 --topic directTest --describe --command-config /opt/bitn.. 공감수 0 댓글수 0 2024. 6. 10.
[Kafka] 스프링 부트에 Kafka Streams 적용하기 카프카 스트림즈(Kafka Streams)란? 카프카 스트림즈란 연속적인 이벤트 스트림이 들어올때마다 그때그때 처리하고 분석하여 의미있는 정보를 추출하고 실시간으로 작업을 처리하는 자바 라이브러리 기능이다. 이전에는 카프카 컨슈머 및 프로듀서 조합으로 필터링하여 다시 토픽에 넘겨주는 작업을 해주었지만 카프카 스트림즈는 매우 간단한 스트림즈 DSL 이란 기능으로 강력한 필터링 기능을 제공한다. 아래 그림으로 비교를 해보자. 기존의 필터링 방식 카프카 스트림즈를 이용한 필터링 방식또한 내장 DB 인 Rocks DB를 이용하여 key-value Store 기능도 제공한다. 2. 카프카 스트림즈 예제 코드 간단한 스프링부트 코드로 스트림즈 예제를 실습해보았다. 1. 스트림즈 DSL 라이브러리 .. 공감수 1 댓글수 1 2024. 6. 7.
[CentOS] CentOS8에 JAVA설치하기 CentOS 에는 기본적으로 자바가 깔려있다. 하지만 개발버전이 빠져있다고 한다.java -version으로 하면 기본 jdk가 조회되지만, javac -version 명령어를 쳐보면 나오지 않는다.이제 jdk를 설치해보려고 한다. JDK 설치다운 가능한 JDK 목록 조회yum list java*jdk-devel 나는 java-1.8.0-openjdk-devel.x86_64 를 다운받으려고 한다. jdk 다운로드 yum install java-1.8.0-openjdk-devel.x86_64 -y java -version, javac-version 으로 확인해보면 이제는 잘 조회되는 것을 확인!! 환경 변수 설정끝이 아니다. 환경변수도 설정해주어야 한다 ㅠㅠ(귀찮) 1) 자바 심볼릭 링크 경로 조회 j.. 공감수 0 댓글수 0 2024. 6. 4.
[Kafka] 이미 생성된 토픽의 replication factor 변경하기 목차 원래는 토픽 생성 시에 설정 값으로 준다replication-factor를 설정하는 것은 토픽.sh에서 토픽을 생성할 때 설정 값으로 주는 것이다. 아래처럼….$ kafka-topics.sh --create --bootstrap-server localhost:9092 --replication-factor 2 --partitions 10 --topic MyTopic RF를 변경해보자그런데 나는 replication factor를 3으로 변경하고 싶었다. 브로커가 3이기 때문에!일단 토픽을 describe 명령어를 써서 상세 조회 해보자. 1. RF 상세 조회로 현재 RF 값 확인kafka-topics.sh --bootstrap-server kafka1:9092 --topic directTest --d.. 공감수 0 댓글수 0 2024. 5. 27.
[VirtualBox] Rocky8 에 VirtualBox 설치 (CentOS계열) 카프카를 운영할 서버 하나를 할당 받았다. 그 동안은 로컬환경에서 테스트를 했는데, 이제는 실무용 서버에 테스트를 하려고 한다. (카프카 서버가 자꾸 죽는다 ㅠㅠ) 혹시 모르니 업무용 CentOS에도 Virtual Box를 설치해서 안전하게 카프카 운영 환경을 테스트를 해보려고 한다. 1. GPG 키를 시스템에 설치sudo rpm --import https://www.virtualbox.org/download/oracle_vbox_2016.asc 이 명령어를 실행하면 VirtualBox 패키지의 GPG 키를 시스템에 추가하여 VirtualBox 패키지를 설치하거나 업데이트할 때 GPG 키 검사를 통과한다. 설치하지 않으면 GPG 키 에러~~ 하면서 에러가 뜬다. (이 것 때문에 한참 헤맸다 ㅠㅠ).. 공감수 0 댓글수 0 2024. 5. 20.
[Grafana] Springboot 서버가 꺼지면 Slack 으로 알림받기 카프카 개발 및 운영을 시작하면서 그라파나와 연동을 하게 되었다. 그라파나의 강력한 기능인 알림기능을 사용하고 싶어서 먼저 스프링부트 서버가 꺼지면 슬랙으로 알림을 받는 과정을 먼저 연습하며 정리해보았다. 목차1. 슬랙 웹훅 URL 생성2. 그라파나 연동 1. Contact points 추가 2. Alert rules 설정 3. Notification policies 설정3. 테스트 1. 슬랙 웹훅 URL 생성 슬랙에 먼저 가입하고 워크스페이스를 생성해준다. (이 과정은 설명 생략) 우클릭 → 채널 세부정보 보기 통합 → 앱 → 앱추가 webhook 검색하여 Incoming WebHooks 설치 Slack에 추가 클릭 아까 만들었던 워크스페이스 명을 선택하고 수신 웹후크 통합 앱 추가 웹후크 U.. 공감수 0 댓글수 0 2024. 5. 16.
[Docker] Docker 기초 정리 생활코딩의 Docker 입문수업을 정리한 자료입니다.목차1. 도커 기초 명령어 정리1. 이미지로 컨테이너 만들기2. 컨테이너 중지/재실행 시키기3. 컨테이너 로그 확인하기4. 컨테이너 삭제하기5. 이미지 삭제하기2. 네트워크1. 컴퓨터에 직접 웹서버를 설치했을 경우2. 도커로 웹서버를 설치했을 경우3. 포트포워딩 하기3. 호스트와 컨테이너의 파일시스템 연결1. 호스트와 컨테이너가 연결되지 않았을 때의 문제2. 볼륨 옵션을 주고 컨테이너 생성하기 1. 도커 기초 명령어 정리도커를 사용할 때 매우 자주 사용하는 명령어이다.1. 이미지로 컨테이너 만들기docker run httpd // httpd 이미지를 실행시켜서 컨테이너를 만들어라docker run --name ws2 httpd // httpd 이미지를 .. 공감수 0 댓글수 0 2024. 5. 15.
로컬 VM에 Docker 및 Kafka 설치 (docker-compose.yml작성) 로컬 VM에 Docker를 설치하고, 그 안에 카프카를 설치해서 콘솔 테스트까지 해보는 과정을 정리했다. 목차1. Docker 설치 1) yum 패키지 설치 2) 도커 설치 3) 도커 실행 4) docker-compose 설치 2. Docker Hub에서 카프카 및 카프카UI 이미지 내려받기 1) 카프카 이미지 내려받기 2) 주키퍼 이미지 내려받기 3) 카프카 UI 이미지 내려받기 3. docker-compose.yml 설정 1) docker-compose.yml 작성 2) VM에서 포트포워딩 해주기 4. Kafka Cluster 실행 1) docker-compose 실행 2) docker-compose 실행 확인 5. Kafka Console Test 1) Container 내부 쉘 접속 2) To.. 공감수 1 댓글수 0 2024. 4. 22.
[Virtual Box] Virtual Box에 SSH 설치 + MobaXterm으로 원격 접속하기 VirtualBox에서 작업하다 보면 호스트 키, 복사/붙여넣기 등 불편한 부분이 많아서, SSH를 통해 접속 프로그램(MobaXterm 등)으로 원격 접속해서 편하게 작업하려고 한다. 1. VM에 SSH 설정접속 프로그램인 MobaXterm 사용을 위해 로컬 CentOS 7에 SSH 설정을 하려고 한다. which sshd 명령어를 사용해 현재 로컬 Rocky Linux에 SSH가 설치되어 있는지 확인한다. 경로가 /usr/sbin/sshd 에 있다고 나타났다. 1) port 설정 port 설정을 해주어야 한다. vi /etc/ssh/sshd_config #Port 22 라고 되어있는 부분을 주석을 풀어준다. 만약 22번 말고 다른 포트번호를 사용하고 싶다면 변경해주어야 한다! 2) 로그인 제.. 공감수 1 댓글수 0 2024. 4. 17.
[Rocky Linux] Virtual Box에 Rocky Linux 9 설치하기 앞 포스팅에서 Virtual Box 설치를 해보았다. ↓ Virtual Box 설치 포스팅 https://yeees.tistory.com/453 [Virtual Box] window10에 Virtual Box 설치회사에서 신규프로젝트를 시작하는데, 백엔드와 Kafka를 담당하기로 했다. 그래서 회사 서버에 Kafka를 설치하기 전에 가상머신에 먼저 설치를 해보려고 한다. 1. Virtual Box 설치하기 https://www.virtualbyeees.tistory.com 1. Locky Linux 다운로드 이제 이 곳에 우리 회사에서 사용 중인 CentOS와 유사한 (무료인) Locky Linux를 설치해볼 예정이다. 회사 서버에 바로 하기가 겁이 나기 때문에. ... Locky Linux는 아래 공.. 공감수 1 댓글수 0 2024. 4. 17.
[Virtual Box] window10에 Virtual Box 설치 회사에서 신규프로젝트를 시작하는데, 백엔드와 Kafka를 담당하기로 했다. 그래서 회사 서버에 Kafka를 설치하기 전에 가상머신에 먼저 설치를 해보려고 한다. 1. Virtual Box 설치하기 https://www.virtualbox.org/ Oracle VM VirtualBox Welcome to VirtualBox.org! News Flash Notice March 21th, 2024Change of login server. Starting today, Oracle Single Sign On will ask for your account credentials at signon.oracle.com and the username and password are now have to be entered .. 공감수 0 댓글수 0 2024. 4. 16.
[JAVA/Springboot] open API 사용법(공공데이터) 1. OPEN API 신청 사용하고 싶은 오픈 API를 골라서 활용신청을 해준다. 나는 아래 사이트에서 영양정보를 제공하는 공공API를 사용하였다. https://www.data.go.kr/iim/api 활용신청 클릭 활용내용은 대충 '웹사이트 개발용' 이라고 적었다. 그러면 기다릴 필요도 없이 자동 승인이 되고, 인증키를 사용할 수 있게 된다. 참고문서의 .doc 파일을 보니 아주 자세히 요청을 어떻게 하는지 나와있다. 이렇게 해도 되지만, URL마지막 부분을 type=json으로 해주면 JSON으로 반환되어 편리하다. 아래처럼 호출해주었다. http://apis.data.go.kr/1470000/FoodNtrIrdntInfoService/getFoodNtrItdntList?ServiceKey=서비스키.. 공감수 0 댓글수 1 2024. 4. 3.
[vue3] 글 수정 페이지 구현하기 (computed() 사용) 등록.vue 페이지 //🎈 1. 수정용으로 데이터를 받는 변수 선언 const dietDataPut = route.query // 여기서 라우팅하며 보낸 수정용 데이터를 받는다. //🎈 2. 사용자가 input박스에 숫자를 입력할 때, testFlag 에 따라서 수정인지, 등록인지 if 분기문을 탄다. async function changeDietData() { console.log('testFlag🧧', testFlag.value) console.log('dietDataPut :::: ', dietDataPut) // 등록 시 필요한 object 만들기 if (testFlag.value === 'CREATE') { console.log('selectedFoodInfo를 잘 받아오나 보자~~~~~등록시🍀.. 공감수 0 댓글수 0 2024. 4. 1.
[Vue3] 커스텀 달력 구현 아래와 같은 커스텀 달력 구현을 완료하였다. props, emit 을 사용하여 약간 복잡해보이는 로직이어서 조금 어려웠다. 개발은 환자의 일정 리스트의 개수를 달력에 보여주고, 클릭을 하면 해당 일정의 리스트의 상세내역을 보여준다. 주요 컴포넌트는 단 두개이다. list 컴포넌트(부모) / ExmpleFull(달력, 자식) 컴포넌트. 구현 과정 list 컴포넌트 : 리스트의 수를 가져와서 {날짜 : 상세데이터} 오브젝트로 만들어주고, 달력 컴포넌에 props로 해당 오브젝트를 넘겨주고, ExampleFull 컴포넌트 : 달력 컴포넌트에 해당 날짜의 상세데이터.length를 읽어서 표시해준다. 클릭 시에는 부모 컴포넌트에 emit으로 날짜를 넘겨주고, list 컴포넌트 : 부모 컴포넌트는 emit 으로 받.. 공감수 0 댓글수 0 2024. 3. 25.
[Vue3] vue-simple-calendar 라이브러리 적용하기 https://github.com/richardtallent/vue-simple-calendar GitHub - richardtallent/vue-simple-calendar: Simple Vue component to show a month-grid calendar with events Simple Vue component to show a month-grid calendar with events - richardtallent/vue-simple-calendar github.com 1. 클론받고 2. 명령어로 라이브러리 설치 npm i --save vue-simple-calendar npm run dev 여기엔 캘린더 모양이 2가지가 있다. simple / full (컴포넌트 명은 ExampleSimp.. 공감수 0 댓글수 0 2024. 3. 25.
[트러블슈팅/ Vue3] 컴포넌트에 데이터 바인딩이 되지 않는 문제(feat. ref, watch) 문제 상황 달력 컴포넌트(ExampleFull)에 날짜와 타입을 전달하여, 달력에 보여주고 싶었다. 26일자에 '입원'이라는 문구가 떠야하는데 아래와 같이 보였다. 기존의 일정 list 뷰 코드 {{ data?.patientName }}님 환자 등록번호 : {{ data?.patientId }} 기존의 달력 컴포넌트 뷰 공감수 0 댓글수 0 2024. 3. 25.
[Vue3, SpringBoot, MariaDB] 이전글/ 다음글 구현하기 notice.xml 이전/다음글의 idx 와 글 제목을 map으로 받았다. SELECT idx, title FROM tb_notice WHERE idx IN ( (SELECT idx FROM tb_notice WHERE idx #{idx} AND del_yn = 'N' ORDER BY idx DESC LIMIT 1 ), (SELECT idx FROM tb_notice WHERE idx ]]> #{idx} AND del_yn = 'N' ORDER BY idx LIMIT 1 ) ) NoticeDto.java @Data public class NoticeDto extends BaseDto { private Integer idx; private String type; private String title; pr.. 공감수 0 댓글수 0 2024. 3. 21.
[Vue3] 의료 플랫폼 개발 기록 vue 를 사용하여 플랫폼을 개발하며 하는 기록.. varlet이라는 프레임워크를 사용하였으며 vue 3버전을 사용하여 개발하였다. 간단히 리스트 / 검색기능 / 상세보기 기능을 구현했다. CSS 가 적용되지 않아 허접해보인다. servicesearch > list.vue {{ item.department }} {{ item.act }} -제목 : {{ item.title }} -안내 내용 : {{ item.contents }} -이미지url(임시) : {{ item.images?.[0]?.url }} servicesearch > [idx].vue -과 : {{ item.department2 }} -행위 : {{ item.act }} -제목 : {{ item.title }} -안내 내용 : {{ item.. 공감수 0 댓글수 0 2024. 3. 19.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.