rename: 이미지 포맷을 webp로 변경

Author: HyunJinNo

_posts/2024-06-21-kakao-map.md

@@ -38,21 +38,21 @@ Next.js에서 Kakao 지도 API 적용 방법에 대해 정리한 페이지입니
 
 로그인 후에 `내 애플리케이션` 항목에 들어가서 애플리케이션을 추가합니다.
 
-<img src="/assets/img/front-end/kakao-map/kakao-map1.png" alt="kakao-map1" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);"/>
+<img src="/assets/img/front-end/kakao-map/pic1.webp" alt="pic1" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);"/>
 
 위와 같이 <b>앱 이름, 회사명, 카테고리</b>를 선택한 후 저장 버튼을 클릭합니다.
 
 ### JavaScript 키 확인 및 복사
 
 생성된 애플리케이션에 들어가 `앱 키` 항목을 선택한 후 `JavaScript 키`를 복사합니다.
 
-<img src="/assets/img/front-end/kakao-map/kakao-map2.png" alt="kakao-map2" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);"/>
+<img src="/assets/img/front-end/kakao-map/pic2.webp" alt="pic2" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);"/>
 
 ### 플랫폼 등록
 
 `플랫폼` 항목에 들어가 `Web 플랫폼 등록` 버튼을 클릭합니다.
 
-<img src="/assets/img/front-end/kakao-map/kakao-map3.png" alt="kakao-map3" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);"/>
+<img src="/assets/img/front-end/kakao-map/pic3.webp" alt="pic3" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);"/>
 
 위와 같이 도메인 정보를 입력한 후 `저장` 버튼을 클릭합니다.
 
@@ -68,7 +68,7 @@ Next.js에서 Kakao 지도 API 적용 방법에 대해 정리한 페이지입니
 KAKAO_API_KEY = [JavaScript Key를 입력하는 곳]
 ```
 
-<img src="/assets/img/front-end/kakao-map/kakao-map4.png" alt="kakao-map4" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);"/>
+<img src="/assets/img/front-end/kakao-map/pic4.webp" alt="pic4" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);"/>
 
 추가적으로 해당 env 파일을 버전 관리 대상에서 제외하도록 `.gitignore` 파일에 다음 내용을 입력합니다.
 
@@ -78,7 +78,7 @@ KAKAO_API_KEY = [JavaScript Key를 입력하는 곳]
 .env
 ```
 
-<img src="/assets/img/front-end/kakao-map/kakao-map5.png" alt="kakao-map5" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);"/>
+<img src="/assets/img/front-end/kakao-map/pic5.webp" alt="pic5" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);"/>
 
 ### 실제 지도를 그리는 JavaScript API 불러오기
 
@@ -97,7 +97,7 @@ import Script from "next/script";
 />;
 ```
 
-<img src="/assets/img/front-end/kakao-map/kakao-map6.png" alt="kakao-map6" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);"/>
+<img src="/assets/img/front-end/kakao-map/pic6.webp" alt="pic6" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);"/>
 
 위의 코드에서 `process.env.KAKAO_API_KEY`는 위의 env 파일에서 정의한 API 키 값을 의미합니다. `autoload=false` 부분은 나중에 생성할 KakaoMapContainer 컴포넌트의 source 코드가 위의 코드보다 먼저 실행되는 것을 방지하기 위한 목적입니다. `libraries=services,clusterer,drawing` 부분은 지도와 함께 사용할 라이브러리를 지정하는 부분입니다. 지도에 마커를 표시하기 위해 위와 같이 라이브러리를 지정하였습니다.
 `Script` 컴포넌트는 4가지 스크립트 로딩 전략을 지원합니다. `strategy` 속성에 로딩 전략을 지정할 수 있으며, `beforeInteractive`는 Next.js 코드와 hydration 과정 이전에 스크립트를 로딩해야 할 때 사용합니다.
@@ -176,8 +176,8 @@ export default KakaoMapContainer;
 
 다음은 위에서 생성한 컴포넌트를 사용한 예시입니다.
 
-<img src="/assets/img/front-end/kakao-map/kakao-map7.png" alt="kakao-map7" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);"/>
+<img src="/assets/img/front-end/kakao-map/pic7.webp" alt="pic7" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);"/>
 
-<img src="/assets/img/front-end/kakao-map/kakao-map8.png" alt="kakao-map8" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);"/>
+<img src="/assets/img/front-end/kakao-map/pic8.webp" alt="pic8" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);"/>
 
 위와 같이 지도가 생성되면 마커 위에 마우스를 올려놓으면 title이 표시됩니다.

_posts/2024-06-22-expressjs-typescript.md

@@ -156,13 +156,13 @@ npm run dev
 
 서버가 실행되면 브라우저를 열고 <a href="http://localhost:4000" target="_blank">http://localhost:4000/</a> 으로 접속합니다. 화면에 `Express with TypeScript`가 표시된다면 서버 실행에 성공한 것입니다.
 
-<img src="/assets/img/back-end/expressjs-typescript/expressjs-typescript1.png" alt="expressjs-typescript1" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 0.5rem" />
+<img src="/assets/img/back-end/expressjs-typescript/pic1.webp" alt="pic1" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 0.5rem" />
 
 ### 코드 수정 후 서버 재시작하기
 
 위에서 설치한 패키지 중 `nodemon`은 코드 변경 시 서버를 자동으로 재시작하기 위해 사용합니다. `app.ts` 파일 내의 `res.send("Express with TypeScript")` 부분을 수정해보도록 하겠습니다. 문자열 `Express with TypeScript`를 `Express.js with TypeScript`로 수정한 후 파일을 저장합니다. 파일을 저장하면 `nodemon`이 `src` 디렉토리 내의 `app.ts` 파일을 재실행합니다. 서버가 재시작한 후 <a href="http://localhost:4000/" target="_blank">http://localhost:4000/</a>에 다시 접속하면 `Express.js with TypeScript`가 화면에 표시되어 있을 것입니다.
 
-<img src="/assets/img/back-end/expressjs-typescript/expressjs-typescript2.png" alt="expressjs-typescript2" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 0.5rem"/>
+<img src="/assets/img/back-end/expressjs-typescript/pic2.webp" alt="pic2" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 0.5rem"/>
 
 ### 서버 실행 (production 모드)
 
@@ -179,8 +179,8 @@ npm run build
 npm run start
 ```
 
-<img src="/assets/img/back-end/expressjs-typescript/expressjs-typescript3.png" alt="expressjs-typescript3" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 0.5rem"/>
+<img src="/assets/img/back-end/expressjs-typescript/pic3.webp" alt="pic3" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 0.5rem"/>
 
-<img src="/assets/img/back-end/expressjs-typescript/expressjs-typescript4.png" alt="expressjs-typescript4" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 0.5rem"/>
+<img src="/assets/img/back-end/expressjs-typescript/pic4.webp" alt="pic4" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 0.5rem"/>
 
 `production 모드`로 서버를 성공적으로 실행하였습니다.

_posts/2024-06-26-expressjs-typeorm.md

@@ -349,4 +349,4 @@ router.delete(
 
 `Postman`을 사용하여 API를 요청한 예시는 다음과 같습니다.
 
-<img src="/assets/img/back-end/expressjs-typeorm/expressjs-typeorm1.png" alt="expressjs-typeorm1" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 0.5rem"/>
+<img src="/assets/img/back-end/expressjs-typeorm/pic1.webp" alt="pic1" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 0.5rem"/>

_posts/2024-07-02-nestjs-basic.md

@@ -48,7 +48,7 @@ npx @nestjs/cli new [프로젝트 이름]
 
 자신이 사용하는 운영체제에 따라 다음과 같이 `Delete `␍` eslint (prettier/prettier)` 오류가 발생할 수 있습니다.
 
-<img src="/assets/img/back-end/nestjs-basic/nestjs1.png" alt="nestjs1" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 0.5rem"/>
+<img src="/assets/img/back-end/nestjs-basic/pic1.webp" alt="pic1" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 0.5rem"/>
 
 이 오류가 발생하는 경우 `.eslintrc.js` 파일을 열고 다음과 같이 `endOfLine`에 내용을 추가하거나 변경하면 됩니다.
 
@@ -387,10 +387,10 @@ npm run start:prod // production 모드로 실행할 때 사용
 
 ### 게시글 작성
 
-<img src="/assets/img/back-end/nestjs-basic/nestjs2.png" alt="nestjs1" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 0.5rem"/>
+<img src="/assets/img/back-end/nestjs-basic/pic2.webp" alt="pic2" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 0.5rem"/>
 
-<img src="/assets/img/back-end/nestjs-basic/nestjs3.png" alt="nestjs1" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 0.5rem"/>
+<img src="/assets/img/back-end/nestjs-basic/pic3.webp" alt="pic3" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 0.5rem"/>
 
 ### 게시글 조회
 
-<img src="/assets/img/back-end/nestjs-basic/nestjs4.png" alt="nestjs1" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 0.5rem"/>
+<img src="/assets/img/back-end/nestjs-basic/pic4.webp" alt="pic4" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 0.5rem"/>

_posts/2024-07-07-react-quill.md

@@ -74,7 +74,7 @@ const ReactQuill = dynamic(() => import("react-quill"), {
 
 다음과 같이 Quill 에디터를 사용하는 컴포넌트를 작성합니다.
 
-<img src="/assets/img/front-end/react-quill/reactquill0.png" alt="reactquill0" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 0.5rem"/>
+<img src="/assets/img/front-end/react-quill/pic1.webp" alt="pic1" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 0.5rem"/>
 
 위의 코드의 주요 부분을 설명하자면 다음과 같습니다.
 
@@ -83,18 +83,18 @@ const ReactQuill = dynamic(() => import("react-quill"), {
 
   - bubble
 
-    <img src="/assets/img/front-end/react-quill/reactquill1.png" alt="reactquill1" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 0.5rem"/>
+    <img src="/assets/img/front-end/react-quill/pic2.webp" alt="pic2" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 0.5rem"/>
 
   - snow
 
-    <img src="/assets/img/front-end/react-quill/reactquill2.png" alt="reactquill2" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 0.5rem"/>
+    <img src="/assets/img/front-end/react-quill/pic3.webp" alt="pic3" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 0.5rem"/>
 
 - `import "@/styles/quillEditor.css";`: Quill 에디터를 커스텀하는 css 파일을 임포트합니다. 해당 부분은 아래 [Step 4 - Quill 에디터 커스텀하기](#step-4---quill-에디터-커스텀하기) 부분에서 다루도록 하겠습니다.
 - `modules`: Quill 에디터의 toolbar를 커스텀하는 부분입니다. 이미지 삽입 기능을 추가하거나 글씨 관련 기능 추가 등 여러 기능을 커스텀할 수 있습니다. 옵션들의 경우 다음 링크를 참고하시길 바랍니다.
 
   <a href="https://quilljs.com/docs/modules/toolbar" target="_blank">Toolbar Module - Quill Rich Text Editor</a>
 
-  <img src="/assets/img/front-end/react-quill/reactquill3.png" alt="reactquill3" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 0.5rem"/>
+  <img src="/assets/img/front-end/react-quill/pic4.webp" alt="pic4" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 0.5rem"/>
 
 ## Step 4 - Quill 에디터 커스텀하기
 
@@ -142,4 +142,4 @@ import "@/styles/quillEditor.css";
 
 다음은 위에서 선언한 toolbar 옵션과 Quill 에디터를 커스텀한 결과입니다.
 
-<img src="/assets/img/front-end/react-quill/reactquill4.png" alt="reactquill4" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 0.5rem"/>
+<img src="/assets/img/front-end/react-quill/pic5.webp" alt="pic5" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 0.5rem"/>

_posts/2024-07-10-nestjs-typeorm.md

@@ -389,4 +389,4 @@ export class UserService {
 
 `Postman`을 사용하여 API를 요청한 예시는 다음과 같습니다.
 
-<img src="/assets/img/back-end/nestjs-typeorm/nestjs-typeorm1.png" alt="nestjs-typeorm1" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 0.5rem"/>
+<img src="/assets/img/back-end/nestjs-typeorm/pic1.webp" alt="pic1" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 0.5rem"/>

_posts/2024-07-19-challenge-day5.md

@@ -31,15 +31,15 @@ comments: true
 
 이번 네이버 부스트캠프 9기에서는 **베이직** 과정이 신설되었습니다. **1차 문제 해결력 테스트** 결과에 따라 `2차 문자 해결력 테스트 직행자`, `베이직 입과자`, `탈락자`로 나누어졌습니다. 저는 **2차 문제 해결력 테스트 직행자**였지만 2차 문제 해결력 테스트 직행자도 베이직 참여를 권유하고 있었기 때문에 베이직 과정에 참여하기로 결정하였습니다. 카카오톡 오픈채팅방에서도 베이직 과정에 참여하겠다는 사람이 많았고, 실제로 베이직 참여자가 대략 1000명 정도 되었습니다.
 
-<img src="/assets/img/naver-boostcamp-9th/day5/pic0.png" alt="pic0" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 0.5rem"/>
+<img src="/assets/img/naver-boostcamp-9th/day5/pic1.webp" alt="pic1" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 0.5rem"/>
 
 결론부터 말씀드리자면 베이직 과정에 참여한 것은 매우 만족스러웠습니다. 예전까지만 해도 저는 프로그래밍을 할 때 개발 과정에만 집중했지만 이번 베이직 과정을 진행하면서 문제 해결 과정에서 필요한 **구현 역량**뿐만 아니라 **설계 역량**을 키울 기회가 되었다는 점에서 큰 도움이 되었다고 생각합니다. 또한 같은 미션을 다른 캠퍼분들이 어떻게 수행했는지 확인하면서 문제 해결에 필요한 아이디어를 얻는 방법도 학습할 수 있었습니다. 만약에 다른 분들도 네이버 부스트캠프에 참여하신다면 베이직에 참여하시는 것을 추천드립니다.
 
-<img src="/assets/img/naver-boostcamp-9th/day5/pic1.png" alt="pic1" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 0.5rem"/>
+<img src="/assets/img/naver-boostcamp-9th/day5/pic2.webp" alt="pic2" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 0.5rem"/>
 
 2주 동안 꾸준히 베이직 미션을 수행하여 위와 같이 베이직을 수료했다는 이메일을 받았습니다.
 
-<img src="/assets/img/naver-boostcamp-9th/day5/pic2.png" alt="pic2" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 0.5rem"/>
+<img src="/assets/img/naver-boostcamp-9th/day5/pic3.webp" alt="pic3" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 0.5rem"/>
 
 2차 문제 해결력 테스트 결과 챌린지에 입과하게 되었습니다.
 

_posts/2024-08-02-challenge-day15.md

@@ -30,7 +30,7 @@ comments: true
 #### 짝 프로그래밍
 
 <figure>
-<img src="/assets/img/naver-boostcamp-9th/day15/pic1.jpg" alt="pic1" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 0.5rem"/>
+<img src="/assets/img/naver-boostcamp-9th/day15/pic1.webp" alt="pic1" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 0.5rem"/>
 <figcaption>출처: <a href="https://unsplash.com/ko/%EC%82%AC%EC%A7%84/macbook-pro%EB%A5%BC-%EB%A7%8C%EC%A7%80%EA%B3%A0-%EA%B0%80%EB%A6%AC%ED%82%A4%EB%8A%94-%EC%82%AC%EB%9E%8C-ZKBzlifgkgw">https://unsplash.com/ko/%EC%82%AC%EC%A7%84/macbook-pro%EB%A5%BC-%EB%A7%8C%EC%A7%80%EA%B3%A0-%EA%B0%80%EB%A6%AC%ED%82%A4%EB%8A%94-%EC%82%AC%EB%9E%8C-ZKBzlifgkgw</a></figcaption>
 </figure>
 

_posts/2024-08-13-react-quill-image.md

@@ -543,7 +543,7 @@ const QuillEditorContainer = dynamic(
 
 테스트 결과는 다음과 같습니다.
 
-<img src="/assets/img/front-end/react-quill-image/pic1.png" alt="pic1" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 0.5rem"/>
+<img src="/assets/img/front-end/react-quill-image/pic1.webp" alt="pic1" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 0.5rem"/>
 
 ## 더 알아보기
 

_posts/2024-08-16-nestjs-socket.md

@@ -422,7 +422,7 @@ socket.on("notice", (data) => {
 
 테스트 결과는 다음과 같습니다.
 
-<img src="/assets/img/back-end/nestjs-socket/pic1.png" alt="pic1" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 0.5rem"/>
+<img src="/assets/img/back-end/nestjs-socket/pic1.webp" alt="pic1" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 0.5rem"/>
 
 ## 참고 자료