Nellie's Blog

2024년 회고록 (비전공 개발자가 경험한 첫 1년 성장기 회고록)

Nellie Kim — Fri, 10 Jan 2025 15:45:24 +0900

23년 11월 ~ 24년 1분기 (23.11. ~ 24.3.)

23년 11월에 입사를 했고, 24년 11월 이후로 나는 만 1년을 채운 2년차 개발자가 되었다. (햇수가 아닌 만으로 계산했다.) 23년 11월의 새내기 신입 개발자였던 나는 자신감이 하늘 끝까지 차오른 상태에서 입사를 하게 되었다. 입사를 한 이후에는 백엔드 API 생성, ERD 설계, 데브옵스(젠킨스 설치 등..)등의 난이도 있는 일감이 할당되었고, 재미있게 업무를 했다. 스프링부트, 자바, 리액트로 백엔드와 프론트 둘 다 개발을 진행했고, 50%가까이의 기여를 했다. 내가 직접 절반 정도 개발을 한 앱이 플레이스토어에 직접 출시되는 걸 보니 내가 정말 개발자가 되었구나..라는게 실감이 되었다. 팀장님과 상사분들은 내 업무 스타일과 개발 능력을 좋게 평가해주셨다. 개발자하길 잘했다는 생각을 계속 했다..ㅎ

24년 2분기 (24.4. ~ 24.6.)

그 이후로 나는 4~5월부터 Kafka, Docker 같은 인프라 업무를 담당할 기회를 얻게 되었고 (Kafka를 너무 해보고 싶다고 팀장님께 요청을 해서 얻게 되었다.) 최신 트렌드 기술을 익힐 생각에 설레는 마음으로 공부를 했다.

문제는 Kafka를 하려면 서버(리눅스), 네트워크 지식, 도커 같은 기초 인프라 지식이 필요했다. 부랴부랴 리눅스, 네트워크, 도커 인강과 책들을 곁들여가며 인프라를 숙지했다. 퇴근 후, 주말에도 공부를 하며 업무 숙지를 했다.

정보처리기사 실기도 점심시간을 활용해 점심식사를 빨리 하고 카페에서 공부하고, 퇴근 후와 주말에도 공부를 하며 열심히 준비했다. 다행히 81점이라는 준수한 점수로 합격했다 ㅎㅎ 일도 하면서 자연스럽게 공부가 되니 일도 하고 자격증도 따고 일석이조다.

24년 3분기 (24.7. ~ 24.9.)

Kafka, Docker 를 계속 숙지를 했고, 업무 상 초당 1~10만건 까지 전송을 하고, Kafka Streams로 필터링을 하고, 웹소켓, Redis등에 전송을 하는 업무까지 맡게 되어서 또 Redis와 웹소켓 공부도 곁들여서 하게 되었다. 그리고 개인적으로는 개발/운영 시에 모니터링을 중요하게 생각하는 편이라서 Grafana 같은 도구도 팀에 건의하여 활용하여 운영하게 되었다!! 이 전까지는 모니터링을 한 적이 없었는데, 내가 건의를 드려서 처음으로 모니터링을 진행했다. 다들 좋아하셔서 기분이 좋았다. 도커도 직접 모니터링을 해보고 싶어서 Potainer라는 도구를 깔아서 리소스 등 모니터링도 곁들여서 진행했다.

직접 데이터 스트리밍을 운영해보니 신기하기도 했고, 운영 중에 일어나는 여러가지 이슈들을 맞닥뜨리게 되면서 모니터링이 참 중요하구나, 로그 관리가 중요하구나. 등의 깨달음을 얻게 되었다.

24년 4분기 (24.10. ~ 24.12.)

잡고있는 프로젝트에서 도커 네트워크 문제가 연달아 발생했다. 계속 문제가 발생하니 근본적으로 네트워크를 각잡고 공부하기 시작했다. 이왕 하는거 회사 네트워크 구조도도 그리며 깊이 공부하게 되었는데, 그 때 비효율적이었던 회사의 vpn문제와 ip충돌문제를 발견하여 해결하게 되었다. ip 대역이 같아서 충돌이 났고, 프린터가 vpn을 켠 상태에서는 작동이 되지 않는 문제가 있어서 업무에 영향을 미쳤다. 팀장님께 건의를 드려 우리 팀의 IP 대역을 겹치지 않도록 바꿨고, 문제 없이 사용할 수 있게 되었다. 업무 외적인 비효율을 개선하여 많이 뿌듯했고 , 팀장님과 상사분들도 많이 좋아하셨다. 책임님께서는 "OO씨 큰일했네~" 라며 극찬을 해주셨다 ...ㅎㅎ

그리고 네트워크를 공부하는 김에 리눅스도 공부했고, 리눅스를 공부하는 김에 리눅스 마스터 책도 사서 체계적으로 공부했고 얼떨결에 1차도 합격하게 되었다.

2024년의 총 느낀점

정말 순식간에 많은 걸 배웠고 어떻게 지나는지도 모르겠다. 정말 인생에서 제일 많은 것을 배운 한 해였고, 정신적으로도 제일 성숙해진 한 해였다. 내가 내 한계를 넘을 수 있었던 한 해.. 라고 말하고 싶다.

정말 행복한 건 지금 하는 일이 적성에 잘 맞는다는 것이다. 공부하는 것도 재밌고 일하는 것도 재밌다. 내가 늦게라도 선택한 이 마지막 직업이 정말 천직이라는 사실이 제일로 행복하다.

그리고 첫 개발자로서의 이 직장이 나와 잘 맞았고, 내가 하고 싶었던 기술을 사용해서 배울 수 있었고, 좋은 동료들과 일 할 수 있어서 너무 감사했다.

어쨌든,

CRUD만 하면 되는 줄 알았던 자신감에 가득찬 신입이었던 나에게 이런 새로운 업무들이 실시간으로 주어지며 나는 배울 것이 참 많구나.. 라는 것을 느끼며 겸손해져야겠다고 다짐했다. 당연하지만 지금도 배울 것 투성이고, 자바, 스프링, 서버 등의 기초지식을 모두 뜯어봤을 때 '모르는 것이 하나도 없다'라고 말할 수가 없기 때문에, 2025년은 기초를 다시 뜯어보며 다지는 시간을 가져보려고 한다.

2024년에 배운 것 (Skills)

- Java / Springboot 심화

- 프론트엔드 약간 (Vue3, React, NextJs)

- Kafka

- Redis

- Linux

- Network

- Docker

- Prometheus / Grafana

2024년에 취득한 자격증

- 정보처리기사 실기 합격 (24.6.18.)

- 리눅스마스터 1급 1차(필기) 합격 (24.10.4.)

개발 외적으로는

개발 외적으로는 독서라는 소중한 취미를 가지게 되었다. 개발하며 중요한 부분 중에 하나가 '멘탈'이라고 생각하는데, 난 아주 약한 멘탈의 소유자이다.

이 부분이 참 개인적으로는 나한테 제일 아쉬운 부분이었다. 개발이 안되거나 막힐 때, 상사가 내 의견을 존중하지 않을 때 등... 기분이 쉽게 상했고 우울해졌다. '내 멘탈은 왜 이렇게 약할까' 라는 생각을 자주 했다. 이 부분을 보완하기 위해 독서를 시작한 것은 아니지만, 독서를 하며 나의 내면을 돌아볼 줄 알게 되었고, 내 감정을 컨트롤하는 방법을 알게 되었다. 독서로 인해 더 정신적으로도 성숙해진 경험을 했다.

2024의 나에게 하고 싶은 말

안녕. 2024년의 나야. 이번 해 정말 고생했어. 넌 운이 좋게도 좋은 회사에 들어와서 좋은 사람들과 일하며 많은 것을 배웠어. 그것에 항상 감사해.
그래도, 넌 정말 멋졌어. 정말 열정적으로 최선을 다했잖아. 업무 병행하며 정보처리기사, 리눅스 마스터 1차도 합격하고, 출근해서도 점심 때마다 카페가서 공부하고 주말마다 출근해서 카프카, 리눅스 공부, 업무 숙지하고 .. 정말 너의 의지 노력 대단해.
25년에도 그렇게만 잘 부탁해. 초심 잃지말고 항상 감사하고 겸손하고 배려하는 멋진 개발자가 되어줘.
2025년에도 힘내자!!!!!!!!!

[timescaledb] 시계열 DB Memory 모니터링 (어디서 메모리를 잡아먹는지 분석하기..)

Nellie Kim — Fri, 3 Jan 2025 15:33:09 +0900

Kafka → Hadoop , timescaleDB, Redis, EMQX 스트리밍 부하 테스트를 하는데 유난히 timescaledb가 메모리를 많이 잡아먹었다..

초당 1만건 전송하여 확인한 기록이다.

내가 직접 만든 Grafana로 계속 모니터링을 하는 중인데,

Spark와 timescaledb에서 Ram을 많이 잡아먹고, OOM에러도 종종 일어난다.

저 RAM 부분이 노란색이 되면 뭔가 예민해진다. 저러고 OOM 터져서 죽은적이 너무 많음 ㅜㅜ

뭔가 맘에 안드는 모니터링 상태

리눅스 서버에서 docker stats로 메모리 사용량도 같이 확인을 해봄.

CONTAINER ID   NAME             CPU %     MEM USAGE / LIMIT     MEM %     NET I/O           BLOCK I/O         PIDS
a02167556cba   node_exporter    0.00%     29.35MiB / 30.59GiB   0.09%     38.4MB / 1.1GB    148MB / 0B        38
4107b7119324   wowza            0.69%     1.82GiB / 30.59GiB    5.95%     803kB / 5.92MB    735MB / 1.93MB    1135
9e8c3d2b6438   redis-slave-3    6.19%     20.61MiB / 30.59GiB   0.07%     21.1GB / 20.1GB   6.93GB / 461GB    7
8d56f5793411   redis-master-3   0.00%     0B / 0B               0.00%     0B / 0B           0B / 0B           0
**35511d11ca3c   timescaledb      25.76%    6.946GiB / 30.59GiB   22.71%    26.6GB / 1.46GB   2.22GB / 72.5GB   11**
3b06e5f352cb   kafka2           2.71%     3.287GiB / 30.59GiB   10.74%    30GB / 121GB      14.8GB / 197GB    184
0e0d47ccd151   zookeeper2       0.19%     827.2MiB / 30.59GiB   2.64%     516MB / 763MB     568MB / 50.3MB    155
5db984913c9b   datanode1        26.76%    3.957GiB / 30.59GiB   12.93%    579GB / 325GB     19.9GB / 85.2GB   597

CONTAINER ID   NAME             CPU %     MEM USAGE / LIMIT     MEM %     NET I/O           BLOCK I/O         PIDS
a02167556cba   node_exporter    0.00%     29.35MiB / 30.59GiB   0.09%     38.4MB / 1.1GB    148MB / 0B        38
4107b7119324   wowza            0.78%     1.82GiB / 30.59GiB    5.95%     803kB / 5.92MB    735MB / 1.93MB    1135
9e8c3d2b6438   redis-slave-3    7.34%     20.74MiB / 30.59GiB   0.07%     21.1GB / 20.1GB   6.93GB / 461GB    7
8d56f5793411   redis-master-3   0.00%     0B / 0B               0.00%     0B / 0B           0B / 0B           0
**35511d11ca3c   timescaledb      24.51%    6.949GiB / 30.59GiB   22.72%    26.6GB / 1.46GB   2.22GB / 72.5GB   11**
3b06e5f352cb   kafka2           3.57%     3.287GiB / 30.59GiB   10.75%    30GB / 121GB      14.8GB / 197GB    184
0e0d47ccd151   zookeeper2       0.22%     827.2MiB / 30.59GiB   2.64%     516MB / 763MB     568MB / 50.3MB    155
5db984913c9b   datanode1        254.77%   4.162GiB / 30.59GiB   13.61%    579GB / 325GB     19.9GB / 85.2GB   596

CONTAINER ID   NAME             CPU %     MEM USAGE / LIMIT     MEM %     NET I/O           BLOCK I/O         PIDS
a02167556cba   node_exporter    0.00%     29.02MiB / 30.59GiB   0.09%     38.4MB / 1.1GB    148MB / 0B        38
4107b7119324   wowza            1.45%     1.82GiB / 30.59GiB    5.95%     803kB / 5.92MB    735MB / 1.93MB    1135
9e8c3d2b6438   redis-slave-3    6.94%     20.78MiB / 30.59GiB   0.07%     21.5GB / 20.5GB   6.93GB / 464GB    7
8d56f5793411   redis-master-3   0.00%     0B / 0B               0.00%     0B / 0B           0B / 0B           0
**35511d11ca3c   timescaledb      25.46%    7.227GiB / 30.59GiB   23.63%    27.4GB / 1.48GB   2.22GB / 74.8GB   11**
3b06e5f352cb   kafka2           2.93%     3.363GiB / 30.59GiB   11.00%    30.2GB / 121GB    14.8GB / 197GB    184
0e0d47ccd151   zookeeper2       0.20%     827.2MiB / 30.59GiB   2.64%     516MB / 763MB     568MB / 50.3MB    155
5db984913c9b   datanode1        0.37%     3.931GiB / 30.59GiB   12.85%    579GB / 325GB     19.9GB / 85.2GB   543

CONTAINER ID   NAME            CPU %     MEM USAGE / LIMIT     MEM %     NET I/O           BLOCK I/O        PIDS
a02167556cba   node_exporter   0.00%     31.12MiB / 30.59GiB   0.10%     38.7MB / 1.11GB   151MB / 0B       38
4107b7119324   wowza           1.52%     1.808GiB / 30.59GiB   5.91%     808kB / 5.95MB    736MB / 1.94MB   1135
9e8c3d2b6438   redis-slave-3   4.71%     20.65MiB / 30.59GiB   0.07%     27.1GB / 27GB     6.99GB / 490GB   7
**35511d11ca3c   timescaledb     24.73%    8.224GiB / 30.59GiB   26.89%    53.1GB / 2.32GB   2.99GB / 128GB   11**
3b06e5f352cb   kafka2          2.79%     3.396GiB / 30.59GiB   11.10%    36.4GB / 129GB    17.1GB / 199GB   184
0e0d47ccd151   zookeeper2      0.21%     795.9MiB / 30.59GiB   2.54%     524MB / 770MB     568MB / 50.3MB   155
5db984913c9b   datanode1       0.96%     8.905GiB / 30.59GiB   29.11%    614GB / 349GB     22GB / 90.3GB    775

CONTAINER ID   NAME             CPU %     MEM USAGE / LIMIT     MEM %     NET I/O           BLOCK I/O         PIDS
a02167556cba   node_exporter    0.00%     28.73MiB / 30.59GiB   0.09%     38.8MB / 1.12GB   156MB / 0B        38
4107b7119324   wowza            1.06%     1.784GiB / 30.59GiB   5.83%     808kB / 5.95MB    736MB / 1.94MB    1135
9e8c3d2b6438   redis-slave-3    6.52%     19.71MiB / 30.59GiB   0.06%     35.3GB / 34.2GB   7.01GB / 524GB    7
8d56f5793411   redis-master-3   0.00%     0B / 0B               0.00%     0B / 0B           0B / 0B           0
**35511d11ca3c   timescaledb      24.32%    8.174GiB / 30.59GiB   26.72%    67.1GB / 2.78GB   4.04GB / 150GB    11**
3b06e5f352cb   kafka2           5.25%     4.813GiB / 30.59GiB   15.73%    40.4GB / 139GB    17.7GB / 199GB    184
0e0d47ccd151   zookeeper2       0.25%     729.2MiB / 30.59GiB   2.33%     526MB / 772MB     571MB / 50.3MB    155
5db984913c9b   datanode1        255.36%   7.367GiB / 30.59GiB   24.08%    621GB / 351GB     22.2GB / 91.2GB   780

CONTAINER ID   NAME             CPU %     MEM USAGE / LIMIT     MEM %     NET I/O           BLOCK I/O         PIDS
a02167556cba   node_exporter    2.48%     28.55MiB / 30.59GiB   0.09%     38.9MB / 1.12GB   156MB / 0B        38
4107b7119324   wowza            0.82%     1.766GiB / 30.59GiB   5.77%     811kB / 5.96MB    736MB / 1.95MB    1135
9e8c3d2b6438   redis-slave-3    5.40%     18.86MiB / 30.59GiB   0.06%     42.8GB / 40.7GB   7.02GB / 555GB    7
8d56f5793411   redis-master-3   0.00%     0B / 0B               0.00%     0B / 0B           0B / 0B           0
**35511d11ca3c   timescaledb      26.67%    8.148GiB / 30.59GiB   26.64%    80GB / 3.2GB      4.85GB / 173GB    11**
3b06e5f352cb   kafka2           3.52%     5.395GiB / 30.59GiB   17.64%    44GB / 149GB      18GB / 200GB      184
0e0d47ccd151   zookeeper2       0.07%     654.9MiB / 30.59GiB   2.09%     528MB / 773MB     589MB / 50.3MB    155
5db984913c9b   datanode1        0.47%     6.959GiB / 30.59GiB   22.75%    628GB / 352GB     22.2GB / 91.9GB   772

CONTAINER ID   NAME            CPU %     MEM USAGE / LIMIT     MEM %     NET I/O           BLOCK I/O         PIDS
a02167556cba   node_exporter   0.00%     29.14MiB / 30.59GiB   0.09%     38.9MB / 1.12GB   160MB / 0B        38
4107b7119324   wowza           1.41%     1.765GiB / 30.59GiB   5.77%     811kB / 5.96MB    736MB / 1.95MB    1135
9e8c3d2b6438   redis-slave-3   0.37%     18.62MiB / 30.59GiB   0.06%     44.2GB / 42GB     7.02GB / 561GB    7
**35511d11ca3c   timescaledb     24.86%    8.141GiB / 30.59GiB   26.61%    83GB / 3.3GB      5.18GB / 179GB    11**
3b06e5f352cb   kafka2          2.73%     5.608GiB / 30.59GiB   18.33%    44.7GB / 151GB    18.1GB / 200GB    184
0e0d47ccd151   zookeeper2      0.10%     650.2MiB / 30.59GiB   2.08%     528MB / 774MB     595MB / 50.3MB    155
5db984913c9b   datanode1       285.56%   6.961GiB / 30.59GiB   22.76%    629GB / 353GB     22.2GB / 92.3GB   779

멀쩡해 보이는데 timescaledb가 점점 메모리 사용량이 높아지며 신경쓰이게 했다.

어떤 놈이 메모리를 먹고있는건지 분석해봤다....

timescaledb 컨테이너 접속 및 db명 조회

[platform@CES ~]$ docker exec -it timescaledb bash
postgres=# \\l
                                                   List of databases
   Name    |  Owner   | Encoding | Locale Provider | Collate |  Ctype  | ICU Locale | ICU Rules |   Access privileges
-----------+----------+----------+-----------------+---------+---------+------------+-----------+-----------------------
 postgres  | postgres | UTF8     | libc            | C.UTF-8 | C.UTF-8 |            |           |
 template0 | postgres | UTF8     | libc            | C.UTF-8 | C.UTF-8 |            |           | =c/postgres          +
           |          |          |                 |         |         |            |           | postgres=CTc/postgres
 template1 | postgres | UTF8     | libc            | C.UTF-8 | C.UTF-8 |            |           | =c/postgres          +
           |          |          |                 |         |         |            |           | postgres=CTc/postgres
(3 rows)

이건 별거 없고,,,

postgres db 접속 및 현재 진행 중인 쿼리 확인

postgres=# psql -U postgres -d postgres

postgres=# SELECT pid, state, query
FROM pg_stat_activity
WHERE state != 'idle';
  pid  | state  |          query
-------+--------+--------------------------
 90418 | active | SELECT pid, state, query+
       |        | FROM pg_stat_activity   +
       |        | WHERE state != 'idle';
(1 row)

확인해보니 방금 작성한 쿼리말고는 실행되는 쿼리는 없다.

Autovacuum 및 Dead Tuple(삭제되었지만 정리되지 않은 데이터)을 확인

postgres=# SELECT relname, last_autovacuum, n_dead_tup
FROM pg_stat_user_tables
WHERE n_dead_tup > 0;

             relname             |        last_autovacuum        | n_dead_tup
---------------------------------+-------------------------------+------------
 _hyper_24_1447_chunk            | 2024-12-24 09:10:45.824003+00 |         17
 chunk_constraint                |                               |          4
 dimension_slice                 |                               |         55
 bgw_job_stat                    |                               |          4
 tb_realtime_vehicle_data_250103 | 2025-01-03 03:20:18.333171+00 |      31878
 chunk_index                     |                               |          4
 chunk                           |                               |          2
 _hyper_24_1376_chunk            | 2024-12-24 09:06:15.627968+00 |       1263
(8 rows)

뭔가 꺼림칙한 놈이 나옴.

죽은 튜플들을 정리를 안하고 있나? 싶어서 분석해 봄

- Dead Tuple 개수가 상대적으로 많음:
  - _hyper_24_1376_chunk: 1,263개
  - _hyper_24_1447_chunk: 17개
- Hypertable에서 생성된 Chunk 테이블로, TimescaleDB의 시계열 데이터를 저장
- Autovacuum이 작동했지만 완전히 정리되지 않았을 가능성이 있음해당 결과는 pg_stat_user_tables에서 Autovacuum 및 Dead Tuple(삭제되었지만 정리되지 않은 데이터)을 확인한 것이다.
  1. 주요 내용
  - relname: 테이블 이름
  - last_autovacuum: 해당 테이블에서 Autovacuum이 마지막으로 실행된 시간
  - n_dead_tup: 테이블 내에서 삭제되었지만 VACUUM이 수행되지 않아 여전히 존재하는 레코드(Dead Tuple) 수
  2. 확인 사항
  - Dead Tuple 개수: 31,878개
  - 마지막 Autovacuum 실행 시간: 2025-01-03 03:20:18
  - 이 테이블은 최근 Autovacuum이 실행되었지만 여전히 Dead Tuple이 많다.
  _hyper_24_1376_chunk와 _hyper_24_1447_chunk
3. 문제 원인
- Dead Tuple이 많은 이유:
  1. 빈번한 데이터 변경 작업: 대량의 INSERT, UPDATE, DELETE 작업이 Dead Tuple을 생성.
  2. Autovacuum 설정 미흡: 기본 Autovacuum 설정으로 인해 정리가 지연될 수 있음.
  3. TimescaleDB Hypertable 특성: Chunk 테이블에 데이터가 분산되며, VACUUM이 자주 실행되지 않을 가능성.
4. 해결 방법
Dead Tuple이 많은 테이블에 대해 VACUUM을 수동으로 실행하여 정리하자.

Dead Tuple 비율 확인 (5% 미만이 정상, 5~20% 이면 관찰 필요, 20% 이상이면 비정상)

postgres=# SELECT relname,
       n_dead_tup,
       n_live_tup,
       ROUND(n_dead_tup::NUMERIC / (n_live_tup + n_dead_tup) * 100, 2) AS dead_tuple_ratio
FROM pg_stat_user_tables
WHERE n_dead_tup > 0;
       relname        | n_dead_tup | n_live_tup | dead_tuple_ratio
----------------------+------------+------------+------------------
 _hyper_24_1447_chunk |         17 |       7198 |             0.24
 chunk_constraint     |          4 |        764 |             0.52
 dimension_slice      |         55 |        382 |            12.59
 bgw_job_stat         |          4 |          0 |           100.00
 chunk_index          |          4 |       1145 |             0.35
 chunk                |          2 |        382 |             0.52
 _hyper_24_1376_chunk |       1263 |       7196 |            14.93
(7 rows)

그렇게 심하게 잡아먹고 있진 않았다..

autovacuum 상태 확인

vi /home/postgres/pgdata/data/postgresql.conf

#------------------------------------------------------------------------------
# AUTOVACUUM
#------------------------------------------------------------------------------

#autovacuum = on                        # Enable autovacuum subprocess?  'on'
                                        # requires track_counts to also be on.
autovacuum_max_workers = 10             # max number of autovacuum subprocesses
                                        # (change requires restart)
autovacuum_naptime = 10         # time between autovacuum runs
**#autovacuum_vacuum_threshold = 50       # min number of row updates before #   현재 Dead Tuple 개수가 50개 이상이면 실행**
                                        # vacuum
#autovacuum_vacuum_insert_threshold = 1000      # min number of row inserts
                                        # before vacuum; -1 disables insert
                                        # vacuums
#autovacuum_analyze_threshold = 50      # min number of row updates before
**#autovacuum_vacuum_scale_factor = 0.2   # fraction of table size before vacuum  #  테이블의 20% 이상의 Dead Tuple이 있으면 실행**

#------------------------------------------------------------------------------
# RESOURCE USAGE (except WAL)
#------------------------------------------------------------------------------

# - Memory -

shared_buffers = 7831MB                 # min 128kB  # ** ** 전체 메모리의 25%~40% 권장
                                        # (change requires restart)
#huge_pages = try                       # on, off, or try
                                        # (change requires restart)
#huge_page_size = 0                     # zero for system default
                                        # (change requires restart)
#temp_buffers = 8MB                     # min 800kB
#max_prepared_transactions = 0          # zero disables the feature
                                        # (change requires restart)
# Caution: it is not advisable to set max_prepared_transactions nonzero unless
# you actively intend to use prepared transactions.
work_mem = 2505kB                               # min 64kB  # ** ** 대량 작업 시 증가 가능
#hash_mem_multiplier = 2.0              # 1-1000.0 multiplier on hash table work_mem
maintenance_work_mem = 2047MB           # min 1MB
#autovacuum_work_mem = -1               # min 1MB, or -1 to use maintenance_work_mem
#logical_decoding_work_mem = 64MB       # min 64kB

얘도 디폴트 값이었다.

압축 정책 확인

postgres=# SELECT * FROM timescaledb_information.compression_settings;
 hypertable_schema | hypertable_name | attname | segmentby_column_index | orderby_column_index | orderby_asc | orderby_nullsfirst
-------------------+-----------------+---------+------------------------+----------------------+-------------+--------------------
(0 rows)

postgres=#

현재 압축 정책이 없다. 압축 정책을 추가해줘야겠음 !!!!

압축 정책 추가하면 메모리와 디스크 사용량 감소 가능!
```
SELECT add_compression_policy('your_hypertable_name', INTERVAL '30 days');
```
- 이 설정은 30일 이전의 데이터를 자동으로 압축해준다고 한다!

데이터베이스 백그라운드 라이터의 버퍼 관리 통계 확인

postgres=# SELECT
    buffers_checkpoint AS "Written by Checkpoints",
    buffers_clean AS "Clean Buffers",
    buffers_backend AS "Written by Backends"
FROM pg_stat_bgwriter;
 Written by Checkpoints | Clean Buffers | Written by Backends
------------------------+---------------+---------------------
                5415457 |          2693 |             3002002
(1 row)

높은 Written by Checkpoints 값
체크포인트 과정에서 메모리를 디스크로 내보낸 데이터가 많다는 것을 의미한다. 이는 트랜잭션 처리량이 높거나, shared_buffers가 충분히 활용되고 있음을 나타냄
낮은 Clean Buffers 값
클린 버퍼 작업이 상대적으로 적게 수행되었음을 나타냄. 이는 시스템이 클린 버퍼 정리에 대해 효율적으로 동작 중
Written by Backends 값
클라이언트(백엔드)가 직접 디스크에 기록하는 데이터가 많음. 이는 버퍼가 꽉 차거나 충분히 캐시되지 않아 디스크 I/O가 빈번히 발생할 수 있음을 나타낸다고 한다.

이것도 뭐 문제 없군 ,,,,,,

버퍼 사용 현황 확인

postgres=# SELECT
    sum(blks_read) AS "Blocks Read",
    sum(blks_hit) AS "Blocks Hit",
    sum(blks_hit) * 100.0 / (sum(blks_hit) + sum(blks_read)) AS "Cache Hit Ratio (%)"
FROM pg_stat_database;
 Blocks Read | Blocks Hit | Cache Hit Ratio (%)
-------------+------------+---------------------
      165898 |  413661536 | 99.9599113093116006
(1 row)

캐시 히트율이 매우 높음 (99.96%)
- 대부분의 데이터 요청이 디스크가 아닌 메모리(shared_buffers)에서 처리되며 shared_buffers 설정이 적절하고, PostgreSQL이 메모리 캐시를 효율적으로 활용하고 있음을 나타냄
Blocks Read 값이 낮음
- 디스크 I/O 작업이 비교적 적게 발생
- 메모리 캐시에 의해 대부분의 데이터 요청이 처리되고 있어 디스크 의존도가 낮은 이상적인 상태를 나타냄
Blocks Hit 값이 높음
- 메모리 캐시에서 읽은 데이터 블록이 많아, 성능이 최적화된 상태임을 보여줌
- 애플리케이션 성능에 영향을 미치는 디스크 I/O 병목이 거의 없다.

체크포인트 설정 확인 (디스크에 쓰는 작업)

postgres=# SHOW checkpoint_timeout;
 checkpoint_timeout
--------------------
 5min
(1 row)

postgres=# SHOW max_wal_size;
 max_wal_size
--------------
 1GB
(1 row)

checkpoint_timeout = 5min
- PostgreSQL은 5분마다 체크포인트를 실행하도록 설정되어 있으며
- 기본값(5분)인데, 데이터 변경 작업이 많은 워크로드에서는 체크포인트가 너무 자주 발생하여 디스크 I/O 부하를 증가시킬 수 있다. 적절히 조절하기.
max_wal_size = 1GB
- 최대 WAL(Write Ahead Log) 크기가 1GB로 설정되어 있다.
- WAL이 1GB에 도달하면 강제로 체크포인트가 실행된다. 적절히 조절하자.

큰 문제는 없어 보였으며 , 압축 정책만 조절하고 다시 반영해봐야겠다.

스파크 OOM에러 , JVM OOM 에러 , 스택에러 등 메모리 문제가 자주 발생하니 메모리 문제에 예민해지는 듯 ㅠㅠ

교훈 : 메모리 공부를 더 열심히 하자.

[Java] OOM Error (OutOfMemoryError) 유발해보고 모니터링 분석하기 (feat. VisualVM)

Nellie Kim — Sat, 14 Dec 2024 18:52:51 +0900

실무에서 자주 마주치는 OOM 에러 모니터링 상태를 이해하고 메모리 누수, GC 문제가 일어나지 않도록 하기 위해 글을 작성해보았다.

일부러 객체를 계속 할당하여 Heap 메모리를 과도하게 사용하게 하여 OOM 에러를 내보며 모니터링을 해보겠다.

Cat 클래스

계속 할당될 클래스다.

package com.example.demo;

/**
  OOM 에러 유발 코드 
 */
public class Cat {
    private int age;

    public Cat(int age) {
        this.age = age;
    }
}

메인 클래스

계속 Cat 클래스를 할당해준다.

package com.example.demo;

import java.util.ArrayList;
import java.util.List;
import java.util.Random;

public class DemoApplication {
	public static List<Cat> list= new ArrayList<>();

	public static void main(String[] args) {
		while (true) {
			final Cat cat = new Cat(new Random().nextInt(10));
			System.out.println("Cat 생성! : " + cat);
			list.add(cat);
		}
	}
}

VisualVM으로 모니터링

VisualVM을 사용해서 모니터링한다. 우측 상단의 그래프에 주목해본다. 저렇게 쌓이기만 하고 다시 내려오지 못한다.

GC가 청소를 못하고 저렇게 계속 메모리가 쌓인다.

GC 모니터링도 확인해보자.

Old Gen 이 계속 쌓임. 7.8G 중에 6.5까지 쌓이고 OOM을 내뿜으며 죽었다.

장렬히 전사함...

그래프는 위와 같이 나타난다. 그래프 모양을 잘 알아두자!

실무에서 자주 마주치는 OOM 에러 모니터링 상태를 이해하고 저렇게 메모리 누수가 생기지 않도록 주의하자!

출처 : 자바 잘 읽는 법 - 자바 코드를 이해하고, 디버깅하고, 최적화하는 요령 (Ch 6)

[Java] 동시성 이슈를 유발해보고 해결하기 (feat. VisualVM, synchronized)

Nellie Kim — Sat, 14 Dec 2024 17:56:51 +0900

아주 간단한 코드로 동시성 이슈를 유발해보고, synchronized를 사용해 초간단 해결을 해보는 과정을 통해 모니터링을 관찰하며 쓰레드와 리소스에 어떤 변화가 있는지 확인해보려고 한다. 실무에서 매우 중요한 부분이라서 실습을 해보겠다!

동시성 이슈 유발 코드

Producer 클래스

package com.example.demo;

import java.util.Random;
import java.util.logging.Logger;

/**
    프로듀서 스레드는 리스트에 값을 추가한다.
 */
public class Producer extends Thread{
    private Logger log = Logger.getLogger(Producer.class.getName());

    public Producer(String name) {
        super(name);
    }

    public void run() {
        final Random random = new Random();

        while (true) {
                if (DemoApplication.list.size() < 100) {
                    int x = random.nextInt();
                    DemoApplication.list.add(x);
                    log.info("프로듀서 "+Thread.currentThread().getName() + "는 + " + x +"  를 추가함.");
            }
        }
    }
}

Consumer 클래스

package com.example.demo;

import java.util.logging.Logger;

/**
   컨슈머 스레드는 리스트에 값을 삭제한다.
 */
public class Consumer extends Thread {
    private Logger log = Logger.getLogger(Producer.class.getName());
    
    public Consumer(String name) {
        super(name);
    }

    public void run() {
        while (true) {
                if (DemoApplication.list.size() > 0) { // 리스트에 값이 하나라도 있으면
                    int x = DemoApplication.list.get(0);
                    DemoApplication.list.remove(0); // 첫번째 값을 삭제
                    log.info("컨슈머 "+Thread.currentThread().getName() + "는 + " + x +"  를 삭제함.");
                }
        }
    }
}

Main 클래스

package com.example.demo;

import java.util.ArrayList;
import java.util.List;

//@SpringBootApplication
public class DemoApplication {
	public static List<Integer> list= new ArrayList<>();

	public static void main(String[] args) {
//		SpringApplication.run(DemoApplication.class, args);
		new Producer("_Producer 1").start();
		new Producer("_Producer 2").start();
		new Consumer("_Consumer 1").start();
		new Consumer("_Consumer 2").start();
	}
}

4개의 스레드(_Producer 1, _Producer 2, _Consumer 1, _Consumer 2)를 생성하여 돌려봄

VisualVM으로 모니터링을 해보자.

상단 좌측에는 CPU 모니터링, 상단 우측에는 메모리 (Heap) 모니터링이다.

그래프를 보면, CPU는 20% 가량을 사용하지만, 메모리는 거의 사용하지 않는다. 100 MB 정도….

메모리를 거의 사용하지 않기 때문에 GC도 할 일이 없다.

결국 이 앱은 아무것도 하지 않는 셈이다.

이제 쓰레드 모니터링을 해보자.

맨 위에서부터 3개의 쓰레드를 주목하자.

스레드 4개가 생성이 되었으나 하나(_Consumer 2)가 죽어버렸다. 경쟁 상태로 예외가 발생해서 죽어버린 것.

3개의 스레드는 좀비 스레드가 되었다. 아무 일도 안하면서 무지성으로 실행 상태로 남아있는 것이다.

CPU 리소스를 축내는 애들이다.

이렇게 뜨고 멈춘다.

synchronized를 사용하여 동기화로 해결해보자.

이 문제를 해결해보자.

스레드 간의 동시 액세스와 경쟁 상태를 방지하기 위해 동기화(syncronized) 블록을 추가했다.

컨슈머/프로듀서 모두 list 인스턴스를 동기화 코드 블록의 스레드 모니터로 사용한다.

Producer 클래스

package com.example.demo;

import java.util.Random;
import java.util.logging.Logger;

/**
    프로듀서 스레드는 리스트에 값을 추가한다.
 */
public class Producer extends Thread{
    private Logger log = Logger.getLogger(Producer.class.getName());

    public Producer(String name) {
        super(name);
    }

    public void run() {
        final Random random = new Random();
        while (true) {
            synchronized (DemoApplication.list) { // 추가  
                if (DemoApplication.list.size() < 100) {
                    int x = random.nextInt();
                    DemoApplication.list.add(x);
                    log.info("프로듀서 "+Thread.currentThread().getName() + "는 + " + x +"  를 추가함.");
                }
            }
        }
    }
}

Consumer 클래스

package com.example.demo;

import java.util.logging.Logger;

/**
   컨슈머 스레드는 리스트에 값을 삭제한다.
 */
public class Consumer extends Thread {
    private Logger log = Logger.getLogger(Producer.class.getName());

    public Consumer(String name) {
        super(name);
    }

    public void run() {
        while (true) {
            synchronized (DemoApplication.list) { // 추가  
                if (DemoApplication.list.size() > 0) { // 리스트에 값이 하나라도 있으면
                    int x = DemoApplication.list.get(0);
                    DemoApplication.list.remove(0); // 첫번째 값을 삭제
                    log.info("컨슈머 "+Thread.currentThread().getName() + "는 + " + x +"  를 삭제함.");
                }
            }
        }
    }
}

코드를 수정하고 모니터링을 해보니, CPU 사용량이 20%에서 10% 정도로 절반 가량 줄었다. 정상적인 앱은 CPU를 많이 소비하지 않는다.

메모리도 정상적으로 사용하고 있다. 앱이 메모리를 사용한다는 것은 실제로 어떤 일을 하고 있다는 뜻이다.

GC도 활동하여 톱니바퀴형의 그래프가 관찰된다.

이렇게 정상적으로 코드를 동기화하게 되면 CPU 소비는 줄고 앱은 메모리를 약간 사용하는 형태로 리소스 소비 패턴 자체가 달라진다.

쓰레드 모니터링에서도 맨 위부터 4개가 정상적으로 번갈아가며 실행 중이다.

스레드가 더이상 연속적으로 실행되지 않고 모니터에 의해 차단되었다가 실행되었다를 반복한다.

하늘색과 연두색의 조화가 예쁘다.

동기화 블록이 있어서 모니터가 한 번에 하나의 스레드만 실행되도록 수시로 실행을 중단시키는 모습이 확인된다...신기!

멈추지 않고 로그가 계속 올라온다. 굿!

출처 : 자바 잘 읽는 법 - 자바 코드를 이해하고, 디버깅하고, 최적화하는 요령 (Ch 6)

[VisualVM] 원격서버의 스프링부트를 VisualVM과 연동하기

Nellie Kim — Sat, 14 Dec 2024 14:09:57 +0900

로컬에서 VisualVM을 유용하게 사용하고 있었는데, (스레드 덤프, 힙 덤프 분석, 프로파일러 기능 등)

원격 서버에서도 사용해보고 싶었다.

원격 서버에서 jar를 실행할 때 아래와 같은 명령어로 스프링부트를 실행해준다.

IP와 포트를 지정해주어야 한다.

java -Dcom.sun.management.jmxremote=true \\
-Dcom.sun.management.jmxremote.local.only=false \\
-Dcom.sun.management.jmxremote.port=9090 \\
-Dcom.sun.management.jmxremote.ssl=false \\
-Dcom.sun.management.jmxremote.authenticate=false \\
-Djava.rmi.server.hostname=192.168.2.55 \\
-Dcom.sun.management.jmxremote.rmi.port=9090 \\
-jar /test/AutoDriving-1.0.0-SNAPSHOT.jar --spring.profiles.active=dev --server.port=1234

실행이 되었으면,

로컬의 VisualVM에서 원격서버 Add JMX Connection.. 클릭하고, IP 와 포트 (여기서는 9090)을 입력하고 OK 해주면 끝!

원하던 원격 서버에서의 프로젝트가 잘 나오고 있다!

끝!!!

[정보처리기사] 2024년 1회 비전공자 정처기 실기 합격 수기 (81점으로 합격)

Nellie Kim — Mon, 18 Nov 2024 19:03:06 +0900

백엔드 개발자로서 업무 능력 향상을 위해 정보처리기사 시험을 응시하게 되었고, 합격권의 점수를 받아 합격하게 되었다.

조금 늦었지만 그간의 공부법을 공유하며 기록을 해보려고 한다.

1. 베이스와 공부기간

나는 22년 여름부터 공부를 시작한 완전 쌩 비전공자이며 23년 7월에 SQLD취득을 한 경험이 있다.

그리고 23년 11월에 입사한 1년차(시험 응시 당시) 백엔드 신입이었다.

1달 (공부만) + 3주 (직장병행)

23년에 필기 시험을 합격했기 때문에 23년에 1달 실기 공부를 했었고, 취업 준비 때문에 실기는 응시를 하지 않았다.

취업한 이후로는 3주간 가량 직장병행으로 공부를 했다.

2. 공부 방법

기출 10회분 5회독 + 정리 요약본 20회독 이상 + 수제비 모의고사 10회분 1.5회독

2023년 정보처리기사 1회 필기를 86점으로 합격했었고, 필기 공부를 열심히 했던 덕분에 실기 공부가 비교적 수월했다.

필기 때 직접 만든 요약본을 계속 돌려봤다. 나만의 요약본이 짱이다!!

수제비 모의고사는 1.5회독 했는데, 그 이상 하는 것보다 기출을 한 번 더 보는게 도움이 되는 것 같다.

부족한 부분은 엑셀 파일 등 스스로 퀴즈를 내는 형식으로 공부했다.

3. 기타 공부 자료

가장 도움을 많이 받은 순으로 나열해보겠다.

1. 흥달쌤 유투브

https://www.youtube.com/@HeungSsaem

흥달쌤

흥달쌤과 함께하는 IT 채널입니다. 정보처리기사 자격증 관련된 강의 및 실무 노하우, 프로그래밍 언어(JAVA, C언어, Python) 특강 등이 진행됩니다. 앞으로 진행 예정인 동영상은 IT 관련된 이야기

www.youtube.com

흥달쌤은 신이다.. 출퇴근 시 그냥 틀어놓고 봤다. 기출은 무한 반복...으로 들었다. 귀에 딱지 않을 때까지..

그리고 헷갈리는 부분 (서브넷 등)은 원포인트 레슨처럼 특강을 해주니 여러번 듣는 것을 추천한다.

2. 수제비 네이버 카페

https://cafe.naver.com/soojebi

수제비- IT 커뮤니티 (정보처리기사... : 네이버 카페

수제비-수험생 입장에서 제대로 쓴 비법서(정보처리기사, 정보처리산업기사, 빅데이터 분석기사, ADsP 등)

cafe.naver.com

여기서 데일리 문제도 풀고, 페코페코 약술형대비 100문제도 도움이 많이 됐다.

3. 카카오톡 오픈 채팅방

천사분들이 많이 계신다. 자료 공유도 해주시고, 팁도 주신다.. 정말 많은 도움을 받았다!! 필수!

4. 마음가짐

나는 일단 자격증을 따기 위해 공부를 하지 않고, 공부를 하기 위해 자격증을 딴다고 생각하면서 재밌게 공부하려고 노력했다. 그래서 힘들지만 끝까지 흥미를 붙이고 집중할 수 있었던 것 같다.

기출을 반복해서 풀면서 합격권에 들어왔다고 생각할 때도 겸손을 잃지 않으려고 노력했고
특히 틀리는 부분은 따로 편집해서 출력한 뒤, 계속 반복하며 풀었다.

회사 동료들을 꼬셔서 시험도 안보는 동료와 점심때 마다 기출 풀기 스터디도 같이 하고...ㅋㅋㅋㅋㅋ 스터디도 많은 도움이 되었다.

조금 알 것 같다고 자만하기 쉽지만, 시험은 변수가 많기에... (두 번 다시는 준비하고 싶지 않은 시험이었다....)
시험장에서 겸손해질 바에야 평소에 겸손한 자세로 준비하는 게 낫다고 느꼈다.

시험 이틀 전인 목요일과 금요일에는 연차를 내고 공부에 전념했고 시험 전날에는 새벽 4시까지 공부를 했다.

전날 새벽이랑 당일 아침에도 암기한 부분에서 2개 인가 나왔다..ㅎㅎ

5. 결과와 소감

가채점을 했을 때 70점 후반~80점 초반으로 예상을 했는데,

결과는 81점! 생각보다 더 높게 나왔다.

소감으로는 정처기 시험을 준비하면서 백엔드 개발자로서 이 공부가 정말정말정말... 많은 도움이 되었다.

네트워크, 보안, 통신 프로토콜, 프로그래밍 등... 정말 많은 부분이 업무 내용과 겹쳐서 기초가 탄탄하다는 칭찬도 듣고... ^^

정말 좋은 배움이 되는 시간이었다. 비전공자로서는 꼭 취득해야할 자격증인 것 같다 !!! 강추 !

큰 산을 넘은 것 같아 정말 뿌듯하다. 이제는 또 다른 공부를 해야겠다. ^^ 다들 화이팅!!!

[Docker] potainer (Docker UI) 구축 (3분컷..)

Nellie Kim — Wed, 13 Nov 2024 16:19:28 +0900

회사의 원격 서버에 구축을 했다. 매번 docker ps로 확인하고, 이미지도 , 네트워크도 일일이 명령어로 하다보니,,,,

아 .. 이거 UI로 보고싶은데.. 라는 생각이 들어 찾아보니 이 좋은게 있었다 ㅠㅠ.... 도커 UI!!!!

완전 간단하게 Potainer 를 구축해보자!!

1. 볼륨 생성

docker  volume create portainer_data

2. 이미지 받고 실행

docker run -d -p 9000:9000 -v /var/run/docker.sock:/var/run/docker.sock -v portainer_data:/data --restart=always portainer/portainer

3. 접속

IP주소:9000 기본 주소로 접속이 가능하다.

사용자명은 기본으로 admin 으로 지정된다. 비밀번호는 첫 접속 시 지정해 주어야 한다.

4. 대시보드로 정보 확인

도커 내의 모든 컨테이너, 이미지, 볼륨, 네트워크 정보를 모두 확인할 수 있다 !!! 너무 좋음 ㅠㅠ

5. 다른 서버에서도 연동해서 설치하기

1) 도커 포트 열어주기

도커 기본 포트 2375 열어서 주고,

도커 서비스 파일에서 -H fd:// 삭제해주고 방화벽 열어주면 된다!

**# 1. 데몬.json 추가**
sudo vi /etc/docker/daemon.json
{
  "hosts": ["unix:///var/run/docker.sock", "tcp://0.0.0.0:2375"]
}

**# 2. 서비스 파일 수정**
sudo vi /usr/lib/systemd/system/docker.service
ExecStart=/usr/bin/dockerd --containerd=/run/containerd/containerd.sock

**# 3. 데몬 리로드**
sudo systemctl daemon-reload

**# 4. docker 재시작**
sudo systemctl restart docker

**# 5. 방화벽**
sudo firewall-cmd --zone=public --add-port=2375/tcp --permanent
sudo firewall-cmd --reload

2) potainer에서 도커 추가

좌측 하단 Environments > 우측 상단 Add environment > Docker Standalone > API 클릭

쨘...!

사용 중인 원격 서버 5개를 모두 등록했다. 5개 서버에 있는 모든 도커 엔진을 UI로 볼 수 있다!!

이 좋은 걸 모르고 계속 명령어로 ...확인했었다. ㅠㅠ

간단하게 설치하고 확인하니 필요한 도커 정보가 한눈에 ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ(감격)

너무 좋은 Potainer 미리미리 쓰자 ....!!!!

[Kafka] Kafka Producer 압축 방법을 어떤 걸 써야할까? (gzip, snappy, lz4, zstd 성능 비교 테스트)

Nellie Kim — Thu, 7 Nov 2024 15:54:53 +0900

Kafka를 사용할 경우, Producer에서 데이터를 전송할 때 압축률(compression.type)을 지정할 수가 있는데, 자주 쓰는 4가지 압축 방법을 비교하여 포스팅을 해보려고 한다. (매번 헷갈린다..)

자주 쓰는 압축 방법은 gzip, snappy, lz4, zstd 4가지 정도가 있는데, 이 4가지를 테스트해보았다.

파티션이 1개인 Kafka Topic에 건당 10KB 데이터를 전송하여, 압축률 /속도 /CPU 사용량을 비교해보았다.

※ 테스트 카프카 구성 스펙

- 버전 : 3.8.1

- 브로커 : 3개

- 파티션: 1개

- 카프카 프로듀서 : 자바 API (postman으로 호출)

- 사용한 모니터링 도구 : Kafka UI

1. gzip

1) 100건 전송 (1MB)

Kafka UI에서 좌측 Topic을 클릭하면 Topic 목록이 보이는데 이 부분에서 압축 후의 데이터 크기를 확인할 수 있다.

우측에 7KB 라고 적힌 부분이 압축 후의 데이터 크기이다. 압축률 0.007 이다.

2) 1,000건 전송 (10MB)

압축률 0.005 이다.

3) 10,000건 전송 (100MB)

설명 없이 쭉 나열하도록 하겠다. (아래 표 참고)

4) 100,000건 전송 (1GB)

5) 1,000,000건 전송 (10GB)

원 데이터 사이즈는 Topic > Statistics에서 Value size - Total size를 보고 확인할 수 있다.

2. snappy

1) 100건 전송 (1MB)

2) 1,000건 전송 (10MB)

3) 10,000건 전송 (100MB)

4) 100,000건 전송 (1GB)

5) 1,000,000건 전송 (10GB)

3. lz4

1) 100건 전송 (1MB)

2) 1,000건 전송 (10MB)

3) 10,000건 전송 (100MB)

4) 100,000건 전송 (1GB)

5) 1,000,000건 전송 (10GB)

4. zstd

1) 100건 전송 (1MB)

2) 1,000건 전송 (10MB)

3) 10,000건 전송 (100MB)

4) 100,000건 전송 (1GB)

5) 1,000,000건 전송 (10GB)

정리

압축률 성능은 zstd > gzip > lz4 > snappy 순으로 높았다.

속도는 zstd > lz4 > gzip > snappy 순으로 빨랐다. (100만건 전송 시)

zstd는 매우 높은 압축 성능을 자랑하지만 CPU 사용량이 높아 대용량 데이터 저장, 장기 보관용 데이터, 네트워크 대역폭 절감이 필요할 때 유용하지만, 실시간 시스템에서는 속도 저하가 발생할 수 있다고 한다.

gzip도 zstd 못지 않은 높은 압축 성능으로 데이터 저장 공간을 줄이는 데 매우 효과적이지만, 속도가 느린 단점이 있어 중요한 실시간 처리 환경에는 부적합하다.

lz4는 매우 빠른 압축/해제 속도와 낮은 CPU, 메모리 사용량 덕분에 실시간성이 중요한 시스템에 적합하여, Kafka, Redis, Spark 등에서 LZ4가 권장 압축 방식으로 많이 사용된다. 현재 필자의 회사에서도 lz4를 사용하고 있다.

결론

특별한 경우가 아니라면 제일 무난한 lz4를 쓰자.

[Springboot] 설정값을 주입 받는 방법 3가지 @Value, @ConfigurationProperties(@ConfigurationPerpertiesScan), @ConstructorBinding

Nellie Kim — Wed, 9 Oct 2024 15:56:28 +0900

사용한 기술 및 버전

스프링 부트 : 3.3.1
자바 : 17
IDE : IntelliJ Community

1. 첫 번째 방법 - @Value

1-1) @Value란 ?

사용법이 간단하고 편리해서 많은 개발자가 사용하는 주입 방법이다.

작동 원리는 설정파일의 값을 단순 문자열로 읽은 후, 필드의 타입에 맞게 변환하여 Spring의 의존성 주입(Dependency Injection) 메커니즘을 사용하여 주입한다.

그러나 이 방법은 편리하지만 단점이 많은 방법이다. 가장 큰 단점은 런타임 에러가 발생할 수 있다는 것이다.

@Value는 단순 문자열 바인딩을 수행하기 때문에, 설정 파일에서 잘못된 타입의 값을 주입하더라도 스프링이 즉각적으로 에러를 발생시키지 않는다. 실제 해당 필드를 사용하려는 시점에야 런타임 에러가 발생한다.

또 오작성을 체크해주지 않는다. 설정 파일에서 잘못된 키를 사용했을 경우, @Value는 기본적으로 오류를 발생시키지 않으며, 해당 값이 null로 주입될 수 있다. 예를 들어, 설정 값이 없거나 오타가 있을 때 정확한 에러 메시지를 제공하지 않거나, 단순히 null 값으로 처리될 수 있다.

즉, @Value는 에러를 예방도 어렵고 해결도 어렵다. 정신 건강을 위해 사용을 지양하는 것이 좋다.

1-2) 실습하기

application.properties

person.name=jay
person.job=developer

위의 설정값을 불러와보자.

Person

import lombok.Data;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Component;

@Data
@Component
public class Person {
    @Value("${person.name}")
    private String name;

    @Value("${person.job}")
    private String job;
}

AppRunner

ApplicationRunner 를 구현하여 테스트를 했다.

package com.example.demo.config;

import jakarta.annotation.PostConstruct;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.ApplicationArguments;
import org.springframework.boot.ApplicationRunner;
import org.springframework.stereotype.Component;

@Component
public class AppRunner implements ApplicationRunner {
    @Autowired
    Person person;

    @Override
    public void run(ApplicationArguments args) throws Exception {
        System.out.println(person);
    }
}

출력 결과

2. 두 번째 방법 - @ConfigurationProperties (@ConfigurationPerpertiesScan)

2-1) @ConfigurationProperties (@ConfigurationPerpertiesScan) 란?

설정파일의 값을 단순 문자열로 읽은 후 필드의 타입에 맞게 변환하는 것은 동일하나, 변환된 값을 리플렉션으로 setter (public) 메서드를 호출하여 주입한다. 그리고 사용할 때는 @EnableConfigurationProperties(Person.class) 를 항상 같이 붙여서 활성화를 시켜야 동작한다.

장점은 런타임 에러를 방지해준다.

@ConfigurationProperties는 클래스와 필드에 대한 타입 안전성을 보장한다. 즉, 설정 값이 잘못된 타입으로 주입될 경우, 애플리케이션이 시작될 때 (스프링 컨텍스트 초기화 시) 에러를 발생시키므로, 개발자가 애플리케이션 시작 시점에 문제를 바로 알 수 있다.

그러나 이 방법도 단점이 있는데, immutable 하지 않다는 점이다.

불변이 아니라는 말이다. setter로 바인딩을 하기 때문에 외부에서 변경될 가능성이 있으며 추후 다른 개발자가 설정값을 변경할 수 있으며 그로 인한 휴먼 에러가 생길 수 있다.

@ConfigurationProperties

이 어노테이션을 확인해보면, @Component로 등록이 되어 있지 않다. 그 말은, 이 어노테이션을 바라보는 다른 클래스가 빈으로 등록을 해준다는 뜻이다.

//
// Source code recreated from a .class file by IntelliJ IDEA
// (powered by FernFlower decompiler)
//

package org.springframework.boot.context.properties;

import java.lang.annotation.Documented;
import java.lang.annotation.ElementType;
import java.lang.annotation.Retention;
import java.lang.annotation.RetentionPolicy;
import java.lang.annotation.Target;
import org.springframework.core.annotation.AliasFor;
import org.springframework.stereotype.Indexed;

@Target({ElementType.TYPE, ElementType.METHOD})
@Retention(RetentionPolicy.RUNTIME)
@Documented
@Indexed
public @interface ConfigurationProperties {
    @AliasFor("prefix")
    String value() default "";

    @AliasFor("value")
    String prefix() default "";

    boolean ignoreInvalidFields() default false;

    boolean ignoreUnknownFields() default true;
}

@EnableConfigurationProperties

어떻게 빈으로 등록해줄까? 그 주인공은 @EnableConfigurationProperties 이다. 이 어노테이션을 항상 @ConfigurationProperties와 같이 써야 정상적으로 빈 등록이 잘 되어 설정 파일을 정상적으로 불러올 수 있는 것이다.

//
// Source code recreated from a .class file by IntelliJ IDEA
// (powered by FernFlower decompiler)
//

package org.springframework.boot.context.properties;

import java.lang.annotation.Documented;
import java.lang.annotation.ElementType;
import java.lang.annotation.Retention;
import java.lang.annotation.RetentionPolicy;
import java.lang.annotation.Target;
import org.springframework.context.annotation.Import;

@Target({ElementType.TYPE})
@Retention(RetentionPolicy.RUNTIME)
@Documented
@Import({EnableConfigurationPropertiesRegistrar.class})
public @interface EnableConfigurationProperties {
    String VALIDATOR_BEAN_NAME = "configurationPropertiesValidator";

    Class<?>[] value() default {};
}

@Import({EnableConfigurationPropertiesRegistrar.class}) 부분에서 주입이 일어난다. 자세히 들어가서 살펴보자.

EnableConfigurationPropertiesRegistrar

이 클래스의 registerBeanDefinitions에서 빈 등록이 일어난다.

ConfigurationPropertiesBeanRegistrar 클래스는 @ConfigurationProperties로 지정된 클래스들을 빈으로 등록한다.

//
// Source code recreated from a .class file by IntelliJ IDEA
// (powered by FernFlower decompiler)
//

package org.springframework.boot.context.properties;

import java.util.Arrays;
import java.util.Objects;
import java.util.Set;
import java.util.stream.Collectors;
import org.springframework.beans.factory.config.BeanDefinition;
import org.springframework.beans.factory.support.BeanDefinitionBuilder;
import org.springframework.beans.factory.support.BeanDefinitionRegistry;
import org.springframework.boot.validation.beanvalidation.MethodValidationExcludeFilter;
import org.springframework.context.annotation.ImportBeanDefinitionRegistrar;
import org.springframework.core.Conventions;
import org.springframework.core.type.AnnotationMetadata;

class EnableConfigurationPropertiesRegistrar implements ImportBeanDefinitionRegistrar {
    private static final String METHOD_VALIDATION_EXCLUDE_FILTER_BEAN_NAME = Conventions.getQualifiedAttributeName(EnableConfigurationPropertiesRegistrar.class, "methodValidationExcludeFilter");

    EnableConfigurationPropertiesRegistrar() {
    }

    // 핵심 코드 ⭐
    public void registerBeanDefinitions(AnnotationMetadata metadata, BeanDefinitionRegistry registry) {
        registerInfrastructureBeans(registry);
        registerMethodValidationExcludeFilter(registry);
        ConfigurationPropertiesBeanRegistrar beanRegistrar = new ConfigurationPropertiesBeanRegistrar(registry); // 핵심 클래스 ⭐
        Set var10000 = this.getTypes(metadata);
        Objects.requireNonNull(beanRegistrar);
        var10000.forEach(beanRegistrar::register);
    }

    private Set<Class<?>> getTypes(AnnotationMetadata metadata) {
        return (Set)metadata.getAnnotations().stream(EnableConfigurationProperties.class).flatMap((annotation) -> {
            return Arrays.stream(annotation.getClassArray("value"));
        }).filter((type) -> {
            return Void.TYPE != type;
        }).collect(Collectors.toSet());
    }

    static void registerInfrastructureBeans(BeanDefinitionRegistry registry) {
        ConfigurationPropertiesBindingPostProcessor.register(registry);
        BoundConfigurationProperties.register(registry);
    }

    static void registerMethodValidationExcludeFilter(BeanDefinitionRegistry registry) {
        if (!registry.containsBeanDefinition(METHOD_VALIDATION_EXCLUDE_FILTER_BEAN_NAME)) {
            BeanDefinition definition = BeanDefinitionBuilder.rootBeanDefinition(MethodValidationExcludeFilter.class, "byAnnotation").addConstructorArgValue(ConfigurationProperties.class).setRole(2).getBeanDefinition();
            registry.registerBeanDefinition(METHOD_VALIDATION_EXCLUDE_FILTER_BEAN_NAME, definition);
        }

    }
}

@ConfigurationPropertiesScan

@ConfigurationPropertiesScan은 클래스를 한꺼번에 매핑할 경우에 사용한다.

메인 클래스에 매번 일일이 클래스를 @EnableConfigurationProperties(Person2.class) 처럼 달아주지 않아도 된다. 패키지 경로만 지정해주면, @ConfigurationProperties이 붙은 모든 클래스를 한번에 매핑을 해준다. 편리한 기능이다.

//
// Source code recreated from a .class file by IntelliJ IDEA
// (powered by FernFlower decompiler)
//

package org.springframework.boot.context.properties;

import java.lang.annotation.Documented;
import java.lang.annotation.ElementType;
import java.lang.annotation.Retention;
import java.lang.annotation.RetentionPolicy;
import java.lang.annotation.Target;
import org.springframework.context.annotation.Import;
import org.springframework.core.annotation.AliasFor;

@Target({ElementType.TYPE})
@Retention(RetentionPolicy.RUNTIME)
@Documented
@Import({ConfigurationPropertiesScanRegistrar.class})
@EnableConfigurationProperties
public @interface ConfigurationPropertiesScan {
    @AliasFor("basePackages")
    String[] value() default {};

    @AliasFor("value")
    String[] basePackages() default {};

    Class<?>[] basePackageClasses() default {};
}

아래의 메인함수에서 @EnableConfigurationProperties 대신 @ConfigurationPropertiesScan(패키지경로) 를 써주면 된다.

package com.example.demo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.context.properties.ConfigurationPropertiesScan;
import org.springframework.boot.context.properties.EnableConfigurationProperties;

@SpringBootApplication
//@EnableConfigurationProperties(Person2.class) // 이렇게 말고도,
@ConfigurationPropertiesScan("com.example.demo.config") // 이렇게 사용 가능⭐
public class JavaTestApplication {

	public static void main(String[] args) {
		SpringApplication.run(JavaTestApplication.class, args);
	}

}

2-2) 실습하기

메인 클래스

메인 클래스에 @EnableConfigurationProperties(Person2.class)를 붙여줌으로서 Person2 클래스의 @ConfigurationProperties를 인식하고,

setter로 바인딩(클래스의 필드에 직접 접근하지 않고 리플렉션을 사용)하여 빈으로 만들어준다.

package com.example.demo.config;

import com.example.demo.config.Person2;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.context.properties.EnableConfigurationProperties;

@SpringBootApplication
@EnableConfigurationProperties(Person2.class) // 추가⭐
// @ConfigurationPropertiesScan("com.example.demo.config") // 이렇게 해도 된다
public class JavaTestApplication {

	public static void main(String[] args) {
		SpringApplication.run(JavaTestApplication.class, args);
	}
}

Person2

@ConfigurationProperties(prefix = "person") 를 추가해준다.

package com.example.demo.config;

import lombok.Data;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.boot.context.properties.EnableConfigurationProperties;
import org.springframework.stereotype.Component;

@Data
@ConfigurationProperties(prefix = "person") // 추가⭐
public class Person2 {

    private String name;
    private String job;
}

AppRunner

package com.example.demo.config;

import jakarta.annotation.PostConstruct;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.ApplicationArguments;
import org.springframework.boot.ApplicationRunner;
import org.springframework.stereotype.Component;

@Component
public class AppRunner implements ApplicationRunner {
    @Autowired
    Person2 person2;

    @Override
    public void run(ApplicationArguments args) throws Exception {
        System.out.println(person2);
    }
}

출력 결과

3. 세 번째 방법 - @ConfigurationProperties(또는 @ConfigurationPropertiesScan) + @ConstructorBinding → 권장⭐

3-1) @ConstructorBinding 이란?

@ConfigurationProperties 또는 @ConfigurationPropertiesScan 를 사용하는 것은 빈 생성 후, setter로 주입 받는 방식이었다.

@ConstructorBinding은 설정 값을 생성자 주입으로 처리하는 어노테이션이다. setter 를 거칠 필요가 없기 때문에 불변(immutable) 상태로 안전하게 사용할 수가 있다.

한마디로 빈을 만든 후 설정값을 세팅하는 것이 아니라 생성자를 만들 때 설정 값을 넣고 빈을 만드는 것이다.

주로 application.properties 또는 application.yml에 정의된 값들과 바인딩되지만, 환경 변수, 커맨드 라인 인수, 외부 설정 파일 등 다양한 소스에서도 값을 바인딩할 수 있다.

핵심은 @ConfigurationProperties와 함께 사용해 스프링 컨텍스트에서 값을 바인딩한다는 것이다. (@ConfigurationProperties 없이 @ConstructorBinding만 단독으로 사용할 수는 없다.)

스프링은 바인딩 과정에서 @ConstructorBinding이 적용된 클래스를 만나면 생성자를 통해 주입하는 방식으로 변경하는데,

이 과정은 Binder 클래스와 ConfigurationPropertiesBindingPostProcessor에서 처리된다.

스프링의 Binder 클래스는 @ConstructorBinding이 적용된 클래스를 감지하고 이 때 ConfigurationPropertiesBindConstructorProvider가 생성자 바인딩을 지원하며, 스프링은 리플렉션을 사용해 해당 클래스의 생성자를 탐색하고, 생성자를 통해 주입할 수 있도록 바인딩 방식을 바꾸게 된다.

@ConstructorBinding

//
// Source code recreated from a .class file by IntelliJ IDEA
// (powered by FernFlower decompiler)
//

package org.springframework.boot.context.properties.bind;

import java.lang.annotation.Documented;
import java.lang.annotation.ElementType;
import java.lang.annotation.Retention;
import java.lang.annotation.RetentionPolicy;
import java.lang.annotation.Target;

@Target({ElementType.CONSTRUCTOR, ElementType.ANNOTATION_TYPE})
@Retention(RetentionPolicy.RUNTIME)
@Documented
public @interface ConstructorBinding {
}

@Target({ElementType.CONSTRUCTOR}) 에서 볼 수 있듯이 생성자 위에 사용해야 한다.

스프링부트 2.x대 버전에서는 클래스 위에서 어노테이션 사용도 가능하다고 한다.

3-2) 실습하기

메인 클래스

메인 클래스에서는

@ConfigurationPropertiesScan("com.example.demo.config") 또는 @EnableConfigurationProperties(Person3.class) 를 붙여준다.

2번 방법과 구조 동일하다.

package com.example.demo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.context.properties.ConfigurationPropertiesScan;
import org.springframework.boot.context.properties.EnableConfigurationProperties;

@SpringBootApplication
// @ConfigurationPropertiesScan("com.example.demo.config") // 이렇게 해도 되고
@EnableConfigurationProperties(Person3.class) // 또는 이렇게 해도 된다.
public class JavaTestApplication {

	public static void main(String[] args) {
		SpringApplication.run(JavaTestApplication.class, args);
	}
}

Person3

생성자 위에 붙여주어야 하기 때문에, 생성자를 만들어주어야 한다.

생성자를 만들고 그 위에 @ConstructorBinding 을 붙여주면 된다.

import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.boot.context.properties.bind.ConstructorBinding;

@ToString
@ConfigurationProperties(prefix = "person")
public class Person3 {
    private final String name;
    private final String job;

    @ConstructorBinding // 추가⭐
    public Person3(String name, String job){
        this.job = job;
        this.name = name;
    }
}

AppRunner

package com.example.demo.config;

import jakarta.annotation.PostConstruct;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.ApplicationArguments;
import org.springframework.boot.ApplicationRunner;
import org.springframework.stereotype.Component;

@Component
public class AppRunner implements ApplicationRunner {
    @Autowired
    Person3 person3;

    @Override
    public void run(ApplicationArguments args) throws Exception {
        System.out.println(person3);
    }
}

출력 결과

4. 결론

4-1) @Value

바인딩 방법

설정파일의 값을 단순 문자열로 읽은 후, 필드의 타입에 맞게 변환하여 Spring의 의존성 주입(Dependency Injection) 메커니즘을 사용

장점

사용법이 간단하고 편리하다.

단점

런타임 에러 발생 가능 : @Value는 단순 문자열 바인딩을 수행하기 때문에, 설정 파일에서 잘못된 타입의 값을 주입하더라도 스프링이 즉각적으로 에러를 발생시키지 않는다. 실제 해당 필드를 사용하려는 시점에야 런타임 에러가 발생한다.

오타에 취약: 설정 파일에서 잘못된 키를 사용했을 경우, @Value는 기본적으로 오류를 발생시키지 않으며, 해당 값이 null로 주입될 수 있다. 예를 들어, 설정 값이 없거나 오타가 있을 때 정확한 에러 메시지를 제공하지 않거나, 단순히 null 값으로 처리될 수 있다.

런타임 에러를 발생시키는 @Value 는 런타임 에러, 휴먼 에러의 발생 가능성이 높으므로 찾기도 어려운 에러가 발생할 수 있다. 사용을 지양하는 것이 좋다.

4-2) @ConfigurationProperties 또는 @ConfigurationPropertiesScan

바인딩 방법

설정파일의 값을 단순 문자열로 읽은 후, 필드의 타입에 맞게 변환하여(위와 동일) 변환된 값을 리플렉션으로 setter 메서드를 호출하여 주입한다.

장점

런타임 에러 방지 : @ConfigurationProperties는 클래스와 필드에 대한 타입 안전성을 보장한다. 즉, 설정 값이 잘못된 타입으로 주입될 경우, 애플리케이션이 시작될 때 (스프링 컨텍스트 초기화 시) 에러를 발생시키므로, 개발자가 애플리케이션 시작 시점에 문제를 바로 알 수 있다.

구체적인 에러 메시지 : 잘못된 설정 값이 주입될 때 구체적인 에러 메시지를 제공한다. 스프링은 설정 값이 클래스의 필드와 일치하지 않거나 바인딩할 수 없는 경우 정확한 경로와 문제를 알려주며 개발자가 명확하게 에러 위치를 파악할 수 있다.

대규모 설정 관리에 유리: @ConfigurationProperties는 복잡하고 대규모 설정 값을 클래스로 관리하기 때문에, 각 설정 값에 대해 더욱 구조화된 방식으로 접근할 수 있다.

단점

immutable 하지 않다 : setter로 바인딩을 하기 때문에 외부에서 변경될 가능성이 있으며 추후 다른 개발자가 설정값을 변경할 수 있으며 그로 인한 휴먼 에러가 생길 수 있다.

4-3) @ConfigurationProperties(또는 @ConfigurationPropertiesScan) + @ConstructorBinding → 권장⭐

바인딩 방법

설정파일의 값을 단순 문자열로 읽은 후, 필드의 타입에 맞게 변환(동일)하고 리플렉션을 사용해 생성자를 호출하여 주입한다.

장점

불변성(Immutable): @ConstructorBinding을 사용하면 설정 값이 생성자를 통해 주입되므로, 이후 해당 객체의 필드는 변경될 수 없다. 불변 객체로 만들 수 있어 동시성 문제를 피하고, 설정 값이 의도치 않게 변경되는 것을 방지할 수 있다.

휴먼 에러 방지 : setter가 없으므로 코드의 복잡성이 줄어들고, 외부에서 값이 임의로 수정되는 휴먼 에러 가능성이 낮다.

단점

구현 복잡성: @ConstructorBinding을 사용하기 위해 추가적인 어노테이션(@EnableConfigurationProperties 또는 @ConfigurationPropertiesScan)을 사용해야 한다.

진짜 결론

@ConstructorBinding 를 적극 활용하자!~!

[Springboot] 스프링 부트 자동구성의 동작 원리 파헤쳐보기 (@SpringBootApplication, @EnableAutoConfiguratioin, @Import, AutoConfigurationImportSelector)

Nellie Kim — Sat, 28 Sep 2024 17:16:37 +0900

어째서 스프링부트는 우리가 원하는 많은 Bean 들을 자동으로 등록해주는 것일까? 스프링부트가 해주었던 마법같은 동작을 하나하나 들여다보자.

사용한 기술 및 버전

스프링 부트 : 3.3.1
자바 : 17
IDE : IntelliJ Community

@SpringBootApplication 을 따라 들어가 보기

인텔리제이 프로젝트의 main 메서드가 있는 실행파일을 먼저 들어가보자.

순서대로 다음 어노테이션들을

@SpringBootApplication ⇒ @EnableAutoConfiguratioin ⇒ @Import({AutoConfigurationImportSelector.class}) 로 따라들어가보자.

@EnableAutoConfiguratioin 파일에 보면, @Import 어노테이션이 보인다.

@Import 어노테이션은 다른 클래스나 구성 요소를 스프링 애플리케이션 컨텍스트에 추가하는 역할을 한다.

이 어노테이션에 AutoConfigurationImportSelector 가 등록이 되어있는 것을 볼 수 있다.

AutoConfigurationImportSelector 를 따라 들어가 보자.

AutoConfigurationImportSelector

AutoConfigurationImportSelector 에 들어가면 getCandidateConfigurations 메서드가 있다. 이 메서드가 핵심이다.

이 메서드에서는 Assert.notEmpty ~ 로 시작하는 메서드에

META-INF/spring/org.springframework.boot.autoconfigure.AutoConfiguration.imports 를 매개변수로 받고 있다.

이 매개변수가 뭐길래 얘를 참조하는 것일까?

이 매개변수의 구조를 따라 프로젝트 경로에서

META-INF/spring/org.springframework.boot.autoconfigure.AutoConfiguration.imports 파일을 를 찾아가보자.

프로젝트의 외부 라이브러리 ⇒ Maven: ~ : spring-boot-autoconfigure:버전 ⇒ .jar ⇒ META-INF ⇒ spring ⇒ org.springframework.boot.autoconfigure.AutoConfiguration.imports

org.springframework.boot.autoconfigure.AutoConfiguration.imports 파일을 열어보면 ,

아래와 같은 152줄의 설정 클래스들이 미리 들어있다.

AutoConfigurationImportSelector의 getCandidateConfigurations 메서드가 이 설정 클래스들을 참조하고 있고,

이 AutoConfigurationImportSelector를 스프링부트는 @Import 어노테이션으로 주입하고 있었던 것이다.

이 많은 자동 설정 클래스들의 진짜 모습을 보기 위해 이 중에서 레디스 설정 클래스인 RedisAutoConfiguration를 들어가보자.

RedisAutoConfiguration

드디어 자동구성 클래스의 적나라한 모습을 볼 수 있다.

//
// Source code recreated from a .class file by IntelliJ IDEA
// (powered by FernFlower decompiler)
//

package org.springframework.boot.autoconfigure.data.redis;

import org.springframework.boot.autoconfigure.AutoConfiguration;
import org.springframework.boot.autoconfigure.condition.ConditionalOnClass;
import org.springframework.boot.autoconfigure.condition.ConditionalOnMissingBean;
import org.springframework.boot.autoconfigure.condition.ConditionalOnSingleCandidate;
import org.springframework.boot.context.properties.EnableConfigurationProperties;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Import;
import org.springframework.data.redis.connection.RedisConnectionFactory;
import org.springframework.data.redis.core.RedisOperations;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.data.redis.core.StringRedisTemplate;

@AutoConfiguration
@ConditionalOnClass({RedisOperations.class})
@EnableConfigurationProperties({RedisProperties.class})
@Import({LettuceConnectionConfiguration.class, JedisConnectionConfiguration.class})
public class RedisAutoConfiguration {
    public RedisAutoConfiguration() {
    }

    @Bean
    @ConditionalOnMissingBean({RedisConnectionDetails.class})
    PropertiesRedisConnectionDetails redisConnectionDetails(RedisProperties properties) {
        return new PropertiesRedisConnectionDetails(properties);
    }

    @Bean
    @ConditionalOnMissingBean(
        name = {"redisTemplate"}
    )
    @ConditionalOnSingleCandidate(RedisConnectionFactory.class)
    public RedisTemplate<Object, Object> redisTemplate(RedisConnectionFactory redisConnectionFactory) {
        RedisTemplate<Object, Object> template = new RedisTemplate();
        template.setConnectionFactory(redisConnectionFactory);
        return template;
    }

    @Bean
    @ConditionalOnMissingBean
    @ConditionalOnSingleCandidate(RedisConnectionFactory.class)
    public StringRedisTemplate stringRedisTemplate(RedisConnectionFactory redisConnectionFactory) {
        return new StringRedisTemplate(redisConnectionFactory);
    }
}

여기서 낯선 어노테이션이 눈에 띈다.

@ConditionalOnMissingBean, @ConditionalOnSingleCandidate 이다.

@ConditionalOnMissingBean

@ConditionalOnMissingBean은 스프링 프레임워크에서 사용하는 어노테이션으로, 특정 타입의 빈(Bean)이 스프링 컨텍스트에 존재하지 않을 때만 새로 빈을 생성하도록 조건을 설정하는 어노테이션이다.

만약 개발자가 이미 해당 타입의 빈을 명시적으로 정의해 두었다면, 스프링이 자동으로 새로 생성하지 않고 기존의 빈을 사용하게 된다.

이는 스프링의 자동 구성 기능을 효율적으로 처리하기 위해 많이 사용된다. 따라서 이 어노테이션이 없을 경우, 같은 타입의 빈이 여러 번 생성될 수 있으며, 이것은 애플리케이션 동작에 예상치 못한 영향을 줄 수 있다.

이 코드에서 @ConditionalOnMissingBean이 사용된 부분을 보면

@ConditionalOnMissingBean({RedisConnectionDetails.class}): 이 어노테이션이 붙은 redisConnectionDetails 메서드는, 스프링 컨텍스트에 RedisConnectionDetails 타입의 빈이 없을 때만 이 메서드가 호출되어 PropertiesRedisConnectionDetails 타입의 빈을 생성한다.
@ConditionalOnMissingBean(name = {"redisTemplate"}): 여기서는 이름이 "redisTemplate"인 빈이 존재하지 않을 때만 redisTemplate 메서드가 실행되어 RedisTemplate<Object, Object> 타입의 빈을 생성한다.
@ConditionalOnMissingBean: 여기서는 타입을 명시하지 않고 기본적으로 동일한 타입의 빈이 없을 때만 메서드가 실행되어 빈을 생성한다.
@ConditionalOnSingleCandidate: 특정 타입의 빈이 스프링 컨텍스트에 하나만 있을 때, 그 빈을 사용할 수 있도록 조건을 설정하는 어노테이션이다. 이를 통해 의존성 주입 시 모호성을 해결하고, 다수의 후보가 있을 때는 해당 빈을 생성하지 않도록 제어할 수 있다.

그렇다면 이제 아래 RedisAutoConfiguration 코드의 일부를 자세히 분석해보자.

    @Bean
    @ConditionalOnMissingBean(
        name = {"redisTemplate"}
    )
    @ConditionalOnSingleCandidate(RedisConnectionFactory.class)
    public RedisTemplate<Object, Object> redisTemplate(RedisConnectionFactory redisConnectionFactory) {
        RedisTemplate<Object, Object> template = new RedisTemplate();
        template.setConnectionFactory(redisConnectionFactory);
        return template;
    }

따라서, 위 코드가 의미하는 것은 다음과 같다.

redisTemplate이라는 이름의 빈이 없고, RedisConnectionFactory 타입의 빈이 하나만 존재할 경우에만 RedisTemplate<Object, Object> 빈을 생성한다.

위 코드를 보고 예상할 수 있는 스프링부트의 실행 과정은 ,

먼저, 스프링 컨텍스트에 redisTemplate 빈이 있는지 확인한다. 만약 이미 있다면, 이 메서드는 실행되지 않고 건너뛴다.
redisTemplate 빈이 없으면, RedisConnectionFactory 타입의 빈이 하나만 있는지 확인한다. 이 타입의 빈이 여러 개 존재하면, 이 메서드도 실행되지 않고 건너뛴다.
위의 두 조건이 모두 만족하면 드디어 RedisTemplate<Object, Object> 빈을 생성하여 등록한다.

결론

스프링 부트는 @EnableAutoConfiguration을 통해 다양한 자동 설정 클래스를 스프링 컨텍스트에 주입하여, 개발자가 따로 설정하지 않아도 필요한 빈들을 자동으로 등록해주는 기능을 제공한다.

이 과정에서 AutoConfigurationImportSelector가

META-INF/spring/org.springframework.boot.autoconfigure.AutoConfiguration.imports 파일에 정의된 여러 설정 클래스들을 로드하고, 각종 조건부 어노테이션(@ConditionalOnMissingBean, @ConditionalOnSingleCandidate)을 활용해 이미 등록된 빈이 있거나 특정 조건이 만족되지 않으면 새로운 빈을 생성하지 않도록 제어한다.

이를 통해 중복 생성 문제를 방지하고, 애플리케이션의 성능과 효율성을 높인다.

예를 들어, RedisAutoConfiguration 클래스는 RedisTemplate이나 StringRedisTemplate 빈을 자동으로 생성하지만, 같은 타입의 빈이 이미 있거나 RedisConnectionFactory 빈이 여러 개 존재할 경우 자동 생성을 건너뛰게 된다.

이러한 방식으로 스프링 부트는 유연하고 효율적인 빈 관리를 가능하게 한다.

[MQTT] MQTTX 사용해서 일정한 주기로 웹소켓 메시지 전송하기

Nellie Kim — Mon, 26 Aug 2024 17:43:49 +0900

MQTT 웹소켓을 사용하는 도중, 프론트엔드 개발자에게서 통신모듈 디버깅이 필요하다고 하며 일정한 주기로 메시지를 보내달라는 요청이 들어왔다. (예를 들어, 2초에 한번씩)

어떻게 할까 알아보던 중에, MQTTX라는 프로그램이 있는 것을 알게되었다.

MQTTX는 MQTT 프로토콜을 사용하는 클라이언트 애플리케이션으로, MQTT (Message Queuing Telemetry Transport) 메시지 프로토콜을 통해 메시지를 발행하고 구독하는 기능을 제공한다.

MQTT를 다운받고, 커넥션 설정해주고, 쏴주면 끝이다.

1. MQTTX 다운받기

https://mqttx.app/

MQTTX: Your All-in-one MQTT Client Toolbox

MQTTX: A powerful, all-in-one MQTT 5.0 client toolbox for desktop, CLI and WebSocket, it makes developing and testing MQTT applications faster and easier.

mqttx.app

위 링크로 들어가서,

다운로드 버튼 클릭

OS 사양에 맞추어 exe 파일을 다운로드 해준다.

본인은 제일 위에 있는 x86-64 를 받았다.

받았으면 그대로 다음 눌러서 쭉 설치하면 된다.

2. MQTTX 커넥션 설정 & 메시지 전송

+ New Connection 클릭

Name, Host (프로토콜과 IP), Port 를 적어주고

Connect 클릭

연결이 잘 되었으면,

가운데 하단에 토픽명을 적어준다.

나는 테스트용으로 /topic/test 라고 적었다.

그리고 구독을 할 애도 만들었다. 잘 받는지 봐야하니까..

좌측 상단 New Subscription 클릭

방금 설정한 토픽명만 적어주고 Confitm 클릭

좌측에 구독자가 하나 생기는 것을 확인할 수 있다.

그리고 제일 중요한 시간 설정이다.

가운데 하단 이 화살표 표시 누르고 Timed Message 클릭

2초마다 한번씩 전송하기 위해 2를 입력

우측 하단 전송 아이콘 클릭 !

2초마다 데이터 전송하고, 구독하는 것을 확인할 수 있다. ^^

전송을 중단하고 싶으면 우측 상단의 Clear timer 버튼을 누르면 된다!

끝!

[MQTT] Kafka → 웹 소켓 메시지 전송 테스트(Vue3으로 화면 만들어 테스트)

Nellie Kim — Fri, 9 Aug 2024 13:07:56 +0900

카프카에서 웹소켓으로 메시지를 전송하여 실시간 처리를 해야한다.

지금 나는 백엔드 개발자인데, 프론트에 내가 만든 mqtt 정보 (url, 인증정보, 포트 등) 을 제공해주어야 한다.

백엔드 단에서는 테스트가 모두 완료되었지만,

제공하기 전에, 내가 직접 vue 프론트 프로젝트를 만들어서 내가 보낸 카프카 메시지를 잘 받아오는지 확인하고 싶었다.

백엔드 간단한 코드와 vue 코드를 직접 작성하고, 테스트 하는 과정을 정리했다.

사용한 기술 및 버전

스프링 부트 : 2.5.4
자바 : 1.8
카프카 : 3.7.0
MQTT : 1.2.5 (vue 에서는 5.9.1)
vue : 3.2.13

백엔드 코드

1. 차량 ID 별로 MQTT 토픽 생성하여 전송

먼저 카프카 컨슈머에서 데이터를 param으로 받고,

objectMapper.readTree(param) 으로 만들어서 차량 아이디를 꺼내준다.

그리고 메시지를 보낼 때 /topic/{꺼낸 차량 아이디} 로 보내준다.

카프카 컨슈머에서 mqtt로 메시지를 전송하는데, 차량별로 각각의 토픽을 만들어서 전송해주려고 한다. (차량 5개일 때, 토픽도 5개)

그래서 Depth 있게 /topic/{차량id} 이런 식으로 토픽을 생성하려고 한다.

(ex. /topic/obu_id_1, /topic/obu_id_2, /topic/obu_id_3 … )

KafkaConsumerTest

    @KafkaListener(topics = "red-data", groupId = "red-data-consumer")
    public void redDataConsume(String param) {
        ObjectMapper objectMapper = new ObjectMapper();

        try {
            JsonNode jsonNode = objectMapper.readTree(param);
            String obuId = jsonNode.get("obu_ID").asText();
            System.out.println("  : "+obuId);

            //   차량 별 토픽으로 MQTT 메시지 전송 !!
            mqttClientServiceTest.sendMessage("/topic/"+obuId, param);

        } catch (Exception e) {
            e.printStackTrace();
            System.out.println("JSON 파싱 중 오류 발생: " + e.getMessage());
        }
    }

2. MqttConfigTest

MqttPahoMessageDrivenChannelAdapter(메시지 수신 담당) 에 수신할 토픽을 /topic → /topic/# (와일드카드사용) 로 수정하여 , /topic 하위의 모든 토픽을 수신하도록 하였다. 나머지는 건드리지 않았다.

그리고 이 코드는 프론트와 관계가 없다. 프론트에 보여줄 용도가 아닌 백엔드에서 확인할 용도이다.

(지금 글과는 무관한 코드라는 뜻)

@Configuration
public class MqttConfigTest {
    @Value("${mqtt.broker.url}")
    private String broker;

    @Value("${mqtt.client.sub-id}")
    private String clientSubId;

    @Value("${mqtt.client.pub-id}")
    private String clientPubId;

    @Bean
    public MqttConnectOptions mqttConnectOptions() {
        MqttConnectOptions options = new MqttConnectOptions();
        options.setServerURIs(new String[]{broker}); // 브로커 URI 설정
        options.setCleanSession(true); // 클린 세션 설정 (클라이언트가 브로커에 다시 연결될 때 이전 세션의 모든 상태 정보 (ex. 구독, 메시지큐 등)가 삭제되고 새로운 세션이 시작 됨
        options.setKeepAliveInterval(120); // Keep Alive 설정 (초 단위)
        options.setUserName("test"); // 사용자 이름 설정
        options.setPassword("test".toCharArray()); // 비밀번호 설정
        options.setAutomaticReconnect(true); // 자동 재연결 설정
        options.setConnectionTimeout(30); // 연결 타임아웃 설정 (초 단위)

        return options;
    }


    @Bean
    public MqttPahoClientFactory mqttClientFactory() {
        DefaultMqttPahoClientFactory factory = new DefaultMqttPahoClientFactory();
        factory.setConnectionOptions(mqttConnectOptions()); // 연결 옵션 설정
        return factory;
    }


    @Bean
    public MqttPahoMessageHandler mqttPahoMessageHandler() {
        MqttPahoMessageHandler messageHandler = new MqttPahoMessageHandler(clientPubId, mqttClientFactory());
        messageHandler.setAsync(true); // 비동기 메시지 전송 설정
        messageHandler.setDefaultTopic("/topic"); // 기본 토픽 설정
        messageHandler.setDefaultQos(0); // QoS 설정 (0, 1, 2) -> 실시간 데이터는 보통 0을 사용

        return messageHandler;
    }


    @Bean
    public MqttPahoMessageDrivenChannelAdapter mqttPahoMessageDrivenChannelAdapter() {
        
        //   /topic/하위로 들어오는 모든 토픽 수신
        MqttPahoMessageDrivenChannelAdapter adapter = new MqttPahoMessageDrivenChannelAdapter(clientSubId, mqttClientFactory(), "/topic/#");

        adapter.setCompletionTimeout(10000); // 메시지 수신 타임아웃 설정
        adapter.setConverter(new DefaultPahoMessageConverter()); // 메시지 변환기 설정
        adapter.setQos(1); // QoS 설정
        adapter.setOutputChannel(mqttInputChannel()); // 출력 채널 설정
        adapter.setRecoveryInterval(60000); // 재연결 간격 설정 (1분)

        return adapter;
    }
    

    @Bean
    public MessageChannel mqttInputChannel() {
        return new DirectChannel();
    }


    @Bean
    @ServiceActivator(inputChannel = "mqttInputChannel")
    public MessageHandler handler() {
        return message -> {
            String topic = message.getHeaders().get("mqtt_receivedTopic").toString(); // 수신된 토픽 가져오기
            String payload = message.getPayload().toString(); // 수신된 메시지 페이로드 가져오기

            System.out.println("페이로드 : " + payload + "/  토픽 : " + topic); // 메시지 및 토픽 출력
        };
    }
}

프론트엔드 코드

1. Vue Component 컴포넌트 작성

src/components/MqttComponent.vue 파일을 생성하고 코드 작성. 이 컴포넌트는 MQTT 브로커에 연결하고, 특정 토픽을 구독하며, 수신된 메시지를 화면에 표시하는 역할을 한다.

일단, 하드코딩으로 /topic/obu_id_test_data를 구독하게 코딩했다.

프론트에서는 대시보드에서 차량 리스트에서 특정 차량을 클릭하면, 특정 차량의 id를 받아서 /topic/{차량id} 로 구독하면 된다.

지금은 프론트에서 잘 표시가 되는지 테스트만 하는 거니까, 하드코딩으로만 테스트 했다.

코드는 간단하다. 크게 보면 아래 두가지 로직만 있으면 된다.

MQTT 클라이언트 생성
토픽 구독

<template>
  <div>
    <h1>MQTT Messages</h1>
    <h2>test</h2>
    <div v-if="messages.length">
      <ul>
        <li v-for="(msg, index) in messages" :key="index">
          {{ msg }}
        </li>
      </ul>
    </div>
    <div v-else>
      <p>아직 수신된 메시지가 없습니다.</p>
    </div>
  </div>
</template>

<script>
import mqtt from "mqtt";

export default {
  data() {
    return {
      client: null, // MQTT 클라이언트 
      messages: [], // 받을 메시지 리스트 
    };
  },
  mounted() {
    //   1. MQTT 연결 옵션 지정
    const options = {
      host: "192.168.15.15",
      port: 8083,
      protocol: "ws", // WebSocket protocol
      username: "test",
      password: "test",
    };

    //   2. MQTT client 생성 (MQTT 연결 및 유저 정보 입력)
    this.client = mqtt.connect(`ws://${options.host}:${options.port}/mqtt`, {
      username: options.username,
      password: options.password,
    });

    //   3. MQTT broker에 연결
    this.client.on("connect", () => {
      console.log("MQTT broker에 연결되었습니다.");

      // 3-1) 특정 토픽을 구독 
      this.client.subscribe(`/topic/obu_id_test_data`, (err) => { // obu_id_test_data 는 하드코딩된 상태. 프론트에서 수정해주어야 한다!! 
        if (err) {
          console.error("Subscription error:", err);
        } else {
          console.log("topic을 구독합니다.");
        }
      });
    });

    //   4. 메시지가 들어왔을 때 처리 로직 (화면에 보여줄 메시지 리스트에 push)
    this.client.on("message", (topic, message) => {
      // Convert the message buffer to string
      const msg = message.toString();
      console.log(`토픽으로부터 메시지 수신 ${topic}: ${msg}`);
      this.messages.push(msg); // 받은 메시지를 messages 리스트에 추가
    });

    //   5. 에러 처리 
    this.client.on("error", (error) => {
      console.error("Connection error:", error);
    });
  },
  beforeUnmount() {
    // Clean up on component destroy
    if (this.client) {
      this.client.end();
    }
  },
};
</script>

<style scoped>
/* Add your styles here */
</style>

2. App.vue 수정

메인 화면인 src/App.vue 파일을 수정하여 위에서 만든 MqttComponent를 추가해준다.

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <!-- <HelloWorld msg="Welcome to Your Vue.js App" /> -->
  <MqttComponent msg="Welcome to Your Vue.js App" /> //   추가 !
</template>

<script>
// import HelloWorld from "./components/HelloWorld.vue";
import MqttComponent from "./components/MqttComponent.vue"; //   추가 !

export default {
  name: "App",
  components: {
    // HelloWorld,
    MqttComponent, //   추가 !
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

기본 Vue 페이지.

개발자 도구 콘솔을 보니

실행하기만 해도, 브로커 연결 및 토픽 구독이 진행된다.

프로듀서로 100건을 보내보자. 포스트맨 Send!!

포스트맨으로 카프카에 메시지를 쏴봤다.

실시간으로 100건이 순식간에 카프카 → MQTT (웹소켓용) 를 거쳐 화면에 보여지는 것을 확인할 수 있다..!

(EMQX 라는 웹소켓을 지원하는 MQTT 브로커를 사용하여 웹소켓을 이용하는 방식으로 진행했다)

아주 순식간에 100건이 쌓였다.

실시간 소켓의 위력은 대단한 것 같다!!

[Redis] 레디스 캐시를 사용하면 조회 성능이 몇 배 정도 빨라질까? (@Cacheable)

Nellie Kim — Wed, 31 Jul 2024 16:11:53 +0900

1. 레디스 캐시 안 썼을 때 조회 시간

SecuritySupportSvcImpl

	@Override
	public List<ComRoleUserDto> getLoginUserRole(String userId) {
		return securitySupportDao.getLoginUserRole(userId);
	}

컨트롤러

    @GetMapping("/mapg")
    public List<ComRoleUserDto> getLoginUserRole() {
        final List<ComRoleUserDto> list = securitySupportSvc.getLoginUserRole("admin");

        return list;
    }

호출을 하면 64초 정도가 나온다. 여러번 호출해봐도 비슷하다.

2. 레디스 캐시 썼을 때 조회 시간

SecuritySupportSvcImpl

	@Cacheable(value = "cacheNameTest") //   추가 !! 
	@Override
	public List<ComRoleUserDto> getLoginUserRole(String userId) {
		return securitySupportDao.getLoginUserRole(userId);
	}

10초 대로 확 줄었다. 원래는 DB에서 많은 데이터를 긁어와서 테스트를 해봐야하지만, 귀찮아서 이 정도로만 테스트 ^^;

그리고 한 번 호출 시, 캐시 이름이 생성되는지도 확인해보았다.

    // 모든 캐시의 키 밸류 가져오기
    @GetMapping("/allCacheKeyValue")
    public Map<String, Object> getAllCacheValues() {
        Map<String, Map<Object, Object>> allCacheValues = new HashMap<>();

        final HashMap<String, Object> map = new HashMap<>();

        // 모든 캐시 이름을 조회
        for (String cacheName : cacheManager.getCacheNames()) {
            map.put(cacheName, cacheName);
        }

        return map;
    }

한 번 호출을 하면,

없었던 ‘cacheNameTest’가 생기는 것도 확인할 수 있었다!

@Cacheable어노테이션을 붙이고 호출을 하면 1번째 호출할 때는 DB에서 가져와 캐시에 저장해놓고,

2번째 호출부터는 해당 캐시에서 데이터를 가져오기 때문에 빨라지는 것이다.

레디스 UI 에서도 cachNameTest 란 Key 값으로 캐시가 저장된 것을 확인할 수 있다.

결론

@Cacheable 을 쓰자.

조회 속도가 6배 정도 빨라졌다. (물론 대용량 데이터로 다시 실험해봐야 하지만...다른 테스트 블로그 보면 대용량 데이터는 3배 정도 빨라지는 것 같다.)

스프링부트는 기본적으로 ConcurrentMapCache를 지원해준다. 아무것도 의존성 추가하지 않아도 그냥 쓸 수 있다.

레디스 캐시를 사용하고 싶으면,

pom.xml 파일에 ‘스프링부트 스타터 데이터 레디스’ 추가하면, 자동으로 기본 캐시가 ConcurrentMapCache 에서 RedisCache 로 설정된다.

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-data-redis</artifactId>
			<version>3.3.1</version>
		</dependency>

RedisConfig 설정파일에도 @EnableCaching 을 추가해주어야 한다.

@Configuration
@EnableCaching // 레디스 캐시 사용을 위해 추가 !!!!
public class RedisConfig {

이렇게만 해도 기본적인 캐시는 사용 가능하다. 더 세부적인 설정은 물론 RedisCacheConfiguration을 따로 빈등록 해주어야 한다.

나는 레디스설정까지 모두 추가하여 레디스캐시로 사용하였다.

레디스 캐시로 조회는 처음 사용해보는데, 앞으로 자주 애용해야 겠다!

조회 엄청 빨라지는 레디스 캐시 개꿀~~~

[Redis] Redis 라이브러리 3종 비교 (Spring redis vs Lettuce vs Redisson)

Nellie Kim — Sun, 28 Jul 2024 14:26:44 +0900

키밸류 저장소인 Redis는 유명한 클라이언트 라이브러리들이 3가지가 있습니다.

Lettuce, Redisson, Jedis가 있는데, 오늘은 스프링 데이터 레디스와 Lettuce, Redisson 이렇게 3가지를 비교하며 코드를 작성해보겠습니다.

(Jedis는 구현 방식이 간단하지만, 비동기 처리를 지원하지 않으며 Thread-safe 하지 않아 잘 쓰지 않는 추세라고 합니다.)

1. spring data redis

2. Lettuce

3. Redisson

사용 사례별 추천

사용한 기술

spring boot : 3.3.1
java : 17
Maven
spring-data-redis : 3.3.1
lettuce : 6.3.1
redisson : 3.16.3

1. spring data redis

spring data redis 설정 코드

Spring Data Redis는 Redis와 상호작용하기 위한 고수준의 추상화를 제공합니다. Redis 클라이언트로 Lettuce를 사용하더라도 Spring Data Redis의 추상화된 API를 사용하여 보다 간단하게 Redis와 통신할 수 있습니다.

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.data.redis.connection.RedisClusterConfiguration;
import org.springframework.data.redis.connection.RedisConnectionFactory;
import org.springframework.data.redis.connection.lettuce.LettuceConnectionFactory;
import org.springframework.data.redis.core.RedisTemplate;

import java.util.Arrays;

@Configuration
public class RedisConfiguration {
    @Value("${spring.redis.cluster.nodes}")
    private String clusterNodes;
    
    /**
     * RedisConnectionFactory 빈 생성
     * (LettuceConnectionFactory를 사용하여 Redis 서버와의 연결을 설정)
     *
     * @return RedisConnectionFactory 객체
     */
    @Bean
    public RedisConnectionFactory redisConnectionFactory() {
        RedisClusterConfiguration clusterConfig = new RedisClusterConfiguration(Arrays.asList(clusterNodes.split(", ")));
        clusterConfig.setMaxRedirects(maxRedirects);

        return new LettuceConnectionFactory(clusterConfig);
    }
 

    // **RedisTemplate**을 정의하여 RedisConnectionFactory를 주입합니다. 
    @Bean
    public RedisTemplate<String, Object> redisTemplate(RedisConnectionFactory redisConnectionFactory) {
        RedisTemplate<String, Object> redisTemplate = new RedisTemplate<>();
        redisTemplate.setConnectionFactory(redisConnectionFactory);
        return redisTemplate;
    }
}

spring data redis 사용 코드 (RedisTemplate 구현)

import lombok.RequiredArgsConstructor;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.stereotype.Service;

@RequiredArgsConstructor
@Service
public class RedisUtils {
    /**
     *  Redis 사용위한 util 클래스
     */
    private final RedisTemplate<String, Object> redisTemplate;

    /**
     * 지정된 키와 값으로 데이터를 Redis에 저장
     */
    public void setData(String key, String value) {
        redisTemplate.opsForValue().set(key, value);
    }

    /**
     * 지정된 키에 해당하는 데이터를 Redis에서 조회
     */
    public String getData(String key) {
        return (String) redisTemplate.opsForValue().get(key);
    }

    /**
     * 지정된 키에 해당하는 데이터를 Redis에서 삭제
     */
    public void deleteData(String key) {
        redisTemplate.delete(key);
    }
}

장점:

Spring 통합: Spring 애플리케이션에서 쉽게 통합할 수 있으며, Spring의 다양한 기능과 잘 통합됩니다.
고수준 API: Redis에 대한 고수준 추상화를 제공하여 사용이 쉽습니다. (RedisTemplate을 통해 Redis와 상호작용)
리포지토리 지원: Spring Data의 리포지토리 패턴을 사용하여 데이터 접근을 간편하게 할 수 있습니다.

단점:

추가적인 레이어: Spring Data Redis는 추가적인 추상화 레이어를 제공하여 성능에 영향을 미칠 수 있습니다.
유연성 부족: Lettuce나 Redisson에 비해 유연성이 떨어질 수 있습니다.

2. lettuce

lettuce 설정 코드

Lettuce는 Redis와의 저수준 통신을 가능하게 합니다. Lettuce를 직접 사용할 때는 RedisClusterClient, StatefulRedisClusterConnection, RedisClusterCommands 등을 명시적으로 설정하고 호출합니다.

import io.lettuce.core.RedisURI;
import io.lettuce.core.cluster.RedisClusterClient;
import io.lettuce.core.cluster.api.StatefulRedisClusterConnection;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

import java.util.Arrays;
import java.util.List;

/**
 * Lettuce 클러스터 설정을 위한 구성 클래스
 */
@Configuration
public class LettuceConfiguration {
    @Value("${spring.redis.cluster.nodes}")
    private String clusterNodes;
    

    /**
     * Redis 클러스터 클라이언트를 빈으로 등록합니다.
     * @param redisNodes Redis 클러스터 노드 URI 목록
     * @return RedisClusterClient 객체
     */
    @Bean
    public RedisClusterClient redisClusterClient(List<RedisURI> redisNodes) {
        // 주어진 Redis 클러스터 노드 URI를 사용하여 Redis 클러스터 클라이언트를 생성합니다.
        return RedisClusterClient.create(clusterNodes);
    }

    /**
     * Redis 클러스터 연결을 빈으로 등록합니다.
     * @param redisClusterClient Redis 클러스터 클라이언트
     * @return StatefulRedisClusterConnection 객체
     */
    @Bean
    public StatefulRedisClusterConnection<String, String> statefulRedisClusterConnection(RedisClusterClient redisClusterClient) {
        // Redis 클러스터 클라이언트를 사용하여 클러스터 연결을 생성합니다.
        return redisClusterClient.connect();
    }
}

lettuce 사용 코드 (StatefulRedisClusterConnection 구현)

import io.lettuce.core.cluster.api.StatefulRedisClusterConnection;
import io.lettuce.core.cluster.api.sync.RedisClusterCommands;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

/**
 * Redis 클러스터와 상호작용하는 서비스 클래스.
 * Lettuce 라이브러리를 사용하여 Redis 클러스터에 연결하고 명령을 실행합니다.
 */
@Service
public class LettuceService {

    // Redis 클러스터와의 상태를 유지하는 연결 객체
    @Autowired
    private StatefulRedisClusterConnection<String, String> connection;

    /**
     * Redis 클러스터에 명령을 실행하는 메서드.
     * 키-값 쌍을 설정하고, 해당 키에 대한 값을 조회합니다.
     */
    public void execute() {
        
        RedisClusterCommands<String, String> commands = connection.sync(); // 동기 방식으로 Redis 클러스터 명령을 실행할 수 있는 인터페이스를 가져옴

        // Redis에 "key"라는 키로 "value"를 저장합니다.
        commands.set("key", "value");

        // "key"에 대한 값을 Redis에서 조회합니다.
        String value = commands.get("key");

        // 조회한 값을 콘솔에 출력합니다.
        System.out.println(value);
    }
}

장점:

비동기/동기 API 지원: Lettuce는 비동기, 동기 및 반응형 API를 모두 지원하여 다양한 요구에 맞게 사용할 수 있습니다.
성능: 높은 성능과 낮은 지연 시간을 제공하며, Netty 기반의 비동기 네트워크 라이브러리를 사용합니다.
클러스터 지원: Redis 클러스터와 고가용성 설정(마스터-슬레이브)을 지원합니다.
Thread-safe: 연결이 스레드에 안전하며, 다중 스레드 환경에서 사용할 수 있습니다.

단점:

사용자 경험: 다른 라이브러리보다 사용이 더 복잡할 수 있으며, 추가적인 설정이 필요합니다. (RedisClusterClient, StatefulRedisClusterConnection, RedisClusterCommands 등을 직접 설정하고 사용)
추상화 레벨: Spring Data Redis에 비해 추상화 레벨이 낮아 사용 시 더 많은 작업이 필요할 수 있습니다.

3. Redisson

redisson 설정 코드

package com.redis.common;

import org.redisson.Redisson;
import org.redisson.api.RedissonClient;
import org.redisson.config.Config;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

import java.util.Arrays;

/**
 *  Redis 설정 클래스
 */
@Configuration
public class RedissonConfig {
    @Value("${spring.redis.cluster.nodes}")
    private String clusterNodes;

    @Bean
    public RedissonClient redissonClient() {
        Config config = new Config();
        config.useClusterServers()
                .addNodeAddress(clusterNodes.split(","));
        return Redisson.create(config);
    }
}

Redisson은 자체적으로 Redis 서버와의 연결을 관리하며, 설정이 간편하고 직관적입니다. spring-data-redis 처럼 RedisConnectionFactory 같은 연결 로직을 작성하지 않아도 됩니다.

redisson 사용 코드 (RedissonClient 구현)

package com.redis.common;

import lombok.RequiredArgsConstructor;
import org.redisson.api.RBucket;
import org.redisson.api.RedissonClient;

/**
 * RedissonClient를 사용하여 Redis와 상호작용하는 기능을 제공합니다.
 */
@RequiredArgsConstructor
public class RedissonClientService {
    private final RedissonClient redissonClient;  // Redisson 클라이언트 객체

    /**
     * 주어진 키에 해당하는 데이터를 Redis에서 조회합니다.
     */
    public ActionData get(String key) {
        RBucket<ActionData> bucket = redissonClient.getBucket(key);  // 키에 해당하는 Redis 버킷을 가져옴
        return bucket.get();  // 버킷에서 데이터 조회
    }

    /**
     * 주어진 키와 값으로 데이터를 Redis에 저장합니다.
     */
    public void set(String key, ActionData value) {
        RBucket<ActionData> bucket = redissonClient.getBucket(key);  // 키에 해당하는 Redis 버킷을 가져옴
        bucket.set(value);  // 버킷에 데이터 저장
    }
}

장점:

풍부한 기능: 분산 객체, 서비스 및 Redis 기반의 데이터 구조를 지원하여 사용자가 쉽게 사용할 수 있습니다. 예를 들어, 분산 락, 분산 컬렉션, 분산 캐시 등을 제공합니다.
RBucket 등 고수준 추상화: RBucket, RMap, RList 등의 고수준 API를 제공하여 개발자가 쉽게 사용할 수 있습니다.
성능 및 안정성: 고성능을 제공하며, 네트워크 및 Redis 서버 장애를 처리하는 다양한 기능을 제공합니다.
편리한 설정: 사용이 간편하며, 설정이 직관적입니다.

단점:

추가 의존성: 다른 Redis 클라이언트에 비해 기능이 많아 의존성 크기가 클 수 있습니다.
일부 기능의 복잡성: 모든 기능을 사용하지 않으면 오버헤드가 될 수 있습니다.

사용 사례별 추천

단순한 고성능 Redis 클라이언트 필요 시: Lettuce
Spring 애플리케이션과의 통합 및 리포지토리 패턴 활용 시: Spring Data Redis
분산 데이터 구조 및 고수준 추상화가 필요한 경우: Redisson

각 라이브러리는 고유한 장점과 단점을 가지고 있으며, 프로젝트의 요구 사항에 따라 적절한 것을 선택하면 됩니다.

Redis와의 통합이 주요 요구 사항이라면 Spring Data Redis가 좋을 수 있으며, 비동기 처리가 중요하다면 Lettuce가 적합할 수 있습니다. 풍부한 기능과 고수준 추상화가 필요하다면 Redisson이 좋은 선택이라고 합니다.

[WAS 이중화] 서로 다른 Jar 를 Fail over 하는 방법 (Java 코드 구현/ JSch 라이브러리 사용)

Nellie Kim — Tue, 16 Jul 2024 17:14:41 +0900

카프카 스트림즈 애플리케이션을 이중화 하기 위해, 원래 자바 프로그램에서 빼고 따로 프로젝트를 만들어서 포트만 다르게 하여 jar 로 만들었다. 운영 시, 부하 문제로 카프카 스트림즈 애플리케이션이 죽을 수도 있을 것 같아서 따로 생성을 했다.

사전 작업으로는 8088, 8089 포트를 지정하여 jar로 만든 후, 원격 서버에 scp 명령어로 전송한 상태이다.

JSch 라이브러리를 사용하여 Java에서 SSH 연결을 설정하여 jar1을 10초에 한번씩 헬스체크하고, jar1이 죽으면 jar2를 원격 서버에서 실행하는 방법으로 코드를 구현했다.

1. 자바 코드 구현

1. JSch 라이브러리 추가

먼저, Maven을 사용한다면 pom.xml 파일에 JSch 라이브러리를 추가

<dependency>
    <groupId>com.jcraft</groupId>
    <artifactId>jsch</artifactId>
    <version>0.1.55</version> 
</dependency>

2. Java 코드 작성

import com.jcraft.jsch.ChannelExec;
import com.jcraft.jsch.JSch;
import com.jcraft.jsch.JSchException;
import com.jcraft.jsch.Session;
import lombok.extern.slf4j.Slf4j;
import org.springframework.scheduling.annotation.Scheduled;
import org.springframework.stereotype.Component;

import java.io.ByteArrayOutputStream;
import java.io.IOException;

/**
 * 원격 스트림즈 애플리케이션의 헬스 체크 및 JAR 파일 실행을 담당하는 클래스
 */
@Component
@Slf4j
public class RemoteJarHealthChkAndExecutor {

    // 원격 서버 접속 정보
    private static final String HOST = "192.168.2.99";
    private static final String USERNAME = "root";
    private static final String PASSWORD = "dfg0sfd!";
    private static final int PORT = 22;

    // JAR 파일 경로
    private static final String JAR_FILE_PATH_1 = "/app/AutoDriving-1.0.0-STREAMS-8088.jar";
    private static final String JAR_FILE_PATH_2 = "/app/AutoDriving-1.0.0-STREAMS-8089.jar";

    // JAR 파일 실행 명령어
    private static final String JAVA_COMMAND_1 = "java -jar " + JAR_FILE_PATH_1;
    private static final String JAVA_COMMAND_2 = "java -jar " + JAR_FILE_PATH_2;

    // 현재 구동 중인 포트
    private static int currentPort = 8088;

    /**
     * 1. 10초마다 헬스 체크를 수행하는 메서드
     */
    @Scheduled(fixedRate = 10000)
    public void startHealthCheck() {
        try {
            boolean isJarHealthy = checkHealth(HOST, currentPort);

            if (!isJarHealthy) {
                handleUnhealthyPort();
            } else {
                log.info("  {} 포트의 JAR 서버가 정상 상태입니다.", currentPort);
            }
        } catch (Exception e) {
            log.error("헬스 체크 중 오류가 발생했습니다.", e);
        }
    }

    /**
     * 1-1) 원격 서버에서 지정된 포트의 상태를 체크하는 메서드
     */
    private boolean checkHealth(String host, int port) throws JSchException {
        log.info("✨ 현재 포트 : {}", currentPort);

        JSch jsch = new JSch();
        // SSH 세션 설정
        Session session = jsch.getSession(USERNAME, host, PORT);
        session.setPassword(PASSWORD);
        session.setConfig("StrictHostKeyChecking", "no");
        session.connect();

        // exec 채널을 열고 nc 명령어로 포트 체크
        ChannelExec channelExec = (ChannelExec) session.openChannel("exec");
        channelExec.setCommand("nc -zv " + host + " " + port);

        // 명령어 출력 및 에러 스트림 설정
        ByteArrayOutputStream outputStream = new ByteArrayOutputStream();
        ByteArrayOutputStream errorStream = new ByteArrayOutputStream();
        channelExec.setOutputStream(outputStream);
        channelExec.setErrStream(errorStream);

        channelExec.connect();

        // 명령어가 완료될 때까지 대기
        while (!channelExec.isClosed()) {
            try {
                Thread.sleep(100);
            } catch (InterruptedException e) {
                e.printStackTrace();
            }
        }

        // nc 명령어의 종료 상태로 포트 상태 확인
        int exitStatus = channelExec.getExitStatus();
        System.out.println(port + " 연결 상태 (0이 정상): " + exitStatus);
        System.out.println("Error: " + new String(errorStream.toByteArray()));

        // 채널과 세션 종료
        channelExec.disconnect();
        session.disconnect();

        return exitStatus == 0;
    }

    /**
     * 1-2) 8088 포트 JAR 가 이상 상태일 때 실행하는 메서드
     */
    private void handleUnhealthyPort() throws JSchException, IOException {
        if (currentPort == 8089) {
            log.warn("  8088, 8089 모두 이상 상태입니다. 조치를 취해주세요.");
        } else {
            int newPort = 8089;
            log.warn("  {} 포트의 JAR 서버에 이상이 발생했습니다. {} 포트의 JAR를 실행합니다.", currentPort, newPort);

            // 원격 서버에서 8089 포트의 JAR 파일 실행
            executeRemoteJar(JAVA_COMMAND_2);

            // 포트 업데이트
            currentPort = newPort;
        }
    }

    /**
     * 1-2-1) 원격 서버에서 JAR 파일을 실행하는 메서드
     */
    private void executeRemoteJar(String javaCommand) throws JSchException {
        JSch jsch = new JSch();
        // SSH 세션 설정
        Session session = jsch.getSession(USERNAME, HOST, PORT);
        session.setPassword(PASSWORD);
        session.setConfig("StrictHostKeyChecking", "no");
        session.connect();

        // exec 채널을 열고 JAR 파일 실행 명령어 설정
        ChannelExec channelExec = (ChannelExec) session.openChannel("exec");
        channelExec.setCommand(javaCommand);
        channelExec.connect();

        // 채널과 세션 종료
        channelExec.disconnect();
        session.disconnect();
    }
}

주의! 서버 사용자 계정에 jar를 실행시킬 수 있는 권한을 준다. (IllegalStateException 방지)

sudo chmod -R 777 /app

~~실제 운영 중에는 777로 주면 안된다..~~

2. 이제 서버에서 jar1 을 실행 시키기

java -jar /app/AutoDriving-1.0.0-STREAMS-8088.jar

3. failover 테스트

8088 포트에서 실행 중인 jar1 프로세스를 종료한다.

ps aux | grep AutoDriving-1.0.0-STREAMS-8088.jar

위 명령어를 통해 해당 프로세스의 PID 확인 후, 아래 명령어로 종료

$ kill -9 53157

jar2로 failover 되는 것을 확인

[Springboot] 카멜케이스로 코드를 작성했는데 스네이크케이스로 요청이 온다면? (@JsonProperty, @JsonNaming)

Nellie Kim — Fri, 12 Jul 2024 17:50:48 +0900

카멜케이스로 코드를 작성했는데 스네이크케이스로 요청이 온다면 어떻게 할까?

Jackson 라이브러리에서 제공하는 ObjectMapper 객체는 어노테이션으로 @JsonProperty와 @JsonNaming 을 제공해준다.

Snake Case 데이터를 받아, Camel Case 변수에 데이터를 바인딩 해준다.

스네이크케이스 말고도, 케밥케이스 등 많은 데이터와 매핑하는 기능을 제공한다.

예제로 실습을 해보자.

컨트롤러

  @PostMapping("/test/test")
  public TestDto testTest(@RequestBody TestDto testDto) {
      return testDto;
  }

포스트맨 요청

스네이크 케이스로 데이터를 post한다.

post) http://localhost:8080/api/member/test/test

{
    "test_data": "test~",
    "test_data2":"test2~~"
}

@JsonNaming을 붙이기 전과 후다. 붙이기 전에는 매핑이 되지 않고 null로 반환된다.

이렇게 필드 하나하나 수동으로 지정해도 된다.

TestDto

매핑하려는 Dto는 카멜케이스로 작성되어 있다.

@Data
public class TestDto {
    private String testData;
    private String testData2;
}

포스트맨 호출을 하니 당연히 매핑이 안되고 null 이 나온다.

@JsonNaming

이제 objectMapper가 제공하는 @JsonNaming 어노테이션을 사용해보자.

@JsonNaming(PropertyNamingStrategies.SnakeCaseStrategy.class)

이 한 줄만 Dto 위에 붙여주면 스네이크 케이스로 요청이 와도 알아서 다 매핑이 된다!

import com.fasterxml.jackson.databind.PropertyNamingStrategies;
import com.fasterxml.jackson.databind.annotation.JsonNaming;
import lombok.Data;

@Data
@JsonNaming(PropertyNamingStrategies.SnakeCaseStrategy.class) //   이거 한줄만 붙여주면 된다!!
public class TestDto {
    private String testData;
    private String testData2;
}

@JsonNaming 으로 성공적으로 매핑이 되었다.

@JsonProperty

@JsonProperty를 사용하여 key를 매핑시켜줄 수 있다. 이렇게 하면 코드가 길어질 우려가 있어서 @JsonNaming 쓰는 것을 추천한다!

@Data
//@JsonNaming(PropertyNamingStrategies.SnakeCaseStrategy.class)
public class TestDto {
    @JsonProperty("test_data") //   추가
    private String testData;
    @JsonProperty("test_data2") //   추가
    private String testData2;
}

[MQTT,Kafka] EMQX 웹 소켓 사용하여 대시보드에 실시간 데이터 보여주기 (Throughput 테스트)

Nellie Kim — Thu, 11 Jul 2024 13:15:46 +0900

차량의 실시간 위치 데이터 (위도, 경도) 를 MQTT를 사용한 웹소켓으로 대시보드에 실시간으로 변하는 데이터를 보여주었다. 카프카 컨슈머에서 받은 데이터를 바로 MQTT로 메시지 전송하였다.

MQTT 프로토콜을 지원하는 메시지 브로커인 EMQX 오픈 소스 브로커를 사용하였다.

실시간으로 데이터를 보여주는 것이 목적이었고, 그 다음으로는 초당 몇건을 보여줄 수 있는지를 테스트 했다.

스프링 부트 버전 : 2.5.4
자바 버전 : 1.8
카프카 버전 : 3.7.0
MQTT 버전 : 1.2.5

pom.xml

의존성을 아래와 같이 받아준다.

<!-- Eclipse Paho MQTT Client -->
<dependency>
    <groupId>org.eclipse.paho</groupId>
    <artifactId>org.eclipse.paho.client.mqttv3</artifactId>
    <version>1.2.5</version>
</dependency>

<dependency>
    <groupId>org.springframework.integration</groupId>
    <artifactId>spring-integration-mqtt</artifactId>
</dependency>

application.yml

MQTT 웹소켓을 아래와 같이 설정한다.

mqtt:
  broker:
    url: ws://192.168.1.11:8083/mqtt
  client:
    id: mqttx_425fsgf31

MqttConfig.java

형식적인 MQTT 설정 파일이다.

import org.eclipse.paho.client.mqttv3.MqttConnectOptions;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.integration.annotation.ServiceActivator;
import org.springframework.integration.channel.DirectChannel;
import org.springframework.integration.mqtt.core.DefaultMqttPahoClientFactory;
import org.springframework.integration.mqtt.core.MqttPahoClientFactory;
import org.springframework.integration.mqtt.inbound.MqttPahoMessageDrivenChannelAdapter;
import org.springframework.integration.mqtt.outbound.MqttPahoMessageHandler;
import org.springframework.integration.mqtt.support.DefaultPahoMessageConverter;
import org.springframework.messaging.MessageChannel;
import org.springframework.messaging.MessageHandler;
import org.springframework.stereotype.Component;

@Configuration
public class MqttConfigTest {

    @Value("${mqtt.broker.url}")
    private String broker;

    @Value("${mqtt.client.id}")
    private String clientId;

    // MQTT 연결 옵션을 설정하는 Bean입니다.
    @Bean
    public MqttConnectOptions mqttConnectOptions() {
        MqttConnectOptions options = new MqttConnectOptions();
        options.setServerURIs(new String[]{broker}); // 브로커 URI 설정
        options.setCleanSession(true); // 클린 세션 설정
        return options;
    }

    // MQTT 클라이언트 팩토리를 설정하는 Bean입니다.
    @Bean
    public MqttPahoClientFactory mqttClientFactory() {
        DefaultMqttPahoClientFactory factory = new DefaultMqttPahoClientFactory();
        factory.setConnectionOptions(mqttConnectOptions()); // 연결 옵션 설정
        return factory;
    }

    // MQTT 메시지 핸들러를 설정하는 Bean입니다. 
    @Bean
    public MqttPahoMessageHandler mqttPahoMessageHandler() {
        MqttPahoMessageHandler messageHandler = new MqttPahoMessageHandler(clientId, mqttClientFactory());
        messageHandler.setAsync(true); // 비동기 메시지 전송 설정
//        messageHandler.setDefaultTopic("/topic"); // 기본 토픽 설정
        return messageHandler;
    }

    // MQTT 메시지 수신 어댑터를 설정하는 Bean입니다.
    @Bean
    public MqttPahoMessageDrivenChannelAdapter mqttPahoMessageDrivenChannelAdapter() {
        MqttPahoMessageDrivenChannelAdapter adapter = new MqttPahoMessageDrivenChannelAdapter(clientId, mqttClientFactory(), "/topic");
        adapter.setCompletionTimeout(5000); // 메시지 수신 타임아웃 설정
        adapter.setConverter(new DefaultPahoMessageConverter()); // 메시지 변환기 설정
        adapter.setQos(1); // QoS 설정
        adapter.setOutputChannel(mqttInputChannel()); // 출력 채널 설정
        return adapter;
    }

    // MQTT 메시지를 처리하기 위한 입력 채널을 설정하는 Bean입니다.
    @Bean
    public MessageChannel mqttInputChannel() {
        return new DirectChannel();
    }

    // 수신된 MQTT 메시지를 처리하는 핸들러를 설정하는 Bean입니다.
    @Bean
    @ServiceActivator(inputChannel = "mqttInputChannel")
    public MessageHandler handler() {
        return message -> {
            String topic = message.getHeaders().get("mqtt_receivedTopic").toString(); // 수신된 토픽 가져오기
            String payload = message.getPayload().toString(); // 수신된 메시지 페이로드 가져오기
            System.out.println("Received message: " + payload + " from topic: " + topic); // 메시지 및 토픽 출력
        };
    }
}

MqttClientService.java

핵심 코드이다. MQTT에 메시지를 전송하는 메서드이다.

import lombok.RequiredArgsConstructor;
import org.springframework.integration.mqtt.outbound.MqttPahoMessageHandler;
import org.springframework.integration.mqtt.support.MqttHeaders;
import org.springframework.integration.support.MessageBuilder;
import org.springframework.stereotype.Service;

@Service
@RequiredArgsConstructor
public class MqttClientServiceTest {
    private final MqttPahoMessageHandler mqttPahoMessageHandler;

    // 주어진 topic과 payload를 사용하여 MQTT 메시지를 전송
    public void sendMessage(String topic, String payload) {
        mqttPahoMessageHandler.handleMessage(
                MessageBuilder.withPayload(payload)
                        .setHeader(MqttHeaders.TOPIC, topic) // MQTT 메시지의 토픽 설정
                        .build()
        );
    }
}

KafkaConsumerTest.java

카프카에 해당 토픽을 바라보는 컨슈머안에 MQTT를 적용했다.

mqttClientServiceTest.sendMessage 메서드를 사용하여 메시지를 MQTT에 전송하여 웹소켓으로 화면에 보여준다.

import com.fasterxml.jackson.core.type.TypeReference;
import com.fasterxml.jackson.databind.JsonNode;
import com.fasterxml.jackson.databind.ObjectMapper;
import kr.co.iabacus.autodriving.common.mqtt.svc.MqttClientServiceTest;
import kr.co.iabacus.autodriving.common.redis.RedisUtils;
import lombok.RequiredArgsConstructor;
import lombok.extern.slf4j.Slf4j;
import org.springframework.context.annotation.DependsOn;
import org.springframework.kafka.annotation.KafkaListener;
import org.springframework.stereotype.Service;

import java.util.Map;

@Service
@RequiredArgsConstructor
@Slf4j
public class KafkaConsumerTest {
    private final RedisUtils redisUtils;
    private final ObjectMapper objectMapper = new ObjectMapper();
    private final MqttClientServiceTest mqttClientServiceTest;

    @KafkaListener(topics="car-data", groupId="car-data-consumer")
    public void carDataConsume(String param) {
        try {
            // JSON 문자열을 JsonNode 객체로 변환
            JsonNode jsonNode = objectMapper.readTree(param);

            String obuId = jsonNode.path("obu_ID").asText();

            // Redis에 데이터 저장
            redisUtils.setData("car-data=" + obuId, param);

            Map<String, Object> dataMap = objectMapper.readValue(param, new TypeReference<Map<String, Object>>(){});

            Map<String, Object> gpsData = (Map<String, Object>) dataMap.get("gps_data"); // gps_data 부분 추출

            log.info("  0.1초마다 들어오는 gps 데이터   {}", gpsData);
            
            // MQTT 로 메시지 전송  
            mqttClientServiceTest.sendMessage("hj_topic", gpsData.toString());

        } catch (Exception e) {
            e.printStackTrace();
            System.out.println("JSON 파싱 중 오류 발생: " + e.getMessage());
        }
    }

스프링부트 로그

EMQX 대시보드

컨슈머에서 웹소켓에 넣어주어 실시간으로 Payload가 들어오는 것을 확인할 수 있다.

서버 로그로 초당 건수 테스트

EMQX 로깅 설정에서 로그 레벨을 debug 로 하고,

도커 로그 명령어로 메시지를 찍어보았다.

 docker logs -f emqx1 | grep Payload

도커 로그에 찍힌 초당 메시지 수를 확인해보았다.

100개 메시지 받는데 소요시간 : 0.91 초
1개 메시지 받는데 소요시간 : 0.009 초

초당 Throuput : 108.85개 /초

[Springboot] RestTemplate을 사용한 MSA 프로젝트 만들기 (서버간 통신, JPA, H2 DB, Scheduler, FileIO)

Nellie Kim — Sat, 6 Jul 2024 17:51:34 +0900

오늘은 RestTemplate을 사용하여 요즘 매우 핫하고 확장성이 뛰어난 MSA(Microservice Architecture) 프로젝트를 만들어 보았습니다.

WAS 2개를 사용하여 서버간 통신으로 데이터를 API로 전송하는 서비스를 구현하며 정리했습니다.

(실제로 요구사항이 들어왔을 때를 가정하고 프로젝트를 만들어 보았습니다. )

1. 데이터를 전송하는 localhost:8081 서버와 API 만들기

2. 데이터를 받는 localhost:8080 서버와 API 만들기

3. 테스트

RestTemplate 과 동기식 요청이란

‍♀️ RestTemplate 이란?

HTTP 통신을 위한 도구로 RESTful API 웹 서비스와의 상호작용을 쉽게 외부 도메인에서 데이터를 가져오거나 전송할 때 사용되는 스프링 프레임워크의 클래스를 의미합니다.
- 다양한 HTTP 메서드(GET, POST, PUT, DELETE 등)를 사용하며 원격 서버와 ‘동기식 방식’으로 JSON, XML 등의 다양한 데이터 형식으로 통신합니다.
- 동기식 방식으로 요청을 보내고 응답을 받을 때까지 블로킹되며, 요청과 응답이 완료되기 전까지 다음 코드로 진행되지 않습니다. 원격 서버와 통신할 때는 응답을 기다리는 동안 대기해야 합니다.

‍♀️ 동기식 요청(Synchronous request) & 블로킹 요청(Blocking Request) 이란?

- RestTemplate은 기본적으로 ‘동기식 요청’ 처리를 수행하며 요청을 보내고 응답을 받을 때까지 블로킹됩니다.

- 클라이언트에서 요청을 보내면 결과가 반환될 때까지 대기를 하는 것을 의미합니다. unblocked 상태가 되면 다음 요청에 대해 처리를 수행합니다.

- 비동기식 요청 & 논 블로킹 요청도 있는데, 이 기능은 webflux에서 제공하는 Non-Blocking Request을 수행하면서 요청을 보내고 결과가 반환되지 않더라도 다른 작업을 수행할 수 있습니다.

‍♀️ 3가지 요구사항

1. 서버 1(localhost:8081)는 로컬 저장소에 있는 csv 파일을 FileIO InputStream을 사용하여 Dto로 변환할 것

2. 스케줄러로 읽은 데이터를 아래의 2개 로직을 구현하여 변환한 Dto를 10분마다 서버2 로 보낼 것

1) 금액의 총 합계 구하기

2) 코드를 기준으로 정렬 (Comparator 사용)하여 리스트에 담기

3. 서버2 는 JPA를 사용하여 H2 DB 에 insert 할 것

사용한 버전 및 기술

spring boot : 3.3.1
java : 17
Maven
Spring RestTemplate
JPA
H2 DB
Scheduler
FileIO (java.nio)

1. 데이터를 전송하는 localhost:8081 서버 만들기

1) BankController

스케줄러를 사용하여 10분마다 전송하는 컨트롤러 입니다.

package com.example.demo.bankTransaction_240706;

import lombok.RequiredArgsConstructor;
import lombok.extern.slf4j.Slf4j;
import org.springframework.scheduling.annotation.Scheduled;
import org.springframework.web.bind.annotation.RestController;

import java.io.IOException;

/**
 * localhost:8081 서버 (데이터를 보내는 서버)
 */
@RequiredArgsConstructor
@RestController
@Slf4j
public class BankController {
    private final BankService bankService;

    // 10분마다 history.csv 파일 읽어 RestTemplate 으로 localhost:8080으로 쏘기
    @Scheduled(fixedRate = 600000) // 10분마다 실행 (600,000ms)
    public void sendFileData() throws IOException {
        bankService.uploadDepositTotalToDB();
    }

    // 10분마다 history.csv 파일 읽어 RestTemplate 으로 localhost:8080으로 쏘기
    @Scheduled(fixedRate = 600000) // 10분마다 실행 (600,000ms)
    public void uploadSortedListToDB() throws IOException {
        bankService.uploadSortedListToDB();
    }
}

2) BankService

RestTemplate을 사용하는 핵심 로직입니다.

restTemplate.postForObject 를 사용하여 특정 URL로 DTO를 보내는 과정입니다.

원하는 URL은 static final로 명시적으로 상수 선언을 해주었습니다.

여기서 간단한 아래 2가지 로직을 구현했습니다.

1) 금액의 총 합계 2) 코드 기준 정렬 (Comparator 사용) 한 리스트

package com.example.demo.bankTransaction_240706;

import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Service;
import org.springframework.web.client.RestTemplate;

import java.io.IOException;
import java.util.Collections;
import java.util.Comparator;
import java.util.List;

/**
 *  RestTemplate 을 사용하여 특정 URL로 원하는 데이터를 전송하는 로직
 */
@Service
@RequiredArgsConstructor
public class BankService {
    private final RestTemplate restTemplate = new RestTemplate();
    private static final String TOTAL_DEPOSIT_URL = "http://localhost:8080/bank/deposit/total/upload";
    private static final String SORTED_USE_CODE_URL = "http://localhost:8080/bank/useCode/sort/upload";

    // 1. 전체 입출금액의 total을 전송
    public void uploadDepositTotalToDB() throws IOException {
        List<BankTransaction> transactions = FileService.convertToBT();

        long totalDeposit = 0;
        for (BankTransaction transaction : transactions) {
            totalDeposit += transaction.getDeposit();
        }
        // 특정 URL로 BankTransactionDto 전송  
        restTemplate.postForObject(TOTAL_DEPOSIT_URL, new BankTransactionDto(totalDeposit), BankTransactionDto.class);
        System.out.println(new BankTransactionDto(totalDeposit));
    }

    // 2. 사용구분코드(A1, A2, A3) 순으로 정렬된 리스트 전송
    public void uploadSortedListToDB() throws IOException {
        List<BankTransaction> transactions = FileService.convertToBT();

        Collections.sort(transactions, new Comparator<BankTransaction>() {
            @Override
            public int compare(BankTransaction o1, BankTransaction o2) {
                return o1.getUseCode().compareTo(o2.getUseCode());
            }
        });
        // 특정 URL로 BankTransactionDto 전송  
        restTemplate.postForObject(SORTED_USE_CODE_URL, new BankTransactionDto(transactions), BankTransactionDto.class);
        System.out.println(new BankTransactionDto(transactions));
    }
}

3) history.csv 파일

아래 파일은 로컬 저장소에 저장되는 파일입니다. 저는 스프링 프로젝트 resources 폴더에 저장하였습니다. 스프링 프로젝트가 아닌 아무 저장소 (바탕화면 등)에 해도 무관합니다.

30-01-2017,-100,Deliveroo,A1
30-01-2017,-50,Tesco,A2
01-02-2017,6000,Salary,A3
02-02-2017,2000,Royalties,A2
02-02-2017,-4000,Rent,A1
03-02-2017,3000,Tesco,A3
05-02-2017,-30,Cinema,A2

4) FileService

위 csv 파일을 읽어와서 List<BankTransaction>으로 변환하는 클래스입니다.

new File(경로)를 사용하여 파일을 읽어오고, file.getPath() 를 사용하여 편리하게 파일을 한 줄 한 줄 읽어올 수 있습니다.

package com.example.demo.bankTransaction_240706;

import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Service;

import java.io.File;
import java.io.IOException;
import java.nio.file.Files;
import java.nio.file.Path;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
/**
 * 로컬 경로에 있는 history.csv 파일을 List<BankTransaction>로 만들어서 반환
 */
@Service
@RequiredArgsConstructor
public class FileService {
    private static final SimpleDateFormat dateFormat = new SimpleDateFormat("dd-MM-yyyy");

    public static List<BankTransaction> convertToBT() throws IOException {
        File file = new File("C:\\java\\hs_study\\bank_transaction_restTemplate\\src\\main\\resources\\history.csv");
        Path filePath = Path.of(file.getPath()); // 1. Path객체로 filePath 읽고
        List<String> lines = Files.readAllLines(filePath); // 2. Files를 직접 readAllLines
        List<BankTransaction> bankTransactions = new ArrayList<>();
        for (String line : lines) {
            String[] values = line.split(",");

            if (values.length == 4) {
                try {
                    Date date = dateFormat.parse(values[0]);
                    long deposit = Long.parseLong(values[1]);
                    String description = values[2];
                    String useCode = values[3];



                    BankTransaction bankTransaction = new BankTransaction(date, deposit, description, useCode);
                    bankTransactions.add(bankTransaction);

                } catch (ParseException e) {
                    e.printStackTrace();
                }
            }
        }
        return bankTransactions;
    }
}

5) BankTransactionDto

RestTemplate으로 보낼 최종 Dto 입니다.

저는 데이터의 총합인 depositTotal, 코드로 정렬된 리스트인 sortedBankTransaction 리스트를 필드로 잡았습니다.

package com.example.demo.bankTransaction_240706;

import lombok.*;

import java.util.List;

@Data
@NoArgsConstructor
public class BankTransactionDto {
    private long depositTotal;
    private List<BankTransaction> sortedBankTransaction;

    public BankTransactionDto(long depositTotal) {
        this.depositTotal = depositTotal;
    }

    public BankTransactionDto(List<BankTransaction> sortedBankTransaction) {
        this.sortedBankTransaction = sortedBankTransaction;
    }
}

6) BankTransaction

파일에서 읽어온 상세 데이터 Dto 입니다.

package com.example.demo.bankTransaction_240706;

import lombok.Data;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Service;

import java.util.Date;

@Data
@Service
@RequiredArgsConstructor
public class BankTransaction {

    private Date date;
    private long deposit; //입출금액
    private String description; // 사용내역
    private String useCode; // 사용구분코드
  
    public BankTransaction(Date date, long deposit, String description, String useCode) {
        this.date = date;
        this.deposit = deposit;
        this.description = description;
        this.useCode = useCode;
    }
}

이제 10분마다 데이터가 전송되는 서버 1개를 완성했습니다.

2. 데이터를 받는 localhost:8080 서버 만들기

이제 데이터를 받는 서버를 만들어보겠습니다.

먼저 pom.xml 파일 에 H2 DB 및 JPA 설정을 해줍니다.

<!-- H2 Database -->
<dependency>
    <groupId>com.h2database</groupId>
    <artifactId>h2</artifactId>
    <scope>runtime</scope>
</dependency>

<!-- Spring Boot JDBC Starter -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-jdbc</artifactId>
</dependency>

<!-- JPA dependency -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>

application.properties 파일에도 의존성을 추가해줍니다.

spring.application.name=java-test

# H2 Database settings
spring.datasource.url=jdbc:h2:mem:testdb
spring.datasource.driverClassName=org.h2.Driver
spring.datasource.username=sa
spring.datasource.password=
spring.datasource.platform=h2

# H2 Console settings
spring.h2.console.enabled=true
spring.h2.console.path=/h2-console

# JPA configuration
spring.jpa.hibernate.ddl-auto=update
spring.jpa.show-sql=true
spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.H2Dialect

1) BankController

8081에서 보내는 json 데이터를 받는 컨트롤러 입니다.

@ResponseBody 어노테이션으로 역직렬화시켜 Dto를 받아줍니다.

package com.hj.hs_study.bankTransaction_240706;

import lombok.RequiredArgsConstructor;
import lombok.extern.slf4j.Slf4j;
import org.springframework.web.bind.annotation.*;

import java.io.IOException;
import java.util.List;

/**
 * localhost:8080 서버 (데이터를 받는 서버)
 */

@RequiredArgsConstructor
@RestController
@RequestMapping("/bank")
@Slf4j
public class BankController {
    private final BankService bankService;

    // 1. localhost:8081에서 10분마다 전송되는 [전체 입출금액의 total]를 H2 DB에 저장
    @PostMapping("/deposit/total/upload")
    public void saveDepositTotalUpload(@RequestBody BankTransactionDto bankTransactionDto) throws IOException {
        log.info(String.valueOf(bankTransactionDto));
        bankService.saveDepositTotalUpload(bankTransactionDto);
    }

    // 2. localhost:8081에서 10분마다 전송되는 [useCode 정렬된 리스트]를 H2 DB에 저장
    @PostMapping("/useCode/sort/upload")
    public void saveSortedListUpload(@RequestBody BankTransactionDto bankTransactionDto) throws IOException {
        log.info(String.valueOf(bankTransactionDto));
        bankService.saveSortedListUpload(bankTransactionDto);
    }
}

2) BankService

컨트롤러로부터 받은 Dto 데이터를 H2 DB에 insert 하는 로직입니다.

package com.hj.hs_study.bankTransaction_240706;

import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Service;

import java.io.IOException;
import java.util.Collections;
import java.util.Comparator;
import java.util.List;

@Service
@RequiredArgsConstructor
public class BankService {
    private final BankRepository bankRepository;

    // 1. localhost:8081에서 10분마다 전송되는 [전체 입출금액의 total]를 H2 DB에 저장
    public void saveDepositTotalUpload(BankTransactionDto bankTransactionDto) {
        bankRepository.save(bankTransactionDto);
    }

    // 2. localhost:8081에서 10분마다 전송되는 [useCode 정렬된 리스트]를 H2 DB에 저장
    public void saveSortedListUpload(BankTransactionDto bankTransactionDto) {
        bankRepository.save(bankTransactionDto);
    }
}

3) BankRepository

JPA를 extends 하여 선언합니다. 따로 xml 쿼리를 작성하지 않아도 됩니다.

JpaRepository안의 제네릭으로는 @Entity를 붙인 Dto를 넣어주어야 합니다.

package com.hj.hs_study.bankTransaction_240706;

import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;

@Repository
public interface BankRepository extends JpaRepository<BankTransactionDto, Long> {

}

4) BankTransaction

8081 서버와 거의 동일하지만, JPA를 사용하기 때문에 @Entity 어노테이션을 붙여 해당 클래스가 엔티티라는 것을 지정합니다.

식별자에는 @Id, 리스트를 만들 Dto가 있다면 @ManyToOne 을 지정을 해주어 JPA 가 인식할 수 있도록 해줍니다.

해주지 않으면 JPA 에러가 납니다.

package com.hj.hs_study.bankTransaction_240706;

import jakarta.persistence.*;
import lombok.Data;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Service;

import java.util.Date;

@Data
@Service
@RequiredArgsConstructor
@Entity
public class BankTransaction {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private int id;
    //LocalDate date;
    private Date date;
    private long deposit; //입출금액
    private String description; // 사용내역
    private String useCode; // 사용구분코드

    @ManyToOne
    @JoinColumn(name = "bank_transaction_dto_id")
    private BankTransactionDto bankTransactionDto;

    public BankTransaction(Date date, long deposit, String description, String useCode) {
        this.date = date;
        this.deposit = deposit;
        this.description = description;
        this.useCode = useCode;
    }
}

5) BankTransactionDto

최종 Dto입니다. 마찬가지로 @Entity, @Id, @OneToMany 를 선언하여 작성합니다.

package com.hj.hs_study.bankTransaction_240706;

import jakarta.persistence.*;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.RequiredArgsConstructor;

import java.util.List;

@Data
@NoArgsConstructor
@Entity
public class BankTransactionDto {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private int id;
    private long depositTotal;
    @OneToMany(mappedBy = "bankTransactionDto", cascade = CascadeType.ALL, fetch = FetchType.LAZY)
    private List<BankTransaction> sortedBankTransaction;

    public BankTransactionDto(long depositTotal) {
        this.depositTotal = depositTotal;
    }

    public BankTransactionDto(List<BankTransaction> sortedBankTransaction) {
        this.sortedBankTransaction = sortedBankTransaction;
    }}

3. 테스트

이제 모든 작업이 끝났습니다.

이제 10분마다 스케줄러가 파일의 데이터를 잘 읽어서 ,

아래의 로컬 저장소에 있는 csv 파일이 정말 총 합계 금액이 계산되어 DB에 저장되는지, 정렬된 리스트가 순서대로 DB에 들어가는지 확인해보겠습니다.

실제 csv 파일

총 합계 금액인 6820 이 DB 에 잘 저장이 된 것을 볼 수 있습니다.

(처음에 0인 이유는 2가지 로직을 하나씩 전송해서 1가지 로직을 전송할 때에 다른 로직은 없기 때문입니다.)

정렬된 데이터도 순서대로 잘 insert가 된 것을 볼 수 있습니다.

여기까지 WAS 2개를 만들어 간단한 MSA 프로젝트를 만들어보았습니다.

오늘은 RestTemplate를 사용하여 동기식 요청으로 구현했지만,

다음에는 조금 더 진화한 방식인 Webflux의 비동기식 요청으로 구현한 MSA 프로젝트를 구현해 볼 예정입니다.

[Kafka] broker scale out/ scale in (카프카 브로커 스케일 아웃/스케일 인)

Nellie Kim — Mon, 1 Jul 2024 11:29:13 +0900

카프카 브로커를 스케일 아웃 하는 것은 처리량을 늘리기 위한 방법은 아니다. (처리량을 늘리려면 가장 먼저 파티션을 늘려야 한다)

카프카는 리더 브로커만 실질적으로 프로듀서와 통신하고 나머지 팔로워 브로커는 복제만 담당하기 때문이다.

하지만 혹시 모를 이슈 상황을 대비해 카프카 브로커를 스케일 아웃 해보았다.

현재 카프카 브로커는 3개이며 5개로 스케일 아웃을 하고, 다시 3개로 스케일 인을 해보았다.

카프카 버전 : 3.7.0
총 소요시간 : 8시간 (인증세팅이 없으면 1시간도 안걸리는 작업이지만, 카프카 브로커 sasl 인증을 추가해 줄 때 Credential을 자꾸 추가해 주는 실수를 해서... 오래 걸렸다. 한번 주키퍼에 저장된 Credentail은 다시 지정해줄 필요가 없다. 인증 프로세스 숙지가 미흡했기에 다시 공부를 하며 작업을 진행했다.)

Scale out 테스트

먼저, docker ps 와 docker images 로 현재 컨테이너 및 이미지를 조회. 현재 kafka1, kafka2, kafka3 이 띄워져 있다.

1. kafka4 컨테이너 추가

docker-compose.yml에 추가하고 docker compose up 을 하면 모든 컨테이너가 새로 생성이 되기 때문에, 명령어로 컨테이너를 추가했다.

docker run --name kafka4 \\
  --network kafka_default \\
  -p 9095:9095 \\
  --restart unless-stopped \\
  -v /docker/kafka/kafka_server_jaas.conf:/opt/bitnami/kafka/config/kafka_server_jaas.conf \\
  -v /docker/kafka/sasl_client.properties:/opt/bitnami/kafka/config/sasl_client.properties \\
  -e KAFKA_BROKER_ID=4 \\
  -e KAFKA_CFG_LISTENERS=PLAINTEXT://:9095 \\
  -e KAFKA_CFG_ADVERTISED_LISTENERS=PLAINTEXT://192.168.2.44:9095 \\
  -e KAFKA_CFG_ZOOKEEPER_CONNECT=192.168.2.44:2181,192.168.2.44:2182,192.168.2.44:2183 \\
  -e KAFKA_ENABLE_KRAFT=no \\
  -e KAFKA_CFG_OFFSETS_TOPIC_REPLICATION_FACTOR=3 \\
  --user root \\
  bitnami/kafka

scale out 을 하기 위해 컨테이너를 1개 생성했다.

docker ps 로 kafka4가 생긴 것을 확인

2. server.properties 에 보안 정보 추가 (인증 세팅을 한 경우에만 진행)

docker exec -it kafka4 bash

apt-get update && apt-get install vim net-tools -y
vi /opt/bitnami/kafka/config/server.properties

listeners=SASL_PLAINTEXT://:9095
advertised.listeners=SASL_PLAINTEXT://192.168.2.44:9095
security.inter.broker.protocol=SASL_PLAINTEXT
sasl.mechanism.inter.broker.protocol=SCRAM-SHA-512

3. 환경변수 설정 (인증 세팅을 한 경우에만 진행)

vi /opt/bitnami/scripts/kafka-env.sh

export KAFKA_OPTS="-Djava.security.auth.login.config=/opt/bitnami/kafka/config/kafka_server_jaas.conf"

4. kafka4 재시작

exit
docker restart kafka4

5. 주키퍼에 붙은 카프카 브로커 목록 확인

zookeeper-shell.sh 명령어로 확인

zookeeper-shell.sh zookeeper1 ls /brokers/ids

카프카 4가 주키퍼에 잘 붙은 것을 확인.

6. 카프카 5도 추가

위와 같은 방법으로 추가하였다.

브로커 5개가 주키퍼에 붙은 것을 확인.

Scale in 테스트

해당 브로커를 중지 또는 삭제하며 스케일 인을 할 수 있다. 현 테스트는 중지(stop)시키며 테스트했다.

1. 카프카 5 중지

먼저 제일 마지막에 추가한 kafka5먼저 중지했다.

docker stop kafka5

카프카 5를 중지시키니, 주키퍼에 붙은 카프카 브로커가 4개가 된 것을 확인.

2. 카프카 4중지

이제 fafka4를 중지시켰다.

docker stop kafka4

카프카 브로커가 원래대로 3개가 된 것을 확인.

[Redis] CentOS8에 redis 설치 및 springboot 연동하기

Nellie Kim — Thu, 27 Jun 2024 20:22:23 +0900

개발 중인 회사 서비스에서 카프카에서 정제한 데이터를 임시데이터베이스에 저장하고, api로 호출해서 사용자 화면에 리턴해야 하는 기능을 개발했다.

처음엔 카프카 스트림즈에서 제공하는 KTable , RocksDB 를 사용했었다.

카프카에서 제공하는 라이브러리라서 의존성만 추가해주면 사용할 수 있어서 편리하긴 하지만,

카프카에 종속성이 있기에 (카프카 서버가 죽으면 외부 저장소를 사용할 수가 없다..) 리스크가 있어 외부 데이터베이스인 redis로 바꾸기로 했다.

redis 를 적용하는 과정을 정리해보았다.

springboot 버전 : 2.5.4
redis 버전 : 3.3.1
총 적용 소요시간 : 1시간

1. redis 서버 설치

1) 도커로 설치

docker pull redis

2) 방화벽 설정

firewall-cmd --permanent --add-port=6379/tcp

3) 실행

docker run --name my-redis-container -d -p 6379:6379 redis

-name my-redis-container: 컨테이너의 이름을 my-redis-container로 지정합니다. 원하는 이름으로 변경할 수 있습니다.
d: 백그라운드에서 컨테이너를 실행합니다 (detached 모드).
p 6379:6379: 호스트의 6379 포트를 컨테이너의 6379 포트에 매핑합니다. 이렇게 하면 호스트에서도 Redis에 접근할 수 있습니다.
redis: 사용할 Docker 이미지 이름입니다.

netstat -tnlp로 포트 상태 확인해보니 6379 포트가 잘 열려있다.

4) 레디스 컨테이너 안으로 접속

docker exec -it my-redis-container redis-cli

5) 레디스 테스트

터미널에 입력한 데이터가 잘 조회되고 삭제되는 것까지 확인했다. 끝!!

2. 레디스 스프링부트 적용방법

1) 의존성 추가


<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-data-redis</artifactId>
    <version>3.3.1</version>
</dependency>

2) application.yml 파일에 레디스 host, port 추가

로컬에서 레디스를 사용한다면 localhost, 다른 서버나 도커 등을 사용한다면 그에 맞는 호스트로 설정해준다. 디폴트 포트는 6379이다.

spring:
  redis:
    host: localhost
    port: 6379

3) 레디스 설정 클래스 생성 (RedisConfig)

import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.data.redis.connection.RedisConnectionFactory;
import org.springframework.data.redis.connection.lettuce.LettuceConnectionFactory;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.data.redis.serializer.StringRedisSerializer;
/**
 *  Redis 설정 클래스
 */
@Configuration
public class RedisConfig {

    @Value("${spring.redis.host}")
    private String host;

    @Value("${spring.redis.port}")
    private int port;

    /**
     * RedisConnectionFactory 빈 생성
     * (LettuceConnectionFactory를 사용하여 Redis 서버와의 연결을 설정)
     *
     * @return RedisConnectionFactory 객체
     */
    @Bean
    public RedisConnectionFactory redisConnectionFactory() {
        return new LettuceConnectionFactory(host, port);
    }

    /**
     * RedisTemplate 빈 생성
     * (RedisTemplate은 Redis 서버와 상호작용하기 위한 주요 인터페이스로, 다양한 Redis 명령어를 수행한다.)
     *
     * @return RedisTemplate 객체
     */
    @Bean
    public RedisTemplate<String, Object> redisTemplate() {
        RedisTemplate<String, Object> redisTemplate = new RedisTemplate<>();
        redisTemplate.setConnectionFactory(redisConnectionFactory()); // redisTemplate에 redisConnectionFactory 객체 세팅

        // 일반적인 key:value의 경우 시리얼라이저
        redisTemplate.setKeySerializer(new StringRedisSerializer());
        redisTemplate.setValueSerializer(new StringRedisSerializer());

        // Hash를 사용할 경우 시리얼라이저
        redisTemplate.setHashKeySerializer(new StringRedisSerializer());
        redisTemplate.setHashValueSerializer(new StringRedisSerializer());

        // 모든 경우
        redisTemplate.setDefaultSerializer(new StringRedisSerializer());

        return redisTemplate;
    }
}

4) 레디스 유틸 클래스 생성 (RedisUtils)

레디스를 사용하는 방법은 RedisRepository, RedisTemplate 둘 중 하나를 사용하면 된다. 나는 레디스템플릿을 사용할 예정.

import lombok.RequiredArgsConstructor;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.stereotype.Service;

@RequiredArgsConstructor
@Service
public class RedisUtils {
    /**
     *  Redis 사용위한 util 클래스
     */
    private final RedisTemplate<String, Object> redisTemplate;

    /**
     * 지정된 키와 값으로 데이터를 Redis에 저장
     */
    public void setData(String key, String value) {
        redisTemplate.opsForValue().set(key, value);
    }

    /**
     * 지정된 키에 해당하는 데이터를 Redis에서 ㅈ회
     */
    public String getData(String key) {
        return (String) redisTemplate.opsForValue().get(key);
    }

    /**
     * 지정된 키에 해당하는 데이터를 Redis에서 삭제합니다.
     */
    public void deleteData(String key) {
        redisTemplate.delete(key);
    }
}

레디스 템플릿은 사용하는 자료구조마다 제공하는 메서드가 다르기 때문에 객체를 만들어서 레디스의 자료구조 타입에 맞는 메소드를 사용하면 된다.

나는 String 타입으로 사용했다.

메서드 명	레디스 타입
opsForValue	String
opsForList	List
opsForSet	Set
opsForZSet	Sorted Set
opsForHash	Hash

5) 컨트롤러 예제 (RedisController)

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

@RestController
@RequestMapping("/redis")
@RequiredConstructor
public class RedisController {

    private final RedisUtils redisUtils;

    /**
     * Redis에 데이터를 저장하는 엔드포인트 예제
     *
     * @param key         저장할 데이터의 키
     * @param value       저장할 데이터의 값
     */
    @PostMapping("/setData")
    public void setDataToRedis(@RequestParam String key,
                               @RequestParam String value) {
        redisUtils.setData(key, value);
    }

    /**
     * Redis에서 데이터를 조회하는 엔드포인트 예제
     *
     * @param key 조회할 데이터의 키
     * @return 키에 해당하는 데이터 (문자열 형태)
     */
    @GetMapping("/getData")
    public String getDataFromRedis(@RequestParam String key) {
        return redisUtils.getData(key);
    }

    /**
     * Redis에서 데이터를 삭제하는 엔드포인트 예제
     *
     * @param key 삭제할 데이터의 키
     */
    @DeleteMapping("/deleteData")
    public void deleteDataFromRedis(@RequestParam String key) {
        redisUtils.deleteData(key);
    }
}

kafka 프로듀서로 데이터를 보내고, 키 값으로 조회하는 호출을 postman 으로 해보았다.

해당 키 값을 가진 데이터 중 최신 데이터가 잘 호출이 되었다.

끝 ^^

[Springboot][트러블슈팅] com.fasterxml.jackson.databind.exc.UnrecognizedPropertyException 에러 (@JsonProperty 로 해결)

Nellie Kim — Wed, 26 Jun 2024 13:28:43 +0900

회사에서 서비스를 운영하며 생긴 스프링부트 에러 부분을 정리해보았다.

문제 상황

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 클래스이다.

@Data
public class ServiceModuleData { // 서비스 모듈 데이터
    private boolean startup_mode;  // 시작 모드
    private boolean auto_mode;  // 자동 모드
    
    //....(중략)
        
    private boolean LDC_on;  // LDC 켜기   문제되는 부분!
    private boolean PDU_on;  // PDU 켜기   문제되는 부분!

	//....(중략)

}

3) 카프카 스트림즈 클래스

여기서 또 주의할 점은, KeyValue.pair 해서 key-value 로 넣을 때는,

객체로 넣지 말고, 아래처럼 이렇게 String으로 바꿔서 넣어야 한다! (당연한거지만 ^^;;)

return KeyValue.pair(dto.getObu_ID(), objectMapper.writeValueAsString(dto.getInvehicle_data()));

/**
 * 카프카 스트림즈 생성하고, 특정 토픽 데이터를 필터링 -> 다른 토픽으로 저장하는 클래스 (정제용)
 */

@Configuration
@EnableKafka
public class StreamsFilter {
    /**
     * [ 스트림즈 1 ]
     * stream-all-test 토픽에서 정제 후 stream-car-test 토픽으로 보내는 스트림즈
     */
    @Bean
    public KafkaStreams kafkaStreams() {
        // 1. 설정 세팅
        Properties prop = new Properties();
        prop.put(StreamsConfig.BOOTSTRAP_SERVERS_CONFIG, "123.143.255.255:9092");
        prop.put(StreamsConfig.APPLICATION_ID_CONFIG, "streams-filter"); 
        prop.put(StreamsConfig.DEFAULT_KEY_SERDE_CLASS_CONFIG, Serdes.String().getClass());
        prop.put(StreamsConfig.DEFAULT_VALUE_SERDE_CLASS_CONFIG, Serdes.String().getClass());

        // 1-1) SASL 설정 추가 (프로듀서 생성 전에 추가해야 함)
        prop.put("security.protocol", "SASL_PLAINTEXT");
        prop.put("sasl.mechanism", "SCRAM-SHA-256");
        String jaasConfig = String.format(JAAS_TEMPLATE, "admin", "admin-secret");
        prop.put("sasl.jaas.config", jaasConfig);

        // 2. 스트림즈 빌더 생성
        final StreamsBuilder streamsBuilder = new StreamsBuilder();


        // 2-1) 소스 프로세서 생성
        KTable<String, String> streamLog = streamsBuilder.table("all-data"); // "all-data" 토픽에서 KTable 생성 

        // 2-2) 스트림 프로세서 생성
        streamLog.toStream().map((key, value) -> { // KTable을 KStream으로 변환하고, key-value 맵핑
                    try {
                        ObjectMapper objectMapper = new ObjectMapper();

//                        StreamsTestDto dto = objectMapper.readValue(value, StreamsTestDto.class);
                        VehicleData dto = objectMapper.readValue(value, VehicleData.class);

                        // dto의 name 필드를 key-value 쌍으로 반환
//                        return KeyValue.pair("name", dto.getName()); // 이렇게 해도 에러 발생한다!! 
                        return KeyValue.pair(dto.getObu_ID(), objectMapper.writeValueAsString(dto.getInvehicle_data())); //   이렇게 String으로 바꿔서 넣어야 한다!

                    } catch (Exception e) {
                        e.printStackTrace();
                        return KeyValue.pair("error-key", "error-value"); 
                    }
                })
                // 2-3) 싱크 프로세서 생성: 변환된 데이터를 "stream-name-test" 토픽으로 전송
                .to("car-data"); 


        // 3. KafkaStreams 객체 생성 및 시작
        KafkaStreams kafkaStreams = new KafkaStreams(streamsBuilder.build(), prop);
        kafkaStreams.start();

        return kafkaStreams;
    }
}

이렇게만 하고 돌려보면,

UnrecognizedPropertyException 이 짠하고 나타난다! ;;

해결 방법

@JsonProperty 를 사용해서 해결 !

@Data
public class ServiceModuleData { // 서비스 모듈 데이터
    private boolean startup_mode;  // 시작 모드
    private boolean auto_mode;  // 자동 모드
    
    //....(중략)
    @JsonProperty("LDC_on") // 추가  
    private boolean LDC_on;  
    
    @JsonProperty("PDU_on") // 추가  
    private boolean PDU_on; 

	//....(중략)

}

바로 해결된다.

물론 사용하기 위해 Jackson 라이브러리인 com.fasterxml.jackson.core 패키지를 dependencies에 추가해주고 사용하면 된다!

		<!-- Jackson Core -->
		<dependency>
			<groupId>com.fasterxml.jackson.core</groupId>
			<artifactId>jackson-core</artifactId>
			<version>2.13.2</version>
		</dependency>

[Kafka] 카프카 컨슈머에서 받은 데이터 MariaDB로 전송하기

Nellie Kim — Tue, 18 Jun 2024 14:24:59 +0900

카프카 스트림즈로 필터링된 토픽을 컨슈밍하는 컨슈머를 만들고, 그 컨슈머에서 받은 데이터를 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.scram.ScramLoginModule required username=\\"admin\\" password=\\"admin-secret\\";";

    public static Object test() {
        // 1. 설정 세팅
        Properties prop = new Properties();
        prop.put(ProducerConfig.BOOTSTRAP_SERVERS_CONFIG, "123.143.255.255:9092, 123.143.255.255:9093, 123.143.255.255:9094"); // kafka host 및 server 설정
        prop.put(ProducerConfig.KEY_SERIALIZER_CLASS_CONFIG, "org.apache.kafka.common.serialization.StringSerializer");   // serialize 설정
        prop.put(ProducerConfig.VALUE_SERIALIZER_CLASS_CONFIG, "org.apache.kafka.common.serialization.StringSerializer"); // serialize 설정

        // 1-1) SASL 설정 추가 (프로듀서 생성 전에 추가해야 함)
        prop.put("security.protocol", "SASL_PLAINTEXT");
        prop.put("sasl.mechanism", "SCRAM-SHA-256");
        String jaasConfig = String.format(JAAS_TEMPLATE, "admin1", "admin1");
        prop.put("sasl.jaas.config", jaasConfig);

        // 2. producer 생성
        KafkaProducer<String, String> producer = new KafkaProducer<>(prop);

        // 3. message 전달

        // 시작 시간 기록
        long startTime = System.nanoTime();

        String id = "id";
        String brand = "brand";
        for (int i = 0; i < 10; i++) {
            String jsonValue = "{ \\"carId\\": \\"" + id+ "-"+ i + "\\", \\"carData\\": { \\"cleanData\\": true, \\"locationData\\": 123, \\"carBrand\\": \\"" + brand + i + "\\" } }";
            producer.send(new ProducerRecord<>("stream-all-test4", "car-test4-"+ i, jsonValue)); // ⭐ 데이터 보낼 토픽 이름
        }
        // 종료 시간 기록
        long endTime = System.nanoTime();

        // 실행 시간 계산 및 출력 (단위: milliseconds)
        long duration = (endTime - startTime) / 1000000;  // 나노초를 밀리초로 변환
        System.out.println("  프로듀서 실행 시간: " + duration + "ms");

        // 종료
        producer.flush();
        producer.close();
        return 1;
    }
}

디비용 토픽으로 쏴주는 스트림즈

import com.fasterxml.jackson.databind.ObjectMapper;
import org.apache.kafka.clients.consumer.ConsumerConfig;
import org.apache.kafka.common.serialization.Serdes;
import org.apache.kafka.streams.KafkaStreams;
import org.apache.kafka.streams.KeyValue;
import org.apache.kafka.streams.StreamsBuilder;
import org.apache.kafka.streams.StreamsConfig;
import org.apache.kafka.streams.kstream.KTable;
import org.apache.kafka.streams.kstream.Produced;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.kafka.annotation.EnableKafka;

import java.util.Properties;
    /**
     * [ 스트림즈 2 ]
     * stream-all-test4 토픽에서 정제 후 stream-car-test4-db 토픽으로 보내는 스트림즈
     */
    @Bean
    public KafkaStreams kafkaStreamsForDB() {
        // 1. 설정 세팅
        Properties prop = new Properties();
        prop.put(StreamsConfig.BOOTSTRAP_SERVERS_CONFIG, "123.143.255.255:9092"); // kafka host 및 server 설정
        prop.put(StreamsConfig.APPLICATION_ID_CONFIG, "streams-test4-db"); // ⭐ application id
        prop.put(StreamsConfig.DEFAULT_KEY_SERDE_CLASS_CONFIG, Serdes.String().getClass());
        prop.put(StreamsConfig.DEFAULT_VALUE_SERDE_CLASS_CONFIG, Serdes.String().getClass());
        prop.put(ConsumerConfig.AUTO_OFFSET_RESET_CONFIG, "latest"); // 기본값이 none 인듯..?

        // 1-1) SASL 설정 추가 (프로듀서 생성 전에 추가해야 함)
        prop.put("security.protocol", "SASL_PLAINTEXT");
        prop.put("sasl.mechanism", "SCRAM-SHA-256");
        String jaasConfig = String.format(JAAS_TEMPLATE, "admin", "admin-secret");
        prop.put("sasl.jaas.config", jaasConfig);

        // 2. 스트림즈 빌더 생성
        final StreamsBuilder streamsBuilder = new StreamsBuilder();

        // 2-1) 소스 프로세서 생성
        KTable<String, String> streamLog = streamsBuilder.table("stream-all-test4"); // "stream-all-test" 토픽에서 KTable 생성 // ⭐ 데이터 꺼낼 토픽 이름

        // 2-2) 스트림 프로세서 생성

        // 시작 시간 기록
        long startTime = System.nanoTime();

        streamLog.toStream().map((key, value) -> { // KTable을 KStream으로 변환하고, key-value 맵핑
                    try {
                        ObjectMapper objectMapper = new ObjectMapper();

                        // JSON 문자열을 StreamsTestDto 객체로 변환
                        StreamsTestDto dto = objectMapper.readValue(value, StreamsTestDto.class);

                        // dto의 name 필드를 key-value 쌍으로 반환
//                        return KeyValue.pair("name", dto.getName());
                        return KeyValue.pair(dto.getCarId(), dto.getCarData().getCarBrand()); //Key: carId , Value: 브랜드

                    } catch (Exception e) {
                        e.printStackTrace();
                        return KeyValue.pair(-1, "error"); // 예외 발생 시 key -1, value "error" 반환
                    }
                })
                // 2-3) 싱크 프로세서 생성: 변환된 데이터를 "stream-name-test" 토픽으로 전송
                .to("stream-car-test4-db"); // ⭐ 데이터 보낼 토픽 이름  

        // 종료 시간 기록
        long endTime = System.nanoTime();

        // 실행 시간 계산 및 출력 (단위: milliseconds)
        long duration = (endTime - startTime) / 1000000;  // 나노초를 밀리초로 변환
        System.out.println("  스트림즈 필터링 실행 시간: " + duration + "ms");

        // 3. KafkaStreams 객체 생성 및 시작
        KafkaStreams kafkaStreams = new KafkaStreams(streamsBuilder.build(), prop);
        kafkaStreams.start();

        return kafkaStreams;
    }
}

컨슈머

import lombok.RequiredArgsConstructor;
import org.springframework.kafka.annotation.KafkaListener;
import org.springframework.stereotype.Service;

@Service
@RequiredArgsConstructor
public class KafkaConsumerTest {

    private long startTime;  // 전체 처리 시작 시간
    private int messageCount;  // 처리한 메시지 수
    private final KafkaTestDao kafkaTestDao;

    @KafkaListener(topics="stream-car-test4-db", groupId="consumer-test4-db") //⭐ 그룹 id
    public void testForDB(String param) {
        if (messageCount == 0) {
            // 첫 번째 메시지일 때 전체 처리 시작 시간 기록
            startTime = System.currentTimeMillis();
        }

        System.out.println("  stream-car-test4-db 토픽을 바라보는 컨슈머가 가져온 메시지   " + param);
        kafkaTestDao.regCarInfo(param); //   db 에 저장!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

        messageCount++;

        // 모든 메시지를 처리한 후에 실행 시간 출력
        if (messageCount >= 9) {
            long endTime = System.currentTimeMillis();
            long duration = endTime - startTime;
            System.out.println("  messageCount - db: " + messageCount);
            System.out.println("  전체 메시지 컨슈밍 시간 - db: " + duration + "ms");
        }
    }
}

KafkaTestDao

import org.apache.ibatis.annotations.Mapper;

@Mapper
public interface KafkaTestDao {

    // stream-car-test4-db 토픽 컨슈머에 insert
    Integer regCarInfo(String param);
}

kafkaTest.xml

<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="kr.co.common.kafka.KafkaTestDao">
	<insert id="regCarInfo" parameterType="java.lang.String">
		INSERT INTO TB_KAFKA_TEST (
		BRAND_NAME
		) VALUES (
		#{param}
		)
	</insert>
</mapper>

포스트맨으로 프로듀서 api를 호출하여 10건을 보냈다. 스트림즈로 브랜드만 필터링되어 db에 10건이 잘 저장이 되는 것을 확인할 수 있었다!!!

[Kafka] 카프카 브로커 하나씩 다운시킨 후 메시지 전송 테스트 (고가용성 테스트, replication test)

Nellie Kim — Mon, 10 Jun 2024 17:04:39 +0900

kafka1, kafka2, kafka3 중에 하나씩 브로커를 죽여보고 메시지를 전송해보려고 한다.

업무에 kafka 를 적용하여 운영할 예정이라, 브로커 서버가 죽었을 때 메시지가 정상적으로 전송 되는지 고 가용성 테스트를 해보기로 했다.

✅ 1. directTest 토픽의 partition 3들의 복제 상태 확인

현재 토픽의 복제 상태를 확인하는 명령어

kafka-topics.sh --bootstrap-server kafka1:9092 --topic directTest --describe --command-config /opt/bitnami/kafka/config/sasl_client.properties

토픽 정보

Topic: directTest
TopicId: ve1NQTn4SNCf-lV-qVwDqA
PartitionCount: 3 (총 3개의 파티션)
ReplicationFactor: 3 (각 파티션이 3개의 브로커에 복제됨)
Configs: (특별한 설정 없음)

파티션 정보

Partition 0:
- Leader: 브로커 1 (ID : 1) (데이터 읽기/쓰기 작업을 주도하는 브로커)
- Replicas: 1, 2, 3 (이 파티션의 데이터를 복제하는 브로커 목록)
- Isr (In-Sync Replicas): 2, 1, 3 (현재 동기화 상태인 복제본 목록)
Partition 1:
- Leader: 브로커 2 (ID : 2)
- Replicas: 1, 2, 3
- Isr: 2, 1, 3
Partition 2:
- Leader: 브로커 2 (ID : 2)
- Replicas: 1, 2, 3
- Isr: 2, 1, 3

요약

모든 파티션의 복제본이 브로커 1, 2, 3에 고르게 분포되어 있습니다. 각 파티션의 리더는 특정 브로커가 담당하고 있으며, 현재 모든 복제본이 동기화 상태에 있습니다. 이제 파티션 2번도 정상적으로 복제되어, 각 파티션의 복제본이 브로커 1, 2, 3에 고르게 분포된 것을 확인할 수 있습니다.

✅ 2. 프로듀서 메시지 전송 확인

카프카 프로듀서 KafkaProducerTest

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.scram.ScramLoginModule required username=\\"admin\\" password=\\"admin-secret\\";";

    public static Object test() {
        // 1. 설정 세팅
        Properties prop = new Properties();
        prop.put(ProducerConfig.BOOTSTRAP_SERVERS_CONFIG, "123.143.255.255:9092"); // kafka host 및 server 설정
        prop.put(ProducerConfig.KEY_SERIALIZER_CLASS_CONFIG, "org.apache.kafka.common.serialization.StringSerializer");   // serialize 설정
        prop.put(ProducerConfig.VALUE_SERIALIZER_CLASS_CONFIG, "org.apache.kafka.common.serialization.StringSerializer"); // serialize 설정

        // 1-1) SASL 설정 추가 (프로듀서 생성 전에 추가해야 함)
        prop.put("security.protocol", "SASL_PLAINTEXT");
        prop.put("sasl.mechanism", "SCRAM-SHA-256");
        String jaasConfig = String.format(JAAS_TEMPLATE, "admin", "admin-secret");
        prop.put("sasl.jaas.config", jaasConfig);

        // 2. producer 생성
        KafkaProducer<String, String> producer = new KafkaProducer<>(prop);

        // 3. message 전달
        producer.send(new ProducerRecord<>("directTest", "key1", "1"));
        producer.send(new ProducerRecord<>("directTest", "key2", "12"));
        producer.send(new ProducerRecord<>("directTest", "key3", "123"));
        producer.send(new ProducerRecord<>("directTest", "key4", "1234"));
        producer.send(new ProducerRecord<>("directTest", "key5", "12345"));
        producer.send(new ProducerRecord<>("directTest", "key6", "123456"));
        producer.send(new ProducerRecord<>("directTest", "key7", "1234567"));
        producer.send(new ProducerRecord<>("directTest", "key8", "12345678"));
        producer.send(new ProducerRecord<>("directTest", "key9", "123456789"));
        producer.send(new ProducerRecord<>("directTest", "key10", "1234567890"));

        // 종료
        producer.flush();
        producer.close();
        return 1;
    }
}

포스트맨으로 send 해보았다.

골고루 잘 들어갔다.

✅ 3. 브로커 하나씩 죽여보기

1) kafka 2 죽이기

docker stop kafka2

컨트롤러 브로커가 원래 2번이었는데 3번이 되었다.

메시지 전송

마찬가지로 포스트맨으로 전송 테스트를 했다.

파티션 별로 들어가는 메시지는 동일한 것을 확인.

파티션 별로 리더는 누가 됐는지 확인

전

후

파티션 0 번의 리더는 1번 브로커

파티션 1번의 리더는 2번 브로커

파티션 2번의 리더는 2번 브로커 였는데,

2번 브로커가 죽음으로서, 모든 파티션의 리더는 1번으로 바뀌었다.

2) kafka 1 죽이기

docker stop kafka1

컨트롤러 브로커가 원래 3번이었으니 1번을 죽여도 여전히 3번이 컨트롤러 브로커이다.

1번 브로커는 아예 자취를 감췄다.

메시지 전송

마찬가지로 포스트맨으로 전송 테스트 함.

파티션 별로 들어가는 메시지는 동일한 것을 확인.

파티션 별로 리더는 누가 됐는지 확인

kafka1은 죽었으니까 bash 접속도 튕겼다. 그래서 kafka3으로 들어갔다.

들어가서 아래 명령어로 이제 각각의 파티션 리더가 있는 브로커가 어디인지 확인하자.

kafka-topics.sh --bootstrap-server kafka3:9094 --topic directTest --describe --command-config /opt/bitnami/kafka/config/sasl_client.properties

전

후

파티션 리더가 모두 1번 브로커였는데 이제는 3번 브로커로 다 바뀌었다. 3번 브로커 밖에 없기때문.

3) kafka 3 죽이기

1개 남은 kafka3 도 죽여보겠다.

docker stop kafka3

카프카 ui 는 물론 메시지 전송은 당연히 안된다.

✅ 4. 브로커 하나씩 다시 살리기

1) kafka3 살리기

kafka3 부터 다시 살리자.

docker start kafka3

바로 ui 에 잘 뜬다. 컨트롤러 브로커도 당연히 3번 브로커가 되었다.

메시지 전송

마찬가지로 포스트맨으로 전송 테스트 함. 들어가는 순서는 조금 바뀌었지만, 정해진 파티션에 잘 들어간다.

파티션 별로 리더는 누가 됐는지 확인

kafka-topics.sh --bootstrap-server kafka3:9094 --topic directTest --describe --command-config /opt/bitnami/kafka/config/sasl_client.properties

예상대로 브로커 3번이 리더가 되었다.

2) kafka1 살리기

docker start kafka1

파티션 별로 리더는 누가 됐는지 확인

여전히 리더는 3번 브로커이다. 원래 1번이었는데 그냥 1번으로 다시 안바뀌고, 3번으로 가는 것 같다.

3) kafka2 살리기

docker start kafka2

컨트롤러 브로커도 여전히 3이다.

메시지 전송

메시지도 전송해보자. 같은 방식으로 잘 간다.

파티션 별로 리더는 누가 됐는지 확인

kafka2 살렸는데도 여전히 파티션들의 리더는 3으로 고정이다. 굳이 바꿀 이유가 없으면 파티션 리더는 바꾸지 않는다.

✅ 결론

브로커를 하나씩 죽이고 메시지를 보내보았다. 다시 브로커를 살릴때는 20~30분 후에 살렸다.

카프카 3개 브로커 중에 2개를 죽이고 메시지를 보낸 상황에서도 메시지는 성공적으로 전송이 되었다.

아파치 카프카는 replication(복제) 기능이 잘 되어있기 때문에 카프카 브로커 서버가 한두개 다운되어도 데이터는 안전한 전송을 보장 받을 수 있다.

모두 다운되더라도 컨트롤러 브로커 (리더 브로커)와 리더 파티션을 자동으로 선출하고 메시지를 받을 준비를 해준다. 아주 굿이다!!!! (물론 카프카 브로커 서버가 모두 다운된다면 메시지는 보낼 수 없다)

[Kafka] 스프링 부트에 Kafka Streams 적용하기

Nellie Kim — Fri, 7 Jun 2024 15:03:12 +0900

카프카 스트림즈(Kafka Streams)란?

카프카 스트림즈란 연속적인 이벤트 스트림이 들어올때마다 그때그때 처리하고 분석하여 의미있는 정보를 추출하고 실시간으로 작업을 처리하는 자바 라이브러리 기능이다.

이전에는 카프카 컨슈머 및 프로듀서 조합으로 필터링하여 다시 토픽에 넘겨주는 작업을 해주었지만 카프카 스트림즈는 매우 간단한 스트림즈 DSL 이란 기능으로 강력한 필터링 기능을 제공한다.

아래 그림으로 비교를 해보자.

기존의 필터링 방식

카프카 스트림즈를 이용한 필터링 방식

또한 내장 DB 인 Rocks DB를 이용하여 key-value Store 기능도 제공한다.

2. 카프카 스트림즈 예제 코드

간단한 스프링부트 코드로 스트림즈 예제를 실습해보았다.

1. 스트림즈 DSL 라이브러리 추가 (의존성추가)

카프카 스트림즈, 그리고 토픽에서 뽑은 json value를 역직렬화 하기 위해 jackson binder 도 추가해 주었다.

		<dependency>
			<groupId>org.apache.kafka</groupId>
			<artifactId>kafka-streams</artifactId>
			<version>2.8.0</version>
		</dependency>
		<dependency>
			<groupId>org.apache.kafka</groupId>
			<artifactId>kafka-clients</artifactId>
			<version>2.8.0</version> <!-- Ensure this version matches your Kafka server version -->
		</dependency>
		<!-- Jackson Databind -->
		<dependency>
			<groupId>com.fasterxml.jackson.core</groupId>
			<artifactId>jackson-databind</artifactId>
			<version>2.13.2</version>
		</dependency>
		<!-- Jackson Core -->
		<dependency>
			<groupId>com.fasterxml.jackson.core</groupId>
			<artifactId>jackson-core</artifactId>
			<version>2.13.2</version>
		</dependency>
		<!-- Jackson Annotations -->
		<dependency>
			<groupId>com.fasterxml.jackson.core</groupId>
			<artifactId>jackson-annotations</artifactId>
			<version>2.13.2</version>
		</dependency>

2. application.yml 에 스트림즈 속성 추가

  spring:
    kafka:
      consumer:
        bootstrap-servers: 123.143.255.255:9092
        group-id: auto-driving-service
        properties:
          security.protocol: SASL_PLAINTEXT
          sasl.mechanism: SCRAM-SHA-512
          sasl.jaas.config: org.apache.kafka.common.security.scram.ScramLoginModule required username="admin" password="admin-secret";
        auto-offset-reset: latest
        key-deserializer: org.apache.kafka.common.serialization.StringDeserializer
        value-deserializer: org.apache.kafka.common.serialization.StringDeserializer
      streams: //   여기부터 아래 3줄 추가!!!!
        bootstrap-servers: 123.143.255.255:9092
        application-id: streams-test

3. 예시 코드 1

value 값의 길이가 3보다 크면 필터링 해서 다른 토픽으로 넣어주는 엄청 간단한 예시 코드로 실습을 해보겠다.

1) 프로듀서 코드

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.scram.ScramLoginModule required username=\\"admin\\" password=\\"admin-secret\\";";

    public static Object test() {
        // 1. 설정 세팅
        Properties prop = new Properties();
        prop.put(ProducerConfig.BOOTSTRAP_SERVERS_CONFIG, "123.143.255.255:9092"); // kafka host 및 server 설정
        prop.put(ProducerConfig.KEY_SERIALIZER_CLASS_CONFIG, "org.apache.kafka.common.serialization.StringSerializer");   // serialize 설정
        prop.put(ProducerConfig.VALUE_SERIALIZER_CLASS_CONFIG, "org.apache.kafka.common.serialization.StringSerializer"); // serialize 설정

        // 1-1) SASL 설정 추가 (프로듀서 생성 전에 추가해야 함)
        prop.put("security.protocol", "SASL_PLAINTEXT");
        prop.put("sasl.mechanism", "SCRAM-SHA-256");
        String jaasConfig = String.format(JAAS_TEMPLATE, "admin", "admin-secret");
        prop.put("sasl.jaas.config", jaasConfig);

        // 2. producer 생성
        KafkaProducer<String, String> producer = new KafkaProducer<>(prop);

        // 3. message 전달
        producer.send(new ProducerRecord<>("directTest", "key1", "1"));
        producer.send(new ProducerRecord<>("directTest", "key2", "12"));
        producer.send(new ProducerRecord<>("directTest", "key3", "123"));
        producer.send(new ProducerRecord<>("directTest", "key4", "1234")); // 이거랑 
        producer.send(new ProducerRecord<>("directTest", "key5", "12345")); // 이것만 스트림즈로 추출해서 streams-test로 보내고 싶다. 

        // 종료
        producer.flush();
        producer.close();
        return 1;
    }
}

2) 스트림즈 코드

예제 코드이기 때문에,

1개의 필터링 조건만 넣어보려고 한다.

value 값이 3보다 큰 메시지만 뽑아서 streams-test토픽으로 넣어볼 것이다.

아래와 같이 간단하게 작성하면 되는데, 이런 코드를 스트림즈DSL 이라고 부른다.

import org.apache.kafka.common.serialization.Serdes;
import org.apache.kafka.streams.KafkaStreams;
import org.apache.kafka.streams.StreamsBuilder;
import org.apache.kafka.streams.StreamsConfig;
import org.apache.kafka.streams.kstream.KStream;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.kafka.annotation.EnableKafka;

import java.util.Properties;

@Configuration
@EnableKafka
public class StreamsFilter {
    /** SASL 인증을 위한 JAAS Template */
    private static final String JAAS_TEMPLATE = "org.apache.kafka.common.security.scram.ScramLoginModule required username=\\"admin\\" password=\\"admin-secret\\";";

    @Bean
    public KafkaStreams kafkaStreams() {
        // 1. 설정 세팅
        Properties prop = new Properties();
        prop.put(StreamsConfig.BOOTSTRAP_SERVERS_CONFIG, "123.143.255.255:9092"); // kafka host 및 server 설정
        prop.put(StreamsConfig.APPLICATION_ID_CONFIG, "streams-test");
        prop.put(StreamsConfig.DEFAULT_KEY_SERDE_CLASS_CONFIG, Serdes.String().getClass());
        prop.put(StreamsConfig.DEFAULT_VALUE_SERDE_CLASS_CONFIG, Serdes.String().getClass());

        // 1-1) SASL 설정 추가 (프로듀서 생성 전에 추가해야 함)
        prop.put("security.protocol", "SASL_PLAINTEXT");
        prop.put("sasl.mechanism", "SCRAM-SHA-256");
        String jaasConfig = String.format(JAAS_TEMPLATE, "admin", "admin-secret");
        prop.put("sasl.jaas.config", jaasConfig);

        // 2. 스트림즈 빌더 생성
        final StreamsBuilder streamsBuilder = new StreamsBuilder();

        // 2-1) 소스 프로세서 생성
        KStream<String, String> streamLog = streamsBuilder.stream("directTest");
        // 2-2) 스트림 프로세서 생성
        streamLog.filter((key, value) -> value.length() > 3)
                // 2-3) 싱크 프로세서 생성
                .to("streams-test");

        // 3. 스트림즈 생성
        KafkaStreams kafkaStreams = new KafkaStreams(streamsBuilder.build(), prop);
        kafkaStreams.start();

        return kafkaStreams;
    }
}

프로듀서로 메시지를 보내고, kafkaUI를 보니

directTest 토픽에는 5개의 메시지가 잘 전송이 되는 것을 확인했다.

그리고 streams-test 토픽에는 내가 스트림즈를 생성해서 3보다 큰 메시지만 필터링해서 넣은 2개의 메시지가 잘 전송이 된 것을 볼 수 있다!!!

4. 예시 코드 2

이제는 조금 복잡하게 value로 아래 형태의 json을 넣어줄 것이다. 여기서 name 만 뽑아서 새로운 stream-name-test 토픽에 넣어주려고 한다.

{
"name" : "hj",
"age" : 20,
"phone" : "01012341234",
"job" : "developer"
}

1) 프로듀서 코드

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.scram.ScramLoginModule required username=\"admin\" password=\"admin-secret\";";

    public static Object test() {
        // 1. 설정 세팅
        Properties prop = new Properties();
        prop.put(ProducerConfig.BOOTSTRAP_SERVERS_CONFIG, "123.143.255.255:9092, 123.143.255.255:9093, 123.143.255.255:9094"); // kafka host 및 server 설정
        prop.put(ProducerConfig.KEY_SERIALIZER_CLASS_CONFIG, "org.apache.kafka.common.serialization.StringSerializer");   // serialize 설정
        prop.put(ProducerConfig.VALUE_SERIALIZER_CLASS_CONFIG, "org.apache.kafka.common.serialization.StringSerializer"); // serialize 설정

        // 1-1) SASL 설정 추가 (프로듀서 생성 전에 추가해야 함)
        prop.put("security.protocol", "SASL_PLAINTEXT");
        prop.put("sasl.mechanism", "SCRAM-SHA-256");
        String jaasConfig = String.format(JAAS_TEMPLATE, "admin", "admin-secret");
        prop.put("sasl.jaas.config", jaasConfig);

        // 2. producer 생성
        KafkaProducer<String, String> producer = new KafkaProducer<>(prop);

        // 3. message 전달
        String jsonValue = "{\"name\":\"hj\", \"age\":20, \"phone\":\"01012341234\", \"job\":\"developer\"}";

        producer.send(new ProducerRecord<>("stream-all-test", "json-test-key", jsonValue));

        // 종료
        producer.flush();
        producer.close();
        return 1;
    }
}

2) json 과 매핑할 Dto 생성

import lombok.Data;

@Data
public class StreamsTestDto {
    private String name;
    private Long age;
    private String phone;
    private String job;
}

3) 스트림즈 코드

objectMapper 객체를 사용하여 Dto로 변환해주고, 변환한 변수를 value로 넣어줄 것이다.

import com.fasterxml.jackson.databind.ObjectMapper;
import org.apache.kafka.common.serialization.Serdes;
import org.apache.kafka.streams.KafkaStreams;
import org.apache.kafka.streams.KeyValue;
import org.apache.kafka.streams.StreamsBuilder;
import org.apache.kafka.streams.StreamsConfig;
import org.apache.kafka.streams.kstream.KStream;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.kafka.annotation.EnableKafka;

import java.util.Properties;

@Configuration
@EnableKafka
public class StreamsFilter {
    /** SASL 인증을 위한 JAAS Template */
    private static final String JAAS_TEMPLATE = "org.apache.kafka.common.security.scram.ScramLoginModule required username=\"admin\" password=\"admin-secret\";";

    @Bean
    public KafkaStreams kafkaStreams() {
        // 1. 설정 세팅
        Properties prop = new Properties();
        prop.put(StreamsConfig.BOOTSTRAP_SERVERS_CONFIG, "123.143.255.255:9092"); // kafka host 및 server 설정
        prop.put(StreamsConfig.APPLICATION_ID_CONFIG, "streams-test");
        prop.put(StreamsConfig.DEFAULT_KEY_SERDE_CLASS_CONFIG, Serdes.String().getClass());
        prop.put(StreamsConfig.DEFAULT_VALUE_SERDE_CLASS_CONFIG, Serdes.String().getClass());

        // 1-1) SASL 설정 추가 (프로듀서 생성 전에 추가해야 함)
        prop.put("security.protocol", "SASL_PLAINTEXT");
        prop.put("sasl.mechanism", "SCRAM-SHA-256");
        String jaasConfig = String.format(JAAS_TEMPLATE, "admin", "admin-secret");
        prop.put("sasl.jaas.config", jaasConfig);

        // 2. 스트림즈 빌더 생성
        final StreamsBuilder streamsBuilder = new StreamsBuilder();

        // 2-1) 소스 프로세서 생성
        KStream<String, String> streamLog = streamsBuilder.stream("stream-all-test");
        // 2-2) 스트림 프로세서 생성
        streamLog.map((key, value) -> {
                    try {
                        ObjectMapper objectMapper = new ObjectMapper();

                        // JSON 문자열을 StreamsTestDto 객체로 변환
                        StreamsTestDto dto = objectMapper.readValue(value, StreamsTestDto.class);

                        // dto의 name 필드를 key-value 쌍으로 반환
                        return KeyValue.pair("name", dto.getName());

                    } catch (Exception e) {
                        return KeyValue.pair("name", null); // 예외 발생 시 key는 "name", value는 null
                    }
                })
                // 2-3) 싱크 프로세서 생성
                .to("stream-name-test");

        // 3. 스트림즈 생성
        KafkaStreams kafkaStreams = new KafkaStreams(streamsBuilder.build(), prop);
        kafkaStreams.start();

        return kafkaStreams;
    }
}

프로듀서로 메시지를 보내고, kafkaUI를 보니 json 이 value 값으로 잘 들어왔다.

name 만 뽑아서 stream-name-test 토픽으로 새로 넣어준 것이 잘 확인되었다.

이제 카프카 스트림즈를 사용해서 해당 토픽의 일부분만 필터링 해서 다른 토픽으로 메시지를 전송할 수 있는 것을 확인했다.

또한 카프카 스트림즈를 사용하기 전에는 외부 key-value store인 redis 같은 저장소를 사용해야만 했지만

카프카 스트림즈는 내장 key-value store를 제공하기 때문에 간편하게 원하는 메시지만 필터 저장하고 select 문 등을 이용해서 쉽게 꺼내올 수도 있다!!

메시지를 쉽게 필터링 해서 토픽에 넣고, 쉽게 가져오는 매우 강력한 카프카 스트림즈 기능을 알아보았다.

더 상세한 기능은 아래 공식문서를 참고하면 된다.

출처

https://kafka.apache.org/37/documentation/streams/quickstart

Apache Kafka

Apache Kafka: A Distributed Streaming Platform.

kafka.apache.org

https://velog.io/@bbangi/Kafka-Streams

Spring Boot and Kafka Streams Example

허튼짓은 그만: Kafka Streams를 활용한 실시간 이상 로그인 감지 시스템 도입하기

[CentOS] CentOS8에 JAVA설치하기

Nellie Kim — Tue, 4 Jun 2024 13:42:01 +0900

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) 자바 심볼릭 링크 경로 조회

javac 가 설치된 위치 확인

which javac

javac의 정보 상세조회

ls -l /usr/bin/javac

심볼릭 링크가 연결되어 있는 파일 경로 조회

readlink /etc/alternatives/javac

찾았다 경로!! 86_64까지만 써주면 된다.

/usr/lib/jvm/java-1.8.0-openjdk-1.8.0.412.b08-2.el8.x86_64

2) 자바 환경 변수 세팅

이제 vi /etc/profile로 profile 파일을 열어서 환경 변수를 지정해주면 끝이다!

vi /etc/profile 로 환경변수 입력

vi /etc/profile

아래 4줄 입력!

export JAVA_HOME=/usr/lib/jvm/java-1.8.0-openjdk-1.8.0.412.b08-2.el8.x86_64
export PATH=$JAVA_HOME/bin:$PATH
export JAVA_OPTS=Dfile.encoding=UTF-8
export CLASSPATH="."

classpath는 라이브러리 경로를 가리키는데 . 을 입력하면 자바가 지정한 경로를 인식한다고 한다.

난 맨 아래에 써주었다.

수정 내용 적용 및 재부팅

source /etc/profile 로 수정내용을 적용 시킨뒤 reboot로 재부팅한다.

source /etc/profile 
reboot

끝!

[Kafka] 이미 생성된 토픽의 replication factor 변경하기

Nellie Kim — Mon, 27 May 2024 14:51:08 +0900

원래는 토픽 생성 시에 설정 값으로 준다

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 --describe --command-config /opt/bitnami/kafka/config/sasl_client.properties
Topic: directTest       TopicId: ve1NQTn4SNCf-lV-qVwDqA PartitionCount: 3       **ReplicationFactor: 1**    Configs:
        Topic: directTest       Partition: 0    Leader: 3       Replicas: 3     Isr: 3
        Topic: directTest       Partition: 1    Leader: 1       Replicas: 1     Isr: 1
        Topic: directTest       Partition: 2    Leader: 2       Replicas: 2     Isr: 2

보니까 이렇게 ReplicationFactor : 1이라고 나와있다.

gpt 가 알려준 위 정보의 의미이다.

전체 토픽 정보

Topic: directTest - 토픽의 이름입니다.
TopicId: ve1NQTn4SNCf-lV-qVwDqA - 토픽의 고유 ID입니다.
PartitionCount: 3 - 토픽에 포함된 파티션의 수입니다.
ReplicationFactor: 1 - 각 파티션의 리플리카 수입니다. 이 경우, 각 파티션은 단 하나의 리플리카를 가집니다.
Configs: - 현재 설정된 특별한 설정이 없습니다.

각 파티션 정보

각 파티션의 정보를 제공합니다:

Partition 0

Partition: 0 - 파티션 번호입니다.
Leader: 3 - 파티션 0의 리더 브로커 ID입니다. 리더는 클라이언트의 모든 읽기 및 쓰기 요청을 처리합니다.
Replicas: 3 - 파티션 0의 리플리카를 호스팅하는 브로커 ID입니다. 이 경우, 브로커 3만 리플리카를 가집니다.
Isr: 3 - 현재 "In-Sync Replicas" (ISR)에 있는 리플리카의 브로커 ID입니다. 이들은 리더와 동기화 상태에 있는 리플리카입니다.

Partition 1

Partition: 1 - 파티션 번호입니다.
Leader: 1 - 파티션 1의 리더 브로커 ID입니다.
Replicas: 1 - 파티션 1의 리플리카를 호스팅하는 브로커 ID입니다. 이 경우, 브로커 1만 리플리카를 가집니다.
Isr: 1 - 현재 "In-Sync Replicas" (ISR)에 있는 리플리카의 브로커 ID입니다.

Partition 2

Partition: 2 - 파티션 번호입니다.
Leader: 2 - 파티션 2의 리더 브로커 ID입니다.
Replicas: 2 - 파티션 2의 리플리카를 호스팅하는 브로커 ID입니다. 이 경우, 브로커 2만 리플리카를 가집니다.
Isr: 2 - 현재 "In-Sync Replicas" (ISR)에 있는 리플리카의 브로커 ID입니다.

요약

directTest 토픽은 3개의 파티션을 가지고 있으며, 각 파티션은 리플리카 수가 1로 설정되어 있습니다.
각 파티션은 서로 다른 브로커가 리더 역할을 하고 있으며, 해당 브로커는 유일한 리플리카이자 In-Sync Replica입니다.
리플리케이션 팩터가 1이기 때문에 데이터 복제는 이루어지지 않고, 각 파티션은 하나의 브로커에만 존재합니다.

이 정보는 directTest 토픽이 현재 3개의 브로커에 분산되어 있으며, 각 파티션의 리더와 ISR 상태를 보여줍니다.

2. json 파일 생성하기

/opt/bitnami/kafka/bin 
vim rf.json #rf.json 이라고 작성함

{
    "version":1,
    "partitions":[
        {
            "topic":"directTest",
            "partition":0,
            "replicas":[1,2,3]
        },
        {
            "topic":"directTest",
            "partition":1,
            "replicas":[2,1,3]
        }
    ]
}

3. kafka-reassign-partitions.sh 으로 RF 값 늘리기

kafka-reassign-partitions.sh \\
    --bootstrap-server kafka1:9092 \\
    --reassignment-json-file rf.json \\
    --command-config /opt/bitnami/kafka/config/sasl_client.properties \\
    --execute

다시 아래 명령어로 토픽 상세조회를 해보니, ReplicationFactor : 3 으로 변경된 것을 확인할 수 있다!

kafka-topics.sh --bootstrap-server kafka1:9092 --topic directTest --describe --command-config /opt/bitnami/kafka/config/sasl_client.properties

출처

[Kafka] 토픽의 Replication Factor 변경

카프카 토픽에 전송된 메시지는 가용성을 위해서 여러 브로커에 복제되어 저장된다. 브로커 노드에 장애가 생긴 상황에서도 메시지 서비스가 가능하도록 하기 위함이다. 카프카는 이렇게 복제

hbase.tistory.com

[VirtualBox] Rocky8 에 VirtualBox 설치 (CentOS계열)

Nellie Kim — Mon, 20 May 2024 16:06:16 +0900

카프카를 운영할 서버 하나를 할당 받았다.

그 동안은 로컬환경에서 테스트를 했는데, 이제는 실무용 서버에 테스트를 하려고 한다. (카프카 서버가 자꾸 죽는다 ㅠㅠ)

혹시 모르니 업무용 CentOS에도 Virtual Box를 설치해서 안전하게 카프카 운영 환경을 테스트를 해보려고 한다.

1. GPG 키를 시스템에 설치

sudo rpm --import https://www.virtualbox.org/download/oracle_vbox_2016.asc

이 명령어를 실행하면 VirtualBox 패키지의 GPG 키를 시스템에 추가하여 VirtualBox 패키지를 설치하거나 업데이트할 때 GPG 키 검사를 통과한다.

~~설치하지 않으면 GPG 키 에러~~ 하면서 에러가 뜬다. (이 것 때문에 한참 헤맸다 ㅠㅠ)~~

2. 버추얼박스 다운로드

1) 다운로드 가능한 버추얼 박스 리스트 조회

sudo yum list available | grep VirtualBox

2) 버추얼 박스 다운로드
이 문서를 작성할 때 VirtualBox의 최신 안정 버전은 6.1.x 버전이므로, 다음 명령을 실행하여 VirtualBox-6.1 패키지를 설치

sudo yum install VirtualBox-6.1

3) 버추얼 박스 설치되었는지 확인

VirtualBox 설치가 성공했는지 확인하려면 다음 명령을 실행하여 vboxdrv 서비스의 상태를 확인

출력은 서비스가 활성화되고 활성 상태임을 나타낸다.

systemctl status vboxdrv

3. 버추얼박스 확장 팩 설치

1) 확장팩 설치

6.1.50버전으로 설치했다. 나름 최신버전으로..

wget https://download.virtualbox.org/virtualbox/6.1.50/Oracle_VM_VirtualBox_Extension_Pack-6.1.50.vbox-extpack

2) 확장팩 열어서 라이센스 동의 여부 체크

다운로드가 완료되면 다음 명령을 사용하여 확장 팩을 가져온다.

sudo VBoxManage extpack install  Oracle_VM_VirtualBox_Extension_Pack-6.1.50.vbox-extpack

오라클 라이선스가 표시되고 약관에 동의하라는 메시지가 표시되며

y를 입력하면 설치가 완료

Rocky8 서버에 VirtualBox 설치 완료!

https://jjeongil.tistory.com/1400

CentOS 7 : VirtualBox 설정하는 방법, 예제, 명령어

VirtualBox는 여러 게스트 운영 체제(가상 시스템)를 동시에 실행할 수 있는 오픈 소스 교차 플랫폼 가상화 소프트웨어입니다. 이 튜토리얼에서는 CentOS 7 시스템의 오라클 리포지토리에서 VirtualBox

jjeongil.tistory.com

[Grafana] Springboot 서버가 꺼지면 Slack 으로 알림받기

Nellie Kim — Thu, 16 May 2024 18:14:44 +0900

카프카 개발 및 운영을 시작하면서 그라파나와 연동을 하게 되었다.

그라파나의 강력한 기능인 알림기능을 사용하고 싶어서 먼저 스프링부트 서버가 꺼지면 슬랙으로 알림을 받는 과정을 먼저 연습하며 정리해보았다.

1. 슬랙 웹훅 URL 생성

2. 그라파나 연동

1. Contact points 추가

2. Alert rules 설정

3. Notification policies 설정

3. 테스트

1. 슬랙 웹훅 URL 생성

슬랙에 먼저 가입하고 워크스페이스를 생성해준다. (이 과정은 설명 생략)

우클릭 → 채널 세부정보 보기

통합 → 앱 → 앱추가

webhook 검색하여 Incoming WebHooks 설치

Slack에 추가 클릭

아까 만들었던 워크스페이스 명을 선택하고 수신 웹후크 통합 앱 추가

웹후크 URL이 생성이 된다.

맨 아래 '설정 저장' 버튼 클릭 !

웹훅 URL

https://hooks.slack.com/services/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

curl -X POST --data-urlencode "payload={\"channel\": \"#test\", \"username\": \"webhookbot\", \"text\": \"이 항목은 #개의 my-channel-here에 포스트되며 webhookbot이라는 봇에서 제공됩니다.\", \"icon_emoji\": \":ghost:\"}" https://hooks.slack.com/services/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

mobaXterm 터미널에 위 명령어를 그대로 넣어보았다.

wow..

바로 슬랙에 알림이 온다!!

2. 그라파나 연동

이제 그라파나에 알림 설정을 해보자.

1. Contact points 추가

그라파나 Alerting - Manage contact points - Add contack points 클릭

이름 test , 슬랙, 웹훅 url만 넣어주고 Test

메시지 전송 실패 ...;;;;

Failed to send test alert.: failed to send Slack message : failed incoming webhook......

아래 브라우저 알림 허용해주고, 웹훅 url을 재발급 받았다.

브라우저 알림 허용 하는 법

슬랙 환경설정을 보니 이렇게 경고창이 떠있다.

크롬 우측 더보기 - 설정 - 개인 정보 보호 및 보안 - 사이트 설정 - 알림 에 들어가서 알림 허용으로 바꿔준다.

슬랙 화면 새로고침하니 경고창이 사라지고 '데스크톱 알림 활성화' 버튼이 노출된다. 클릭.

다시 Test 하니, Test alert sent. 메시지가 뜨며 메시지가 슬랙으로 전송이 됐다.

슬랙에서 그라파나에서 온 메시지를 확인할 수 있다!!!

잘 전송이 된 것을 확인했으면 그라파나에서 Save contact point를 클릭하여 저장을 해준다.

2. Alert rules 설정

스프링부트가 up이 아닐경우에 알림을 전송하도록 설정해보겠다.

아래 Expressions에 A값 (스프링부트 up의 개수) 가 1 미만일 경우에 알람을 받는다고 설정하고, Preview 클릭

우측에 초록버튼으로 Normal이 뜨는 것을 확인한다.

다음으로 Set evaluation behavior 설정

폴더와 그룹 각각 만들어준다.

5분마다 평가를 할 것이다.

그룹 만들기

몇 분 동안 상태를 지켜볼 것인지 설정한다. 지금은 10분동안 상태를 지켜보기로 하자.

스프링부트가 꺼지면 10분뒤에 알람이 오는 것이다.

다 설정했으면, 우측 상단에 Save rule and exit 클릭

3. Notification policies 설정

설정을 저장한 뒤에는 위에서 생성한 Default contact point인 'test'를 Notification policy 에 적용

3. 테스트

잘 돌고있는 스프링부트 서버를 꺼보았다.

잠시 후, 1Normal 상태였는데 1Pending 상태로 바뀌었다.

2분뒤에 1firing 으로 바뀌었다.

firing으로 바뀌고 30초 가량 뒤에 슬랙으로 알람이 왔다.

스프링부트를 재시작하니 2분뒤에 다시 해결 알림이 왔다.

끝!

이제 카프카 서버에 문제가 생겼을 때 그라파나 알림을 활용하여 수월한 운영을 해보도록 해야겠다

출처

https://shanepark.tistory.com/430

[SpringBoot] 에러 발생시 Slack으로 알림 보내기

Intro 토이프로젝트로 단순하게 만들어서 배포 해둔 근무 및 스케줄 관리 웹 어플리케이션이 있습니다. 와이프가 저처럼 매일 매일 출근시간이 정해진게 아니고 쉬프트를 받아 근무를 하다 보니,

shanepark.tistory.com

https://shanepark.tistory.com/m/476

Grafana 모니터링중 이상 발생시 슬랙으로 알림 보내기

Intro Oracle Cloud는 1기가 메모리 인스턴스 무료로 제공한다. 그것도 무려 2개나. 몇년간 여러가지 클라우드 옵션들을 찾아봤지만 이정도로 파격적인 조건은 전혀 찾을 수 없었다. 그래서 그 두개의

shanepark.tistory.com

[Docker] Docker 기초 정리

Nellie Kim — Wed, 15 May 2024 17:28:26 +0900

생활코딩의 Docker 입문수업을 정리한 자료입니다.

1. 도커 기초 명령어 정리

도커를 사용할 때 매우 자주 사용하는 명령어이다.

1. 이미지로 컨테이너 만들기

docker run httpd // httpd 이미지를 실행시켜서 컨테이너를 만들어라
docker run --name ws2 httpd // httpd 이미지를 실행시켜서 이름이 ws2인 컨테이너를 만들어라 (하나의 이미지로 여러개의 컨테이너를 생성 가능!)

2. 컨테이너 중지/재실행 시키기

// ws2 이름을 가진 컨테이너 중지 (삭제가 아님)
docker stop ws2 

// 실행중인 컨테이너 확인
docker ps 

// 모든 컨테이너 확인
docker ps -a

// 중지된 컨테이너 ws2 다시 재실행
docker start ws2

3. 컨테이너 로그 확인하기

// ws2 컨테이너의 로그 확인하기
docker logs ws2 

// ws2 컨테이너의 로그 계속 확인하기
docker logs -f ws2

4. 컨테이너 삭제하기

// ws2 컨테이너 삭제하기 (단, 컨테이너가 중지된 상태에서만 가능)
docker rm ws2 

// ws2 컨테이너 강제로 삭제하기 (컨테이너가 중지된 상태에서도 삭제 가능) 
docker rm --force ws2

5. 이미지 삭제하기

// httpd 이미지 삭제하기
docker rmi httpd

// docker 이미지 목록 확인하기
docker images

2. 네트워크

도커를 설치했을 때의 내부 구조는 어떻게 될까? 비교하며 살펴보자.

1. 컴퓨터에 직접 웹서버를 설치했을 경우

2. 도커로 웹서버를 설치했을 경우

도커로 웹서버를 설치한다는 것은 웹서버 컨테이너를 만든다는 것이다. 이 컨테이너는 **도커 호스트**라는 공간 안에 만들어지게 된다.

도커 컨테이너와 도커 호스트는 각각 독립적인 공간이므로 각각 포트를 설정해주어야 한다.

요청이 8000으로 들어오면 도커 호스트를 8000으로, 도커 컨테이너를 80으로 만들어주어야 정상 접속이 가능하다.

이 과정을 포트포워딩 이라고 한다.

3. 포트포워딩 하기

// 요청이 포트 8081로 들어오면 컨테이너의 80번 포트로 연결해주는 ws3 컨테이너를 만들자
docker run --name ws3 -p 8081:80 httpd

3. 호스트와 컨테이너의 파일시스템 연결

1. 호스트와 컨테이너가 연결되지 않았을 때의 문제

컨테이너에 직접 접근해서 파일 시스템 안의 파일을 바꾼다고 치자.

만약에, 컨테이너가 삭제된다면?

힘들게 만든 컨테이너 파일 시스템안의 파일들도 다 사라지게 된다.

그런 현상을 방지하기 위해, 호스트의 파일 시스템과 컨테이너의 파일 시스템을 연결해주는 기능이 있다. 바로 volume!!

2. 볼륨 옵션을 주고 컨테이너 생성하기

docker-compose를 사용하면 volume: 옵션을 사용하지만, 여기서는 바로 docker run -v 옵션으로 명령을 내린다.

// httpd 이미지를 사용해서 컨테이너를 만들어라 (포트연결은 8888:80) (호스트의 파란부분과 컨테이너의 주황부분을 연결해라)
docker run -p 8888:80 -v ~/Desktop/htdocs**:**/usr/local/apache2/htdocs/ httpd

이렇게 하면, 호스트 안의 파일을 수정했다. 느낌표 한 개에서 두 개로 변경했다. 굳이 컨테이너 안으로 힘들게 안들어가도 된다.

바로 수정이 된다.

볼륨 옵션으로 호스트와 컨테이너를 연결해놓으니 이렇게 실시간으로 바로 연동되는 것을 확인할 수 있다!

출처

https://www.youtube.com/watch?v=Ps8HDIAyPD0&list=PLuHgQVnccGMDeMJsGq2O-55Ymtx0IdKWf&index=1

로컬 VM에 Docker 및 Kafka 설치 (docker-compose.yml작성)

Nellie Kim — Mon, 22 Apr 2024 17:06:09 +0900

로컬 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) Topic 생성
3) Producer 생성
4) Consumer 생성
5) 메시지 생성하여 테스트

1. Docker 설치

1) yum 패키지 설치

yum install -y yum-utils

2) 도커 설치

저장소 설정

yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo

너무 오래걸린다면 도커 수동 설치

두번째로 할 때는, 너무 오래걸려서

sudo curl -L -o /etc/yum.repos.d/docker-ce.repo https://download.docker.com/linux/centos/docker-ce.repo

명령어로 수동 설치해주었다...

최신 버전의 Docker Engine을 설치

yum install docker-ce docker-ce-cli containerd.io docker-compose-plugin -y

3) 도커 실행

systemctl start docker

# 서버 실행 시 도커 엔진 자동 실행
systemctl enable docker

4) docker-compose 설치

실행하고자 하는 컨테이너들을 묶어서 한번에 실행할 수 있는 docker-compose를 설치

Kafka Cluster를 구성하는 컨테이너를 한번에 실행시킬 수 있고, 컨테이너의 옵션들을 설정/수정하기 쉬워진다고 한다.

curl -SL https://github.com/docker/compose/releases/download/v2.26.1/docker-compose-linux-x86_64 -o /usr/local/bin/docker-compose

# 실행 권한 부여
chmod +x /usr/local/bin/docker-compose

# 설치가 완료되었는지 도커 컴포즈 버전 확인
docker-compose -v

https://github.com/docker/compose/releases

Releases · docker/compose

Define and run multi-container applications with Docker - docker/compose

github.com

잘 설치가 되었다.

2. Docker Hub에서 카프카 및 카프카UI 이미지 내려받기

Docker Hub 홈페이지에서 검색하여 Image를 찾을 수도 있고, docker search zookeeper , docker search kafka 명령어를 입력하여 찾을 수도 있다.

1) 카프카 이미지 내려받기

pulling 수가 가장 많은 bitnami/kafka와 bitnami/zookeeper 를 pull 받는다.

# kafka image pull
docker pull bitnami/kafka

kafka:2.8.1 같이 명령어 뒤에 버전을 붙이지 않으면, 자동으로 최신버전이 pull 된다.

kafka 최신버전 이미지 pull 완료!

2) 주키퍼 이미지 내려받기

# zookeeper image pull
docker pull bitnami/zookeeper

3) 카프카 UI 이미지 내려받기

마찬가지로, 도커허브에서 제일 인기많은 카프카UI 를 내려받는다.

이 UI 가 없으면 모든 카프카 제어는 모바엑스에서 명령어로 실행해야 하기 때문에 불편하다. 필수로 받을 것!

docker pull provectuslabs/kafka-ui

역시 최신버전으로 pull 받기 완료!

3. docker-compose.yml 설정

Kafka Cluster를 한번에 실행하는 docker-compose는 docker-compose.yml에 명시되어 있는 services를 실행시킨다.

docker-compose.yml에 zookeeper와 kafka container를 구성해보자.

~~(docker-compose.yml 를 어디에 만들어야되나 한참 찾았는데, 그냥 내가 손수 만들면 되는 것이었다... )~~

서버에서 내가 원하는 위치에 docker-compose.yml 파일을 직접 만들면 된다.

나는 app 디렉토리를 생성하고 docker/kafka 디렉토리 안에 docker-compose.yml 파일을 생성해주었다.

이제 만든 파일을 클릭하면 MobaTextEditor가 열리면서 입력할 수 있게 된다.

docker-compose v2.25.0 이상 버전부터는

docker-compose.yml파일의 최상단에 작성된 version : '3' 이 필요없어졌다고 한다.

~~(version: '3' 을 썼더니 에러가 났다.. )~~

version은 삭제해주자.

1) docker-compose.yml 작성

services:
    # Zookeeper 1 서비스 설정입니다.
    zookeeper1:
      image: 'bitnami/zookeeper'
      restart: always
      container_name: 'zookeeper1'
      ports:
        - '2181:2181'  # 호스트와 컨테이너 간의 포트 포워딩: 호스트의 2181 포트와 컨테이너의 2181 포트 간에 통신이 이루어집니다.
      environment:
        - ZOO_SERVER_ID=1  # Zookeeper 서버 ID
         # 리더 선출 및 쿼럼 통신을 위한 서버 ID, 호스트명 및 포트를 지정한 Zookeeper 앙상블 구성
        - ZOO_SERVERS=zookeeper1:2888:3888::1
        - ALLOW_ANONYMOUS_LOGIN=yes  # 익명 로그인 허용 설정
      user: root  # 컨테이너 실행 시 사용할 사용자
  # Kafka 브로커 1
  kafka1:
    image: 'bitnami/kafka'
    container_name: 'kafka1'
    ports:
      - '9092:9092'    # 호스트 포트와 컨테이너 포트 간의 포트 포워딩 설정: 호스트의 9092 포트와 컨테이너의 9092 포트 간에 통신이 이루어짐
      - '8083:8083'    # Kafka Connect REST API 포트
    environment:
      - KAFKA_BROKER_ID=1    # Kafka 브로커 ID
      - KAFKA_CFG_LISTENERS=PLAINTEXT://:9092    # Kafka 브로커 리스너 설정 (Kafka 내부에서 접속할 정보)
      - KAFKA_CFG_ADVERTISED_LISTENERS=PLAINTEXT://192.168.255.255:9092    # 외부에서 접근 가능한 Kafka 브로커 주소
      - KAFKA_CFG_ZOOKEEPER_CONNECT=zookeeper1:2181  #ZooKeeper의 주소를 KAFKA_CFG_ZOOKEEPER_CONNECT 환경 변수에 설정
      - ALLOW_PLAINTEXT_LISTENER=yes    # PLAINTEXT 리스너 허용 설정 (yes : 보안 없이 접속 가능)
      - KAFKA_HEAP_OPTS=-Xmx1G -Xms1G    # Kafka JVM 힙 메모리 설정
      - KAFKA_ENABLE_KRAFT=no    # Kafka KRaft 활성화 여부 설정 (no : Zookeeper 사용/ yes : Zookeeper 사용x)
      - KAFKA_CFG_OFFSETS_TOPIC_REPLICATION_FACTOR=1   # 오프셋 토픽 복제 계수 설정
    depends_on:
  	  - zookeeper1
    user: root    # 컨테이너 실행 시 사용할 사용자

  # Kafka UI
  kafka-ui:
    image: provectuslabs/kafka-ui
    container_name: kafka-ui
    ports:
      #서버의 8989포트를 도커컨테이너의 8080포트와 연결 (이거 하면 뚫림!!기본이 8080제공인데, 내가 8080은 너무 많이 쓰니까 8089로 일부러 바꾼 설정!)
      - "8989:8080"    # 호스트 포트와 컨테이너 포트 간의 포트 포워딩 설정: 호스트의 8989 포트와 컨테이너의 8080 포트 간에 통신이 이루어짐
    restart: always    # 컨테이너 재시작 설정
    environment:
      - KAFKA_CLUSTERS_0_NAME=auto-driving    # Kafka 클러스터 이름 설정
      - KAFKA_CLUSTERS_0_BOOTSTRAPSERVERS=192.168.255.255:9092  # Kafka 클러스터 부트스트랩 서버 설정
      - KAFKA_CLUSTERS_0_ZOOKEEPER=zookeeper1:2181

↓ docker-compose.yml 를 작성하며 궁금했던 점들 정리

1. 여기서 9092, 8083, 8989, 2181, 2888, 3888 포트는 무슨 포트야?

->
포트 9092: 카프카 기본 포트
포트 8083: Kafka Connect의 REST API에 대한 기본 포트 (Kafka Connect : Kafka를 데이터베이스, 파일 시스템, 메시지 대기열과 같은 외부 시스템과 연결하기 위한 프레임워크)
포트 2181: ZooKeeper 클라이언트가 ZooKeeper 앙상블에 연결하는 데 사용하는 클라이언트 포트. ZooKeeper와의 클라이언트 통신을 위한 기본 포트.
포트 2888: 리더 선택을 위해 ZooKeeper 앙상블의 ZooKeeper 서버 간 P2P 통신에 사용되는 포트. 각 ZooKeeper 서버는 이 포트에서 앙상블에 있는 다른 서버의 연결을 수신한다.
포트 3888: ZooKeeper 서버에서 리더 선택 알고리즘을 위해 사용하는 포트. 현재 리더가 실패하거나 연결할 수 없는 경우 새 리더를 선출하는 데 사용된다. 각 ZooKeeper 서버는 리더 선택에 참여하기 위해 이 포트를 수신한다.
포트 8989: 카프카 UI 기본포트가 8080인데, 8080은 자주 사용되니, 내가 임의로 바꿔준 포트이다. (docker-compose.yml 에 작성해서 바꿔주었다)

2. 내가 카프카 브로커를 1개말고 compose.yml에서 더 지정해주면 자동 생성이 되는 건가? 이미지를 받았으니까 알아서 여러개 복제해서 쓰는건가?
-> ㅇㅇ

3. 그러면 포트 번호는 내가 저렇게 KAFKA_CFG_LISTENERS=PLAINTEXT://:9094 이런식으로 지정하면 자동으로 포트가 뚫리나? 아니면 내가 무슨 설정해줘야해? 어디서?

-> 카프카 안에 포트 여는 설정은 따로 없고 compose.yml 여기서만 포트 열어주는 설정을 해주면 된다.
추가로 서버에서 방화벽에 해당 포트 열라고 설정하기 + vm에 포트포워딩으로 열어주기 도 해줘야 한다!

4. KAFKA_CFG_LISTENERS와 KAFKA_CFG_ADVERTISED_LISTENERS의 차이가 뭐야?

-> KAFKA_CFG_LISTENERS는 실제 주소이고 카프카 내부에서 접속할 정보이다.
KAFKA_CFG_ADVERTISED_LISTENERS는 외부에서 접속하기 위한 주소이다.
KAFKA_CFG_LISTENERS로 접속하기 전에 한번 거치는 프록시 서버? 또는 로드밸런서같은 느낌이라고 이해했다... !

5. 부트스트랩 서버 설정은 뭐지?

-> 카프카 클러스터의 '주소' 를 '부트스트랩서버'라고 한다고 한다!

2) VM에서 포트포워딩 해주기

내 노트북이 외부 서버가 아닌 로컬 VM 안의 OS(Rocky)를 바라보고 있기 때문에,

명시적으로 포트 포워딩을 해준다.

내 노트북이 외부 서버가 아니기 때문에 인식을 못할 수도 있기 때문이라고 한다...

(진짜 서버로 할 때는 포트 포워딩 안해줘도 된다고 한다..)

그리고 호스트도 내 노트북 IP가 아니라 모든 IP가 접근 가능하도록 0.0.0.0 으로 수정해주었고,

카프카UI 를 접근하는 호스트는 로컬호스트 IP명인 127.0.0.1 로 수정해주었다.

(내 로컬에서만 접근할 것이기 때문에)

서버 방화벽 설정에도 8989, 8083, 9092, 2181, 2888, 3888 포트는 들어와도 된다고 알려줘야겠지??

4. Kafka Cluster 실행

1) docker-compose 실행

docker-compose를 실행시킬 땐 해당 파일이 있는 경로로 이동해서 실행시키거나 파일을 명시해야 한다.

해당 경로로 이동한 경우

docker-compose up -d #d는 로그 없이 실행하는 명령어

그냥 실행할 경우 파일 명시

docker-compose -f /a/b/c/docker-compose.yml up -d

이제 열심히 만든 컴포즈 파일을 실행시켜주자. 카프카 클러스터가 실행될 수 있게!!

나는 카프카 경로에서 아래 명령어를 쳐봤다.

docker-compose up

완전 잘 된다!

2) docker-compose 실행 확인

아래 명령어로 실행 확인 하면, 내가 설정한 카프카1, 주키퍼1, 카프카UI 컨테이너 3개가 잘 실행이 되는 것이 보인다.

docker ps

카프카UI 를 확인해보니 카프카 브로커도 1개가 생성이 된 것을 확인할 수 있다.

5. Kafka Console Test

Kafka에서 제공하는 Console 명령어로 Producer, Subscriber 동작을 확인해보자.

VM SSH Session 2개 띄운 상태에서 진행하자. 하나는 프로듀서용 하나는 컨슈머용.

1) Container 내부 쉘 접속

Kafka 명령어를 입력하기 위해 Container 내부 쉘에 접속하자.

Cluster로 Broker 간 연결되어 있기 때문에 Kafka 컨테이너가 여러개라면 그 중 원하는 아무 컨테이너에서 진행하면 된다.

docker exec -it kafka1 bash

VM 2개 모두 명령어를 입력해서 컨테이너 내부 쉘에 접속하자.

Kafka에서 제공하는 기능(스크립트로 제공하는 듯)을 아래 경로로 들어가서 확인할 수 있다.

ls /opt/bitnami/kafka/bin/

해당 스크립트는 환경변수로 설정되어 있어서 /opt/bitnami/kafka/bin/ 경로 입력없이 실행시킬 수 있다.

2) Topic 생성

kafka-topics.sh --bootstrap-server kafka1:9092 --create --topic test-kafka

bootstrap-server: Kafka Broker 주소 명시
topic: topic 명

⇒ topic을 생성하지 않아도 Producer가 메시지를 전송하거나 Consumer가 메시지 대기하면 자동으로 생성된다.

나는 아래 명령어를 쳤다.

kafka1:9092 의 카프카 브로커에 test-kafka 라는 토픽을 만들겠다 라는 뜻의 명령어다.

토픽이 만들어졌다.

카프카UI 에서도 토픽이 생성된 것을 확인할 수 있다.

이제, 한 쪽은 Producer 를 생성하고 ,다른 한 쪽은 Consumer 를 생성하여 테스트 해보자.

3) Producer 생성

kafka-console-producer.sh --bootstrap-server kafka1:9092 --topic test-kafka

이 명령을 실행하면 Kafka 콘솔 생성자가 메시지 생성을 시작할 수 있도록 준비한다.

메시지를 입력할 수 있는 프롬프트가 표시된다.

4) Consumer 생성

kafka-console-consumer.sh --bootstrap-server kafka1:9092 --topic test-kafka

컨슈머도 생성이 되었다.

카프카UI 에도 확인할 수 있다.

5) 메시지 생성하여 테스트

Consumer를 실행시켰으면, Producer를 실행시킨 VM에서 > 메시지 입력창이 나타난 것이 확인되면 메시지를 입력합니다.

메시지를 입력했다.

메시지가 Kafka 클러스터의 지정된 Kafka (지금은 test-kafka)로 전송된다.

카프카 UI에서 확인을 해보자.

Topics > 토픽이름 클릭 > Messages 로 들어가면

내가 날린 2개의 메시지를 확인할 수 있다!

메시지가 카프카에 잘 전달이 되었다. 이제 실제 프로젝트에 카프카를 적용해서 사용하면 된다.

카프카의 설정에 따라서 성능이 많이 달라지는 것 같은데,

토픽과 컨슈머, 컨슈머 그룹 등 세세한 설정을 잘 숙지하고 적용해서 앞으로 작업할 프로젝트에 최적화 된 카프카 설정을 적용해 보아야겠다!

[Virtual Box] Virtual Box에 SSH 설치 + MobaXterm으로 원격 접속하기

Nellie Kim — Wed, 17 Apr 2024 11:23:35 +0900

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) 로그인 제한 풀기

로그인 제한도 풀어주자.

#PermitRootLogin prohibit-password 로 되어있는데, 주석을 풀고

PermitRootLogin yes 로 수정해준다.

3) sshd service 재시작

sshd service를 재시작하여 변경사항을 적용해주어야 한다.

systemctl restart sshd.service

2. 방화벽 설정

방화벽 설정도 해주어야 한다.

netstat -tnlp | grep LISTEN

명령어로 현재 LISTEN 상태인 port 를 확인해준다.

아래와 같이 나온다면, net-tools 를 설치해주자.

yum install net-tools

설치가 완료되면, 다시 netstat -tnlp | grep LISTEN 명령어를 입력하여 포트 확인

방화벽에 포트번호를 추가해서 외부에서 접속할 수 있도록 해주어야 한다.

# 22/tcp 방화벽을 해제하고, 
firewall-cmd --permanent --zone=public --add-port=22/tcp 

# 방화벽을 재시작하고, 
firewall-cmd --reload

# sshd service 재시작 
systemctl restart sshd.service

3. 포트포워딩 해주기

1) 현재 로컬 IP 및 가상머신 IP 확인

윈도우 환경의 cmd 창을 열어서 ipconfig로 현재 로컬 ip 주소를 확인

가상머신에

hostname -I

를 입력해서 가상머신에 할당된 ip 도 확인해준다.

2) VM 포트포워딩 설정

이제 VM 관리자 > 설정 > 네트워크 > 고급 > 포트포워딩 클릭

호스트 IP에 내 로컬 IP

게스트 IP에 가상머신 IP 를 입력해준다.

호스트 포트, 게스트 포트도 22번으로 입력해준다.

확인을 누르면 이제 원격 프로그램 사용을 위한 SSH 설정이 끝난다.

이제 MobaXterm 에서 접속을 할 수 있다.

4. MobaXterm 접속

MobaXterm에서 성공적으로 접속이 완료되었다!!! 야호!!!!!

이제 도커 설치와 카프카 설치를 해 볼 예정이다!

출처

https://blog.naver.com/ttaun0204/222851617875

[CentOS 7] CentOS 7 SSH 설정

VirtualBox에서 작업하다 보면 호스트 키, 복사/붙여넣기 등 불편한 부분이 많다 SSH를 통해 접속...

blog.naver.com

https://blog.naver.com/ttaun0204/222851726417

[Tool] MobaXterm 설치 및 로컬 CentOS 7 서버 연결

☝️ 로컬 CentOS 7 서버에 SSH 접속을 위해 MobaXterm을 사용하는 것이므로 게시글 확인 필수 ☝...

blog.naver.com

[Rocky Linux] Virtual Box에 Rocky Linux 9 설치하기

Nellie Kim — Wed, 17 Apr 2024 09:29:08 +0900

앞 포스팅에서 Virtual Box 설치를 해보았다.

↓ Virtual Box 설치 포스팅

https://yeees.tistory.com/453

[Virtual Box] window10에 Virtual Box 설치

회사에서 신규프로젝트를 시작하는데, 백엔드와 Kafka를 담당하기로 했다. 그래서 회사 서버에 Kafka를 설치하기 전에 가상머신에 먼저 설치를 해보려고 한다. 1. Virtual Box 설치하기 https://www.virtualb

yeees.tistory.com

1. Locky Linux 다운로드

이제 이 곳에 우리 회사에서 사용 중인 CentOS와 유사한 (무료인) Locky Linux를 설치해볼 예정이다.

회사 서버에 바로 하기가 겁이 나기 때문에. ...

Locky Linux는 아래 공식 사이트에서 다운로드 한다.

https://rockylinux.org/download

Download Rocky | Rocky Linux

Rocky Linux is an open enterprise Operating System designed to be 100% bug-for-bug compatible with Enterprise Linux.

rockylinux.org

x86_64 > Mininal 클릭

2. Virtual Machine 에 가상머신 새로 만들기

다운로드를 받는 중에, 먼저 가상머신을 만들어보자.

로키 다운로드가 끝나면 여기에 추가만 해주면 되기 때문에..

이름은 Test로 했고, 나머지는 그대로 두고 만들었다.

3. 만든 가상머신에 다운받은 Locky Linux 적용

가상 머신 만들기가 모두 완료되었으면,

만든 가상머신을 클릭 > 설정 > 저장소 > 컨트롤러:IDE 하위의 '비어있음' > 우측 속성의 디스크 모양 클릭 > 디스크 파일 선택..

다운로드가 완료되면, 그 로키 ISO 파일을 선택

확인까지 클릭

4. 적용한 Locky Linux 를 가상머신에서 설치

저장소가 알맞게 적용되었는지 확인 후 > '시작' 클릭

이렇게 실행이 되고, 키보드 방향키로 위아래 왔다갔다 하면 선택이 된다.

맨 위에 Install Rocky Linux 9.3 선택하고 엔터를 누르면, 알아서 설치가 쭉쭉 된다.

설치가 완료되면, 이렇게 언어를 고르라는 창이 뜬다.

한국어 선택하고 > 계속 진행 클릭

다음 화면이 나타나면, 주황색 경고 표시된 3개 요소를 필수 설정해주어야 한다.

먼저 root 비밀번호 설정 > 완료 클릭

root 비밀번호의 알람 아이콘이 사라지고, 사용자 생성도 자동으로 알람 아이콘이 사라졌다.

설치 목적지는 기본으로 두고 > 완료 클릭

이제 모든 알람 아이콘이 사라졌고, '설치 시작' 버튼 클릭!

설치가 완료되었으면 '시스템 재시작' 클릭

5. 가상머신에 Rocky Linux 적용 완료

시스템이 재시작되면, Rocky Linux 구동 화면이 나오고, 마지막에 아래와 같이 로그인 화면이 나타나면 설치 성공!

Password: 위에서 설정한 root 비밀번호를 입력해주면 된다.

이렇게 로컬 리눅스 환경을 만들기 위해, Virtual Box에 Rocky Linux 9.3 설치가 완료되었다!!!

이제 가상머신을 조금 더 편리하게 다루기 위해 MobaXterm 과 연동해보려고 한다.

다음글

https://yeees.tistory.com/455

[Virtual Box] Virtual Box에 SSH 설치 + MobaXterm으로 원격 접속하기

VirtualBox에서 작업하다 보면 호스트 키, 복사/붙여넣기 등 불편한 부분이 많아서, SSH를 통해 접속 프로그램(MobaXterm 등)으로 원격 접속해서 편하게 작업하려고 한다. 1. VM에 SSH 설정접속 프로그

yeees.tistory.com

출처

https://blog.naver.com/ttaun0204/222837338040

[CentOS 7] Virtual Box에 CentOS 7 설치

리눅스 로컬 서버 환경을 위해 설치한 Virtual Box에 CentOS 7을 설치하려고 한다. 왜냐하면,,,,, 현...

blog.naver.com

https://blife.tistory.com/2#recentEntries

Rocky Linux(록키 리눅스) 8.7 을 설치해 봅시다.(1/2)

Rocky Linux 8 Install 록키 리눅스 8 설치하기 설치 준비 편 OS 설치 준비 록키 리눅스를 설치하기 위해 설치에 사용할 최신버전(현재 8.7) ISO를 다운로드해야합니다. Rocky Linux 최신버젼 ISO는 Rocky Linux

blife.tistory.com

https://blife.tistory.com/5

Rocky Linux(록키 리눅스) 8.7 을 설치해 봅시다.(2/2)

Rocky Linux 8 Install 록키 리눅스 8 설치하기 설치편 설치 준비편에서는 설치 이미지 다운로드 및 VirtaulBox 7 설치 그리고 가상머신 환경 설정까지 해보았습니다. 내용이 궁금하시면 1편을 확인하세요

blife.tistory.com

[Virtual Box] window10에 Virtual Box 설치

Nellie Kim — Tue, 16 Apr 2024 09:52:37 +0900

회사에서 신규프로젝트를 시작하는데, 백엔드와 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 on separate pages

www.virtualbox.org

위의 사이트에 들어가서,

가운데 다운로드 큰 버튼 > Windows host 클릭

exe파일이 다운로드가 된다.

설치가 다 되면, 기본 값으로 계속 next 클릭하여 install까지 해주기

설치 완료!

2. Virtual Box 기본 설정

바탕화면에 아이콘이 생긴다.

클릭하여 기본 설정 하기

환경 설정 > 입력 > 가상머신 > 호스트 키 조합 'Ctrl + Art'

기본 설정되어있는 호스트 키의 Right Control은 안되는 경우가 많다고 하여, 다른 키로 바꿔주었다.

여기 까지 하면 완료!

[JAVA/Springboot] open API 사용법(공공데이터)

Nellie Kim — Wed, 3 Apr 2024 15:09:31 +0900

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=서비스키(URL Encode)&numOfRows=3&pageNo=1&type=json

받은 일반인증키(인코딩된것)만 넣고 그대로 주소창에 넣어보았다.

아래와 같이 잘 출력이 된다.

이제 진짜로 백엔드에 넣고 요청을 해보자.

2. 백엔드에서 사용하기

2-1. 컨트롤러

@RestController
@RequestMapping("/diet")
public class DietCtrl {
    @Autowired
    public DietSvc dietSvc;

    // 음식 목록을 오픈 API로 조회
    @GetMapping("/getFoodList")
    public FoodInfoResponseDto getFoodList(@ModelAttribute FoodInfoRequestDto request) {
        return dietSvc.getFoodList(request);
    }
}

2-2. 서비스

@Service
public class DietSvcImpl implements DietSvc {
    @Autowired
    private CallApi callApi;

    @Override
    public FoodInfoResponseDto getFoodList(FoodInfoRequestDto request) {
        return callApi.getRequest(FOOD_NUTRIENT_URL, request, FoodInfoResponseDto.class);
    }
}

2-3. 호출 클래스

오픈API를 호출하는 클래스이다.

@Component
public class CallApi {
    // API 호출에 필요한 인증 키
    public static final String AUTH_ENCODING_KEY = "6pHHT~~~~~2FEjrQ%3D%3D";

    // 식품의약품안전처_식품 영양성분 정보 API 엔드포인트 URL
    public static final String FOOD_NUTRIENT_URL = "https://apis.data.go.kr/1470000/FoodNtrIrdntInfoService/getFoodNtrItdntList";

    private final ObjectMapper objectMapper = new ObjectMapper();

    // 호스트 이름 확인을 수행하는 OkHttpClient 생성
    OkHttpClient.Builder client = new OkHttpClient.Builder().hostnameVerifier(new HostnameVerifier() {
        @Override
        public boolean verify(String hostname, SSLSession session) {
            return true;
        }
    });

    // GET 요청을 수행하고 결과를 객체로 반환하는 메서드
    public <T, C> C getRequest(String url, T requestMap, Class<C> clazz) {
        try {
            // ObjectMapper 설정
            ObjectMapper objectMapper = new ObjectMapper();
            objectMapper.configure(DeserializationFeature.FAIL_ON_UNKNOWN_PROPERTIES, false);
            Map<String, Object> queryParams;

            // 요청 맵이 맵인지 확인하여 변환
            if (requestMap instanceof Map) {
                queryParams = (Map<String, Object>) requestMap;
            } else {
                queryParams = objectMapper.convertValue(requestMap, Map.class);
            }

            // 쿼리 매개변수를 사용하여 URL 생성
            StringBuilder urlString = new StringBuilder(url);
            if (queryParams != null && !queryParams.isEmpty()) {
                urlString.append("?");
                for (Map.Entry<String, Object> entry : queryParams.entrySet()) {
                    urlString.append(entry.getKey())
                            .append("=")
                            .append(entry.getValue())
                            .append("&");
                }
                urlString.deleteCharAt(urlString.length() - 1); // 마지막 '&' 제거
            }
            
            // GET 요청 객체 생성
            Request request = new Request.Builder()
                    .url(urlString.toString()) // 생성된 URL 문자열 사용
                    .get()
                    .addHeader("Connection", "keep-alive")
                    .build();

            // 요청을 수행하고 응답을 받음
            Response response = client.build().newCall(request).execute();

            // 응답 내용을 객체로 변환하여 반환
            return objectMapper.readValue(response.body().string(), clazz);
        } catch (JsonProcessingException e) { 
            log.error("실패 - JsonProcessingException {}", e.getMessage());
            return null;
        } catch (IOException e) {
            log.error("실패 - IOException {}", e.getMessage());
            return null;
        } catch (Exception e) {
            throw new RuntimeException(e);
        }
    }
}

백엔드 포스트맨 호출도 성공적으로 되었고,

프론트에서도 아래와 같이 요청을 했다.

성공적으로 호출이 완료되었다.

프론트에서 오픈API를 사용하여 음식 검색하는 화면을 완성했다.

[vue3] 글 수정 페이지 구현하기 (computed() 사용)

Nellie Kim — Mon, 1 Apr 2024 10:24:07 +0900

등록.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를 잘 받아오나 보자~~~~~등록시 ', selectedFoodInfo.value)
    console.log('intakeGram 얼마나 먹었나요????~~~~~등록시 ', intakeGram.value)
    console.log('등록을 시작한다  ')
    dietDataForPost = {
      patientId: 108, // todo 하드코딩 수정 필요
      foodName: selectedFoodInfo.value?.DESC_KOR,
      calorie: intakeGram.value * (Number(selectedFoodInfo.value?.NUTR_CONT1) / 100),
      weightInGrams: Number(intakeGram.value),
      servingWt: Number(selectedFoodInfo.value?.SERVING_WT),
      carbohydrates: Math.round(intakeGram.value * (Number(selectedFoodInfo.value?.NUTR_CONT2) / 100)),
      protein: Math.round(intakeGram.value * (Number(selectedFoodInfo.value?.NUTR_CONT3) / 100)),
      fat: Math.round(intakeGram.value * (Number(selectedFoodInfo.value?.NUTR_CONT4) / 100)),
      sugar: Math.round(intakeGram.value * (Number(selectedFoodInfo.value?.NUTR_CONT5) / 100)),
      sodium: Math.round(intakeGram.value * (Number(selectedFoodInfo.value?.NUTR_CONT6) / 100)),
      foodInfoDto: selectedFoodInfo.value
    } as DietModel
  } else {
    console.log('수정을 시작한다  ')
    await fetchDetailFoodInfo(selectedFood?.value?.idx as number)
  }

  console.log('dietDataForPost로 이제 데이터 post 할 준비~~~~~!!!', dietDataForPost)
}


/**   3.  식이 데이터를 저장 or 수정하는 함수 */
async function addDietData() {
  let response
  if (!dietDataForPost) return

  // 수정용 데이터가 없으면(일반등록) post, 수정용데이터가 있으면(수정) update 함수 실행
  if (!dietDataPut.foodName) {
    response = await addDiet(dietDataForPost as DietModel)
    console.log('  식이 POST 함수 실행')
  } else {
    response = await updateDietList(dietDataForPost as DietModel)
    console.log('  식이 UPDATE 함수 실행')
  }

  if (response.code !== RETURN_CODE.SUCCESS) {
    console.log('정보를 가져오는 중 오류가 발생했습니다.')
    return
  }

  tokenError(response.code)

  router.replace(`/homeCare/diet/dashboard`)
  console.log('response 등록/수정까지 완료 !!!!!', response)
}


//  4.   항상 감시하는 함수인 computed함수를 사용하여, 수정인지 등록인지 구분해준다.
// dietDataPut.idx가 있으면 수정으로, 아니면 등록.
// (원래는 'dietDataPut'이 있으면 => 이렇게 했는데, 빈객체로 항상 있어서 그냥 idx까지 확인해준것..

const testFlag = computed(() => {
  return dietDataPut.idx ? 'MODIFY' : 'CREATE'
})
</script>

요약

computed()로 항상 감시하는 함수를 만들어서, 해당 변수가 있으면 → 수정, 아니면 등록 ! 이런식으로 판별하자.

[Vue3] 커스텀 달력 구현

Nellie Kim — Mon, 25 Mar 2024 18:15:23 +0900

아래와 같은 커스텀 달력 구현을 완료하였다.

props, emit 을 사용하여 약간 복잡해보이는 로직이어서 조금 어려웠다.

개발은 환자의 일정 리스트의 개수를 달력에 보여주고, 클릭을 하면 해당 일정의 리스트의 상세내역을 보여준다.

주요 컴포넌트는 단 두개이다.

list 컴포넌트(부모) / ExmpleFull(달력, 자식) 컴포넌트.

구현 과정

list 컴포넌트 :

리스트의 수를 가져와서 {날짜 : 상세데이터} 오브젝트로 만들어주고,

달력 컴포넌에 props로 해당 오브젝트를 넘겨주고,

ExampleFull 컴포넌트 :

달력 컴포넌트에 해당 날짜의 상세데이터.length를 읽어서 표시해준다.

클릭 시에는 부모 컴포넌트에 emit으로 날짜를 넘겨주고,

list 컴포넌트 :

부모 컴포넌트는 emit 으로 받은 날짜에 해당하는 예약상세데이터를 출력해준다.

전체 코드이다.

일정 > list 컴포넌트

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { RETURN_CODE } from '@/apis/common'
import { ReserveModel, getReserveScheduleList, getReserveList } from '@/apis/reserve'
import { useRouter } from 'vue-router'

/**
|--------------------------------------------------
|    1. 변수
|--------------------------------------------------
*/
const isRefresh = ref(false)
const router = useRouter()
const reserveType = ref<any>('')
const reserveDate = ref<any>('')
const patientData = ref<any>('') // 환자 정보
const data = ref<ReserveModel>({} as ReserveModel) // 환자 예약 정보
const reservationCounts = ref<any>({}) // 환자 예약 정보 리스트로 저장
const bottom = ref(false) // 바텀 팝업 설정
const popupMsg = ref<any>([]) // 팝업 메시지

/**
|--------------------------------------------------
|   2. 일반 함수
|--------------------------------------------------
*/

/*  1. 토큰 확인 함수 */
function tokenError(code: string) {
  if (/^30002\d{3}$/.test(code)) {
    Snackbar.error('로그인 후 이용 부탁드립니다')
    router.replace('/login')
  }
}

/** 2. 새로고침 함수  */
function handleRefresh() {
  isRefresh.value = false
}

/** 3. 팝업을 오픈하는 함수 */
function openPopup(date: any) {
  console.log('날짜 클릭 이벤트를 수신했습니다. ::', date)
  bottom.value = true

  popupMsg.value = []

  for (const item of reservationCounts.value[date]) {
    popupMsg.value.push(item)
  }
}

/** 4. 날짜 포매팅 함수 */
const formattedDateTime = formatDateTime('2024-03-26T07:07:00')

function formatDateTime(dateTimeString: string): string {
  const dateTime = new Date(dateTimeString)
  const year = dateTime.getFullYear()
  const month = ('0' + (dateTime.getMonth() + 1)).slice(-2)
  const day = ('0' + dateTime.getDate()).slice(-2)
  const hour = ('0' + dateTime.getHours()).slice(-2)
  const minute = ('0' + dateTime.getMinutes()).slice(-2)

  return `${year}.${month}.${day} ${hour}:${minute}`
}

console.log(formattedDateTime) // 출력: "2024. 03. 26 07:07"

/**
|--------------------------------------------------
|   3. fetch 함수
|--------------------------------------------------
*/
/**------------------------
  |   fetch 함수 1
  |------------------------*/
/** 1. 예약 스케줄 리스트 조회 호출 */
async function fetchData() {
  let response
  const params = {
    patientId: 3 // TODO 로그인 사용자로 수정해야 함
  } as ReserveModel

  if (history.state.type) params.reserveType = history.state.type
  if (history.state.type) params.reserveDt = history.state.date

  /** 환자 정보 조회 */
  response = await getReserveScheduleList(params)
  if (response.code !== RETURN_CODE.SUCCESS) {
    console.log('예약 정보를 가져오는 중 오류가 발생했습니다.')
    return
  }
  patientData.value = response.data
  console.log('response- getReserveScheduleList .....::', response.data)

  /** 환자 예약 리스트 조회 */
  response = await getReserveList(params)
  if (response.code !== RETURN_CODE.SUCCESS) {
    console.log('예약 정보를 가져오는 중 오류가 발생했습니다.')
    return
  }

  tokenError(response.code)

  data.value = response.data

  for (const item of data.value.dataList) {
    let dateString = item.reserveDt?.toString()
    reserveDate.value = dateString?.slice(8, 10)

    // 날짜-예약정보 (키-밸류) 오브젝트 만들기
    if (reserveDate.value) {
      if (reservationCounts.value[reserveDate.value]) {
        reservationCounts.value[reserveDate.value].push(item)
      } else {
        reservationCounts.value[reserveDate.value] = [item]
      }
    }
  }

  // 결과 출력
  for (const date in reservationCounts) {
    console.log(`{${date}: ${reservationCounts.value[date]}}`)
  }
}

/**
|--------------------------------------------------
|   4. LifeCycle 함수
|--------------------------------------------------
*/

onMounted(() => {
  fetchData()
})
</script>

<!-- /**
|--------------------------------------------------
|   화면
|--------------------------------------------------
*/ -->

<template>
  <div class="message">
    <var-pull-refresh v-model="isRefresh" @refresh="handleRefresh">
      <app-header title="일정">
        <template #left>
          <app-back />
        </template>
        <template #right>
          <app-side-menu />
        </template>
      </app-header>
      <div class="message-list">
        <div class="message-item">
          <div class="message-item-detail">
            <div class="message-item-detail-header-centered-box">
              <var-paper>{{ patientData?.patientName }}님</var-paper>
              <var-paper>환자 등록번호 : {{ patientData?.patientId }}</var-paper>
            </div>
            <div class="message-item-detail-header-centered-box">
              <ExampleFull
                :reserveDate="reserveDate"
                :reserveType="reserveType"
                :reservationCounts="reservationCounts"
                :data="data"
                @dateEmit="openPopup"
              />
            </div>
            <div class="message-item-detail-description"></div>
          </div>
        </div>
      </div>
    </var-pull-refresh>
  </div>
  <var-button type="primary" block @click="bottom = true" style="display: none"> Below Popup </var-button>

  <router-stack-view />
  <!-- 아래 팝업  -->
  <var-popup position="bottom" v-model:show="bottom">
    <div class="popup-example-block">
      <div v-for="(item, i) in popupMsg" :key="i">
        {{ formatDateTime(item.reserveDt) }} <br />
        <div style="font-weight: bold">
          {{ item.name }}<span style="display: block; text-align: right">{{ item.status }}</span>
        </div>
        {{ item.comment }}<br /><br />
        <hr />
      </div>
    </div>
  </var-popup>
</template>

<style lang="less" scoped>
.message {
  padding: calc(var(--app-bar-height)) 0 0;

  &-list {
    padding: 3px 0;
  }

  &-item {
    position: relative;
    display: flex;
    padding-top: 3px;

    &-avatar {
      flex-shrink: 0;
      margin: 0 18px;
    }

    &-detail {
      width: 100%;
      border-bottom: thin solid var(--divider-color);
      padding-bottom: 5px;

      &-header {
        display: flex;
        justify-content: space-between;
        align-items: center;

        &-name {
          color: var(--app-title-color);
          font-size: 16px;
          width: 190px;
        }

        &-date {
          color: var(--app-subtitle-color);
          font-size: 14px;
          margin-bottom: 2px;
        }

        &-centered-box {
          /* 위아래 여백 조절 */
          margin: 10px;
          padding: 17px;
          border: 1.5px solid rgb(222, 218, 218);
          border-radius: 10px;
          color: rgb(49, 49, 165);
        }
      }

      &-description {
        color: var(--app-subtitle-color);
        font-size: 15px;
        margin-top: 6px;
      }
    }
  }

  .var-steps {
    margin: 10px;
  }

  .var-step {
    margin: 15px;
  }
}
.var-step__vertical-content {
  margin: 15px !important;
  border: 1.5px solid rgb(222, 218, 218) !important;
  border-radius: 10px !important;
}

.var-step__vertical-tag {
  margin: 100px !important; /* 원하는 간격을 지정합니다. */
}

.popup-example-block {
  padding: 24px;
  width: 100%;
  height: 40vh;
  font-size: 12px;
}
</style>

달력 ExampleFull 컴포넌트

<script setup lang="ts">
// Using the publish version, you would do this instead:
// import { CalendarView, CalendarViewHeader, CalendarMath } from "vue-simple-calendar"
import CalendarView from '../vue-simple-calendar/CalendarView.vue'
import CalendarViewHeader from '../vue-simple-calendar/CalendarViewHeader.vue'
import CalendarMath from '../vue-simple-calendar/CalendarMath'
import { ICalendarItem, INormalizedCalendarItem } from './ICalendarItem'
import { onMounted, reactive, defineEmits } from 'vue'

/**
|--------------------------------------------------
|    1. 변수
|--------------------------------------------------
*/

const date = ref('')
const type = ref('')
const count = ref({})

// 현재 달을 가져오는 함수 (선택적으로 시간 및 분도 포함)
const thisMonth = (d: number, h?: number, m?: number): Date => {
  const t = new Date()
  return new Date(t.getFullYear(), t.getMonth(), d, h || 0, m || 0)
}

// 부모 컴포넌트로부터 받은 props 정의
const props = defineProps<{ reserveDate: string; reserveType: string; data: any; reservationCounts: any }>() // 부모Component에서 받은값

// 상태 객체를 반응적으로 정의
interface IExampleState {
  showDate: Date // 캘린더에 표시되는 날짜
  message: string // 상태 메시지
  startingDayOfWeek: number // 주의 시작 요일 (0: Sunday, 1: Monday, ..., 6: Saturday)
  disablePast: boolean // 과거 날짜 사용 금지 여부
  disableFuture: boolean // 미래 날짜 사용 금지 여부
  displayPeriodUom: string // 표시 기간 단위 (예: 'month', 'year')
  displayPeriodCount: number // 표시 기간 개수
  displayWeekNumbers: boolean // 주 번호 표시 여부
  showTimes: boolean // 시간 표시 여부
  selectionStart?: Date // 선택 시작 날짜
  selectionEnd?: Date // 선택 종료 날짜
  newItemTitle: string // 새로운 아이템 제목
  newItemStartDate: string // 새로운 아이템 시작 날짜
  newItemEndDate: string // 새로운 아이템 종료 날짜
  useDefaultTheme: boolean // 기본 테마 사용 여부
  useHolidayTheme: boolean // 휴일 테마 사용 여부
  useTodayIcons: boolean // 오늘 아이콘 사용 여부
  items: ICalendarItem[] // 캘린더에 표시되는 아이템 배열
}

const state = reactive({
  showDate: thisMonth(1), // 캘린더에 표시할 현재 달의 첫 날짜
  message: '', // 상태 메시지
  startingDayOfWeek: 0, // 주의 시작 요일 (0: Sunday, 1: Monday, ..., 6: Saturday)
  disablePast: false, // 과거 날짜 사용 금지 여부
  disableFuture: false, // 미래 날짜 사용 금지 여부
  displayPeriodUom: 'month', // 표시 기간의 단위 (예: 'month', 'year')
  displayPeriodCount: 1, // 표시할 기간의 개수
  displayWeekNumbers: false, // 주 번호 표시 여부
  // showTimes: true, // 시간 표시 여부
  selectionStart: undefined, // 선택 시작 날짜
  selectionEnd: undefined, // 선택 종료 날짜
  newItemTitle: '', // 새로운 아이템 제목
  newItemStartDate: '', // 새로운 아이템 시작 날짜
  newItemEndDate: '', // 새로운 아이템 종료 날짜
  useDefaultTheme: true, // 기본 테마 사용 여부
  // useHolidayTheme: true, // 휴일 테마 사용 여부
  useTodayIcons: true, // 오늘 아이콘 사용 여부
  items: [] as ICalendarItem[]
} as IExampleState)

// 계산된 속성 정의
const themeClasses = computed(() => ({
  'theme-default': state.useDefaultTheme
  // "holiday-us-traditional": state.useHolidayTheme,
  // "holiday-us-official": state.useHolidayTheme,
}))

// 날짜 클래스를 계산하는 메서드 정의
const myDateClasses = (): Record<string, string[]> => {
  // This was added to demonstrate the dateClasses prop. Note in particular that the
  // keys of the object are `yyyy-mm-dd` ISO date strings (not dates), and the values
  // for those keys are strings or string arrays. Keep in mind that your CSS to style these
  // may need to be fairly specific to make it override your theme's styles. See the
  // CSS at the bottom of this component to see how these are styled.
  const o = {} as Record<string, string[]>
  const theFirst = thisMonth(1)
  const ides = [2, 4, 6, 9].includes(theFirst.getMonth()) ? 15 : 13
  const idesDate = thisMonth(ides)
  o[CalendarMath.isoYearMonthDay(idesDate)] = ['ides']
  o[CalendarMath.isoYearMonthDay(thisMonth(21))] = ['do-you-remember', 'the-21st']
  return o
}

// 마운트 후 수행할 작업 정의
onMounted((): void => {
  state.newItemStartDate = CalendarMath.isoYearMonthDay(CalendarMath.today())
  state.newItemEndDate = CalendarMath.isoYearMonthDay(CalendarMath.today())
})

// props 로드 시 수행
watch(props, () => {
  date.value = props.reserveDate
  type.value = props.reserveType
  count.value = props.reservationCounts

  console.log('count.value :::::', count.value)
  for (const date in count.value) {
    state.items.push({
      id: date,
      startDate: thisMonth(Number(date)), // 아이템 시작 날짜 설정
      // title: props.reserveType, // 아이템 제목 설정
      title: count.value[date].length,
      url: 'https://en.wikipedia.org/wiki/Birthday' // 아이템 URL 설정
    })
  }
})

/**
|--------------------------------------------------
|   2. 일반 함수
|--------------------------------------------------
*/

// 부모 컴포넌트에 메시지를 전달하기 위한 이벤트 정의
const emit = defineEmits(['dateEmit'])

// 날짜 클릭을 처리하는 함수
const onClickDay = (d: Date): void => {
  state.selectionStart = undefined
  state.selectionEnd = undefined
  state.message = `You clicked: ${d.toLocaleDateString()}`

  let dateString = d.toString().slice(8, 10) // 26

  for (const date in props.reservationCounts) {
    console.log('  date  ---- ', date)
    if (date === dateString) {
      emit('dateEmit', date)
    }
  }
}

// 항목 클릭을 처리하는 함수
const onClickItem = (item: INormalizedCalendarItem): void => {
  state.message = `You clicked: ${item.title}`

  let dateString = item.originalItem.startDate.toString().slice(8, 10) // 26

  for (const date in props.reservationCounts) {
    console.log('  date  ---- ', date)
    if (date === dateString) {
      emit('dateEmit', date)
    }
  }
}

// 표시할 날짜 설정을 처리하는 함수
const setShowDate = (d: Date): void => {
  state.message = `Changing calendar view to ${d.toLocaleDateString()}`
  state.showDate = d
}

// 선택 설정을 처리하는 함수
const setSelection = (dateRange: Date[]): void => {
  state.selectionEnd = dateRange[1]
  state.selectionStart = dateRange[0]
}

// 선택 완료를 처리하는 함수
const finishSelection = (dateRange: Date[]): void => {
  setSelection(dateRange)
  state.message = `You selected: ${state.selectionStart?.toLocaleDateString() ?? 'n/a'} - ${
    state.selectionEnd?.toLocaleDateString() ?? 'n/a'
  }`
}

// 드롭 이벤트를 처리하는 함수
const onDrop = (item: INormalizedCalendarItem, date: Date): void => {
  state.message = `You dropped ${item.id} on ${date.toLocaleDateString()}`
  // 이전 시작 날짜와 선택한 날짜 사이의 차이를 결정하고,
  // 해당 차이를 시작 및 종료 날짜에 모두 적용하여 항목을 이동합니다.
  const eLength = CalendarMath.dayDiff(item.startDate, date)
  item.originalItem.startDate = CalendarMath.addDays(item.startDate, eLength)
  item.originalItem.endDate = CalendarMath.addDays(item.endDate, eLength)
}

// 항목 추가를 처리하는 함수
// const clickTestAddItem = (): void => {
// 	state.items.push({
// 		startDate: CalendarMath.fromIsoStringToLocalDate(state.newItemStartDate),
// 		endDate: CalendarMath.fromIsoStringToLocalDate(state.newItemEndDate),
// 		title: state.newItemTitle,
// 		id: "e" + Math.random().toString(36).substring(2, 11),
// 	})
// 	state.message = "You added a calendar item!"
// }
</script>

<!-- /**
|--------------------------------------------------
|   화면
|--------------------------------------------------
*/ -->
<template>
  <div id="example-full">
    <div class="calendar-parent">
      <CalendarView
        :items="state.items"
        :show-date="state.showDate"
        :time-format-options="{ hour: 'numeric', minute: '2-digit' }"
        :enable-drag-drop="true"
        :disable-past="state.disablePast"
        :disable-future="state.disableFuture"
        :show-times="state.showTimes"
        :date-classes="myDateClasses()"
        :display-period-uom="state.displayPeriodUom"
        :display-period-count="state.displayPeriodCount"
        :starting-day-of-week="state.startingDayOfWeek"
        :class="themeClasses"
        :period-changed-callback="periodChanged"
        :current-period-label="state.useTodayIcons ? 'icons' : ''"
        :displayWeekNumbers="state.displayWeekNumbers"
        :enable-date-selection="true"
        :selection-start="state.selectionStart"
        :selection-end="state.selectionEnd"
        @date-selection-start="setSelection"
        @date-selection="setSelection"
        @date-selection-finish="finishSelection"
        @drop-on-date="onDrop"
        @click-date="onClickDay"
        @click-item="onClickItem"
      >
        <!-- 달력 헤더  -->
        <template #header="{ headerProps }">
          <CalendarViewHeader :header-props="headerProps" @input="setShowDate" />
        </template>

        <template> </template>
      </CalendarView>
    </div>
  </div>
</template>

<style>
@import 'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css';
/* npm 패키지를 사용하는 앱의 경우 아래 URL은 /node_modules/vue-simple-calendar/dist/css/를 참조해야 합니다 */
@import '/css/gcal.css';
@import '/css/holidays-us.css';
@import '/css/holidays-ue.css';

/* 전체 예제 컨테이너 스타일 */
#example-full {
  display: flex;
  flex-direction: row;
  font-family: Calibri, sans-serif;
  width: 85vw; /* 전체 너비는 화면 너비의 86%로 설정 */
  min-width: 10rem; /* 최소 너비는 30rem으로 설정 */
  max-width: 30rem; /* 최대 너비는 90rem으로 설정 */
  min-height: 75vh; /* 최소 높이는 55rem으로 설정!!!!!!!!!! 여기를 조절해야돼 !!!!*/
  margin-left: auto; /* 왼쪽 여백을 자동으로 설정하여 가운데 정렬 */
  margin-right: auto; /* 오른쪽 여백을 자동으로 설정하여 가운데 정렬 */
}

/* #example-full .calendar-controls {
	margin-right: 1rem;
	min-width: 14rem;
	max-width: 14rem;
} */

/* 달력 부모 컨테이너 스타일 */
#example-full .calendar-parent {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow-x: hidden;
  overflow-y: hidden;
  max-height: 98vh; /* 최대 높이는 화면 높이의 90%로 설정 */
  background-color: white; /* 배경색은 흰색으로 설정 */
}

/* 달력의 각 주의 높이를 조정하는 스타일 */
#example-full .cv-wrapper.period-month.periodCount-2 .cv-week,
#example-full .cv-wrapper.period-month.periodCount-3 .cv-week,
#example-full .cv-wrapper.period-year .cv-week {
  min-height: 7rem; /* 주당 최소 높이는 7rem으로 설정 */
}

/* 특정 날짜에 배경색을 변경하는 예제 - 분홍색 */
/* #example-full .theme-default .cv-day.ides {
  background-color: #ffe0e0;
} */

/* 날짜 요소에 아이콘을 추가하는 예제 */
#example-full .ides .cv-day-number::before {
  content: '\271D';
}

/* #example-full .cv-day.do-you-remember.the-21st .cv-day-number::after {
  content: '\1F30D\1F32C\1F525';
} */
</style>

[Vue3] vue-simple-calendar 라이브러리 적용하기

Nellie Kim — Mon, 25 Mar 2024 17:26:00 +0900

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 (컴포넌트 명은 ExampleSimple / ExampleFull)

3. 원하는 달력 모양으로 커스텀하기

내가 원하는 캘린더 선택 후 ExampleFull 입맛에 맞게 바꿔준다.

원래 프로젝트는 더럽히기 싫어서 클론 받은 프로젝트에서 수정해주었다.

나는 아래와 같이 바꿨다.

4. 현재 프로젝트로 가져오기

그리고 원래 내 프로젝트에 이 프로젝트(달력라이브러리)를 옮겨와야한다.

일단,

public/css

src

두개 패키지를 복붙했다.

public/css 는 같은 경로에,

src는 원래 내 프로젝트의 component에 달력패키지를 아예 하나 만들어서 src안의 파일을 다 넣어주었다.

의존성도 옮겨와야해서,

package.json 안의 의존성을 복붙해주었다.

그냥 긁어서 오면, 중복된 부분은 vscode가 표시해주니까 그냥 복붙해서 중복된 의존성은 지워주자.

npm install 명령어가 해당 프로젝트에 있는 package.json을 읽어서 필요한 의존성은 알아서 설치해준다.

나는 pnpm 을 사용했기 때문에 ,

pnpm install 명령어를 입력해주었다.

잘 가져와졌다!

[트러블슈팅/ Vue3] 컴포넌트에 데이터 바인딩이 되지 않는 문제(feat. ref, watch)

Nellie Kim — Mon, 25 Mar 2024 12:24:06 +0900

문제 상황

달력 컴포넌트(ExampleFull)에 날짜와 타입을 전달하여, 달력에 보여주고 싶었다.

26일자에 '입원'이라는 문구가 떠야하는데 아래와 같이 보였다.

원했던 화면 / 문제 화면

기존의 일정 list 뷰 코드

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { RETURN_CODE } from '@/apis/common'
import { ReserveModel, ReserveScheduleModel, getReserveScheduleList } from '@/apis/reserve'
import { useRouter } from 'vue-router'
import { Dialog } from '@varlet/ui'

/**
|--------------------------------------------------
|    1. 변수
|--------------------------------------------------
*/
const isRefresh = ref(false)
const data = ref<ReserveModel>({} as ReserveModel)
const scheList = ref<ReserveScheduleModel[] | undefined>() // 예약 데이터 안의 reserveScheduleList
const router = useRouter()
const bottom = ref(false)

const isPopup = ref(false)

const reserveType = ref<any>('')
const reserveDate = ref<any>('')
const patientData = ref<any>('')

/**
|--------------------------------------------------
|   2. 일반 함수
|--------------------------------------------------
*/

/** 1. 상세페이지로 이동하는 함수 */
// function goToDetail(idx: any) {
//   if (idx !== undefined) {
//     // 상세페이지 이동
//     router.push(`/hospital/checkinout/${idx}`)
//   } else {
//     // ID가 없는 경우 처리할 로직 추가
//     console.error('Item ID is undefined!')
//   }
// }

function goToDetail() {
  isPopup.value = true
  console.log('ddddddd')
}

function goToDetail2() {
  isPopup.value = true
  openPopup()
  console.log('ddddddd')
}

/** .
 *  토큰 확인 함수 */
function tokenError(code: string) {
  if (/^30002\d{3}$/.test(code)) {
    Snackbar.error('로그인 후 이용 부탁드립니다')
    router.replace('/login')
  }
}

/** 3. 새로고침 함수  */
function handleRefresh() {
  isRefresh.value = false
}

/** 8. 팝업을 오픈하는 함수 */
function openPopup() {
  Dialog({
    title: '2024.10.10',
    message: '건강검진'
  })
}

/**
|--------------------------------------------------
|   3. fetch 함수
|--------------------------------------------------
*/
/**------------------------
  |   fetch 함수 1
  |------------------------*/
/** 1. 예약 스케줄 리스트 조회 호출 */
async function fetchData() {
  const params = {
    reserveType: 'INPATIENT' // 입원 예약 환자만 조회
  } as ReserveModel

  if (history.state.type) params.reserveType = history.state.type
  if (history.state.type) params.reserveDt = history.state.date

  const response = await getReserveScheduleList(params)
  if (response.code !== RETURN_CODE.SUCCESS) {
    console.log('예약 정보를 가져오는 중 오류가 발생했습니다.')
    return
  }

  tokenError(response.code)

  data.value = response.data

  patientData.value = data.value

  scheList.value = data.value.reserveScheduleList

  console.log('data,,,,,', data.value)

  console.log('data,,,,,예약일 :: ', data.value.reserveDt)

  let dateString = data.value.reserveDt?.toString()

  reserveDate.value = dateString?.slice(8, 10)
  console.log('data,,,,,프롭스용 예약일 :: ', reserveDate.value) // 출력: 29

  console.log('data,,,,,프롭스용 예약타입 :: ', data.value.reserveType)

  reserveType.value = data.value.reserveType

  console.log('reserveScheduleList,,,,,,', scheList.value)
}

/**
|--------------------------------------------------
|   4. LifeCycle 함수
|--------------------------------------------------
*/

onMounted(() => {
  fetchData()
})
</script>

<!-- /**
|--------------------------------------------------
|   화면
|--------------------------------------------------
*/ -->

<template>
  <div class="message">
    <var-pull-refresh v-model="isRefresh" @refresh="handleRefresh">
      <app-header title="일정">
        <template #left>
          <app-back />
        </template>
        <template #right>
          <app-side-menu />
        </template>
      </app-header>
      <div class="message-list">
        <div class="message-item">
          <div class="message-item-detail">
            <div class="message-item-detail-header-centered-box">
              <var-paper>{{ data?.patientName }}님</var-paper>
              <var-paper>환자 등록번호 : {{ data?.patientId }}</var-paper>
            </div>
            <div class="message-item-detail-header-centered-box">
              <ExampleFull
                :reserveDate="reserveDate"
                :reserveType="reserveType"
                :data="data"
                @toggle-drawer="goToDetail2"
              />
            </div>
            <div class="message-item-detail-description"></div>
          </div>
        </div>
      </div>
    </var-pull-refresh>
  </div>
  <!-- <TestComponent :reserveDate="reserveDate" :reserveType="reserveType" /> -->
  <var-button type="primary" block @click="goToDetail"></var-button>

  <router-stack-view />
</template>

<style lang="less" scoped>
.message {
  padding: calc(var(--app-bar-height)) 0 0;

  &-list {
    padding: 3px 0;
  }

  &-item {
    position: relative;
    display: flex;
    padding-top: 3px;

    &-avatar {
      flex-shrink: 0;
      margin: 0 18px;
    }

    &-detail {
      width: 100%;
      border-bottom: thin solid var(--divider-color);
      padding-bottom: 5px;

      &-header {
        display: flex;
        justify-content: space-between;
        align-items: center;

        &-name {
          color: var(--app-title-color);
          font-size: 16px;
          width: 190px;
        }

        &-date {
          color: var(--app-subtitle-color);
          font-size: 14px;
          margin-bottom: 2px;
        }

        &-centered-box {
          /* 위아래 여백 조절 */
          margin: 10px;
          padding: 17px;
          border: 1.5px solid rgb(222, 218, 218);
          border-radius: 10px;
          color: rgb(49, 49, 165);
        }
      }

      &-description {
        color: var(--app-subtitle-color);
        font-size: 15px;
        margin-top: 6px;
      }
    }
  }

  .var-steps {
    margin: 10px;
  }

  .var-step {
    margin: 15px;
  }
}
.var-step__vertical-content {
  margin: 15px !important;
  border: 1.5px solid rgb(222, 218, 218) !important;
  border-radius: 10px !important;
}

.var-step__vertical-tag {
  margin: 100px !important; /* 원하는 간격을 지정합니다. */
}
</style>

기존의 달력 컴포넌트 뷰

<script setup lang="ts">
// Using the publish version, you would do this instead:
// import { CalendarView, CalendarViewHeader, CalendarMath } from "vue-simple-calendar"
import CalendarView from '../vue-simple-calendar/CalendarView.vue'
import CalendarViewHeader from '../vue-simple-calendar/CalendarViewHeader.vue'
import CalendarMath from '../vue-simple-calendar/CalendarMath'
import { ICalendarItem, INormalizedCalendarItem } from './ICalendarItem'
import { onMounted, reactive, defineEmits } from 'vue'

/**
|--------------------------------------------------
|    1. 변수
|--------------------------------------------------
*/

const date = ref('')
const type = ref('')

// 현재 달을 가져오는 함수 (선택적으로 시간 및 분도 포함)
const thisMonth = (d: number, h?: number, m?: number): Date => {
  const t = new Date()
  return new Date(t.getFullYear(), t.getMonth(), d, h || 0, m || 0)
}

// 부모 컴포넌트로부터 받은 props 정의
const props = defineProps<{ reserveDate: string; reserveType: string; data: any }>() // 부모Component에서 받은값
console.log('props!!!!!!!!!!!!!!!!!!!!!!!!!!!!!  ', props)
console.log('props.reserveDate!!!!!!!!!!!!!!!', date.value)
console.log('props.reserveType!!!!!!!!!!!!!!!      ', props.reserveType)
console.log('props.data~~~~~~~~~~~~~~ ~~~~~~ ~~~~ ~~~~~~~~~ ~~~~~ ', props.data)

// 상태 객체를 반응적으로 정의
interface IExampleState {
  showDate: Date // 캘린더에 표시되는 날짜
  message: string // 상태 메시지
  startingDayOfWeek: number // 주의 시작 요일 (0: Sunday, 1: Monday, ..., 6: Saturday)
  disablePast: boolean // 과거 날짜 사용 금지 여부
  disableFuture: boolean // 미래 날짜 사용 금지 여부
  displayPeriodUom: string // 표시 기간 단위 (예: 'month', 'year')
  displayPeriodCount: number // 표시 기간 개수
  displayWeekNumbers: boolean // 주 번호 표시 여부
  showTimes: boolean // 시간 표시 여부
  selectionStart?: Date // 선택 시작 날짜
  selectionEnd?: Date // 선택 종료 날짜
  newItemTitle: string // 새로운 아이템 제목
  newItemStartDate: string // 새로운 아이템 시작 날짜
  newItemEndDate: string // 새로운 아이템 종료 날짜
  useDefaultTheme: boolean // 기본 테마 사용 여부
  useHolidayTheme: boolean // 휴일 테마 사용 여부
  useTodayIcons: boolean // 오늘 아이콘 사용 여부
  items: ICalendarItem[] // 캘린더에 표시되는 아이템 배열
}

const state = reactive({
  showDate: thisMonth(1), // 캘린더에 표시할 현재 달의 첫 날짜
  message: '', // 상태 메시지
  startingDayOfWeek: 0, // 주의 시작 요일 (0: Sunday, 1: Monday, ..., 6: Saturday)
  disablePast: false, // 과거 날짜 사용 금지 여부
  disableFuture: false, // 미래 날짜 사용 금지 여부
  displayPeriodUom: 'month', // 표시 기간의 단위 (예: 'month', 'year')
  displayPeriodCount: 1, // 표시할 기간의 개수
  displayWeekNumbers: false, // 주 번호 표시 여부
  // showTimes: true, // 시간 표시 여부
  selectionStart: undefined, // 선택 시작 날짜
  selectionEnd: undefined, // 선택 종료 날짜
  newItemTitle: '', // 새로운 아이템 제목
  newItemStartDate: '', // 새로운 아이템 시작 날짜
  newItemEndDate: '', // 새로운 아이템 종료 날짜
  useDefaultTheme: true, // 기본 테마 사용 여부
  // useHolidayTheme: true, // 휴일 테마 사용 여부
  useTodayIcons: true, // 오늘 아이콘 사용 여부
  items: [
    {
      startDate: thisMonth(Number(date.value)), // 아이템 시작 날짜 설정
      // title: props.reserveType, // 아이템 제목 설정
      title: date.value,
      url: 'https://en.wikipedia.org/wiki/Birthday' // 아이템 URL 설정
    }
    // {
    // 	id: "e11",
    // 	startDate: thisMonth(29),
    // 	title: "수술",
    // },
  ] as ICalendarItem[] // 캘린더에 표시할 아이템 배열
} as IExampleState)

// const userLocale = computed((): string => CalendarMath.getDefaultBrowserLocale())

// const dayNames = computed((): string[] => CalendarMath.getFormattedWeekdayNames(userLocale.value, "long", 0))

// 계산된 속성 정의
const themeClasses = computed(() => ({
  'theme-default': state.useDefaultTheme
  // "holiday-us-traditional": state.useHolidayTheme,
  // "holiday-us-official": state.useHolidayTheme,
}))

// 날짜 클래스를 계산하는 메서드 정의
const myDateClasses = (): Record<string, string[]> => {
  // This was added to demonstrate the dateClasses prop. Note in particular that the
  // keys of the object are `yyyy-mm-dd` ISO date strings (not dates), and the values
  // for those keys are strings or string arrays. Keep in mind that your CSS to style these
  // may need to be fairly specific to make it override your theme's styles. See the
  // CSS at the bottom of this component to see how these are styled.
  const o = {} as Record<string, string[]>
  const theFirst = thisMonth(1)
  const ides = [2, 4, 6, 9].includes(theFirst.getMonth()) ? 15 : 13
  const idesDate = thisMonth(ides)
  o[CalendarMath.isoYearMonthDay(idesDate)] = ['ides']
  o[CalendarMath.isoYearMonthDay(thisMonth(21))] = ['do-you-remember', 'the-21st']
  return o
}

// 마운트 후 수행할 작업 정의
onMounted((): void => {
  state.newItemStartDate = CalendarMath.isoYearMonthDay(CalendarMath.today())
  state.newItemEndDate = CalendarMath.isoYearMonthDay(CalendarMath.today())
})


... 생략

해결 방법

달력 컴포넌트안의 props 값이 뜨지 않는 이유는,

props 값을 달력 컴포넌트가 전달받기도 전에 데이터바인딩을 시도하기 때문이다.

props 값을 달력 컴포넌트가 제대로 전달 받아서 바인딩을 시키려면 어떻게 해야할까?

1. ref 로 변수 선언

const date = ref('') // 추가  
const type = ref('') // 추가

2. 데이터 바인딩 시 필요한 변수 state 값을 원래 부분에서 지우고,

const state = reactive({
  showDate: thisMonth(1), // 캘린더에 표시할 현재 달의 첫 날짜
  message: '', // 상태 메시지
  startingDayOfWeek: 0, // 주의 시작 요일 (0: Sunday, 1: Monday, ..., 6: Saturday)
  disablePast: false, // 과거 날짜 사용 금지 여부
  disableFuture: false, // 미래 날짜 사용 금지 여부
  displayPeriodUom: 'month', // 표시 기간의 단위 (예: 'month', 'year')
  displayPeriodCount: 1, // 표시할 기간의 개수
  displayWeekNumbers: false, // 주 번호 표시 여부
  // showTimes: true, // 시간 표시 여부
  selectionStart: undefined, // 선택 시작 날짜
  selectionEnd: undefined, // 선택 종료 날짜
  newItemTitle: '', // 새로운 아이템 제목
  newItemStartDate: '', // 새로운 아이템 시작 날짜
  newItemEndDate: '', // 새로운 아이템 종료 날짜
  useDefaultTheme: true, // 기본 테마 사용 여부
  // useHolidayTheme: true, // 휴일 테마 사용 여부
  useTodayIcons: true, // 오늘 아이콘 사용 여부
  // items: [ // 여기 지우고  
  //   {
  //     startDate: thisMonth(Number(date.value)), // 아이템 시작 날짜 설정
  //     // title: props.reserveType, // 아이템 제목 설정
  //     title: date.value,
  //     url: 'https://en.wikipedia.org/wiki/Birthday' // 아이템 URL 설정
  //   }
  //   // {
  //   // 	id: "e11",
  //   // 	startDate: thisMonth(29),
  //   // 	title: "수술",
  //   // },
  // ] as ICalendarItem[] // 캘린더에 표시할 아이템 배열
} as IExampleState)

3. watch 함수 추가해서 props가 변경이 될 때마다 다시 바인딩을 시도했다.

// 이거 추가  
watch(props, () => {
  date.value = props.reserveDate
  type.value = props.reserveType
  state.items = [
    {
      id: 'e1',
      startDate: thisMonth(Number(date.value)), // 아이템 시작 날짜 설정
      // title: props.reserveType, // 아이템 제목 설정
      title: type.value,
      url: 'https://en.wikipedia.org/wiki/Birthday' // 아이템 URL 설정
    }
  ]
  console.log('state============?????????????', state)
})

참고로,

state.items를 추가해주면 바인딩이 되는 이유는

아래처럼 달력컴포넌트 안에 또 <CalendarView>라는 컴포넌트가 있고,

거기서 items 를 props로 전달해주기 때문에 가능한거겠지!

<template>
  <div id="example-full">
    <div class="calendar-parent">
      <CalendarView
        :items="state.items"
        :show-date="state.showDate"
        :time-format-options="{ hour: 'numeric', minute: '2-digit' }"
        :enable-drag-drop="true"
        :disable-past="state.disablePast"
        :disable-future="state.disableFuture"
        :show-times="state.showTimes"
        :date-classes="myDateClasses()"
        :display-period-uom="state.displayPeriodUom"
        :display-period-count="state.displayPeriodCount"
        :starting-day-of-week="state.startingDayOfWeek"
        :class="themeClasses"
        :period-changed-callback="periodChanged"
        :current-period-label="state.useTodayIcons ? 'icons' : ''"
        :displayWeekNumbers="state.displayWeekNumbers"
        :enable-date-selection="true"
        :selection-start="state.selectionStart"
        :selection-end="state.selectionEnd"
        @date-selection-start="setSelection"
        @date-selection="setSelection"
        @date-selection-finish="finishSelection"
        @drop-on-date="onDrop"
        @click-date="onClickDay"
        @click-item="onClickItem"
      >
        <!-- 달력 헤더  -->
        <template #header="{ headerProps }">
          <CalendarViewHeader :header-props="headerProps" @input="setShowDate" />
        </template>

        <template> </template>
      </CalendarView>
    </div>
  </div>
</template>

이렇게 하면,

콘솔창에 이렇게 아주 잘 찍히고

원했던 달력에 데이터 바인딩도 잘 된다!

해결된 전체 코드

list뷰 코드는 수정되지 않았고, 달력 컴포넌트 뷰 코드만 수정되었다.

<script setup lang="ts">
// Using the publish version, you would do this instead:
// import { CalendarView, CalendarViewHeader, CalendarMath } from "vue-simple-calendar"
import CalendarView from '../vue-simple-calendar/CalendarView.vue'
import CalendarViewHeader from '../vue-simple-calendar/CalendarViewHeader.vue'
import CalendarMath from '../vue-simple-calendar/CalendarMath'
import { ICalendarItem, INormalizedCalendarItem } from './ICalendarItem'
import { onMounted, reactive, defineEmits } from 'vue'

/**
|--------------------------------------------------
|    1. 변수
|--------------------------------------------------
*/

const date = ref('') // 추가  
const type = ref('') // 추가  

// 현재 달을 가져오는 함수 (선택적으로 시간 및 분도 포함)
const thisMonth = (d: number, h?: number, m?: number): Date => {
  const t = new Date()
  return new Date(t.getFullYear(), t.getMonth(), d, h || 0, m || 0)
}

// 부모 컴포넌트로부터 받은 props 정의
const props = defineProps<{ reserveDate: string; reserveType: string; data: any }>() // 부모Component에서 받은값
console.log('props!!!!!!!!!!!!!!!!!!!!!!!!!!!!!  ', props)
console.log('props.reserveDate!!!!!!!!!!!!!!!', date.value)
console.log('props.reserveType!!!!!!!!!!!!!!!      ', props.reserveType)
console.log('props.data~~~~~~~~~~~~~~ ~~~~~~ ~~~~ ~~~~~~~~~ ~~~~~ ', props.data)

// 상태 객체를 반응적으로 정의
interface IExampleState {
  showDate: Date // 캘린더에 표시되는 날짜
  message: string // 상태 메시지
  startingDayOfWeek: number // 주의 시작 요일 (0: Sunday, 1: Monday, ..., 6: Saturday)
  disablePast: boolean // 과거 날짜 사용 금지 여부
  disableFuture: boolean // 미래 날짜 사용 금지 여부
  displayPeriodUom: string // 표시 기간 단위 (예: 'month', 'year')
  displayPeriodCount: number // 표시 기간 개수
  displayWeekNumbers: boolean // 주 번호 표시 여부
  showTimes: boolean // 시간 표시 여부
  selectionStart?: Date // 선택 시작 날짜
  selectionEnd?: Date // 선택 종료 날짜
  newItemTitle: string // 새로운 아이템 제목
  newItemStartDate: string // 새로운 아이템 시작 날짜
  newItemEndDate: string // 새로운 아이템 종료 날짜
  useDefaultTheme: boolean // 기본 테마 사용 여부
  useHolidayTheme: boolean // 휴일 테마 사용 여부
  useTodayIcons: boolean // 오늘 아이콘 사용 여부
  items: ICalendarItem[] // 캘린더에 표시되는 아이템 배열
}

const state = reactive({
  showDate: thisMonth(1), // 캘린더에 표시할 현재 달의 첫 날짜
  message: '', // 상태 메시지
  startingDayOfWeek: 0, // 주의 시작 요일 (0: Sunday, 1: Monday, ..., 6: Saturday)
  disablePast: false, // 과거 날짜 사용 금지 여부
  disableFuture: false, // 미래 날짜 사용 금지 여부
  displayPeriodUom: 'month', // 표시 기간의 단위 (예: 'month', 'year')
  displayPeriodCount: 1, // 표시할 기간의 개수
  displayWeekNumbers: false, // 주 번호 표시 여부
  // showTimes: true, // 시간 표시 여부
  selectionStart: undefined, // 선택 시작 날짜
  selectionEnd: undefined, // 선택 종료 날짜
  newItemTitle: '', // 새로운 아이템 제목
  newItemStartDate: '', // 새로운 아이템 시작 날짜
  newItemEndDate: '', // 새로운 아이템 종료 날짜
  useDefaultTheme: true, // 기본 테마 사용 여부
  // useHolidayTheme: true, // 휴일 테마 사용 여부
  useTodayIcons: true, // 오늘 아이콘 사용 여부
  // items: [ // 여기 지우고  
  //   {
  //     startDate: thisMonth(Number(date.value)), // 아이템 시작 날짜 설정
  //     // title: props.reserveType, // 아이템 제목 설정
  //     title: date.value,
  //     url: 'https://en.wikipedia.org/wiki/Birthday' // 아이템 URL 설정
  //   }
  //   // {
  //   // 	id: "e11",
  //   // 	startDate: thisMonth(29),
  //   // 	title: "수술",
  //   // },
  // ] as ICalendarItem[] // 캘린더에 표시할 아이템 배열
} as IExampleState)

// const userLocale = computed((): string => CalendarMath.getDefaultBrowserLocale())

// const dayNames = computed((): string[] => CalendarMath.getFormattedWeekdayNames(userLocale.value, "long", 0))

// 계산된 속성 정의
const themeClasses = computed(() => ({
  'theme-default': state.useDefaultTheme
  // "holiday-us-traditional": state.useHolidayTheme,
  // "holiday-us-official": state.useHolidayTheme,
}))

// 날짜 클래스를 계산하는 메서드 정의
const myDateClasses = (): Record<string, string[]> => {
  // This was added to demonstrate the dateClasses prop. Note in particular that the
  // keys of the object are `yyyy-mm-dd` ISO date strings (not dates), and the values
  // for those keys are strings or string arrays. Keep in mind that your CSS to style these
  // may need to be fairly specific to make it override your theme's styles. See the
  // CSS at the bottom of this component to see how these are styled.
  const o = {} as Record<string, string[]>
  const theFirst = thisMonth(1)
  const ides = [2, 4, 6, 9].includes(theFirst.getMonth()) ? 15 : 13
  const idesDate = thisMonth(ides)
  o[CalendarMath.isoYearMonthDay(idesDate)] = ['ides']
  o[CalendarMath.isoYearMonthDay(thisMonth(21))] = ['do-you-remember', 'the-21st']
  return o
}

// 마운트 후 수행할 작업 정의
onMounted((): void => {
  state.newItemStartDate = CalendarMath.isoYearMonthDay(CalendarMath.today())
  state.newItemEndDate = CalendarMath.isoYearMonthDay(CalendarMath.today())
})

// 이거 추가  
watch(props, () => {
  date.value = props.reserveDate
  type.value = props.reserveType
  state.items = [
    {
      id: 'e1',
      startDate: thisMonth(Number(date.value)), // 아이템 시작 날짜 설정
      // title: props.reserveType, // 아이템 제목 설정
      title: type.value,
      url: 'https://en.wikipedia.org/wiki/Birthday' // 아이템 URL 설정
    }
  ]
  console.log('state===================///////////////////////////////////??????????????', state)
})

/**
|--------------------------------------------------
|   2. 일반 함수
|--------------------------------------------------
*/

// 기간 변경을 처리하는 함수
const periodChanged = (): void => {
  // 이 정보를 사용하여 아무 작업도 수행하지 않습니다.
  // 단순히 표시 범위의 변경을 수신하고 이에 반응하는 방법을 보여주기 위해 메서드를 포함합니다.
  //console.log(eventSource)
  //console.log(range)
}

// 부모 컴포넌트에 메시지를 전달하기 위한 이벤트 정의
const emit = defineEmits(['toggle-drawer'])

// 날짜 클릭을 처리하는 함수
const onClickDay = (d: Date): void => {
  state.selectionStart = undefined
  state.selectionEnd = undefined
  state.message = `You clicked: ${d.toLocaleDateString()}`

  let dateString = d.toString().slice(8, 10) // 26
  console.log('dateString~~~~~~ ~~~~ ~~~~~ ~~~ ~ ~~ ~~ ~ ~ ', dateString)

  if (props.reserveDate === dateString) {
    emit('toggle-drawer')
  }
}

// 항목 클릭을 처리하는 함수
const onClickItem = (item: INormalizedCalendarItem): void => {
  state.message = `You clicked: ${item.title}`

  console.log('item~~~~~~~~~~~~~~~~~~~~~~~~~ ', item)
}

// 표시할 날짜 설정을 처리하는 함수
const setShowDate = (d: Date): void => {
  state.message = `Changing calendar view to ${d.toLocaleDateString()}`
  state.showDate = d
}

// 선택 설정을 처리하는 함수
const setSelection = (dateRange: Date[]): void => {
  state.selectionEnd = dateRange[1]
  state.selectionStart = dateRange[0]
}

// 선택 완료를 처리하는 함수
const finishSelection = (dateRange: Date[]): void => {
  setSelection(dateRange)
  state.message = `You selected: ${state.selectionStart?.toLocaleDateString() ?? 'n/a'} - ${
    state.selectionEnd?.toLocaleDateString() ?? 'n/a'
  }`
}

// 드롭 이벤트를 처리하는 함수
const onDrop = (item: INormalizedCalendarItem, date: Date): void => {
  state.message = `You dropped ${item.id} on ${date.toLocaleDateString()}`
  // 이전 시작 날짜와 선택한 날짜 사이의 차이를 결정하고,
  // 해당 차이를 시작 및 종료 날짜에 모두 적용하여 항목을 이동합니다.
  const eLength = CalendarMath.dayDiff(item.startDate, date)
  item.originalItem.startDate = CalendarMath.addDays(item.startDate, eLength)
  item.originalItem.endDate = CalendarMath.addDays(item.endDate, eLength)
}

// 항목 추가를 처리하는 함수
// const clickTestAddItem = (): void => {
// 	state.items.push({
// 		startDate: CalendarMath.fromIsoStringToLocalDate(state.newItemStartDate),
// 		endDate: CalendarMath.fromIsoStringToLocalDate(state.newItemEndDate),
// 		title: state.newItemTitle,
// 		id: "e" + Math.random().toString(36).substring(2, 11),
// 	})
// 	state.message = "You added a calendar item!"
// }
</script>

<!-- /**
|--------------------------------------------------
|   화면
|--------------------------------------------------
*/ -->
<template>
  <div id="example-full">
    <div class="calendar-parent">
      <CalendarView
        :items="state.items"
        :show-date="state.showDate"
        :time-format-options="{ hour: 'numeric', minute: '2-digit' }"
        :enable-drag-drop="true"
        :disable-past="state.disablePast"
        :disable-future="state.disableFuture"
        :show-times="state.showTimes"
        :date-classes="myDateClasses()"
        :display-period-uom="state.displayPeriodUom"
        :display-period-count="state.displayPeriodCount"
        :starting-day-of-week="state.startingDayOfWeek"
        :class="themeClasses"
        :period-changed-callback="periodChanged"
        :current-period-label="state.useTodayIcons ? 'icons' : ''"
        :displayWeekNumbers="state.displayWeekNumbers"
        :enable-date-selection="true"
        :selection-start="state.selectionStart"
        :selection-end="state.selectionEnd"
        @date-selection-start="setSelection"
        @date-selection="setSelection"
        @date-selection-finish="finishSelection"
        @drop-on-date="onDrop"
        @click-date="onClickDay"
        @click-item="onClickItem"
      >
        <!-- 달력 헤더 잠깐 주석 .. -->
        <template #header="{ headerProps }">
          <CalendarViewHeader :header-props="headerProps" @input="setShowDate" />
        </template>

        <template> </template>
      </CalendarView>
    </div>
  </div>
</template>

<style>
@import 'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css';
/* npm 패키지를 사용하는 앱의 경우 아래 URL은 /node_modules/vue-simple-calendar/dist/css/를 참조해야 합니다 */
@import '/css/gcal.css';
@import '/css/holidays-us.css';
@import '/css/holidays-ue.css';

/* 전체 예제 컨테이너 스타일 */
#example-full {
  display: flex;
  flex-direction: row;
  font-family: Calibri, sans-serif;
  width: 86vw; /* 전체 너비는 화면 너비의 86%로 설정 */
  min-width: 30rem; /* 최소 너비는 30rem으로 설정 */
  max-width: 90rem; /* 최대 너비는 90rem으로 설정 */
  min-height: 55rem; /* 최소 높이는 55rem으로 설정 */
  margin-left: auto; /* 왼쪽 여백을 자동으로 설정하여 가운데 정렬 */
  margin-right: auto; /* 오른쪽 여백을 자동으로 설정하여 가운데 정렬 */
}

/* #example-full .calendar-controls {
	margin-right: 1rem;
	min-width: 14rem;
	max-width: 14rem;
} */

/* 달력 부모 컨테이너 스타일 */
#example-full .calendar-parent {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow-x: hidden;
  overflow-y: hidden;
  max-height: 90vh; /* 최대 높이는 화면 높이의 90%로 설정 */
  background-color: white; /* 배경색은 흰색으로 설정 */
}

/* 달력의 각 주의 높이를 조정하는 스타일 */
#example-full .cv-wrapper.period-month.periodCount-2 .cv-week,
#example-full .cv-wrapper.period-month.periodCount-3 .cv-week,
#example-full .cv-wrapper.period-year .cv-week {
  min-height: 7rem; /* 주당 최소 높이는 7rem으로 설정 */
}

/* 특정 날짜에 배경색을 변경하는 예제 - 분홍색 */
/* #example-full .theme-default .cv-day.ides {
  background-color: #ffe0e0;
} */

/* 날짜 요소에 아이콘을 추가하는 예제 */
/* #example-full .ides .cv-day-number::before {
	content: "\271D"; // 특별한 아이콘
}

#example-full .cv-day.do-you-remember.the-21st .cv-day-number::after {
	content: "\1F30D\1F32C\1F525"; // 다른 특별한 아이콘들
} */
</style>

[Vue3, SpringBoot, MariaDB] 이전글/ 다음글 구현하기

Nellie Kim — Thu, 21 Mar 2024 14:21:42 +0900

notice.xml

이전/다음글의 idx 와 글 제목을 map으로 받았다.

<!--	이전/다음글 조회 -->
<select id="getDetailPrevAndNextIdx" parameterType="kr.co.medical.api.notice.dto.NoticeDto"
        resultType="Map">
    SELECT
        idx,
        title
    FROM tb_notice
    WHERE idx IN (
          (SELECT idx FROM tb_notice WHERE idx <![CDATA[<]]> #{idx} AND del_yn = 'N' ORDER BY idx DESC LIMIT 1 ),
          (SELECT idx FROM tb_notice WHERE idx <![CDATA[>]]> #{idx} AND del_yn = 'N' ORDER BY idx LIMIT 1 )
        )
</select>

NoticeDto.java

@Data
public class NoticeDto extends BaseDto {
	private Integer idx;
	private String type;
	private String title;
	private String contents;
	private LocalDateTime crteDt;
	private String delYn;
	private Integer viewCount;
	private List<FileMngDto> images;
	private List<Integer> fileIdList;
	private Map<String,Object> prevAndNextIdx; // 이전글, 다음글 idx, title map

}

NoticeSvcImpl.java

noticeDao.getDetailPrevAndNextIdx(idx)로 가져온 맵을 아래와 같이 세팅해주었다.

 public NoticeDto getDetail(Integer idx) {
        NoticeDto noticeDto = new NoticeDto();
        noticeDto.setIdx(idx);
        List<NoticeDto> noticeList = getList(noticeDto);
        if(noticeList.isEmpty()){
            throw new BizException("param_wrong");
        }else if(noticeList.size() > 1){
            throw new BizException("org.springframework.dao.DuplicateKeyException");
        }
        noticeDto = noticeList.get(0);
        List<FileMngDto> files = noticeDao.getNoticeFileList(idx);
        noticeDto.setViewCount(noticeDto.getViewCount()+1);

        // 이전/다음글의 idx, 글제목을 map에 세팅
        List<Map<String, Object>> detailPrevAndNextIdx = noticeDao.getDetailPrevAndNextIdx(idx);
        HashMap<String, Object> resultMap = new HashMap<>();
        for (Map<String, Object> map : detailPrevAndNextIdx) {
            if ((Integer) map.get("idx") < idx){
                resultMap.put("prevIdx", map.get("idx"));
                resultMap.put("prevTitle", map.get("title"));
            }else{
                resultMap.put("nextIdx", map.get("idx"));
                resultMap.put("nextTitle", map.get("title"));
            }
        }
        noticeDto.setPrevAndNextIdx(resultMap);

        noticeDao.updateViewCount(noticeDto);

        noticeDto.setImages(files.stream()
                .map(fileMngSvc::setUrlAndBytes)
                .collect(Collectors.toList()));

        return noticeDto;
    }

요청 결과

아래와 같이 Map으로 잘 출력이 되었다.

이렇게 받은 응답으로 프론트 개발을 할 것이다.

[idx].vue

vue로 공지사항 상세화면을 개발했다.

<script setup lang="ts">
import { onMounted } from 'vue'
import { getNoticeDetail, NoticeModel } from '@/apis/notice'
import { useRouter } from 'vue-router'
import { ImagePreview } from '@varlet/ui'
import { RETURN_CODE } from '@/apis/common'

/**
|--------------------------------------------------
|   1. 변수
|--------------------------------------------------
*/
const isRefresh = ref(false)
const router = useRouter()
const props = defineProps<{ idx: number }>()
const noticeDetailData = ref<NoticeModel>()

/**
|--------------------------------------------------
|   2. 일반 함수
|--------------------------------------------------
*/

/** 1. url을 받아서 미리보기를 띄워주는 함수 */
function preview(url: string) {
  ImagePreview(url)
}

/** 2. 토큰 확인 함수 */
function tokenError(code: string) {
  if (/^30002\d{3}$/.test(code)) {
    Snackbar.error('로그인 후 이용 부탁드립니다')
    router.replace('/login')
  }
}

/** 3. 새로고침 함수  */
function handleRefresh() {
  isRefresh.value = false
}

/** 4. 이전글로 이동 */
function movePrevPage() {
  const prevIdx = noticeDetailData.value?.prevAndNextIdx.prevIdx
  console.log('prevIdx : ', prevIdx)
  router.replace(`/hospital/news/${prevIdx}`)
  fetchData2(prevIdx)
}

/** 5. 다음글로 이동 */
function moveNextPage() {
  const nextIdx = noticeDetailData.value?.prevAndNextIdx.nextIdx
  console.log('nextIdx : ', nextIdx)
  router.replace(`/hospital/news/${nextIdx}`)
  fetchData2(nextIdx)
}

/**
|--------------------------------------------------
|   3. fetch 함수
|--------------------------------------------------
*/
/**------------------------
  |   fetch 함수 1
  |------------------------*/
/** 1. 상세보기 호출 */
async function fetchData() {
  const idx = props.idx

  console.log('idx,,,,,,,,??', idx)
  if (idx == 0) return

  const request = {
    idx: idx
  }

  const response = await getNoticeDetail(request)

  if (response.code !== RETURN_CODE.SUCCESS) {
    console.log('정보를 가져오는 중 오류가 발생했습니다.')
    return
  }

  tokenError(response.code)

  noticeDetailData.value = response.data
  console.log('data.value,,,,,,,: ', noticeDetailData.value)
}

/**------------------------
  |   fetch 함수 2
  |------------------------*/
/** 1. 이전/다음글 클릭 시 상세보기 호출 */
async function fetchData2(idx: number) {
  console.log('idx,,,,,,,,??', idx)
  if (idx == 0) return

  const request = {
    idx: idx
  }

  const response = await getNoticeDetail(request)

  if (response.code !== RETURN_CODE.SUCCESS) {
    console.log('정보를 가져오는 중 오류가 발생했습니다.')
    return
  }

  tokenError(response.code)

  noticeDetailData.value = response.data
}

/**
|--------------------------------------------------
|   4. LifeCycle 함수
|--------------------------------------------------
*/

onMounted(() => {
  fetchData()
})
</script>

<!-- /**
|--------------------------------------------------
|   화면
|--------------------------------------------------
*/ -->
<template>
  <div class="message">
    <var-pull-refresh v-model="isRefresh" @refresh="handleRefresh">
      <app-header title="병원 소식">
        <template #left>
          <app-back />
        </template>
        <template #right>
          <app-side-menu />
        </template>
      </app-header>
      <div class="block"></div>
      <div class="content">
        <div class="message-item">
          <div class="message-list">
            <div class="message-item-detail-header-centered-box">
              -제목 : {{ noticeDetailData?.title }}<br />
              -안내 내용 : {{ noticeDetailData?.contents }}<br />

              <div v-for="(img, i) in noticeDetailData?.images" :key="i">
                <br />-이미지url(임시) {{ i + 1 }} : <br />
                <!-- <img :src="img.url" @click="preview(img.url)" /> -->
                <div>
                  {{ img.url }}
                </div>
                <img
                  src="/src/assets/images/avatar.jpg"
                  @click="preview('/src/assets/images/avatar.jpg')"
                  width="100%"
                /><br />
              </div>
              <br />
            </div>
          </div>
        </div>
      </div>
    </var-pull-refresh>
  </div>
  <br />
  <br />
  <div class="footer">
    <hr />
    <var-bottom-navigation active="">
      <var-bottom-navigation-item
        v-if="noticeDetailData?.prevAndNextIdx.prevIdx"
        label="이전글"
        icon="chevron-left"
        style="color: blueviolet; white-space: pre-line"
        @click="movePrevPage"
      />

      <var-bottom-navigation-item v-else label="이전글" icon="chevron-left" style="color: darkgrey" />

      <var-bottom-navigation-item
        v-if="noticeDetailData?.prevAndNextIdx.nextIdx"
        label="다음글"
        icon="chevron-right"
        style="color: blueviolet"
        @click="moveNextPage"
      />
      <var-bottom-navigation-item v-else label="다음글" icon="chevron-right" style="color: darkgrey" />
    </var-bottom-navigation>
    <div style="color: blueviolet; font: 0.6em sans-serif; margin: 10px">
      <span v-if="noticeDetailData?.prevAndNextIdx.prevIdx" style="margin-left: 15%; float: left">
        {{ noticeDetailData?.prevAndNextIdx.prevTitle }}
      </span>
      <span v-if="noticeDetailData?.prevAndNextIdx.nextIdx" style="margin-right: 15%; float: right">
        {{ noticeDetailData?.prevAndNextIdx.nextTitle }}
      </span>
    </div>
  </div>
</template>

<style lang="less" scoped>
.container {
  display: flex;
  flex-direction: column;
}

.content {
  padding: 20px;
}

.centered-submit {
  display: flex;
  justify-content: center;
}

.request-title {
  font-weight: bold;
  margin-bottom: 10px;
}

.nurse-textarea {
  width: 100%;
  min-height: 100px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-bottom: 20px;
}

.submit-btn {
  padding: 10px 20px;
  background-color: var(--color-primary);
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  width: 90%;
}

.request-title {
  font-weight: bold;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.request-date {
  font-weight: normal;
  font-size: 0.9em;
}

.block {
  height: 50px;
}

.message-list {
  padding: 10px 0;
  overflow-y: auto; /* 세로 스크롤 활성화 */
  max-height: calc(100vh - var(--app-bar-height)); /* 스크롤 높이 조정 */
}

.footer {
  margin-top: 500px;
}
</style>

최종 결과물

css가 안되어있으니 너무 허접하다.

어쨌든 원했던대로, 이전글/다음글 구현도 완료하였고 아래에 해당 글의 제목이 나타나도록 구현을 완료했다.

[Vue3] 의료 플랫폼 개발 기록

Nellie Kim — Tue, 19 Mar 2024 16:02:33 +0900

vue 를 사용하여 플랫폼을 개발하며 하는 기록..

varlet이라는 프레임워크를 사용하였으며 vue 3버전을 사용하여 개발하였다.

간단히 리스트 / 검색기능 / 상세보기 기능을 구현했다.

CSS 가 적용되지 않아 허접해보인다.

servicesearch > list.vue

<script setup lang="ts">
import { getGuideList, GuideModel } from '@/apis/guide'
import { getCodeBaseInfo, RETURN_CODE } from '@/apis/common'
import { useRouter } from 'vue-router'

/**
|--------------------------------------------------
|   1. 일반 변수
|--------------------------------------------------
*/
const departmentArr = ref<string[] | undefined>([]) // 1. 과 유형
const actsArr = ref<string[] | undefined>([]) // 2. 행위 유형

const guideResult = ref<GuideModel[]>([]) // 검색 결과 담는 변수

const selectedDept = ref<string>('') // 사용자가 선택한 과
const selectedAct = ref<string>('') // 사용자가 선택한
const keyword = ref<string>('') // 3. 키워드 - 제목 or 내용
const router = useRouter()

// const searchKeyword = ref('')

function goToDetail(idx: any) {
  if (idx !== undefined) {
    // 상세페이지 이동
    router.push(`/hospital/servicesearch/${idx}`)
  } else {
    // ID가 없는 경우 처리할 로직 추가
    console.error('Item ID is undefined!')
  }
}

/**
|--------------------------------------------------
|   3. fetch 함수
|--------------------------------------------------
*/

/** 마운트 되기 전에 가이드 리스트 조회 */
onBeforeMount(async () => {
  await fetchData()
  // await searchGuide()
})

/** 3-1. 가이드 리스트 조회 (/guide/getList) */
const fetchData = async () => {
  /** 3-1-1. 가이드 리스트 조회  */
  let response = await getGuideList({} as GuideModel) // /guide/getList

  if (response.code !== RETURN_CODE.SUCCESS) {
    console.log('예약 정보를 가져오는 중 오류가 발생했습니다.')
    return
  }

  const guideDetailList = response.data.dataList as GuideModel[]
  console.log('guideDetailList...:', guideDetailList)

  // 가이드 리스트에서 행위 목록만 중복되는 것 제거하고 추출하여 actsArr 에 세팅
  actsArr.value = Array.from(new Set(guideDetailList.map((item) => item.act as string)))
  console.log('actsArr.value : ', actsArr.value)

  const request = {
    codeA: 'GUIDE_DEPARTMENT'
  }

  /** 3-2. 코드 B 리스트 조회 */
  response = await getCodeBaseInfo(request) // /bCode/getList

  departmentArr.value = response.data.dataList.map((item: any) => item.codeName as string) // 과 이름만 추출하여 departmentArr에 세팅
  console.log('departmentArr.value : ', departmentArr.value)
}

/** 3-2. 가이드 검색  */
const searchGuide = async () => {
  const params = {
    department: selectedDept.value,
    act: selectedAct.value,
    keyword: keyword.value
  } as GuideModel

  /** 3-2-1. 가이드 리스트 조회  */
  const response = await getGuideList(params) // /guide/getList

  if (response.code !== RETURN_CODE.SUCCESS) {
    console.log('예약 정보를 가져오는 중 오류가 발생했습니다.')
    return
  }

  const guideDetailList = response.data.dataList as GuideModel[]
  // guideResult.value.push(guideDetailList)

  guideResult.value = guideDetailList.map((item) => ({
    idx: item.idx,
    department: item.department2,
    act: item.act,
    title: item.title,
    contents: item.contents,
    images: item?.images
  }))

  console.log('guideDetailList : ', guideDetailList)
  console.log('guideResult.value : ', guideResult.value)
  console.log('guideResult.value[0].images[0].url : ', guideResult.value[0].images[0].url)
}
</script>

<template>
  <div class="message">
    <var-pull-refresh>
      <app-header title="교육자료검색">
        <template #left>
          <app-back />
        </template>
        <template #right>
          <app-side-menu />
        </template>
      </app-header>

      <div class="message-list">
        <div class="message-item">
          <div class="message-item-detail">
            <div class="message-item-detail-header-centered-box">
              <var-space direction="column" size="large">
                <var-select variant="outlined" placeholder="과 유형" v-model="selectedDept">
                  <template v-for="item in departmentArr" :key="item">
                    <var-option :label="item" />
                  </template>
                </var-select>
                <var-select variant="outlined" placeholder="행위 유형" v-model="selectedAct">
                  <template v-for="item in actsArr" :key="item">
                    <var-option :label="item" />
                  </template>
                </var-select>
                <var-input variant="outlined" placeholder="제목 또는 내용을 검색하세요" v-model="keyword" />
                <var-icon @click="searchGuide" name="magnify" />
              </var-space>
            </div>
          </div>
        </div>

        <div class="message-item">
          <div class="message-list">
            <div
              v-for="(item, i) in guideResult"
              :key="i"
              class="message-item-detail-header-centered-box"
              @click="goToDetail(item.idx)"
            >
              {{ item.department }} <br />
              {{ item.act }}<br />
              -제목 : {{ item.title }}<br />
              -안내 내용 : {{ item.contents }}<br />
              -이미지url(임시) : {{ item.images?.[0]?.url }}
              <div v-if="item.images?.[0] !== undefined">
                <img src="/src/assets/images/avatar.jpg" width="100%" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </var-pull-refresh>
  </div>

  <router-stack-view />
</template>

<style lang="less" scoped>
.message {
  padding: calc(var(--app-bar-height)) 0 0;

  &-list {
    padding: 10px 0;
    overflow-y: auto; /* 세로 스크롤 활성화 */
    max-height: calc(100vh - var(--app-bar-height)); /* 스크롤 높이 조정 */
  }

  &-item {
    position: relative;
    display: flex;
    padding-top: 3px;

    &-avatar {
      flex-shrink: 0;
    }

    &-detail {
      width: 100%;
      border-bottom: thin solid var(--divider-color);
      padding-bottom: 5px;

      &-header {
        display: flex;
        justify-content: space-between;
        align-items: center;

        &-name {
          color: var(--app-title-color);
          font-size: 16px;
          width: 190px;
        }

        &-date {
          color: var(--app-subtitle-color);
          font-size: 14px;
          margin-bottom: 2px;
        }

        &-centered-box {
          /* 위아래 여백 조절 */
          margin: 10px;
          padding: 17px;
          border: 1.5px solid rgb(222, 218, 218);
          border-radius: 10px;
          color: rgb(49, 49, 165);
        }
      }

      &-description {
        color: var(--app-subtitle-color);
        font-size: 15px;
        margin-top: 6px;
      }
    }
  }

  .var-steps {
    margin: 10px;
  }

  .var-step {
    margin: 15px;
  }
}
.var-step__vertical-content {
  margin: 15px !important;
  border: 1.5px solid rgb(222, 218, 218) !important;
  border-radius: 10px !important;
}

.var-step__vertical-tag {
  margin: 100px !important; /* 원하는 간격을 지정합니다. */
}

/* 교육자료 검색 */
.full-height-title {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 과유형 */
.ripple-parent {
  position: relative;
  overflow: hidden;
  border: 1px solid #ddd;
  padding: 1vh;
}

/* select box */
.select-box-style {
  width: 100%;
  background-color: #f1f3f5;
  border-radius: 0.5rem;
  margin-bottom: 1vh;
  padding: 0vh 2vh;
}
/* 돋보기 */
.searchBox {
  width: 100%;
  margin-top: 2vh;
  margin-bottom: 2vh;
  border-color: #dee2e6;
  border-radius: 0.5rem;
  outline: none;
  box-shadow: none;
  width: calc(100% - 4vh);
  margin-right: 1vh;
}
.search-box-style {
  height: 30%;
  width: 100%;
  margin-bottom: 1vh;
  float: left;
}
input .icon-search {
  font-size: 2em;
  color: #dee2e6;
}
ion-card-content {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>

servicesearch > [idx].vue

<script setup lang="ts">
import { onMounted } from 'vue'
import { getGuideDetail, GuideModel } from '@/apis/guide'
import { useRouter } from 'vue-router'
import { ImagePreview } from '@varlet/ui'

const router = useRouter()
const props = defineProps<{ idx: number }>()
const data = ref<GuideModel>()

function preview(url: string) {
  ImagePreview(url)
}

/** 가이드 상세보기 호출 */
async function fetchData() {
  const idx = props.idx

  console.log('idx,,,,,,,,??', idx)
  if (idx == 0) return

  const request = {
    idx: idx
  }

  const response = await getGuideDetail(request)

  tokenError(response.code)

  if (response.status === 200) {
    data.value = response.data.dataList
    console.log('data.value,,,,,,,,,,,,,,,,,,,,,,,???', data.value)
  }
}
function tokenError(code: string) {
  if (/^30002\d{3}$/.test(code)) {
    Snackbar.error('로그인 후 이용 부탁드립니다')
    router.replace('/login')
  }
}

onMounted(() => {
  fetchData()
})
</script>

<template>
  <div class="message">
    <app-header title="교육자료검색">
      <template #left>
        <app-back />
      </template>
      <template #right>
        <app-side-menu />
      </template>
    </app-header>
    <div class="block"></div>
    <div class="content">
      <div class="message-item">
        <div class="message-list">
          <div v-for="(item, i) in data" :key="i" class="message-item-detail-header-centered-box">
            -과 : {{ item.department2 }} <br />
            -행위 : {{ item.act }}<br />
            -제목 : {{ item.title }}<br />
            -안내 내용 : {{ item.contents }}<br />

            <div v-for="(img, i) in item.images" :key="i">
              <br />-이미지url(임시) {{ i + 1 }} : <br />
              <img :src="img.url" @click="preview(img.url)" />
              <div>
                {{ img.url }}
              </div>
              <img
                src="/src/assets/images/avatar.jpg"
                @click="preview('/src/assets/images/avatar.jpg')"
                width="100%"
              /><br />
            </div>
            <br />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.container {
  display: flex;
  flex-direction: column;
}

.content {
  padding: 20px;
}

.centered-submit {
  display: flex;
  justify-content: center;
}

.request-title {
  font-weight: bold;
  margin-bottom: 10px;
}

.nurse-textarea {
  width: 100%;
  min-height: 100px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-bottom: 20px;
}

.submit-btn {
  padding: 10px 20px;
  background-color: var(--color-primary);
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  width: 90%;
}

.request-title {
  font-weight: bold;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.request-date {
  font-weight: normal;
  font-size: 0.9em;
}

.block {
  height: 50px;
}
</style>

[React] 네이버 지도 연동하기

Nellie Kim — Tue, 12 Mar 2024 17:21:05 +0900

index.tsx

/* eslint-disable react-hooks/exhaustive-deps */
/***
 * 매장 상세 (CEO) 페이지
 */

import React, { useState, useEffect, useRef } from "react";
import { useRouter } from "next/router";
import Layout from "example/containers/Layout";
import ImageUploader, { ImageFile } from "../../../components/ImageUploader";
import { ImgModel, CodeModel } from "@apis/common";
import { getFormattedDate } from "utils/util";
import Dialog, {
  DialogProps,
  initDialog,
  showDlg,
} from "../../../components/Dialog";
import {
  getAllOption,
  getStore,
  updateStore,
  getImages,
  insertImages,
  delImage,
  InfoModel,
} from "@apis/store";
import PhoneNumberInput from "../../../components/PhoneNumberInput";


function StoreDetail() {
  const [editable, setEditable] = useState(true);
  const [allOptions, setAllOptions] = useState<CodeModel[]>([]);
  const [data, setData] = useState<InfoModel>({} as InfoModel);
  const mapElement = useRef(null);
  const [initImages, setInitImages] = useState<ImageFile[]>();
  let imageFiles: ImageFile[] = [];
  const [deletedImages, setDelImages] = useState<ImageFile[]>([]);
  const [dlgProps, setDlgProps] = useState<DialogProps>({} as DialogProps);
  initDialog(setDlgProps);

  // on page change, load new sliced data
  // here you would make another server request for new data
  useEffect(() => {
    fetchData();
  }, []);
  useEffect(() => {
    // 상점 데이터 대입이 완료 되면 지도초기화 & 상점 위치 설정
    initMap();
  }, [data]);

  async function fetchData() {
    // 상점에 세팅 가능한 전체 옵션 목록 조회
    let response = await getAllOption();
    if (response.status == 200) setAllOptions(response.data);
    // 상점 정보 조회
    response = await getStore();
    if (response.status != 200) return;
    setData(response.data); // 상점 정보 세팅
    response = await getImages();
    if (response.status == 200) {
      // 상점 첨부 이미지 조회
      const fileList = response.data.dataList as ImgModel[];
      const initList = fileList.map(
        ({ apndFileId, urlPath }) =>
        ({
          fileId: apndFileId,
          src: urlPath?.startsWith("/") ? urlPath : "/" + urlPath,
        } as ImageFile)
      );
      setInitImages(initList); // 초기 이미지 세팅
    }
  }

  function initMap() {
    // 지도 영역 생성
    if (!window.naver || !data) return;

    let lat = 37.29618649320232;
    let lng = 127.01751553242397;
    if (data.lat && data.lng) {
      lat = data.lat;
      lng = data.lng;
    }
    const mapOptions = {
      center: new window.naver.maps.LatLng(lat, lng),
      tileSpare: 10,
      zoom: 15,
    };

    const map = new window.naver.maps.Map(
      mapElement.current as any,
      mapOptions
    );

    // 목표 위치에 마크 표시하기
    const marker = new window.naver.maps.Marker({
      position: new window.naver.maps.LatLng(lat, lng),
      map: map,
    });

    // 마크 클릭 하면 표시 될 상세 창 만들기
    const infoWindow = new window.naver.maps.InfoWindow({
      content: "<div><b>" + data.name + "</b><br>" + data.addr1 + "</div>",
    });
    marker.addListener("click", function () {
      const shouldOpenInfoWindow = !infoWindow.getMap();
      if (shouldOpenInfoWindow) {
        infoWindow.open(map, marker);
      } else {
        infoWindow.close();
      }
    });

    // 자동으로 마크 클릭 효과(상세 창 표시)
    window.naver.maps.Event.trigger(marker, "click");
  }

  function handleCheckboxChange(opt: CodeModel, isChecked: boolean) {
    if (isChecked) {
      // 체크됐을 때: optionList에 opt 추가
      const updatedOptionList = data.storeOptionList
        ? [...data.storeOptionList, opt]
        : [opt];
      setData({ ...data, storeOptionList: updatedOptionList });
    } else {
      // 체크 해제됐을 때: optionList에서 opt 제거
      const updatedOptionList = data.storeOptionList
        ? data.storeOptionList.filter((item) => item.cdC !== opt.cdC)
        : [];
      setData({ ...data, storeOptionList: updatedOptionList });
    }
  }

  // ImageUploader의 조작에 대한 핸들러 함수들
  function onSelectImages(files: ImageFile[]) {
    imageFiles = files;
  }
  function onRemoveImage(file: ImageFile) {
    // 이미 디비에 등록 된 상점 사진의 경우는 디비에서의 삭제 처리까지 진행
    if (file.fileId) setDelImages((prev) => [...prev, file]);
  }

  async function onUpdate() {
    if (
      !data.name ||
      !data.tel ||
      !data.intro ||
      !data.openTime ||
      !data.payInfo ||
      !data.parkInfo
    ) {
      showDlg("필수 값이 입력되지 않았습니다.<br><br> (편의시설 외 모든 항목이 필수)<br><br> 다시 확인해 주세요.");
      return;
    }

    const formData = new FormData();
    imageFiles.forEach((img) => img.org && formData.append("files", img.org));

    console.log("update data = ", data);

    let result: boolean = (await updateStore(data)).status === 200;
    if (result) {
      deletedImages.forEach((file) =>
        delImage({ apndFileId: file.fileId } as ImgModel)
      );
    }
    if (result) result &&= (await insertImages(formData)).status === 200;

    if (result) {
      showDlg("상점 데이터 저장을 완료했습니다.");
      fetchData(); // 데이터 다시 로드
    } else {
      showDlg("상점 데이터 저장에 실패하였습니다.");
    }
  }

  return (
    <Layout>
      <div className="content">
        <div className="page-title">매장관리</div>
        <div className="box">
          <table className="write-table">
            <colgroup>
              <col style={{ width: "200px" }} />
              <col />
            </colgroup>
            <tbody>
              <tr>
                <th>매장명</th>
                <td>
                  <div className="input-group">
                    <input
                      type="text"
                      value={data.name || ""}
                      readOnly={!editable}
                      onChange={(e) =>
                        setData({ ...data, name: e.target.value })
                      }
                    />
                    {data.idx && !data.name && (
                      <div style={{ color: "red" }}>필수 항목</div>
                    )}
                  </div>
                </td>
              </tr>
              <tr>
                <th>매장 연락처</th>
                <td>
                  <div className="input-group">

                    <PhoneNumberInput value={data.tel ? data.tel.replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3') : ""} onValueChange={(value) => setData({ ...data, tel: value })} readOnly={!editable} />

                    {data.idx && !data.tel && (
                      <div style={{ color: "red" }}>필수 항목</div>
                    )}
                  </div>
                </td>
              </tr>
              <tr>
                <th>매장주소</th>
                <td>
                  <div className="input-btn-group flex-start">
                    <input type="text" disabled value={data.addr1 || ""} />
                    <button className="btn btn-border">검색</button>
                  </div>
                  <div
                    ref={mapElement}
                    className="mt-2"
                    style={{ border: "1px solid black", height: "300px" }}
                  ></div>
                </td>
              </tr>
              <tr>
                <th>매장 소개</th>
                <td>
                  <div className="input-group">
                    <textarea
                      value={data.intro || ""}
                      readOnly={!editable}
                      onChange={(e) =>
                        setData({ ...data, intro: e.target.value })
                      }
                    ></textarea>
                    {data.idx && !data.intro && (
                      <div style={{ color: "red" }}>필수 항목</div>
                    )}
                  </div>
                </td>
              </tr>
              <tr>
                <th>운영 시간</th>
                <td>
                  <div className="input-group">
                    <textarea
                      value={data.openTime || ""}
                      readOnly={!editable}
                      onChange={(e) =>
                        setData({ ...data, openTime: e.target.value })
                      }
                    ></textarea>
                    {data.idx && !data.openTime && (
                      <div style={{ color: "red" }}>필수 항목</div>
                    )}
                  </div>
                </td>
              </tr>
              <tr>
                <th>이용 요금</th>
                <td>
                  <div className="input-group">
                    <textarea
                      value={data.payInfo || ""}
                      readOnly={!editable}
                      onChange={(e) =>
                        setData({ ...data, payInfo: e.target.value })
                      }
                    ></textarea>
                    {data.idx && !data.payInfo && (
                      <div style={{ color: "red" }}>필수 항목</div>
                    )}
                  </div>
                </td>
              </tr>
              <tr>
                <th>
                  편의시설
                  <br />및 서비스
                </th>
                <td>
                  <div className="radio-check-list row">
                    <ul>
                      {allOptions.map((opt, idx) => (
                        <li key={`options${idx + 1}`}>
                          <div className="checkbox">
                            <input
                              type="checkbox"
                              name="options"
                              id={`options${idx + 1}`}
                              checked={
                                data.storeOptionList
                                  ? data.storeOptionList.some(
                                    (item) => item.cdC === opt.cdC
                                  )
                                  : false
                              }
                              disabled={!editable}
                              onChange={(e) => {
                                handleCheckboxChange(opt, e.target.checked);
                              }}
                            />
                            <label htmlFor={`options${idx + 1}`}>
                              {opt.cdNm}
                            </label>
                          </div>
                        </li>
                      ))}
                    </ul>
                  </div>
                </td>
              </tr>
              <tr>
                <th>주차 안내</th>
                <td>
                  <div className="input-group">
                    <textarea
                      value={data.parkInfo || ""}
                      readOnly={!editable}
                      onChange={(e) =>
                        setData({ ...data, parkInfo: e.target.value })
                      }
                    ></textarea>
                    {data.idx && !data.parkInfo && (
                      <div style={{ color: "red" }}>필수 항목</div>
                    )}
                  </div>
                </td>
              </tr>
              <tr>
                <th>
                  매장 사진
                  <br />
                  (최대 10장)
                </th>
                <td>
                  <ImageUploader
                    initImages={initImages}
                    onSelected={onSelectImages}
                    onRemove={onRemoveImage}
                  />
                </td>
              </tr>
              <tr>
                <th>마지막 저장일시</th>
                <td>
                  <div className="input-group">
                    <label>{getFormattedDate(data.updateDt, true, true)}</label>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
          <ul className="submit-btn">
            <li>
              <button className="btn btn-green" onClick={onUpdate}>
                저장하기
              </button>
            </li>
          </ul>
        </div>
      </div>
      <Dialog props={dlgProps} />
    </Layout>
  );
}

export default StoreDetail;

[React] 엄청 간단한 카카오 로그인 구현

Nellie Kim — Wed, 6 Mar 2024 10:39:55 +0900

리액트, NEXTJS로 카카오 로그인 구현을 해보았다.

출처 : https://developers.kakao.com/docs/latest/ko/kakaologin/common

진행한 카카오 로그인의 전체 흐름을 간단히 정리해보았다.

1. 맨 처음 사용자가 '카카오로그인' 눌렀을 시, 카카오 디벨로퍼 사이트에서 받은 REST API KEY 와 설정한 Redirect URI 로 카카오에 CODE 요청 → CODE 발급

2. 그 CODE 로 카카오에게 TOKEN 요청 → TOKEN 발급 (이 시점에 사용자와 앱이 연결됨!!)

3. 그 TOKEN으로 카카오에게 유저정보(ID가 담긴) 를 요청 → 유저정보(ID가 담긴) 발급

4. 그 유저정보를 백엔드에 회원가입 API로 전송 (TOKEN 값을 ID로 설정, 닉네임, 이름 등...)

5. 그 이후에 로그인 요청은 기존 TOKEN 검증처럼 똑같이 진행

리액트, NEXT.JS 로 카카오 로그인을 하는 방법이 여러가지 있는 것 같았으나

백엔드만 하다가 프론트를 처음 해봤기 때문에 최대한 간단하게 하기위해서 ,

프론트에서는 CODE, TOKEN, 유저정보만 받고 바로 백엔드로 튀었다... 다른 방법은 나중에 차차 더 공부해보기로 해야겠다. 6시간 정도만에 정말 간단하게 구현이 완성되었다.

단 3가지 파일만 필요했다.

아래는 최종 코드이다.

1. _app.tsx

아래 한 줄 추가하기.

<script src="https://developers.kakao.com/sdk/js/kakao.js"

import "@styles/globals.css";
import "@styles/assets/css/style.css";
import "tailwindcss/tailwind.css";
import Script from 'next/script';

import React from "react";
import { Windmill } from "@roketid/windmill-react-ui";
import type { AppProps } from "next/app";

function MyApp({ Component, pageProps }: AppProps) {
  // suppress useLayoutEffect warnings when running outside a browser
  if (!process.browser) React.useLayoutEffect = React.useEffect;

  return (
    
    
    <Windmill usePreferences={true} dark={false}>
      <Script strategy='beforeInteractive' src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=mhvjuj53xv"/>
      {/* 카카오 로그인 위해 추가 */}
      <script src="https://developers.kakao.com/sdk/js/kakao.js"
          defer
        ></script>
      <Component {...pageProps} />
    </Windmill>
  );
}
export default MyApp;

2. kakaoLogin.ts

/* 카카오 로그인을 위한 API */


/** 카카오 요청 시 필요한 주소 값 등 */
// const KAKAO_SERVER = 'http://104.50.177.80:5000';
const KAKAO_SERVER = 'http://localhost:5000';
const REDIRECT_URI = KAKAO_SERVER + '/member/login/login';
const REST_API_KEY = 'd7831~~~~~~~~~~~~~5251'; //REST API KEY
const INITIAL_URL_BASE = 'https://kauth.kakao.com/oauth/authorize'; // '카카오로그인'을 클릭할 때 이동하는 URL 중 앞부분
const TOKEN_URL_BASE = 'https://kauth.kakao.com/oauth/token?grant_type=authorization_code'; // 카카오에서 CODE로 TOKEN을 받아오기 위한 BASE URL
const USER_INFO_URL = 'https://kapi.kakao.com/v2/user/me'; // 카카오에서 TOKEN으로 USER정보를 받아오기 위한 BASE URL
export const INITIAL_URL_BASE_FULL = INITIAL_URL_BASE + '?client_id=' + REST_API_KEY + '&redirect_uri=' + REDIRECT_URI + '&response_type=code'; // '카카오로그인'을 클릭할 때 이동하는 URL


/**  카카오에 getTokenFromKakao로 요청하면 받을 수 있는 응답 값*/
export interface TokenResponse {
    token_type?: string;
    access_token: string;
    refresh_token?: string;
    id_token?: string;
    expires_in?: number;
    refresh_token_expires_in?: string;
    scope?: string;
    token?: string;
    id?: number;
}

/**  카카오에 getUserFromKakao로 요청하면 받을 수 있는 응답 값*/
export interface UserInfo {
    id: number;
    connected_at: string;
    properties: {
        nickname: string;
        profile_image?: string; // 640x640
        thumbnail_image?: string; // 110x110
    };
}


/** 1. 카카오에서 CODE로 TOKEN을 받아오기 */
export default async function getTokenFromKakao(authCode: string) {
    const tokenUrl = `${TOKEN_URL_BASE}&client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&code=${authCode}`;

    const response: TokenResponse = await fetch(tokenUrl, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
    }).then((res) => res.json());

    if (response.access_token !== undefined) {
        console.log('response (카카오에서 토큰 값 받기 성공) ....................... : ', response)
        return response;
    }
}

/** 2. 카카오에서 TOKEN으로 USER정보를 받아오기 */
export async function getUserFromKakao({ access_token }: TokenResponse) {
    const response: UserInfo = await fetch(USER_INFO_URL, {
        headers: {
            'Content-Type': 'application/json',
            Authorization: `Bearer ${access_token}`,
        },
    }).then((res) => res.json());

    if (response.id !== undefined) {
        console.log('response (카카오에서 유저 정보 받기 성공) ....................... : ', response)
        return response;
    }

}

3. login.tsx

import React, { useState, useEffect } from "react";
import { signin, signup, LoginInfoModel } from "@apis/login";
import getTokenFromKakao, { getUserFromKakao, INITIAL_URL_BASE_FULL } from "@apis/kakaoLogin";
import { useRouter } from "next/router";


function LoginPage() {
  const router = useRouter();

  /**
  |--------------------------------------------------
  |  라우팅 함수 
  |--------------------------------------------------
  */

  /** 맨 처음 사용자가 '카카오로그인' 버튼을 눌렀을 시 */
  const handleKakaoLogin = () => {
      window.location.href = INITIAL_URL_BASE_FULL
  }

  async function moveHome() {
    window.location.href = "/member/mainPage/home"
  }

  /**
  |--------------------------------------------------
  | 카카오 로그인
  |--------------------------------------------------
  */
  async function kakaoLogin() {

    if(router.query.code !== undefined){
      console.log('router.query.code (라우터 쿼리로 코드 값 받기 성공)................: ', router.query.code);
    }

    /**1. 카카오 [코드]를 넣고 -> 카카오 [토큰]을 받아오기 */
    const response = await getTokenFromKakao(router.query.code as string);


    /**2. 카카오 [토큰]을 넣고 -> 카카오 [유저정보] (id, nickname 등.. )를 받아오기 */
    const responseUser = await getUserFromKakao({ access_token: response?.access_token as unknown as string }) // id, nickname 등이 담긴 객체

    const result = await signin({ token: responseUser?.id as unknown as string });
    if(result.status === 200){
      console.log('result (signin 호출 성공)............', result);
    }


    /** 3. 처음 로그인한 사람이면, 회원가입 페이지로 이동 시키고, 아니면 로그인 세션에 데이터 저장 */
    if (result.status == 400) { 
      const request = {
        "token": responseUser?.id as unknown as string,
        "nick": responseUser?.properties?.nickname,
        "loginType": "kakao"
      };
      await kakaoSignUp(request);

    } else if (result.status == 200) {
      // 로그인 토큰 저장
      sessionStorage.setItem("parkgolfMemberToken", result.data.accessToken);
      sessionStorage.setItem(
        "parkgolfMemberRefreshToken",
        result.data.refreshToken
      );
      console.log('sessionStorage...............', sessionStorage)
      window.location.href = "/member/mainPage/home"; // 페이지 이동
    } else {
    }
  }

  /**
|--------------------------------------------------
| 카카오 회원가입
|--------------------------------------------------
*/
  async function kakaoSignUp(request: LoginInfoModel) {
    if (request.token !== undefined) {
      console.log('request .....??', request)
      const resultSignUp = await signup(request);
      
      // 회원가입 성공하면 로그인 페이지로 라우팅
      if (resultSignUp.status == 200) {
        console.log(" ####################################  회원가입 완료 #################################### " )
        console.log('resultSignUp (signup 호출 성공)............', resultSignUp);
        router.push('/member/login/login')
      }
    }
  }


  /**
  |--------------------------------------------------
  | ⚡ 5. useEffect
  |--------------------------------------------------
  */
  useEffect(() => {
    kakaoLogin();
  }, [router.query.code]);


  /*
  |--------------------------------------------------
  |   화면
  |--------------------------------------------------
  */
  return (
    <div>
      <body className="white-type">
        <div className="header">
          <div className="top-bar">
            <div className="prev" >
              <a className="prev-btn" onClick={moveHome}>
                <i className="icon icon-prev" ></i>
                로그인
              </a>
            </div>
          </div>
        </div>
        <div className="section">
          <div className="wrapper">
            <div className="kakao-update-box">
              <div className="kakao-icon"></div>
              <p className="update-message">카카오톡 간편 로그인</p>
            </div>
          </div>
        </div>
        <div className="btn-wrap bottom-full-type">
          <a className="btn gray-btn" onClick={moveHome}>닫기</a>
          <a className="btn kakao-btn" onClick={handleKakaoLogin}>
            <i className="icon ico-kakao" ></i> 카카오로그인
          </a>
        </div>
      </body>
    </div>
  );
}

export default LoginPage;

참고

https://developers.kakao.com/docs/latest/ko/kakaologin/common

Kakao Developers

카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.

developers.kakao.com

https://velog.io/@leesangsu200/%EC%B9%B4%EC%B9%B4%EC%98%A4-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EA%B8%B0%EB%8A%A5-%EA%B5%AC%ED%98%84-%ED%94%84%EB%A1%A0%ED%8A%B8%EB%A6%AC%EC%95%A1%ED%8A%B8

velog

velog.io

[React] 글과 이미지가 같이 있는 글 저장해서 보여주는 방법

Nellie Kim — Sat, 2 Mar 2024 21:15:01 +0900

nextjs에서 Quill Editor를 사용해서 글과 이미지를 등록해주었다.
(여기서는 에디터에 대한 내용은 없다. 관리자 쪽에서 등록해주는 것을 보여주기만 한다. )

글 내용이 아래와 같이 저장이 된다.

첫번째 공지사항입니다.<img src="/svc/images/NOTICE/202403/ad-banner02.png">2024년 3월 골프장이 오픈했습니다. 오픈 행사도 많으니 많은 관심 부탁드립니다 ^^<img src="/svc/images/NOTICE/202403/sample-img.png">

이렇게 저장이 된 글과 img를 아래의 코드로 작성해주면

import React, { useState, useRef, useEffect } from "react";
import { useRouter } from "next/router";
import { format } from "date-fns";
import { getNoticeInfo, InfoModel } from "@apis/notice";
import Layout from "@comps/Layout";
import Main from "@comps/Main";

function DetailPage() {
  const router = useRouter();
  const { idx } = router.query;
  const [data, setData] = useState<InfoModel>();
  const formattedCrteDt = useState("");

  async function fetchData(idx: any) {
    const request = {
      idx: Number(idx),
    };

    const response = await getNoticeInfo(request);

    if (response.status == 200) {
      // 성공하면 데이터 세팅..

      response.data.crteDt = format(response.data.crteDt as Date, "yyyy.MM.dd");
      setData(response.data);
    }
  }

  /** 목록으로 이동 */
  const moveList = () => {
    router.push("/member/notice/list/");
  };

  /**  목록 조회 GET */
  useEffect(() => {
    fetchData(idx);
  }, [idx]); // idx가 변경될 때마다 fetchData() 호출


  // contens 안의 이미지 URL 변경 함수
  const transformImageUrl = (url: string) => {
    console.log('변환 전 url:', url) ///svc/images/NOTICE/202403/ad-banner02.png
    url = url.replace("/svc/images", "http://199.67.120.80/file");
    console.log('변환 후 url:', url) ///svc/images/NOTICE/202403/ad-banner02.png
    return url;
  };


  return (
    <>
      <Layout
        isMenuBtn={true}
        menuNum={5}
        title={"공지사항"}
        backUrl="/member/notice/list"
      />

      <Main>
        <div className="white-type">
          <div className="section white-type">
            <div className="wrapper">
              <div className="post-top-wrap">
                <div className="post-top">
                  <div className="post-tit">{data?.title}</div>
                  <ul className="post-info">
                    <li>{data?.nick}</li>
                    <li>{data?.crteDt}</li>
                  </ul>
                </div>
              </div>
              <div className="post-content">
                {data?.contents && (
                  <div
                    dangerouslySetInnerHTML={{
                      __html: data.contents.replace(
                        /<img([^>]*)\ssrc="([^"]+)"([^>]*)>/g,
                        (match, p1, src, p3) => `<img${p1} src="${transformImageUrl(src)}"${p3}>`
                      ),
                    }}
                  ></div>
                )}


              </div>
            </div>
          </div>

          <div className="btn-wrap center-type">
            <a className="btn gray-border-full" onClick={moveList}>
              목록
            </a>
          </div>
        </div>
      </Main>
    </>
  );
}

export default DetailPage;

아래와 같이 잘 저장이 된다 !!!

[React] 좋아요 적용

Nellie Kim — Tue, 27 Feb 2024 10:39:03 +0900

퍼블리싱으로 제공받은 CSS를 사용하여 리액트에서 하트를 누르면 단골상점으로 등록하는 작업을 진행했다.

CSS

하트와 관련된 스타일이 8개가 있었다.

/* 하트 지정 시 필요한 스타일 */
/* 1. 하트 옆 체크박스 숨기는 */
.like-check-box input[type=checkbox] {
  position: absolute;
  width: 0px;
  height: 0px;
  overflow: hidden;
}

/* 2. 하트 박스 전체가 아예 노출이 안되게 하는 스타일 */ 
.like-check-box input[type=checkbox] + label {
  position: relative;
  display: inline-block;
  border: 0.0625rem solid #e0e0e0;
  border-radius: 0.25rem;
  padding: 0.375rem 0.6875rem;
  padding-left: 1.1875rem;
  font-size: 0.6875rem;
  letter-spacing: -0.05em;
  color: #999;
  background-color: #ffffff;
}

/* 3.  [하트 모양] - 클릭 전 회색*/
.like-check-box input[type=checkbox] + label:after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  background-image: url(../img/ico_heart_gray.png);
  background-position: cetner;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  left: 0.5625rem;
  top: 0.4375rem;
}

/* 4.  [하트 테두리] - 클릭 후 빨간색 */
.like-check-box input[type=checkbox]:checked + label {
  border: 0.0625rem solid #ff7f00;
  background-color: #fff6ed;
  color: #ff7f00;
}


/* 5. [하트 모양] - 클릭 후 빨간색 */
.like-check-box input[type=checkbox]:checked + label:after {
  background-image: url(../img/ico_heart.png);
}

/* 6. [하트 테두리] 텍스트 없을 때 사용 - 찌그러진 하트 테두리기 나옴 (이유는 모르겠다)*/
.like-check-box.none-text input[type=checkbox] + label {
  width: 1rem;
  height: 1rem;
  padding: 0;
}

/* 7. [하트 테두리]  텍스트 없을 때 사용 - 하트가 밖으로 빠져나감 (이유는 모르겠다)*/
.like-check-box.none-text input[type=checkbox] + label:after {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

/* 8. 하트 관련 모든 속성을 빨간 색으로 변경 (현재는 없어도 동작함)*/
.like-check-box .total {
  color: #e82f01 !important;
}

최종 TSX 페이지

/* eslint-disable @next/next/no-img-element */

import React, { useState, useRef, useEffect } from "react";
import { useRouter } from "next/router";
import Layout from "@comps/Layout";
import Main from "@comps/Main";
import { putRegularMap } from "@apis/member";
import Toast from "@comps/toast";
import {
  Label,
  Input,
  Button,
  WindmillContext,
} from "@roketid/windmill-react-ui";



function RecordPage() {
  /**
|--------------------------------------------------
|   1. 일반 변수
|--------------------------------------------------
*/
  const router = useRouter();
  const { idx } = router.query;
  const [data, setData] = useState<any>();
  const [isRegular, setIsRegular] = useState<boolean>(false); // 단골 유무
  const [isToast, setIsToast] = useState<boolean>(false); // Toast 메시지 팝업

  /**
|--------------------------------------------------
|   2. 일반 함수
|--------------------------------------------------
*/

  /** 하트 클릭 시 */
  const handlePutRegularMap = () => {
    setIsRegular(!isRegular);
    setIsToast(true)
    fetchPutRegularMap();
    // setIsToast(false)
  }

  /**
|--------------------------------------------------
|   3. fetch 함수 
|--------------------------------------------------
*/

  /**3-1. 상단의 상점 정보 조회 */
  async function fetchData(idx: any) {
    const request = {
      idx: Number(idx),
    };

    const response = await getDetailReserve(request);

    if (response.status == 200) {
      setData(response.data);

      // 날짜 쪼개기
      const reserveDate = response.data.reserveDate;
      let [datePart, timePart] = reserveDate.split(' ');
      datePart = datePart.replace(/-/g, '.');
      timePart = timePart.replace(/:00$/, '');
      setDate(datePart)
      setTime(timePart)
    }
  }


  /** 단골 등록 */
  async function fetchPutRegularMap() {
    const request = {
      storeIdx: data.storeIdx
    };
    const response = await putRegularMap(request);

    if (response.status == 200) {
      fetchData(idx)
      console.log('좋아요 성공!!!')
    } else {
      alert('실패... ')
    }
  }


  /**
|--------------------------------------------------
| ⚡ 5. useEffect
|--------------------------------------------------
*/
  /**  목록 조회 GET */
  useEffect(() => {
    fetchData(idx);
  }, [idx]); // idx가 변경될 때마다 fetchData() 호출


  /*
|--------------------------------------------------
|   화면
|--------------------------------------------------
*/
return (
    <>
      <Layout />
      <Main>
        <body>
          <div className="header">
            <div className="top-bar">
              <div className="prev">
                <a href="" className="prev-btn">
                  <i className="icon icon-prev"></i>
                  예약이력
                </a>
              </div>
            </div>
          </div>
          <div className="section">
            <div className="wrapper">
              <ul className="reservation-list">
                <li>
                  <div className="box">
                    <div className="reservation">
                      <a href="#">
                        <div className="branch-info">
                          <div className="prefix">
                            <img src="/img/sample-img-banner.png" alt="" />
                            <div className="sucess">
                              <i className="icon ico-calendar"></i>
                              예약 완료
                            </div>
                          </div>
                          <div className="suffix">
                            <div className="address">
                              레저로 스크린골프 계양점
                              <div className="sub-address gray">
                                인천광역시 계약구 계산대로 88
                              </div>
                            </div>
                            <div className="tag-check-wrap">
                              {/*   하트 적용 부분 */}
                              <div className="like-check-box none-text">
                                <input type="checkbox" name="" id="ck" checked={isRegular} onChange={handlePutRegularMap} />
                                <label htmlFor="ck"></label>
                              </div>
                            </div>
                          </div>
                        </div>
                      </a>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          
          {(isRegular && isToast) ? (
                      <Toast message="단골 매장으로 설정했습니다." setToast={setIsToast} />
                    ) : (
                      !isRegular && isToast && (
                        <Toast message="단골 매장을 해제했습니다." setToast={setIsToast} />
                      )
                    )}
        </body>
      </Main>
    </>
  );
}

export default RecordPage;

핵심 로직은 아래와 같다.

{/*   하트 적용 부분 */}
      <div className="like-check-box none-text">
        <input type="checkbox" name="" id="ck" checked={isRegular} onChange={handlePutRegularMap} />
        <label htmlFor="ck"></label>
      </div>

완료!

[React] 리액트에서 텍스트 줄바꿈(개행)하는 방법 (whiteSpace: "pre-wrap")

Nellie Kim — Mon, 26 Feb 2024 12:06:19 +0900

리액트 개발 중에 줄바꿈이 필요했다. 아래와 같이 입력을 했다.

1. <textarea> 태그는 기본적으로 줄바꿈이 적용되어 저장된다.

이런식으로..

contents 가 바로 \n 으로 변환되어 로 저장된 것을 볼 수 있다.

화면을 보면, \n 으로 저장된 부분이 개행이 되지 않고 생략되어 출력된다.

줄바꿈을 적용해보자!

2. whiteSpace: "pre-wrap" 으로 줄바꿈하기

정말 간단하다. p 태그에 스타일 속성을 아래와 같이 넣기만 하면 된다.

<div className="post-content">
  <p style={{ whiteSpace: "pre-wrap" }}>{data?.contents}</p>
</div>

화면에도 줄바꿈이 잘 적용되었다!

[React] datepicker 적용해보기

Nellie Kim — Wed, 21 Feb 2024 16:27:34 +0900

next.js 와 react.js 로 개발하며 적용한 부분이다.

아래와 같이 모바일 화면 안에서 예약 일시에 datepicker 를 사용하여 입력받고 싶었다.

기획 상으로 부터 요청 받은 적용 조건 사항은 아래와 같다.

원하는 달력 적용 조건

- 이전 달, 다음 달은 회색 처리하여 표시되도록 할 것

- 달력을 선택하기 전에 오늘 날짜가 표시되도록 할 것

- 오늘 이전으로는 선택하지 못하도록 할 것

- 한달 뒤는 선택하지 못하도록 할 것

타임피커 적용 조건

- 09~24시만 적용되도록 할 것

- 30분 단위로 선택하도록 할 것

리액트에서 제공하는 datepicker 라는 라이브러리를 사용하면 아주 편하게 적용할 수 있다.

설치

먼저 터미널에 아래 명령어를 입력해주고 설치해 준다.

npm install react-datepicker --save

npm install --save @types/react-datepicker

import

쓰고자 하는 파일 위에 임포트 해준다.

import ReactDatePicker from "react-datepicker";
import 'react-datepicker/dist/react-datepicker.css';

이제 원하는 디자인을 아래 사이트에서 골라서 적용해주면 된다.

https://reactdatepicker.com/

전체 코드

/* eslint-disable @next/next/no-img-element */

import React, { useState, useRef, useEffect } from "react";
import { useRouter } from "next/router";
import { format, toDate, addMonths  } from "date-fns";
import { getDetail } from "@apis/storeApi";
import Layout from "@comps/Layout";
import ReactDatePicker from "react-datepicker"; // 추가!
import 'react-datepicker/dist/react-datepicker.css'; // 추가!

function DetailPage() {
  /**
|--------------------------------------------------
|   1. 일반 변수
|--------------------------------------------------
*/

  const router = useRouter();
  const { idx } = router.query;
  const [data, setData] = useState<any>(); // 상세조회 data
  const datepickerRef = useRef(null);
  const [selectedDate, setSelectedDate] = useState<Date>(new Date()); // 현재 날짜를 디폴트 값으로!
  const datepickerRef = useRef(null);
  const [selectedTime, setSelectedTime] = useState<any>();
  const [selectedDate, setSelectedDate] = useState<Date>(new Date());
  
  const minTime = new Date();
  minTime.setHours(9, 0); // 예약 일시 09시부터~
  
  const [formattedTime, setFormattedTime] = useState<Date>(minTime);

  const maxTime = new Date();
  maxTime.setHours(23, 59); // ~ 24시까지

  /**
|--------------------------------------------------
|   2. 일반 함수
|--------------------------------------------------
*/

  // time 이벤트 핸들러
  const handleTimeChange = (selectedTime: any) => {
    const hours = selectedTime.getHours();
    const minutes = selectedTime.getMinutes();
    const fTime = `${hours}:${minutes < 10 ? '0' : ''}${minutes}`;// 출력: "12:00"

    const timeStringToDate = (timeString: string): Date => {
      const today = new Date();
      const [hours, minutes] = timeString.split(':').map(Number);
      const dateWithTime = new Date(today.getFullYear(), today.getMonth(), today.getDate(), hours, minutes);
      return dateWithTime;
    };
    const st = timeStringToDate(fTime); // timepicker 박스에 표현해줄 변수
    setFormattedTime(st)
    console.log("st",st); //Wed Feb 21 2024 12:30:00 GMT+0900 

    console.log("selectedTime:", selectedTime); // "12:00"
  };

  /**
|--------------------------------------------------
|   3. fetch 함수 
|--------------------------------------------------
*/
  /**3-1. 상단의 상점 정보 조회 */
  async function fetchData(idx: any) {
    const request = {
      idx: Number(idx),
    };

    const response = await getDetail(request);

    if (response.status == 200) {
      // 성공하면 데이터 세팅..
      setData(response.data);
    }
  }
  
  /**
|--------------------------------------------------
| ⚡ 5. useEffect
|--------------------------------------------------
*/
  /**  목록 조회 GET */
  useEffect(() => {
    fetchData(idx);
  }, [idx]); // idx가 변경될 때마다 fetchData() 호출

  /*
|--------------------------------------------------
|   화면
|--------------------------------------------------
*/

  return (
    <Layout
      title={"예약"}
      backUrl="/member/reserve/list"
    >
      <div className="section white-type">
        <div className="wrapper">
          <div className="writing-box">
            <div className="title-wrap sub">
              <div className="title">예약 일시</div>
            </div>
            <div className="row-half">
              <div className="datepicker" >
                <div className="datepicker" >
                  <ReactDatePicker
                    ref={datepickerRef}
                    shouldCloseOnSelect
                    dateFormat="yyyy-MM-dd"
                    placeholderText="선택하세요"
                    id="datepicker1"
                    selected={selectedDate} // 선택된 날짜를 ReactDatePicker에 전달
                    onChange={(date) => setSelectedDate(date as Date)}
                    minDate={new Date()} // 오늘 이전의 날짜 선택 불가능하게 설정
                    maxDate={addMonths(new Date(), 1)} // 한 달 후의 날짜 선택 불가능하게 설정
                  />
                </div>
              </div>
               <div className="datepicker" >
                  <ReactDatePicker
                    ref={datepickerRef}
                    shouldCloseOnSelect
                    placeholderText="선택하세요"
                    id="datepicker2"
                    selected={formattedTime}
                    showTimeSelect
                    showTimeSelectOnly
                    timeIntervals={30}
                    timeCaption="Time"
                    dateFormat="HH:mm"
                    minTime={minTime} // 09:00부터 선택 가능하도록 설정
                    maxTime={maxTime} // 24:00까지 선택 가능하도록 설정
                    onChange={(selectedTime) => handleTimeChange(selectedTime)}
                  />
                </div>
            </div>
          </div>
        </div>
      </div>
    </Layout>
  );
}

export default DetailPage;

CSS 적용

두가지 CSS 커스텀을 style.scc 에 적용했다.

1. 기본 화면은 해당 월이 아닌 이전 월, 다음 월의 숫자가 검정색으로 보여지기 때문에, 가독성을 위해 해당월만 검정 숫자로 표현되고, 다른 월의 날짜는 회색으로 표현되도록 추가했다.

2. 두번째로는 달력이 자꾸 화면 밖으로 나가서 사용이 불편해서 추가했다. 예쁘게 화면 안으로 잘 들어온다.

/* reserve/[idx] 화면의 datepicker의 추가 설정 (보여지는달력 해당월아닌 다른월 날짜는 회색컬러로 글자처리)  */
.react-datepicker__day--outside-month {
  color: #a8a8a8 !important;
  pointer-events: none;
} 

/* 달력이 화면 밖으로 나가서 밖으로 나가지 않도록 적용*/
.react-datepicker-popper{
  width: 50%;
}

조금 삽질하긴 했지만, 최종 위 코드로 완벽하게 구현했다.

datepicker로 전달받은 날짜를 포맷팅해서 DB 저장까지 완료했다.

뿌듯!!

[Next.js] 게시판 화면, 상세조회, 팝업 컴포넌트 개발

Nellie Kim — Thu, 15 Feb 2024 15:12:25 +0900

react 11.1.2 , next.js 17.0.2 로 개발한 게시판 화면이다.

1. list.tsx

문의 목록 게시판

import React, { useState, useEffect } from "react";
import Layout from "example/containers/Layout";
import { getAdminInquiryList, InfoModel, Api } from "../../../api/inquiryApi";
import { useRouter } from "next/router";
import DatePicker from "react-datepicker";
import { format } from "date-fns";
import "react-datepicker/dist/react-datepicker.css";

import {
  Label,
  Input,
  Button,
  WindmillContext,
} from "@roketid/windmill-react-ui";
import {
  TableBody,
  TableContainer,
  Table,
  TableHeader,
  TableCell,
  TableRow,
  TableFooter,
  Avatar,
  Badge,
  Pagination,
} from "@roketid/windmill-react-ui";
import Link from "next/link";

function InquiryPage() {
  const [page, setPage] = useState(1);
  const [totalResults, setTotalResults] = useState(0);
  const [searchStartDt, setSearchStartDt] = useState(() => {
    const today = new Date();
    today.setMonth(today.getMonth() - 3);
    return today;
  });
  const [searchEndDt, setSearchEndDt] = useState(new Date());
  const [keyword, setKeyword] = useState("");
  const [storeName, setStoreName] = useState("");
  const router = useRouter();
  // pagination setup
  const resultsPerPage = 15;
  const [data, setData] = useState<InfoModel[]>([]);

  // 문의 상세조회 페이지로 이동
  const moveInquiryDetail = (idx: number) => {
    router.push(`/parkgolf/ceo/inquiry/${idx}`);
  };

  // 목록 조회로 이동
  const moveInquiryList = () => {
    router.push(`/parkgolf/ceo/inquiry/list/`);
  };

  // 목록 조회 (대기) 로 이동
  const moveInquiryListWait = () => {
    router.push(`/parkgolf/ceo/inquiry/listWait/`);
  };

  // 목록 조회 (완료) 로 이동
  const moveInquiryListCmpt = () => {
    router.push(`/parkgolf/ceo/inquiry/listCmpt/`);
  };

  // 서버에서 데이터 호출
  async function fetchData() {
    const request = {
      keyword: keyword,
      searchStartDt: format(searchStartDt, "yyyy-MM-dd HH:mm:ss"),
      searchEndDt: format(searchEndDt, "yyyy-MM-dd HH:mm:ss"),
      storeName: storeName,
      pSize: resultsPerPage,
      pNum: page,
    };

    const response = await getAdminInquiryList(request);

    console.log("response", response);

    if (response.status == 200) {
      // 성공하면 데이터 세팅
      setTotalResults(response.data.totalCount);

      response.data.dataList.forEach((item: InfoModel) => {
        item.formattedCrteDt = format(item.crteDt as Date, "yyyy.MM.dd HH:mm");
      });

      setData(response.data.dataList);
    }
  }

  function onPageChange(page: number) {
    setPage(page);
  }

  // 페이지가 변경될 때마다 fetchData 호출
  useEffect(() => {
    fetchData();
  }, [page]);

  return (
    <Layout>
      <div className="content">
        <div className="box">
          <div className="page-title">
            1:1문의
            <div className="page-tab-wrap">
              <a
                href="javascript:void(0);"
                className="btn btn-border-green"
                onClick={() => moveInquiryList()}
              >
                전체보기
              </a>
              <a
                href="javascript:void(0);"
                className="btn btn-border"
                onClick={() => moveInquiryListWait()}
              >
                대기
              </a>
              <a
                href="javascript:void(0);"
                className="btn btn-border"
                onClick={() => moveInquiryListCmpt()}
              >
                답변 완료
              </a>
            </div>
          </div>

          <div className="sch-wrap">
            <div className="datepicker-wrap">
              <span>기간</span>
              <div className="datepicker">
                <DatePicker
                  selected={searchStartDt}
                  shouldCloseOnSelect
                  onChange={(date: Date) => setSearchStartDt(date)}
                  dateFormat="yyyy-MM-dd"
                  id="datepicker1"
                />
              </div>
              <span>~</span>
              <div className="datepicker">
                <DatePicker
                  selected={searchEndDt}
                  onChange={(date: Date) => setSearchEndDt(date)}
                  dateFormat="yyyy-MM-dd"
                  id="datepicker2"
                />
              </div>
            </div>
            <div className="input-btn-group">
              <span>매장명</span>
              <Input
                id="storeName"
                type="text"
                value={storeName}
                onChange={(e) => setStoreName(e.target.value)}
              />
              <span>제목+내용</span>
              <Input
                id="keyword"
                type="text"
                value={keyword}
                onChange={(e) => setKeyword(e.target.value)}
              />
              <Button onClick={fetchData} className="btn btn-border">
                검색
              </Button>
            </div>
          </div>

          <TableContainer>
            <Table>
              <colgroup>
                <col style={{ width: "50px" }} />
                <col style={{ width: "150px" }} />
                <col style={{ width: "270px" }} />
                <col style={{ width: "250px" }} />
                <col style={{ width: "180px" }} />
              </colgroup>
              <TableHeader>
                <tr>
                  <TableCell>
                    <span className="title">No</span>
                  </TableCell>
                  <TableCell>
                    <span className="title">상태</span>
                  </TableCell>
                  <TableCell>
                    <span className="title">제목</span>
                  </TableCell>
                  <TableCell>
                    <span className="title">매장명</span>
                  </TableCell>
                  <TableCell>
                    <span className="title">문의 일시</span>
                  </TableCell>
                </tr>
              </TableHeader>
              <TableBody>
                {data.map((list, i) => (
                  <TableRow
                    key={i}
                    onClick={() => moveInquiryDetail(list.idx as number)}
                  >
                    <TableCell>
                      <span className="">{(page - 1) * 10 + i}</span>
                    </TableCell>
                    <TableCell>
                      <span
                        className={
                          list.statusCd === "ANSWER_WAIT" ? "" : "blue-text"
                        }
                      >
                        {list.statusCd === "ANSWER_WAIT" ? "대기" : "답변 완료"}
                      </span>
                    </TableCell>
                    <TableCell>
                      <span className="">{list.contents}</span>
                    </TableCell>
                    <TableCell>
                      <span className="">{list.storeName}</span>
                    </TableCell>
                    <TableCell>
                      <span className="">{list.formattedCrteDt}</span>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
            <TableFooter>
              <Pagination
                totalResults={totalResults}
                resultsPerPage={resultsPerPage}
                label="Table navigation"
                onChange={onPageChange}
              />
            </TableFooter>
          </TableContainer>
        </div>
      </div>
    </Layout>
  );
}

export default InquiryPage;

2. [idx].tsx

글 상세 조회 페이지

답글 등록, 삭제, 목록으로 가기 버튼이 있다.

/* eslint-disable @next/next/no-img-element */

import React, { useState, useRef, useEffect } from "react";
import { useRouter } from "next/router";
import {
  getAdminInquiry,
  regAdminInquiry,
  delAdminInquiry,
  InfoModel,
  Api,
} from "../../../api/inquiryApi";
import Layout from "example/containers/Layout";
import { format } from "date-fns";
import Popup from "../component/popup";
import Image from "next/image";

function DetailPage() {
  /**
  |--------------------------------------------------
  |   1. 일반 변수
  |--------------------------------------------------
  */
  const router = useRouter();
  const { idx } = router.query; // URL에서 idx 매개변수에 액세스
  const [data, setData] = useState<InfoModel>(); // 상세조회 data
  const [contents, setContents] = useState<string>(""); // 문의 내용
  const [contentsRpl, setContentsRpl] = useState<string>(""); // 답변 내용
  const [isPopupOpenReg, setIsPopupOpenReg] = useState<boolean>(false); // 답변 완료 팝업창 변수
  const [isPopupOpenReg2, setIsPopupOpenReg2] = useState<boolean>(false); // 답변 완료 팝업창2 변수
  const [isPopupOpenDel, setIsPopupOpenDel] = useState<boolean>(false); // 삭제  팝업창2 변수
  const [isPopupOpenDel2, setIsPopupOpenDel2] = useState<boolean>(false); // 삭제 팝업창2 변수

  /**
  |--------------------------------------------------
  |   2. 일반 함수
  |--------------------------------------------------
  */
  /** 2-1. 답변 입력 시 contents 변수 변경 */
  const handleContentsChange = (e: any) => {
    setContentsRpl(e.target.value);
  };

  /** 2-2. 답변 완료 버튼 클릭 시 - 팝업창 1 열기 */
  const handleRegRpl = () => {
    if (!contentsRpl) {
      alert("답변을 작성해주세요.");
      return;
    } else {
      setIsPopupOpenReg(true);
    }
  };

  /** 2-3. 답변 완료 '팝업창' 확인 클릭 시  - 팝업창2 열기*/
  const handleRegRplCmpt = () => {
    // 팝업창1 닫기
    setIsPopupOpenReg(false);

    // 서버에 답변 post하고 상세페이지 다시 로드
    fetchDataReg(Number(idx), contentsRpl);

    // '답변이 완료되었습니다' 팝업창 열기
    setIsPopupOpenReg2(true);
  };

  /** 2-4. '질문 삭제' 클릭 시 - 팝업창1 열기 */
  const handleDel = () => {
    setIsPopupOpenDel(true);
  };

  /** 2-5. 질문 삭제 '팝업창' 확인 클릭 시 - 팝업창2 열기 */
  const handleDelCmpt = () => {
    // 팝업창 닫기
    setIsPopupOpenDel(false);

    // 서버에서 글 삭제만 (라우팅x)
    fetchDataDel(Number(idx));

    // '삭제가 완료되었습니다' 팝업창 열기
    setIsPopupOpenDel2(true);
  };

  /** 2-6. 삭제 팝업창2에서 확인 클릭 시, 팝업창2 닫고 목록으로 라우팅 */
  const handleCancelDel = () => {
    setIsPopupOpenDel2(false);
    moveInquiryList();
  };

  /** 2-7. 모달창 닫기(확인 또는 취소) 클릭 시 */
  const handleCancel = () => {
    setIsPopupOpenReg(false);
    setIsPopupOpenReg2(false);
    setIsPopupOpenDel(false);
  };

  /**
  |--------------------------------------------------
  |   3. fetch 함수 
  |--------------------------------------------------
  */
  /** 3-1. 서버에서 1:1문의 목록 가져오기 */
  async function fetchData(idx: any) {
    const request = {
      idx: Number(idx),
    };

    const response = await getAdminInquiry(request);

    if (response.status == 200) {
      // 성공하면 데이터 세팅..
      response.data.formattedCrteDt = format(
        response.data.crteDt as Date,
        "yyyy.MM.dd HH:mm"
      );

      // 개행 문자열 처리
      if (response.data.inquiryRplDtoList[0]?.contents !== undefined) {
        response.data.inquiryRplDtoList[0].contents =
          response.data.inquiryRplDtoList[0].contents.replace(/\n/g, "<br>");
      }

      setData(response.data);
    }
  }

  /** 3-2. 서버에 답변 post */
  async function fetchDataReg(idx: number, contentsRpl: string) {
    const infoModel: InfoModel = {
      parentIdx: idx,
      contents: contentsRpl,
    };

    const response = await regAdminInquiry(infoModel);

    if (response.status == 200) {
      fetchData(idx);
    }
  }

  /**3-3. 게시글 삭제 */
  async function fetchDataDel(idx: number) {
    const infoModel: InfoModel = {
      idx: Number(idx),
    };
    const response = await delAdminInquiry(infoModel);

    if (response.status !== 200) {
      alert("삭제에 실패했습니다.");
    }
  }

  /**
  |--------------------------------------------------
  |   4. 라우팅 함수 
  |--------------------------------------------------
  */
  /** 문의 상세조회 페이지로 이동 */
  const moveInquiryDetail = (idx: number) => {
    router.push(`${idx}`);
    // router.push(`/parkgolf/ceo/inquiry/${idx}`);
  };

  /** 목록으로 이동 */
  const moveInquiryList = () => {
    router.push("/parkgolf/ceo/inquiry/list/");
  };

  /**
  |--------------------------------------------------
  | ⚡ 5. useEffect
  |--------------------------------------------------
  */

  /**  목록 조회 GET */
  useEffect(() => {
    fetchData(idx);
  }, [idx]); // idx가 변경될 때마다 fetchData() 호출

  /** 데이터 받아올 때마다 개행문자열 찾아서 개행하여 노출 */
  useEffect(() => {
    if (data?.contents !== undefined) {
      const formattedContents = data.contents.replace(/\n/g, "<br>");
      setContents(formattedContents);
    }
  }, [data]);

  /*
  |--------------------------------------------------
  |   화면
  |--------------------------------------------------
  */
  return (
    <Layout>
      <div className="content">
        <div className="box">
          <div className="page-title">1:1문의</div>
          {data && ( // data가 존재할 때만 렌더링
            <table className="white-table left-table">
              <colgroup>
                <col style={{ width: "150px" }} />
                <col />
              </colgroup>
              <tbody>
                <tr>
                  <th>상태</th>
                  <td>
                    <span
                      className={
                        data.statusCd === "ANSWER_WAIT" ? "" : "blue-text"
                      }
                    >
                      {data.statusCd === "ANSWER_WAIT" ? "대기" : "답변 완료"}
                    </span>
                  </td>
                </tr>
                <tr>
                  <th>제목</th>
                  <td>{data.title}</td>
                </tr>
                <tr>
                  <th>내용</th>
                  <td>{contents}</td>
                </tr>
                <tr>
                  <th>사진</th>
                  <td>
                    <ul className="image-preview">
                      <li>
                        <a href="javascript:void(0);" className="img-box">
                          <img
                            src={data.apndFileList?.[0]?.urlPath}
                            alt=""
                            width={200}
                            height={200}
                          />
                        </a>
                      </li>
                      <li>
                        <a href="javascript:void(0);" className="img-box">
                          <img
                            src="https://via.placeholder.com/200x300"
                            alt="Placeholder"
                            width={200}
                            height={300}
                          />
                        </a>
                      </li>
                      <li>
                        <a href="javascript:void(0);" className="img-box">
                          <img
                            src="https://via.placeholder.com/300x200"
                            alt="Placeholder"
                            width={300}
                            height={200}
                          />
                        </a>
                      </li>
                    </ul>
                  </td>
                </tr>
                <tr>
                  <th>매장명</th>
                  <td>
                    {data.storeName}
                    <a href=""> [매장정보 바로가기]</a>
                  </td>
                </tr>
                <tr>
                  <th>문의 일시</th>
                  <td>{data.formattedCrteDt}</td>
                </tr>
              </tbody>
            </table>
          )}
          {data &&
          data.inquiryRplDtoList &&
          data.inquiryRplDtoList.length > 0 ? (
            <>
              <div className="page-title mt50">답변</div>
              <table className="white-table left-table">
                <colgroup>
                  <col style={{ width: "150px" }} />
                  <col />
                </colgroup>
                <tbody>
                  <tr>
                    <th>내용</th>
                    {/* <td>{data.inquiryRplDtoList[0].contents}</td>   개행 되도록 아래 코드로 수정*/}
                    {data.inquiryRplDtoList[0]?.contents ? (
                      <td
                        dangerouslySetInnerHTML={{
                          __html: data.inquiryRplDtoList[0].contents,
                        }}
                      ></td>
                    ) : null}
                  </tr>
                  <tr>
                    <th>답변 일시</th>
                    <td>{data.inquiryRplDtoList[0].formattedCrteDt}</td>
                  </tr>
                </tbody>
              </table>
            </>
          ) : (
            <>
              <div className="page-title mt50">답변</div>
              <table className="white-table left-table">
                <colgroup>
                  <col style={{ width: "150px" }} />
                  <col />
                </colgroup>
                <tbody>
                  <tr>
                    <th>내용</th>
                    <td>
                      <textarea
                        cols={30}
                        rows={10}
                        value={contentsRpl}
                        onChange={handleContentsChange}
                      ></textarea>
                    </td>
                  </tr>
                </tbody>
              </table>
            </>
          )}
          <div className="btn-wrap sb-type">
            <a className="btn btn-border btn-submit" onClick={moveInquiryList}>
              목록
            </a>
            <a className="btn btn-border btn-submit" onClick={handleRegRpl}>
              답변 완료
            </a>
            {isPopupOpenReg && (
              <Popup
                isOpen={isPopupOpenReg}
                message="답변을 완료 하시겠습니까?<br><br>완료한 답변은 수정이 불가능합니다."
                onConfirm={handleRegRplCmpt}
                onCancel={handleCancel}
              />
            )}
            {isPopupOpenReg2 && (
              <Popup
                isOpen={isPopupOpenReg2}
                message="답변이 완료되었습니다."
                onConfirm={handleCancel}
                onCancel={() => {}}
              />
            )}
            <a className="btn btn-gray btn-submit" onClick={handleDel}>
              질문 삭제
            </a>
            {isPopupOpenDel && (
              <Popup
                isOpen={isPopupOpenDel}
                message="질문을 삭제 하시겠습니까?<br><br>삭제 시 복구가 불가능합니다."
                onConfirm={handleDelCmpt}
                onCancel={handleCancel}
              />
            )}
            {isPopupOpenDel2 && (
              <Popup
                isOpen={isPopupOpenDel2}
                message="삭제 되었습니다."
                onConfirm={handleCancelDel}
                onCancel={() => {}}
              />
            )}
          </div>
        </div>
      </div>
    </Layout>
  );
}

export default DetailPage;

3. popup.tsx

팝업 컴포넌트를 따로 생성함

import React from "react";

interface PopupProps {
  isOpen: boolean;
  message: string; // 모달창 내 삽입할 메시지
  onConfirm: () => void; // 확인 클릭 시 동작하는 함수
  onCancel?: () => void; // 취소 클릭 시 동작하는 함수 (옵션)
}

const Popup: React.FC<PopupProps> = ({
  isOpen,
  message,
  onConfirm,
  onCancel,
}) => {
  return (
    <div className={`popup-wrap ${isOpen ? "active" : ""}`}>
      <div className="popup-box">
        <div className="popup-cont">
          <div
            className="message"
            dangerouslySetInnerHTML={{ __html: message }}
          ></div>
        </div>
        <ul className="submit-btn">
          <li>
            <button className="btn btn-green" onClick={onConfirm}>
              확인
            </button>
          </li>
          {onCancel && ( // onCancel이 정의되어 있을 때만 취소 버튼을 렌더링
            <li>
              <button
                className="btn btn-gray popup-cancel-btn"
                onClick={onCancel}
              >
                취소
              </button>
            </li>
          )}
        </ul>
      </div>
    </div>
  );
};

export default Popup;

아래 화면이 생성되었다.

VScode 에서 gitignore 설정

Nellie Kim — Wed, 7 Feb 2024 22:11:51 +0900

10000개가 넘게 커밋목록에 뜬다 ;;;

gitignore 설정을 해주었다 .

아래 사이트에서 'react', 'nextJS' 같이 원하는 키워드를 입력하고 '생성' 버튼을 누르면 적절한 ignore 형식을 만들어준다.

https://www.toptal.com/developers/gitignore

gitignore.io

Create useful .gitignore files for your project

www.toptal.com

# Created by https://www.toptal.com/developers/gitignore/api/react,nextjs
# Edit at https://www.toptal.com/developers/gitignore?templates=react,nextjs

### NextJS ###
# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# next.js
/.next/
/out/

# production
/build

# misc
.DS_Store
*.pem

# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*

# local env files
.env*.local

# vercel
.vercel

# typescript
*.tsbuildinfo
next-env.d.ts

### react ###
.DS_*
*.log
logs
**/*.backup.*
**/*.back.*

node_modules
bower_components

*.sublime*

psd
thumb
sketch
keys.json # 이걸 해주어야 한다!!!!!!!!!!!

# End of https://www.toptal.com/developers/gitignore/api/react,nextjs

keys.json 이 핵심이다. 이건 안만들어줌 ㅠㅠ

이걸 해주니까 2개로 줄어듬!!!

nodejs 실행 시 오류 해결 (error:0308010C:digital envelope routines::unsupported)

Nellie Kim — Wed, 7 Feb 2024 20:39:43 +0900

프론트 시작.

1. 클론 받기

1) 인텔리제이에서 프론트작업을 원래처럼 클론받기

2) VSCode에서 File → Open Folder → 인텔리제이에서 클론받았던 폴더 선택

2. yarn 설치 및 환경 변수 설정

터미널에서

npm install -g yarn → yarn install → $env:NODE_OPTIONS="--openssl-legacy-provider"

3. yarn dev 로 프로젝트 실행

터미널에서 yarn dev 입력

2번 과정에서 환경변수가 설정이 안되고

파일 이름, 디렉터리 이름 또는 볼륨 레이블 구문이 잘못되었습니다.

라는 에러만 내뱉었다 .

yarn dev 로 실행을 해봐도, 이런 에러가 나고 실행이 되지 않았다.

  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v18.17.0
error Command failed with exit code 1.

error:0308010C:digital envelope routines::unsupported

이 에러는 도대체 뭘까. ......

해결 방법

버전을 16으로 바꿔주거나, 웹팩5를 설치해주면 된다.

Webpack과 같은 명령줄 도구는 "MD4 알고리즘"을 사용하여 파일 해시를 생성하며,

이러한 파일 해시는 JavaScript 파일의 변경 사항을 추적하는 데 사용된다고 한다.

기본적으로 OpenSSL 버전 3은 MD4 알고리즘 지원을 활성화하지 않기때문에 Node.js를 버전 17 이상으로 업그레이드한 경우 Webpack을 사용하여 애플리케이션을 빌드할 때 이 오류가 표시된다고 한다.

그렇다고 한다....

먼저, 버전을 16으로 바꾸니까 바로 됐다 ..

Windows PowerShell 에서 버전 다운그레이드

두번째로 웹팩을 다운로드해준다.

npm install webpack@latest

그리고 터미널에서 아래와 같이 환경변수 설정.

 set NODE_OPTIONS=--openssl-legacy-provider

해결 방법 정리

1 node.js 버전을 16으로 다운그레이드

또는

2. 웹팩 5를 다운 & set NODE_OPTIONS=--openssl-legacy-provider 로 환경변수를 지정

나는 버전을 18로 설정하고 2번 방법으로 해결하였다.

https://sebhastian.com/error-0308010c-digital-envelope-routines-unsupported/

How to fix error:0308010C:digital envelope routines::unsupported on NodeJS

This article explains how to fix error:0308010C in Node version 17 and above

sebhastian.com

https://velog.io/@angel_eugnen/TILerror0308010cdigital-envelope-routinesunsupported

velog

velog.io

node.js 버전이 바뀌지 않는 문제 해결 (Error: error:0308010C:digital envelope routines::unsupported 에러, nvm 설치, 기존 폴더 삭제)

Nellie Kim — Wed, 7 Feb 2024 19:39:01 +0900

react 를 설치 중에 node.js 버전 다운그레이드를 하면서 발생한 문제 해결 기록 ..

$env:NODE_OPTIONS="--openssl-legacy-provider"

이 명령어를 치는데 계속 오류가 났다.

yarn dev 도 실행했는데 Error: error:0308010C:digital envelope routines::unsupported 에러가 나서 , 구글링 해보니 node.js 버전을 다운그레이드해야한다고 했다.

현재는 버전이 20이라서 지원이 안되는 듯 하다.... 18버전을 다운로드 하려니까 지원이 안되는 듯 하다.

버전을 다운그레이드 하려면 nvm을 설치해야 한다고 한다 ..;;

그래서 nvm(node version manager) 를 설치한 후에 ,

https://github.com/coreybutler/nvm-windows/releases

Releases · coreybutler/nvm-windows

A node.js version management utility for Windows. Ironically written in Go. - coreybutler/nvm-windows

github.com

Windows PowerShell에서 직접 nvm install 18을 해서 18을 설치해주었다.

nvm use 18을 해보니 버전이 잘 바뀐 것을 확인했다.

근데 다시 버전 확인해보니까 계속 20이 나왔다 ;;; 버전이 왜 안바뀌는거야 ;;;;아놔

해결 방법

Program Files 에서 nodejs폴더를 삭제하고 다시 해보니까 됐다...ㅠㅠㅠㅠㅠ

출처

https://sanghee01.tistory.com/33

[Node.js] nvm / Node.js 버전 변경 방법 / lts로 다운그레이드 방법 / Error: error:0308010C:digital envelope routine

예전에 작업했던 react 파일 npm start 시키는데 아래 에러가 뜨는 것이다. Error: error:0308010C:digital envelope routines::unsupported 찾아보니까 내가 최근에 Node.js 버전을 최신꺼로 바꿔서 그런 것이었다. 그래

sanghee01.tistory.com

https://powerku.tistory.com/239

nvm use 사용했는데 node 버전 변경이 안될 때 해결 방법

문제 사항 nvm use를 실행하고 node -v를 하면 node 버전이 변경돼야하는데 변경이 되지 않는 경우가 있습니다. nvm use {version} nvm use 16 node -v // not 16 해결방법 1. 명령 프롬프트를 관리자 권한으로 실행

powerku.tistory.com