-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
517 lines (489 loc) · 27.6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
<!DOCTYPE html>
<!--
Aerial by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>박대호의 포트폴리오</title>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, user-scalable=no"
/>
<meta name="description" content="dhpark's web page" />
<meta property="og:title" content="개발자 지망생 박대호 포트폴리오" />
<meta property="og:description" content="백엔드 개발자 지망생 박대호의 포트폴리오를 기록한 깃허브 페이지입니다." />
<meta property="og:url" content="https://pdh4869.github.io">
<meta
property="og:image"
content="https://pdh4869.github.io/images/anonymous.png"
/>
<link rel="icon" type="images/png" href="assets/images/guitar.png">
<link
href="https://webfontworld.github.io/gmarket/GmarketSans.css"
rel="stylesheet"
/>
<link href="assets/css/main.css" rel="stylesheet" />
<noscript
><link rel="stylesheet" href="assets/css/noscript.css"
/></noscript>
<style>
body {
font-family: GmarketSans;
}
.divider-divs > div {
position: relative;
margin-top: 20px;
margin-bottom: 20px; /* 원하는 여백 설정 */
}
.divider-divs > div::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 90%;
height: 1px;
background-color: #dee2e6;
}
p {
font-weight: bold;
font-size: 25px;
}
li {
margin-bottom: 7px;
}
li img {
vertical-align: middle;
}
</style>
</head>
<body class="is-preload">
<div id="wrapper">
<div id="bg"></div>
<div id="overlay"></div>
<div id="main">
<!-- Header -->
<header id="header">
<div align="left" style="margin-left: 200px">
<h1>DAEHO PARK Portfolio</h1>
</div>
<div class="divider-divs" style="display: flex; gap: 200px">
<div style="margin-left: 200px">
<div align="left"><p>About Me</p></div>
<div align="left" style="color: inherit; margin-bottom: 30px">
<br />
<span>백엔드 개발자 지망생 박대호입니다.</span> <br /><br />
<span>현재 엔코아 아카데미에서</span>
<span style="font-weight: 600"
>"한화시스템 BEYOND SW CAMP"</span
>
<span>라는 부트캠프를 진행 중입니다.</span> <br /><br />
<span>
Java, Spring을 활용한 백엔드 개발을 중심으로 웹 개발에 필요한
기술을 학습하고, 다수의 </span
><br /><br />
<span>프로젝트를 진행 중입니다.</span>
</div>
</div>
<div>
<div align="left"><p>contact</p></div>
<div style="padding-top: 20px" align="left">
<span>
<img
src="assets/images/email.png"
style="width: 1em; height: 1em"
/>
<span class="font-bold text-default mr-2"
>[email protected]</span
> </span
><br /><br />
<span>
<img
src="assets/images/github.png"
style="width: 1em; height: 1em"
/>
<a href="https://github.com/pdh4869">Github</a> </span
><br /><br />
<span>
<img
src="assets/images/linkedin.png"
style="width: 1em; height: 1em; margin-right: 5px"
/><a
href="https://www.linkedin.com/in/%EB%8C%80%ED%98%B8-%EB%B0%95-942b24245/"
>LinkedIn</a
>
</span>
</div>
</div>
</div>
</header>
<div>
<div
class="divider-divs"
id="profile"
style="margin-left: 200px; margin-top: 20px"
>
<p>Profile</p>
<div style="display: flex; gap: 40px">
<div>
<span>2017.03 - 2023.02</span><br /><br />
<span><b>창원대학교</b></span
><br /><br />
</div>
<div>
<span>정보통신공학과</span><br /><br />
<span>3.35 / 4.5</span>
</div>
</div>
</div>
<div id="stack" style="margin-left: 200px">
<div class="divider-divs" style="margin-top: 30px">
<p>Skills</p>
<div
style="
display: flex;
gap: 100px;
padding-bottom: 30px;
padding-top: 20px;
"
>
<div>
<span class="break-words font-bold sm:mt-0">Frontend</span>
</div>
<div
class="mt-4 md:mt-0 col-span-4"
style="margin-right: 150px"
>
<li>
<img
src="https://img.shields.io/badge/Vue.js-35495E?style=flate&logo=vuedotjs&logoColor=4FC08D"
/>
</li>
<li>
<img
src="https://img.shields.io/badge/html5-E34F26?style=flat&logo=html5&logoColor=white"
/>
</li>
<li>
<img
src="https://img.shields.io/badge/css-1572B6?style=flat&logo=css3&logoColor=white"
/>
</li>
<li>
<img
src="https://img.shields.io/badge/javascript-F7DF1E?style=flat&logo=javascript&logoColor=black"
/>
</li>
</div>
</div>
<div
style="
display: flex;
gap: 100px;
padding-bottom: 30px;
padding-top: 20px;
"
>
<div>
<span class="break-words font-bold sm:mt-0">Backend</span>
</div>
<div class="mt-4 md:mt-0 col-span-4">
<li>
<img
src="https://img.shields.io/badge/Java-ED8B00?style=flat&logo=openjdk&logoColor=white"
/>
</li>
<li>
<img
src="https://img.shields.io/badge/spring-6DB33F?style=flat&logo=spring&logoColor=white"
/>
</li>
<li>
<img
src="https://img.shields.io/badge/springboot-6DB33F?style=flat&logo=springboot&logoColor=white"
/>
</li>
</div>
</div>
<div
style="
display: flex;
gap: 90px;
padding-bottom: 30px;
padding-top: 20px;
"
>
<div>
<span class="break-words font-bold sm:mt-0">Database</span>
</div>
<div class="mt-4 md:mt-0 col-span-4">
<li>
<img
src="https://img.shields.io/badge/mariaDB-003545?style=flat&logo=mariaDB&logoColor=white"
/>
</li>
<li>
<img
src="https://img.shields.io/badge/postgresql-4169e1?style=flat&logo=postgresql&logoColor=white"
/>
</li>
</div>
</div>
<div
style="
display: flex;
gap: 150px;
padding-bottom: 30px;
padding-top: 20px;
"
>
<div><span>OS</span></div>
<div>
<li>
<img
src="https://img.shields.io/badge/linux-FCC624?style=flat&logo=linux&logoColor=black"
/>
</li>
<li>
<img
src="https://shields.io/badge/Windows--9cf?logo=Windows&style=social"
/>
</li>
</div>
</div>
<div
style="
display: flex;
gap: 90px;
padding-bottom: 30px;
padding-top: 20px;
"
>
<div><span>Language</span></div>
<div>
<li>
<img
src="https://img.shields.io/badge/python-3776AB?style=flat&logo=python&logoColor=white"
/>
</li>
<li>
<img
src="https://img.shields.io/badge/Language-C?style=flat&logo=C&logoColor=white&color=%23A8B9CC"
/>
</li>
</div>
</div>
</div>
</div>
<div id="tools" style="margin-left: 200px" class="divider-divs">
<p>Tools</p>
<div
style="
display: flex;
gap: 90px;
padding-bottom: 30px;
padding-top: 20px;
"
>
<div>
<li>
<img
src="https://img.shields.io/badge/Visual%20Studio%20Code-007ACC?style=flat&logo=Visual%20Studio%20Code&logoColor=white"
/>
<img
src="https://img.shields.io/badge/Anaconda-44A833?style=flat&logo=Anaconda&logoColor=white"
/>
<img
src="https://img.shields.io/badge/Eclipse%20IDE-2C2255?style=flat&logo=Eclipse%20IDE&logoColor=white"
/>
</li>
<li>
<img
src="https://img.shields.io/badge/Git-F05032?style=flat&logo=git&logoColor=white"
/>
<img
src="https://img.shields.io/badge/GitHub-100000?style=flat&logo=github&logoColor=white
"
/>
<img
src="https://img.shields.io/badge/Slack-4A154B?style=flat&logo=slack&logoColor=white"
/>
<img
src="https://img.shields.io/badge/Postman-FF6C37?style=flat&logo=Postman&logoColor=white"
/>
<img
src="https://img.shields.io/badge/Vmware-607078?style=flat&logo=Vmware&logoColor=white"
/>
</li>
</div>
</div>
</div>
<div style="padding-bottom: 30px; margin-left: 200px">
<div style="margin-bottom:40px;"><p>Projects</p></div>
<div class="divider-divs">
<div style="display: flex; margin-top: 40px;">
<div>
<span style="font-weight: bold"
>악기 연주자들을 위한</span><br/>
<span style="font-weight: bold">
음계 인식 애플리케이션
<a
href="https://github.com/pdh4869/ChordTracker"
>[링크]</a
></span
><br /><br /><span>2022.02 ~ 09</span>
</div>
<div style="margin-left: 40px; margin-bottom: 70px">
<span style="margin-bottom: 20px; display: block;">캡스톤 디자인 수업 및 졸업 작품 제작으로 진행한 개인 프로젝트입니다. 악기를 연주하는 사람들, 그 중에 초심자들이 악기를 조율하거나</span>
<span style="margin-bottom: 20px; display: block;">연습하는 데 도움을 주기 위하여 안드로이드 애플리케이션을 제작하였습니다. 안드로이드 환경의 스마트폰에 부착된 마이크에 음악을 인식</span>
<span style="margin-bottom: 20px; display: block;">시키거나, 직접 악기를 연주하여 나오는 소리를 인식시켜 음계를 도출하는 것이 주 기능입니다. 아날로그 신호인 음성을 디지털 신호인 주파수로</span>
<span style="margin-bottom: 20px; display: block;">변환시키고, 그 주파수의 pitch를 찾아 음계표에 대응시킴으로써 도, 레, 미 등의 음계를 화면에 출력하며 로컬 환경에 텍스트 파일로 저장합니다.</span>
<br/><br/>
<span style="margin-bottom: 20px; display: block;">이러한 기술을 이해하기 위하여 MATLAB, Python등을 활용하여 FFT (Fast Fourier Transform) 알고리즘을 활용하고, 주파수 </span>
<span style="margin-bottom: 20px; display: block;">스펙트럼을 시각화하여 주파수가 어떤 방식으로 도출되는지 알아보았습니다. 이후에 Java에서 같은 알고리즘을 구현하고, 대략적인 인터페이스를</span>
<span style="margin-bottom: 20px; display: block;">제작하였습니다. 도출된 음계를 모바일 환경에서 활용할 수도 있지만, PC 환경이 편한 경우도 있기 때문에 구글 클라우드 API를 적용하여</span>
<span style="margin-bottom: 20px; display: block;">텍스트 파일을 클라우드에 업로드하도록 제작하기도 하였습니다.</span>
<br/><br/>
<span style="margin-bottom: 20px; display: block;">음성 처리라는 특정한 한 분야를 연구해 볼 수 있었고, 설계부터 제작, 발표까지 모두 혼자 진행함으로써 학습뿐만 아니라 개발 역량 또한 강화시킬 수</span>
<span style="margin-bottom: 20px; display: block;">있었던 좋은 경험이라고 생각합니다.</span>
</div>
</div>
<div style="display: flex; margin-top: 30px;">
<div>
<span style="font-weight: bold"
>종합 여행 서비스
<a
href="https://github.com/beyond-sw-camp/be01-1st-4Team-Comprehensive-travel-services"
>[링크]</a
></span
><br /><br /><span>2023.11.20 ~ 11.24</span>
</div>
<div style="margin-left: 80px; margin-bottom: 70px;">
<span style="margin-bottom: 20px; display: block;">여행을 갈 때 필요한 숙소, 교통, 액티비티를 예약하는 가상의 서비스에 대해 데이터베이스를 설계해 본 프로젝트입니다.</span>
<span style="margin-bottom: 20px; display: block;">서비스에 대한 요구사항 분석, 논리적, 개념적, 물리적 설계를 하고, 각 컬럼에 대한 타입, 크기, 제약조건 등을 설정하는 </span>
<span style="margin-bottom: 20px; display: block;">등의 활동을 하며 클래스 다이어그램이나 ER 다이어그램 등의 산출물을 생산하였습니다. 본 프로젝트를 진행하며 </span>
<span style="margin-bottom: 20px; display: block;">데이터베이스에 대한 이해도를 높였고, 관심이 많아지게 되어, SQLD 자격증을 취득하기도 하였습니다.</span>
</div>
</div>
<div style="display: flex; margin-top: 40px;">
<div>
<span style="font-weight: bold"
>TODO List
<a
href="https://github.com/beyond-sw-camp/be01-2nd-4Team-TeamToDo"
>[링크]</a
></span
><br /><br /><span>2024.01.08 ~ 01.19</span>
</div>
<div style="margin-left: 100px; margin-bottom: 70px;">
<span style="margin-bottom: 20px; display: block;">개인별, 조직별로 할 일을 관리할 수 있는 서비스입니다. 백엔드 개발 프로젝트로, SpringBoot 환경에서 개발하였고, MariaDB를 </span>
<span style="margin-bottom: 20px; display: block;">활용하였습니다. 백엔드 부분에 DB를 연동하는 데 MyBatis와 JPA를 활용하였고, Spring Security와 JWT를 활용하여 인증과, </span>
<span style="margin-bottom: 20px; display: block;">보안을 구현하였습니다. 저는 조직별 할 일을 관리하는 부분을 담당하였고, Rest 기반으로 API를 개발하기도 하였고, thymeleaf를</span>
<span style="margin-bottom: 20px; display: block;">활용하여 html 기반으로 개발하기도 하였습니다. 기본적인 CRUD 기능을 구현함으로써 웹 개발에 대한 복기를 할 수 있었습니다.</span>
</div>
</div>
<div style="display: flex; margin-top: 40px;">
<div>
<span style="font-weight: bold"
>지식 관리 시스템 v1
<a
href="https://github.com/HW-knowledge-management/main-page"
>[링크]</a
></span
><br /><br /><span>2024.02.05 ~ 02.10</span>
</div>
<div style="margin-left: 60px; margin-bottom: 70px">
<span style="margin-bottom: 20px; display: block;">사내에서 업무에 관한 정보나 가이드를 관리할 수 있고, 동료들과 질의응답을 할 수 있는 프로젝트입니다. Vue.js와 JSON Server를</span>
<span style="margin-bottom: 20px; display: block;">활용한 프론트엔드 개발 프로젝트입니다. 완전한 서비스를 개발하기 이전에 대략적인 프로토타입을 만드는 것이 목표였으므로, 백엔드</span>
<span style="margin-bottom: 20px; display: block;">부분과 데이터베이스를 따로 제작하지 않고, JSON Server와 통신하며 데이터를 주고 받았습니다. 또한, fly.io와 firebase를 활용하여</span>
<span style="margin-bottom: 20px; display: block;">배포를 진행하였습니다.</span>
<br/><br/>
<span style="margin-bottom: 20px; display: block;">저는 업무에 대한 정보, 가이드를 관리하는 일종의 위키 시스템을 개발하였습니다. 게시글의 작성, 수정, 삭제</span> </span>
<span style="margin-bottom: 20px; display: block;">기능을 구현하였고, axios 라이브러리를 활용하여 JSON Server와 비동기 통신을 수행함으로써 데이터를 주고받도록 제작하였습니다.</span>
<span style="margin-bottom: 20px; display: block;">배포에 대한 지식을 쌓을 수 있었고, 컴포넌트 기반으로 반응형 웹을 만들어 볼 수 있었던 경험이었습니다.</span>
</div>
</div>
<div style="display: flex; margin-top: 40px;">
<div>
<span style="font-weight: bold"
>지식 관리 시스템 v2
<a
href="https://github.com/final-kms/main"
>[링크]</a
></span
><br /><br /><span>2024.03.04 ~ 04.25</span>
</div>
<div style="margin-left: 60px;margin-bottom: 70px">
<span style="margin-bottom: 20px; display: block;">마지막으로, 최종 프로젝트입니다. Vue.js에서 만든 프로젝트를 고도화하는 프로젝트로, 과정에서 학습한 모든 기술을 활용하여 하나의 </span>
<span style="margin-bottom: 20px; display: block;">완전한 웹 서비스를 개발하였습니다. 백엔드 부분을 SpringBoot와 Jpa를 활용하여 RestAPI를 만들었고, 프론트엔드를 Vue.js로 </span>
<span style="margin-bottom: 20px; display: block;">개발하였습니다. axios 등의 라이브러리를 활용하여 백엔드와 통신하였고, 배포는 aws로 하였습니다.
</span>
<br/><br/>
<span style="margin-bottom: 20px; display: block;"> 저는 이전과 마찬가지로 위키피디아 서비스를 개발하였습니다. 게시글을 작성, 수정, 삭제, 열람하는 기본 기능과 좋아요, 즐겨찾기 기능,</span>
<span style="margin-bottom: 20px; display: block;">추천순 정렬, 변경 시 알림 등의 부가 기능을 개발하였고, 알림을 애플리케이션으로도 받을 수 있도록 제작하였습니다. 그리고, redis를 </span>
<span style="margin-bottom: 20px; display: block;">활용한 토큰 관리, 서비스 분리 등을 맡아서 수행하였습니다. 처음에는 모놀리식으로 개발한 이후에 서비스를 사용자, 조직, 위키, 질의응답,</span>
<span style="margin-bottom: 20px; display: block;"> 동료 간 팔로우, 채팅 등 크게 6가지로 나누어 잠깐이나마 학습한 MSA를 활용할 수 있었습니다. 이외에는 서비스를 이용하는 회사 동료 간 </span>
<br/><br/>
<span style="margin-bottom: 20px; display: block;">개발 중에 몇 가지 문제가 있었습니다. 첫 번째는 서버가 다운되는 문제입니다. 데이터가 많은 서비스를 운영한다고 가정하여 데이터를 </span>
<span style="margin-bottom: 20px; display: block;">크롤링하여 DB에 입력하였고, 웹에 출력하려고 하니 서버에 많은 요청이 발생하여 원활한 운영이 되지 않았습니다. 이는 많은 데이터를 </span>
<span style="margin-bottom: 20px; display: block;">한 번에 불러와서 발생하는 문제였는데, 백엔드 단에서 Pageable이라는 라이브러리를 활용하여 페이징 기능을 제작하여 해결하였습니다. </span>
<span style="margin-bottom: 20px; display: block;">한 번에 불러올 데이터를 10개로 설정, 총 데이터 수를 활용하여 페이지 수를 계산하였고, 프론트엔드 단에서 페이징을 할 수 있는 기능을 </span>
<span style="margin-bottom: 20px; display: block;">만들어 페이지 이동을 할 때마다 백엔드에 새로운 요청을 하는 방식으로 제작하였습니다. 많은 데이터를 불러오는 기능이 질의응답과 위키, </span>
<span style="margin-bottom: 20px; display: block;">두 가지였는데, 위키에서는 게시판 형식으로 페이징을, 질의응답에서는 스크롤을 할 때마다 페이징을 하는 무한 스크롤 형식으로 제작하였습니다.</span>
<br/><br/>
<span style="margin-bottom: 20px; display: block;">두 번째 문제는 질의응답 부분에서 좋아요/즐겨찾기 순, 최신순 정렬하여 순위를 매기는 컴포넌트가 존재하였는데, 컴포넌트에서 순위에 있는 </span>
<span style="margin-bottom: 20px; display: block;">특정한 게시글을 클릭하면 그 게시글의 상세 정보를 포함하는 모달을 띄우는 기능이 존재하였습니다. 그 모달이 최상단에 있어야 하는데, 순위를 </span>
<span style="margin-bottom: 20px; display: block;">표시하는 컴포넌트 세개가 모달을 가리는 현상이 발생하였습니다. css 스타일에서 z-index를 활용하여 해결하려고 하였지만, 컴포넌트가 </span>
<span style="margin-bottom: 20px; display: block;">세 개였기 때문에 두 컴포넌트가 모달에 가려지면 한 컴포넌트는 모달을 가렸기 때문에 잘 해결하지 못하였습니다. 그래서, 세 컴포넌트에 있는 </span>
<span style="margin-bottom: 20px; display: block;">코드를 하나로 합쳐 작성하여 모달을 최상단에 출력되도록 하여 해결하였습니다. </span>
<br/><br/>
<span style="margin-bottom: 20px; display: block;">최종 프로젝트를 수행하면서 SpringBoot 내 라이브러리인 JWT를 활용하여
웹 애플리케이션에 보안을 적용하는 작업에 대해 더욱 잘 알 수 </span>
<span style="margin-bottom: 20px; display: block;">있었고, 프론트엔드 부분을 프레임워크를 활용하여 개발하고, 백엔드와 통신하는 방법도 있다는 것을 알게 되었습니다. 또한, 컴포넌트를 활용한 </span>
<span style="margin-bottom: 20px; display: block;">프론트엔드 개발 역량을 키울 수 있었고, 서비스를 나누어 개발하는 방법도 있다는 것을 알았으며, 무조건적으로 서비스를 나누어 개발하는</span>
<span style="margin-bottom: 20px; display: block;"> 것보다는 필요에 따라 계획을 세워 모놀리식, 마이크로 서비스를 선택해야 한다는 것을
알았습니다.</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
window.onload = function () {
document.body.classList.remove("is-preload");
};
window.ontouchmove = function () {
return false;
};
window.onorientationchange = function () {
document.body.scrollTop = 0;
};
</script>
<script type="module">
// Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.7.2/firebase-app.js";
import { getAnalytics } from "https://www.gstatic.com/firebasejs/10.7.2/firebase-analytics.js";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "AIzaSyDihrI-tKCBqt1sqC4botTokAXSteZx550",
authDomain: "html5-263b9.firebaseapp.com",
projectId: "html5-263b9",
storageBucket: "html5-263b9.appspot.com",
messagingSenderId: "426098009965",
appId: "1:426098009965:web:d3a6b11b7c6b03fe621c64",
measurementId: "G-DVQ7MP3QJ3",
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
</script>
</body>
</html>