+
-
diff --git a/src/app/blog/series/[series_slug]/_component/SeriesNotFound.tsx b/src/app/blog/series/[series_slug]/_component/SeriesNotFound.tsx
index e199358..f581b94 100644
--- a/src/app/blog/series/[series_slug]/_component/SeriesNotFound.tsx
+++ b/src/app/blog/series/[series_slug]/_component/SeriesNotFound.tsx
@@ -1,23 +1,31 @@
-import Link from "next/link";
-
-const SeriesNotFound = () => {
- return (
-
-
- 시리즈를 찾을 수 없습니다 😢
-
-
- 요청하신 시리즈가 존재하지 않거나 삭제되었습니다.
- 주소가 올바른지 다시 한번 확인해 주세요.
-
-
- 블로그 홈으로 돌아가기
-
-
- );
-};
-
-export default SeriesNotFound;
+import Link from "next/link";
+
+const SeriesNotFound = () => {
+ return (
+
+
+ 시리즈를 찾을 수 없습니다 😢
+
+
+ 요청하신 시리즈가 존재하지 않거나 삭제되었습니다.
+ 주소가 올바른지 다시 한번 확인해 주세요.
+
+
+ 블로그 홈으로 돌아가기
+
+
+ );
+};
+
+export default SeriesNotFound;
diff --git a/src/app/blog/series/[series_slug]/page.tsx b/src/app/blog/series/[series_slug]/page.tsx
index 0c01d38..3e8b707 100644
--- a/src/app/blog/series/[series_slug]/page.tsx
+++ b/src/app/blog/series/[series_slug]/page.tsx
@@ -1,58 +1,68 @@
-import { getPostMeta, getSeriesList } from "@/lib/postService";
-import ArrowHeadSVG from "@/svg/ArrowHeadSVG";
-import Link from "next/link";
-import { getSeriesBySlug } from "../../../../lib/postService";
-import PostSection from "../../_components/PostSection";
-import SeriesNotFound from "./_component/SeriesNotFound";
-
-export const generateStaticParams = () => {
- const seriesGroups = getSeriesList();
-
- return seriesGroups.map((group) => ({
- series_slug: group.series,
- }));
-};
-
-interface SeriesPageProps {
- params: Promise<{ series_slug: string }>;
-}
-
-const SeriesPage = async ({ params }: SeriesPageProps) => {
- const { series_slug } = await params;
- const currentSeriesInfo = getSeriesBySlug(series_slug);
-
- if (!currentSeriesInfo) {
- return
;
- }
-
- const categorys = currentSeriesInfo.categories;
- const posts = (currentSeriesInfo?.postRefs || []).map((ref) => {
- return getPostMeta(ref.category, ref.slug);
- });
-
- return (
-
-
-
-
- 블로그 홈
-
-
- {currentSeriesInfo?.seriesName}
-
-
-
-
- );
-};
-
-export default SeriesPage;
+import { getPostMeta, getSeriesList } from "@/lib/postService";
+import ArrowHeadSVG from "@/svg/ArrowHeadSVG";
+import Link from "next/link";
+import { getSeriesBySlug } from "../../../../lib/postService";
+import PostSection from "../../_components/PostSection";
+import SeriesNotFound from "./_component/SeriesNotFound";
+
+export const generateStaticParams = () => {
+ const seriesGroups = getSeriesList();
+
+ return seriesGroups.map((group) => ({
+ series_slug: group.series,
+ }));
+};
+
+interface SeriesPageProps {
+ params: Promise<{ series_slug: string }>;
+}
+
+const SeriesPage = async ({ params }: SeriesPageProps) => {
+ const { series_slug } = await params;
+ const currentSeriesInfo = getSeriesBySlug(series_slug);
+
+ if (!currentSeriesInfo) {
+ return
;
+ }
+
+ const categorys = currentSeriesInfo.categories;
+ const posts = (currentSeriesInfo?.postRefs || []).map((ref) => {
+ return getPostMeta(ref.category, ref.slug);
+ });
+
+ return (
+
+
+
+
+ 블로그 홈
+
+
+ {currentSeriesInfo?.seriesName}
+
+
+
+
+ );
+};
+
+export default SeriesPage;
diff --git a/src/app/fonts.ts b/src/app/fonts.ts
new file mode 100644
index 0000000..d72d794
--- /dev/null
+++ b/src/app/fonts.ts
@@ -0,0 +1,53 @@
+import localFont from "next/font/local";
+
+export const pretendard = localFont({
+ src: [
+ {
+ path: "../assets/fonts/pretendard/Pretendard-Thin.woff2",
+ weight: "100",
+ style: "normal",
+ },
+ {
+ path: "../assets/fonts/pretendard/Pretendard-ExtraLight.woff2",
+ weight: "200",
+ style: "normal",
+ },
+ {
+ path: "../assets/fonts/pretendard/Pretendard-Light.woff2",
+ weight: "300",
+ style: "normal",
+ },
+ {
+ path: "../assets/fonts/pretendard/Pretendard-Regular.woff2",
+ weight: "400",
+ style: "normal",
+ },
+ {
+ path: "../assets/fonts/pretendard/Pretendard-Medium.woff2",
+ weight: "500",
+ style: "normal",
+ },
+ {
+ path: "../assets/fonts/pretendard/Pretendard-SemiBold.woff2",
+ weight: "600",
+ style: "normal",
+ },
+ {
+ path: "../assets/fonts/pretendard/Pretendard-Bold.woff2",
+ weight: "700",
+ style: "normal",
+ },
+ {
+ path: "../assets/fonts/pretendard/Pretendard-ExtraBold.woff2",
+ weight: "800",
+ style: "normal",
+ },
+ {
+ path: "../assets/fonts/pretendard/Pretendard-Black.woff2",
+ weight: "900",
+ style: "normal",
+ },
+ ],
+ display: "swap",
+ variable: "--font-pretendard",
+});
diff --git a/src/app/globals.css b/src/app/globals.css
index 885e456..4f1be11 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,164 +1,4 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@font-face {
- font-family: "Pretendard";
- font-weight: 900;
- font-display: swap;
- src:
- local("Pretendard Black"),
- url("/fonts/pretendard/static/Pretendard-Black.woff2") format("woff2"),
- url("/fonts/pretendard/static/Pretendard-Black.woff") format("woff");
-}
-
-@font-face {
- font-family: "Pretendard";
- font-weight: 800;
- font-display: swap;
- src:
- local("Pretendard ExtraBold"),
- url("/fonts/pretendard/static/Pretendard-ExtraBold.woff2") format("woff2"),
- url("/fonts/pretendard/static/Pretendard-ExtraBold.woff") format("woff");
-}
-
-@font-face {
- font-family: "Pretendard";
- font-weight: 700;
- font-display: swap;
- src:
- local("Pretendard Bold"),
- url("/fonts/pretendard/static/Pretendard-Bold.woff2") format("woff2"),
- url("/fonts/pretendard/static/Pretendard-Bold.woff") format("woff");
-}
-
-@font-face {
- font-family: "Pretendard";
- font-weight: 600;
- font-display: swap;
- src:
- local("Pretendard SemiBold"),
- url("/fonts/pretendard/static/Pretendard-SemiBold.woff2") format("woff2"),
- url("/fonts/pretendard/static/Pretendard-SemiBold.woff") format("woff");
-}
-
-@font-face {
- font-family: "Pretendard";
- font-weight: 500;
- font-display: swap;
- src:
- local("Pretendard Medium"),
- url("/fonts/pretendard/static/Pretendard-Medium.woff2") format("woff2"),
- url("/fonts/pretendard/static/Pretendard-Medium.woff") format("woff");
-}
-
-@font-face {
- font-family: "Pretendard";
- font-weight: 400;
- font-display: swap;
- src:
- local("Pretendard Regular"),
- url("/fonts/pretendard/static/Pretendard-Regular.woff2") format("woff2"),
- url("/fonts/pretendard/static/Pretendard-Regular.woff") format("woff");
-}
-
-@font-face {
- font-family: "Pretendard";
- font-weight: 300;
- font-display: swap;
- src:
- local("Pretendard Light"),
- url("/fonts/pretendard/static/Pretendard-Light.woff2") format("woff2"),
- url("/fonts/pretendard/static/Pretendard-Light.woff") format("woff");
-}
-
-@font-face {
- font-family: "Pretendard";
- font-weight: 200;
- font-display: swap;
- src:
- local("Pretendard ExtraLight"),
- url("/fonts/pretendard/static/Pretendard-ExtraLight.woff2") format("woff2"),
- url("/fonts/pretendard/static/Pretendard-ExtraLight.woff") format("woff");
-}
-
-@font-face {
- font-family: "Pretendard";
- font-weight: 100;
- font-display: swap;
- src:
- local("Pretendard Thin"),
- url("/fonts/pretendard/static/Pretendard-Thin.woff2") format("woff2"),
- url("/fonts/pretendard/static/Pretendard-Thin.woff") format("woff");
-}
-
-@layer base {
- html {
- font-family: "Pretendard", sans-serif !important;
- @apply text-sm md:text-base;
- }
-
- :root {
- --eaeaea: #eaeaea;
- --header-size: 121px;
- }
-
- body {
- margin: 0;
- background-color: #ffff;
- color: #1a1a1a;
- letter-spacing: -1px;
- }
-
- ul,
- li {
- text-decoration: none;
- padding-left: 0px;
- margin: 0;
- }
-
- h2,
- p {
- margin: 0;
- font-weight: 600;
- }
-
- h3 {
- font-weight: 500;
- font-size: 1.2rem;
- }
-
- p {
- font-weight: 400;
- font-size: 1rem;
- }
-
- a {
- text-decoration: none;
- color: #242424;
- }
-
- input {
- cursor: text;
- }
-
- [type="checkbox"]:checked {
- background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
- }
-
- .dark [type="checkbox"]:checked {
- background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='black' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
- }
-
- [type="checkbox"] {
- border: solid 1px black;
- }
-
- [type="checkbox"]:checked {
- border-color: transparent;
- background-color: currentColor;
- background-size: 100% 100%;
- background-position: 50%;
- background-repeat: no-repeat;
- }
-}
+@import "tailwindcss";
+@import "../styles/typography.css";
+
+@custom-variant dark (&:where(.dark, .dark *));
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 22ea689..c1095fb 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -6,6 +6,7 @@ import { GoogleAnalytics } from "@next/third-parties/google";
import type { Metadata } from "next";
import Footer from "./_components/common/Footer";
import ThemeScript from "./_components/ThemeScript";
+import { pretendard } from "./fonts";
import "./globals.css";
const GA_ID = process.env.NEXT_PUBLIC_GA_ID;
@@ -22,11 +23,14 @@ const RootLayout = ({
children: React.ReactNode;
}>) => {
return (
-
+
-
+
{/* Google Analytics Script */}
{GA_ID &&
}
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index 7302aa9..1bfc7f9 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -1,6 +1,5 @@
"use client";
import { useRouter } from "next/navigation";
-import { TfiBackLeft } from "react-icons/tfi";
const NotFound = () => {
const router = useRouter();
@@ -14,7 +13,7 @@ const NotFound = () => {
};
return (
404 ERROR
@@ -23,12 +22,10 @@ const NotFound = () => {
);
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 958024b..7f268af 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,4 +1,3 @@
-import "@/styles/home.css";
import HistorySection from "./_components/HistorySection";
import InterviewSection from "./_components/InterviewSection";
import LendingSection from "./_components/LendingSection";
@@ -8,9 +7,12 @@ import SkillSection from "./_components/SkillSection";
const Home = () => {
return (
<>
-
+
-
+
diff --git a/public/fonts/pretendard/static/Pretendard-Black.woff2 b/src/assets/fonts/pretendard/Pretendard-Black.woff2
similarity index 100%
rename from public/fonts/pretendard/static/Pretendard-Black.woff2
rename to src/assets/fonts/pretendard/Pretendard-Black.woff2
diff --git a/public/fonts/pretendard/static/Pretendard-Bold.woff2 b/src/assets/fonts/pretendard/Pretendard-Bold.woff2
similarity index 100%
rename from public/fonts/pretendard/static/Pretendard-Bold.woff2
rename to src/assets/fonts/pretendard/Pretendard-Bold.woff2
diff --git a/public/fonts/pretendard/static/Pretendard-ExtraBold.woff2 b/src/assets/fonts/pretendard/Pretendard-ExtraBold.woff2
similarity index 100%
rename from public/fonts/pretendard/static/Pretendard-ExtraBold.woff2
rename to src/assets/fonts/pretendard/Pretendard-ExtraBold.woff2
diff --git a/public/fonts/pretendard/static/Pretendard-ExtraLight.woff2 b/src/assets/fonts/pretendard/Pretendard-ExtraLight.woff2
similarity index 100%
rename from public/fonts/pretendard/static/Pretendard-ExtraLight.woff2
rename to src/assets/fonts/pretendard/Pretendard-ExtraLight.woff2
diff --git a/public/fonts/pretendard/static/Pretendard-Light.woff2 b/src/assets/fonts/pretendard/Pretendard-Light.woff2
similarity index 100%
rename from public/fonts/pretendard/static/Pretendard-Light.woff2
rename to src/assets/fonts/pretendard/Pretendard-Light.woff2
diff --git a/public/fonts/pretendard/static/Pretendard-Medium.woff2 b/src/assets/fonts/pretendard/Pretendard-Medium.woff2
similarity index 100%
rename from public/fonts/pretendard/static/Pretendard-Medium.woff2
rename to src/assets/fonts/pretendard/Pretendard-Medium.woff2
diff --git a/public/fonts/pretendard/static/Pretendard-Regular.woff2 b/src/assets/fonts/pretendard/Pretendard-Regular.woff2
similarity index 100%
rename from public/fonts/pretendard/static/Pretendard-Regular.woff2
rename to src/assets/fonts/pretendard/Pretendard-Regular.woff2
diff --git a/public/fonts/pretendard/static/Pretendard-SemiBold.woff2 b/src/assets/fonts/pretendard/Pretendard-SemiBold.woff2
similarity index 100%
rename from public/fonts/pretendard/static/Pretendard-SemiBold.woff2
rename to src/assets/fonts/pretendard/Pretendard-SemiBold.woff2
diff --git a/public/fonts/pretendard/static/Pretendard-Thin.woff2 b/src/assets/fonts/pretendard/Pretendard-Thin.woff2
similarity index 100%
rename from public/fonts/pretendard/static/Pretendard-Thin.woff2
rename to src/assets/fonts/pretendard/Pretendard-Thin.woff2
diff --git a/src/assets/svg/ActiveOffSvg.tsx b/src/assets/svg/ActiveOffSvg.tsx
new file mode 100644
index 0000000..3d9bfd9
--- /dev/null
+++ b/src/assets/svg/ActiveOffSvg.tsx
@@ -0,0 +1,25 @@
+import { SVGAttributes } from "react";
+
+interface ActiveOffSvgProps extends SVGAttributes
{
+ size?: number;
+}
+
+const ActiveOffSvg = ({ size = 24, ...props }: ActiveOffSvgProps) => {
+ return (
+
+ );
+};
+
+export default ActiveOffSvg;
diff --git a/src/assets/svg/ActiveOnSvg.tsx b/src/assets/svg/ActiveOnSvg.tsx
new file mode 100644
index 0000000..0a30ace
--- /dev/null
+++ b/src/assets/svg/ActiveOnSvg.tsx
@@ -0,0 +1,25 @@
+import { SVGAttributes } from "react";
+
+interface ActiveOnSvgProps extends SVGAttributes {
+ size?: number;
+}
+
+const ActiveOnSvg = ({ size = 24, ...props }: ActiveOnSvgProps) => {
+ return (
+
+ );
+};
+
+export default ActiveOnSvg;
diff --git a/src/assets/svg/AlertBellSvg.tsx b/src/assets/svg/AlertBellSvg.tsx
new file mode 100644
index 0000000..7cc83e8
--- /dev/null
+++ b/src/assets/svg/AlertBellSvg.tsx
@@ -0,0 +1,39 @@
+interface AlertBellSvgProps {
+ size?: number;
+ activeColor?: string;
+ className?: string;
+}
+
+const AlertBellSvg = ({
+ size = 24,
+ activeColor = "#FF2727",
+ className,
+}: AlertBellSvgProps) => {
+ return (
+
+ );
+};
+
+export default AlertBellSvg;
diff --git a/src/assets/svg/AltArrowLeftSvg.tsx b/src/assets/svg/AltArrowLeftSvg.tsx
new file mode 100644
index 0000000..76094e0
--- /dev/null
+++ b/src/assets/svg/AltArrowLeftSvg.tsx
@@ -0,0 +1,25 @@
+import { SVGAttributes } from "react";
+
+interface AltArrowLeftSvg extends SVGAttributes {
+ size?: number;
+}
+
+const AltArrowLeftSvg = ({ size = 24, ...props }: AltArrowLeftSvg) => {
+ return (
+
+ );
+};
+
+export default AltArrowLeftSvg;
diff --git a/src/assets/svg/AltArrowRightSvg.tsx b/src/assets/svg/AltArrowRightSvg.tsx
new file mode 100644
index 0000000..f6a6575
--- /dev/null
+++ b/src/assets/svg/AltArrowRightSvg.tsx
@@ -0,0 +1,25 @@
+import { SVGAttributes } from "react";
+
+interface AltArrowRightSvgProps extends SVGAttributes {
+ size?: number;
+}
+
+const AltArrowRightSvg = ({ size = 24, ...props }: AltArrowRightSvgProps) => {
+ return (
+
+ );
+};
+
+export default AltArrowRightSvg;
diff --git a/src/assets/svg/BusSvg.tsx b/src/assets/svg/BusSvg.tsx
new file mode 100644
index 0000000..ed6b9b2
--- /dev/null
+++ b/src/assets/svg/BusSvg.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+const BusSvg = (props: React.SVGProps) => {
+ return (
+
+ );
+};
+
+export default BusSvg;
diff --git a/src/assets/svg/CalenderSvg.tsx b/src/assets/svg/CalenderSvg.tsx
new file mode 100644
index 0000000..5e065a6
--- /dev/null
+++ b/src/assets/svg/CalenderSvg.tsx
@@ -0,0 +1,28 @@
+interface CalenderSvgProps {
+ size?: number;
+ className?: string;
+}
+
+const CalenderSvg = ({ size = 24, className }: CalenderSvgProps) => {
+ return (
+
+ );
+};
+
+export default CalenderSvg;
diff --git a/src/assets/svg/DeleteSvg.tsx b/src/assets/svg/DeleteSvg.tsx
new file mode 100644
index 0000000..a895583
--- /dev/null
+++ b/src/assets/svg/DeleteSvg.tsx
@@ -0,0 +1,28 @@
+interface DeleteSvgProps {
+ size?: number;
+ className?: string;
+}
+
+const DeleteSvg = ({ size = 24, className }: DeleteSvgProps) => {
+ return (
+
+ );
+};
+
+export default DeleteSvg;
diff --git a/src/assets/svg/DropdownArrowSvg.tsx b/src/assets/svg/DropdownArrowSvg.tsx
new file mode 100644
index 0000000..3b67a2a
--- /dev/null
+++ b/src/assets/svg/DropdownArrowSvg.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+
+const DropdownArrowSvg = (props: React.SVGProps) => {
+ return (
+
+ );
+};
+
+export default DropdownArrowSvg;
diff --git a/src/assets/svg/EditSvg.tsx b/src/assets/svg/EditSvg.tsx
new file mode 100644
index 0000000..9ecd75b
--- /dev/null
+++ b/src/assets/svg/EditSvg.tsx
@@ -0,0 +1,24 @@
+interface EditSvgProps {
+ size?: number;
+ className?: string;
+}
+
+const EditSvg = ({ size = 24, className }: EditSvgProps) => {
+ return (
+
+ );
+};
+
+export default EditSvg;
diff --git a/src/assets/svg/FacebookSvg.tsx b/src/assets/svg/FacebookSvg.tsx
new file mode 100644
index 0000000..0263cbe
--- /dev/null
+++ b/src/assets/svg/FacebookSvg.tsx
@@ -0,0 +1,20 @@
+const FacebookSvg = () => {
+ return (
+
+ );
+};
+
+export default FacebookSvg;
diff --git a/src/assets/svg/FoodSvg.tsx b/src/assets/svg/FoodSvg.tsx
new file mode 100644
index 0000000..b067fc1
--- /dev/null
+++ b/src/assets/svg/FoodSvg.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+
+const FoodSvg = (props: React.SVGProps) => {
+ return (
+
+ );
+};
+
+export default FoodSvg;
diff --git a/src/assets/svg/ImageAddSvg.tsx b/src/assets/svg/ImageAddSvg.tsx
new file mode 100644
index 0000000..1e66b5f
--- /dev/null
+++ b/src/assets/svg/ImageAddSvg.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+
+const ImageAddSvg = (props: React.SVGProps) => {
+ return (
+
+ );
+};
+
+export default ImageAddSvg;
diff --git a/src/assets/svg/ImageFullSvg.tsx b/src/assets/svg/ImageFullSvg.tsx
new file mode 100644
index 0000000..d94b658
--- /dev/null
+++ b/src/assets/svg/ImageFullSvg.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+
+const ImageFullSvg = (props: React.SVGProps) => {
+ return (
+
+ );
+};
+
+export default ImageFullSvg;
diff --git a/src/assets/svg/InstagramSvg.tsx b/src/assets/svg/InstagramSvg.tsx
new file mode 100644
index 0000000..b72e295
--- /dev/null
+++ b/src/assets/svg/InstagramSvg.tsx
@@ -0,0 +1,22 @@
+const InstagramSvg = () => {
+ return (
+
+ );
+};
+
+export default InstagramSvg;
diff --git a/src/assets/svg/KebabMenuSvg.tsx b/src/assets/svg/KebabMenuSvg.tsx
new file mode 100644
index 0000000..ec853d0
--- /dev/null
+++ b/src/assets/svg/KebabMenuSvg.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+
+const KebabMenuSvg = (props: React.SVGProps) => {
+ return (
+
+ );
+};
+
+export default KebabMenuSvg;
diff --git a/src/assets/svg/ListSvg.tsx b/src/assets/svg/ListSvg.tsx
new file mode 100644
index 0000000..47e486a
--- /dev/null
+++ b/src/assets/svg/ListSvg.tsx
@@ -0,0 +1,24 @@
+interface ListSvgProps {
+ size?: number;
+ className?: string;
+}
+
+const ListSvg = ({ size = 24, className }: ListSvgProps) => {
+ return (
+
+ );
+};
+
+export default ListSvg;
diff --git a/src/assets/svg/LogOutSvg.tsx b/src/assets/svg/LogOutSvg.tsx
new file mode 100644
index 0000000..a18780b
--- /dev/null
+++ b/src/assets/svg/LogOutSvg.tsx
@@ -0,0 +1,28 @@
+interface EditSvgProps {
+ size?: number;
+ className?: string;
+}
+
+const LogOutSvg = ({ size = 24, className }: EditSvgProps) => {
+ return (
+
+ );
+};
+
+export default LogOutSvg;
diff --git a/src/assets/svg/MapSvg.tsx b/src/assets/svg/MapSvg.tsx
new file mode 100644
index 0000000..1254a06
--- /dev/null
+++ b/src/assets/svg/MapSvg.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+const MapSvg = (props: React.SVGProps) => {
+ return (
+
+ );
+};
+
+export default MapSvg;
diff --git a/src/assets/svg/MinusSvg.tsx b/src/assets/svg/MinusSvg.tsx
new file mode 100644
index 0000000..e40f7e6
--- /dev/null
+++ b/src/assets/svg/MinusSvg.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+const MinusSvg = (props: React.SVGProps) => {
+ return (
+
+ );
+};
+
+export default MinusSvg;
diff --git a/src/assets/svg/MusicSvg.tsx b/src/assets/svg/MusicSvg.tsx
new file mode 100644
index 0000000..2546558
--- /dev/null
+++ b/src/assets/svg/MusicSvg.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+const MusicSvg = (props: React.SVGProps) => {
+ return (
+
+ );
+};
+
+export default MusicSvg;
diff --git a/src/assets/svg/PaginationNext.tsx b/src/assets/svg/PaginationNext.tsx
new file mode 100644
index 0000000..b15d0a6
--- /dev/null
+++ b/src/assets/svg/PaginationNext.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+
+const PaginationNext = (props: React.SVGProps) => {
+ return (
+
+ );
+};
+
+export default PaginationNext;
diff --git a/src/assets/svg/PaginationPrev.tsx b/src/assets/svg/PaginationPrev.tsx
new file mode 100644
index 0000000..6f249e9
--- /dev/null
+++ b/src/assets/svg/PaginationPrev.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+
+const PaginationPrev = (props: React.SVGProps) => {
+ return (
+
+ );
+};
+
+export default PaginationPrev;
diff --git a/src/assets/svg/PlusSvg.tsx b/src/assets/svg/PlusSvg.tsx
new file mode 100644
index 0000000..bf28d6a
--- /dev/null
+++ b/src/assets/svg/PlusSvg.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+const PlusSvg = (props: React.SVGProps) => {
+ return (
+
+ );
+};
+
+export default PlusSvg;
diff --git a/src/assets/svg/SearchSvg.tsx b/src/assets/svg/SearchSvg.tsx
new file mode 100644
index 0000000..e958fbb
--- /dev/null
+++ b/src/assets/svg/SearchSvg.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+const SearchSvg = (props: React.SVGProps) => {
+ return (
+
+ );
+};
+
+export default SearchSvg;
diff --git a/src/assets/svg/SettingSvg.tsx b/src/assets/svg/SettingSvg.tsx
new file mode 100644
index 0000000..1b1586a
--- /dev/null
+++ b/src/assets/svg/SettingSvg.tsx
@@ -0,0 +1,24 @@
+interface SettingSvgProps {
+ size?: number;
+ className?: string;
+}
+
+const SettingSvg = ({ size = 24, className }: SettingSvgProps) => {
+ return (
+
+ );
+};
+
+export default SettingSvg;
diff --git a/src/assets/svg/SportsSvg.tsx b/src/assets/svg/SportsSvg.tsx
new file mode 100644
index 0000000..adf8735
--- /dev/null
+++ b/src/assets/svg/SportsSvg.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+
+const SportsSvg = (props: React.SVGProps) => {
+ return (
+
+ );
+};
+
+export default SportsSvg;
diff --git a/src/assets/svg/StarSvg.tsx b/src/assets/svg/StarSvg.tsx
new file mode 100644
index 0000000..3b39c80
--- /dev/null
+++ b/src/assets/svg/StarSvg.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+const StarSvg = (props: React.SVGProps) => {
+ return (
+
+ );
+};
+
+export default StarSvg;
diff --git a/src/assets/svg/SwiperNextSvg.tsx b/src/assets/svg/SwiperNextSvg.tsx
new file mode 100644
index 0000000..e4272ee
--- /dev/null
+++ b/src/assets/svg/SwiperNextSvg.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+
+const SwiperNextSvg = (props: React.SVGProps) => {
+ return (
+
+ );
+};
+
+export default SwiperNextSvg;
diff --git a/src/assets/svg/SwiperPrevSvg.tsx b/src/assets/svg/SwiperPrevSvg.tsx
new file mode 100644
index 0000000..a4ef4e5
--- /dev/null
+++ b/src/assets/svg/SwiperPrevSvg.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+
+const SwiperPrevSvg = (props: React.SVGProps) => {
+ return (
+
+ );
+};
+
+export default SwiperPrevSvg;
diff --git a/src/assets/svg/TourSvg.tsx b/src/assets/svg/TourSvg.tsx
new file mode 100644
index 0000000..c46b023
--- /dev/null
+++ b/src/assets/svg/TourSvg.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+
+const TourSvg = (props: React.SVGProps) => {
+ return (
+
+ );
+};
+
+export default TourSvg;
diff --git a/src/assets/svg/UserSvg.tsx b/src/assets/svg/UserSvg.tsx
new file mode 100644
index 0000000..3f79116
--- /dev/null
+++ b/src/assets/svg/UserSvg.tsx
@@ -0,0 +1,24 @@
+interface UserSvgProps {
+ size?: number;
+ className?: string;
+}
+
+const UserSvg = ({ size = 24, className }: UserSvgProps) => {
+ return (
+
+ );
+};
+
+export default UserSvg;
diff --git a/src/assets/svg/WarningSvg.tsx b/src/assets/svg/WarningSvg.tsx
new file mode 100644
index 0000000..ff77195
--- /dev/null
+++ b/src/assets/svg/WarningSvg.tsx
@@ -0,0 +1,61 @@
+import React from "react";
+
+const WarningSvg = (props: React.SVGProps) => {
+ return (
+
+ );
+};
+
+export default WarningSvg;
diff --git a/src/assets/svg/WellbeingSvg.tsx b/src/assets/svg/WellbeingSvg.tsx
new file mode 100644
index 0000000..5d65822
--- /dev/null
+++ b/src/assets/svg/WellbeingSvg.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+const WellbeingSvg = (props: React.SVGProps) => {
+ return (
+
+ );
+};
+
+export default WellbeingSvg;
diff --git a/src/assets/svg/XSvg.tsx b/src/assets/svg/XSvg.tsx
new file mode 100644
index 0000000..99a2d7b
--- /dev/null
+++ b/src/assets/svg/XSvg.tsx
@@ -0,0 +1,18 @@
+const XSvg = () => {
+ return (
+
+ );
+};
+
+export default XSvg;
diff --git a/src/assets/svg/YoutubeSvg.tsx b/src/assets/svg/YoutubeSvg.tsx
new file mode 100644
index 0000000..5e4fe7a
--- /dev/null
+++ b/src/assets/svg/YoutubeSvg.tsx
@@ -0,0 +1,17 @@
+const YoutubeSvg = () => {
+ return (
+
+ );
+};
+export default YoutubeSvg;
diff --git a/src/components/HighlightCode.tsx b/src/components/HighlightCode.tsx
index 2766f59..c51a05c 100644
--- a/src/components/HighlightCode.tsx
+++ b/src/components/HighlightCode.tsx
@@ -1,8 +1,5 @@
"use client";
-import "@/styles/github.css";
-import "@/styles/highlight.css";
-import "@/styles/post.css";
import type { PostMetaData } from "@/types/posts.types";
import { useEffect } from "react";
import Highlight from "react-highlight";
@@ -59,16 +56,16 @@ const HighlightCode = ({ metadata, contentHtml }: HighlightedCodeProps) => {
{metadata.title}
-
+
{metadata.tags.map((tag: string) => (
# {tag}
))}
-
+
작성일 : {metadata.date}
diff --git a/src/components/ImageCard.tsx b/src/components/ImageCard.tsx
index 96e9c72..d3691a8 100644
--- a/src/components/ImageCard.tsx
+++ b/src/components/ImageCard.tsx
@@ -11,16 +11,20 @@ interface ImageCardProps {
const ImageCard = ({ img, size = "size-10" }: ImageCardProps) => {
return (
-
+
-
diff --git a/src/components/ModalTriggerButton.tsx b/src/components/ModalTriggerButton.tsx
index 4e4dd92..da6bca4 100644
--- a/src/components/ModalTriggerButton.tsx
+++ b/src/components/ModalTriggerButton.tsx
@@ -1,109 +1,118 @@
-"use client";
-
-import { JSX, ReactNode, useEffect, useRef, useState } from "react";
-import { createPortal } from "react-dom";
-
-interface ModalTriggerButtonProps {
- modalRootId: string;
- children: ReactNode;
- title: string;
- closeOnSelfClick?: boolean;
- icon: JSX.Element;
- containerProps?: React.HTMLAttributes
;
-}
-
-const ModalTriggerButton = ({
- modalRootId,
- title,
- icon,
- closeOnSelfClick = false,
- children,
- containerProps,
-}: ModalTriggerButtonProps) => {
- const [modalRoot, setModalRoot] = useState(null);
- const [isOpen, setIsOpen] = useState(false);
- const buttonRef = useRef(null);
- const contentRef = useRef(null);
-
- useEffect(() => {
- setModalRoot(document.getElementById(modalRootId));
- }, [modalRootId]);
-
- // 바깥 클릭 닫기
- useEffect(() => {
- const handleClickOutside = (e: MouseEvent) => {
- const target = e.target as Node;
- if (
- contentRef.current &&
- !contentRef.current.contains(target) &&
- !buttonRef.current?.contains(target)
- ) {
- setIsOpen(false);
- }
- };
-
- if (isOpen) document.addEventListener("mousedown", handleClickOutside);
- return () => document.removeEventListener("mousedown", handleClickOutside);
- }, [isOpen]);
-
- // “자기 자신 클릭 시 닫기” 옵션
- const handleSelfClick: React.MouseEventHandler = (e) => {
- if (closeOnSelfClick) setIsOpen(false);
- // 사용자가 containerProps?.onClick을 넘겼다면 같이 호출
- containerProps?.onClick?.(e);
- };
-
- return (
-
-
-
- {isOpen &&
- modalRoot &&
- createPortal(
-
- ![
- "onClick",
- "onChange",
- "onInput",
- "onKeyDown",
- "onFocus",
- "onBlur",
- "ref", // ref는 내부에서 관리
- "className", // className은 아래에서 병합
- "style", // style은 병합 가능하지만 여기선 단순화
- ].includes(k),
- ),
- )}
- className={
- "absolute flex gap-1 flex-col right-0 top-10 p-2 bg-white dark:bg-neutral-900 border border-neutral-300 dark:border-neutral-700 shadow-lg rounded-lg z-[1000] " +
- (containerProps?.className ?? "")
- }
- >
- {children}
-
,
- modalRoot,
- )}
-
+
+
+ {isOpen &&
+ modalRoot &&
+ createPortal(
+
+ ![
+ "onClick",
+ "onChange",
+ "onInput",
+ "onKeyDown",
+ "onFocus",
+ "onBlur",
+ "ref", // ref는 내부에서 관리
+ "className", // className은 아래에서 병합
+ "style", // style은 병합 가능하지만 여기선 단순화
+ ].includes(k)
+ )
+ )}
+ className={
+ `absolute top-10 right-0 z-1000 flex flex-col gap-1 rounded-lg
+ border border-neutral-300 bg-white p-2 shadow-lg
+ dark:border-neutral-700 dark:bg-neutral-900 ` +
+ (containerProps?.className ?? "")
+ }
+ >
+ {children}
+
,
+ modalRoot
+ )}
+
-
-
-
- {isOpen &&
- modalRoot &&
- createPortal(
-
-
-
- Light
-
-
-
-
- Dark
-
-
-
-
- System
-
-
,
- modalRoot,
- )}
-
+
+
+
+ {isOpen &&
+ modalRoot &&
+ createPortal(
+
+
+
+ Light
+
+
+
+
+ Dark
+
+
+
+
+ System
+
+
,
+ modalRoot
+ )}
+
-```
-
-### 커스텀 breakpoint
-tailwind.config 에서 직접 breakpoint를 설정할 수 있습니다.
-```js
-// tailwind.config.js
-
-module.exports = {
- theme: {
- screens: {
- 'sm': '500px',
- // => @media (min-width: 640px) { ... }
-
- 'md': '1000px',
- // => @media (min-width: 1024px) { ... }
-
- 'lg': '1500px',
- // => @media (min-width: 1280px) { ... }
- },
- }
-}
-```
-min, max의 범위를 지정해 설정할 수 도 있습니다.
-```js
-// tailwind.config.js
-
-module.exports = {
- theme: {
- screens: {
- sm: { min: "390px", max: "819px" },
- md: { min: "820px", max: "1023px" },
- lg: { min: "1080px" },
- },
- }
-}
-```
-
-## 추가로
+---
+title: Tailwind CSS 반응형 레이아웃 만들기
+tags: [css]
+date: "2024.12.21"
+---
+이전에 메이플 헬퍼 서비스에 Tailwind CSS를 이용해 반응형 레이아웃을 적용한 과정을 공유하려 합니다.
+
+## Tailwind CSS의 반응형 레이아웃
+유틸리티를 사용해 CSS의 media query처럼 반응형 작업이 가능합니다.
+
+
+
+```html
+
+
+
+```
+
+### 커스텀 breakpoint
+tailwind.config 에서 직접 breakpoint를 설정할 수 있습니다.
+```js
+// tailwind.config.js
+
+module.exports = {
+ theme: {
+ screens: {
+ 'sm': '500px',
+ // => @media (min-width: 640px) { ... }
+
+ 'md': '1000px',
+ // => @media (min-width: 1024px) { ... }
+
+ 'lg': '1500px',
+ // => @media (min-width: 1280px) { ... }
+ },
+ }
+}
+```
+min, max의 범위를 지정해 설정할 수 도 있습니다.
+```js
+// tailwind.config.js
+
+module.exports = {
+ theme: {
+ screens: {
+ sm: { min: "390px", max: "819px" },
+ md: { min: "820px", max: "1023px" },
+ lg: { min: "1080px" },
+ },
+ }
+}
+```
+
+## 추가로
기존에 있는 서비스에 모바일 레이아웃을 적용하면서 느낀점은 반응형 디자인 작업을 할 때면 작은 화면부터 큰 화면으로 작업을 하는게 좋을 것 같다는 생각이 들었습니다.
\ No newline at end of file
diff --git a/src/content/posts/css/DisplayGridLearn.md b/src/content/posts/css/DisplayGridLearn.md
index 016e031..f6352d2 100644
--- a/src/content/posts/css/DisplayGridLearn.md
+++ b/src/content/posts/css/DisplayGridLearn.md
@@ -1,58 +1,58 @@
----
-title: display Grid를 배워보자
-tags: [css]
-date: "2023.02.11"
----
-gird는 행과 열이 있는 레이아웃 시스템을 제공한다. 1차원 레이아웃을 지원하는 flex와 다르게 좀 더 복잡한 레이아웃을 위해 grid를 사용할 수 있다.
-
-## Grid Properties
-
-gird는 flex와 같이 Container와 Item이라는 두가지 개념으로 구분되어 있는데 Container는 Item을 감싸는 부모 요소이며 그 안에 Item을 배치 할 수 있다.
-
-## Grid Container Properties
-
-Container를 위한 속성은 아래와 같다.
-
-| 속성 | 의미 | 예시 |
-| --- | --- | --- |
-| display | 그리드 컨테이너(Container)를 정의 | display : grid |
-| grid-template-rows | 명시적 행(Track)의 크기를 정의 | grid-template-rows: 20px 20px ... grid-template-rows: repeat(3, 20px) |
-| grid-template-columns | 명시적 열(Track)의 크기를 정의 | grid-template-rows: 20px 20px ... grid-template-rows: repeat(3, 20px) |
-| grid-template-areas | 영역(Area) 이름을 참조해 템플릿 생성 | grid-template: grid-template-rows / grid-template-columns grid-template: grid-template-areas grid-template-areas: "header header header" "main main aside" "footer footer footer" |
-| grid-template | grid-template-rows, columns, areas의 단축 속성 | grid-template: "header header header" 80px "main main aside" 350px "footer footer footer" 130px / 2fr 100px 1fr; |
-| row-gap(grid-row-gap) | 행과 행 사이의 간격(Line)을 정의 | row-gap: 100px (크기) |
-| column-gap(grid-column-gap) | 열과 열 사이의 간격(Line)을 정의 | column-gap: 100px (크기) |
-| gap(grid-gap) | 행과 행, 열과 열 사이의 간격을 정의 | gap: grid-row-gap grid-column-gap |
-| grid-auto-rows | 암시적인 행(Track)의 크기를 정의 | grid-auto-rows: 100px |
-| grid-auto-columns | 암시적인 열(Track)의 크기를 정의 | grid-auto-columns: 100px |
-| grid-auto-flow | 자동 배치 알고리즘 방식을 정의 | grid-auto-flow: row 또는 row dense 또는 dense grid-auto-flow: column 또는 column dense |
-| grid | grid-template-xxx과 grid-auto-xxx의 단축 속성 | grid: grid-template grid: grid-template-rows / grid-auto-flow grid-auto-columns grid: grid-auto-flow grid-auto-rows / grid-template-columns |
-| align-content | 그리드 콘텐츠(Grid Contents)를 수직(열 축) 정렬 | align-content: align-content |
-| justify-content | 그리드 콘텐츠를 수평(행 축) 정렬 | justify-content: justify-content |
-| place-content | align-content와 justify-content의 단축 속성 | place-content: align-content justify-content |
-| align-items | 그리드 아이템(Items)들을 수직(열 축) 정렬 | align-items: align-items |
-| justify-items | 그리드 아이템들을 수평(행 축) 정렬 | justify-items: justify-items |
-| place-items | align-items와 justify-items의 단축 속성 | place-items: align-items justify-items |
-## Grid Item Properties
-
-Item을 위한 속성들은 아래와 같다.
-
-| 속성 | 의미 | 예시 |
-| --- | --- | --- |
-| grid-row-start | 그리드 아이템의 행 시작 위치 지정 | grid-row-start: 1 |
-| grid-row-end | 그리드 아이템의 행 끝 위치 지정 | grid-row-end: 3 |
-| grid-column-start | 그리드 아이템의 열 시작 위치 지정 | grid-column-start: 2 |
-| grid-column-end | 그리드 아이템의 열 끝 위치 지정 | grid-column-end: 3 |
-| grid-row | grid-row-xxx의 단축 속성(행 시작/끝 위치) | grid-row: grid-row-start / grid-row-end |
-| grid-column | grid-column-xxx의 단축 속성(열 시작/끝 위치) | grid-column: grid-column-start / grid-column-end |
-| grid-area | 영역(Area) 이름을 설정하거나, grid-row와 grid-column의 단축 속성 | grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end |
-| align-self | 단일 그리드 아이템을 수직(열 축) 정렬 | .item:nth-child(1) .item:nth-child(2) .item:nth-child(3) .item:nth-child(4) |
-| justify-self | 단일 그리드 아이템을 수평(행 축) 정렬 | .item:nth-child(1) .item:nth-child(2) .item:nth-child(3) .item:nth-child(4) |
-| place-self | align-self와 justify-self의 단축 속성 | place-self: align-self justify-self |
-| order | 그리드 아이템의 배치 순서를 지정 | .item:nth-child(1) .item:nth-child(3) .item:nth-child(5) |
-| z-index | 그리드 아이템의 쌓이는 순서를 지정 | .item:nth-child(2) grid-area: 1 / 2 / 3 / 3; z-index: 1; |
-[https://www.w3schools.com/css/css_grid.asp](https://www.w3schools.com/css/css_grid.asp)
-
-[https://studiomeal.com/archives/533](https://studiomeal.com/archives/533)
-
-[https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout](https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)
+---
+title: display Grid를 배워보자
+tags: [css]
+date: "2023.02.11"
+---
+gird는 행과 열이 있는 레이아웃 시스템을 제공한다. 1차원 레이아웃을 지원하는 flex와 다르게 좀 더 복잡한 레이아웃을 위해 grid를 사용할 수 있다.
+
+## Grid Properties
+
+gird는 flex와 같이 Container와 Item이라는 두가지 개념으로 구분되어 있는데 Container는 Item을 감싸는 부모 요소이며 그 안에 Item을 배치 할 수 있다.
+
+## Grid Container Properties
+
+Container를 위한 속성은 아래와 같다.
+
+| 속성 | 의미 | 예시 |
+| --- | --- | --- |
+| display | 그리드 컨테이너(Container)를 정의 | display : grid |
+| grid-template-rows | 명시적 행(Track)의 크기를 정의 | grid-template-rows: 20px 20px ... grid-template-rows: repeat(3, 20px) |
+| grid-template-columns | 명시적 열(Track)의 크기를 정의 | grid-template-rows: 20px 20px ... grid-template-rows: repeat(3, 20px) |
+| grid-template-areas | 영역(Area) 이름을 참조해 템플릿 생성 | grid-template: grid-template-rows / grid-template-columns grid-template: grid-template-areas grid-template-areas: "header header header" "main main aside" "footer footer footer" |
+| grid-template | grid-template-rows, columns, areas의 단축 속성 | grid-template: "header header header" 80px "main main aside" 350px "footer footer footer" 130px / 2fr 100px 1fr; |
+| row-gap(grid-row-gap) | 행과 행 사이의 간격(Line)을 정의 | row-gap: 100px (크기) |
+| column-gap(grid-column-gap) | 열과 열 사이의 간격(Line)을 정의 | column-gap: 100px (크기) |
+| gap(grid-gap) | 행과 행, 열과 열 사이의 간격을 정의 | gap: grid-row-gap grid-column-gap |
+| grid-auto-rows | 암시적인 행(Track)의 크기를 정의 | grid-auto-rows: 100px |
+| grid-auto-columns | 암시적인 열(Track)의 크기를 정의 | grid-auto-columns: 100px |
+| grid-auto-flow | 자동 배치 알고리즘 방식을 정의 | grid-auto-flow: row 또는 row dense 또는 dense grid-auto-flow: column 또는 column dense |
+| grid | grid-template-xxx과 grid-auto-xxx의 단축 속성 | grid: grid-template grid: grid-template-rows / grid-auto-flow grid-auto-columns grid: grid-auto-flow grid-auto-rows / grid-template-columns |
+| align-content | 그리드 콘텐츠(Grid Contents)를 수직(열 축) 정렬 | align-content: align-content |
+| justify-content | 그리드 콘텐츠를 수평(행 축) 정렬 | justify-content: justify-content |
+| place-content | align-content와 justify-content의 단축 속성 | place-content: align-content justify-content |
+| align-items | 그리드 아이템(Items)들을 수직(열 축) 정렬 | align-items: align-items |
+| justify-items | 그리드 아이템들을 수평(행 축) 정렬 | justify-items: justify-items |
+| place-items | align-items와 justify-items의 단축 속성 | place-items: align-items justify-items |
+## Grid Item Properties
+
+Item을 위한 속성들은 아래와 같다.
+
+| 속성 | 의미 | 예시 |
+| --- | --- | --- |
+| grid-row-start | 그리드 아이템의 행 시작 위치 지정 | grid-row-start: 1 |
+| grid-row-end | 그리드 아이템의 행 끝 위치 지정 | grid-row-end: 3 |
+| grid-column-start | 그리드 아이템의 열 시작 위치 지정 | grid-column-start: 2 |
+| grid-column-end | 그리드 아이템의 열 끝 위치 지정 | grid-column-end: 3 |
+| grid-row | grid-row-xxx의 단축 속성(행 시작/끝 위치) | grid-row: grid-row-start / grid-row-end |
+| grid-column | grid-column-xxx의 단축 속성(열 시작/끝 위치) | grid-column: grid-column-start / grid-column-end |
+| grid-area | 영역(Area) 이름을 설정하거나, grid-row와 grid-column의 단축 속성 | grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end |
+| align-self | 단일 그리드 아이템을 수직(열 축) 정렬 | .item:nth-child(1) .item:nth-child(2) .item:nth-child(3) .item:nth-child(4) |
+| justify-self | 단일 그리드 아이템을 수평(행 축) 정렬 | .item:nth-child(1) .item:nth-child(2) .item:nth-child(3) .item:nth-child(4) |
+| place-self | align-self와 justify-self의 단축 속성 | place-self: align-self justify-self |
+| order | 그리드 아이템의 배치 순서를 지정 | .item:nth-child(1) .item:nth-child(3) .item:nth-child(5) |
+| z-index | 그리드 아이템의 쌓이는 순서를 지정 | .item:nth-child(2) grid-area: 1 / 2 / 3 / 3; z-index: 1; |
+[https://www.w3schools.com/css/css_grid.asp](https://www.w3schools.com/css/css_grid.asp)
+
+[https://studiomeal.com/archives/533](https://studiomeal.com/archives/533)
+
+[https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout](https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)
diff --git a/src/content/posts/css/Px-rem-em-vh-vw-Whats-the-Difference-in-CSS.md b/src/content/posts/css/Px-rem-em-vh-vw-Whats-the-Difference-in-CSS.md
index 8c5d453..67adf88 100644
--- a/src/content/posts/css/Px-rem-em-vh-vw-Whats-the-Difference-in-CSS.md
+++ b/src/content/posts/css/Px-rem-em-vh-vw-Whats-the-Difference-in-CSS.md
@@ -1,35 +1,35 @@
----
-title: CSS 사이즈 단위 정리
-tags: [css]
-date: "2025.09.04"
----
-이번에는 CSS에서 자주 사용되는 **사이즈 단위**를 정리해 보았다. 개발하면서 px, %, em, rem 같은 단위들을 계속 접하지만 정확히 어떤 기준으로 크기가 정해지는지 헷갈릴 때가 많았다. 이번 기회에 확실히 짚고 넘어가려고 한다.
-
-## px
-
-`px`은 **픽셀 단위**로, 화면 크기와 상관없이 고정된 절대적인 크기를 가진다. 그래서 브라우저 크기나 기기 해상도가 달라져도 변하지 않는다. 가장 기본적이고 직관적인 단위라고 할 수 있다.
-
-## %
-
-`%`는 **부모 요소를 기준**으로 크기가 결정된다. 예를 들어 부모 요소의 width가 500px인데 자식 요소의 width를 50%로 주면 자식 요소의 실제 크기는 250px이 된다. 레이아웃을 유동적으로 조정할 때 유용하다.
-
-## em
-
-`em`은 **부모 요소의 글자 크기(font-size)**를 기준으로 계산되는 상대 단위다. 예를 들어 부모의 글자 크기가 16px이라면 2em은 32px이 된다. 하지만 부모 요소 크기에 따라 계속 값이 달라질 수 있어 상황에 따라 주의가 필요하다.
-
-## rem
-
-`rem`에서 `r`은 **root(루트)**를 의미한다. 즉, HTML의 기본 글자 크기를 기준으로 하는 상대 단위다. 보통 브라우저의 기본 폰트 크기인 16px을 기준으로 계산된다. 접근성을 고려해 글자 크기를 키우거나 줄일 때 특히 유용하다.
-
-## vh, vw
-
-`vh`와 `vw`에서 `v`는 **viewport(뷰포트)**를 의미한다.
-
-- `vw`는 화면 너비를 100등분한 단위
-- `vh`는 화면 높이를 100등분한 단위
-
-예를 들어, `width: 50vw`라고 하면 화면 너비의 절반 크기가 된다. 이 단위들은 브라우저 창 크기에 따라 유동적으로 변하기 때문에 **반응형 디자인**에 자주 활용된다.
-
----
-
+---
+title: CSS 사이즈 단위 정리
+tags: [css]
+date: "2025.09.04"
+---
+이번에는 CSS에서 자주 사용되는 **사이즈 단위**를 정리해 보았다. 개발하면서 px, %, em, rem 같은 단위들을 계속 접하지만 정확히 어떤 기준으로 크기가 정해지는지 헷갈릴 때가 많았다. 이번 기회에 확실히 짚고 넘어가려고 한다.
+
+## px
+
+`px`은 **픽셀 단위**로, 화면 크기와 상관없이 고정된 절대적인 크기를 가진다. 그래서 브라우저 크기나 기기 해상도가 달라져도 변하지 않는다. 가장 기본적이고 직관적인 단위라고 할 수 있다.
+
+## %
+
+`%`는 **부모 요소를 기준**으로 크기가 결정된다. 예를 들어 부모 요소의 width가 500px인데 자식 요소의 width를 50%로 주면 자식 요소의 실제 크기는 250px이 된다. 레이아웃을 유동적으로 조정할 때 유용하다.
+
+## em
+
+`em`은 **부모 요소의 글자 크기(font-size)**를 기준으로 계산되는 상대 단위다. 예를 들어 부모의 글자 크기가 16px이라면 2em은 32px이 된다. 하지만 부모 요소 크기에 따라 계속 값이 달라질 수 있어 상황에 따라 주의가 필요하다.
+
+## rem
+
+`rem`에서 `r`은 **root(루트)**를 의미한다. 즉, HTML의 기본 글자 크기를 기준으로 하는 상대 단위다. 보통 브라우저의 기본 폰트 크기인 16px을 기준으로 계산된다. 접근성을 고려해 글자 크기를 키우거나 줄일 때 특히 유용하다.
+
+## vh, vw
+
+`vh`와 `vw`에서 `v`는 **viewport(뷰포트)**를 의미한다.
+
+- `vw`는 화면 너비를 100등분한 단위
+- `vh`는 화면 높이를 100등분한 단위
+
+예를 들어, `width: 50vw`라고 하면 화면 너비의 절반 크기가 된다. 이 단위들은 브라우저 창 크기에 따라 유동적으로 변하기 때문에 **반응형 디자인**에 자주 활용된다.
+
+---
+
이렇게 정리하고 보니 어떤 상황에서 어떤 단위를 쓰면 좋을지 더 명확해졌다. 앞으로 반응형 디자인을 구현할 때는 px 대신 %, em, rem, vh, vw 같은 단위를 더 적극적으로 활용해 보아야겠다.
\ No newline at end of file
diff --git a/src/content/posts/etc/Design-lecture-summary.md b/src/content/posts/etc/Design-lecture-summary.md
index 2e0559b..4f292dd 100644
--- a/src/content/posts/etc/Design-lecture-summary.md
+++ b/src/content/posts/etc/Design-lecture-summary.md
@@ -1,61 +1,61 @@
----
-title: 디자인 강의 정리
-tags: [etc]
-date: "2025.09.16"
----
-스프린트 부트캠프를 시작하면 부트캠프 강의뿐만 아니라 코드잇에서 제공하는 모든 강의를 들을 수 있다. 그래서 평소 1인 개발을 하면서 궁금했던 **디자인 강의**를 들어 보았고, 그 내용을 정리해 보았다.
-
-
-## 디자인의 기본 원칙
-
-1. **일관성 지키기**
-2. **중요도에 따라 구분하기**
-3. **기능에 따라 영역 나누기**
-
-## 레이아웃
-
-레이아웃에서 중요한 기술은 세 가지다.
-
-- 여백
-- 정렬
-- 크기
-
-기기별 권장 기준 해상도는 다음과 같다.
-
-- 데스크톱: 1440px
-- 태블릿: 978px
-- 모바일: 375px
-
-실제로는 다음 범위를 커버할 수 있으면 된다.
-
-- 데스크톱: 1280px ~ 1920px
-- 태블릿: 768px ~ 1279px
-- 모바일: 320px ~ 767px
-
-즉, 페이지를 만들 때는 화면을 크게 영역별로 나누고, 기기 해상도에 맞는 기준을 잡아 주는 것이 중요하다.
-
-## 폰트
-
-- 색상 대비는 **배경과 4.5 : 1 이상** 확보해야 한다.
-- 여러 줄일 때는 **행간 150% ~ 180%** 정도가 적당하다.
-- 자간도 함께 고려해야 가독성이 좋아진다.
-
-## 요소 크기 기준
-
-1. **텍스트**
- - 본문: 16px (14px ~ 16px)
- - 약한 본문: 14px (본문 -2px)
- - 제목: 20px ~ 80px (커질수록 변화 폭 확대)
-2. **아이콘**
- - 비율: 1:1
- - 크기: 함께 사용하는 텍스트와 비슷한 크기
-3. **버튼**
- - 내부 텍스트: 16px 또는 18px
- - 위아래 여백: 텍스트 크기의 1/2 ~ 1배 (8~16px)
- - 좌우 여백: 위아래 여백의 1 ~ 2배 (16~32px)
-4. **기타**
- - 상단 네비게이션 바 높이: 72px (50~90px 사이)
-
-## 정리하며
-
+---
+title: 디자인 강의 정리
+tags: [etc]
+date: "2025.09.16"
+---
+스프린트 부트캠프를 시작하면 부트캠프 강의뿐만 아니라 코드잇에서 제공하는 모든 강의를 들을 수 있다. 그래서 평소 1인 개발을 하면서 궁금했던 **디자인 강의**를 들어 보았고, 그 내용을 정리해 보았다.
+
+
+## 디자인의 기본 원칙
+
+1. **일관성 지키기**
+2. **중요도에 따라 구분하기**
+3. **기능에 따라 영역 나누기**
+
+## 레이아웃
+
+레이아웃에서 중요한 기술은 세 가지다.
+
+- 여백
+- 정렬
+- 크기
+
+기기별 권장 기준 해상도는 다음과 같다.
+
+- 데스크톱: 1440px
+- 태블릿: 978px
+- 모바일: 375px
+
+실제로는 다음 범위를 커버할 수 있으면 된다.
+
+- 데스크톱: 1280px ~ 1920px
+- 태블릿: 768px ~ 1279px
+- 모바일: 320px ~ 767px
+
+즉, 페이지를 만들 때는 화면을 크게 영역별로 나누고, 기기 해상도에 맞는 기준을 잡아 주는 것이 중요하다.
+
+## 폰트
+
+- 색상 대비는 **배경과 4.5 : 1 이상** 확보해야 한다.
+- 여러 줄일 때는 **행간 150% ~ 180%** 정도가 적당하다.
+- 자간도 함께 고려해야 가독성이 좋아진다.
+
+## 요소 크기 기준
+
+1. **텍스트**
+ - 본문: 16px (14px ~ 16px)
+ - 약한 본문: 14px (본문 -2px)
+ - 제목: 20px ~ 80px (커질수록 변화 폭 확대)
+2. **아이콘**
+ - 비율: 1:1
+ - 크기: 함께 사용하는 텍스트와 비슷한 크기
+3. **버튼**
+ - 내부 텍스트: 16px 또는 18px
+ - 위아래 여백: 텍스트 크기의 1/2 ~ 1배 (8~16px)
+ - 좌우 여백: 위아래 여백의 1 ~ 2배 (16~32px)
+4. **기타**
+ - 상단 네비게이션 바 높이: 72px (50~90px 사이)
+
+## 정리하며
+
디자인 강의를 들으면서, 평소에 그냥 감으로 맞추던 부분들이 실제로는 기준과 원칙을 갖고 있다는 걸 알게 되었다. 앞으로 화면을 만들 때는 단순히 "보기 좋아 보인다"에 그치지 않고, **일관성, 중요도, 영역 구분**을 항상 염두에 두고 적용해야겠다.
\ No newline at end of file
diff --git a/src/content/posts/etc/How-to-Use-Figma.md b/src/content/posts/etc/How-to-Use-Figma.md
index 7c864fb..cd2f8ed 100644
--- a/src/content/posts/etc/How-to-Use-Figma.md
+++ b/src/content/posts/etc/How-to-Use-Figma.md
@@ -1,69 +1,69 @@
----
-title: 피그마 사용법
-tags: [figma, etc]
-date: "2024.09.14"
----
-그동안 팀 프로젝트를 진행하며 디자인 협업 툴로 피그마를 많이 사용했습니다.
-피그마를 사용하면서 느낀 점은 정말 편리하고 다루기 쉽다는 생각이 많이 들었고 앞으로 개발을 하며
-이런 디자인 툴 하나 정도는 다룰 줄 아는 게 큰 도움이 될 거 같다는 생각이 들어 피그마의
-간단한 단축키와 사용 방법을 정리해 보았습니다.
-
-## 단축키
-피그마를 사용하며 주로 사용한 단축키 정도만 소개하려 합니다.
-
-**`T` 텍스트 도구**
-**`R` 사각형 그리기**
-**`O` 원 그리기**
-**`L` 선 그리기**
-**`F` 프레임 생성**
-
-**`Space + 드래그` 화면 이동**
-**`Ctrl + Shift + 4 Cmd + Shift + 4` 그리드 표시/숨기기**
-
-**`Alt` 객체간 간격 확인**
-**`Ctrl +R` 레이어 이름 변경**
-**`Tab` 선택 객체 바꾸기**
-**`Ctrl + D` 객체 복제**
-
-**`방향키` 1px 이동**
-**`Shift +방향키` 설정한 픽셀만큼 이동**
-
-**`Ctrl + G` 그룹화**
-**`Ctrl + Shift + G` 그룹 해제**
-
-**`Ctrl + [` 뒤로 보내기**
-**`Ctrl + ]` 앞으로 가져오기**
-**`Ctrl + Shift + [` 맨뒤로 보내기**
-**`Ctrl + Shift + ]` 맨앞으로 가져오기**
-
-## 사용 방법
-
-### 디자인 스타일
-아무것도 선택하지 않은 상태에서 오른쪽에 있는 Inspect를 보면 기본 디자인 설정을 확인할 수 있습니다.
-
-
-### 개발자 모드
-개발자 모드를 활성화 하면 우측 메뉴바에서 해당 디자인의 CSS 속성을 확인할 수 있습니다.
-
-
-
-### 이미지 다운로드
-SVG나 이미지선택해 오른쪽 메뉴바 Inspect 하단에 Export를 이용해 다운받을 수 있습니다.
-
-
-
-### 레이어 보기
-이미지가 너무 많아져 원하는 정보를 찾기 힘들땐 왼쪽에 있는 메뉴바에서 찾으면 편리하게 찾을 수 있습니다.
-
-
-
-### 코멘트 추가
-`C` 디자이너에게 질문이나 피드백을 남길 때 아주 유용하게 사용됩니다.
-
-
-
-## 마치며
-개인 프로젝트에서 Auto Layout기능이 어려웠지만 [개발자를 위한 피그마 튜토리얼](https://www.figma.com/community/file/1314105663439944154) 이 튜토리얼을 보며
-사용법을 익힐 수 있었고 컴포넌트와 Layout기능을 이용해 효율적으로 구현할 수 있었습니다.
-
+---
+title: 피그마 사용법
+tags: [figma, etc]
+date: "2024.09.14"
+---
+그동안 팀 프로젝트를 진행하며 디자인 협업 툴로 피그마를 많이 사용했습니다.
+피그마를 사용하면서 느낀 점은 정말 편리하고 다루기 쉽다는 생각이 많이 들었고 앞으로 개발을 하며
+이런 디자인 툴 하나 정도는 다룰 줄 아는 게 큰 도움이 될 거 같다는 생각이 들어 피그마의
+간단한 단축키와 사용 방법을 정리해 보았습니다.
+
+## 단축키
+피그마를 사용하며 주로 사용한 단축키 정도만 소개하려 합니다.
+
+**`T` 텍스트 도구**
+**`R` 사각형 그리기**
+**`O` 원 그리기**
+**`L` 선 그리기**
+**`F` 프레임 생성**
+
+**`Space + 드래그` 화면 이동**
+**`Ctrl + Shift + 4 Cmd + Shift + 4` 그리드 표시/숨기기**
+
+**`Alt` 객체간 간격 확인**
+**`Ctrl +R` 레이어 이름 변경**
+**`Tab` 선택 객체 바꾸기**
+**`Ctrl + D` 객체 복제**
+
+**`방향키` 1px 이동**
+**`Shift +방향키` 설정한 픽셀만큼 이동**
+
+**`Ctrl + G` 그룹화**
+**`Ctrl + Shift + G` 그룹 해제**
+
+**`Ctrl + [` 뒤로 보내기**
+**`Ctrl + ]` 앞으로 가져오기**
+**`Ctrl + Shift + [` 맨뒤로 보내기**
+**`Ctrl + Shift + ]` 맨앞으로 가져오기**
+
+## 사용 방법
+
+### 디자인 스타일
+아무것도 선택하지 않은 상태에서 오른쪽에 있는 Inspect를 보면 기본 디자인 설정을 확인할 수 있습니다.
+
+
+### 개발자 모드
+개발자 모드를 활성화 하면 우측 메뉴바에서 해당 디자인의 CSS 속성을 확인할 수 있습니다.
+
+
+
+### 이미지 다운로드
+SVG나 이미지선택해 오른쪽 메뉴바 Inspect 하단에 Export를 이용해 다운받을 수 있습니다.
+
+
+
+### 레이어 보기
+이미지가 너무 많아져 원하는 정보를 찾기 힘들땐 왼쪽에 있는 메뉴바에서 찾으면 편리하게 찾을 수 있습니다.
+
+
+
+### 코멘트 추가
+`C` 디자이너에게 질문이나 피드백을 남길 때 아주 유용하게 사용됩니다.
+
+
+
+## 마치며
+개인 프로젝트에서 Auto Layout기능이 어려웠지만 [개발자를 위한 피그마 튜토리얼](https://www.figma.com/community/file/1314105663439944154) 이 튜토리얼을 보며
+사용법을 익힐 수 있었고 컴포넌트와 Layout기능을 이용해 효율적으로 구현할 수 있었습니다.
+
확실히 피그마 사용법을 알게 되면 간단한 디자인을 할 때나 다른 사람과 협업할 때 큰 도움이 되는 것 같습니다.
\ No newline at end of file
diff --git a/src/content/posts/etc/MarkdownLanguage.md b/src/content/posts/etc/MarkdownLanguage.md
index 74f4552..b00ab6b 100644
--- a/src/content/posts/etc/MarkdownLanguage.md
+++ b/src/content/posts/etc/MarkdownLanguage.md
@@ -1,139 +1,139 @@
----
-title: 마크다운 문법을 알아보자
-tags: [etc]
-date: "2024.06.15"
----
-
-최근 디스코드 봇에 대해 가시성을 개선해달라는 문의가 들어와 개선한 내용에 대한 글을 써보려 합니다.
-디스코드 봇은 마크다운 문법을 지원해 이를 이용해서 스타일링이 가능합니다. 그래서 오늘은 마크다운 문법에 대해 적어보겠습니다.
-
-## 문법
-
-### 헤더 (Headers)
-
-h1, h2, h3, h4, h5, h6 태그를 # 기호를 사용하여 헤더의 크기를 지정합니다.
->h1, h2는 `=`, `-` 기호도 사용 가능합니다.
-
-```markdown
-# 제목 1
-## 제목 2
-### 제목 3
-#### 제목 4
-##### 제목 5
-###### 제목 6
-
-제목 1
-======
-
-제목 2
-------
-```
-
-### 굵게 (Bold), 기울임 (Italic), 취소선 (Strikethrough)
-텍스트 앞뒤에 ** 또는 __를 추가해 텍스트를 강조할 수 있습니다.
-
-```markdown
-**굵은 텍스트**
-__굵은 텍스트__
-```
-
-기울임꼴로 텍스트를 만들려면 * 또는 _를 사용합니다.
-
-```markdown
-*기울임 텍스트*
-_기울임 텍스트_
-```
-
-취소선을 추가하려면 ~~를 텍스트 앞뒤에 붙입니다.
-
-```markdown
-~~취소선 텍스트~~
-```
-### 인라인 코드 (Inline Code)
-한 줄 내에서 코드를 강조하려면 텍스트 양옆에 백틱(`)을 하나 추가합니다.
-
-```markdown
-`코드 예시`
-```
-### 블록 코드 (Code Block)
-(```)을 세 번 사용해 코드 블록으로 만들 수 있습니다.
->(```) 뒤에 언어 이름을 적을 수 있습니다.
-
-```markdown
-```언어이름
-내용
-```
-
-### 목록 (Lists)
-
-순서 없는 목록
-- -, *, + 기호로 항목을 구분합니다.
-
-순서 있는 목록
-- 숫자와 점을 사용하여 항목을 순서대로 나열합니다.
-
-```markdown
-- 항목 1
-- 항목 2
-- 항목 3
-```
-
-```markdown
-1. 첫 번째 항목
-2. 두 번째 항목
-3. 세 번째 항목
-```
-### 링크 (Links)
-링크를 추가하려면 `[텍스트](URL)` 형식을 사용합니다.
-
-```markdown
-[구글](https://www.google.com)
-```
-
-### 이미지 (Images)
-이미지 삽입은 링크와 비슷하지만 앞에 !을 추가하면 됩니다.
-
-```markdown
-
-```
-
-### 인용문 (Blockquotes)
-인용문을 작성하려면 > 기호를 사용합니다.
-
-```markdown
-> 이것은 인용문입니다.
-```
-
-### 수평선 (Horizontal Rule)
-수평선을 만들려면 ---, ***, 또는 ___을 세 번 이상 입력합니다.
-
-```markdown
----
-```
-### 테이블 (Tables)
-테이블을 작성하려면 | 기호로 열을 구분하고 -로 행을 구분합니다.
-```markdown
-| 이름 | 나이 | 직업 |
-|-------|------|-------|
-| 민수 | 25 | 개발자 |
-| 영희 | 28 | 디자이너 |
-```
-### 체크리스트 (Task Lists)
-체크리스트 항목을 작성하려면 - [ ] 또는 - [x] 형식을 사용합니다.
-```markdown
-- [ ] 해야 할 일 1
-- [x] 완료한 일 1
-- [ ] 해야 할 일 2
-```
-### 하이퍼링크
-URL을 그냥 입력하면 하이퍼링크로 인식됩니다.
-
-```markdown
-https://www.example.com
-```
-
-## 마치며
-마크다운 문법은 노션이나 슬랙, 깃허브와 같은 서비스에서 사용할 수 있어 익힌다면 도움이 많이되는 문법입니다.
-
-[링크](https://www.markdownguide.org/cheat-sheet/)
-이 사이트에서 마크다운에 관한 가이드 잘 정리되어 있습니다.
+---
+title: 마크다운 문법을 알아보자
+tags: [etc]
+date: "2024.06.15"
+---
+
+최근 디스코드 봇에 대해 가시성을 개선해달라는 문의가 들어와 개선한 내용에 대한 글을 써보려 합니다.
+디스코드 봇은 마크다운 문법을 지원해 이를 이용해서 스타일링이 가능합니다. 그래서 오늘은 마크다운 문법에 대해 적어보겠습니다.
+
+## 문법
+
+### 헤더 (Headers)
+
+h1, h2, h3, h4, h5, h6 태그를 # 기호를 사용하여 헤더의 크기를 지정합니다.
+>h1, h2는 `=`, `-` 기호도 사용 가능합니다.
+
+```markdown
+# 제목 1
+## 제목 2
+### 제목 3
+#### 제목 4
+##### 제목 5
+###### 제목 6
+
+제목 1
+======
+
+제목 2
+------
+```
+
+### 굵게 (Bold), 기울임 (Italic), 취소선 (Strikethrough)
+텍스트 앞뒤에 ** 또는 __를 추가해 텍스트를 강조할 수 있습니다.
+
+```markdown
+**굵은 텍스트**
+__굵은 텍스트__
+```
+
+기울임꼴로 텍스트를 만들려면 * 또는 _를 사용합니다.
+
+```markdown
+*기울임 텍스트*
+_기울임 텍스트_
+```
+
+취소선을 추가하려면 ~~를 텍스트 앞뒤에 붙입니다.
+
+```markdown
+~~취소선 텍스트~~
+```
+### 인라인 코드 (Inline Code)
+한 줄 내에서 코드를 강조하려면 텍스트 양옆에 백틱(`)을 하나 추가합니다.
+
+```markdown
+`코드 예시`
+```
+### 블록 코드 (Code Block)
+(```)을 세 번 사용해 코드 블록으로 만들 수 있습니다.
+>(```) 뒤에 언어 이름을 적을 수 있습니다.
+
+```markdown
+```언어이름
+내용
+```
+
+### 목록 (Lists)
+
+순서 없는 목록
+- -, *, + 기호로 항목을 구분합니다.
+
+순서 있는 목록
+- 숫자와 점을 사용하여 항목을 순서대로 나열합니다.
+
+```markdown
+- 항목 1
+- 항목 2
+- 항목 3
+```
+
+```markdown
+1. 첫 번째 항목
+2. 두 번째 항목
+3. 세 번째 항목
+```
+### 링크 (Links)
+링크를 추가하려면 `[텍스트](URL)` 형식을 사용합니다.
+
+```markdown
+[구글](https://www.google.com)
+```
+
+### 이미지 (Images)
+이미지 삽입은 링크와 비슷하지만 앞에 !을 추가하면 됩니다.
+
+```markdown
+
+```
+
+### 인용문 (Blockquotes)
+인용문을 작성하려면 > 기호를 사용합니다.
+
+```markdown
+> 이것은 인용문입니다.
+```
+
+### 수평선 (Horizontal Rule)
+수평선을 만들려면 ---, ***, 또는 ___을 세 번 이상 입력합니다.
+
+```markdown
+---
+```
+### 테이블 (Tables)
+테이블을 작성하려면 | 기호로 열을 구분하고 -로 행을 구분합니다.
+```markdown
+| 이름 | 나이 | 직업 |
+|-------|------|-------|
+| 민수 | 25 | 개발자 |
+| 영희 | 28 | 디자이너 |
+```
+### 체크리스트 (Task Lists)
+체크리스트 항목을 작성하려면 - [ ] 또는 - [x] 형식을 사용합니다.
+```markdown
+- [ ] 해야 할 일 1
+- [x] 완료한 일 1
+- [ ] 해야 할 일 2
+```
+### 하이퍼링크
+URL을 그냥 입력하면 하이퍼링크로 인식됩니다.
+
+```markdown
+https://www.example.com
+```
+
+## 마치며
+마크다운 문법은 노션이나 슬랙, 깃허브와 같은 서비스에서 사용할 수 있어 익힌다면 도움이 많이되는 문법입니다.
+
+[링크](https://www.markdownguide.org/cheat-sheet/)
+이 사이트에서 마크다운에 관한 가이드 잘 정리되어 있습니다.
diff --git a/src/content/posts/etc/Prompt-engineering-summary.md b/src/content/posts/etc/Prompt-engineering-summary.md
index dd480d6..162889f 100644
--- a/src/content/posts/etc/Prompt-engineering-summary.md
+++ b/src/content/posts/etc/Prompt-engineering-summary.md
@@ -1,109 +1,109 @@
----
-title: 프롬프트 엔지니어링 정리
-tags: [etc]
-date: "2025.09.17"
----
-오늘 프롬프트 엔지니어링 강의를 수강하고 핵심만 정리했다.
-
-## 1) 구체적으로 묻기
-
-- 목표, 산출물, 제약을 명확히 쓴다.
-- **요청하지 않은 내용은 답하지 말 것**을 조건으로 건다.
-
- > 예) “아래 요구사항만 충족해 답변하고, 불필요한 배경 설명은 하지 마세요.”
- >
-
-## 2) 맥락 제공하기
-
-- 단순 “방법 알려줘”가 아니라 **현재 상황·목표·제약**을 1~3문장으로 붙인다.
-
- > 예) “Next.js 15, App Router를 사용 중이고 배포는 Vercel입니다. 다크 모드 지원이 필요합니다.”
- >
-
-## 3) 형식 지정하기
-
-- 출력 형식을 미리 고지하면 정확도가 올라간다. 표/리스트/코드블록/요약 길이 등.
-
- > 예) “표로 답하세요. 열: 문제, 접근, 예시코드. 10줄 이내.”
- >
-
-## 4) 요청과 데이터 분리하기
-
-- **명령**과 **재료(데이터)**를 분리해 전달한다.
-
- > 예) “따옴표 안 텍스트를 한국어로 자연스럽게 번역해 주세요.
- >
- >
- > 텍스트: `"...your text..."`”
- >
-
-## 5) 역할 부여하기
-
-- 기대하는 시각을 명시한다. 면접관, 시니어 FE, 성능 컨설턴트 등.
-
- > 예) “당신은 시니어 프론트엔드 면접관입니다. 코드 리뷰 관점에서 피드백하세요.”
- >
-
-## 6) 예시 제공하기
-
-- **좋은 예/나쁜 예**를 1개씩 주면 톤과 범위를 맞추기 쉽다.
-
- > 예) “좋은 답안 예시는 이런 구조입니다: … / 이런 식의 장황한 서론은 피하세요.”
- >
-
-## 7) 핵심 요구 반복·고정하기
-
-- 프롬프트가 길어지면 조건이 누락되기 쉽다. 마지막에 **체크리스트**로 다시 고정.
-
- > 예) “반드시 지킬 것: ① 코드만 ② TypeScript ③ 주석 금지”
- >
-
-## 8) 할루시네이션 방지
-
-- 모를 때의 태도를 명시한다.
-
- > 예) “불확실하면 ‘해당 내용은 확실하게 답변하기 어렵습니다’라고 말하고, 이유와 필요한 추가 정보 목록을 제시하세요.”
- >
-
-## 9) 복잡한 작업은 단계화
-
-- 한 번에 완성 요구 X → **단계별**로 나눠 요청.
-
- > 예) “1) 요구사항 목록화 → 2) 설계 초안 → 3) 코드 초안 → 4) 테스트 케이스”
- >
-
-## 내가 써볼 프롬프트 템플릿
-
-```
-[역할] 당신은 {역할/전문가}입니다.
-
-[상황] {현재 스택/버전/환경}이며, 목표는 {목표}입니다.
-제약은 {성능/접근성/시간/호환성 등}입니다.
-
-[요청] 아래 작업을 수행하세요: {구체 작업}
-- 출력 형식: {표/리스트/코드블록 등}, 분량: {n줄/항목 수}
-- 불확실하면: “확실히 답변하기 어렵습니다”라고 말하고 이유와 추가로 필요한 정보를 제시하세요.
-- 하지 말 것: {불필요한 서론/추가 제안 등}
-
-[데이터]
-"""
-{데이터 원문/코드/로그}
-"""
-
-[체크리스트]
-- {필수 조건 1}
-- {필수 조건 2}
-- {필수 조건 3}
-
-```
-
----
-
-## 정리
-
-- **맥락 + 형식 + 제약**을 먼저 못 박고,
-- **예시와 역할**로 답변의 톤을 고정한 뒤,
-- **체크리스트**로 핵심 요구를 다시 잠근다.
-- 모르면 모른다고 하게 만들고, 복잡한 일은 **단계별**로 쪼갠다.
-
+---
+title: 프롬프트 엔지니어링 정리
+tags: [etc]
+date: "2025.09.17"
+---
+오늘 프롬프트 엔지니어링 강의를 수강하고 핵심만 정리했다.
+
+## 1) 구체적으로 묻기
+
+- 목표, 산출물, 제약을 명확히 쓴다.
+- **요청하지 않은 내용은 답하지 말 것**을 조건으로 건다.
+
+ > 예) “아래 요구사항만 충족해 답변하고, 불필요한 배경 설명은 하지 마세요.”
+ >
+
+## 2) 맥락 제공하기
+
+- 단순 “방법 알려줘”가 아니라 **현재 상황·목표·제약**을 1~3문장으로 붙인다.
+
+ > 예) “Next.js 15, App Router를 사용 중이고 배포는 Vercel입니다. 다크 모드 지원이 필요합니다.”
+ >
+
+## 3) 형식 지정하기
+
+- 출력 형식을 미리 고지하면 정확도가 올라간다. 표/리스트/코드블록/요약 길이 등.
+
+ > 예) “표로 답하세요. 열: 문제, 접근, 예시코드. 10줄 이내.”
+ >
+
+## 4) 요청과 데이터 분리하기
+
+- **명령**과 **재료(데이터)**를 분리해 전달한다.
+
+ > 예) “따옴표 안 텍스트를 한국어로 자연스럽게 번역해 주세요.
+ >
+ >
+ > 텍스트: `"...your text..."`”
+ >
+
+## 5) 역할 부여하기
+
+- 기대하는 시각을 명시한다. 면접관, 시니어 FE, 성능 컨설턴트 등.
+
+ > 예) “당신은 시니어 프론트엔드 면접관입니다. 코드 리뷰 관점에서 피드백하세요.”
+ >
+
+## 6) 예시 제공하기
+
+- **좋은 예/나쁜 예**를 1개씩 주면 톤과 범위를 맞추기 쉽다.
+
+ > 예) “좋은 답안 예시는 이런 구조입니다: … / 이런 식의 장황한 서론은 피하세요.”
+ >
+
+## 7) 핵심 요구 반복·고정하기
+
+- 프롬프트가 길어지면 조건이 누락되기 쉽다. 마지막에 **체크리스트**로 다시 고정.
+
+ > 예) “반드시 지킬 것: ① 코드만 ② TypeScript ③ 주석 금지”
+ >
+
+## 8) 할루시네이션 방지
+
+- 모를 때의 태도를 명시한다.
+
+ > 예) “불확실하면 ‘해당 내용은 확실하게 답변하기 어렵습니다’라고 말하고, 이유와 필요한 추가 정보 목록을 제시하세요.”
+ >
+
+## 9) 복잡한 작업은 단계화
+
+- 한 번에 완성 요구 X → **단계별**로 나눠 요청.
+
+ > 예) “1) 요구사항 목록화 → 2) 설계 초안 → 3) 코드 초안 → 4) 테스트 케이스”
+ >
+
+## 내가 써볼 프롬프트 템플릿
+
+```
+[역할] 당신은 {역할/전문가}입니다.
+
+[상황] {현재 스택/버전/환경}이며, 목표는 {목표}입니다.
+제약은 {성능/접근성/시간/호환성 등}입니다.
+
+[요청] 아래 작업을 수행하세요: {구체 작업}
+- 출력 형식: {표/리스트/코드블록 등}, 분량: {n줄/항목 수}
+- 불확실하면: “확실히 답변하기 어렵습니다”라고 말하고 이유와 추가로 필요한 정보를 제시하세요.
+- 하지 말 것: {불필요한 서론/추가 제안 등}
+
+[데이터]
+"""
+{데이터 원문/코드/로그}
+"""
+
+[체크리스트]
+- {필수 조건 1}
+- {필수 조건 2}
+- {필수 조건 3}
+
+```
+
+---
+
+## 정리
+
+- **맥락 + 형식 + 제약**을 먼저 못 박고,
+- **예시와 역할**로 답변의 톤을 고정한 뒤,
+- **체크리스트**로 핵심 요구를 다시 잠근다.
+- 모르면 모른다고 하게 만들고, 복잡한 일은 **단계별**로 쪼갠다.
+
필요하면 위 템플릿을 블로그 글 하단에 복붙용으로 두고 상황/요구/체크리스트만 교체해서 쓰면 된다.
\ No newline at end of file
diff --git a/src/content/posts/etc/YamlFileGrammar.md b/src/content/posts/etc/YamlFileGrammar.md
index 5d7db84..a4525da 100644
--- a/src/content/posts/etc/YamlFileGrammar.md
+++ b/src/content/posts/etc/YamlFileGrammar.md
@@ -1,65 +1,65 @@
----
-title: yaml파일 문법
-tags: [etc]
-date: "2023.04.24"
----
-## yaml이란?
-
-yaml은 YAML ain’t markup language의 약어로 마크업 언어가 아닌 데이터에 특화됨 을 보여주는 말이다. json 파일의 상위 버젼이라고 생각할 수 도 있다. 주석을 달 수 없고 json의 중괄호와 대괄호 남발로 코드길이가 질어지게 된다는 단점을 보안하고자 해서 나온 방식이다. 또한 문법을 보면 Python과 매우 유사함을 알 수 있다.
-
-## 기본 문법
-
-기본적으로 json과 같이 "key: value"와 같이 표기되고 ":" 다음에는 공백 한칸이 필요하다.
-
-```javascript
-
- key: value
-
- name: yaml
- age: 30
-
-
-```
-그리고 int, string, boolean 을 지원한다
-
-```javascript
-
- int: 1
- string: "string"
- boolean: true
-
-
-```
-오브젝트와 배열의 표현 또한 가능하다.
-
-```javascript
-
- #오브젝트
- key:
- key: value
- key: value
-
- # 또는
-
- key: {
- key: value,
- key: value
- }
-
-
- # 배열
- key:
- - item
- - item
-
- # 또는
-
- key: [
- item, item
- ]
-
-
-```
-[https://subicura.com/k8s/prepare/yaml.html](https://subicura.com/k8s/prepare/yaml.html)
-
-[https://subicura.com/k8s/prepare/yaml.html](https://subicura.com/k8s/prepare/yaml.html)
+---
+title: yaml파일 문법
+tags: [etc]
+date: "2023.04.24"
+---
+## yaml이란?
+
+yaml은 YAML ain’t markup language의 약어로 마크업 언어가 아닌 데이터에 특화됨 을 보여주는 말이다. json 파일의 상위 버젼이라고 생각할 수 도 있다. 주석을 달 수 없고 json의 중괄호와 대괄호 남발로 코드길이가 질어지게 된다는 단점을 보안하고자 해서 나온 방식이다. 또한 문법을 보면 Python과 매우 유사함을 알 수 있다.
+
+## 기본 문법
+
+기본적으로 json과 같이 "key: value"와 같이 표기되고 ":" 다음에는 공백 한칸이 필요하다.
+
+```javascript
+
+ key: value
+
+ name: yaml
+ age: 30
+
+
+```
+그리고 int, string, boolean 을 지원한다
+
+```javascript
+
+ int: 1
+ string: "string"
+ boolean: true
+
+
+```
+오브젝트와 배열의 표현 또한 가능하다.
+
+```javascript
+
+ #오브젝트
+ key:
+ key: value
+ key: value
+
+ # 또는
+
+ key: {
+ key: value,
+ key: value
+ }
+
+
+ # 배열
+ key:
+ - item
+ - item
+
+ # 또는
+
+ key: [
+ item, item
+ ]
+
+
+```
+[https://subicura.com/k8s/prepare/yaml.html](https://subicura.com/k8s/prepare/yaml.html)
+
+[https://subicura.com/k8s/prepare/yaml.html](https://subicura.com/k8s/prepare/yaml.html)
diff --git a/src/content/posts/frontEnd/AxoisLearn.md b/src/content/posts/frontEnd/AxoisLearn.md
index 24f678e..c7906d9 100644
--- a/src/content/posts/frontEnd/AxoisLearn.md
+++ b/src/content/posts/frontEnd/AxoisLearn.md
@@ -1,145 +1,145 @@
----
-title: Axios를 배워보자
-tags: [frontEnd]
-date: "2023.02.21"
----
-## Axios란?
-
-Axios는 Promiss기반 HTTP 클라이언트이다. 간단하게 백엔드랑 통신을 쉽게 해주는 라이브러리이다. 특징으로는 HTTP요청과 응답을 JSON형태로 할 수 있다는 점이다.
-
-## 사용방법
-
-axios로 백엔드와 통신을 할 때는 get(조회), post(등록및 전송), put(수정), delete(삭제) 이렇게 4가지의 HTTP 메서드를 이용하여 통신할 수 있다.
-
-```javascript
-
- //GET
- axios.get(url, [config])
-
- //POST
- axios.post(url[, data[, config]])
-
- //PUT
- axios.put(url[, data[, config]])
-
- //DELETE
- axios.delete(url[, config])
-
-
-```
-## 응답 데이터
-
-```javascript
-
- axios.get('/user/12345')
- .then(function (response) {
- console.log(response.data); // data는 서버가 제공하는 응답이다.
- console.log(response.status); // status는 HTTP 상태 코드이다.
- console.log(response.statusText); // statusText는 HTTP 상태 메시지이다.
- console.log(response.headers); // // headers 서버가 응답 한 헤더는 모든 헤더 이름이 소문자로 제공한다
- console.log(response.config); config는 요청을 위해 Axios가 제공하는 구성이다.
- });
-
-
-```
-## axios GET
-
-get 메서드를 사용하는 상황은 이러하다. 단순한 데이터(게시글 목록, 사용자 목록), 파라미터 데이터를 포함시키는 경우
-
-```javascript
-
- // user에게 할당된 id 값과 함께 요청을 합니다.
- axios.get('/user?ID=12345')
- .then(function (response) {
- // 성공했을 때
- })
- .catch(function (error) {
- // 에러가 났을 때
- })
- .finally(function () {
- // 항상 실행되는 함수
- });
-
- // 위와는 같지만, 옵션을 주고자 할 때는 이렇게 요청을 합니다.
- axios.get('/user', {
- params: {
- ID: 12345
- }
- })
- .then(function (response) {
- // 성공했을 때
- })
- .catch(function (error) {
- // 에러가 났을 때
- })
- .finally(function () {
- // 항상 실행되는 함수
- });
-
- // async/await 를 쓰고 싶다면 async 함수/메소드를 만듭니다.
- async function getUser() {
- try {
- const response = await axios.get('/user?ID=12345');
- console.log(response);
- } catch (error) {
- console.error(error);
- }
- }
-
-
-```
-## axios POST
-
-새로운 리소스를 생성하여 서버에 제출할 때 사용된다. 회원가입, 게시글 작성 등의 작업에서 사용할 수 있다.
-
-```javascript
-
- axios.post("url", {
- firstName: 'Fred',
- lastName: 'Flintstone'
- })
- .then(function (response) {
- // response
- }).catch(function (error) {
- // 오류발생시 실행
- })
-
-
-```
-## axios DELETE
-
-서버에서 리소스를 삭제할 때 사용한다. 게시글 삭제, 사용자 삭제 등의 작업에서 사용할 수 있다
-
-```javascript
-
- axios.delete('/user?ID=12345')
- .then(function (response) {
- // handle success
- })
- .catch(function (error) {
- // handle error
- })
-
-
-```
-## axios PUT
-
-서버에서 리소스를 업데이트 또는 교체할 떄 사용한다. 게시글 수정, 사용자 정보 업데이트 등의 작업에서 사용된다.
-
-```javascript
-
- axios.put("url", {
- username: "",
- password: ""
- })
- .then(function (response) {
- // response
- }).catch(function (error) {
- // 오류발생시 실행
- })
-
-
-```
-[https://axios-http.com/](https://axios-http.com/)
-
-[https://inpa.tistory.com/entry/AXIOS-%F0%9F%93%9A-%EC%84%A4%EC%B9%98-%EC%82%AC%EC%9A%A9](https://inpa.tistory.com/entry/AXIOS-%F0%9F%93%9A-%EC%84%A4%EC%B9%98-%EC%82%AC%EC%9A%A9)
+---
+title: Axios를 배워보자
+tags: [frontEnd]
+date: "2023.02.21"
+---
+## Axios란?
+
+Axios는 Promiss기반 HTTP 클라이언트이다. 간단하게 백엔드랑 통신을 쉽게 해주는 라이브러리이다. 특징으로는 HTTP요청과 응답을 JSON형태로 할 수 있다는 점이다.
+
+## 사용방법
+
+axios로 백엔드와 통신을 할 때는 get(조회), post(등록및 전송), put(수정), delete(삭제) 이렇게 4가지의 HTTP 메서드를 이용하여 통신할 수 있다.
+
+```javascript
+
+ //GET
+ axios.get(url, [config])
+
+ //POST
+ axios.post(url[, data[, config]])
+
+ //PUT
+ axios.put(url[, data[, config]])
+
+ //DELETE
+ axios.delete(url[, config])
+
+
+```
+## 응답 데이터
+
+```javascript
+
+ axios.get('/user/12345')
+ .then(function (response) {
+ console.log(response.data); // data는 서버가 제공하는 응답이다.
+ console.log(response.status); // status는 HTTP 상태 코드이다.
+ console.log(response.statusText); // statusText는 HTTP 상태 메시지이다.
+ console.log(response.headers); // // headers 서버가 응답 한 헤더는 모든 헤더 이름이 소문자로 제공한다
+ console.log(response.config); config는 요청을 위해 Axios가 제공하는 구성이다.
+ });
+
+
+```
+## axios GET
+
+get 메서드를 사용하는 상황은 이러하다. 단순한 데이터(게시글 목록, 사용자 목록), 파라미터 데이터를 포함시키는 경우
+
+```javascript
+
+ // user에게 할당된 id 값과 함께 요청을 합니다.
+ axios.get('/user?ID=12345')
+ .then(function (response) {
+ // 성공했을 때
+ })
+ .catch(function (error) {
+ // 에러가 났을 때
+ })
+ .finally(function () {
+ // 항상 실행되는 함수
+ });
+
+ // 위와는 같지만, 옵션을 주고자 할 때는 이렇게 요청을 합니다.
+ axios.get('/user', {
+ params: {
+ ID: 12345
+ }
+ })
+ .then(function (response) {
+ // 성공했을 때
+ })
+ .catch(function (error) {
+ // 에러가 났을 때
+ })
+ .finally(function () {
+ // 항상 실행되는 함수
+ });
+
+ // async/await 를 쓰고 싶다면 async 함수/메소드를 만듭니다.
+ async function getUser() {
+ try {
+ const response = await axios.get('/user?ID=12345');
+ console.log(response);
+ } catch (error) {
+ console.error(error);
+ }
+ }
+
+
+```
+## axios POST
+
+새로운 리소스를 생성하여 서버에 제출할 때 사용된다. 회원가입, 게시글 작성 등의 작업에서 사용할 수 있다.
+
+```javascript
+
+ axios.post("url", {
+ firstName: 'Fred',
+ lastName: 'Flintstone'
+ })
+ .then(function (response) {
+ // response
+ }).catch(function (error) {
+ // 오류발생시 실행
+ })
+
+
+```
+## axios DELETE
+
+서버에서 리소스를 삭제할 때 사용한다. 게시글 삭제, 사용자 삭제 등의 작업에서 사용할 수 있다
+
+```javascript
+
+ axios.delete('/user?ID=12345')
+ .then(function (response) {
+ // handle success
+ })
+ .catch(function (error) {
+ // handle error
+ })
+
+
+```
+## axios PUT
+
+서버에서 리소스를 업데이트 또는 교체할 떄 사용한다. 게시글 수정, 사용자 정보 업데이트 등의 작업에서 사용된다.
+
+```javascript
+
+ axios.put("url", {
+ username: "",
+ password: ""
+ })
+ .then(function (response) {
+ // response
+ }).catch(function (error) {
+ // 오류발생시 실행
+ })
+
+
+```
+[https://axios-http.com/](https://axios-http.com/)
+
+[https://inpa.tistory.com/entry/AXIOS-%F0%9F%93%9A-%EC%84%A4%EC%B9%98-%EC%82%AC%EC%9A%A9](https://inpa.tistory.com/entry/AXIOS-%F0%9F%93%9A-%EC%84%A4%EC%B9%98-%EC%82%AC%EC%9A%A9)
diff --git a/src/content/posts/frontEnd/CiCdLearn.md b/src/content/posts/frontEnd/CiCdLearn.md
index 0be0add..e3f310d 100644
--- a/src/content/posts/frontEnd/CiCdLearn.md
+++ b/src/content/posts/frontEnd/CiCdLearn.md
@@ -1,26 +1,26 @@
----
-title: ci/cd에 대해 알아보자
-tags: [frontEnd]
-date: "2023.03.16"
----
-## ci/cd에 대해 알아보자
-
-ci/cd는 지속적인 통합, 지속적인 배포라는 뜻을 가지고 있다. 그럼 왜 지속적인 통합과 배포가 필요한가라고 하면 서비스를 배포할 때 마다. 개발자들이 직접 수정, 빌드, 테스트, 배포를 하게 된다면 상당히 많은 시간이 소요된다. 이때 ci/cd를 맞게 작성한다면 빌드, 테스트, 배포를 하는 시간을 크게 줄일 수 있어 일의 효율성이 올라간다.
-
-## ci란?
-
-ci(Continuous Integration)는 지속적 통합이라는 뜻을 가지고 있다. 지속적 통합이라는 뜻은 새로운 코드 변경과 정기적으로 빌드, 테스트 및 공유 저장소에 병합됨을 의미한다. 여러명의 개발자가 동시에 어플리케이션 개발과 관련된 코드 작업을 할 경우 서로 충돌할 수 있는 문제를 해결할 수 있습니다.
-
-## cd란?
-
-cd(Continuous Delivery 또는 Continuous Depolyment)는 지속적은 배포라는 뜻을 가지고 있습니다. 지속적인 배포라는 뜻은 빌드, 테스트 및 배포 단계의 자동화를 뜻하는데 지속적인 배포를 채택하면 품질 저하 없이 최대한 빨리 사용자에게 새로운 기능을 제공할 수 있습니다.
-
-## ci/cd의 종류
-
-Github Actions Jenkins 등이 있다.
-
-[https://www.redhat.com/en/topics/devops/what-is-ci-cd?cicd=32h281b](https://www.redhat.com/en/topics/devops/what-is-ci-cd?cicd=32h281b)
-
-[https://seosh817.tistory.com/104](https://seosh817.tistory.com/104)
-
-[https://artist-developer.tistory.com/24](https://artist-developer.tistory.com/24)
+---
+title: ci/cd에 대해 알아보자
+tags: [frontEnd]
+date: "2023.03.16"
+---
+## ci/cd에 대해 알아보자
+
+ci/cd는 지속적인 통합, 지속적인 배포라는 뜻을 가지고 있다. 그럼 왜 지속적인 통합과 배포가 필요한가라고 하면 서비스를 배포할 때 마다. 개발자들이 직접 수정, 빌드, 테스트, 배포를 하게 된다면 상당히 많은 시간이 소요된다. 이때 ci/cd를 맞게 작성한다면 빌드, 테스트, 배포를 하는 시간을 크게 줄일 수 있어 일의 효율성이 올라간다.
+
+## ci란?
+
+ci(Continuous Integration)는 지속적 통합이라는 뜻을 가지고 있다. 지속적 통합이라는 뜻은 새로운 코드 변경과 정기적으로 빌드, 테스트 및 공유 저장소에 병합됨을 의미한다. 여러명의 개발자가 동시에 어플리케이션 개발과 관련된 코드 작업을 할 경우 서로 충돌할 수 있는 문제를 해결할 수 있습니다.
+
+## cd란?
+
+cd(Continuous Delivery 또는 Continuous Depolyment)는 지속적은 배포라는 뜻을 가지고 있습니다. 지속적인 배포라는 뜻은 빌드, 테스트 및 배포 단계의 자동화를 뜻하는데 지속적인 배포를 채택하면 품질 저하 없이 최대한 빨리 사용자에게 새로운 기능을 제공할 수 있습니다.
+
+## ci/cd의 종류
+
+Github Actions Jenkins 등이 있다.
+
+[https://www.redhat.com/en/topics/devops/what-is-ci-cd?cicd=32h281b](https://www.redhat.com/en/topics/devops/what-is-ci-cd?cicd=32h281b)
+
+[https://seosh817.tistory.com/104](https://seosh817.tistory.com/104)
+
+[https://artist-developer.tistory.com/24](https://artist-developer.tistory.com/24)
diff --git a/src/content/posts/frontEnd/ClipBoardCopy.md b/src/content/posts/frontEnd/ClipBoardCopy.md
index 7a02cc6..ac00617 100644
--- a/src/content/posts/frontEnd/ClipBoardCopy.md
+++ b/src/content/posts/frontEnd/ClipBoardCopy.md
@@ -1,36 +1,36 @@
----
-title: 클립보드를 이용하여 텍스트를 복사하기
-tags: [frontEnd]
-date: "2023.02.01"
----
-텍스트를 복사하는 기능을 만들고 싶을 때 클립보드 기능을 이용하면 쉽게 만들 수 있다
-
-```javascript
-
- const handleCopyClipBoard = async (text) => {
- navigator.clipboard.writeText()
- };
-
-
-```
-이렇게 클립보드API를 이용하면 간단하게 클립보드를 이용한 복사기능을 만들 수 있다. 이때 주의사항이 있는데 클립보드에 엑세스 하면 암호나 신용카드 번호와 같이 중요한 정보에 엑세스 할 수 있는 문제가 생긴다 이와 같은 이유 때문에 http가 없는 임시 서버에서 실험을 할 경우 동작하지 않을 수 있다.
-
-[https://developer.mozilla.org/ko/docs/Web/API/Clipboard_API](https://developer.mozilla.org/ko/docs/Web/API/Clipboard_API)
-
-클립보드를 사용 할 수 없는 상황이라면 document.execCommand 기능을 이용하면 된다.
-
-```javascript
-
- const handleCopyClipBoard = (text) => {
- const input = document.createElement('input');
- input.value = text;
- document.body.appendChild(input);
- input.select();
- document.execCommand('copy');
- document.body.removeChild(input);
- alert('링크가 복사되었습니다.');
- };
-
-
-```
-[https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand](https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand)
+---
+title: 클립보드를 이용하여 텍스트를 복사하기
+tags: [frontEnd]
+date: "2023.02.01"
+---
+텍스트를 복사하는 기능을 만들고 싶을 때 클립보드 기능을 이용하면 쉽게 만들 수 있다
+
+```javascript
+
+ const handleCopyClipBoard = async (text) => {
+ navigator.clipboard.writeText()
+ };
+
+
+```
+이렇게 클립보드API를 이용하면 간단하게 클립보드를 이용한 복사기능을 만들 수 있다. 이때 주의사항이 있는데 클립보드에 엑세스 하면 암호나 신용카드 번호와 같이 중요한 정보에 엑세스 할 수 있는 문제가 생긴다 이와 같은 이유 때문에 http가 없는 임시 서버에서 실험을 할 경우 동작하지 않을 수 있다.
+
+[https://developer.mozilla.org/ko/docs/Web/API/Clipboard_API](https://developer.mozilla.org/ko/docs/Web/API/Clipboard_API)
+
+클립보드를 사용 할 수 없는 상황이라면 document.execCommand 기능을 이용하면 된다.
+
+```javascript
+
+ const handleCopyClipBoard = (text) => {
+ const input = document.createElement('input');
+ input.value = text;
+ document.body.appendChild(input);
+ input.select();
+ document.execCommand('copy');
+ document.body.removeChild(input);
+ alert('링크가 복사되었습니다.');
+ };
+
+
+```
+[https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand](https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand)
diff --git a/src/content/posts/frontEnd/CodePrettier.md b/src/content/posts/frontEnd/CodePrettier.md
index f12859e..245f201 100644
--- a/src/content/posts/frontEnd/CodePrettier.md
+++ b/src/content/posts/frontEnd/CodePrettier.md
@@ -1,46 +1,46 @@
----
-title: 코드 포멧팅 prettier
-tags: [frontEnd]
-date: "2023.07.27"
----
-## 코드 포멧터 Prettier
-
-여러 사람들과 개발을 하게되면 각자 개발 습관에 따라 세미콜론(;), 줄간격, 행 등이 각각이 달라 코드가 뒤죽박죽이 되는 상황이 생기게 됩니다. 이때 Prettier를 사용하게 되면 정해진 규칙에 따라 모맷팅 해주기 때문에 수고 없이 코드를 짜기만 하면 됩니다.
-
-## 사용방법
-
-```javascript
-
- yarn add prettier
-
- npm i prettier
-
-
-```
-설치가 끝났다면 .prettierrc.json 파일을 만들어 관리해줄 수 있다.
-
-```javascript
-
- {
- "tabWidth": 2, // 탭 간격
- "useTabs": false, // 탭 대신 스페이스를 사용여부
- "singleQuote": false, // 작은따옴표(')를 사용할지 큰 따옴표를 사용할지(") true일시 (')
- "semi": true, // 세미콜론 사용여부
- "jsxSingleQuote": true, // JSX에서 작은 따옴표를 사용여부
- "trailingComma": "es5", // 객체나 배열의 마지막 요소에 쉼표를 붙일지 여부
- "printWidth": 100 // 한 줄의 최대길이를 지정한다.
- }
-
-
-```
-package.json파일 scripts에 prettier --write . 를 추가해주면 간단한 명령어를 실행할 때 마다 코드 포맷팅이 실행된다.
-
-설정에서 Default Formatter 를 검색해주고 Default Formatter 부분에 Prettier - Code Fromatter 를 지정해주고 Settings에서 Text Editor를 클릭한 후 Formatting를 다시 클릭해준다
-
-Format On Paste : 사용자가 코드를 붙여넣기 했을 때, 자동으로 코드를 정렬 Format On Save : 사용자가 코드를 저장 했을 때, 자동으로 코드를 정렬 Format On Type : 사용자가 코드를 입력할 때, 자동으로 코드를 정렬
-
-설정하면 명령어를 실행하지 않아도 자동으로 포맷팅이 된다.
-
-[https://github.com/prettier/prettier-vscode](https://github.com/prettier/prettier-vscode)
-
-[https://ux.stories.pe.kr/150](https://ux.stories.pe.kr/150)
+---
+title: 코드 포멧팅 prettier
+tags: [frontEnd]
+date: "2023.07.27"
+---
+## 코드 포멧터 Prettier
+
+여러 사람들과 개발을 하게되면 각자 개발 습관에 따라 세미콜론(;), 줄간격, 행 등이 각각이 달라 코드가 뒤죽박죽이 되는 상황이 생기게 됩니다. 이때 Prettier를 사용하게 되면 정해진 규칙에 따라 모맷팅 해주기 때문에 수고 없이 코드를 짜기만 하면 됩니다.
+
+## 사용방법
+
+```javascript
+
+ yarn add prettier
+
+ npm i prettier
+
+
+```
+설치가 끝났다면 .prettierrc.json 파일을 만들어 관리해줄 수 있다.
+
+```javascript
+
+ {
+ "tabWidth": 2, // 탭 간격
+ "useTabs": false, // 탭 대신 스페이스를 사용여부
+ "singleQuote": false, // 작은따옴표(')를 사용할지 큰 따옴표를 사용할지(") true일시 (')
+ "semi": true, // 세미콜론 사용여부
+ "jsxSingleQuote": true, // JSX에서 작은 따옴표를 사용여부
+ "trailingComma": "es5", // 객체나 배열의 마지막 요소에 쉼표를 붙일지 여부
+ "printWidth": 100 // 한 줄의 최대길이를 지정한다.
+ }
+
+
+```
+package.json파일 scripts에 prettier --write . 를 추가해주면 간단한 명령어를 실행할 때 마다 코드 포맷팅이 실행된다.
+
+설정에서 Default Formatter 를 검색해주고 Default Formatter 부분에 Prettier - Code Fromatter 를 지정해주고 Settings에서 Text Editor를 클릭한 후 Formatting를 다시 클릭해준다
+
+Format On Paste : 사용자가 코드를 붙여넣기 했을 때, 자동으로 코드를 정렬 Format On Save : 사용자가 코드를 저장 했을 때, 자동으로 코드를 정렬 Format On Type : 사용자가 코드를 입력할 때, 자동으로 코드를 정렬
+
+설정하면 명령어를 실행하지 않아도 자동으로 포맷팅이 된다.
+
+[https://github.com/prettier/prettier-vscode](https://github.com/prettier/prettier-vscode)
+
+[https://ux.stories.pe.kr/150](https://ux.stories.pe.kr/150)
diff --git a/src/content/posts/frontEnd/ErrEdgesOut.md b/src/content/posts/frontEnd/ErrEdgesOut.md
index ee2424a..d3543d7 100644
--- a/src/content/posts/frontEnd/ErrEdgesOut.md
+++ b/src/content/posts/frontEnd/ErrEdgesOut.md
@@ -1,16 +1,16 @@
----
-title: npm ERR! Cannot read properties of null (reading 'edgesOut')
-tags: [frontEnd]
-date: "2023.07.13"
----
-최근 배포를 하던 와중에 npm ERR! Cannot properties of null (reading) 이런 에러가 발생했다.
-
-## 문제는?
-
-최신버젼의 styled-components에서 npm i styled-components를 수행하는 동안 생기는 문제였다.
-
-## 해결방법
-
-V5 사용, npm install styled-components@5.3.10 원사 사용, yarn install styled-components 베타 버전을 사용하려면,npm install styled-components@latest 나의 경우에는 npm install styled-components@latest 를 사용해 해결했다.
-
-[https://stackoverflow.com/questions/70810819/npm-err-cannot-read-properties-of-null-reading-edgesout](https://stackoverflow.com/questions/70810819/npm-err-cannot-read-properties-of-null-reading-edgesout)
+---
+title: npm ERR! Cannot read properties of null (reading 'edgesOut')
+tags: [frontEnd]
+date: "2023.07.13"
+---
+최근 배포를 하던 와중에 npm ERR! Cannot properties of null (reading) 이런 에러가 발생했다.
+
+## 문제는?
+
+최신버젼의 styled-components에서 npm i styled-components를 수행하는 동안 생기는 문제였다.
+
+## 해결방법
+
+V5 사용, npm install styled-components@5.3.10 원사 사용, yarn install styled-components 베타 버전을 사용하려면,npm install styled-components@latest 나의 경우에는 npm install styled-components@latest 를 사용해 해결했다.
+
+[https://stackoverflow.com/questions/70810819/npm-err-cannot-read-properties-of-null-reading-edgesout](https://stackoverflow.com/questions/70810819/npm-err-cannot-read-properties-of-null-reading-edgesout)
diff --git a/src/content/posts/frontEnd/Fixing-Duplicate-Highlighting-Issue.md b/src/content/posts/frontEnd/Fixing-Duplicate-Highlighting-Issue.md
index 80b54fa..ca11006 100644
--- a/src/content/posts/frontEnd/Fixing-Duplicate-Highlighting-Issue.md
+++ b/src/content/posts/frontEnd/Fixing-Duplicate-Highlighting-Issue.md
@@ -1,49 +1,49 @@
----
-title: Element previously highlighted
-tags: [frontEnd]
-date: "2025.02.01"
----
-이번에 블로그를 Next.js로 마이그레이션 하면서 코드 하이라이팅에 문제가 생겼습니다.
-
-## 문제 해결
-코드 하이라이팅이 중복으로 적용돼 에러 메세지가 출력됬고 코드가 변경될 때 마다 이전의 하이라이팅을 제거하고 다시 하이라이팅을 적용해주어야 합니다.
-
-하지만 저는 `react-highlight`를 이용해 간단하게 해결 했습니다.
-
-`react-highlight`는 React 방식으로 래핑한 라이브러리로 리셋하고 다시 하이라이팅하는 처리를 하지 않아도 됩니다.
-
-## 기능 추가
-문제를 해결한 김에 코드블록에 복사할 수 있는 버튼을 추가하고 싶어졌고 이렇게 애니메이션 까지 적용해
-기능을 개선 했습니다.
-```js
-useEffect(() => {
- const codeBlocks = document.querySelectorAll("pre");
- codeBlocks.forEach((block) => {
- if (block.querySelector(".copy-button")) return;
-
- const button = document.createElement("button");
- button.innerHTML = CopySvg;
- button.className = "copy-button"; // CSS 클래스 이름 추가
-
- // 복사 이벤트 핸들러
- button.addEventListener("click", () => {
- const code = block.querySelector("code")?.textContent || "";
- navigator.clipboard.writeText(code).then(() => {
- button.innerHTML = CheckSvg;
- button.classList.add("check-button"); // check-button 클래스 추가
- button.classList.remove("copy-button");
-
- // 2초 후에 check-button 클래스를 제거
- setTimeout(() => {
- button.innerHTML = CopySvg;
- button.classList.remove("check-button");
- button.classList.add("copy-button");
- }, 2000);
- });
- });
-
- block.style.position = "relative";
- block.appendChild(button);
- });
-}, [contentHtml]);
+---
+title: Element previously highlighted
+tags: [frontEnd]
+date: "2025.02.01"
+---
+이번에 블로그를 Next.js로 마이그레이션 하면서 코드 하이라이팅에 문제가 생겼습니다.
+
+## 문제 해결
+코드 하이라이팅이 중복으로 적용돼 에러 메세지가 출력됬고 코드가 변경될 때 마다 이전의 하이라이팅을 제거하고 다시 하이라이팅을 적용해주어야 합니다.
+
+하지만 저는 `react-highlight`를 이용해 간단하게 해결 했습니다.
+
+`react-highlight`는 React 방식으로 래핑한 라이브러리로 리셋하고 다시 하이라이팅하는 처리를 하지 않아도 됩니다.
+
+## 기능 추가
+문제를 해결한 김에 코드블록에 복사할 수 있는 버튼을 추가하고 싶어졌고 이렇게 애니메이션 까지 적용해
+기능을 개선 했습니다.
+```js
+useEffect(() => {
+ const codeBlocks = document.querySelectorAll("pre");
+ codeBlocks.forEach((block) => {
+ if (block.querySelector(".copy-button")) return;
+
+ const button = document.createElement("button");
+ button.innerHTML = CopySvg;
+ button.className = "copy-button"; // CSS 클래스 이름 추가
+
+ // 복사 이벤트 핸들러
+ button.addEventListener("click", () => {
+ const code = block.querySelector("code")?.textContent || "";
+ navigator.clipboard.writeText(code).then(() => {
+ button.innerHTML = CheckSvg;
+ button.classList.add("check-button"); // check-button 클래스 추가
+ button.classList.remove("copy-button");
+
+ // 2초 후에 check-button 클래스를 제거
+ setTimeout(() => {
+ button.innerHTML = CopySvg;
+ button.classList.remove("check-button");
+ button.classList.add("copy-button");
+ }, 2000);
+ });
+ });
+
+ block.style.position = "relative";
+ block.appendChild(button);
+ });
+}, [contentHtml]);
```
\ No newline at end of file
diff --git a/src/content/posts/frontEnd/FontOptimization.md b/src/content/posts/frontEnd/FontOptimization.md
index bc38706..c0d2d46 100644
--- a/src/content/posts/frontEnd/FontOptimization.md
+++ b/src/content/posts/frontEnd/FontOptimization.md
@@ -1,53 +1,53 @@
----
-title: 웹폰트 최적화
-tags: [frontEnd]
-date: "2024.03.06"
----
-## 웹 폰트가 동작하는 방법
-
-우선 최적화를 진행하기 전에 웹 폰트가 어떻게 동작하는지 알아보도록 하겠다. 아래의 사진은 브라우저가 렌더링 하는 과정이다.
-
-
-[https://web.dev/articles/optimize-webfont-loading?hl=ko](https://web.dev/articles/optimize-webfont-loading?hl=ko)
-
-1. 브라우저가 HTML 문서을 요청한다. 2. 브라우저가 HTML 응답을 파싱하고 DOM을 구성하기 시작한다. 3. 브라우저가 CSS, JS 및 기타 리소스를 발견하고 요청을 전달한다. 4. 브라우저는 모든 CSS 콘텐츠가 수신된 후 CSSOM을 생성하고 이를 DOM트리와 결합하여 렌더링 트리를 구성한다. - 렌더링 트리가 페이지에 지정된 텍스트를 렝더링 하는데 필요한 글꼴 버전을 표기하면 글꼴 요청이 전달 된다. 5. 브라우저는 레이아웃을 실행하고 콘텐츠를 화면에 페인팅한다. - 글꼴을 아직 사용할 수 없는 경우는 텍스트 픽셀을 렌더링 할 수 없다. - 글꼴을 사용할 수 있게 되면 브라우저가 텍스트 픽셀을 페인팅한다.
-
-이때 WebFonts를 미리 로드하고 font-display를 사용해 사용할 수 없는 글꼴이 있을 때 브라우저 작동 방식을 제어하면 빈 페이지 및 레이아웃 변경을 방지할 수 있다.
-
-## 웹 폰트 최적화 방법
-
-폰트의 리소스 요청은 다른 리소스 요청보다 늦게 시작하는데 이 요청을 앞당길 수 있는 방법이 있다.
-
-```javascript
-
-
-
-```
-위와 같이 preload를 사용하면 CSSOM이 생성될 때 까지 기다릴 필요 없이 폰트 리소스 요청을 할 수 있다.
-
-서브셋 폰트란 폰트에서 불필요한 글자를 제거한 폰트 파일을 말하는데 예를 들어 (뿪, 깖) 같이 사용하지 않는 조합을 제거한 파일을 말한다. 서브셋 폰트를 사용하기 위해선 서브셋 폰트를 만들어주는 사이트를 이용하거나 unicode-range를 사용하면 된다. unicode-range는 유니코드의 필요한 범위만 다운 받을 수 있는 방법이다.
-
-```javascript
-
- @font-face {
- font-family: 'Awesome Font';
- font-style: normal;
- font-weight: 400;
- font-display: auto;
- src: local('Awesome Font'),
- url('/fonts/awesome-l.woff2') format('woff2'),
- url('/fonts/awesome-l.woff') format('woff'),
- url('/fonts/awesome-l.ttf') format('truetype'),
- url('/fonts/awesome-l.eot') format('embedded-opentype');
- unicode-range: U+000-5FF; // 사용할 범위 지정
- }
-
-```
-폰트에도 다양한 형식이 있는데 압축률이 잘 되어있는 형식을 사용하는 방법이다. 일반적으로 WOFF, WOFF2가 압축률이 좋아 로드 속도가 매우 빠르다. WOFF2의 경우 WOFF를 30% ~ 50% 정도 압축했지만 IE11를 지원하지 않기 때문에 잘 고려해보는 것이 좋다. 아래의 사진은 글꼴 형식을 지원하는 브라우저이다.
-
-
-[https://www.w3schools.com/Css/css3_fonts.asp](https://www.w3schools.com/Css/css3_fonts.asp)
-
-## 마치며
-
-이처럼 최적화를 위해서 정말 다양한 방법을 이용해 적절한 폰트의 선택과 로딩과정을 신경 써야 한다는 점을 알게 되었다.
+---
+title: 웹폰트 최적화
+tags: [frontEnd]
+date: "2024.03.06"
+---
+## 웹 폰트가 동작하는 방법
+
+우선 최적화를 진행하기 전에 웹 폰트가 어떻게 동작하는지 알아보도록 하겠다. 아래의 사진은 브라우저가 렌더링 하는 과정이다.
+
+
+[https://web.dev/articles/optimize-webfont-loading?hl=ko](https://web.dev/articles/optimize-webfont-loading?hl=ko)
+
+1. 브라우저가 HTML 문서을 요청한다. 2. 브라우저가 HTML 응답을 파싱하고 DOM을 구성하기 시작한다. 3. 브라우저가 CSS, JS 및 기타 리소스를 발견하고 요청을 전달한다. 4. 브라우저는 모든 CSS 콘텐츠가 수신된 후 CSSOM을 생성하고 이를 DOM트리와 결합하여 렌더링 트리를 구성한다. - 렌더링 트리가 페이지에 지정된 텍스트를 렝더링 하는데 필요한 글꼴 버전을 표기하면 글꼴 요청이 전달 된다. 5. 브라우저는 레이아웃을 실행하고 콘텐츠를 화면에 페인팅한다. - 글꼴을 아직 사용할 수 없는 경우는 텍스트 픽셀을 렌더링 할 수 없다. - 글꼴을 사용할 수 있게 되면 브라우저가 텍스트 픽셀을 페인팅한다.
+
+이때 WebFonts를 미리 로드하고 font-display를 사용해 사용할 수 없는 글꼴이 있을 때 브라우저 작동 방식을 제어하면 빈 페이지 및 레이아웃 변경을 방지할 수 있다.
+
+## 웹 폰트 최적화 방법
+
+폰트의 리소스 요청은 다른 리소스 요청보다 늦게 시작하는데 이 요청을 앞당길 수 있는 방법이 있다.
+
+```javascript
+
+
+
+```
+위와 같이 preload를 사용하면 CSSOM이 생성될 때 까지 기다릴 필요 없이 폰트 리소스 요청을 할 수 있다.
+
+서브셋 폰트란 폰트에서 불필요한 글자를 제거한 폰트 파일을 말하는데 예를 들어 (뿪, 깖) 같이 사용하지 않는 조합을 제거한 파일을 말한다. 서브셋 폰트를 사용하기 위해선 서브셋 폰트를 만들어주는 사이트를 이용하거나 unicode-range를 사용하면 된다. unicode-range는 유니코드의 필요한 범위만 다운 받을 수 있는 방법이다.
+
+```javascript
+
+ @font-face {
+ font-family: 'Awesome Font';
+ font-style: normal;
+ font-weight: 400;
+ font-display: auto;
+ src: local('Awesome Font'),
+ url('/fonts/awesome-l.woff2') format('woff2'),
+ url('/fonts/awesome-l.woff') format('woff'),
+ url('/fonts/awesome-l.ttf') format('truetype'),
+ url('/fonts/awesome-l.eot') format('embedded-opentype');
+ unicode-range: U+000-5FF; // 사용할 범위 지정
+ }
+
+```
+폰트에도 다양한 형식이 있는데 압축률이 잘 되어있는 형식을 사용하는 방법이다. 일반적으로 WOFF, WOFF2가 압축률이 좋아 로드 속도가 매우 빠르다. WOFF2의 경우 WOFF를 30% ~ 50% 정도 압축했지만 IE11를 지원하지 않기 때문에 잘 고려해보는 것이 좋다. 아래의 사진은 글꼴 형식을 지원하는 브라우저이다.
+
+
+[https://www.w3schools.com/Css/css3_fonts.asp](https://www.w3schools.com/Css/css3_fonts.asp)
+
+## 마치며
+
+이처럼 최적화를 위해서 정말 다양한 방법을 이용해 적절한 폰트의 선택과 로딩과정을 신경 써야 한다는 점을 알게 되었다.
diff --git a/src/content/posts/frontEnd/Front-End-Features-in-2025.md b/src/content/posts/frontEnd/Front-End-Features-in-2025.md
index 215dea6..a01bef3 100644
--- a/src/content/posts/frontEnd/Front-End-Features-in-2025.md
+++ b/src/content/posts/frontEnd/Front-End-Features-in-2025.md
@@ -1,114 +1,114 @@
----
-title: 2025년 추가된 HTML, CSS 기능
-tags: [frontEnd]
-date: "2025.01.12"
----
-2025년이 되어 HTML과 CSS에 새로운 기능들을 소개하며 활용할 방법들을 고민하도록 하겠습니다.
-
-직접 정보를 보고싶은 분은 [여기](https://www.smashingmagazine.com/2024/12/new-front-end-features-for-designers-in-2025/)에서 확인할 수 있습니다.
-
-## 1. CSS Layers (@layer)
-https://developer.mozilla.org/en-US/docs/Web/CSS/@layer
-
-CSS에 우선 순위를 설정할 수 있습니다.
-Layer는 아래와 같이 선언해 사용할 수 있으며 나중에 선언한 Layer가 스타일 우선 순위를 가집니다.
-```CSS
-@layer {
- ...
-}
-```
-
-상단부에 미리 순서를 정의해 우선순위를 결정할 수 있습니다.
-- `reset` >`components`
-```css
-@layer components, reset;
-@layer reset { /* 우선순위가 됨 */
- * {
- margin: 0;
- padding: 0;
- }
-}
-@layer components {
- .button {
- background-color: blue;
- }
-}
-```
-
-## 2. Scope At-rules (@scope)
-https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries
-
-container query는 viewport기준이 아니라 요소의 크기에 따라 반응형으로 스타일링이 가능합니다.
-
-`@container <컨테이너 이름>`형식으로 쓰이고 미디어 쿼리처럼 사용할 수 있습니다.
-```
-.card h2 {
- font-size: 1em;
-}
-
-@container (min-width: 700px) {
- .card h2 {
- font-size: 2em;
- }
-}
-```
-
-## 3. Scope At-rules
-https://developer.mozilla.org/en-US/docs/Web/CSS/@scope
-
-`@scope`를 스타일을 적용할 수 있는 범위를 제한할 수 있습니다.
-
-```html
-
-
-
-```
-```css
-li {
- color: green;
-}
-
-@scope (.name) {
- :scope {
- background: skyblue;
- padding: 0.5rem;
- }
-
- li {
- color: blue;
- }
-}
-
-@scope (.age) {
- & {
- background: pink;
- padding: 0.5rem;
- }
-
- & li {
- color: red;
- }
-}
-```
-
-## 4. text‑wrap: balance
-https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap
-
-요소 내부에 텍스트를 균형있게 정렬해주는 기능입니다.
-
-## 5. scroll-snap 속성
-https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll_snap
-https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type
-
-scroll-snap 속성을 이용하면 자바스크립트 없이 요소가 스크롤 되는 위치에 자동으로
-스냅되도록 하는 CSS속성 입니다.
-
-## 마치며
-이 외에도 [여기](https://www.smashingmagazine.com/2024/12/new-front-end-features-for-designers-in-2025/)에서 다른 변경사항들을 확인할 수 있습니다.
+---
+title: 2025년 추가된 HTML, CSS 기능
+tags: [frontEnd]
+date: "2025.01.12"
+---
+2025년이 되어 HTML과 CSS에 새로운 기능들을 소개하며 활용할 방법들을 고민하도록 하겠습니다.
+
+직접 정보를 보고싶은 분은 [여기](https://www.smashingmagazine.com/2024/12/new-front-end-features-for-designers-in-2025/)에서 확인할 수 있습니다.
+
+## 1. CSS Layers (@layer)
+https://developer.mozilla.org/en-US/docs/Web/CSS/@layer
+
+CSS에 우선 순위를 설정할 수 있습니다.
+Layer는 아래와 같이 선언해 사용할 수 있으며 나중에 선언한 Layer가 스타일 우선 순위를 가집니다.
+```CSS
+@layer {
+ ...
+}
+```
+
+상단부에 미리 순서를 정의해 우선순위를 결정할 수 있습니다.
+- `reset` >`components`
+```css
+@layer components, reset;
+@layer reset { /* 우선순위가 됨 */
+ * {
+ margin: 0;
+ padding: 0;
+ }
+}
+@layer components {
+ .button {
+ background-color: blue;
+ }
+}
+```
+
+## 2. Scope At-rules (@scope)
+https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries
+
+container query는 viewport기준이 아니라 요소의 크기에 따라 반응형으로 스타일링이 가능합니다.
+
+`@container <컨테이너 이름>`형식으로 쓰이고 미디어 쿼리처럼 사용할 수 있습니다.
+```
+.card h2 {
+ font-size: 1em;
+}
+
+@container (min-width: 700px) {
+ .card h2 {
+ font-size: 2em;
+ }
+}
+```
+
+## 3. Scope At-rules
+https://developer.mozilla.org/en-US/docs/Web/CSS/@scope
+
+`@scope`를 스타일을 적용할 수 있는 범위를 제한할 수 있습니다.
+
+```html
+
+
+
+```
+```css
+li {
+ color: green;
+}
+
+@scope (.name) {
+ :scope {
+ background: skyblue;
+ padding: 0.5rem;
+ }
+
+ li {
+ color: blue;
+ }
+}
+
+@scope (.age) {
+ & {
+ background: pink;
+ padding: 0.5rem;
+ }
+
+ & li {
+ color: red;
+ }
+}
+```
+
+## 4. text‑wrap: balance
+https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap
+
+요소 내부에 텍스트를 균형있게 정렬해주는 기능입니다.
+
+## 5. scroll-snap 속성
+https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll_snap
+https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type
+
+scroll-snap 속성을 이용하면 자바스크립트 없이 요소가 스크롤 되는 위치에 자동으로
+스냅되도록 하는 CSS속성 입니다.
+
+## 마치며
+이 외에도 [여기](https://www.smashingmagazine.com/2024/12/new-front-end-features-for-designers-in-2025/)에서 다른 변경사항들을 확인할 수 있습니다.
저는 scroll-snap 속성이 가장 신기했고 진행하고 있는 프로젝트에 적용해 더 좋은 사용자 경험을 제공할 수 있을거 같단 생각이 듭니다.
\ No newline at end of file
diff --git a/src/content/posts/frontEnd/How-to-Use-Tailwind-CSS.md b/src/content/posts/frontEnd/How-to-Use-Tailwind-CSS.md
index d3ec9c6..d869afb 100644
--- a/src/content/posts/frontEnd/How-to-Use-Tailwind-CSS.md
+++ b/src/content/posts/frontEnd/How-to-Use-Tailwind-CSS.md
@@ -1,173 +1,173 @@
----
-title: Tailwind CSS 사용법
-tags: [frontEnd]
-date: "2024.08.10"
----
-
-
-이번에 next.js로 프로젝트를 구성하면서 Tailwind CSS를 사용하기로 해서
-자세하게 알고 넘어가보려 합니다.
-
-## Tailwind CSS
-Tailwind CSS는 유틸리티-퍼스트(Utility-first) 접근 방식을 기반으로 하는 CSS 프레임워크로,
-클래스 기반 스타일링을 통해 빠르고 효율적인 UI 개발이 가능합니다.
-
-### Tailwind CSS 설치
-```bash
-npm install -D tailwindcss
-
-yarn add -D tailwindcss
-```
-
-### 템플릿 경로 구성
-tailwind.config 파일에서 테일윈드의 구성요소를 설정할 수 있습니다.
-```javascript
-/** @type {import('tailwindcss').Config} */
-module.exports = {
- content: ["./src/**/*.{html,js}"],
- theme: {
- extend: {}, // 커스텀 스타일을 설정할 수 있습니다.
- },
- plugins: [],
-}
-```
-
-### Tailwind CSS 스타일 추가하기
-
-메인 CSS파일에서 Tailwind CSS 스타일을 추가할 수 있습니다.
-
-```css
-@tailwind base;
-/* 테일윈드의 기본 스타일을 삽입합니다. */
-
-@tailwind components;
-/* 테일윈드에서 제공하는 컴포넌트 스타일을 삽입합니다. */
-
-@tailwind utilities;
-/* 테일윈드에서 제공하는 유틸리티 클래스를 정의합니다. */
-
-@tailwind variants
-```
-
-자바스크립트 파일에서 직접 임포트해 스타일을 적용할 수 있습니다.
-그리고 `@apply`를 이용해 Tailwind 유틸리티 클래스를 사용할 수 있습니다.
-```css
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-.container {
- @apply max-w-7xl mx-auto px-4;
-}
-
-.text-xl {
- @apply text-xl font-semibold text-gray-800;
-}
-```
-
-`@tailwind base`는 기본 스타일을 초기화 하거나 Tailwind CSS에서 제공하는
-일관된 스타일을 정의할 수 있습니다.
-
-
-```css
-@tailwind base;
-
-@layer base{
- *, ::before, ::after {
- box-sizing: border-box;
- border-width: 0;
- border-style: solid;
- border-color: currentColor;
- }
- body {
- margin: 0;
- font-family: inherit;
- line-height: inherit;
- }
-}
-```
-
-`@tailwind components`는 Tailwind CSS에서 제공하는 `container`와 같은 컴포넌트
-스타일이나 커스텀 컴포넌트 스타일을 정의 합니다.
-
-```css
-@tailwind components;
-
-@layer components{
- .container {
- width: 100%;
- margin-left: auto;
- margin-right: auto;
- padding-left: 1rem; /* 16px */
- padding-right: 1rem; /* 16px */
- }
-
- .btn {
- @apply px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-700;
- }
-
- @media (min-width: 640px) {
- .container {
- max-width: 640px;
- }
- }
-}
-```
-
-`@tailwind utilities`는 Tailwind CSS에서 제공하는 `mt-10`과 같은 새로운
-유틸리티 클래스를 정의할 수 있습니다.
-
-```css
-@tailwind utilities;
-
-@layer utilities{
- .mt-15 {
- margin-top: 3.75rem; /* 사용자 정의 마진 값 */
- }
-}
-```
-`@tailwind variants`는 `hover`, `focus`, `active`같은 상태를 다룰 때 사용됩니다.
-
-```css
-@tailwind variants;
-
-@variants hover {
- .btn {
- @apply bg-blue-500;
- }
-}
-```
-
-### 모듈화
-
-`@apply`를 사용해 모듈화 하면 `.module.css` 스타일의 일관성을 유지하면서
-컴포넌트 기반의 스타일을 관리할 수 있습니다.
-
-```css
-/* Button.module.css */
-.button {
- @apply px-4 py-2 bg-blue-500 text-white rounded-lg;
-}
-```
-
-### `tailwind.config.js` 커스텀
-
-Tailwind 구성파일에 테마, 색상, 글꼴, 간격 등 다양한 기본 값을 커스텀할 수 있습니다.
-
-```
-module.exports = {
- theme: {
- extend: {
- colors: {
- customColor: '#ff5733',
- },
- },
- },
-}
-```
-### 플러그인
-
-Tailwind CSS IntelliSense 플러그인을 사용해 자동완성이나 클래스 이름,
-CSS 함수 및 지시문 에 대한 제안을 받을 수 있습니다.
-
+---
+title: Tailwind CSS 사용법
+tags: [frontEnd]
+date: "2024.08.10"
+---
+
+
+이번에 next.js로 프로젝트를 구성하면서 Tailwind CSS를 사용하기로 해서
+자세하게 알고 넘어가보려 합니다.
+
+## Tailwind CSS
+Tailwind CSS는 유틸리티-퍼스트(Utility-first) 접근 방식을 기반으로 하는 CSS 프레임워크로,
+클래스 기반 스타일링을 통해 빠르고 효율적인 UI 개발이 가능합니다.
+
+### Tailwind CSS 설치
+```bash
+npm install -D tailwindcss
+
+yarn add -D tailwindcss
+```
+
+### 템플릿 경로 구성
+tailwind.config 파일에서 테일윈드의 구성요소를 설정할 수 있습니다.
+```javascript
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ content: ["./src/**/*.{html,js}"],
+ theme: {
+ extend: {}, // 커스텀 스타일을 설정할 수 있습니다.
+ },
+ plugins: [],
+}
+```
+
+### Tailwind CSS 스타일 추가하기
+
+메인 CSS파일에서 Tailwind CSS 스타일을 추가할 수 있습니다.
+
+```css
+@tailwind base;
+/* 테일윈드의 기본 스타일을 삽입합니다. */
+
+@tailwind components;
+/* 테일윈드에서 제공하는 컴포넌트 스타일을 삽입합니다. */
+
+@tailwind utilities;
+/* 테일윈드에서 제공하는 유틸리티 클래스를 정의합니다. */
+
+@tailwind variants
+```
+
+자바스크립트 파일에서 직접 임포트해 스타일을 적용할 수 있습니다.
+그리고 `@apply`를 이용해 Tailwind 유틸리티 클래스를 사용할 수 있습니다.
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.container {
+ @apply max-w-7xl mx-auto px-4;
+}
+
+.text-xl {
+ @apply text-xl font-semibold text-gray-800;
+}
+```
+
+`@tailwind base`는 기본 스타일을 초기화 하거나 Tailwind CSS에서 제공하는
+일관된 스타일을 정의할 수 있습니다.
+
+
+```css
+@tailwind base;
+
+@layer base{
+ *, ::before, ::after {
+ box-sizing: border-box;
+ border-width: 0;
+ border-style: solid;
+ border-color: currentColor;
+ }
+ body {
+ margin: 0;
+ font-family: inherit;
+ line-height: inherit;
+ }
+}
+```
+
+`@tailwind components`는 Tailwind CSS에서 제공하는 `container`와 같은 컴포넌트
+스타일이나 커스텀 컴포넌트 스타일을 정의 합니다.
+
+```css
+@tailwind components;
+
+@layer components{
+ .container {
+ width: 100%;
+ margin-left: auto;
+ margin-right: auto;
+ padding-left: 1rem; /* 16px */
+ padding-right: 1rem; /* 16px */
+ }
+
+ .btn {
+ @apply px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-700;
+ }
+
+ @media (min-width: 640px) {
+ .container {
+ max-width: 640px;
+ }
+ }
+}
+```
+
+`@tailwind utilities`는 Tailwind CSS에서 제공하는 `mt-10`과 같은 새로운
+유틸리티 클래스를 정의할 수 있습니다.
+
+```css
+@tailwind utilities;
+
+@layer utilities{
+ .mt-15 {
+ margin-top: 3.75rem; /* 사용자 정의 마진 값 */
+ }
+}
+```
+`@tailwind variants`는 `hover`, `focus`, `active`같은 상태를 다룰 때 사용됩니다.
+
+```css
+@tailwind variants;
+
+@variants hover {
+ .btn {
+ @apply bg-blue-500;
+ }
+}
+```
+
+### 모듈화
+
+`@apply`를 사용해 모듈화 하면 `.module.css` 스타일의 일관성을 유지하면서
+컴포넌트 기반의 스타일을 관리할 수 있습니다.
+
+```css
+/* Button.module.css */
+.button {
+ @apply px-4 py-2 bg-blue-500 text-white rounded-lg;
+}
+```
+
+### `tailwind.config.js` 커스텀
+
+Tailwind 구성파일에 테마, 색상, 글꼴, 간격 등 다양한 기본 값을 커스텀할 수 있습니다.
+
+```
+module.exports = {
+ theme: {
+ extend: {
+ colors: {
+ customColor: '#ff5733',
+ },
+ },
+ },
+}
+```
+### 플러그인
+
+Tailwind CSS IntelliSense 플러그인을 사용해 자동완성이나 클래스 이름,
+CSS 함수 및 지시문 에 대한 제안을 받을 수 있습니다.
+
\ No newline at end of file
diff --git a/src/content/posts/frontEnd/Interface-Interceptor-Handling.md b/src/content/posts/frontEnd/Interface-Interceptor-Handling.md
index 35bd757..fdabf35 100644
--- a/src/content/posts/frontEnd/Interface-Interceptor-Handling.md
+++ b/src/content/posts/frontEnd/Interface-Interceptor-Handling.md
@@ -1,217 +1,217 @@
----
-title: 인터페이스와 인터셉터를 이용한 공통된 에러, 헤더 URL 처리
-tags: [frontEnd]
-date: "2024.10.19"
----
-메이플스토리 API를 활용한 웹 서비스 개발 중 API 키 노출 방지와 중복 코드 최소화를 위해
-Next.js API 라우트와 Axios 인터셉터를 결합한 경험을 공유합니다. 특히 TypeScript의 Generic을
-활용해 타입 안정성을 강화한 과정을 중점적으로 설명드리겠습니다.
-
-## 문제 상황
-클라이언트에서 바로 Nexon API를 호출하게 되면 API KEY가 노출되는 문제와
-API 호출에 헤더 및 URL설정 등이 반복되어 필요한 상황이 있었습니다.
-
-## 해결 방법
-### Next.js API 라우트
-우선 프록시 서버 역할로 API KEY를 보호할 수 있도록 Next.js API 라우트를 이용하기로 했습니다.
-
-**클라이언트 -> Next.js API -> Nexon API 호출**
-
-### Axios 인스턴스 생성, Axios 인터셉터 적용
-Axios 인터셉터를 활용하면 API 호출의 공통 설정을 관리할 수 있어 유지보수성을 높일 수 있습니다
-
-## 구현 방법
-우선 APIKEY를 숨기기 위해 환경설정 파일에 API KEY와 요청을 보낼 Base URL을 등록해줍니다.
-```.env
-NEXT_PUBLIC_MAPLEAPI_KEY="발급받은 API KEY"
-NEXT_PUBLIC_URL=https://open.api.nexon.com/maplestory
-```
-
-저는 클라이언트와 Next.js API 라우트에서 모두 요청을 보내야 하니
-클라이언트와 Next.js API 라우트에 필요한 인터페이스를 각각 생성해줍니다.
-
-```ts
-/* 클라이언트 */
-
-// Base URL
-export const getClientBase = () => process.env.NEXT_PUBLIC_BACKEND_URL
-
-const client = axios.create({
- timeout: 5000,
- baseURL: getClientBase(),
- headers: {
- 'Access-Control-Allow-Origin': '*',
- 'Content-Type': 'application/json',
- },
-})
-```
-```ts
-/* Next.js API 라우트 */
-
-// Base URL
-export const getBackEndBase = () => process.env.NEXT_PUBLIC_URL
-// 메이플 api 키
-export const getMapleKey = () => process.env.NEXT_PUBLIC_MAPLEAPI_KEY
-
-const backend = axios.create({
- timeout: 5000,
- baseURL: getBackEndBase(),
- headers: {
- 'Content-Type': 'application/json',
- 'Access-Control-Allow-Origin': '*',
- 'x-nxopen-api-key': getMapleKey(),
- },
-})
-```
-
-이러면 클라이언트에선 `client` 변수를 이용해 Next.js API 라우트 에선 `backend`변수를 이용해 데이터 요청을 보낼 수 있습니다.
-
-하지만 `GET`, `POST`, `PUT`, `Patch`, `Delete` 요청을 제너틱 타입을 이용해 응답 타입의 강제화와 메소드 통일성을 확보합니다.
-
-```typescript
-export const Get = async (
- url: string,
- config?: AxiosRequestConfig,
-): Promise> => {
- const response = await backend.get(url, config)
- return response
-}
-
-export const Post = async (
- url: string,
- data?: any,
- config?: AxiosRequestConfig,
-): Promise> => {
- const response = await backend.post(url, data, config)
-
- return response
-}
-
-export const Put = async (
- url: string,
- data?: any,
- config?: AxiosRequestConfig,
-): Promise> => {
- const response = await backend.put(url, data, config)
- return response
-}
-
-export const Patch = async (
- url: string,
- data?: any,
- config?: AxiosRequestConfig,
-): Promise> => {
- const response = await backend.patch(url, data, config)
-
- return response
-}
-
-export const Delete = async (
- url: string,
- data?: any,
- config?: AxiosRequestConfig,
-): Promise> => {
- const response = await backend.delete(url, {
- ...config,
- data,
- })
-
- return response
-}
-```
-`backend.interceptors.request.use()`와 `backend.interceptors.response.use()` 를 이용해 `request`와 `response`의 요청을 중간에 처리할 수 있습니다.
-
-저는 `request`요청에는 성공잘 보냈나 확인하기 위해 Next.js API 라우트에는 `console.log`를 이용해 확인했고 클라이언트 `response`요청은 에러를 공통으로 처리하기 위해 Nexon OPEN API 에서 제공하는 에러 코드 케이스테 따라 처리하도록 했습니다.
-```typescript
-// Next.js API 라우트 request
-backend.interceptors.request.use(
- (config: InternalAxiosRequestConfig) => {
- const { method, url } = config
- console.log(`[API - REQUEST] ${method?.toUpperCase()} ${url}`)
- return config
- },
- (error: any) => {
- return Promise.reject(error)
- },
-)
-
-// 클라이언트
-client.interceptors.response.use((res: AxiosResponse): AxiosResponse => {
- // 응답을 받은 후 처리할 작업
- return res
-}, onError)
-
-const onError = (error: AxiosError | Error): Promise => {
- if (axios.isAxiosError(error)) {
- if (error.response) {
- const name = error.response.data.name || '' // 기본값을 빈 문자열로 설정
- switch (name) {
- case 'OPENAPI00001':
- alert('500: 서버 내부 오류')
- break
- case 'OPENAPI00002':
- alert('403: 권한이 없는 경우')
- break
- case 'OPENAPI00003':
- alert('400: 유효하지 않은 식별자')
- break
- case 'OPENAPI00004':
- alert('400: 파라미터 누락 또는 유효하지 않음')
- break
- case 'OPENAPI00005':
- alert('400: 유효하지 않은 API KEY')
- break
- case 'OPENAPI00006':
- alert('400: 유효하지 않은 게임 또는 API PATH')
- break
- case 'OPENAPI00007':
- alert('429: API 호출량 초과')
- break
- case 'OPENAPI00009':
- alert('400: 데이터 준비 중')
- break
- case 'OPENAPI00010':
- alert('400: 게임 점검 중')
- break
- case 'OPENAPI00011':
- alert('503: API 점검 중')
- break
- default:
- alert('알 수 없는 오류')
- }
- }
- }
-
- return Promise.reject(error)
-}
-```
-
-요청을 보낼 때 특정 요청만을 보내는 함수를 만들어 요청을 보내기면 하면 됩니다.
-```ts
-// 캐릭터 정보를 가져오는 함수
-export const getCharInfo = async (
- characterName: string,
-): Promise> => {
- try {
- const characterResponse = await Get<
- ResponseDataType
- >(Paths.character, {
- params: {
- character_name: characterName,
- },
- })
- return characterResponse.data
- } catch (error) {
- console.error(error)
- throw new Error('Failed to get Char')
- }
-}
-```
-
-### 마치며
-Axios 인터셉터를 활용해 공통 에러 처리 및 로깅을 적용하고 각 HTTP요청을 함수화 해 타입 안정성을 확보하는 과정에서 많은 시행착오를 겪었습니다.
-특히 타입 안정성을 강화하는데 있어서 TypeScript를 활용한 명시적인 타입 설계와 안전한 코드 작성하는 방법을 이해할 수 있었습니다.
-
-또 예외 처리를 구현하면서 다양한 케이스의 에러를 고려해야 했고 이를 통해 더 견고한 API요청 방식을 고민할 수 있었습니다.
-
+---
+title: 인터페이스와 인터셉터를 이용한 공통된 에러, 헤더 URL 처리
+tags: [frontEnd]
+date: "2024.10.19"
+---
+메이플스토리 API를 활용한 웹 서비스 개발 중 API 키 노출 방지와 중복 코드 최소화를 위해
+Next.js API 라우트와 Axios 인터셉터를 결합한 경험을 공유합니다. 특히 TypeScript의 Generic을
+활용해 타입 안정성을 강화한 과정을 중점적으로 설명드리겠습니다.
+
+## 문제 상황
+클라이언트에서 바로 Nexon API를 호출하게 되면 API KEY가 노출되는 문제와
+API 호출에 헤더 및 URL설정 등이 반복되어 필요한 상황이 있었습니다.
+
+## 해결 방법
+### Next.js API 라우트
+우선 프록시 서버 역할로 API KEY를 보호할 수 있도록 Next.js API 라우트를 이용하기로 했습니다.
+
+**클라이언트 -> Next.js API -> Nexon API 호출**
+
+### Axios 인스턴스 생성, Axios 인터셉터 적용
+Axios 인터셉터를 활용하면 API 호출의 공통 설정을 관리할 수 있어 유지보수성을 높일 수 있습니다
+
+## 구현 방법
+우선 APIKEY를 숨기기 위해 환경설정 파일에 API KEY와 요청을 보낼 Base URL을 등록해줍니다.
+```.env
+NEXT_PUBLIC_MAPLEAPI_KEY="발급받은 API KEY"
+NEXT_PUBLIC_URL=https://open.api.nexon.com/maplestory
+```
+
+저는 클라이언트와 Next.js API 라우트에서 모두 요청을 보내야 하니
+클라이언트와 Next.js API 라우트에 필요한 인터페이스를 각각 생성해줍니다.
+
+```ts
+/* 클라이언트 */
+
+// Base URL
+export const getClientBase = () => process.env.NEXT_PUBLIC_BACKEND_URL
+
+const client = axios.create({
+ timeout: 5000,
+ baseURL: getClientBase(),
+ headers: {
+ 'Access-Control-Allow-Origin': '*',
+ 'Content-Type': 'application/json',
+ },
+})
+```
+```ts
+/* Next.js API 라우트 */
+
+// Base URL
+export const getBackEndBase = () => process.env.NEXT_PUBLIC_URL
+// 메이플 api 키
+export const getMapleKey = () => process.env.NEXT_PUBLIC_MAPLEAPI_KEY
+
+const backend = axios.create({
+ timeout: 5000,
+ baseURL: getBackEndBase(),
+ headers: {
+ 'Content-Type': 'application/json',
+ 'Access-Control-Allow-Origin': '*',
+ 'x-nxopen-api-key': getMapleKey(),
+ },
+})
+```
+
+이러면 클라이언트에선 `client` 변수를 이용해 Next.js API 라우트 에선 `backend`변수를 이용해 데이터 요청을 보낼 수 있습니다.
+
+하지만 `GET`, `POST`, `PUT`, `Patch`, `Delete` 요청을 제너틱 타입을 이용해 응답 타입의 강제화와 메소드 통일성을 확보합니다.
+
+```typescript
+export const Get = async (
+ url: string,
+ config?: AxiosRequestConfig,
+): Promise> => {
+ const response = await backend.get(url, config)
+ return response
+}
+
+export const Post = async (
+ url: string,
+ data?: any,
+ config?: AxiosRequestConfig,
+): Promise> => {
+ const response = await backend.post(url, data, config)
+
+ return response
+}
+
+export const Put = async (
+ url: string,
+ data?: any,
+ config?: AxiosRequestConfig,
+): Promise> => {
+ const response = await backend.put(url, data, config)
+ return response
+}
+
+export const Patch = async (
+ url: string,
+ data?: any,
+ config?: AxiosRequestConfig,
+): Promise> => {
+ const response = await backend.patch(url, data, config)
+
+ return response
+}
+
+export const Delete = async (
+ url: string,
+ data?: any,
+ config?: AxiosRequestConfig,
+): Promise> => {
+ const response = await backend.delete(url, {
+ ...config,
+ data,
+ })
+
+ return response
+}
+```
+`backend.interceptors.request.use()`와 `backend.interceptors.response.use()` 를 이용해 `request`와 `response`의 요청을 중간에 처리할 수 있습니다.
+
+저는 `request`요청에는 성공잘 보냈나 확인하기 위해 Next.js API 라우트에는 `console.log`를 이용해 확인했고 클라이언트 `response`요청은 에러를 공통으로 처리하기 위해 Nexon OPEN API 에서 제공하는 에러 코드 케이스테 따라 처리하도록 했습니다.
+```typescript
+// Next.js API 라우트 request
+backend.interceptors.request.use(
+ (config: InternalAxiosRequestConfig) => {
+ const { method, url } = config
+ console.log(`[API - REQUEST] ${method?.toUpperCase()} ${url}`)
+ return config
+ },
+ (error: any) => {
+ return Promise.reject(error)
+ },
+)
+
+// 클라이언트
+client.interceptors.response.use((res: AxiosResponse): AxiosResponse => {
+ // 응답을 받은 후 처리할 작업
+ return res
+}, onError)
+
+const onError = (error: AxiosError | Error): Promise => {
+ if (axios.isAxiosError(error)) {
+ if (error.response) {
+ const name = error.response.data.name || '' // 기본값을 빈 문자열로 설정
+ switch (name) {
+ case 'OPENAPI00001':
+ alert('500: 서버 내부 오류')
+ break
+ case 'OPENAPI00002':
+ alert('403: 권한이 없는 경우')
+ break
+ case 'OPENAPI00003':
+ alert('400: 유효하지 않은 식별자')
+ break
+ case 'OPENAPI00004':
+ alert('400: 파라미터 누락 또는 유효하지 않음')
+ break
+ case 'OPENAPI00005':
+ alert('400: 유효하지 않은 API KEY')
+ break
+ case 'OPENAPI00006':
+ alert('400: 유효하지 않은 게임 또는 API PATH')
+ break
+ case 'OPENAPI00007':
+ alert('429: API 호출량 초과')
+ break
+ case 'OPENAPI00009':
+ alert('400: 데이터 준비 중')
+ break
+ case 'OPENAPI00010':
+ alert('400: 게임 점검 중')
+ break
+ case 'OPENAPI00011':
+ alert('503: API 점검 중')
+ break
+ default:
+ alert('알 수 없는 오류')
+ }
+ }
+ }
+
+ return Promise.reject(error)
+}
+```
+
+요청을 보낼 때 특정 요청만을 보내는 함수를 만들어 요청을 보내기면 하면 됩니다.
+```ts
+// 캐릭터 정보를 가져오는 함수
+export const getCharInfo = async (
+ characterName: string,
+): Promise> => {
+ try {
+ const characterResponse = await Get<
+ ResponseDataType
+ >(Paths.character, {
+ params: {
+ character_name: characterName,
+ },
+ })
+ return characterResponse.data
+ } catch (error) {
+ console.error(error)
+ throw new Error('Failed to get Char')
+ }
+}
+```
+
+### 마치며
+Axios 인터셉터를 활용해 공통 에러 처리 및 로깅을 적용하고 각 HTTP요청을 함수화 해 타입 안정성을 확보하는 과정에서 많은 시행착오를 겪었습니다.
+특히 타입 안정성을 강화하는데 있어서 TypeScript를 활용한 명시적인 타입 설계와 안전한 코드 작성하는 방법을 이해할 수 있었습니다.
+
+또 예외 처리를 구현하면서 다양한 케이스의 에러를 고려해야 했고 이를 통해 더 견고한 API요청 방식을 고민할 수 있었습니다.
+
[axios 문서](https://axios-http.com/docs/intro)
\ No newline at end of file
diff --git a/src/content/posts/frontEnd/PerformanceTest.md b/src/content/posts/frontEnd/PerformanceTest.md
index 91dcf12..e93750f 100644
--- a/src/content/posts/frontEnd/PerformanceTest.md
+++ b/src/content/posts/frontEnd/PerformanceTest.md
@@ -1,35 +1,35 @@
----
-title: 프론트엔드 성능 측정
-tags: [frontEnd]
-date: "2024.03.05"
----
-## 웹 성능이란
-
-웹 성능은 페이지의 로딩 시간, 렌더링 속도, 사용자 경험등을 나타내는 말이다. 따라서 웹 성능 측정은 아주 중요한 과정이며 오늘은 웹 성능 측정 도구중 하나인 Lighthouse에 대해서 기록하도록 하겠다.
-
-##
-
-[https://developer.chrome.com/docs/lighthouse/performance/performance-scoring?hl=ko#metrics](https://developer.chrome.com/docs/lighthouse/performance/performance-scoring?hl=ko#metrics)
-
-Lighthouse는 구글에서 개발한 웹 페이지 성능 측정 도구로 크롬 브라우저에 내장되어 있어 개발자도구에서 Lighthouse 탭을 이용해 사용할 수 있다.
-
-## 성능 지표
-
-
-Lighthouse는 다음과 같은 지표를 보여준다 1. Performance 웹 페이지의 로딩속도를 측정해 지표로 보여준다. 2. Accessibility 웹 사이트의 접근성을 얼마나 잘 지켰나 검사한다. 3. Best Practices 웹 페이지가 웹 표준을 잘 지키고 있는지 검사한다. 4. SEO 웹 페이지가 검색 엔진에 대해 최적화가 잘 되었는지를 검사한다. 5. Progressive Web App 웹 페이지가 웹과 앱이 유사한 사용자 경험을 제공하는지 검사한다.
-
-## 진단
-
-
-
-1. First Contentful Paint는 브라우저가 첫 번째 DOM 컨텐츠를 렌더링하는데 걸리는 시간을 나타낸다. 2. Largest Contentful Paint는 뷰포트에서 가장 큰 컨텐츠 요소가 화면에 렌더링 될 때 걸리는 시간을 타나낸다. 3. Total Blocking Time는 웹 페이지 로딩이 차단된 시간을 나타낸다 주로 과정에서 CSS 및 JS파일의 다운로드 및 파싱, 렌더링을 차단하는 JavaScript코드의 실행이 원인이 된다. 4. Cumulative Layout Shift는 사용자가 불편함을 유발 할 수 있는 요소를 측정하는 지표이다. 5. Speed Index는 웹 페이지를 불러올 때 컨텐츠가 시각적으로 표시될 때 까지 걸리는 시간을 나타낸다.
-
-## 성능 최적화 기대 효과
-
-이렇게 Lighthouse를 이용해 성능 최적화를 진행하면 보다 빠른 웹 서비스를 제공할 수 있고 이 점은 유저 이탈률을 줄일 수 있다. 실제로 유저들은 3초 이내에 페이지가 로딩되지 않으면 뒤로가기 버튼을 누른다는 구글의 조사 자료가 있다. 또한 빠른 페이지 로딩으로 서버 및 네트워크 리소스 낭비를 줄여 비용을 절감 할 수 있다.
-
-## 추가로
-
-그동안 나는 개발에만 관심이 있었지 성능 최적화 같이 비지니스나 서비스 운영 쪽으로는 생각하지 못 했었다. 하지만 여러 구직 활동을 진행하면서 서비스 최적화에 대해 알게 되었고 직접 공부해보니 개발이외에도 고려해야 할 부분이 참 많다는걸 느꼈다.
-
-[https://devocean.sk.com/blog/techBoardDetail.do?ID=165395&boardType=techBlog](https://devocean.sk.com/blog/techBoardDetail.do?ID=165395&boardType=techBlog)
+---
+title: 프론트엔드 성능 측정
+tags: [frontEnd]
+date: "2024.03.05"
+---
+## 웹 성능이란
+
+웹 성능은 페이지의 로딩 시간, 렌더링 속도, 사용자 경험등을 나타내는 말이다. 따라서 웹 성능 측정은 아주 중요한 과정이며 오늘은 웹 성능 측정 도구중 하나인 Lighthouse에 대해서 기록하도록 하겠다.
+
+##
+
+[https://developer.chrome.com/docs/lighthouse/performance/performance-scoring?hl=ko#metrics](https://developer.chrome.com/docs/lighthouse/performance/performance-scoring?hl=ko#metrics)
+
+Lighthouse는 구글에서 개발한 웹 페이지 성능 측정 도구로 크롬 브라우저에 내장되어 있어 개발자도구에서 Lighthouse 탭을 이용해 사용할 수 있다.
+
+## 성능 지표
+
+
+Lighthouse는 다음과 같은 지표를 보여준다 1. Performance 웹 페이지의 로딩속도를 측정해 지표로 보여준다. 2. Accessibility 웹 사이트의 접근성을 얼마나 잘 지켰나 검사한다. 3. Best Practices 웹 페이지가 웹 표준을 잘 지키고 있는지 검사한다. 4. SEO 웹 페이지가 검색 엔진에 대해 최적화가 잘 되었는지를 검사한다. 5. Progressive Web App 웹 페이지가 웹과 앱이 유사한 사용자 경험을 제공하는지 검사한다.
+
+## 진단
+
+
+
+1. First Contentful Paint는 브라우저가 첫 번째 DOM 컨텐츠를 렌더링하는데 걸리는 시간을 나타낸다. 2. Largest Contentful Paint는 뷰포트에서 가장 큰 컨텐츠 요소가 화면에 렌더링 될 때 걸리는 시간을 타나낸다. 3. Total Blocking Time는 웹 페이지 로딩이 차단된 시간을 나타낸다 주로 과정에서 CSS 및 JS파일의 다운로드 및 파싱, 렌더링을 차단하는 JavaScript코드의 실행이 원인이 된다. 4. Cumulative Layout Shift는 사용자가 불편함을 유발 할 수 있는 요소를 측정하는 지표이다. 5. Speed Index는 웹 페이지를 불러올 때 컨텐츠가 시각적으로 표시될 때 까지 걸리는 시간을 나타낸다.
+
+## 성능 최적화 기대 효과
+
+이렇게 Lighthouse를 이용해 성능 최적화를 진행하면 보다 빠른 웹 서비스를 제공할 수 있고 이 점은 유저 이탈률을 줄일 수 있다. 실제로 유저들은 3초 이내에 페이지가 로딩되지 않으면 뒤로가기 버튼을 누른다는 구글의 조사 자료가 있다. 또한 빠른 페이지 로딩으로 서버 및 네트워크 리소스 낭비를 줄여 비용을 절감 할 수 있다.
+
+## 추가로
+
+그동안 나는 개발에만 관심이 있었지 성능 최적화 같이 비지니스나 서비스 운영 쪽으로는 생각하지 못 했었다. 하지만 여러 구직 활동을 진행하면서 서비스 최적화에 대해 알게 되었고 직접 공부해보니 개발이외에도 고려해야 할 부분이 참 많다는걸 느꼈다.
+
+[https://devocean.sk.com/blog/techBoardDetail.do?ID=165395&boardType=techBlog](https://devocean.sk.com/blog/techBoardDetail.do?ID=165395&boardType=techBlog)
diff --git a/src/content/posts/frontEnd/ReChartNPM.md b/src/content/posts/frontEnd/ReChartNPM.md
index f975bd1..3d86347 100644
--- a/src/content/posts/frontEnd/ReChartNPM.md
+++ b/src/content/posts/frontEnd/ReChartNPM.md
@@ -1,97 +1,97 @@
----
-title: 데이터 시각화 차트 라이브러리 사용하기
-tags: [froentEnd]
-date: "2024.05.25"
----
-라이브 채팅을 배포한 후 이를 관리하기 위한 백오피스를 만들고 있는중 운영중인 다양한 서비스의 시각화 데이터를 얻고 싶어 차트 라이브러리에 대해 알아보았습니다. 대표적인 차트 라이브러리로는 Chart.js, D3.js, Recharts등이 있지만 전 React와 호환성이 좋은 Recharts라이브러리를 사용하기로 했습니다.
-
-## Recharts
-
-Recharts는 복잡한 설정 없이 React 컴포넌트로서 쉽게 차트를 만들 수 있고 React의 상태 관리와 잘 알맞는 다는 장점이 있습니다. 또한 공식 문서의 친절한 가이드와 예제코드를 보며 동작 시켜볼 수 있습니다.
-
-## Recharts 설치 및 사용법
-
- npm이나 yarn을 이용해 설치해줍니다.
-
-```javascript
-npm install recharts
-
-yarn add recharts
-
-```
-Recharts는 Examples에서 다양한 차트를 선택해 예제 코드를 수정하며 사용해볼 수 있습니다.
-
-
-아래의 코드는 SimpleLineChart를 임의로 커스텀한 코드입니다. Line 컴포넌트를 이용해 별도의 선을 추가했고 CartesianGrid 컴포넌트를 제거해 배경에 보이는 표시선을 제거 했습니다. 컴포넌트가 아주 직관적이여서 학습하는데 어렵지 않고 API가이드를 보면 컴포넌트의 여러 속성이 친절하게 설명되어 있습니다.
-
-```javascript
-import React from 'react';
-import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
-
-const data = [
- {
- name: '1일차',
- "경기도": 4000,
- "강원도": 2400,
- "충청도": 1700,
- },
- {
- name: '2일차',
- "경기도": 3000,
- "강원도": 1398,
- "충청도": 2210,
- },
- {
- name: '3일차',
- "경기도": 3000,
- "강원도": 498,
- "충청도": 2210,
- },
- {
- name: '4일차',
- "경기도": 300,
- "강원도": 1398,
- "충청도": 2310,
- },
-];
-
-const Example = () => {
-
- return (
-
-
-
-
-
-
-
-
-
-
-
-
- );
-
-}
-
-export default Example
-
-```
-
-아래의 사진처럼 차트위에 마우스를 호버했을때 보여지는 툴팁이나 다른 스타일도 사용자가 원하는대로 커스텀 할 수 있고 API가이드를 보면 아주 친철하게 설명되어 있어 커스텀을 하는데 있어 어려움이 적었습니다.
-
-
-
-
-
+---
+title: 데이터 시각화 차트 라이브러리 사용하기
+tags: [froentEnd]
+date: "2024.05.25"
+---
+라이브 채팅을 배포한 후 이를 관리하기 위한 백오피스를 만들고 있는중 운영중인 다양한 서비스의 시각화 데이터를 얻고 싶어 차트 라이브러리에 대해 알아보았습니다. 대표적인 차트 라이브러리로는 Chart.js, D3.js, Recharts등이 있지만 전 React와 호환성이 좋은 Recharts라이브러리를 사용하기로 했습니다.
+
+## Recharts
+
+Recharts는 복잡한 설정 없이 React 컴포넌트로서 쉽게 차트를 만들 수 있고 React의 상태 관리와 잘 알맞는 다는 장점이 있습니다. 또한 공식 문서의 친절한 가이드와 예제코드를 보며 동작 시켜볼 수 있습니다.
+
+## Recharts 설치 및 사용법
+
+ npm이나 yarn을 이용해 설치해줍니다.
+
+```javascript
+npm install recharts
+
+yarn add recharts
+
+```
+Recharts는 Examples에서 다양한 차트를 선택해 예제 코드를 수정하며 사용해볼 수 있습니다.
+
+
+아래의 코드는 SimpleLineChart를 임의로 커스텀한 코드입니다. Line 컴포넌트를 이용해 별도의 선을 추가했고 CartesianGrid 컴포넌트를 제거해 배경에 보이는 표시선을 제거 했습니다. 컴포넌트가 아주 직관적이여서 학습하는데 어렵지 않고 API가이드를 보면 컴포넌트의 여러 속성이 친절하게 설명되어 있습니다.
+
+```javascript
+import React from 'react';
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
+
+const data = [
+ {
+ name: '1일차',
+ "경기도": 4000,
+ "강원도": 2400,
+ "충청도": 1700,
+ },
+ {
+ name: '2일차',
+ "경기도": 3000,
+ "강원도": 1398,
+ "충청도": 2210,
+ },
+ {
+ name: '3일차',
+ "경기도": 3000,
+ "강원도": 498,
+ "충청도": 2210,
+ },
+ {
+ name: '4일차',
+ "경기도": 300,
+ "강원도": 1398,
+ "충청도": 2310,
+ },
+];
+
+const Example = () => {
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+
+}
+
+export default Example
+
+```
+
+아래의 사진처럼 차트위에 마우스를 호버했을때 보여지는 툴팁이나 다른 스타일도 사용자가 원하는대로 커스텀 할 수 있고 API가이드를 보면 아주 친철하게 설명되어 있어 커스텀을 하는데 있어 어려움이 적었습니다.
+
+
+
+
+
\ No newline at end of file
diff --git a/src/content/posts/frontEnd/RecoilLearn.md b/src/content/posts/frontEnd/RecoilLearn.md
index 298a89f..fd40cf8 100644
--- a/src/content/posts/frontEnd/RecoilLearn.md
+++ b/src/content/posts/frontEnd/RecoilLearn.md
@@ -1,83 +1,83 @@
----
-title: Recoil에 대해 알아보자
-tags: [frontEnd]
-date: "2023.03.20"
----
-개발을 하다보면 전역 상태 관리라는 말을 한번쯤은 들어봤을거다. 프로젝트의 규모가 커져감에 따라 수많은 state와 props가 점점 복잡해져 이러한 상태를 관리해주는 라이브러리들이 생겼다. 그 후 react에서 Context API라는게 나오긴 했지만 여전히 상태관리 라이브러리를 사용 하고 있다.
-
-## Recoil란?
-
-Recoil은 hook을 사용하고 있는 사람이라면 익숙하게 사용 할 수 있는 장점이 있다.
-
-## Recoil 사용방법
-
-Recoil에는 Atom이라는 가장 작은 단위의 상태인데 state라고 생각하면 된다. Atom이 업데이트 되면 각 구독 구성 요소는 다시 렌더링이 된다.
-
-```javascript
-
- const fontSizeState = atom({
- key: 'fontSizeState',
- default: 14,
- });
-
-
-```
-Atom을 읽기 위해서는 useRecoilState이라는 훅이 필요합니다. 사용방법은 React의 useState와 비슷하다.
-
-```javascript
-
- function FontButton() {
- const [fontSize, setFontSize] = useRecoilState(fontSizeState);
- return (
-
- );
- };
-
-
-```
-selector은 atom의 값을 변환하고 결합하여 사용할 수 있는데 간단하게 풀어 말해서 selector이 가져다 쓴 atom의 값이 변하지 않고 새로운 형태의 값을 반환한다. 위에 있는 useRecoilState와의 차이점은 atom의 값이 변하지 않는 다는점이 차이점이다.
-
-```javascript
-
-const fontSizeLabelState = selector({
- key: 'fontSizeLabelState',
- get: ({get}) => {
- const fontSize = get(fontSizeState);
- const unit = 'px';
-
- return fontSizeunit;
- },
- });
-
-
-```
-useRecoilValue는 atom의 값을 읽기만 가능한 훅이다. 상태를 업데이트 할 필요가 없을때 사용하는 훅이다.
-
-```javascript
-
- function FontButton() {
- const [fontSize, setFontSize] = useRecoilState(fontSizeState);
- const fontSizeLabel = useRecoilValue(fontSizeLabelState);
-
- return (
- <>
- Current font size: {fontSizeLabel}
-
-
-
- );
- };
-
-
-```
-## 마무리
-
-Recoil를 사용하면서 느낀점은 다른 상태관리 라이브러리에 비해서 간단하게 전역상태관리를 할 수 있다는점이 매우 매력적으로 느껴졌다.
-
-[https://recoiljs.org/](https://recoiljs.org/)
-
-[https://ui.toast.com/weekly-pick/ko_20200616](https://ui.toast.com/weekly-pick/ko_20200616)
+---
+title: Recoil에 대해 알아보자
+tags: [frontEnd]
+date: "2023.03.20"
+---
+개발을 하다보면 전역 상태 관리라는 말을 한번쯤은 들어봤을거다. 프로젝트의 규모가 커져감에 따라 수많은 state와 props가 점점 복잡해져 이러한 상태를 관리해주는 라이브러리들이 생겼다. 그 후 react에서 Context API라는게 나오긴 했지만 여전히 상태관리 라이브러리를 사용 하고 있다.
+
+## Recoil란?
+
+Recoil은 hook을 사용하고 있는 사람이라면 익숙하게 사용 할 수 있는 장점이 있다.
+
+## Recoil 사용방법
+
+Recoil에는 Atom이라는 가장 작은 단위의 상태인데 state라고 생각하면 된다. Atom이 업데이트 되면 각 구독 구성 요소는 다시 렌더링이 된다.
+
+```javascript
+
+ const fontSizeState = atom({
+ key: 'fontSizeState',
+ default: 14,
+ });
+
+
+```
+Atom을 읽기 위해서는 useRecoilState이라는 훅이 필요합니다. 사용방법은 React의 useState와 비슷하다.
+
+```javascript
+
+ function FontButton() {
+ const [fontSize, setFontSize] = useRecoilState(fontSizeState);
+ return (
+
+ );
+ };
+
+
+```
+selector은 atom의 값을 변환하고 결합하여 사용할 수 있는데 간단하게 풀어 말해서 selector이 가져다 쓴 atom의 값이 변하지 않고 새로운 형태의 값을 반환한다. 위에 있는 useRecoilState와의 차이점은 atom의 값이 변하지 않는 다는점이 차이점이다.
+
+```javascript
+
+const fontSizeLabelState = selector({
+ key: 'fontSizeLabelState',
+ get: ({get}) => {
+ const fontSize = get(fontSizeState);
+ const unit = 'px';
+
+ return fontSizeunit;
+ },
+ });
+
+
+```
+useRecoilValue는 atom의 값을 읽기만 가능한 훅이다. 상태를 업데이트 할 필요가 없을때 사용하는 훅이다.
+
+```javascript
+
+ function FontButton() {
+ const [fontSize, setFontSize] = useRecoilState(fontSizeState);
+ const fontSizeLabel = useRecoilValue(fontSizeLabelState);
+
+ return (
+ <>
+ Current font size: {fontSizeLabel}
+
+
+
+ );
+ };
+
+
+```
+## 마무리
+
+Recoil를 사용하면서 느낀점은 다른 상태관리 라이브러리에 비해서 간단하게 전역상태관리를 할 수 있다는점이 매우 매력적으로 느껴졌다.
+
+[https://recoiljs.org/](https://recoiljs.org/)
+
+[https://ui.toast.com/weekly-pick/ko_20200616](https://ui.toast.com/weekly-pick/ko_20200616)
diff --git a/src/content/posts/frontEnd/Socketio.md b/src/content/posts/frontEnd/Socketio.md
index 8cd73c6..ca83ac3 100644
--- a/src/content/posts/frontEnd/Socketio.md
+++ b/src/content/posts/frontEnd/Socketio.md
@@ -1,44 +1,44 @@
----
-title: Socket.io에 대해서
-tags: [frontEnd]
-date: "2024.04.13"
----
-## Socket.io에 대해서
-
-Socket.io는 WebSocket 프로토콜을 기반으로 실시간 양방향 통신을 지원하는 라이브러리입니다.
-
-## Socket.io의 특징
-
-1. WebSocket 프로토콜 사용 2. 양방향 통신 3. 이벤트 기반 통신 4. Room과 Namespace
- socket.io는 WebSocket을 기본 통신 방법으로 사용하지만 WebSocket을 지원하지 않는 환경에서는 Long Poling 등의 대체 방식을 사용해 호환성을 유지합니다.
- 클라이언트와 서버가 서로 데이터를 주고받을 수 있습니다.
- 데이터를 교환할 때 이벤트라는 개념을 사용하는데 클라이언트와 서버 모두 이벤트를 생성하거나 이를 수신하는 작업을 수행할 수 있습니다.
- Room: 특정 사용자 그룹을 만들어 메시지를 제한적으로 전달할 수 있는 기능. Namespace: URL 경로를 분리하여 논리적으로 독립된 통신 채널을 제공.
-
-```javascript
-// 클라이언트 예제
-socket.emit('message', 'Hello, Server!'); // 이벤트 전송
-socket.on('response', (data) => {
- console.log(data); // 서버에서 보낸 응답 처리
-});
-
-```
-```javascript
-// 서버 예제
-io.on('connection', (socket) => {
- console.log('클라이언트가 연결되었습니다.');
-
- socket.on('message', (msg) => {
- console.log("클라이언트 메시지 : ", msg);
- socket.emit('response', 'Hello, Client!');
- });
-});
-
-```
-## WebSocket 프로토콜이란?
-
-WebSocket은 HTML5 표준에 정의된 네트워크 프로토콜이고 RFC 6455에 의해 표준화되었습니다. WebSocket은 HTTP 요청을 통해 초기 Handshake를 설정한 후 TCP 기반의 지속적인 양방향 연결을 유지합니다.
-
-WebSocket은 연결이 지속적으로 유지되므로 서버 자원을 계속 소모할 수 있습니다. 따라서 서버의 연결 수와 리소스를 효율적으로 관리해야 합니다. 또한 WebSocket은 기본적으로 보안 기능을 제공하지 않기 때문에, 보안을 위해 wss://(WebSocket Secure)를 사용하는 것이 권장됩니다.
-
+---
+title: Socket.io에 대해서
+tags: [frontEnd]
+date: "2024.04.13"
+---
+## Socket.io에 대해서
+
+Socket.io는 WebSocket 프로토콜을 기반으로 실시간 양방향 통신을 지원하는 라이브러리입니다.
+
+## Socket.io의 특징
+
+1. WebSocket 프로토콜 사용 2. 양방향 통신 3. 이벤트 기반 통신 4. Room과 Namespace
+ socket.io는 WebSocket을 기본 통신 방법으로 사용하지만 WebSocket을 지원하지 않는 환경에서는 Long Poling 등의 대체 방식을 사용해 호환성을 유지합니다.
+ 클라이언트와 서버가 서로 데이터를 주고받을 수 있습니다.
+ 데이터를 교환할 때 이벤트라는 개념을 사용하는데 클라이언트와 서버 모두 이벤트를 생성하거나 이를 수신하는 작업을 수행할 수 있습니다.
+ Room: 특정 사용자 그룹을 만들어 메시지를 제한적으로 전달할 수 있는 기능. Namespace: URL 경로를 분리하여 논리적으로 독립된 통신 채널을 제공.
+
+```javascript
+// 클라이언트 예제
+socket.emit('message', 'Hello, Server!'); // 이벤트 전송
+socket.on('response', (data) => {
+ console.log(data); // 서버에서 보낸 응답 처리
+});
+
+```
+```javascript
+// 서버 예제
+io.on('connection', (socket) => {
+ console.log('클라이언트가 연결되었습니다.');
+
+ socket.on('message', (msg) => {
+ console.log("클라이언트 메시지 : ", msg);
+ socket.emit('response', 'Hello, Client!');
+ });
+});
+
+```
+## WebSocket 프로토콜이란?
+
+WebSocket은 HTML5 표준에 정의된 네트워크 프로토콜이고 RFC 6455에 의해 표준화되었습니다. WebSocket은 HTTP 요청을 통해 초기 Handshake를 설정한 후 TCP 기반의 지속적인 양방향 연결을 유지합니다.
+
+WebSocket은 연결이 지속적으로 유지되므로 서버 자원을 계속 소모할 수 있습니다. 따라서 서버의 연결 수와 리소스를 효율적으로 관리해야 합니다. 또한 WebSocket은 기본적으로 보안 기능을 제공하지 않기 때문에, 보안을 위해 wss://(WebSocket Secure)를 사용하는 것이 권장됩니다.
+
\ No newline at end of file
diff --git a/src/content/posts/frontEnd/SocketioNameSpace.md b/src/content/posts/frontEnd/SocketioNameSpace.md
index 14078be..b09284a 100644
--- a/src/content/posts/frontEnd/SocketioNameSpace.md
+++ b/src/content/posts/frontEnd/SocketioNameSpace.md
@@ -1,154 +1,154 @@
----
-title: Socket.io Namespace & Room 기능 이해하기
-tags: [frontEnd]
-date: "2024.04.20"
----
-Namespace와 Room은 Socket.IO의 중요한 기능으로, 실시간 애플리케이션에서 클라이언트와 서버 간의 메시지 전송을 보다 효율적으로 관리하는 데 사용됩니다. 이 기능들은 여러 클라이언트가 동시에 접속하는 환경에서 채널 또는 그룹 단위로 메시지를 관리하고, 다양한 이벤트를 분리하여 효율적으로 처리할 수 있게 해줍니다.
-
-## Namespace 란?
-
-Namespace는 api 엔드포인트 같이 /chat은 채팅관련 이벤트를 처리하는 채널 /notification은 알람과 관련된 이벤트를 처리하는 채널로 분류할 수 있습니다. of 메서드를 이용해 네임스페이스에 접속할 수 있습니다.
-
-```javascript
-// 클라이언트측 코드
-// 기본 네임스페이스에 연결
-const defaultSocket = io();
-// 채팅 네임스페이스에 연결
-const chatSocket = io('/chat');
-// 알림 네임스페이스에 연결
-const notificationSocket = io('/notification');
-// 메시지 보내기
-chatSocket.emit('message', '안녕하세요! 채팅 메시지입니다.');
-// 알림 보내기
-notificationSocket.emit('alert', '새로운 알림이 도착했습니다.');
-
-```
-```javascript
-// 서버측 코드
-const io = require('socket.io')
-// 기본 네임스페이스 ("/")
-io.on('connection', (socket) => {
- console.log('기본 네임스페이스에 연결됨');
-});
-// /chat 네임스페이스
-const chatNamespace = io.of('/chat');
-chatNamespace.on('connection', (socket) => {
- console.log('채팅 네임스페이스에 연결됨');
- socket.on('message', (msg) => {
- console.log('채팅 메시지:', msg);
- chatNamespace.emit('message', msg); // 채팅 네임스페이스에 메시지 브로드캐스트
- });
-});
-// /notification 네임스페이스
-const notificationNamespace = io.of('/notification');
-notificationNamespace.on('connection', (socket) => {
- console.log('알림 네임스페이스에 연결됨');
- socket.on('alert', (alert) => {
- console.log('알림 내용:', alert);
- notificationNamespace.emit('alert', alert); // 알림 네임스페이스에 알림 브로드캐스트
- });
-});
-
-```
-## Namespace의 종류
-
-1. 기본 네임스페이스(Default Namespace) 2. 사용자 정의 네임스페이스(Custom Namespace)
- 기본적으로 모든 클라이언트는 ( / ) 네임스페이스에 연결이 되고 io.on('connection', callback)을 통해 네임스 페이스의 연결을 처리합니다.
- 특정 기능이나 사용자 그룹을 분리하기 위한 네임스페이스입니다. /admin처럼 일반 사용자와 분리된 통신을 처리 할 수 있습니다.
-
-```javascript
-const adminNamespace = io.of('/admin'); // admin 네임스페이스에 입장
-
-adminNamespace.use((socket, next) => {
- // 사용자 권한 확인 로직
- next();
-});
-
-adminNamespace.on('connection', (socket) => {
- // 관리자 전용 이벤트 처리
-});
-
-```
-3. 동적 네임스페이스(Dynamic Namespace)
- 정규 표현식을 사용해 네임스페이스를 생성하는 것 또한 가능합니다
-
-```javascript
-const workspaces = io.of(/^/w+$/);
-
-workspaces.on('connection', (socket) => {
- const workspace = socket.nsp;
- // 해당 네임스페이스에 대한 처리
-});
-workspaces.use((socket, next) => {
- // 접근 권한 확인 로직
- next();
-});
-
-```
-## Namespace Middleware
-
-Middleware란? Namespace에 대한 요청을 처리하기 이전에 미리 응답을 처리해 다음단께로 전달할 하는 구조입니다. axios 인터셉터와 비슷한 역할을 합니다.
-
-Socket.io는 Namespace Middleware또한 설정할 수 있습니다. 보안이 필요한 서비스나 비즈니스 로직등을 처리함에 있어 유용하게 사용할 수 있습니다.
-
-```javascript
-const io = require('socket.io')
-// '/chat' 네임스페이스에 미들웨어 추가
-const chatNamespace = io.of('/chat');
-// 미들웨어 정의
-chatNamespace.use((socket, next) => {
- // 클라이언트에서 전달한 인증 토큰 확인 (예: JWT)
- const token = socket.handshake.query.token;
- if (token === 'valid-token') {
- return next(); // 인증 성공하면 계속 연결
- } else {
- return next(new Error('인증 실패')); // 인증 실패하면 연결 차단
- }
-});
-chatNamespace.on('connection', (socket) => {
- console.log('채팅 네임스페이스에 연결됨');
- socket.on('message', (msg) => {
- console.log('메시지:', msg);
- });
-});
-
-```
-## Room 이란?
-
-Room은 네임스페이스의 하위 개념이라고 생각하시면 됩니다. 하나의 네임스페이스에 여러개의 방이 존재할 수 있습니다. 이 방안에 있는 여러개의 소켓이 서로 통신할 수 있습니다. 채팅방 같은 기능이라고 생각하시면 됩니다.
-
-
-join 이나 leave 같은 메서드를 이용해 room에 참가하거나 떠날 수도 있고 chatroom1과 chatroom2 두 개의 방에 동시에 참여할 수 있습니다. to 메서드를 이용하면 특정 방에 있는 모든 소켓에게 메시지를 전송할 수 도 있습니다.
-
-```javascript
-// 클라이언트 코드
-const socket = io();
-// 방에 입장하기
-socket.emit('joinRoom', 'chatroom');
-// 방에서 나가기
-socket.emit('leaveRoom', 'chatroom');
-// 메시지 보내기
-socket.emit('sendMessage', 'chatroom', '안녕하세요, 모두!');
-
-```
-```javascript
-// 서버 코드
-const io = require('socket.io')
-io.on('connection', (socket) => {
- console.log('새로운 클라이언트가 연결됨:', socket.id);
- // 클라이언트가 'chatroom' 방에 입장
- socket.on('joinRoom', (roomName) => {
- socket.join(roomName); // 방에 입장
- });
- // 클라이언트가 'chatroom' 방에서 나가기
- socket.on('leaveRoom', (roomName) => {
- socket.leave(roomName); // 방에서 나감
- });
- // 방에 있는 모든 클라이언트에게 메시지 보내기
- socket.on('sendMessage', (roomName, message) => {
- io.to(roomName).emit('message', message); // 방에 있는 모든 클라이언트에게 메시지 전송
- });
-});
-
-
+---
+title: Socket.io Namespace & Room 기능 이해하기
+tags: [frontEnd]
+date: "2024.04.20"
+---
+Namespace와 Room은 Socket.IO의 중요한 기능으로, 실시간 애플리케이션에서 클라이언트와 서버 간의 메시지 전송을 보다 효율적으로 관리하는 데 사용됩니다. 이 기능들은 여러 클라이언트가 동시에 접속하는 환경에서 채널 또는 그룹 단위로 메시지를 관리하고, 다양한 이벤트를 분리하여 효율적으로 처리할 수 있게 해줍니다.
+
+## Namespace 란?
+
+Namespace는 api 엔드포인트 같이 /chat은 채팅관련 이벤트를 처리하는 채널 /notification은 알람과 관련된 이벤트를 처리하는 채널로 분류할 수 있습니다. of 메서드를 이용해 네임스페이스에 접속할 수 있습니다.
+
+```javascript
+// 클라이언트측 코드
+// 기본 네임스페이스에 연결
+const defaultSocket = io();
+// 채팅 네임스페이스에 연결
+const chatSocket = io('/chat');
+// 알림 네임스페이스에 연결
+const notificationSocket = io('/notification');
+// 메시지 보내기
+chatSocket.emit('message', '안녕하세요! 채팅 메시지입니다.');
+// 알림 보내기
+notificationSocket.emit('alert', '새로운 알림이 도착했습니다.');
+
+```
+```javascript
+// 서버측 코드
+const io = require('socket.io')
+// 기본 네임스페이스 ("/")
+io.on('connection', (socket) => {
+ console.log('기본 네임스페이스에 연결됨');
+});
+// /chat 네임스페이스
+const chatNamespace = io.of('/chat');
+chatNamespace.on('connection', (socket) => {
+ console.log('채팅 네임스페이스에 연결됨');
+ socket.on('message', (msg) => {
+ console.log('채팅 메시지:', msg);
+ chatNamespace.emit('message', msg); // 채팅 네임스페이스에 메시지 브로드캐스트
+ });
+});
+// /notification 네임스페이스
+const notificationNamespace = io.of('/notification');
+notificationNamespace.on('connection', (socket) => {
+ console.log('알림 네임스페이스에 연결됨');
+ socket.on('alert', (alert) => {
+ console.log('알림 내용:', alert);
+ notificationNamespace.emit('alert', alert); // 알림 네임스페이스에 알림 브로드캐스트
+ });
+});
+
+```
+## Namespace의 종류
+
+1. 기본 네임스페이스(Default Namespace) 2. 사용자 정의 네임스페이스(Custom Namespace)
+ 기본적으로 모든 클라이언트는 ( / ) 네임스페이스에 연결이 되고 io.on('connection', callback)을 통해 네임스 페이스의 연결을 처리합니다.
+ 특정 기능이나 사용자 그룹을 분리하기 위한 네임스페이스입니다. /admin처럼 일반 사용자와 분리된 통신을 처리 할 수 있습니다.
+
+```javascript
+const adminNamespace = io.of('/admin'); // admin 네임스페이스에 입장
+
+adminNamespace.use((socket, next) => {
+ // 사용자 권한 확인 로직
+ next();
+});
+
+adminNamespace.on('connection', (socket) => {
+ // 관리자 전용 이벤트 처리
+});
+
+```
+3. 동적 네임스페이스(Dynamic Namespace)
+ 정규 표현식을 사용해 네임스페이스를 생성하는 것 또한 가능합니다
+
+```javascript
+const workspaces = io.of(/^/w+$/);
+
+workspaces.on('connection', (socket) => {
+ const workspace = socket.nsp;
+ // 해당 네임스페이스에 대한 처리
+});
+workspaces.use((socket, next) => {
+ // 접근 권한 확인 로직
+ next();
+});
+
+```
+## Namespace Middleware
+
+Middleware란? Namespace에 대한 요청을 처리하기 이전에 미리 응답을 처리해 다음단께로 전달할 하는 구조입니다. axios 인터셉터와 비슷한 역할을 합니다.
+
+Socket.io는 Namespace Middleware또한 설정할 수 있습니다. 보안이 필요한 서비스나 비즈니스 로직등을 처리함에 있어 유용하게 사용할 수 있습니다.
+
+```javascript
+const io = require('socket.io')
+// '/chat' 네임스페이스에 미들웨어 추가
+const chatNamespace = io.of('/chat');
+// 미들웨어 정의
+chatNamespace.use((socket, next) => {
+ // 클라이언트에서 전달한 인증 토큰 확인 (예: JWT)
+ const token = socket.handshake.query.token;
+ if (token === 'valid-token') {
+ return next(); // 인증 성공하면 계속 연결
+ } else {
+ return next(new Error('인증 실패')); // 인증 실패하면 연결 차단
+ }
+});
+chatNamespace.on('connection', (socket) => {
+ console.log('채팅 네임스페이스에 연결됨');
+ socket.on('message', (msg) => {
+ console.log('메시지:', msg);
+ });
+});
+
+```
+## Room 이란?
+
+Room은 네임스페이스의 하위 개념이라고 생각하시면 됩니다. 하나의 네임스페이스에 여러개의 방이 존재할 수 있습니다. 이 방안에 있는 여러개의 소켓이 서로 통신할 수 있습니다. 채팅방 같은 기능이라고 생각하시면 됩니다.
+
+
+join 이나 leave 같은 메서드를 이용해 room에 참가하거나 떠날 수도 있고 chatroom1과 chatroom2 두 개의 방에 동시에 참여할 수 있습니다. to 메서드를 이용하면 특정 방에 있는 모든 소켓에게 메시지를 전송할 수 도 있습니다.
+
+```javascript
+// 클라이언트 코드
+const socket = io();
+// 방에 입장하기
+socket.emit('joinRoom', 'chatroom');
+// 방에서 나가기
+socket.emit('leaveRoom', 'chatroom');
+// 메시지 보내기
+socket.emit('sendMessage', 'chatroom', '안녕하세요, 모두!');
+
+```
+```javascript
+// 서버 코드
+const io = require('socket.io')
+io.on('connection', (socket) => {
+ console.log('새로운 클라이언트가 연결됨:', socket.id);
+ // 클라이언트가 'chatroom' 방에 입장
+ socket.on('joinRoom', (roomName) => {
+ socket.join(roomName); // 방에 입장
+ });
+ // 클라이언트가 'chatroom' 방에서 나가기
+ socket.on('leaveRoom', (roomName) => {
+ socket.leave(roomName); // 방에서 나감
+ });
+ // 방에 있는 모든 클라이언트에게 메시지 보내기
+ socket.on('sendMessage', (roomName, message) => {
+ io.to(roomName).emit('message', message); // 방에 있는 모든 클라이언트에게 메시지 전송
+ });
+});
+
+
```
\ No newline at end of file
diff --git a/src/content/posts/frontEnd/StyledComponent.md b/src/content/posts/frontEnd/StyledComponent.md
index f80491c..2e18321 100644
--- a/src/content/posts/frontEnd/StyledComponent.md
+++ b/src/content/posts/frontEnd/StyledComponent.md
@@ -1,82 +1,82 @@
----
-title: styled-component를 사용해보자
-tags: [frontEnd]
-date: "2023.02.03"
----
-react를 처음 공부할 때 html과 js는 한 파일에서 작성하는데 css도 한 파일에서 작성 할 수 있지 않을까 란 생각이 들어 찾아보다가 styled-component를 알게 되었다. styled-component는 js in css 로 말 그대로 js파일 내부에 css를 작성한다는 뜻으로 styled-component의 장점으로는 css의 컴포넌트화로 유지보수가 쉬워지고 재사용성이 올라간다.
-
-## 패키지 설치
-
-```javascript
-
- # npm 설치
- npm install --save styled-components
-
- # yarn 설치
- yarn add styled-components
-
-
-```
-## 사용 방법
-
-설치가 잘 되었다면 사용방법에 대해 알아보자
-
-```javascript
-
- import styled from "styled-components";
-
- const Title = styled.h1`
- font-size: 1.5em;
- text-align: center;
- color: palevioletred;
- `;
-
- render(
- 타이틀1
- )
-
-
-```
-태그이름을 선언해 준후에 styled.태그 뒤에 ``(백틱)을 사용해서 원하는 css를 작성하면 된다. 이때 Title이라는 태그를 중복해서 사용할 때 color색상만 다르게 하고 싶다면 props로 값을 넘겨줄 수 있다.
-
-```javascript
-
- import styled from "styled-components";
-
- const Title = styled.h1`
- font-size: 1.5em;
- text-align: center;
- color: ${({color})=> color ? color : 'palevioletred'}
- `;
-
- render(
- 타이틀1
- 타이틀2
- )
-
-
-```
-그리고 이전에 선언했던 태그를 상속하여 작성할 수 있다.
-
-```javascript
-
- import styled from "styled-components";
-
- const Title = styled.h1`
- font-size: 1.5em;
- text-align: center;
- color: ${({color})=> color ? color : 'palevioletred'}
- `;
-
- const SubscribeTitle = styled(Title)`
- border: 1px solid palevioletred;
- `;
-
- render(
- 타이틀1
- 타이틀2
- )
-
-
-```
-[https://styled-components.com/](https://styled-components.com/)
+---
+title: styled-component를 사용해보자
+tags: [frontEnd]
+date: "2023.02.03"
+---
+react를 처음 공부할 때 html과 js는 한 파일에서 작성하는데 css도 한 파일에서 작성 할 수 있지 않을까 란 생각이 들어 찾아보다가 styled-component를 알게 되었다. styled-component는 js in css 로 말 그대로 js파일 내부에 css를 작성한다는 뜻으로 styled-component의 장점으로는 css의 컴포넌트화로 유지보수가 쉬워지고 재사용성이 올라간다.
+
+## 패키지 설치
+
+```javascript
+
+ # npm 설치
+ npm install --save styled-components
+
+ # yarn 설치
+ yarn add styled-components
+
+
+```
+## 사용 방법
+
+설치가 잘 되었다면 사용방법에 대해 알아보자
+
+```javascript
+
+ import styled from "styled-components";
+
+ const Title = styled.h1`
+ font-size: 1.5em;
+ text-align: center;
+ color: palevioletred;
+ `;
+
+ render(
+ 타이틀1
+ )
+
+
+```
+태그이름을 선언해 준후에 styled.태그 뒤에 ``(백틱)을 사용해서 원하는 css를 작성하면 된다. 이때 Title이라는 태그를 중복해서 사용할 때 color색상만 다르게 하고 싶다면 props로 값을 넘겨줄 수 있다.
+
+```javascript
+
+ import styled from "styled-components";
+
+ const Title = styled.h1`
+ font-size: 1.5em;
+ text-align: center;
+ color: ${({color})=> color ? color : 'palevioletred'}
+ `;
+
+ render(
+ 타이틀1
+ 타이틀2
+ )
+
+
+```
+그리고 이전에 선언했던 태그를 상속하여 작성할 수 있다.
+
+```javascript
+
+ import styled from "styled-components";
+
+ const Title = styled.h1`
+ font-size: 1.5em;
+ text-align: center;
+ color: ${({color})=> color ? color : 'palevioletred'}
+ `;
+
+ const SubscribeTitle = styled(Title)`
+ border: 1px solid palevioletred;
+ `;
+
+ render(
+ 타이틀1
+ 타이틀2
+ )
+
+
+```
+[https://styled-components.com/](https://styled-components.com/)
diff --git a/src/content/posts/frontEnd/StyledComponentGlobleStyle.md b/src/content/posts/frontEnd/StyledComponentGlobleStyle.md
index cade79b..c277b5f 100644
--- a/src/content/posts/frontEnd/StyledComponentGlobleStyle.md
+++ b/src/content/posts/frontEnd/StyledComponentGlobleStyle.md
@@ -1,111 +1,111 @@
----
-title: styled-component 전역 스타일링에 대해 알아보자
-tags: [frontEnd]
-date: "2023.02.03"
----
-이전에 포스트에서 styled-component 사용법에 대해서 다뤘었는데 오늘은 GlobalStyle과 Theme에 대해 알아보겠다.
-
-## GolbalStyle 사용방법
-
-간단하게 createGlobalStyle 이라는 함수를 사용해 css를 작성한 후 최상위 컴포넌트에 추가해주면 된다.
-
-```javascript
-
- //globalStyle.js
-
- import { createGlobalStyle } from 'styled-components'
-
- const GlobalStyle = createGlobalStyle`
- body{
- margin: 0;
- font-family: "Gothic A1";
- font-weight: 500;
- };
- a{
- text-decoration: none;
- color: #000;
- };
- `;
-
- export default GlobalStyle;
-
-
-```
-```javascript
-
- //App.jsx
-
- import GlobalStyle from './globalStyle'
-
- function App() {
- return (
- <>
-
-
- Globle
-
-
- );
- }
-
-
-```
-이렇게 사용하면 전역으로 css를 설정할 수 있어 불필요하게 중복되는 스타일링을 줄일 수 있다.
-
-## Theme 사용방법
-
-ThemeProvider 이라는 함수로 ThemeProvider 로 감싼 내부의 컴포넌트에게 공통된 값을 내려줄 수 있다. theme를 사용하면 일관된 디자인을 유지할 수 있다는 장점이 있고 디자인 수정이 필요하다면 theme만 변경해주면 된다.
-
-```javascript
-
- //theme.js
-
- const theme = {
- color: {
- container: 'pink',
- box: 'blue',
- },
- };
-
- export default theme;
-
-
-```
-```javascript
-
- //app.jsx
-
- import styled, { ThemeProvider } form 'styled-component'
- import theme from './theme';
-
- function App() {
- return (
-
-
-
- );
- };
-
- function BoxContainer(){
- return(
-
-
-
- );
- };
-
- const Container = styled.div`
- background-color: ${ ({theme}) => theme.color.container };
- `;
-
- const Box = styled.div`
- background-color: ${ ({theme}) => theme.color.box };
- `;
-
-
-```
-ThemeProvider 함수를 잘 응용하면 다크모드도 간단하게 만들 수 있다.
-
-[https://styled-components.com/docs/api#createglobalstyle](https://styled-components.com/docs/api#createglobalstyle)
-
-[https://styled-components.com/docs/api#themeprovider](https://styled-components.com/docs/api#themeprovider)
+---
+title: styled-component 전역 스타일링에 대해 알아보자
+tags: [frontEnd]
+date: "2023.02.03"
+---
+이전에 포스트에서 styled-component 사용법에 대해서 다뤘었는데 오늘은 GlobalStyle과 Theme에 대해 알아보겠다.
+
+## GolbalStyle 사용방법
+
+간단하게 createGlobalStyle 이라는 함수를 사용해 css를 작성한 후 최상위 컴포넌트에 추가해주면 된다.
+
+```javascript
+
+ //globalStyle.js
+
+ import { createGlobalStyle } from 'styled-components'
+
+ const GlobalStyle = createGlobalStyle`
+ body{
+ margin: 0;
+ font-family: "Gothic A1";
+ font-weight: 500;
+ };
+ a{
+ text-decoration: none;
+ color: #000;
+ };
+ `;
+
+ export default GlobalStyle;
+
+
+```
+```javascript
+
+ //App.jsx
+
+ import GlobalStyle from './globalStyle'
+
+ function App() {
+ return (
+ <>
+
+
+ Globle
+
+
+ );
+ }
+
+
+```
+이렇게 사용하면 전역으로 css를 설정할 수 있어 불필요하게 중복되는 스타일링을 줄일 수 있다.
+
+## Theme 사용방법
+
+ThemeProvider 이라는 함수로 ThemeProvider 로 감싼 내부의 컴포넌트에게 공통된 값을 내려줄 수 있다. theme를 사용하면 일관된 디자인을 유지할 수 있다는 장점이 있고 디자인 수정이 필요하다면 theme만 변경해주면 된다.
+
+```javascript
+
+ //theme.js
+
+ const theme = {
+ color: {
+ container: 'pink',
+ box: 'blue',
+ },
+ };
+
+ export default theme;
+
+
+```
+```javascript
+
+ //app.jsx
+
+ import styled, { ThemeProvider } form 'styled-component'
+ import theme from './theme';
+
+ function App() {
+ return (
+
+
+
+ );
+ };
+
+ function BoxContainer(){
+ return(
+
+
+
+ );
+ };
+
+ const Container = styled.div`
+ background-color: ${ ({theme}) => theme.color.container };
+ `;
+
+ const Box = styled.div`
+ background-color: ${ ({theme}) => theme.color.box };
+ `;
+
+
+```
+ThemeProvider 함수를 잘 응용하면 다크모드도 간단하게 만들 수 있다.
+
+[https://styled-components.com/docs/api#createglobalstyle](https://styled-components.com/docs/api#createglobalstyle)
+
+[https://styled-components.com/docs/api#themeprovider](https://styled-components.com/docs/api#themeprovider)
diff --git a/src/content/posts/frontEnd/Sync-vs-async.md b/src/content/posts/frontEnd/Sync-vs-async.md
index 00d3039..225d91d 100644
--- a/src/content/posts/frontEnd/Sync-vs-async.md
+++ b/src/content/posts/frontEnd/Sync-vs-async.md
@@ -1,80 +1,80 @@
----
-title: 비동기 작업 동시 요청
-tags: [frontEnd]
-date: "2024.10.05"
----
-오늘은 비동기 작업을 테스트하다 생긴 경험에 대해 적어보려고 합니다.
-
-## 주요 내용
-- 데이터 요청시 모든 데이터를 받아옵니다.
-- 받은 데이터 중 필요한 데이터만 필터링합니다.
-- 필터링된 데이터의 세부 정보에 대한 요청을 한번에 보내고 모든 요청이 완료된 후 한번에 응답을 받습니다.
-
-이 내용이 제가 초기에 생각한 동작입니다. 하지만 제가 구현한 기능을 보면
-
-- 데이터 요청시 모든 데이터를 받아옵니다.
-- 받은 데이터 중 필요한 데이터만 필터링합니다.
-- 필터링된 데이터의 세부 정보에 대한 요청을 각각 보내고 따로따로 완료된 응답을 받습니다.
-
-비동기에 대한 이해가 부족해 생긴 문제라 생각해 동기와 비동기에 대해 다시 한번 정리해보려 합니다.
-
-## 동기와 비동기의 차이
-### 동기
-코드가 순차적으로 실행되며 한 작업이 끝나야 다음 작업이 수행됩니다.
-일반적인 JavaScript 코드 실행 방법 입니다.
-```javascript
-console.log("1"); // 1
-console.log("2"); // 2
-console.log("3"); // 3
-console.log("4"); // 4
-// 출력 순서: 1 → 2 → 3 → 4
-```
-### 비동기
-작업을 병렬로 처리하며 결과를 기다리지 않고 다음 작업을 수행합니다.
-setTimeout, API 호출, 파일 읽기 작업 등이 해당됩니다.
-```javascript
-console.log("햄버거 주문"); // 1
-
-setTimeout(() => {
- console.log("햄버거 완성!"); // 3 (3초 후)
-}, 3000);
-
-console.log("콜라 주문"); // 2
-console.log("콜라 완성!"); // 3
-```
-비동기로 API호출을 할 땐 `.then()` `.catch()` 문을 사용하거나 `async/await`를 사용해 요청
-할 수 있습니다.
-
-## 내 코드 살펴보기
-**초기 코드**
-```javascript
-const responses = await array.map(async (data) => {
- const response = await Get(
- "/example",
- { params: { data } }
- );
- return response;
-})
-
-await Promise.all(responses)
-```
-`map`은 단순히 배열의 각 요소를 순회하며 비동기 함수가 반환된 배열을 반환할 뿐 이를 처리하지는 않습니다.
-결과적으로 `Promise` 객체 배열을 반환하게 됩니다. 또 `map` 내부에 불필요한 `await`를 사용해 코드가 중복적으로
-처리되는 문제가 있었습니다.
-
-**개선된 점**
-
-```javascript
-const responses = await Promise.all(array.map((data) => {
- return Get(
- "/example",
- { params: { data } }
- );
-}))
-```
-`Promise.all`을 이용해 모든 비동기 요청을 병렬로 처리해 전체 작업이 완료될 때까지 기다립니다.
-기존 코드에서 중첩된 async/await를 제거해 작업을 단순화하고 가독성을 높였습니다.
-
-## 결론
-이 경험을 통해 비동기 작업에 대한 이해와 `Promise.all`의 활용 방법을 배우게 되었고 자바스크립트에서 제공하는
+---
+title: 비동기 작업 동시 요청
+tags: [frontEnd]
+date: "2024.10.05"
+---
+오늘은 비동기 작업을 테스트하다 생긴 경험에 대해 적어보려고 합니다.
+
+## 주요 내용
+- 데이터 요청시 모든 데이터를 받아옵니다.
+- 받은 데이터 중 필요한 데이터만 필터링합니다.
+- 필터링된 데이터의 세부 정보에 대한 요청을 한번에 보내고 모든 요청이 완료된 후 한번에 응답을 받습니다.
+
+이 내용이 제가 초기에 생각한 동작입니다. 하지만 제가 구현한 기능을 보면
+
+- 데이터 요청시 모든 데이터를 받아옵니다.
+- 받은 데이터 중 필요한 데이터만 필터링합니다.
+- 필터링된 데이터의 세부 정보에 대한 요청을 각각 보내고 따로따로 완료된 응답을 받습니다.
+
+비동기에 대한 이해가 부족해 생긴 문제라 생각해 동기와 비동기에 대해 다시 한번 정리해보려 합니다.
+
+## 동기와 비동기의 차이
+### 동기
+코드가 순차적으로 실행되며 한 작업이 끝나야 다음 작업이 수행됩니다.
+일반적인 JavaScript 코드 실행 방법 입니다.
+```javascript
+console.log("1"); // 1
+console.log("2"); // 2
+console.log("3"); // 3
+console.log("4"); // 4
+// 출력 순서: 1 → 2 → 3 → 4
+```
+### 비동기
+작업을 병렬로 처리하며 결과를 기다리지 않고 다음 작업을 수행합니다.
+setTimeout, API 호출, 파일 읽기 작업 등이 해당됩니다.
+```javascript
+console.log("햄버거 주문"); // 1
+
+setTimeout(() => {
+ console.log("햄버거 완성!"); // 3 (3초 후)
+}, 3000);
+
+console.log("콜라 주문"); // 2
+console.log("콜라 완성!"); // 3
+```
+비동기로 API호출을 할 땐 `.then()` `.catch()` 문을 사용하거나 `async/await`를 사용해 요청
+할 수 있습니다.
+
+## 내 코드 살펴보기
+**초기 코드**
+```javascript
+const responses = await array.map(async (data) => {
+ const response = await Get(
+ "/example",
+ { params: { data } }
+ );
+ return response;
+})
+
+await Promise.all(responses)
+```
+`map`은 단순히 배열의 각 요소를 순회하며 비동기 함수가 반환된 배열을 반환할 뿐 이를 처리하지는 않습니다.
+결과적으로 `Promise` 객체 배열을 반환하게 됩니다. 또 `map` 내부에 불필요한 `await`를 사용해 코드가 중복적으로
+처리되는 문제가 있었습니다.
+
+**개선된 점**
+
+```javascript
+const responses = await Promise.all(array.map((data) => {
+ return Get(
+ "/example",
+ { params: { data } }
+ );
+}))
+```
+`Promise.all`을 이용해 모든 비동기 요청을 병렬로 처리해 전체 작업이 완료될 때까지 기다립니다.
+기존 코드에서 중첩된 async/await를 제거해 작업을 단순화하고 가독성을 높였습니다.
+
+## 결론
+이 경험을 통해 비동기 작업에 대한 이해와 `Promise.all`의 활용 방법을 배우게 되었고 자바스크립트에서 제공하는
메서드의 사용방법을 명확하게 알게 되었습니다.
\ No newline at end of file
diff --git a/src/content/posts/frontEnd/react-router-learn.md b/src/content/posts/frontEnd/react-router-learn.md
index 32093b0..1960555 100644
--- a/src/content/posts/frontEnd/react-router-learn.md
+++ b/src/content/posts/frontEnd/react-router-learn.md
@@ -1,136 +1,136 @@
----
-title: react-router에 대해서 알아보자
-tags: [frontEnd]
-date: "2023.02.09"
----
-## react-router란?
-
-react-router는 클라이언트 측 라우팅이 가능하게 도와주는 라이브러리다. react-router를 사용하면 간단하게 url을 변경하면서 여러 페이지로 이루어진 어플리케이션을 만들 수 있다.
-
-## 패키지 설치
-
-```javascript
-
- # npm 설치
- npm install react-router-dom
-
- # yarn 설치
- yarn add react-router-dom
-
-
-```
-## 사용방법
-
-```javascript
-
- import { BrowserRouter, Routes, Route } from 'react-router-dom';
- /* existing imports */
-
- function App() {
- return (
-
-
- } />
- } />
- } />
- } />
-
-
- );
- }
-
- export default App;
-
-
-```
-위에 코드에 대해 설명을 하면 우선 최상위 컴포넌트에서 BrowserRouter로 감싸준후 Route를 Routes로 감싸준다. Route에 path에는 url경로를 element에는 보여주고자 하는 컴포넌트를 넣어준다. 그럼 path와 일치하는 Route를 렌더링 시켜주게 된다. path에 *만 적게 된다면 url에 일치하는 경로가 없을시에 보여주게 된다.
-
-```javascript
-
- import { Link } from 'react-router-dom';
- /* existing imports */
-
- export default function Home() {
- return (
-
- );
- };
-
-
-```
-기존에는 a태그를 사용하지만 react-router에서는 Link를 사용한다 사용방법은 아주 간단한데 보이는거와 같이 to에 원하는 경로를 적어주면 된다.
-
-## URL 파라미터
-
-useParams를 이용하면 간단하게 파라미터를 받아올 수 있다. path부분에 경로를 /contact/:Id 라고 한다면 /content 부분이 url /:Id부분이 파라미터라고 할 수 있다.
-
-```javascript
-
- import { Link } from 'react-router-dom';
- /* existing imports */
-
- export default function Home() {
- return (
-
- );
- };
-
-
-```
-```javascript
-
- import { useParams } from 'react-router-dom';
- /* existing imports */
-
- export default function Contact() {
-
- const { Id } = useParams();
-
- return (
-
- 파라미터 Id는 {Id}입니다.
-
- );
- };
-
-
-```
-## 쿼리스트링
-
-쿼리스트링도 useLocation훅을 이용해 활용할 수 있다. useLocation훅은 location객체를 반환 하는데 location객체는 pathname: URL에서 현재 주소경로 search: ?를 포함한 쿼리스트링 hash: URL에서 #이후의 값 (#이 없는경우 빈 문자열) state: URL에 넣고 싶지 않은 정보를 저장할 수 있다. key: location의 고유 값 (기본은 default) 으로 이루어져있다.
-
-```javascript
-
- import { useLocation } from 'react-router-dom';
- /* existing imports */
-
- export default function Contact() {
-
- const location = useLocation();
-
- return (
-
-
- - pathname: {location.pathname}
- - search: {location.search}
- - hash: {location.hash}
- - state: {location.state}
- - key: {location.key}
-
-
+ 파라미터 Id는 {Id}입니다.
+
+ );
+ };
+
+
+```
+## 쿼리스트링
+
+쿼리스트링도 useLocation훅을 이용해 활용할 수 있다. useLocation훅은 location객체를 반환 하는데 location객체는 pathname: URL에서 현재 주소경로 search: ?를 포함한 쿼리스트링 hash: URL에서 #이후의 값 (#이 없는경우 빈 문자열) state: URL에 넣고 싶지 않은 정보를 저장할 수 있다. key: location의 고유 값 (기본은 default) 으로 이루어져있다.
+
+```javascript
+
+ import { useLocation } from 'react-router-dom';
+ /* existing imports */
+
+ export default function Contact() {
+
+ const location = useLocation();
+
+ return (
+
+
+ - pathname: {location.pathname}
+ - search: {location.search}
+ - hash: {location.hash}
+ - state: {location.state}
+ - key: {location.key}
+
+
-
-
-```
-no-referrer 속성을 사용하면 Referer정보를 요청 헤더에 포함하지 않도록 해 404를 반환하지 않고 무사히 사용할 수 있다.
-
-[https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-HTTP-referer-%EB%9E%80](https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-HTTP-referer-%EB%9E%80)
-
-[https://velog.io/@sejinkim/Referrer-Policy%EC%9D%98-%EC%9D%B4%ED%95%B4#%EB%A0%88%ED%8D%BC%EB%9F%AC%EA%B0%80-%EC%97%86%EC%96%B4%EC%A1%8C%EC%96%B4%EC%9A%94](https://velog.io/@sejinkim/Referrer-Policy%EC%9D%98-%EC%9D%B4%ED%95%B4#%EB%A0%88%ED%8D%BC%EB%9F%AC%EA%B0%80-%EC%97%86%EC%96%B4%EC%A1%8C%EC%96%B4%EC%9A%94)
-
-[https://ogaeng.com/http-referrer/](https://ogaeng.com/http-referrer/)
-
-[https://yceffort.kr/2020/09/referer-and-referrer-policy](https://yceffort.kr/2020/09/referer-and-referrer-policy)
+---
+title: referrer 외부 링크 금지 이미지
+tags: [html]
+date: "2023.05.06"
+---
+팀프로젝트를 진행하던 도중 외부에서 불러온 이미지가 로드되지 않고 404를 반환하는 이슈가 있었다. 404를 반환한 이유를 알아보니 네이버에서 이미지를 가져올 때 보안에 관련된 이유로 404를 반환하는 것 이였다. 반환 하는 이유는 Referer 체크로 외부 링크를 금지하여 404를 반환 하는 것이다. 이를 해결 할 수 있는 방법으로는 이미지에 (referrerpolicy="no-referrer")속성을 추가해주면 된다.
+
+```javascript
+
+
+
+
+```
+no-referrer 속성을 사용하면 Referer정보를 요청 헤더에 포함하지 않도록 해 404를 반환하지 않고 무사히 사용할 수 있다.
+
+[https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-HTTP-referer-%EB%9E%80](https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-HTTP-referer-%EB%9E%80)
+
+[https://velog.io/@sejinkim/Referrer-Policy%EC%9D%98-%EC%9D%B4%ED%95%B4#%EB%A0%88%ED%8D%BC%EB%9F%AC%EA%B0%80-%EC%97%86%EC%96%B4%EC%A1%8C%EC%96%B4%EC%9A%94](https://velog.io/@sejinkim/Referrer-Policy%EC%9D%98-%EC%9D%B4%ED%95%B4#%EB%A0%88%ED%8D%BC%EB%9F%AC%EA%B0%80-%EC%97%86%EC%96%B4%EC%A1%8C%EC%96%B4%EC%9A%94)
+
+[https://ogaeng.com/http-referrer/](https://ogaeng.com/http-referrer/)
+
+[https://yceffort.kr/2020/09/referer-and-referrer-policy](https://yceffort.kr/2020/09/referer-and-referrer-policy)
diff --git a/src/content/posts/html/Sementic-tag.md b/src/content/posts/html/Sementic-tag.md
index 6987c8e..963cbc9 100644
--- a/src/content/posts/html/Sementic-tag.md
+++ b/src/content/posts/html/Sementic-tag.md
@@ -1,20 +1,20 @@
----
-title: HTML Sementic Tag란?
-tags: [html]
-date: "2023.02.07"
----
-## Sementic Tag란?
-
-우선 Sementic Tag의 뜻은 의미가 있는 태그라는 뜻이다. 반대로 div와 span태그와 같은 태그는 non-sementic tag라고 한다 그럼 div 태그로 만들 수 있는데 왜 의미가 있는 태그가 필요할까?
-
-## Sementic Tag 가 필요한 이유 3가지
-
- 마크업을 통해 보다 많은 검색에 노출 시킬 수 있다. 스크린리더로 웹 페이지를 탐색할 때 웹 접근성과 사용성을 올려준다. div태그만으로 작성된 문서보단 header h1 h2와 같은 태그로 작성된 문서보다 알아보기가 쉬워져 유지보수가 용이해진다.
-
-## Sementic Tag의 종류
-
-header : 헤더, 주로 로고나 검색폼 작성자의 이름 등으로 이루어져 있다. nav : 목차 또는 리스트 등의 메뉴를 이용할때 사용한다. footer : 웹 사이트의 가장 하단부분에 사용된다. main : 주요 컨텐츠 영역을 정의할 때 사용한다. section : 문서의 관련된 구역을 나눌때 사용된다. address : 작성자의 주소나 정보등을 작성하는 태그
-
-이것 이외에도 아주 많은 sementic tag가 있으니 잘 이용해서 문서를 작성하도록 하자.
-
-[https://developer.mozilla.org/ko/docs/Glossary/Semantics](https://developer.mozilla.org/ko/docs/Glossary/Semantics)
+---
+title: HTML Sementic Tag란?
+tags: [html]
+date: "2023.02.07"
+---
+## Sementic Tag란?
+
+우선 Sementic Tag의 뜻은 의미가 있는 태그라는 뜻이다. 반대로 div와 span태그와 같은 태그는 non-sementic tag라고 한다 그럼 div 태그로 만들 수 있는데 왜 의미가 있는 태그가 필요할까?
+
+## Sementic Tag 가 필요한 이유 3가지
+
+ 마크업을 통해 보다 많은 검색에 노출 시킬 수 있다. 스크린리더로 웹 페이지를 탐색할 때 웹 접근성과 사용성을 올려준다. div태그만으로 작성된 문서보단 header h1 h2와 같은 태그로 작성된 문서보다 알아보기가 쉬워져 유지보수가 용이해진다.
+
+## Sementic Tag의 종류
+
+header : 헤더, 주로 로고나 검색폼 작성자의 이름 등으로 이루어져 있다. nav : 목차 또는 리스트 등의 메뉴를 이용할때 사용한다. footer : 웹 사이트의 가장 하단부분에 사용된다. main : 주요 컨텐츠 영역을 정의할 때 사용한다. section : 문서의 관련된 구역을 나눌때 사용된다. address : 작성자의 주소나 정보등을 작성하는 태그
+
+이것 이외에도 아주 많은 sementic tag가 있으니 잘 이용해서 문서를 작성하도록 하자.
+
+[https://developer.mozilla.org/ko/docs/Glossary/Semantics](https://developer.mozilla.org/ko/docs/Glossary/Semantics)
diff --git a/src/content/posts/html/Viewport-Meta-Tag.md b/src/content/posts/html/Viewport-Meta-Tag.md
index 151ac53..01712fa 100644
--- a/src/content/posts/html/Viewport-Meta-Tag.md
+++ b/src/content/posts/html/Viewport-Meta-Tag.md
@@ -1,16 +1,16 @@
----
-title: 정리
-tags: [html]
-date: "2025.09.08"
----
-이번에는 반응형 웹에서 꼭 필요한 `` 태그를 정리해 보았다.
-
-모바일 브라우저들은 예전 데스크톱 전용 웹사이트를 정상적으로 보여주기 위해 기본 뷰포트 너비를 약 980px로 가정한다.
-
-그래서 ``가 없으면, 모바일 화면에서도 문서 전체가 축소된 상태로 표시되고 사용자가 직접 확대/축소를 해야 한다.
-
-이 경우 문제가 되는 부분이 있는데, 바로 CSS 미디어쿼리다.
-예를 들어 @media (max-width: 600px) 같은 코드는 실제 기기 폭(아이폰 375px 등)이 아니라 브라우저가 가정한 **가상 폭(980px)**을 기준으로 계산된다.
-즉, 원하는 반응형 동작이 제대로 적용되지 않는다.
-
+---
+title: 정리
+tags: [html]
+date: "2025.09.08"
+---
+이번에는 반응형 웹에서 꼭 필요한 `` 태그를 정리해 보았다.
+
+모바일 브라우저들은 예전 데스크톱 전용 웹사이트를 정상적으로 보여주기 위해 기본 뷰포트 너비를 약 980px로 가정한다.
+
+그래서 ``가 없으면, 모바일 화면에서도 문서 전체가 축소된 상태로 표시되고 사용자가 직접 확대/축소를 해야 한다.
+
+이 경우 문제가 되는 부분이 있는데, 바로 CSS 미디어쿼리다.
+예를 들어 @media (max-width: 600px) 같은 코드는 실제 기기 폭(아이폰 375px 등)이 아니라 브라우저가 가정한 **가상 폭(980px)**을 기준으로 계산된다.
+즉, 원하는 반응형 동작이 제대로 적용되지 않는다.
+
정리하면 ``는 모바일 환경에서 실제 기기 화면 너비를 기준으로 잡아주는 태그이자, 반응형 웹 디자인의 출발점이라고 할 수 있다.
\ No newline at end of file
diff --git a/src/content/posts/html/What-is-Meta-Tag.md b/src/content/posts/html/What-is-Meta-Tag.md
index 15ce184..506a99b 100644
--- a/src/content/posts/html/What-is-Meta-Tag.md
+++ b/src/content/posts/html/What-is-Meta-Tag.md
@@ -1,21 +1,21 @@
----
-title: 메타 태그 간단 정리
-tags: [html]
-date: "2025.09.05"
----
-HTML을 공부하면서 **메타 태그(meta tag)**에 대해 다시 한번 정리해 보았다.
-메타 태그는 쉽게 말해 HTML 문서의 **메타데이터(문서에 대한 정보)**를 담는 태그다.
-
-보통 안에 작성되며 직접 화면에 표시되지는 않는다. 하지만 브라우저, 검색엔진, SNS가 페이지를 이해하는 데 중요한 역할을 한다.
-
-대표적으로 자주 쓰이는 메타 태그는 다음과 같다.
-
-- **charset** → 문서의 문자 인코딩 방식을 지정한다. 보통 UTF-8을 사용한다.
-
-- **viewport** → 반응형 웹을 만들 때, 모바일 화면 크기에 맞게 조정하는 핵심 태그다.
-
-- **description** → 검색엔진 결과에 노출되는 페이지 설명을 제공한다.
-
-- **Open Graph 태그(og:title, og:image 등)** → SNS에서 페이지를 공유할 때 보이는 제목, 이미지, 설명을 제어한다.
-
+---
+title: 메타 태그 간단 정리
+tags: [html]
+date: "2025.09.05"
+---
+HTML을 공부하면서 **메타 태그(meta tag)**에 대해 다시 한번 정리해 보았다.
+메타 태그는 쉽게 말해 HTML 문서의 **메타데이터(문서에 대한 정보)**를 담는 태그다.
+
+보통 안에 작성되며 직접 화면에 표시되지는 않는다. 하지만 브라우저, 검색엔진, SNS가 페이지를 이해하는 데 중요한 역할을 한다.
+
+대표적으로 자주 쓰이는 메타 태그는 다음과 같다.
+
+- **charset** → 문서의 문자 인코딩 방식을 지정한다. 보통 UTF-8을 사용한다.
+
+- **viewport** → 반응형 웹을 만들 때, 모바일 화면 크기에 맞게 조정하는 핵심 태그다.
+
+- **description** → 검색엔진 결과에 노출되는 페이지 설명을 제공한다.
+
+- **Open Graph 태그(og:title, og:image 등)** → SNS에서 페이지를 공유할 때 보이는 제목, 이미지, 설명을 제어한다.
+
정리하자면, 메타 태그는 페이지가 어떻게 해석되고, 검색되고, 공유될지를 결정하는 중요한 정보 제공자다. 앞으로 프로젝트를 할 때 영역을 그냥 지나치지 않고, 꼭 필요한 메타 태그들을 꼼꼼히 챙겨 넣어야겠다고 생각했다.-
\ No newline at end of file
diff --git a/src/content/posts/javaScript/Accessing-DOM-With-JavaScript.md b/src/content/posts/javaScript/Accessing-DOM-With-JavaScript.md
index 55c97f7..dafe099 100644
--- a/src/content/posts/javaScript/Accessing-DOM-With-JavaScript.md
+++ b/src/content/posts/javaScript/Accessing-DOM-With-JavaScript.md
@@ -1,62 +1,62 @@
----
-title: JavaScript를 이용한 DOM에 접근하기
-tags: [javaScript]
-date: "2025.09.23"
----
-오늘은 부트캠프에서 **JavaScript를 이용한 DOM에 접근하는 방법**에 대해 배웠다. 평소엔 React로만 개발을 해왔기 때문에 바닐라 JavaScript를 이용해서 직접 DOM을 다루는 경험은 거의 없었는데, 이번 기회에 정리해두면 좋을 것 같아서 블로그에 기록해본다.
-
-## 1. 자바스크립트로 태그 선택하기
-
-DOM(Document Object Model)에서 원하는 태그를 선택하는 방법은 여러 가지가 있다. 가장 많이 쓰이는 메소드들을 정리해보면 아래와 같다.
-
-| 메소드 | 의미 | 결과 |
-| --- | --- | --- |
-| `document.getElementById('id')` | HTML **id 속성**으로 태그 선택하기 | 해당 id의 태그 하나 |
-| `document.getElementsByClassName('class')` | HTML **class 속성**으로 태그 선택하기 | 해당 class의 태그 모음(HTMLCollection) |
-| `document.getElementsByTagName('tag')` | HTML **태그 이름**으로 태그 선택하기 | 해당 tag의 태그 모음(HTMLCollection) |
-| `document.querySelector('css')` | **CSS 선택자**로 태그 선택하기 | 가장 첫 번째로 일치하는 태그 하나 |
-| `document.querySelectorAll('css')` | **CSS 선택자**로 태그 선택하기 | 모든 일치하는 태그 모음(NodeList) |
-
-## 2. 유사 배열이란?
-
-DOM에서 태그를 선택했을 때 종종 `HTMLCollection`이나 `NodeList` 같은 결과가 나온다. 이걸 **유사 배열**이라고 한다.
-
-- 숫자 형태의 인덱싱이 가능하다.
-- `length` 프로퍼티를 가지고 있다.
-- 하지만 배열의 기본 메소드를 그대로 쓸 수는 없다. (예: `map`, `forEach` 등 일부는 안됨)
-- `Array.isArray(유사배열)`을 해보면 `false`가 나온다.
-
-즉, 배열처럼 생겼지만 진짜 배열은 아니라는 점을 기억해야 한다.
-
-## 3. 이벤트와 이벤트 핸들링
-
-브라우저에서 일어나는 모든 사건을 **이벤트**라고 한다.
-
-예를 들어:
-
-- 버튼 클릭
-- 스크롤
-- 키보드 입력
-
-이벤트가 발생했을 때 원하는 동작을 실행하려면 **이벤트 핸들링(Event Handling)**이 필요하다.
-
-그리고 실제로 이벤트가 일어났을 때 실행되는 코드를 **이벤트 핸들러(Event Handler)**라고 한다. 보통 **이벤트 리스너(Event Listener)**라고도 부른다.
-
-## 4. 이벤트 핸들러 등록 방법
-
-이벤트 핸들러를 등록하는 방법은 크게 두 가지가 있다.
-
-### 4-1. 자바스크립트에서 등록하기
-
-```js
-const btn = document.querySelector('#myBtn');
-
-btn.onclick = function() {
- console.log('Hello Codeit!');
-};
-```
-
-### 4-2. HTML 태그에서 바로 등록하기
-```html
-
+---
+title: JavaScript를 이용한 DOM에 접근하기
+tags: [javaScript]
+date: "2025.09.23"
+---
+오늘은 부트캠프에서 **JavaScript를 이용한 DOM에 접근하는 방법**에 대해 배웠다. 평소엔 React로만 개발을 해왔기 때문에 바닐라 JavaScript를 이용해서 직접 DOM을 다루는 경험은 거의 없었는데, 이번 기회에 정리해두면 좋을 것 같아서 블로그에 기록해본다.
+
+## 1. 자바스크립트로 태그 선택하기
+
+DOM(Document Object Model)에서 원하는 태그를 선택하는 방법은 여러 가지가 있다. 가장 많이 쓰이는 메소드들을 정리해보면 아래와 같다.
+
+| 메소드 | 의미 | 결과 |
+| --- | --- | --- |
+| `document.getElementById('id')` | HTML **id 속성**으로 태그 선택하기 | 해당 id의 태그 하나 |
+| `document.getElementsByClassName('class')` | HTML **class 속성**으로 태그 선택하기 | 해당 class의 태그 모음(HTMLCollection) |
+| `document.getElementsByTagName('tag')` | HTML **태그 이름**으로 태그 선택하기 | 해당 tag의 태그 모음(HTMLCollection) |
+| `document.querySelector('css')` | **CSS 선택자**로 태그 선택하기 | 가장 첫 번째로 일치하는 태그 하나 |
+| `document.querySelectorAll('css')` | **CSS 선택자**로 태그 선택하기 | 모든 일치하는 태그 모음(NodeList) |
+
+## 2. 유사 배열이란?
+
+DOM에서 태그를 선택했을 때 종종 `HTMLCollection`이나 `NodeList` 같은 결과가 나온다. 이걸 **유사 배열**이라고 한다.
+
+- 숫자 형태의 인덱싱이 가능하다.
+- `length` 프로퍼티를 가지고 있다.
+- 하지만 배열의 기본 메소드를 그대로 쓸 수는 없다. (예: `map`, `forEach` 등 일부는 안됨)
+- `Array.isArray(유사배열)`을 해보면 `false`가 나온다.
+
+즉, 배열처럼 생겼지만 진짜 배열은 아니라는 점을 기억해야 한다.
+
+## 3. 이벤트와 이벤트 핸들링
+
+브라우저에서 일어나는 모든 사건을 **이벤트**라고 한다.
+
+예를 들어:
+
+- 버튼 클릭
+- 스크롤
+- 키보드 입력
+
+이벤트가 발생했을 때 원하는 동작을 실행하려면 **이벤트 핸들링(Event Handling)**이 필요하다.
+
+그리고 실제로 이벤트가 일어났을 때 실행되는 코드를 **이벤트 핸들러(Event Handler)**라고 한다. 보통 **이벤트 리스너(Event Listener)**라고도 부른다.
+
+## 4. 이벤트 핸들러 등록 방법
+
+이벤트 핸들러를 등록하는 방법은 크게 두 가지가 있다.
+
+### 4-1. 자바스크립트에서 등록하기
+
+```js
+const btn = document.querySelector('#myBtn');
+
+btn.onclick = function() {
+ console.log('Hello Codeit!');
+};
+```
+
+### 4-2. HTML 태그에서 바로 등록하기
+```html
+
```
\ No newline at end of file
diff --git a/src/content/posts/javaScript/Implementing-javascript-methods.md b/src/content/posts/javaScript/Implementing-javascript-methods.md
index 88cbaa2..ffd829b 100644
--- a/src/content/posts/javaScript/Implementing-javascript-methods.md
+++ b/src/content/posts/javaScript/Implementing-javascript-methods.md
@@ -1,81 +1,81 @@
----
-title: JavaScript의 reducer와 sort 직접 구현하며 배운 것들
-tags: [javaScript]
-date: "2024.11.09"
----
-최근 캐릭터 리스트 정렬 기능과 결정석 판매 금액을 구현하며
-Array.prototype.reduce()와 Array.prototype.sort()를 활용했던
-경험을 바탕으로
-이 메서드들의 작동 원리를 깊이 이해하기 위해 직접 구현해보았습니다.
-
-## reduce() 직접 구현하기
-`reduce()` 함수의 특징으로는 다음이 있습니다.
-- 초기값이 제공되지 않으면 첫 번째 요소를 초기 값으로 사용합니다.
-- 콜백 함수는 누적값(accumulator), 현재값(currentValue), 인덱스(index), 원본 배열(array)을
-인자로 받고 있습니다.
-- 원본 배열을 변형하지 않습니다.
-
-```js
-function myReduce(arr, callback, initialValue) {
- let accumulator = initialValue !== undefined ? initialValue : arr[0]; // 초기 값이 없을 시 배열의 첫번째 요소 사용
- let startIndex = initialValue !== undefined ? 0 : 1;
-
- for (let i = startIndex; i < arr.length; i++) {
- accumulator = callback(accumulator, arr[i], i, arr);
- }
-
- return accumulator;
-}
-
-// 사용 예시
-const sum = myReduce([1, 2, 3], (acc, cur) => acc + cur, 0);
-console.log(sum); // 6
-```
-
-### 결정석 계산 로직
-```ts
-const addPrice = (numbers: number[]): number => {
- return numbers.reduce((sum, current) => sum + current, 0)
-}
-```
-
-## sort() 직접 구현하기
-`sort()` 함수의 특징으로는 다음이 있습니다.
-- 비교 함수가 제공되지 않으면 유니코드 순으로 정렬합니다.
-- 비교 함수 반환 값이 음수면 a를 b 앞으로, 양수면 뒤로, 0이면 순서를 유지합니다.
-- 원본 배열을 직접 변형하는 특징이 있습니다.
-```js
- function mySort(arr, compareFn) {
- // arr 매개 변수를 사용해 원본 배열을 변형
- for (let i = 0; i < arr.length; i++) {
- for (let j = 0; j < arr.length - i - 1; j++) {
- const comparison = compareFn
- ? compareFn(arr[j], arr[j + 1])
- : String(arr[j]) > String(arr[j + 1]) ? 1 : -1; // 비교 함수가 없을 때 문자열로 변환 후 정렬
-
- if (comparison > 0) {
- [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
- }
- }
- }
- return arr;
-}
-
-// 사용 예시
-const characters = [{level: 45}, {level: 23}, {level: 78}];
-const sorted = mySort(characters, (a, b) => a.level - b.level);
-console.log(sorted); // 레벨 오름차순 정렬
-```
-
-### 캐릭터 정렬 로직
-```ts
-arr.sort((a, b) => {
- if (a.character_level === b.character_level) {
- return b.final_stat[42].stat_value - a.final_stat[42].stat_value // 전투력 내림차순 정렬
- }
- return b.character_level - a.character_level // 동일 전투력시 레벨 내림차순 정렬
-}),
-```
-
-## 마치며
+---
+title: JavaScript의 reducer와 sort 직접 구현하며 배운 것들
+tags: [javaScript]
+date: "2024.11.09"
+---
+최근 캐릭터 리스트 정렬 기능과 결정석 판매 금액을 구현하며
+Array.prototype.reduce()와 Array.prototype.sort()를 활용했던
+경험을 바탕으로
+이 메서드들의 작동 원리를 깊이 이해하기 위해 직접 구현해보았습니다.
+
+## reduce() 직접 구현하기
+`reduce()` 함수의 특징으로는 다음이 있습니다.
+- 초기값이 제공되지 않으면 첫 번째 요소를 초기 값으로 사용합니다.
+- 콜백 함수는 누적값(accumulator), 현재값(currentValue), 인덱스(index), 원본 배열(array)을
+인자로 받고 있습니다.
+- 원본 배열을 변형하지 않습니다.
+
+```js
+function myReduce(arr, callback, initialValue) {
+ let accumulator = initialValue !== undefined ? initialValue : arr[0]; // 초기 값이 없을 시 배열의 첫번째 요소 사용
+ let startIndex = initialValue !== undefined ? 0 : 1;
+
+ for (let i = startIndex; i < arr.length; i++) {
+ accumulator = callback(accumulator, arr[i], i, arr);
+ }
+
+ return accumulator;
+}
+
+// 사용 예시
+const sum = myReduce([1, 2, 3], (acc, cur) => acc + cur, 0);
+console.log(sum); // 6
+```
+
+### 결정석 계산 로직
+```ts
+const addPrice = (numbers: number[]): number => {
+ return numbers.reduce((sum, current) => sum + current, 0)
+}
+```
+
+## sort() 직접 구현하기
+`sort()` 함수의 특징으로는 다음이 있습니다.
+- 비교 함수가 제공되지 않으면 유니코드 순으로 정렬합니다.
+- 비교 함수 반환 값이 음수면 a를 b 앞으로, 양수면 뒤로, 0이면 순서를 유지합니다.
+- 원본 배열을 직접 변형하는 특징이 있습니다.
+```js
+ function mySort(arr, compareFn) {
+ // arr 매개 변수를 사용해 원본 배열을 변형
+ for (let i = 0; i < arr.length; i++) {
+ for (let j = 0; j < arr.length - i - 1; j++) {
+ const comparison = compareFn
+ ? compareFn(arr[j], arr[j + 1])
+ : String(arr[j]) > String(arr[j + 1]) ? 1 : -1; // 비교 함수가 없을 때 문자열로 변환 후 정렬
+
+ if (comparison > 0) {
+ [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
+ }
+ }
+ }
+ return arr;
+}
+
+// 사용 예시
+const characters = [{level: 45}, {level: 23}, {level: 78}];
+const sorted = mySort(characters, (a, b) => a.level - b.level);
+console.log(sorted); // 레벨 오름차순 정렬
+```
+
+### 캐릭터 정렬 로직
+```ts
+arr.sort((a, b) => {
+ if (a.character_level === b.character_level) {
+ return b.final_stat[42].stat_value - a.final_stat[42].stat_value // 전투력 내림차순 정렬
+ }
+ return b.character_level - a.character_level // 동일 전투력시 레벨 내림차순 정렬
+}),
+```
+
+## 마치며
사용하던 메서드를 직접 구현하며 `reduce`와 `sort`이외에도 `map`, `forEach`같은 메서드의 공식 문서를 보며 명확한 기능과 사용 방법을 알게 되었고 이런 경험을 통해 단순한 기능 구현뿐 아니라 언어 자체에 대한 이해가 중요하다는 점을 다시 한번 알게 되었습니다.
\ No newline at end of file
diff --git a/src/content/posts/javaScript/Javascript-Prototype.md b/src/content/posts/javaScript/Javascript-Prototype.md
index cd10012..48459ea 100644
--- a/src/content/posts/javaScript/Javascript-Prototype.md
+++ b/src/content/posts/javaScript/Javascript-Prototype.md
@@ -1,89 +1,89 @@
----
-title: Prototype 이해하기
-tags: [javaScript]
-date: "2024.11.16"
----
-자바스크립트는 객체 지향 언어로 객체를 상속하기 위해 프로토타입이라는 방식을 사용합니다.
-
-
-이 프로토타입 덕분에 객체에서 `hasOwnProperty`같은 메소드를 부모 객체로 부터 상속받아 사용할 수 있게 됩니다.
-```js
-const student = {
- name: 'Lee',
- score: 90
-};
-
-// student에는 hasOwnProperty 메소드가 없지만 아래 구문은 동작합니다.
-console.log(student.hasOwnProperty('name')); // true
-
-console.dir(student);
-```
-
-위의 내용이 이해하기 힘들다면 [자바스크립트의 값과 레퍼런스](https://www.spde3289.dev/posts/javascript/ValueAndRefernce) 게시글을 한번 읽고 오시는걸 추천합니다.
-
-## Prototype 이해하기 이전에
-자바스크립트의 원시값(문자열, 숫자 등)은 일시적으로 객체로 변환되어 프로토타입 메서드를 사용할 수 있습니다.
-이 현상을 오토박싱(Auto-boxing)이라고 하며 자바스크립트가 자동으로 값을 랩핑해 주기 때문에 명시적 래퍼 객체 생성은 지양해야 합니다.
-```js
-const num = 123; //
-const numObj = new Number(123); // 불필요한 객체 생성
-
-console.log(typeof num); // number
-console.log(typeof numObj); // "object" (원시값이 아님)
-```
-
-## [[Prototype]] vs prototype 프로퍼티
-### 두 프로퍼티의 역할
-- [[Prototype]]은 객체 내부의 인터널 슬롯으로 객체가 다른 객체의 속성을 참조할 때 사용됩니다.
-- prototype 프로퍼티는 함수 객체에서만 볼 수 있으며, 해당 함수를 생성자 함수로 사용할 때 새로 생성되는 객체의 [[Prototype]]을 지정하는 역할을 합니다.
-
-`__proto__`로 접근 가능하지만 `Object.getPrototypeOf()`사용을 권장합니다
-```js
-function Person(name) {
- this.name = name;
-}
-
-var foo = new Person('Lee');
-
-console.dir(Person); // prototype 프로퍼티가 있다.
-console.dir(foo); // prototype 프로퍼티가 없다.
-
-console.log(Object.getPrototypeOf(Person) === Function.prototype);
-console.log(Person.prototype === Object.getPrototypeOf(foo));
-```
-
-
-
-
-
-## Prototype chain
-객체의 프로퍼티나 메소드에 접근하려고 할 때 다음의 순서로 탐색을 합니다.
-- 자신의 프로퍼티 검색
-- 없으면 __proto__로 이동
-- 최상위 Object.prototype까지 반복
-- 없으면 undefined
-이를 프로토타입 체인이라고 합니다.
-
-## 프로토타입 활용
-이런 프로토타입을 이해하고 있으면 모든 인스턴스가 공통된 메서드를 가질 수 있습니다.
-```js
-// 프로토타입에 함수 할당
-function Person(name) {
- this.name = name;
-}
-
-// 모든 Person 인스턴스가 공유하는 메서드
-Person.prototype.greet = function () {
- console.log(`안녕! 나는 ${this.name}`);
-};
-
-const john = new Person("John");
-john.greet(); // "안녕! 나는 John"
-```
-내장 객체에도 `Array.prototype`를 이용해 커스텀 메서드를 생성할 수 있지만
-`prototype`이 오염될 수 도 있기 때문에 신중하게 사용해야 합니다.
-
-
-## 참고 자료
-[MDN 공식 문서](https://developer.mozilla.org/ko/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)
+---
+title: Prototype 이해하기
+tags: [javaScript]
+date: "2024.11.16"
+---
+자바스크립트는 객체 지향 언어로 객체를 상속하기 위해 프로토타입이라는 방식을 사용합니다.
+
+
+이 프로토타입 덕분에 객체에서 `hasOwnProperty`같은 메소드를 부모 객체로 부터 상속받아 사용할 수 있게 됩니다.
+```js
+const student = {
+ name: 'Lee',
+ score: 90
+};
+
+// student에는 hasOwnProperty 메소드가 없지만 아래 구문은 동작합니다.
+console.log(student.hasOwnProperty('name')); // true
+
+console.dir(student);
+```
+
+위의 내용이 이해하기 힘들다면 [자바스크립트의 값과 레퍼런스](https://www.spde3289.dev/posts/javascript/ValueAndRefernce) 게시글을 한번 읽고 오시는걸 추천합니다.
+
+## Prototype 이해하기 이전에
+자바스크립트의 원시값(문자열, 숫자 등)은 일시적으로 객체로 변환되어 프로토타입 메서드를 사용할 수 있습니다.
+이 현상을 오토박싱(Auto-boxing)이라고 하며 자바스크립트가 자동으로 값을 랩핑해 주기 때문에 명시적 래퍼 객체 생성은 지양해야 합니다.
+```js
+const num = 123; //
+const numObj = new Number(123); // 불필요한 객체 생성
+
+console.log(typeof num); // number
+console.log(typeof numObj); // "object" (원시값이 아님)
+```
+
+## [[Prototype]] vs prototype 프로퍼티
+### 두 프로퍼티의 역할
+- [[Prototype]]은 객체 내부의 인터널 슬롯으로 객체가 다른 객체의 속성을 참조할 때 사용됩니다.
+- prototype 프로퍼티는 함수 객체에서만 볼 수 있으며, 해당 함수를 생성자 함수로 사용할 때 새로 생성되는 객체의 [[Prototype]]을 지정하는 역할을 합니다.
+
+`__proto__`로 접근 가능하지만 `Object.getPrototypeOf()`사용을 권장합니다
+```js
+function Person(name) {
+ this.name = name;
+}
+
+var foo = new Person('Lee');
+
+console.dir(Person); // prototype 프로퍼티가 있다.
+console.dir(foo); // prototype 프로퍼티가 없다.
+
+console.log(Object.getPrototypeOf(Person) === Function.prototype);
+console.log(Person.prototype === Object.getPrototypeOf(foo));
+```
+
+
+
+
+
+## Prototype chain
+객체의 프로퍼티나 메소드에 접근하려고 할 때 다음의 순서로 탐색을 합니다.
+- 자신의 프로퍼티 검색
+- 없으면 __proto__로 이동
+- 최상위 Object.prototype까지 반복
+- 없으면 undefined
+이를 프로토타입 체인이라고 합니다.
+
+## 프로토타입 활용
+이런 프로토타입을 이해하고 있으면 모든 인스턴스가 공통된 메서드를 가질 수 있습니다.
+```js
+// 프로토타입에 함수 할당
+function Person(name) {
+ this.name = name;
+}
+
+// 모든 Person 인스턴스가 공유하는 메서드
+Person.prototype.greet = function () {
+ console.log(`안녕! 나는 ${this.name}`);
+};
+
+const john = new Person("John");
+john.greet(); // "안녕! 나는 John"
+```
+내장 객체에도 `Array.prototype`를 이용해 커스텀 메서드를 생성할 수 있지만
+`prototype`이 오염될 수 도 있기 때문에 신중하게 사용해야 합니다.
+
+
+## 참고 자료
+[MDN 공식 문서](https://developer.mozilla.org/ko/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)
[모던 자바스크립트 프로토타입](https://poiemaweb.com/js-prototype)
\ No newline at end of file
diff --git a/src/content/posts/javaScript/JsLoop.md b/src/content/posts/javaScript/JsLoop.md
index e5f2565..ef3b240 100644
--- a/src/content/posts/javaScript/JsLoop.md
+++ b/src/content/posts/javaScript/JsLoop.md
@@ -1,107 +1,107 @@
----
-title: 자바스크립트 반복문
-tags: [javaScript]
-date: "2023.04.15"
----
-## 반복문의 종류
-
-- for 문
-- for...in 문
-- for...of 문
-- while 문
-- do...while 문
-## for 문
-
-for 문은 특정한 조건이 거짓이 될 때 까지 반복한다.
-
-```javascript
-
- for([초기문]; [조건문]; [증감문]) {
- // 반복하여 실행할 코드
- };
-
- for(let i = 0; i <= 3; i++) {
- console.log(i); // 0부터 3까지 출력
- };
-
-
-```
-## for...in 문
-
-for...in 문은 객체의 속성을 열거할 때 유용하게 활용된다. 하지만 일반적인 배열에도 사용이 가능하다.
-
-```javascript
-
- const object = { a: 1, b: 2, c: 3 };
-
- for (const property in object) {
- console.log(property); // 객체의 프로퍼티를 출력해준다
- }
-
- // a
- // b
- // c
-
-
-```
-## for...of 문
-
-for...of 문은 배열이나 이터러블(iterable) 객체의 각 요소들을 반복적으로 순회하는 데 사용된다.
-
-```javascript
-
- const object = [
- {a: 1},
- {b: 2},
- {c: 3}
- ];
-
- for (const property of object) {
- console.log(property); // 객체의 프로퍼티를 출력해준다
- }
-
- // {a: 1}
- // {b: 2}
- // {c: 3}
-
-
-```
-## while 문
-
-while 문은 주어진 조건식이 참이 될 때 까지 반복한다.
-
-```javascript
-
- while (조건식) {
- // 반복 실행할 코드
- }
-
- let i = 1;
- while (i <= 10) {
- console.log(i); // 1부터 10까지 출력
- i++;
- }
-
-
-```
-## do...while 문
-
-do...while 문은 우선 코드를 실행 한 후 조건식이 참이면 반복하여 실행한다.
-
-```javascript
-
- do {
- // 반복 실행할 코드
- } while (조건식);
-
- let i = 1;
- do {
- console.log(i); // 1부터 10까지 출력
- i++;
- } while (i <= 10);
-
-
-```
-참고자료 :
-
-[https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Loops_and_iteration](https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Loops_and_iteration)
+---
+title: 자바스크립트 반복문
+tags: [javaScript]
+date: "2023.04.15"
+---
+## 반복문의 종류
+
+- for 문
+- for...in 문
+- for...of 문
+- while 문
+- do...while 문
+## for 문
+
+for 문은 특정한 조건이 거짓이 될 때 까지 반복한다.
+
+```javascript
+
+ for([초기문]; [조건문]; [증감문]) {
+ // 반복하여 실행할 코드
+ };
+
+ for(let i = 0; i <= 3; i++) {
+ console.log(i); // 0부터 3까지 출력
+ };
+
+
+```
+## for...in 문
+
+for...in 문은 객체의 속성을 열거할 때 유용하게 활용된다. 하지만 일반적인 배열에도 사용이 가능하다.
+
+```javascript
+
+ const object = { a: 1, b: 2, c: 3 };
+
+ for (const property in object) {
+ console.log(property); // 객체의 프로퍼티를 출력해준다
+ }
+
+ // a
+ // b
+ // c
+
+
+```
+## for...of 문
+
+for...of 문은 배열이나 이터러블(iterable) 객체의 각 요소들을 반복적으로 순회하는 데 사용된다.
+
+```javascript
+
+ const object = [
+ {a: 1},
+ {b: 2},
+ {c: 3}
+ ];
+
+ for (const property of object) {
+ console.log(property); // 객체의 프로퍼티를 출력해준다
+ }
+
+ // {a: 1}
+ // {b: 2}
+ // {c: 3}
+
+
+```
+## while 문
+
+while 문은 주어진 조건식이 참이 될 때 까지 반복한다.
+
+```javascript
+
+ while (조건식) {
+ // 반복 실행할 코드
+ }
+
+ let i = 1;
+ while (i <= 10) {
+ console.log(i); // 1부터 10까지 출력
+ i++;
+ }
+
+
+```
+## do...while 문
+
+do...while 문은 우선 코드를 실행 한 후 조건식이 참이면 반복하여 실행한다.
+
+```javascript
+
+ do {
+ // 반복 실행할 코드
+ } while (조건식);
+
+ let i = 1;
+ do {
+ console.log(i); // 1부터 10까지 출력
+ i++;
+ } while (i <= 10);
+
+
+```
+참고자료 :
+
+[https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Loops_and_iteration](https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Loops_and_iteration)
diff --git a/src/content/posts/javaScript/Jsdoc.md b/src/content/posts/javaScript/Jsdoc.md
index f2dbcb6..fa92a4f 100644
--- a/src/content/posts/javaScript/Jsdoc.md
+++ b/src/content/posts/javaScript/Jsdoc.md
@@ -1,81 +1,81 @@
----
-title: Jsdoc주석에 대해서 알아보자
-tags: [javaScript]
-date: "2023.02.26"
----
-JSDoc 주석은 JavaScript 코드에 추가되는 문서화 주석이다. 이 주석은 함수, 변수, 객체의 설명, 타입정보 등을 제공할 수 있다.
-
-## JSDoc 주석 사용법
-
-```javascript
-
- /**
- * 가격과 개수 입력받아 출력하는 함수
- * @param {number} price 가격 입력란 입니다
- * @param {number} count 개수 입력란 입니다
- * @returns 가격과 개수를 곱한 값을 출력합니다.
- */
- const sum = (price, count) => {
- return price * count;
- };
-
-
-```
-
-
-이와 같이 함수를 호출 할 때 주석를 보여주게 된다.
-
-## @deprecated
-
-해당태그를 사용하면 취소선을 그어준다
-
-```javascript
-
- /**
- * 가격과 개수 입력받아 출력하는 함수
- * @param {number} price 가격 입력란 입니다
- * @param {number} count 개수 입력란 입니다
- * @returns 가격과 개수를 곱한 값을 출력합니다.
- */
- const sum = (price, count) => {
- return price * count;
- };
-
-
-```
-
-## @type
-
-해당태그를 사용하면 타입을 명시 할 수 있다.
-
-```javascript
-
- /**
- * @type {string}
- */
- const name = '곽철용';
-
-
-```
-
-## @see
-
-해당태그를 리소스를 참조할 떄 사용할 수 있다.
-
-```javascript
-
- /**
- * @see {@link https://example.com| 더 많은 정보}
- */
- const sum = ({price, count}) => {
- return price * count;
- };
-
-
-```
-
-이것 말고도 더 다양한 태그들이 있으니 JSDoc 참고 사이트를 확인해보도록 하자
-
-## 참고 사이트
-
-[https://jsdoc.app/](https://jsdoc.app/)
+---
+title: Jsdoc주석에 대해서 알아보자
+tags: [javaScript]
+date: "2023.02.26"
+---
+JSDoc 주석은 JavaScript 코드에 추가되는 문서화 주석이다. 이 주석은 함수, 변수, 객체의 설명, 타입정보 등을 제공할 수 있다.
+
+## JSDoc 주석 사용법
+
+```javascript
+
+ /**
+ * 가격과 개수 입력받아 출력하는 함수
+ * @param {number} price 가격 입력란 입니다
+ * @param {number} count 개수 입력란 입니다
+ * @returns 가격과 개수를 곱한 값을 출력합니다.
+ */
+ const sum = (price, count) => {
+ return price * count;
+ };
+
+
+```
+
+
+이와 같이 함수를 호출 할 때 주석를 보여주게 된다.
+
+## @deprecated
+
+해당태그를 사용하면 취소선을 그어준다
+
+```javascript
+
+ /**
+ * 가격과 개수 입력받아 출력하는 함수
+ * @param {number} price 가격 입력란 입니다
+ * @param {number} count 개수 입력란 입니다
+ * @returns 가격과 개수를 곱한 값을 출력합니다.
+ */
+ const sum = (price, count) => {
+ return price * count;
+ };
+
+
+```
+
+## @type
+
+해당태그를 사용하면 타입을 명시 할 수 있다.
+
+```javascript
+
+ /**
+ * @type {string}
+ */
+ const name = '곽철용';
+
+
+```
+
+## @see
+
+해당태그를 리소스를 참조할 떄 사용할 수 있다.
+
+```javascript
+
+ /**
+ * @see {@link https://example.com| 더 많은 정보}
+ */
+ const sum = ({price, count}) => {
+ return price * count;
+ };
+
+
+```
+
+이것 말고도 더 다양한 태그들이 있으니 JSDoc 참고 사이트를 확인해보도록 하자
+
+## 참고 사이트
+
+[https://jsdoc.app/](https://jsdoc.app/)
diff --git a/src/content/posts/javaScript/NpmVsYarn.md b/src/content/posts/javaScript/NpmVsYarn.md
index e500775..5a462d8 100644
--- a/src/content/posts/javaScript/NpmVsYarn.md
+++ b/src/content/posts/javaScript/NpmVsYarn.md
@@ -1,19 +1,19 @@
----
-title: npm vs yarn
-tags: [javaScript]
-date: "2023.03.30"
----
-## npm
-
-npm(Node Package Manager)은 Node.js의 기본 패키지 매니저로 라이브러리와 패키지를 관리하고 설치, 업데이트, 제거 등을 할 수 있다. package.json 파일을 사용해 의존성과 버젼을 관리한다.
-
-## yarn
-
-yarn은 Facebook에서 만든 패키지 매니저인데 순차적으로 설치하는 npm과 달리 병렬로 설치해 속도 도 더 빠르다. 또 패키지 버젼 관리에 용이한데 npm install을 한다고 해서 모든 개발자가 동일한 버젼의 패키지를 다운 받는게 아니다. 하지만 yarn.lock이 추가되면서 모두 동일한 버젼을 다운 받을 수 있다.
-
-## npm vs yarn
-
-
-[https://javascript.plainenglish.io/npm-vs-yarn-choosing-the-right-package-manager-a5f04256a93f](https://javascript.plainenglish.io/npm-vs-yarn-choosing-the-right-package-manager-a5f04256a93f)
-
-[https://www.digitalocean.com/community/tutorials/nodejs-npm-yarn-cheatsheet](https://www.digitalocean.com/community/tutorials/nodejs-npm-yarn-cheatsheet)
+---
+title: npm vs yarn
+tags: [javaScript]
+date: "2023.03.30"
+---
+## npm
+
+npm(Node Package Manager)은 Node.js의 기본 패키지 매니저로 라이브러리와 패키지를 관리하고 설치, 업데이트, 제거 등을 할 수 있다. package.json 파일을 사용해 의존성과 버젼을 관리한다.
+
+## yarn
+
+yarn은 Facebook에서 만든 패키지 매니저인데 순차적으로 설치하는 npm과 달리 병렬로 설치해 속도 도 더 빠르다. 또 패키지 버젼 관리에 용이한데 npm install을 한다고 해서 모든 개발자가 동일한 버젼의 패키지를 다운 받는게 아니다. 하지만 yarn.lock이 추가되면서 모두 동일한 버젼을 다운 받을 수 있다.
+
+## npm vs yarn
+
+
+[https://javascript.plainenglish.io/npm-vs-yarn-choosing-the-right-package-manager-a5f04256a93f](https://javascript.plainenglish.io/npm-vs-yarn-choosing-the-right-package-manager-a5f04256a93f)
+
+[https://www.digitalocean.com/community/tutorials/nodejs-npm-yarn-cheatsheet](https://www.digitalocean.com/community/tutorials/nodejs-npm-yarn-cheatsheet)
diff --git a/src/content/posts/javaScript/PackageJson.md b/src/content/posts/javaScript/PackageJson.md
index 86e7c71..0622a52 100644
--- a/src/content/posts/javaScript/PackageJson.md
+++ b/src/content/posts/javaScript/PackageJson.md
@@ -1,52 +1,52 @@
----
-title: package.json에 대해서
-tags: [javaScript]
-date: "2023.04.06"
----
-## package.json이란?
-
-package.json이란 패키지 매니저로 설치한 모듈들의 의존성을 명세하고 관리하는 파일이다.
-
-## 구성요소
-
-## name, version
-
-패키지의 이름과 버젼을 명세하기 위해 필요한데 몇가지 규직이 존재한다.
-
-- 이름은 214자 이하여야 한다.
-- 범위가 지정된 패키지의 이름은 점 또는 밑줄로 시작할 수 있다. 범위가 없으면 허용되지 않는다.
-- 새 패키지의 이름에는 대문자가 없어야 한다.
-- 이름은 URL의 일부, 명령줄의 인수 및 폴더 이름이 된다. 따라서 이름에는 URL 안전이 아닌 문자를 포함할 수 없다.
-## description
-
-패키지에 대한 설명을 기술한다. npm에서 검색됐을 때 리스트에 표시되기 때문에 사람들이 패키지를 찾아 내고 이해하는 데 도움이 된다.
-
-## keywords
-
-키워드를 문자열 배열로 설명한다. npm에서 검색됐을 때 리스트에 표시되기 때문에 사람들이 패키지를 찾아 내고 이해하는 데 도움이 된다.
-
-## main
-
-프로젝트의 진입점이 되는 파일을 지정한다. 일반적으로 "index.js"와 같이 프로젝트의 주요 JavaScript 파일을 가리키는 경로를 작성합니다.
-
-## scripts
-
-프로젝트에서 사용할 수 있는 명령어 스크립트들을 정의한다. 이는 개발, 빌드, 테스트 등의 작업을 자동화하는 데 사용되고 예를 들어, "start", "build", "test" 등의 스크립트를 지정할 수 있다.
-
-## dependencies
-
-프로젝트가 의존하고 있는 패키지와 해당 버전에 대한 정보를 명시한다.
-
-## devDependencies
-
-개발시에만 필요한 패키지와 해당 버전 정보를 명시한다. 예를들어 프로젝트 개발 및 빌드 도구, 테스트 프레임워크, 코드 포맷터 등을 포함한다.
-
-## author
-
-프로젝트의 작성자 정보를 포함한다. 보통 이름 이메일주소, 웹사이트 등을 작성한다.
-
-## license
-
-프로젝트의 라이센스에 대해 기재한다. 프로젝트의 사용, 수정, 배포하는데 적용되는 규정을 나타내는 것 이다.
-
-[https://docs.npmjs.com/cli/v9/configuring-npm/package-json](https://docs.npmjs.com/cli/v9/configuring-npm/package-json)
+---
+title: package.json에 대해서
+tags: [javaScript]
+date: "2023.04.06"
+---
+## package.json이란?
+
+package.json이란 패키지 매니저로 설치한 모듈들의 의존성을 명세하고 관리하는 파일이다.
+
+## 구성요소
+
+## name, version
+
+패키지의 이름과 버젼을 명세하기 위해 필요한데 몇가지 규직이 존재한다.
+
+- 이름은 214자 이하여야 한다.
+- 범위가 지정된 패키지의 이름은 점 또는 밑줄로 시작할 수 있다. 범위가 없으면 허용되지 않는다.
+- 새 패키지의 이름에는 대문자가 없어야 한다.
+- 이름은 URL의 일부, 명령줄의 인수 및 폴더 이름이 된다. 따라서 이름에는 URL 안전이 아닌 문자를 포함할 수 없다.
+## description
+
+패키지에 대한 설명을 기술한다. npm에서 검색됐을 때 리스트에 표시되기 때문에 사람들이 패키지를 찾아 내고 이해하는 데 도움이 된다.
+
+## keywords
+
+키워드를 문자열 배열로 설명한다. npm에서 검색됐을 때 리스트에 표시되기 때문에 사람들이 패키지를 찾아 내고 이해하는 데 도움이 된다.
+
+## main
+
+프로젝트의 진입점이 되는 파일을 지정한다. 일반적으로 "index.js"와 같이 프로젝트의 주요 JavaScript 파일을 가리키는 경로를 작성합니다.
+
+## scripts
+
+프로젝트에서 사용할 수 있는 명령어 스크립트들을 정의한다. 이는 개발, 빌드, 테스트 등의 작업을 자동화하는 데 사용되고 예를 들어, "start", "build", "test" 등의 스크립트를 지정할 수 있다.
+
+## dependencies
+
+프로젝트가 의존하고 있는 패키지와 해당 버전에 대한 정보를 명시한다.
+
+## devDependencies
+
+개발시에만 필요한 패키지와 해당 버전 정보를 명시한다. 예를들어 프로젝트 개발 및 빌드 도구, 테스트 프레임워크, 코드 포맷터 등을 포함한다.
+
+## author
+
+프로젝트의 작성자 정보를 포함한다. 보통 이름 이메일주소, 웹사이트 등을 작성한다.
+
+## license
+
+프로젝트의 라이센스에 대해 기재한다. 프로젝트의 사용, 수정, 배포하는데 적용되는 규정을 나타내는 것 이다.
+
+[https://docs.npmjs.com/cli/v9/configuring-npm/package-json](https://docs.npmjs.com/cli/v9/configuring-npm/package-json)
diff --git a/src/content/posts/javaScript/Require-vs-Import.md b/src/content/posts/javaScript/Require-vs-Import.md
index 079e2f6..f86907b 100644
--- a/src/content/posts/javaScript/Require-vs-Import.md
+++ b/src/content/posts/javaScript/Require-vs-Import.md
@@ -1,55 +1,55 @@
----
-title: require와 import의 차이점
-tags: [javaScript]
-date: "2024.09.07"
----
-라이브쳇 개발을 하며 백엔드 서비스에는 require를 프론트 서비스에는 import를 사용했는데 문뜩
-어떤 차이가 있는지 궁금해져서 정리해보려 합니다.
-
-## require와 import
-
-`require`와 `import`는 자바스크립트에서 모듈을 불러오는 문법으로
-`require`는 CommonJS에서 사용하는 모듈 시스템 `import`는 ES6에서 사용하는 모듈 시스템 입니다.
-
-```javascript
-const module = require('module-name');
-
-module.exports = module;
-```
-```javascript
-import module from 'module-name';
-
-export default module;
-```
-
-## 사용 환경
-
-### require
-CommonJS는 Node.js 환경에서 지원되고 브라우저 환경에서 사용하기 위해선 Wabpack같은 번들러가 필요합니다.
-
-### import
-ES6 모듈은 최신 JavaScript 표준이기 때문에 브라우저와 Node.js 환경 모두 지원합니다.
-
-## 동작 방식
-
-### require
-런타임에 모듈을 로드하며 가져온 모듈은 캐싱되어 여러번 호출해도 처음에 로드된 모듈만을 반환 합니다.
-
-### import
-컴파일 시점에 모듈을 로드하며 정적 분석을 통해 의존성과 최적화가 가능합니다.
-하지만 `import()` 함수를 이용해 동적으로 가져온 모듈은 최적화를 할 수 없습니다.
-
-## 그래서?
-`import`가 최신 표준 ES6 Modules를 따르고 있기 때문에 새로운 프로젝트에서는 `import`를 사용하는 것이 권장되나
-기존 프로젝트의 호환성을 고려한다면 `require`를 사용해도 무관합니다.
-
-마지막으로 Node.js환경에서 `import`를 사용하는 방법에 대해 알려드리고 끝내도록 하겠습니다.
-` package.json`파일을 보면 `type` 속성을 `"module"`로 변경해주면 됩니다.
-
-
-
-```json
-{
- "type": "module"
-}
+---
+title: require와 import의 차이점
+tags: [javaScript]
+date: "2024.09.07"
+---
+라이브쳇 개발을 하며 백엔드 서비스에는 require를 프론트 서비스에는 import를 사용했는데 문뜩
+어떤 차이가 있는지 궁금해져서 정리해보려 합니다.
+
+## require와 import
+
+`require`와 `import`는 자바스크립트에서 모듈을 불러오는 문법으로
+`require`는 CommonJS에서 사용하는 모듈 시스템 `import`는 ES6에서 사용하는 모듈 시스템 입니다.
+
+```javascript
+const module = require('module-name');
+
+module.exports = module;
+```
+```javascript
+import module from 'module-name';
+
+export default module;
+```
+
+## 사용 환경
+
+### require
+CommonJS는 Node.js 환경에서 지원되고 브라우저 환경에서 사용하기 위해선 Wabpack같은 번들러가 필요합니다.
+
+### import
+ES6 모듈은 최신 JavaScript 표준이기 때문에 브라우저와 Node.js 환경 모두 지원합니다.
+
+## 동작 방식
+
+### require
+런타임에 모듈을 로드하며 가져온 모듈은 캐싱되어 여러번 호출해도 처음에 로드된 모듈만을 반환 합니다.
+
+### import
+컴파일 시점에 모듈을 로드하며 정적 분석을 통해 의존성과 최적화가 가능합니다.
+하지만 `import()` 함수를 이용해 동적으로 가져온 모듈은 최적화를 할 수 없습니다.
+
+## 그래서?
+`import`가 최신 표준 ES6 Modules를 따르고 있기 때문에 새로운 프로젝트에서는 `import`를 사용하는 것이 권장되나
+기존 프로젝트의 호환성을 고려한다면 `require`를 사용해도 무관합니다.
+
+마지막으로 Node.js환경에서 `import`를 사용하는 방법에 대해 알려드리고 끝내도록 하겠습니다.
+` package.json`파일을 보면 `type` 속성을 `"module"`로 변경해주면 됩니다.
+
+
+
+```json
+{
+ "type": "module"
+}
```
\ No newline at end of file
diff --git a/src/content/posts/javaScript/Symbol.md b/src/content/posts/javaScript/Symbol.md
index ca81d73..d22bbe7 100644
--- a/src/content/posts/javaScript/Symbol.md
+++ b/src/content/posts/javaScript/Symbol.md
@@ -1,79 +1,79 @@
----
-title: Symbol에 대해서
-tags: [javaScript]
-date: "2023.04.11"
----
-Symbol은 ES6에서 추가된 7번째 데이터 타입이다. 심볼은 주로 이름의 충돌 위험이 없는 객체의 프로퍼티 키를 만들기 위해서 사용한다.
-
-## Symbol의 생성
-
-Symbol은 Symbol()함수를 호출하어 생성한다 이때 생성된 Symbol은 객체가 아니라 변경 불가능한 원시타입의 값이다.
-
-```javascript
-
- const mySymbol = Symbol();
-
- console.log(mySymbol); // Symbol()
- console.log(typeof mySymbol); // symbol
-
-
-```
-이렇게 보면 생성자 함수로 객체를 생성하는 것처럼 보이지만 Symbol함수는 String, Number, Boolean 생성자와 달리 new 연산자와 함께 호출하지 않는다.
-
-```javascript
-
- new Symbol(); // TypeError: Symbol is not a constructor
-
-
-```
-Symbol함수에는 문자열을 인수로 전달할 수 있는데 이 문자열은 심벌 값에 대한 설명, 디버깅 용도로만 사용된다.
-
-```javascript
-
- // 심벌 값에 대한 설명이 같더라도 유일무이한 심벌 값을 생성한다.
- const mtSymbol1 = Symbol("mySymbol");
- const mtSymbol2 = Symbol("mySymbol");
-
- console.log(mySymbol1 === mtSymbol2); //false
-
-
-```
-## Symbol과 프로퍼티 은닉
-
-어떠한 외부에서 가져온 객체에 값을 추가해야 하는 상황이 있다고 할때 symbol을 이용할 수 있다.
-
-```javascript
-
- const obj ={};
-
- let my = Symbol("my");
-
- obj[my] = "나야!";
-
- for(const key in obj){
- console.log(key); // 아무것도 출력되지 않는다
- };
-
- console.log(Object.keys(obj)); // []
- console.log(Object.getOwnPropertyNames(obj)); // []
- console.log(obj); // { [Symbol(my)]: 나야! }
- console.log(obj[my]); // 나야!
-
-
-```
-심벌은 중복되지 않는 상수 값을 생성하는 것은 물론 기존에 작성된 코드에 영향을 주지 않고 새로운 프로퍼티를 추가하기 위해 도입되었다.
-
-## Symbol 객체
-
-한번 브라우저 콘솔에서 Symbol함수를 참조해보자
-
-
-자바스크립트에서 기본제공하는 심벌 값을 Well-know Symbol 이라고 부른다. 이는 자바스크립트 엔진의 내부 알고리즘에 사용되는데 예를 들어 Array, String, Map, Set, TypedArray, arguments, NodeList, HtmlCollection과 같이 for of문으로 순회 가능한 빌트인 이터러블은 Well-known Symbol인 symbol.iterator를 키로 갖는 메서드를 가지며, symbol.iterator 메서드를 호출하면 이터레이터를 반환하도록 ECMAScript 사양에 규정되어 있다. 빌트인 이터러블은 이터레이션 프로토콜을 준수한다. 만약 빌트인 이터레블이 아닌 객체를 이터레블처럼 동작하도록 구현 하고 싶으면 이터레이션 프로토콜을 따르면 된다.
-
-참고자료 :
-
-[https://ko.javascript.info/symbol](https://ko.javascript.info/symbol)
-
-[https://poiemaweb.com/es6-symbol](https://poiemaweb.com/es6-symbol)
-
-[https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol)
+---
+title: Symbol에 대해서
+tags: [javaScript]
+date: "2023.04.11"
+---
+Symbol은 ES6에서 추가된 7번째 데이터 타입이다. 심볼은 주로 이름의 충돌 위험이 없는 객체의 프로퍼티 키를 만들기 위해서 사용한다.
+
+## Symbol의 생성
+
+Symbol은 Symbol()함수를 호출하어 생성한다 이때 생성된 Symbol은 객체가 아니라 변경 불가능한 원시타입의 값이다.
+
+```javascript
+
+ const mySymbol = Symbol();
+
+ console.log(mySymbol); // Symbol()
+ console.log(typeof mySymbol); // symbol
+
+
+```
+이렇게 보면 생성자 함수로 객체를 생성하는 것처럼 보이지만 Symbol함수는 String, Number, Boolean 생성자와 달리 new 연산자와 함께 호출하지 않는다.
+
+```javascript
+
+ new Symbol(); // TypeError: Symbol is not a constructor
+
+
+```
+Symbol함수에는 문자열을 인수로 전달할 수 있는데 이 문자열은 심벌 값에 대한 설명, 디버깅 용도로만 사용된다.
+
+```javascript
+
+ // 심벌 값에 대한 설명이 같더라도 유일무이한 심벌 값을 생성한다.
+ const mtSymbol1 = Symbol("mySymbol");
+ const mtSymbol2 = Symbol("mySymbol");
+
+ console.log(mySymbol1 === mtSymbol2); //false
+
+
+```
+## Symbol과 프로퍼티 은닉
+
+어떠한 외부에서 가져온 객체에 값을 추가해야 하는 상황이 있다고 할때 symbol을 이용할 수 있다.
+
+```javascript
+
+ const obj ={};
+
+ let my = Symbol("my");
+
+ obj[my] = "나야!";
+
+ for(const key in obj){
+ console.log(key); // 아무것도 출력되지 않는다
+ };
+
+ console.log(Object.keys(obj)); // []
+ console.log(Object.getOwnPropertyNames(obj)); // []
+ console.log(obj); // { [Symbol(my)]: 나야! }
+ console.log(obj[my]); // 나야!
+
+
+```
+심벌은 중복되지 않는 상수 값을 생성하는 것은 물론 기존에 작성된 코드에 영향을 주지 않고 새로운 프로퍼티를 추가하기 위해 도입되었다.
+
+## Symbol 객체
+
+한번 브라우저 콘솔에서 Symbol함수를 참조해보자
+
+
+자바스크립트에서 기본제공하는 심벌 값을 Well-know Symbol 이라고 부른다. 이는 자바스크립트 엔진의 내부 알고리즘에 사용되는데 예를 들어 Array, String, Map, Set, TypedArray, arguments, NodeList, HtmlCollection과 같이 for of문으로 순회 가능한 빌트인 이터러블은 Well-known Symbol인 symbol.iterator를 키로 갖는 메서드를 가지며, symbol.iterator 메서드를 호출하면 이터레이터를 반환하도록 ECMAScript 사양에 규정되어 있다. 빌트인 이터러블은 이터레이션 프로토콜을 준수한다. 만약 빌트인 이터레블이 아닌 객체를 이터레블처럼 동작하도록 구현 하고 싶으면 이터레이션 프로토콜을 따르면 된다.
+
+참고자료 :
+
+[https://ko.javascript.info/symbol](https://ko.javascript.info/symbol)
+
+[https://poiemaweb.com/es6-symbol](https://poiemaweb.com/es6-symbol)
+
+[https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol)
diff --git a/src/content/posts/javaScript/Tdz-temporal-dead-zone-summary.md b/src/content/posts/javaScript/Tdz-temporal-dead-zone-summary.md
index db6462d..774a65a 100644
--- a/src/content/posts/javaScript/Tdz-temporal-dead-zone-summary.md
+++ b/src/content/posts/javaScript/Tdz-temporal-dead-zone-summary.md
@@ -1,46 +1,46 @@
----
-title: TDZ(Temporal Dead Zone) 정리
-tags: [javaScript]
-date: "2025.09.18"
----
-오늘은 자바스크립트에서 자주 헷갈릴 수 있는 개념인 **TDZ(Temporal Dead Zone)**에 대해 정리해 보았다.
-
-## TDZ란 무엇인가
-
-TDZ는 직역하면 "임시 사각지대"인데, **`let`과 `const`로 선언된 변수가 초기화되기 전까지 접근할 수 없는 구간**을 말한다.
-
-즉, 변수가 스코프 안에 존재하긴 하지만 아직 사용할 수 없는 상태를 의미한다. 이 구간에서 변수를 참조하려 하면 `ReferenceError`가 발생한다.
-
-## 예시
-
-```js
-console.log(a); // ReferenceError
-let a = 10;
-```
-
-위 코드에서 변수 `a`는 선언되기 전이 아니라, 사실상 스코프 안에 이미 "존재"하고 있다. 하지만 초기화되기 전이므로 TDZ에 걸려 접근할 수 없는 것이다.
-
-`var`와 비교하면 차이가 더 명확해진다.
-
-```js
-console.log(b); // undefined
-var b = 10;
-```
-
-`var`는 호이스팅 과정에서 `undefined`로 초기화되기 때문에 접근이 가능하지만, `let`과 `const`는 TDZ 때문에 초기화되기 전에는 접근할 수 없다.
-
-## TDZ가 중요한 이유
-
-1. **예상치 못한 동작 방지**
- - `var`에서 자주 발생하던 “호이스팅으로 인한 의도치 않은 값 참조” 문제를 막아 준다.
-2. **더 안전한 코드 작성**
- - 초기화 전 접근을 차단하기 때문에, 선언과 동시에 명확하게 값을 할당하도록 유도한다.
-3. **코드 가독성 향상**
- - 변수가 언제부터 유효한지 코드 상에서 명확해진다.
-
-## 정리
-
-- TDZ는 `let`과 `const` 변수가 선언된 스코프 안에서 초기화되기 전까지 접근할 수 없는 구간이다.
-- TDZ 구간에서 변수를 참조하면 `ReferenceError`가 발생한다.
-- `var`와 달리 TDZ가 있기 때문에 더 안전하고 예측 가능한 코드를 작성할 수 있다.
-
+---
+title: TDZ(Temporal Dead Zone) 정리
+tags: [javaScript]
+date: "2025.09.18"
+---
+오늘은 자바스크립트에서 자주 헷갈릴 수 있는 개념인 **TDZ(Temporal Dead Zone)**에 대해 정리해 보았다.
+
+## TDZ란 무엇인가
+
+TDZ는 직역하면 "임시 사각지대"인데, **`let`과 `const`로 선언된 변수가 초기화되기 전까지 접근할 수 없는 구간**을 말한다.
+
+즉, 변수가 스코프 안에 존재하긴 하지만 아직 사용할 수 없는 상태를 의미한다. 이 구간에서 변수를 참조하려 하면 `ReferenceError`가 발생한다.
+
+## 예시
+
+```js
+console.log(a); // ReferenceError
+let a = 10;
+```
+
+위 코드에서 변수 `a`는 선언되기 전이 아니라, 사실상 스코프 안에 이미 "존재"하고 있다. 하지만 초기화되기 전이므로 TDZ에 걸려 접근할 수 없는 것이다.
+
+`var`와 비교하면 차이가 더 명확해진다.
+
+```js
+console.log(b); // undefined
+var b = 10;
+```
+
+`var`는 호이스팅 과정에서 `undefined`로 초기화되기 때문에 접근이 가능하지만, `let`과 `const`는 TDZ 때문에 초기화되기 전에는 접근할 수 없다.
+
+## TDZ가 중요한 이유
+
+1. **예상치 못한 동작 방지**
+ - `var`에서 자주 발생하던 “호이스팅으로 인한 의도치 않은 값 참조” 문제를 막아 준다.
+2. **더 안전한 코드 작성**
+ - 초기화 전 접근을 차단하기 때문에, 선언과 동시에 명확하게 값을 할당하도록 유도한다.
+3. **코드 가독성 향상**
+ - 변수가 언제부터 유효한지 코드 상에서 명확해진다.
+
+## 정리
+
+- TDZ는 `let`과 `const` 변수가 선언된 스코프 안에서 초기화되기 전까지 접근할 수 없는 구간이다.
+- TDZ 구간에서 변수를 참조하면 `ReferenceError`가 발생한다.
+- `var`와 달리 TDZ가 있기 때문에 더 안전하고 예측 가능한 코드를 작성할 수 있다.
+
diff --git a/src/content/posts/javaScript/ValueAndRefernce.md b/src/content/posts/javaScript/ValueAndRefernce.md
index a490c21..ac51a17 100644
--- a/src/content/posts/javaScript/ValueAndRefernce.md
+++ b/src/content/posts/javaScript/ValueAndRefernce.md
@@ -1,148 +1,148 @@
----
-title: 자바스크립트의 값과 레퍼런스
-tags: [javaScript]
-date: "2024.06.08"
----
-오늘은 you don`t Know JavaScript 책을 읽고 그 내용에 관해 글을 써보겠습니다.
-
-자바스크립트에는 원시 자료형(값)과 참조 자료형(레퍼런스)이 존재합니다. 원시 자료형은 불변 하고 값 자체가 변수에 할당된다는 특징이 있고
-참조 자료형은 변경 가능하고 변수에 저장된 메모리 주소가 할당된다는 특징이 있습니다.
-
-### 값 (Value)
-
-```
-string: 문자열. 예: 'Hello'
-
-number: 숫자. 예: 42
-
-bigint: 매우 큰 숫자. 예: 9007199254740991n
-
-boolean: true 또는 false
-
-undefined: 값이 정의되지 않았을 때의 상태
-
-symbol: 고유하고 변경할 수 없는 값
-
-null: 값이 존재하지 않음을 나타내는 특수한 값
-```
-
->이런 원시 데이터(값)의 특징은 복사라는 개념을 따릅니다.
-
-예를 들어 숫자 값을 변수에 할당하면 그 값 자체가 복사 됩니다. 아래의 예시 처럼 x의 값을 바꿔도 y는 영향을 받지 않습니다.
-
-```javascript
-let x = 10;
-let y = x; // x의 값을 y에 복사
-
-x = 20; // x의 값만 변경됨
-
-console.log(y); // 10
-```
-### 레퍼런스 (Reference)
-
-```
-Object : 키(key)-값(value) 쌍의 집합. 예: {name: 'Alice', age: 25}
-
-Array : 리스트 형태의 자료형. 예: ['apple', 'banana', 'cherry']
-
-Function : 특정 작업을 실행하는 코드 블록 이외에도 복잡한 데이터를 가리킵니다.
-```
-이런 복잡 데이터는 값 자체가 아니라 데이터가 저장된 메모리 주소를 저장합니다. 즉 변수는 데이터를 가르키는 주소만 저장하고 여러 변수가 같은 메모리 주소를 가르킬 수 있습니다.
-
-여기서 obj1과 obj2는 같은 객체를 참조하고 있기 때문에 obj2의 값을 변경하면 obj1에도 영향을 줍니다.
-
-```javascript
-let obj1 = { name: 'Alice', age: 25 };
-let obj2 = obj1; // obj2는 obj1을 참조
-
-obj2.age = 30; // obj2의 값을 변경하면 obj1에도 영향을 미침
-
-console.log(obj1.age); // 30
-```
-## 값 복사와 레퍼런스 복사의 차이
-
-한번 정리해보자면
-
-**값 복사**
-- 원시 데이터는 변수에 할당될 때 그 값이 할당됩니다
-- 복사된 변수는 독립적으로 하나의 값을 변경해도 다른 값에 영향을 미치지 않습니다.
-
-**레퍼런스 복사**
-- 객체나 배열은 변수에 할당될 때 그 값을 참조하는 메모리 주소가 복사됩니다.
-- 같은 데이터를 참조하는 여러 변수에서 변경 사항이 공유됩니다.
-
-자바스크립트가 복잡 데이터 타입에 대해서 레퍼런스 복사를 이용하는 이유는 메모리 효율성과 최적화 때문입니다.
-원시 데이터와 달리 객체나 배열은 데이터가 중첩될 경우 구조가 매우 복잡해질 수 있어 메모리 주소 복사를 통해 효율성을 높입니다.
-
-### 얕은 복사와 깊은 복사
-
-그러면 객체나 배열을 다룰때 불필요한 데이터 변경을 피하기 위한 방법이 있습니다.
-
-#### 얕은 복사
-
-( ... ) 스프레드 연산자를 사용해 얕은 복사를 수행할 수 있으며 객체나 배열의 최상위 속성만을 복사하고
-내부에 중첩된 객체나 배열은 원본 데이터를 참조합니다.
-```javascript
-const original = { a: 1, b: { c: 2 } };
-const shallowCopy = { ...original };
-
-shallowCopy.a = 10; // 최상위 값 변경 (독립적)
-shallowCopy.b.c = 20; // 중첩된 객체 값 변경 (원본 영향)
-
-console.log(original); // { a: 1, b: { c: 20 } }
-console.log(shallowCopy); // { a: 10, b: { c: 20 } }
-```
-
-아래의 코드를 보면 최상위 레벨의 속성만 복사해 깊은 복사처럼 보일 뿐 여전히 앝은 복사입니다.
-
-```javascript
-let original = { a: 1, b: 2 };
-let copy = { ...original };
-
-copy.a = 10;
-
-console.log(original.a); // 1 (독립적)
-console.log(copy.a); // 10
-```
-```javascript
-const original = { a: 1, b: { c: 2 } };
-const copy = { ...original };
-
-// copy의 중첩된 객체를 수정
-copy.b.c = 10;
-
-const object = { a: 1, b: { c: 10 } }; // 비교할 다른 값 생성
-
-console.log(original); // 10 { a: 1, b: { c: 2 } } (원본도 변경됨)
-console.log(copy.b === original.b); // true (중첩 객체는 같은 참조)
-
-console.log(object.b === original.b); // false original과 동일해 보이지만 다른 값이다.
-```
-
-
-#### 깊은 복사
-
-모든 수준의 데이터를 복사해 원본과 완전히 독립적인 새로운 데이터를 생성합니다.
-따라서 원본 데이터를 변경해도 복사된 데이터는 영향을 받지 않습니다.
-
-깊은 복사는 JSON.parse()와 JSON.stringify()를 사용해 수행하거나 lodash의 cloneDeep() 같은 라이브러리를 사용해 수행할 수 있습니다.
-> JSON.parse()와 JSON.stringify() RegExp이나 Date같은 특수 객체나 undefined, 함수, Symbol, 순환 참조의 경우는 복사되지 않습니다.
-
-```javascript
-const original = { a: 1, b: { c: 2 } };
-const deepCopy = JSON.parse(JSON.stringify(original));
-
-deepCopy.a = 10; // 최상위 값 변경
-deepCopy.b.c = 20; // 중첩된 객체 값 변경
-
-console.log(original); // { a: 1, b: { c: 2 } }
-console.log(deepCopy); // { a: 10, b: { c: 20 } }
-```
-
-## 마무리
-
-사실 이 책을 처음 읽은 것은 2년 전이었습니다. 오늘 다시 읽으면서 그 땐 이해하지 못 했던 부분들을 많이 이해할 수 있었고
-그동안 개발을 하며 느낌적으로 알고 있던 것들을 확실히 정리하고 넘어갈 수 있어 뜻깊은 시간이 되었습니다.
-
-
+---
+title: 자바스크립트의 값과 레퍼런스
+tags: [javaScript]
+date: "2024.06.08"
+---
+오늘은 you don`t Know JavaScript 책을 읽고 그 내용에 관해 글을 써보겠습니다.
+
+자바스크립트에는 원시 자료형(값)과 참조 자료형(레퍼런스)이 존재합니다. 원시 자료형은 불변 하고 값 자체가 변수에 할당된다는 특징이 있고
+참조 자료형은 변경 가능하고 변수에 저장된 메모리 주소가 할당된다는 특징이 있습니다.
+
+### 값 (Value)
+
+```
+string: 문자열. 예: 'Hello'
+
+number: 숫자. 예: 42
+
+bigint: 매우 큰 숫자. 예: 9007199254740991n
+
+boolean: true 또는 false
+
+undefined: 값이 정의되지 않았을 때의 상태
+
+symbol: 고유하고 변경할 수 없는 값
+
+null: 값이 존재하지 않음을 나타내는 특수한 값
+```
+
+>이런 원시 데이터(값)의 특징은 복사라는 개념을 따릅니다.
+
+예를 들어 숫자 값을 변수에 할당하면 그 값 자체가 복사 됩니다. 아래의 예시 처럼 x의 값을 바꿔도 y는 영향을 받지 않습니다.
+
+```javascript
+let x = 10;
+let y = x; // x의 값을 y에 복사
+
+x = 20; // x의 값만 변경됨
+
+console.log(y); // 10
+```
+### 레퍼런스 (Reference)
+
+```
+Object : 키(key)-값(value) 쌍의 집합. 예: {name: 'Alice', age: 25}
+
+Array : 리스트 형태의 자료형. 예: ['apple', 'banana', 'cherry']
+
+Function : 특정 작업을 실행하는 코드 블록 이외에도 복잡한 데이터를 가리킵니다.
+```
+이런 복잡 데이터는 값 자체가 아니라 데이터가 저장된 메모리 주소를 저장합니다. 즉 변수는 데이터를 가르키는 주소만 저장하고 여러 변수가 같은 메모리 주소를 가르킬 수 있습니다.
+
+여기서 obj1과 obj2는 같은 객체를 참조하고 있기 때문에 obj2의 값을 변경하면 obj1에도 영향을 줍니다.
+
+```javascript
+let obj1 = { name: 'Alice', age: 25 };
+let obj2 = obj1; // obj2는 obj1을 참조
+
+obj2.age = 30; // obj2의 값을 변경하면 obj1에도 영향을 미침
+
+console.log(obj1.age); // 30
+```
+## 값 복사와 레퍼런스 복사의 차이
+
+한번 정리해보자면
+
+**값 복사**
+- 원시 데이터는 변수에 할당될 때 그 값이 할당됩니다
+- 복사된 변수는 독립적으로 하나의 값을 변경해도 다른 값에 영향을 미치지 않습니다.
+
+**레퍼런스 복사**
+- 객체나 배열은 변수에 할당될 때 그 값을 참조하는 메모리 주소가 복사됩니다.
+- 같은 데이터를 참조하는 여러 변수에서 변경 사항이 공유됩니다.
+
+자바스크립트가 복잡 데이터 타입에 대해서 레퍼런스 복사를 이용하는 이유는 메모리 효율성과 최적화 때문입니다.
+원시 데이터와 달리 객체나 배열은 데이터가 중첩될 경우 구조가 매우 복잡해질 수 있어 메모리 주소 복사를 통해 효율성을 높입니다.
+
+### 얕은 복사와 깊은 복사
+
+그러면 객체나 배열을 다룰때 불필요한 데이터 변경을 피하기 위한 방법이 있습니다.
+
+#### 얕은 복사
+
+( ... ) 스프레드 연산자를 사용해 얕은 복사를 수행할 수 있으며 객체나 배열의 최상위 속성만을 복사하고
+내부에 중첩된 객체나 배열은 원본 데이터를 참조합니다.
+```javascript
+const original = { a: 1, b: { c: 2 } };
+const shallowCopy = { ...original };
+
+shallowCopy.a = 10; // 최상위 값 변경 (독립적)
+shallowCopy.b.c = 20; // 중첩된 객체 값 변경 (원본 영향)
+
+console.log(original); // { a: 1, b: { c: 20 } }
+console.log(shallowCopy); // { a: 10, b: { c: 20 } }
+```
+
+아래의 코드를 보면 최상위 레벨의 속성만 복사해 깊은 복사처럼 보일 뿐 여전히 앝은 복사입니다.
+
+```javascript
+let original = { a: 1, b: 2 };
+let copy = { ...original };
+
+copy.a = 10;
+
+console.log(original.a); // 1 (독립적)
+console.log(copy.a); // 10
+```
+```javascript
+const original = { a: 1, b: { c: 2 } };
+const copy = { ...original };
+
+// copy의 중첩된 객체를 수정
+copy.b.c = 10;
+
+const object = { a: 1, b: { c: 10 } }; // 비교할 다른 값 생성
+
+console.log(original); // 10 { a: 1, b: { c: 2 } } (원본도 변경됨)
+console.log(copy.b === original.b); // true (중첩 객체는 같은 참조)
+
+console.log(object.b === original.b); // false original과 동일해 보이지만 다른 값이다.
+```
+
+
+#### 깊은 복사
+
+모든 수준의 데이터를 복사해 원본과 완전히 독립적인 새로운 데이터를 생성합니다.
+따라서 원본 데이터를 변경해도 복사된 데이터는 영향을 받지 않습니다.
+
+깊은 복사는 JSON.parse()와 JSON.stringify()를 사용해 수행하거나 lodash의 cloneDeep() 같은 라이브러리를 사용해 수행할 수 있습니다.
+> JSON.parse()와 JSON.stringify() RegExp이나 Date같은 특수 객체나 undefined, 함수, Symbol, 순환 참조의 경우는 복사되지 않습니다.
+
+```javascript
+const original = { a: 1, b: { c: 2 } };
+const deepCopy = JSON.parse(JSON.stringify(original));
+
+deepCopy.a = 10; // 최상위 값 변경
+deepCopy.b.c = 20; // 중첩된 객체 값 변경
+
+console.log(original); // { a: 1, b: { c: 2 } }
+console.log(deepCopy); // { a: 10, b: { c: 20 } }
+```
+
+## 마무리
+
+사실 이 책을 처음 읽은 것은 2년 전이었습니다. 오늘 다시 읽으면서 그 땐 이해하지 못 했던 부분들을 많이 이해할 수 있었고
+그동안 개발을 하며 느낌적으로 알고 있던 것들을 확실히 정리하고 넘어갈 수 있어 뜻깊은 시간이 되었습니다.
+
+
앞으로도 이런 개념적인 부분을 공부하는 시간을 주기적으로 가져야겠다고 생각한 하루였습니다.
\ No newline at end of file
diff --git a/src/content/posts/javaScript/What-is-a-closure.md b/src/content/posts/javaScript/What-is-a-closure.md
index c86b7af..48b3e7d 100644
--- a/src/content/posts/javaScript/What-is-a-closure.md
+++ b/src/content/posts/javaScript/What-is-a-closure.md
@@ -1,230 +1,230 @@
----
-title: 클로저란 무엇인가?
-tags: [javaScript]
-date: "2024.08.31"
----
-오늘은 you don`t know javascript를 읽고 클로저라는 개념에 대해 정리해 보도록 하겠습니다.
-
-## 클로저란?
-클로저는 자바스크립트에서 함수와 그 함수가 선언된 렉시컬 환경을 같이 기억하는 기능을 말합니다.
-간단하게 말해서 함수 내부에서 함수 외부에 있는 변수에 접근할 수 있는 상황을 의미하며 외부 함수가
-실행을 마쳤음에도 내부 함수가 그 변수를 기억하는 상황입니다.
-
-클로저를 이해하기 위해선 우선 렉시컬 환경이 무엇인지 이해해야 합니다.
-
-## 렉시컬 환경 이해하기
-렉시컬 환경은 스코프와 변수 접근 규칙을 관리하는 메커니즘으로 **사전적 의미로는 코드가 작성된 위치를 의미합니다.**
-
-예를 들어 아래와 같은 코드가 있을 때 `outer` 함수는 전역에 선언 되었으니 전역 렉시컬 환경에 등록되고
-`outerVar`와 `inner` 함수는 `outer` 함수의 환경 레코드에 저장됩니다.
-마찬가지로 `innerVar`는 `inner` 함수의 환경 레코드에 저장되고 `console.log(outerVar);`는 outer 함수의 렉시컬 환경을 가르킵니다.
-`inner`함수가 실행되면 `outerVar`를 찾기 위해 자신의 환경 **레코드 -> 외부 참조 -> outer 환경에서 발견** 순으로 탐색합니다.
-```javascript
-const outerouterVar = "가장 외부 변수"; // 전역 스코프
-
-function outer() {
- const outerVar = "외부 변수"; // outer 함수 스코프
-
- function inner() {
- const innerVar = "내부 변수"; // inner 함수 스코프
- console.log(outerVar); // outer의 변수 접근
- console.log(outerouterVar); // 전역 변수 접근
- }
-
- inner();
-}
-
-outer();
-```
-
-렉시컬 환경의 특징으로 함수가 선언된 위치에 따라 스코프가 결정된다는 점인데 아래의 코드를 한번 봐주세요
-```javascript
-let x = "global";
-
-function foo() {
- console.log(x); // global 출력
-}
-
-function bar() {
- let x = "local";
- foo(); // ? 출력
-}
-
-bar();
-```
-블록 스코프에 대해 알고 있다면 쉽게 정답을 맞출 수 있을텐데 당연히 `global`이 출력됩니다.
-블록 스코프는 렉시컬 환경의 개념을 기반으로 동작하기 때문입니다.
-
-### 정리하자면
-- 함수는 자신이 선언된 환경의 모든 스코프를 기억한다.
-- 스코프 체인을 통해 하위 -> 상위 -> 전역으로 변수를 탐색한다.
-
-## 클로저의 필수 조건과 동작 원리
-다시 클로저로 돌아와 클로저 함수가 가져야하는 필수 조건에 대해 알아보겠습니다.
-
-**1. 내부 함수가 외부 함수의 변수를 참조해야 합니다.**
-**2. 외부 함수가 내부 함수를 반환해야 합니다.**
-**3. 외부 함수가 종료된 후에도 내부 함수가 살아있어야 합니다.**
-**4. 렉시컬 환경을 기억해야 합니다.**
-
-이 5개의 필수 조건을 기억하고 다음 예시를 한번 살펴보겠습니다.
-```javascript
-function outer() {
- let counter = 0; // 외부 변수
-
- return function inner() {
- counter++; // 외부 변수를 참조
- console.log(`Counter: ${counter}`);
- };
-}
-
-const closure = outer(); // outer 실행 후, inner 함수 반환
-closure(); // Counter: 1
-closure(); // Counter: 2
-closure(); // Counter: 3
-```
-**outer() 함수 호출**
-- `outer`실행 컨텍스트가 생성됩니다.
-- `counter` 변수가 0으로 초기화됩니다
-- `inner`함수가 반환되고 `closure` 변수에 `inner`함수가 할당됩니다.
-
-**closure() 함수 호출 (첫 번째)**
-- `inner`실행 컨텍스트가 생성됩니다.
-- `counter = 1`이 됩니다.
-- `inner` 실행 컨텍스트 제거되지면 `counter`는 메모리에 남아있습니다.
-
-**closure() 함수 호출 (두 번째)**
-- `inner`실행 컨텍스트가 생성됩니다.
-- `counter = 2`가 됩니다.
-- `inner` 실행 컨텍스트 제거되지면 `counter`는 메모리에 남아있습니다.
-
-**closure() 함수 호출 (세 번째)**
-- `inner`실행 컨텍스트가 생성됩니다.
-- `counter = 3`가 됩니다.
-- `inner` 실행 컨텍스트 제거되지면 `counter`는 메모리에 남아있습니다.
-
-
-
-또 다른 예시를 들어보겠습니다. 아래의 코드를 한번 살펴보면
-```javascript
-function outer() {
- let counter = 0; // 외부 변수 초기화
-
- function inner() {
- counter++; // 외부 변수를 증가
- console.log(`Counter: ${counter}`);
- }
-
- inner(); // 내부 함수 실행
-}
-
-// outer만 호출
-outer(); // 첫 번째 호출
-outer(); // 두 번째 호출
-outer(); // 세 번째 호출
-```
-**첫 번째 outer() 호출**
-- `outer()` 함수가 실행되면서 `counter`가 0으로 초기화됩니다.
-- 내부 함수 `inner()`가 호출되어 `counter`가 1로 증가합니다.
-- `outer()` 실행이 끝나면서 `counter` 변수와 실행 컨텍스트가 메모리에서 제거됩니다.
-
-**두 번째 outer() 호출**
-- `outer()` 함수가 실행되면서 `counter`가 0으로 초기화됩니다.
-- 내부 함수 `inner()`가 호출되어 `counter`가 1로 증가합니다.
-- `outer()` 실행이 끝나면서 `counter` 변수와 실행 컨텍스트가 메모리에서 제거됩니다.
-
-**세 번째 outer() 호출**
-- 위와 동일한 과정이 반복됩니다.
-
-꼭 내부에서 외부의 변수를 참조했다고 클로저 함수가 아닌 경우를 보여드렸습니다.
-
-## React에서 클로저의 활용 예시
-클로저 개념에 대해서 알아보았는데 사실 가장 중요한건 실제 활용 방법이라고 생각합니다.
-
-### useState
-`handleClick` 함수는 `setCount`와 `count`를 렉시컬 환경에서 기억합니다.
-```javascript
-import { useState } from 'react';
-
-function Counter() {
- const [count, setCount] = useState(0);
-
- const handleClick = () => {
- setCount(prev => prev + 1); // 이전전 값을 기억해 + 1
- };
-
- return ;
-}
-```
-
-### useEffect
-의존성 배열 없이 클로저로 변수를 저장합니다.
-```javascript
-function Timer() {
- const [seconds, setSeconds] = useState(0);
-
- useEffect(() => {
- const interval = setInterval(() => {
- setSeconds(prev => prev + 1)
- }, 1000);
-
- return () => clearInterval(interval);
- }, []);
-
- return {seconds}초
;
-}
-```
-
-### 커스텀훅
-`count`, `increment`, `decrement`를 반환해 값을 기억합니다.
-
-```javascript
-function useCounter(initialValue) {
- const [count, setCount] = useState(initialValue);
-
- const increment = () => setCount(prevCount => prevCount + 1);
- const decrement = () => setCount(prevCount => prevCount - 1);
-
- return { count, increment, decrement }; // 함수를 반환
-}
-
-// 사용 예시
-function App() {
- const { count, increment, decrement } = useCounter(0);
- return (
-
-
- {count}
-
-
- );
-}
-```
-
-### 고차 컴포넌트(HOC)
-고차 컴포넌트에서도 클로저가 활용됩니다.
-```javascript
-function withLogger(WrappedComponent) {
- return function EnhancedComponent(props) {
- useEffect(() => {
- console.log("컴포넌트가 렌더링됨!");
- }, []);
-
- return ;
- };
-}
-
-// 사용 예시
-const EnhancedButton = withLogger(Button);
-```
-
-이런 예시를 살펴보면 상태 관리, 이벤트 핸들러, 비동기 작업 등 다양한 곳에서
-클로저 함수를 잘 활용하고 있었음을 알 수 있습니다.
-
-
-## 마치며
-you don`t know javascript를 읽으면서 가장 이해하기 힘들었던 부분이였습니다.
-클로저는 JavaScript와 React에서 **상태 관리**, **로직 재사용**, **데이터 은닉**을 가능하게 하는 핵심 개념입니다.
-이 글이 클로저를 이해하는 데 도움이 되었기를 바랍니다.
-
+---
+title: 클로저란 무엇인가?
+tags: [javaScript]
+date: "2024.08.31"
+---
+오늘은 you don`t know javascript를 읽고 클로저라는 개념에 대해 정리해 보도록 하겠습니다.
+
+## 클로저란?
+클로저는 자바스크립트에서 함수와 그 함수가 선언된 렉시컬 환경을 같이 기억하는 기능을 말합니다.
+간단하게 말해서 함수 내부에서 함수 외부에 있는 변수에 접근할 수 있는 상황을 의미하며 외부 함수가
+실행을 마쳤음에도 내부 함수가 그 변수를 기억하는 상황입니다.
+
+클로저를 이해하기 위해선 우선 렉시컬 환경이 무엇인지 이해해야 합니다.
+
+## 렉시컬 환경 이해하기
+렉시컬 환경은 스코프와 변수 접근 규칙을 관리하는 메커니즘으로 **사전적 의미로는 코드가 작성된 위치를 의미합니다.**
+
+예를 들어 아래와 같은 코드가 있을 때 `outer` 함수는 전역에 선언 되었으니 전역 렉시컬 환경에 등록되고
+`outerVar`와 `inner` 함수는 `outer` 함수의 환경 레코드에 저장됩니다.
+마찬가지로 `innerVar`는 `inner` 함수의 환경 레코드에 저장되고 `console.log(outerVar);`는 outer 함수의 렉시컬 환경을 가르킵니다.
+`inner`함수가 실행되면 `outerVar`를 찾기 위해 자신의 환경 **레코드 -> 외부 참조 -> outer 환경에서 발견** 순으로 탐색합니다.
+```javascript
+const outerouterVar = "가장 외부 변수"; // 전역 스코프
+
+function outer() {
+ const outerVar = "외부 변수"; // outer 함수 스코프
+
+ function inner() {
+ const innerVar = "내부 변수"; // inner 함수 스코프
+ console.log(outerVar); // outer의 변수 접근
+ console.log(outerouterVar); // 전역 변수 접근
+ }
+
+ inner();
+}
+
+outer();
+```
+
+렉시컬 환경의 특징으로 함수가 선언된 위치에 따라 스코프가 결정된다는 점인데 아래의 코드를 한번 봐주세요
+```javascript
+let x = "global";
+
+function foo() {
+ console.log(x); // global 출력
+}
+
+function bar() {
+ let x = "local";
+ foo(); // ? 출력
+}
+
+bar();
+```
+블록 스코프에 대해 알고 있다면 쉽게 정답을 맞출 수 있을텐데 당연히 `global`이 출력됩니다.
+블록 스코프는 렉시컬 환경의 개념을 기반으로 동작하기 때문입니다.
+
+### 정리하자면
+- 함수는 자신이 선언된 환경의 모든 스코프를 기억한다.
+- 스코프 체인을 통해 하위 -> 상위 -> 전역으로 변수를 탐색한다.
+
+## 클로저의 필수 조건과 동작 원리
+다시 클로저로 돌아와 클로저 함수가 가져야하는 필수 조건에 대해 알아보겠습니다.
+
+**1. 내부 함수가 외부 함수의 변수를 참조해야 합니다.**
+**2. 외부 함수가 내부 함수를 반환해야 합니다.**
+**3. 외부 함수가 종료된 후에도 내부 함수가 살아있어야 합니다.**
+**4. 렉시컬 환경을 기억해야 합니다.**
+
+이 5개의 필수 조건을 기억하고 다음 예시를 한번 살펴보겠습니다.
+```javascript
+function outer() {
+ let counter = 0; // 외부 변수
+
+ return function inner() {
+ counter++; // 외부 변수를 참조
+ console.log(`Counter: ${counter}`);
+ };
+}
+
+const closure = outer(); // outer 실행 후, inner 함수 반환
+closure(); // Counter: 1
+closure(); // Counter: 2
+closure(); // Counter: 3
+```
+**outer() 함수 호출**
+- `outer`실행 컨텍스트가 생성됩니다.
+- `counter` 변수가 0으로 초기화됩니다
+- `inner`함수가 반환되고 `closure` 변수에 `inner`함수가 할당됩니다.
+
+**closure() 함수 호출 (첫 번째)**
+- `inner`실행 컨텍스트가 생성됩니다.
+- `counter = 1`이 됩니다.
+- `inner` 실행 컨텍스트 제거되지면 `counter`는 메모리에 남아있습니다.
+
+**closure() 함수 호출 (두 번째)**
+- `inner`실행 컨텍스트가 생성됩니다.
+- `counter = 2`가 됩니다.
+- `inner` 실행 컨텍스트 제거되지면 `counter`는 메모리에 남아있습니다.
+
+**closure() 함수 호출 (세 번째)**
+- `inner`실행 컨텍스트가 생성됩니다.
+- `counter = 3`가 됩니다.
+- `inner` 실행 컨텍스트 제거되지면 `counter`는 메모리에 남아있습니다.
+
+
+
+또 다른 예시를 들어보겠습니다. 아래의 코드를 한번 살펴보면
+```javascript
+function outer() {
+ let counter = 0; // 외부 변수 초기화
+
+ function inner() {
+ counter++; // 외부 변수를 증가
+ console.log(`Counter: ${counter}`);
+ }
+
+ inner(); // 내부 함수 실행
+}
+
+// outer만 호출
+outer(); // 첫 번째 호출
+outer(); // 두 번째 호출
+outer(); // 세 번째 호출
+```
+**첫 번째 outer() 호출**
+- `outer()` 함수가 실행되면서 `counter`가 0으로 초기화됩니다.
+- 내부 함수 `inner()`가 호출되어 `counter`가 1로 증가합니다.
+- `outer()` 실행이 끝나면서 `counter` 변수와 실행 컨텍스트가 메모리에서 제거됩니다.
+
+**두 번째 outer() 호출**
+- `outer()` 함수가 실행되면서 `counter`가 0으로 초기화됩니다.
+- 내부 함수 `inner()`가 호출되어 `counter`가 1로 증가합니다.
+- `outer()` 실행이 끝나면서 `counter` 변수와 실행 컨텍스트가 메모리에서 제거됩니다.
+
+**세 번째 outer() 호출**
+- 위와 동일한 과정이 반복됩니다.
+
+꼭 내부에서 외부의 변수를 참조했다고 클로저 함수가 아닌 경우를 보여드렸습니다.
+
+## React에서 클로저의 활용 예시
+클로저 개념에 대해서 알아보았는데 사실 가장 중요한건 실제 활용 방법이라고 생각합니다.
+
+### useState
+`handleClick` 함수는 `setCount`와 `count`를 렉시컬 환경에서 기억합니다.
+```javascript
+import { useState } from 'react';
+
+function Counter() {
+ const [count, setCount] = useState(0);
+
+ const handleClick = () => {
+ setCount(prev => prev + 1); // 이전전 값을 기억해 + 1
+ };
+
+ return ;
+}
+```
+
+### useEffect
+의존성 배열 없이 클로저로 변수를 저장합니다.
+```javascript
+function Timer() {
+ const [seconds, setSeconds] = useState(0);
+
+ useEffect(() => {
+ const interval = setInterval(() => {
+ setSeconds(prev => prev + 1)
+ }, 1000);
+
+ return () => clearInterval(interval);
+ }, []);
+
+ return {seconds}초
;
+}
+```
+
+### 커스텀훅
+`count`, `increment`, `decrement`를 반환해 값을 기억합니다.
+
+```javascript
+function useCounter(initialValue) {
+ const [count, setCount] = useState(initialValue);
+
+ const increment = () => setCount(prevCount => prevCount + 1);
+ const decrement = () => setCount(prevCount => prevCount - 1);
+
+ return { count, increment, decrement }; // 함수를 반환
+}
+
+// 사용 예시
+function App() {
+ const { count, increment, decrement } = useCounter(0);
+ return (
+
+
+ {count}
+
+
+ );
+}
+```
+
+### 고차 컴포넌트(HOC)
+고차 컴포넌트에서도 클로저가 활용됩니다.
+```javascript
+function withLogger(WrappedComponent) {
+ return function EnhancedComponent(props) {
+ useEffect(() => {
+ console.log("컴포넌트가 렌더링됨!");
+ }, []);
+
+ return ;
+ };
+}
+
+// 사용 예시
+const EnhancedButton = withLogger(Button);
+```
+
+이런 예시를 살펴보면 상태 관리, 이벤트 핸들러, 비동기 작업 등 다양한 곳에서
+클로저 함수를 잘 활용하고 있었음을 알 수 있습니다.
+
+
+## 마치며
+you don`t know javascript를 읽으면서 가장 이해하기 힘들었던 부분이였습니다.
+클로저는 JavaScript와 React에서 **상태 관리**, **로직 재사용**, **데이터 은닉**을 가능하게 하는 핵심 개념입니다.
+이 글이 클로저를 이해하는 데 도움이 되었기를 바랍니다.
+
[참고 자료](https://poiemaweb.com/js-closure)
\ No newline at end of file
diff --git a/src/content/posts/javaScript/Why-javascript-supports-async.md b/src/content/posts/javaScript/Why-javascript-supports-async.md
index ea45b2f..857c955 100644
--- a/src/content/posts/javaScript/Why-javascript-supports-async.md
+++ b/src/content/posts/javaScript/Why-javascript-supports-async.md
@@ -1,70 +1,70 @@
----
-title: 자바스크립트는 싱글 스레드인데 비동기 처리가 가능한 이유
-tags: [javaScript]
-date: "2024.10.26"
----
-문뜩 자바스크립트는 싱글 스레드 언어인데 웹 및 node.js 환경에서 비동기로 동작할 수 있을까?
-
-사실 비동기로 동작할 수 있는 이유는 웹 및 node.js 환경은 싱글 스레드가 아니기 때문에 가능하다는 걸 알지만
-어떤 원리로 동작하는지는 모르기에 한번 찾아보았습니다.
-
-## 자바스크립트의 동작 방식
-자바스크립트의 동작 구조의 핵심 요소는 `Call Stack`, `Heap`, `Event Loop`로 이루어져 있습니다.
-
-### 호출 스택 (Call Stack)
-- 함수의 실행 순서를 기록하는 구조의 스택입니다.
-- 함수가 호출되면 스택에 쌓이고, 실행이 끝나면 제거됩니다.
-
-### 힙 (Heap)
-- 객체, 변수 등 메모리 할당이 일어나는 영역입니다.
-- 메모리 관리(가비지 컬렉션)는 엔진이 자동으로 처리합니다.
-
-### 이벤트 루프 (Event Loop)
-- 호출 스택과 태스크 큐를 지속적으로 감시하며, "호출 스택이 비어 있을 때" 큐의 콜백을 실행시킵니다.
-
-## 비동기 처리 메커니즘
-자바스크립트는 분명 싱글 스레드 언어지만 브라우저는 **Web APIs**를 Node.js는 **libuv** 라이브러리를 사용해
-비동기 작업을 처리합니다.
-
-우선 예제를 보며 설명하도록 하겠습니다.
-```js
-console.log("Start");
-setTimeout(() => console.log("Timeout"), 0);
-fetch("https://api.example.com").then(() => console.log("Fetch 완료"));
-console.log("End");
-```
-
-**실행순서**
-- console.log("Start") → 호출 스택에 올라가 즉시 실행
-- setTimeout → 호출 스택에 올라간 후 Web API로 이동 → 타이머가 Web API 영역에서 카운트
-- fetch → 호출 스택에 올라간 후 Web API로 이동 → 네트워크 요청이 Web API 영역에서 처리
-- console.log("End") → 즉시 실행
-- 호출 스택이 비면, 이벤트 루프가 **태스크 큐(마이크로태스크/매크로태스크)**를 확인후 마이크로태스크를 우선 출력
- - fetch의 콜백은 마이크로태스크 큐에, setTimeout은 매크로태스크 큐에 저장됩니다
-> 매크로태스크 : setTimeout, setInterval, DOM 이벤트, I/O 작업같은 비동기 작업
-> 마이크로태스크 : Promise, MutationObserver, process.nextTick 작업 같은 비동기 작업
-
-
-극단적으로 이런 코드가 있다고 했을때 과연 어떻게 실행될까요?
-```js
-useEffect(() => {
- const Timer = setTimeout(() => console.log("타이머"), 1000);
- for (let i = 0; i < 50000; i++) {
- console.log("카운트1");
- }
- for (let i = 0; i < 50000; i++) {
- console.log("카운트2");
- }
- return () => {
- clearTimeout(Timer);
- };
-}, []);
-```
-
-정답은 1초가 지나도 호출 스택에 작업이 남아있기 때문에 `console.log("카운트1")` `console.log("카운트2")`가
-모두 출력된 후 `console.log("타이머")`가 출력됩니다.
-
-## 마치며
-자바스크립트는 싱글 스레드로 동작하지만 Web API와 libuv를 활용하여 비동기 작업을 처리할 수 있습니다.
-
-오늘 자바스크립트의 동작 방식에 대해서 알아보았는데 앞으로는 비동기 코드의 실행 흐름을 고려하면서 작성해야겠다고 생각하게 되었습니다.
+---
+title: 자바스크립트는 싱글 스레드인데 비동기 처리가 가능한 이유
+tags: [javaScript]
+date: "2024.10.26"
+---
+문뜩 자바스크립트는 싱글 스레드 언어인데 웹 및 node.js 환경에서 비동기로 동작할 수 있을까?
+
+사실 비동기로 동작할 수 있는 이유는 웹 및 node.js 환경은 싱글 스레드가 아니기 때문에 가능하다는 걸 알지만
+어떤 원리로 동작하는지는 모르기에 한번 찾아보았습니다.
+
+## 자바스크립트의 동작 방식
+자바스크립트의 동작 구조의 핵심 요소는 `Call Stack`, `Heap`, `Event Loop`로 이루어져 있습니다.
+
+### 호출 스택 (Call Stack)
+- 함수의 실행 순서를 기록하는 구조의 스택입니다.
+- 함수가 호출되면 스택에 쌓이고, 실행이 끝나면 제거됩니다.
+
+### 힙 (Heap)
+- 객체, 변수 등 메모리 할당이 일어나는 영역입니다.
+- 메모리 관리(가비지 컬렉션)는 엔진이 자동으로 처리합니다.
+
+### 이벤트 루프 (Event Loop)
+- 호출 스택과 태스크 큐를 지속적으로 감시하며, "호출 스택이 비어 있을 때" 큐의 콜백을 실행시킵니다.
+
+## 비동기 처리 메커니즘
+자바스크립트는 분명 싱글 스레드 언어지만 브라우저는 **Web APIs**를 Node.js는 **libuv** 라이브러리를 사용해
+비동기 작업을 처리합니다.
+
+우선 예제를 보며 설명하도록 하겠습니다.
+```js
+console.log("Start");
+setTimeout(() => console.log("Timeout"), 0);
+fetch("https://api.example.com").then(() => console.log("Fetch 완료"));
+console.log("End");
+```
+
+**실행순서**
+- console.log("Start") → 호출 스택에 올라가 즉시 실행
+- setTimeout → 호출 스택에 올라간 후 Web API로 이동 → 타이머가 Web API 영역에서 카운트
+- fetch → 호출 스택에 올라간 후 Web API로 이동 → 네트워크 요청이 Web API 영역에서 처리
+- console.log("End") → 즉시 실행
+- 호출 스택이 비면, 이벤트 루프가 **태스크 큐(마이크로태스크/매크로태스크)**를 확인후 마이크로태스크를 우선 출력
+ - fetch의 콜백은 마이크로태스크 큐에, setTimeout은 매크로태스크 큐에 저장됩니다
+> 매크로태스크 : setTimeout, setInterval, DOM 이벤트, I/O 작업같은 비동기 작업
+> 마이크로태스크 : Promise, MutationObserver, process.nextTick 작업 같은 비동기 작업
+
+
+극단적으로 이런 코드가 있다고 했을때 과연 어떻게 실행될까요?
+```js
+useEffect(() => {
+ const Timer = setTimeout(() => console.log("타이머"), 1000);
+ for (let i = 0; i < 50000; i++) {
+ console.log("카운트1");
+ }
+ for (let i = 0; i < 50000; i++) {
+ console.log("카운트2");
+ }
+ return () => {
+ clearTimeout(Timer);
+ };
+}, []);
+```
+
+정답은 1초가 지나도 호출 스택에 작업이 남아있기 때문에 `console.log("카운트1")` `console.log("카운트2")`가
+모두 출력된 후 `console.log("타이머")`가 출력됩니다.
+
+## 마치며
+자바스크립트는 싱글 스레드로 동작하지만 Web API와 libuv를 활용하여 비동기 작업을 처리할 수 있습니다.
+
+오늘 자바스크립트의 동작 방식에 대해서 알아보았는데 앞으로는 비동기 코드의 실행 흐름을 고려하면서 작성해야겠다고 생각하게 되었습니다.
diff --git a/src/content/posts/next/AppRouteNPageRoute.md b/src/content/posts/next/AppRouteNPageRoute.md
index 6df11f0..e3b86ed 100644
--- a/src/content/posts/next/AppRouteNPageRoute.md
+++ b/src/content/posts/next/AppRouteNPageRoute.md
@@ -1,82 +1,82 @@
----
-title: Next 앱 라우팅과 페이지 라우팅
-tags: [next]
-date: "2024.03.23"
----
-React를 사용 할 때는 react-router-dom 라이브러리를 사용 했지만 Next.js에는 라이브러리 없이 라우팅이 가능하다.
-
-## App 라우터와 Page 라우터
-
-Next.js 에서는 2개의 방법으로 라우팅이 가능하다. 하나는 기존에 있던 클라이언트 중심의 Pages Router이고 Next.js 13에 추가 된 서버 중심의 App Router가 있다.
-
-[https://nextjs.org/docs/pages/building-your-application/routing](https://nextjs.org/docs/pages/building-your-application/routing)
-
-Page Router는 pages 디렉터리 에 파일이 추가 된다면 경로를 사용할 수 있다.
-
-Pages 리렉토리에 index 파일을 생성하면 자동으로 라우팅 된다. pages/index.js → / pages/blog/index.js → /blog
-
-만약 / 가 아닌 first-post로 라우팅이 하고 싶다면 first-post.js 파일을 생성 하면 된다. pages/blog/first-post.js → /blog/first-post pages/dashboard/settings/username.js → /dashboard/settings/username
-
-동적 라우팅도 가능한데 []로 감싸주면 동적 라우팅이 가능하다. pages/posts/[id].js → posts/1 또는 posts/2 pages/[id]/index.js → posts/1 또는 posts/2
-
-[...segmentName] 대괄호 안에 세그먼트를 추가하면 다음과 같이 표시할 수 있다. pages/shop/[...slug].js → /shop/clothes 또는 /shop/clothes/tops 또는 /shop/clothes/tops/t-shirts
-
-[[...segmentName]]와 같이 이중 대괄호 안에 세그먼트를 추가하면 매개변수가 없는 경로 또한 일치하게 된다. pages/shop/[...slug].js → /shop 또는 /shop/clothes 또는 /shop/clothes/tops 또는 /shop/clothes/tops/t-shirts
-
-최상위의 _app.js 파일에서 공통 레이아웃을 기존 React와 같이 적용 가능
-
-Pages 폴더 바로 아래에 404.js를 만들어 주면 된다.
-
-##
-
-[https://nextjs.org/docs/app/building-your-application/routing](https://nextjs.org/docs/app/building-your-application/routing)
-
-Next.js 13 부터는 기반의 App Router를 지원한다.
-
-[https://nextjs.org/docs/app/building-your-application/rendering/server-components](https://nextjs.org/docs/app/building-your-application/rendering/server-components)
-
-## 라우팅 규칙
-
-
-
-
-- : 계층 구조를 시각화하기 위한 규칙이다. 예를
- 들어 상위 및 하위 구성 요소가 있는 구성 요소 트리, 폴더 구조 등이
- 있다.
-- : 새 루트(첫 번째)에서 시작하여 잎(마지막)에서
- 끝나는 트리의 일부다.
-- : 루트 레이아웃과 같은 트리 또는 하위 트리의 첫 번째
- 노드다.
-- : URL 경로의 마지막 세그먼트와 같이 자식이 없는 하위
- 트리의 노드다.
-
-
-
-- : 슬래시로 구분된 URL 경로의 일부다.
-- : 도메인 뒤에 오는 URL의 일부(세그먼트로 구성)
-예를 들어 아래와 같은 폴더 구조에서 /dashboard/analytics 경로에는 Page.js 파일이 없기 떄문에 유효하지 않은 경로가 된다.
-
-App라우팅의 동적 라우팅은 Page라우팅과 동일하게 적용된다.
-
-App라우팅에서 레이아웃은 기본적으로 서버 컴포넌트이다. 서버 컴포넌트는 13버전에서 추가된 개념인데 추후 서술하도록 하겠다. App 라우팅에서도 공통 레이아웃을 정의하는게 가능한데 아래의 사진과 같이 폴더에 layout 파일을 생성해 주면 /dashboard 와 /dashvoard/settings 는 공통된 레이아웃을 공유하게 된다.
-
-루트 레이아웃은 최상위 수준의 폴더에서 정의되고 모든 경로에 적용 되는 레이아웃이다.
-
-
-만약 최상위 레이아웃에서 html태그와 body태그를 넣지 않거나 하위 레이아웃에서 html태그나 body태그를 포함시킨다면 에러가 발생하니 주의 하도록 하자
-
-
-
-템플릿은 각 하위 레이아웃이나 페이지를 래핑해준다는 점에서 레아아웃과 유사하지만 라우트 이동 시 Layout는 기본적으로 리렌더링이 이루어 지지 않는다는 점이 다르다. 템플릿은 공통된 탬플릿을 사용하는 경우에도 라우트 이동시 DOM요소가 다시 생성되어 상태가 보존되지 않는다.
-
-## 참고 자료
-
-[https://velog.io/@2ast/React-%EC%84%9C%EB%B2%84-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8React-Server-Component%EC%97%90-%EB%8C%80%ED%95%9C-%EA%B3%A0%EC%B0%B0#%EC%84%9C%EB%A1%A0-%ED%8A%B8%EB%A0%8C%EB%94%94%ED%95%A8%EB%8F%84-%EA%B0%9C%EB%B0%9C%EC%9E%90%EC%97%90%EA%B2%8C-%EC%A4%91%EC%9A%94%ED%95%9C-%EB%AF%B8%EB%8D%95%EC%9D%B4%EB%8B%A4](https://velog.io/@2ast/React-%EC%84%9C%EB%B2%84-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8React-Server-Component%EC%97%90-%EB%8C%80%ED%95%9C-%EA%B3%A0%EC%B0%B0#%EC%84%9C%EB%A1%A0-%ED%8A%B8%EB%A0%8C%EB%94%94%ED%95%A8%EB%8F%84-%EA%B0%9C%EB%B0%9C%EC%9E%90%EC%97%90%EA%B2%8C-%EC%A4%91%EC%9A%94%ED%95%9C-%EB%AF%B8%EB%8D%95%EC%9D%B4%EB%8B%A4)
-
-[https://velog.io/@jjunyjjuny/nextjs-13.4.0%EB%B6%80%ED%84%B0-%EC%95%88%EC%A0%95%ED%99%94%EB%90%9C-App-Router.-Pages-Router%EC%99%80-%EB%B9%84%EA%B5%90](https://velog.io/@jjunyjjuny/nextjs-13.4.0%EB%B6%80%ED%84%B0-%EC%95%88%EC%A0%95%ED%99%94%EB%90%9C-App-Router.-Pages-Router%EC%99%80-%EB%B9%84%EA%B5%90)
-
-[https://nextjs.org/docs/app/building-your-application/rendering/server-components](https://nextjs.org/docs/app/building-your-application/rendering/server-components)
-
-[https://nextjs.org/docs/app/building-your-application/routing](https://nextjs.org/docs/app/building-your-application/routing)
-
-[https://nextjs.org/docs/pages/building-your-application/routing](https://nextjs.org/docs/pages/building-your-application/routing)
+---
+title: Next 앱 라우팅과 페이지 라우팅
+tags: [next]
+date: "2024.03.23"
+---
+React를 사용 할 때는 react-router-dom 라이브러리를 사용 했지만 Next.js에는 라이브러리 없이 라우팅이 가능하다.
+
+## App 라우터와 Page 라우터
+
+Next.js 에서는 2개의 방법으로 라우팅이 가능하다. 하나는 기존에 있던 클라이언트 중심의 Pages Router이고 Next.js 13에 추가 된 서버 중심의 App Router가 있다.
+
+[https://nextjs.org/docs/pages/building-your-application/routing](https://nextjs.org/docs/pages/building-your-application/routing)
+
+Page Router는 pages 디렉터리 에 파일이 추가 된다면 경로를 사용할 수 있다.
+
+Pages 리렉토리에 index 파일을 생성하면 자동으로 라우팅 된다. pages/index.js → / pages/blog/index.js → /blog
+
+만약 / 가 아닌 first-post로 라우팅이 하고 싶다면 first-post.js 파일을 생성 하면 된다. pages/blog/first-post.js → /blog/first-post pages/dashboard/settings/username.js → /dashboard/settings/username
+
+동적 라우팅도 가능한데 []로 감싸주면 동적 라우팅이 가능하다. pages/posts/[id].js → posts/1 또는 posts/2 pages/[id]/index.js → posts/1 또는 posts/2
+
+[...segmentName] 대괄호 안에 세그먼트를 추가하면 다음과 같이 표시할 수 있다. pages/shop/[...slug].js → /shop/clothes 또는 /shop/clothes/tops 또는 /shop/clothes/tops/t-shirts
+
+[[...segmentName]]와 같이 이중 대괄호 안에 세그먼트를 추가하면 매개변수가 없는 경로 또한 일치하게 된다. pages/shop/[...slug].js → /shop 또는 /shop/clothes 또는 /shop/clothes/tops 또는 /shop/clothes/tops/t-shirts
+
+최상위의 _app.js 파일에서 공통 레이아웃을 기존 React와 같이 적용 가능
+
+Pages 폴더 바로 아래에 404.js를 만들어 주면 된다.
+
+##
+
+[https://nextjs.org/docs/app/building-your-application/routing](https://nextjs.org/docs/app/building-your-application/routing)
+
+Next.js 13 부터는 기반의 App Router를 지원한다.
+
+[https://nextjs.org/docs/app/building-your-application/rendering/server-components](https://nextjs.org/docs/app/building-your-application/rendering/server-components)
+
+## 라우팅 규칙
+
+
+
+
+- : 계층 구조를 시각화하기 위한 규칙이다. 예를
+ 들어 상위 및 하위 구성 요소가 있는 구성 요소 트리, 폴더 구조 등이
+ 있다.
+- : 새 루트(첫 번째)에서 시작하여 잎(마지막)에서
+ 끝나는 트리의 일부다.
+- : 루트 레이아웃과 같은 트리 또는 하위 트리의 첫 번째
+ 노드다.
+- : URL 경로의 마지막 세그먼트와 같이 자식이 없는 하위
+ 트리의 노드다.
+
+
+
+- : 슬래시로 구분된 URL 경로의 일부다.
+- : 도메인 뒤에 오는 URL의 일부(세그먼트로 구성)
+예를 들어 아래와 같은 폴더 구조에서 /dashboard/analytics 경로에는 Page.js 파일이 없기 떄문에 유효하지 않은 경로가 된다.
+
+App라우팅의 동적 라우팅은 Page라우팅과 동일하게 적용된다.
+
+App라우팅에서 레이아웃은 기본적으로 서버 컴포넌트이다. 서버 컴포넌트는 13버전에서 추가된 개념인데 추후 서술하도록 하겠다. App 라우팅에서도 공통 레이아웃을 정의하는게 가능한데 아래의 사진과 같이 폴더에 layout 파일을 생성해 주면 /dashboard 와 /dashvoard/settings 는 공통된 레이아웃을 공유하게 된다.
+
+루트 레이아웃은 최상위 수준의 폴더에서 정의되고 모든 경로에 적용 되는 레이아웃이다.
+
+
+만약 최상위 레이아웃에서 html태그와 body태그를 넣지 않거나 하위 레이아웃에서 html태그나 body태그를 포함시킨다면 에러가 발생하니 주의 하도록 하자
+
+
+
+템플릿은 각 하위 레이아웃이나 페이지를 래핑해준다는 점에서 레아아웃과 유사하지만 라우트 이동 시 Layout는 기본적으로 리렌더링이 이루어 지지 않는다는 점이 다르다. 템플릿은 공통된 탬플릿을 사용하는 경우에도 라우트 이동시 DOM요소가 다시 생성되어 상태가 보존되지 않는다.
+
+## 참고 자료
+
+[https://velog.io/@2ast/React-%EC%84%9C%EB%B2%84-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8React-Server-Component%EC%97%90-%EB%8C%80%ED%95%9C-%EA%B3%A0%EC%B0%B0#%EC%84%9C%EB%A1%A0-%ED%8A%B8%EB%A0%8C%EB%94%94%ED%95%A8%EB%8F%84-%EA%B0%9C%EB%B0%9C%EC%9E%90%EC%97%90%EA%B2%8C-%EC%A4%91%EC%9A%94%ED%95%9C-%EB%AF%B8%EB%8D%95%EC%9D%B4%EB%8B%A4](https://velog.io/@2ast/React-%EC%84%9C%EB%B2%84-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8React-Server-Component%EC%97%90-%EB%8C%80%ED%95%9C-%EA%B3%A0%EC%B0%B0#%EC%84%9C%EB%A1%A0-%ED%8A%B8%EB%A0%8C%EB%94%94%ED%95%A8%EB%8F%84-%EA%B0%9C%EB%B0%9C%EC%9E%90%EC%97%90%EA%B2%8C-%EC%A4%91%EC%9A%94%ED%95%9C-%EB%AF%B8%EB%8D%95%EC%9D%B4%EB%8B%A4)
+
+[https://velog.io/@jjunyjjuny/nextjs-13.4.0%EB%B6%80%ED%84%B0-%EC%95%88%EC%A0%95%ED%99%94%EB%90%9C-App-Router.-Pages-Router%EC%99%80-%EB%B9%84%EA%B5%90](https://velog.io/@jjunyjjuny/nextjs-13.4.0%EB%B6%80%ED%84%B0-%EC%95%88%EC%A0%95%ED%99%94%EB%90%9C-App-Router.-Pages-Router%EC%99%80-%EB%B9%84%EA%B5%90)
+
+[https://nextjs.org/docs/app/building-your-application/rendering/server-components](https://nextjs.org/docs/app/building-your-application/rendering/server-components)
+
+[https://nextjs.org/docs/app/building-your-application/routing](https://nextjs.org/docs/app/building-your-application/routing)
+
+[https://nextjs.org/docs/pages/building-your-application/routing](https://nextjs.org/docs/pages/building-your-application/routing)
diff --git a/src/content/posts/next/ImageTag.md b/src/content/posts/next/ImageTag.md
index 4b69b62..9e3d46c 100644
--- a/src/content/posts/next/ImageTag.md
+++ b/src/content/posts/next/ImageTag.md
@@ -1,40 +1,40 @@
----
-title: Next 이미지 최적화
-tags: [next]
-date: "2024.03.23"
----
-Next를 이용해 팀프로젝트를 진행하던 중 Next에서는 img태그 대신 Next에서 제공하는 Image컴포넌트를 사용하는걸 알게 되었다. Image컴포넌트가 제공하는 기능과 장점에 대해 알아보려한다.
-
-## Next/Image 컴포넌트의 기능
-
-Image 컴포넌트가 제공하는 기능은 다음과 같다.
-
-- 이미지 크기 최적화와 최신 이미지 포맷 지원
-- CLS방지
-- 이미지 블러 기능
-- 이미지 리사이징
-[https://nextjs.org/docs/app/building-your-application/optimizing/images](https://nextjs.org/docs/app/building-your-application/optimizing/images)
-
-이미지가 매우 많은 사이트에서 렌더링 초기에 모든 이미지를 다운받게 된다면. 렌더링이 매우 느려질 것 이다. 이때 딱 필요한 부분의 이미지만 렌더링 할 수 있다면. 적은 데이터만을 사용해 빠르게 화면을 렌더링 할 수 있는데 Next에선 이 기능을 제공해준다. img태그에서 loading="lazy" 속성 값을 추가하면 되는데 next의 Imgae 컴포넌트를 사용하면 자동으로 적용된다.
-
-Next에선 로컬 이미지의 경우 import한 이미지 파일을 기준으로 자동으로 width와 height가 지정되고 자동으로 blur 효과가 제공된다.
-
-하지만 원격 이미지일 경우 Next가 빌드 중에 파일에 접근 할 수 없으므로 width와 height를 지정해 주어야 하고 blurDataURL을 제공해 주어야 한다. blurDataUrl은 base64로 인코딩된 이미지여야 한다.
-
-placeholder= "blur"기능을 사용하면 이미지가 로드되기 전에 이미지의 높이만큼 영역을 표시해 이미지가 로드된 후 레이아웃이 변경되는 부분을 방지 할 수 있어 CLS를 많이 개선할 수 있다.
-
-또 next에선 이미지 캐싱 기능을 지원한다. 아래 CF-Cache-Status헤더가 MISS라면 캐시되어 있지 않은 상태이고 HIT상태라면 캐시되어 있는 상태라고 볼 수 있다.
-
-
-
-
-
-위의 사진과 같이 이미지가 캐시된 후에는 더 빠르게 응답한걸 볼 수 있다. 하지만 모든 이미지를 캐싱하는건 아닌데 최적화가 필요 없는 SVG와 같은 vector이미지나 GIF같이 복잡한 애니메이션 이미지의 경우는 최적화가 진행되지 않는다.
-
-jpg, png, webp, avif등등 여러 이미지 형식들이 있다. 폰트와 마찬가지로 형식에 따라 이미지의 용량이 달라지는데 webp와 avif의 경우 이미지 압축을 통해 다른 형식들에 비해 적은 용량을 가진다 특히 avif의 경우 동일한 품질 대비 최대 10배나 적은 용량을 가진다고 알려졌다. Next에선 이미지를 webp나 avif으로 변환 시켜줘 보다 빠르게 이미지를 로드 할 수 있다.
-
-[https://nextjs.org/docs/pages/api-reference/components/image](https://nextjs.org/docs/pages/api-reference/components/image)
-
-## 마치며
-
-Next에서는 여러 최적화를 자체적으로 지원하고 있어서 사용하기 편리하다는 점이 장점인 것 같다. 실제 서비스에 적용시킨 다면 아주 큰 효과를 볼 수 있을 것 같다.
+---
+title: Next 이미지 최적화
+tags: [next]
+date: "2024.03.23"
+---
+Next를 이용해 팀프로젝트를 진행하던 중 Next에서는 img태그 대신 Next에서 제공하는 Image컴포넌트를 사용하는걸 알게 되었다. Image컴포넌트가 제공하는 기능과 장점에 대해 알아보려한다.
+
+## Next/Image 컴포넌트의 기능
+
+Image 컴포넌트가 제공하는 기능은 다음과 같다.
+
+- 이미지 크기 최적화와 최신 이미지 포맷 지원
+- CLS방지
+- 이미지 블러 기능
+- 이미지 리사이징
+[https://nextjs.org/docs/app/building-your-application/optimizing/images](https://nextjs.org/docs/app/building-your-application/optimizing/images)
+
+이미지가 매우 많은 사이트에서 렌더링 초기에 모든 이미지를 다운받게 된다면. 렌더링이 매우 느려질 것 이다. 이때 딱 필요한 부분의 이미지만 렌더링 할 수 있다면. 적은 데이터만을 사용해 빠르게 화면을 렌더링 할 수 있는데 Next에선 이 기능을 제공해준다. img태그에서 loading="lazy" 속성 값을 추가하면 되는데 next의 Imgae 컴포넌트를 사용하면 자동으로 적용된다.
+
+Next에선 로컬 이미지의 경우 import한 이미지 파일을 기준으로 자동으로 width와 height가 지정되고 자동으로 blur 효과가 제공된다.
+
+하지만 원격 이미지일 경우 Next가 빌드 중에 파일에 접근 할 수 없으므로 width와 height를 지정해 주어야 하고 blurDataURL을 제공해 주어야 한다. blurDataUrl은 base64로 인코딩된 이미지여야 한다.
+
+placeholder= "blur"기능을 사용하면 이미지가 로드되기 전에 이미지의 높이만큼 영역을 표시해 이미지가 로드된 후 레이아웃이 변경되는 부분을 방지 할 수 있어 CLS를 많이 개선할 수 있다.
+
+또 next에선 이미지 캐싱 기능을 지원한다. 아래 CF-Cache-Status헤더가 MISS라면 캐시되어 있지 않은 상태이고 HIT상태라면 캐시되어 있는 상태라고 볼 수 있다.
+
+
+
+
+
+위의 사진과 같이 이미지가 캐시된 후에는 더 빠르게 응답한걸 볼 수 있다. 하지만 모든 이미지를 캐싱하는건 아닌데 최적화가 필요 없는 SVG와 같은 vector이미지나 GIF같이 복잡한 애니메이션 이미지의 경우는 최적화가 진행되지 않는다.
+
+jpg, png, webp, avif등등 여러 이미지 형식들이 있다. 폰트와 마찬가지로 형식에 따라 이미지의 용량이 달라지는데 webp와 avif의 경우 이미지 압축을 통해 다른 형식들에 비해 적은 용량을 가진다 특히 avif의 경우 동일한 품질 대비 최대 10배나 적은 용량을 가진다고 알려졌다. Next에선 이미지를 webp나 avif으로 변환 시켜줘 보다 빠르게 이미지를 로드 할 수 있다.
+
+[https://nextjs.org/docs/pages/api-reference/components/image](https://nextjs.org/docs/pages/api-reference/components/image)
+
+## 마치며
+
+Next에서는 여러 최적화를 자체적으로 지원하고 있어서 사용하기 편리하다는 점이 장점인 것 같다. 실제 서비스에 적용시킨 다면 아주 큰 효과를 볼 수 있을 것 같다.
diff --git a/src/content/posts/next/Migrating-nextjs-page-router-to-app-router.md b/src/content/posts/next/Migrating-nextjs-page-router-to-app-router.md
index 324ef8e..cec1217 100644
--- a/src/content/posts/next/Migrating-nextjs-page-router-to-app-router.md
+++ b/src/content/posts/next/Migrating-nextjs-page-router-to-app-router.md
@@ -1,68 +1,68 @@
----
-title: Next.js app router 마이그레이션 전환하기
-tags: [next]
-date: "2025.02.19"
----
-저번주에 Page Router 방식의 프로젝트를 App Router로 전환했는데요 마이그레이션을 진행하며 겪었던 부분과 App Router의 장단점을 서술해보려 합니다.
-
-App Router는 React 18을 지원하기 위해 도입된 방식으로 React 18에서 제공하는 서버 컴포넌트, 클라이언트 컴포넌트, Suspense 같은 여러 기능들을 사용할 수 있습니다.
-
-## App Router의 폴더구조
-App Router는 파일 시스템 기반 라우팅을 지원하며 app 폴더 내부에 `page` `layout`
-`error` `loading` `not-found`와 같은 파일들을 이용해 화면을 구성할 수 있습니다.
-
-### page
-각 폴더 내부에는 `page`파일이 있어야 라우팅이 가능합니다.
-
-### layout
-layout파일은 모든 하위 경로에 공통적인 UI를 제공합니다.
-
-이 정보에 대한 자세한 설명은 [공식문서](https://nextjs.org/docs/app/getting-started/layouts-and-pages)를 보시면 됩니다.
-```
-/app
- ├── components/ <------- 경로 생성 X
- | └── InputComponent.tsx
- ├── blog/ <------- /blog
- | ├── layout.tsx <------- 중첩 레이아웃
- | ├── page.tsx
- | └── [slug]/ <------- /blog/[slug]
- | └── page.tsx
- ├── layout.tsx <------- 공통 레이아웃
- └── page.tsx <------- 메인 페이지
-```
-
-## use client
-App Router는 기본적으로 서버컴포넌트를 지원하며 'use client'키워드를 사용해 클라이언트 컴포넌트임을 명시할 수 있습니다.
-
-서버 컴포넌트
-- 서버에서 직접 데이터 가져오기
-- 보안에 민감한 정보에 안전하게 접근
-- 렌더링에 필요한 라이브러리를 번들에 포함하지 않음으로써 JS 사이즈 줄이기
-
-클라이언트 컴포넌트
-- onClick, onChange와 같은 이벤트 리스너
-- useState, useReducer, useEffect와 같은 상태와 생명주기
-- 브라우저에서 사용할 수 있는 api
-- state, effect, brower api를 사용하는 커스텀 훅
-
-만약 서버컴포넌트에서 이벤트 리스너를 사용하거나 클라이언트 컴포넌트에서 데이터를 요청하게 되면 에러가 발생합니다.
-
-클라이언트에서 데이터를 가져오려면 이전처럼 `useEffect`를 이용해 데이터를 요청할 수 있습니다.
-
-## 좋았던 점
-### metadata
-루트 layout에서 메타데이터 API를 통해 SEO 설정을 쉽게 관리할 수 있어 편리했습니다.
-### 데이터 페칭
-컴포넌트 내에서 직접 async/await 데이터 요청을 보내 클라이언트로 불필요한 로직을 전송하지 않아도 되어 중요 데이터 은닉과 같은 부분이 좋았고 Suspense같은 기능을 이용해 콘텐츠 로딩과 에러 핸들링이 편리해졌습니다.
-### 편리한 레이아웃 관리
-프로젝트를 파일 단위로 관리해 공통의 `layout`이나 `loading`, `not-found`이용한 핸들링을 할 수 있게되어 여러 사람과 협업을 할 때 편리할 것 같다는 생각이 들었습니다.
-### 번들 사이즈
-서버 컴포넌트와 클라이언트 컴포넌트를 구분해 필요한 부분만 클라이언트에 보내 초기 로딩 속도를 줄일 수 있습니다.
-
-## 단점
-### 학습 곡선
-클라이언트 컴포넌트와 서버 컴포넌트의 장점과 단점을 구분하며 컴포넌트를 설계해야하는 부분과 클라이언트에서 호출할 함수와 서버에서 호출하는 함수를 구분하고 에러 핸들링 방식을 다르게 처리해야 하는 부분이 불편했습니다.
-
-기존에는 axios interceptors를 이용해 공통으로 데이터 요청에 대한 에러를 핸들링했다면 서버에서 사용하는 axios와 클라이언트에서 사용하는 axios를 다르게 설정해야 한다는 점이 아쉬웠습니다.
-
+---
+title: Next.js app router 마이그레이션 전환하기
+tags: [next]
+date: "2025.02.19"
+---
+저번주에 Page Router 방식의 프로젝트를 App Router로 전환했는데요 마이그레이션을 진행하며 겪었던 부분과 App Router의 장단점을 서술해보려 합니다.
+
+App Router는 React 18을 지원하기 위해 도입된 방식으로 React 18에서 제공하는 서버 컴포넌트, 클라이언트 컴포넌트, Suspense 같은 여러 기능들을 사용할 수 있습니다.
+
+## App Router의 폴더구조
+App Router는 파일 시스템 기반 라우팅을 지원하며 app 폴더 내부에 `page` `layout`
+`error` `loading` `not-found`와 같은 파일들을 이용해 화면을 구성할 수 있습니다.
+
+### page
+각 폴더 내부에는 `page`파일이 있어야 라우팅이 가능합니다.
+
+### layout
+layout파일은 모든 하위 경로에 공통적인 UI를 제공합니다.
+
+이 정보에 대한 자세한 설명은 [공식문서](https://nextjs.org/docs/app/getting-started/layouts-and-pages)를 보시면 됩니다.
+```
+/app
+ ├── components/ <------- 경로 생성 X
+ | └── InputComponent.tsx
+ ├── blog/ <------- /blog
+ | ├── layout.tsx <------- 중첩 레이아웃
+ | ├── page.tsx
+ | └── [slug]/ <------- /blog/[slug]
+ | └── page.tsx
+ ├── layout.tsx <------- 공통 레이아웃
+ └── page.tsx <------- 메인 페이지
+```
+
+## use client
+App Router는 기본적으로 서버컴포넌트를 지원하며 'use client'키워드를 사용해 클라이언트 컴포넌트임을 명시할 수 있습니다.
+
+서버 컴포넌트
+- 서버에서 직접 데이터 가져오기
+- 보안에 민감한 정보에 안전하게 접근
+- 렌더링에 필요한 라이브러리를 번들에 포함하지 않음으로써 JS 사이즈 줄이기
+
+클라이언트 컴포넌트
+- onClick, onChange와 같은 이벤트 리스너
+- useState, useReducer, useEffect와 같은 상태와 생명주기
+- 브라우저에서 사용할 수 있는 api
+- state, effect, brower api를 사용하는 커스텀 훅
+
+만약 서버컴포넌트에서 이벤트 리스너를 사용하거나 클라이언트 컴포넌트에서 데이터를 요청하게 되면 에러가 발생합니다.
+
+클라이언트에서 데이터를 가져오려면 이전처럼 `useEffect`를 이용해 데이터를 요청할 수 있습니다.
+
+## 좋았던 점
+### metadata
+루트 layout에서 메타데이터 API를 통해 SEO 설정을 쉽게 관리할 수 있어 편리했습니다.
+### 데이터 페칭
+컴포넌트 내에서 직접 async/await 데이터 요청을 보내 클라이언트로 불필요한 로직을 전송하지 않아도 되어 중요 데이터 은닉과 같은 부분이 좋았고 Suspense같은 기능을 이용해 콘텐츠 로딩과 에러 핸들링이 편리해졌습니다.
+### 편리한 레이아웃 관리
+프로젝트를 파일 단위로 관리해 공통의 `layout`이나 `loading`, `not-found`이용한 핸들링을 할 수 있게되어 여러 사람과 협업을 할 때 편리할 것 같다는 생각이 들었습니다.
+### 번들 사이즈
+서버 컴포넌트와 클라이언트 컴포넌트를 구분해 필요한 부분만 클라이언트에 보내 초기 로딩 속도를 줄일 수 있습니다.
+
+## 단점
+### 학습 곡선
+클라이언트 컴포넌트와 서버 컴포넌트의 장점과 단점을 구분하며 컴포넌트를 설계해야하는 부분과 클라이언트에서 호출할 함수와 서버에서 호출하는 함수를 구분하고 에러 핸들링 방식을 다르게 처리해야 하는 부분이 불편했습니다.
+
+기존에는 axios interceptors를 이용해 공통으로 데이터 요청에 대한 에러를 핸들링했다면 서버에서 사용하는 axios와 클라이언트에서 사용하는 axios를 다르게 설정해야 한다는 점이 아쉬웠습니다.
+
하지만 이런 부분은 학습을 통해 App Router에 대한 이해도가 높아지면 자연스럽게 해결될 것 이라고 생각합니다.
\ No newline at end of file
diff --git a/src/content/posts/next/Next-data-fetchting.md b/src/content/posts/next/Next-data-fetchting.md
index 53d02d1..2f59a3e 100644
--- a/src/content/posts/next/Next-data-fetchting.md
+++ b/src/content/posts/next/Next-data-fetchting.md
@@ -1,92 +1,92 @@
----
-title: next.js의 데이터 패칭
-tags: [next]
-date: "2024.08.03"
----
-next.js에서 데이터를 가져올 때 사용되는 함수들이 있습니다.
-`getStaticProps()` `getStaticPaths()` `getServerSideProps()`
-전부 데이터를 가져올 때 사용되는 함수지만 차이점이 있어서 이에 대한 정보를 정리해보려 합니다.
-
-## getStaticProps()
-`getStaticProps()`는 빌드 시점에서 데이터를 가져오고 페이지를 정적으로 생성할 때 사용됩니다.
-
-이 함수는 페이지가 빌드될 때 한 번만 호출되며 변경이 적은 콘텐츠를 렌더링할 때 사용됩니다.
-
-```javascript
-export async function getStaticProps() {
- const res = await fetch('https://api.github.com/repos/vercel/next.js')
- const repo = await res.json()
- return { props: { repo } }
-}
-
-export default function Page({ repo }) {
- return repo.stargazers_count
-}
-```
-
-## getStaticPaths()
-이 함수는 동적 경로를 가진 페이지에서 미리 빌드할 경로를 정의할 때 사용됩니다. `getStaticProps()`함수와 같이 사용됩니다.
-
-```javascript
-export async function getStaticPaths() {
- return {
- paths: [
- {
- params: {
- name: 'next.js',
- },
- },
- ],
- fallback: true,
- }
-}
-
-export async function getStaticProps() {
- const res = await fetch('https://api.github.com/repos/vercel/next.js')
- const repo = await res.json()
- return { props: { repo } }
-}
-
-export default function Page({ repo }) {
- return repo.stargazers_count
-}
-```
-fallback의 옵션으로는
-`false` : 빌드된 경로 외의 페이지는 404를 반환
-`true` : 빌드된 경로 외의 페이지를 요청 시, 빌드되지 않은 페이지는 서버에서 데이터를 가져와 렌더링 후 캐싱
-`blocking` : 경로를 요청할 때 빌드되지 않은 페이지는 서버에서 데이터를 가져오고, 준비가 되면 클라이언트에 제공
-가 있습니다.
-## getServerSideProps()
-`getServerSideProps()`는 요청시마다 데이터를 가져오고 서버에서 데이터를 가져와 렌더링 하기 때문에 SEO와 초기 페이지 로딩 속도에 유리합니다.
-```javascript
-export async function getServerSideProps() {
-
- const res = await fetch('https://api.github.com/repos/vercel/next.js')
- const repo = await res.json()
-
- return { props: { repo } } // Page에 Porps 전달
-}
-
-export default function Page({ repo }) {
- return (
-
- {repo.stargazers_count}
-
- )
-}
-```
-
-## 마치며
-
-| 함수 | 실행 시점 | 사용 용도 | 장점 | 단점 |
-|---------------------|----------------------|----------------------------------|-----------------------------|-----------------------------|
-| `getStaticProps()` | 빌드 시점 | 정적 생성 (SEO 최적화, 빠른 로딩) | 성능 향상, 캐싱 가능 | 빌드 후 데이터 변경 불가 |
-| `getStaticPaths()` | 빌드 시점 | 동적 경로에 대한 정적 생성 | 동적 경로 지원 | 새로운 경로는 빌드 후 추가해야 함 |
-| `getServerSideProps()` | 요청 시점 | 서버에서 데이터를 가져와야 할 때 | SEO 최적화, 실시간 데이터 반영 | 서버 요청마다 데이터 로딩, 느린 페이지 로딩 |
-
-
-Next.js로 프로젝트를 구성하다보니 React 와는 다른점이 많아 배워야 할 부분들이 참 많은 것 같습니다.
-
-
-
+---
+title: next.js의 데이터 패칭
+tags: [next]
+date: "2024.08.03"
+---
+next.js에서 데이터를 가져올 때 사용되는 함수들이 있습니다.
+`getStaticProps()` `getStaticPaths()` `getServerSideProps()`
+전부 데이터를 가져올 때 사용되는 함수지만 차이점이 있어서 이에 대한 정보를 정리해보려 합니다.
+
+## getStaticProps()
+`getStaticProps()`는 빌드 시점에서 데이터를 가져오고 페이지를 정적으로 생성할 때 사용됩니다.
+
+이 함수는 페이지가 빌드될 때 한 번만 호출되며 변경이 적은 콘텐츠를 렌더링할 때 사용됩니다.
+
+```javascript
+export async function getStaticProps() {
+ const res = await fetch('https://api.github.com/repos/vercel/next.js')
+ const repo = await res.json()
+ return { props: { repo } }
+}
+
+export default function Page({ repo }) {
+ return repo.stargazers_count
+}
+```
+
+## getStaticPaths()
+이 함수는 동적 경로를 가진 페이지에서 미리 빌드할 경로를 정의할 때 사용됩니다. `getStaticProps()`함수와 같이 사용됩니다.
+
+```javascript
+export async function getStaticPaths() {
+ return {
+ paths: [
+ {
+ params: {
+ name: 'next.js',
+ },
+ },
+ ],
+ fallback: true,
+ }
+}
+
+export async function getStaticProps() {
+ const res = await fetch('https://api.github.com/repos/vercel/next.js')
+ const repo = await res.json()
+ return { props: { repo } }
+}
+
+export default function Page({ repo }) {
+ return repo.stargazers_count
+}
+```
+fallback의 옵션으로는
+`false` : 빌드된 경로 외의 페이지는 404를 반환
+`true` : 빌드된 경로 외의 페이지를 요청 시, 빌드되지 않은 페이지는 서버에서 데이터를 가져와 렌더링 후 캐싱
+`blocking` : 경로를 요청할 때 빌드되지 않은 페이지는 서버에서 데이터를 가져오고, 준비가 되면 클라이언트에 제공
+가 있습니다.
+## getServerSideProps()
+`getServerSideProps()`는 요청시마다 데이터를 가져오고 서버에서 데이터를 가져와 렌더링 하기 때문에 SEO와 초기 페이지 로딩 속도에 유리합니다.
+```javascript
+export async function getServerSideProps() {
+
+ const res = await fetch('https://api.github.com/repos/vercel/next.js')
+ const repo = await res.json()
+
+ return { props: { repo } } // Page에 Porps 전달
+}
+
+export default function Page({ repo }) {
+ return (
+
+ {repo.stargazers_count}
+
+ )
+}
+```
+
+## 마치며
+
+| 함수 | 실행 시점 | 사용 용도 | 장점 | 단점 |
+|---------------------|----------------------|----------------------------------|-----------------------------|-----------------------------|
+| `getStaticProps()` | 빌드 시점 | 정적 생성 (SEO 최적화, 빠른 로딩) | 성능 향상, 캐싱 가능 | 빌드 후 데이터 변경 불가 |
+| `getStaticPaths()` | 빌드 시점 | 동적 경로에 대한 정적 생성 | 동적 경로 지원 | 새로운 경로는 빌드 후 추가해야 함 |
+| `getServerSideProps()` | 요청 시점 | 서버에서 데이터를 가져와야 할 때 | SEO 최적화, 실시간 데이터 반영 | 서버 요청마다 데이터 로딩, 느린 페이지 로딩 |
+
+
+Next.js로 프로젝트를 구성하다보니 React 와는 다른점이 많아 배워야 할 부분들이 참 많은 것 같습니다.
+
+
+
[참고 자료](https://nextjs.org/docs/pages/building-your-application/data-fetching)
\ No newline at end of file
diff --git a/src/content/posts/next/Next_Hydration.md b/src/content/posts/next/Next_Hydration.md
index 6546db2..f120aa4 100644
--- a/src/content/posts/next/Next_Hydration.md
+++ b/src/content/posts/next/Next_Hydration.md
@@ -1,91 +1,91 @@
----
-title: next.js의 Hydration
-tags: [next]
-date: "2024.07.27"
----
-Next.js 공식문서를 읽어보던 중 중요한 개념이 보여 정리하고 넘어가려고 합니다.
-
-우선 Hydration을 알기 전에 React와 Next의 기본 동작 방식에 대해 알아야 합니다.
-
-React는 브라우저에서 요청이 들어오면 빈 HTML 파일과 JS 파일로 번들링된 React 파일을 넘겨줍니다.
-그 이후 브라우저가 JS파일을 읽어 화면을 그려나가기 시작합니다. 이러한 이유 때문에
-React 프로젝트가 SEO에 적합하지 않고 첫 로딩 속도가 느릴 수 있다는 단점이 있습니다.
-
-Next.js는 빌드 시 사전 렌더링(Pre-Rendering)을 진행하는데 빌드 시 미리 HTML파일을 생성해
-브라우저에서 요청이 들어왔을 때 미리 생성한 HTML 파일을 넘겨줌으로써 초기 로드 속도도 향상
-시키고 SEO에 적합하다는 장점이 있습니다.
-
-## Hydration이란?
-
-사실 Hydration이라는 개념은 React부터 있는 개념입니다.
-[React 공식문서](https://18.react.dev/reference/react-dom/client/hydrateRoot)
-
-React의 Hydration은 서버에서 미리 생성된 HTML을 먼저 클라이언트에 보낸 후 JS 파일로 번들링된
-React 파일을 HTML 파일과 매칭시는 Hydration 작업을 수행합니다. 이때 HTML DOM 요소 위에 한번더 렌더링 하게 되면서
-이벤트나 모듈들이 적용돼 동적 기능이 활성화됩니다.
-
-React는 직접 React API를 설정해 SSR을 구현해야 한다면 Next는 React 기반의 프레임워크답게
-내부적으로 서버 렌더링과 정적 사이트 생성 같은 기능을 처리하며
-데이터 패칭, 라우팅, 빌드 시점 렌더링과 같은 기능을 제공합니다.
-
-### Hydration과정에서 생길 수 있는 오류
-
-page 라우터의 Hydration
-
-```javascript
-const RandomNumber = () => {
- const randomValue = Math.random(); // 서버에서 렌덤한 값 생성
-
- return {randomValue}
;
-};
-```
-
-이러한 코드를 작성하게 되면
-
-```
-Text content did not match. Server: "0.7115683340234322" Client: "0.27284691182029364"
-```
-이처럼 서버에서의 렌더링 결과물과 클라이언트에서의 렌더링 결과물이 일치하지 않아서 생기는 오류입니다.
-
-문제를 해결하기 위해선 useEffect를 사용해 페이지가 렌더링 된 후 랜덤 한 값을 생성해 주면 됩니다.
-
-```javascript
-const RandomNumber = () => {
- const [number, setNumber] = useState(null);
-
- useEffect(()=>{
- setNumber(Math.random())
- },[])
-
- return {number}
;
-};
-```
-하지만 이 방법 또한 사전 렌더링 되어 넘어온 HTML에는 랜덤 한 숫자 값이 보이지 않는다는 단점이 있습니다.
-
-이때 PageRouter는 getServerSideProps를 이용하면 서버에서 랜덤 한 값을 생성해 클라이언트 컴포넌트에 props로 넘겨줄 수 있습니다.
-
-```javascript
-
-export async function getServerSideProps() {
- // 서버에서 랜덤 값 생성
- const randomValue = Math.random();
-
- return {
- props: {
- randomValue, // 랜덤 값을 컴포넌트에 전달
- },
- };
-}
-
-const RandomNumber = ({ randomValue }) => {
-
- return {randomValue}
;
-};
-```
-
-[next 공식문서](https://nextjs.org/docs/pages/building-your-application/rendering)
-
-## 마치며
-
-처음 Hydration 에러를 직면했을 때 SSR에 대한 이해가 부족했어서 당황스러웠는데 문제를 해결하기 위해
+---
+title: next.js의 Hydration
+tags: [next]
+date: "2024.07.27"
+---
+Next.js 공식문서를 읽어보던 중 중요한 개념이 보여 정리하고 넘어가려고 합니다.
+
+우선 Hydration을 알기 전에 React와 Next의 기본 동작 방식에 대해 알아야 합니다.
+
+React는 브라우저에서 요청이 들어오면 빈 HTML 파일과 JS 파일로 번들링된 React 파일을 넘겨줍니다.
+그 이후 브라우저가 JS파일을 읽어 화면을 그려나가기 시작합니다. 이러한 이유 때문에
+React 프로젝트가 SEO에 적합하지 않고 첫 로딩 속도가 느릴 수 있다는 단점이 있습니다.
+
+Next.js는 빌드 시 사전 렌더링(Pre-Rendering)을 진행하는데 빌드 시 미리 HTML파일을 생성해
+브라우저에서 요청이 들어왔을 때 미리 생성한 HTML 파일을 넘겨줌으로써 초기 로드 속도도 향상
+시키고 SEO에 적합하다는 장점이 있습니다.
+
+## Hydration이란?
+
+사실 Hydration이라는 개념은 React부터 있는 개념입니다.
+[React 공식문서](https://18.react.dev/reference/react-dom/client/hydrateRoot)
+
+React의 Hydration은 서버에서 미리 생성된 HTML을 먼저 클라이언트에 보낸 후 JS 파일로 번들링된
+React 파일을 HTML 파일과 매칭시는 Hydration 작업을 수행합니다. 이때 HTML DOM 요소 위에 한번더 렌더링 하게 되면서
+이벤트나 모듈들이 적용돼 동적 기능이 활성화됩니다.
+
+React는 직접 React API를 설정해 SSR을 구현해야 한다면 Next는 React 기반의 프레임워크답게
+내부적으로 서버 렌더링과 정적 사이트 생성 같은 기능을 처리하며
+데이터 패칭, 라우팅, 빌드 시점 렌더링과 같은 기능을 제공합니다.
+
+### Hydration과정에서 생길 수 있는 오류
+
+page 라우터의 Hydration
+
+```javascript
+const RandomNumber = () => {
+ const randomValue = Math.random(); // 서버에서 렌덤한 값 생성
+
+ return {randomValue}
;
+};
+```
+
+이러한 코드를 작성하게 되면
+
+```
+Text content did not match. Server: "0.7115683340234322" Client: "0.27284691182029364"
+```
+이처럼 서버에서의 렌더링 결과물과 클라이언트에서의 렌더링 결과물이 일치하지 않아서 생기는 오류입니다.
+
+문제를 해결하기 위해선 useEffect를 사용해 페이지가 렌더링 된 후 랜덤 한 값을 생성해 주면 됩니다.
+
+```javascript
+const RandomNumber = () => {
+ const [number, setNumber] = useState(null);
+
+ useEffect(()=>{
+ setNumber(Math.random())
+ },[])
+
+ return {number}
;
+};
+```
+하지만 이 방법 또한 사전 렌더링 되어 넘어온 HTML에는 랜덤 한 숫자 값이 보이지 않는다는 단점이 있습니다.
+
+이때 PageRouter는 getServerSideProps를 이용하면 서버에서 랜덤 한 값을 생성해 클라이언트 컴포넌트에 props로 넘겨줄 수 있습니다.
+
+```javascript
+
+export async function getServerSideProps() {
+ // 서버에서 랜덤 값 생성
+ const randomValue = Math.random();
+
+ return {
+ props: {
+ randomValue, // 랜덤 값을 컴포넌트에 전달
+ },
+ };
+}
+
+const RandomNumber = ({ randomValue }) => {
+
+ return {randomValue}
;
+};
+```
+
+[next 공식문서](https://nextjs.org/docs/pages/building-your-application/rendering)
+
+## 마치며
+
+처음 Hydration 에러를 직면했을 때 SSR에 대한 이해가 부족했어서 당황스러웠는데 문제를 해결하기 위해
공식 문서를 읽어보던 중 SSR에 대한 이해와 Next의 렌더링 방식에 대해 더욱 많은 이해를 할 수 있는 시간이었습니다.
\ No newline at end of file
diff --git a/src/content/posts/node/BJ1712.md b/src/content/posts/node/BJ1712.md
index 595ee58..7b92375 100644
--- a/src/content/posts/node/BJ1712.md
+++ b/src/content/posts/node/BJ1712.md
@@ -1,17 +1,17 @@
----
-title: 백준 1712번 알고리즘 [node.js]
-tags: [알고리즘]
-date: "2022.12.01"
----
-
-[https://www.acmicpc.net/problem/1712](https://www.acmicpc.net/problem/1712)
-
-## 문제
-
-첫 줄에 A, B, C 가 주어지는데 A는 고정비용 B는 가변비용 C는 판매가격이라고 할 때 최초로 총 수입이 총 비용보다 많아져 이익이 발생하는 손익분기점을 넘기는 값을 구하는 문제이다
-
-## 풀이
-
-간단하게 생각해서 마진은 판매가격에서 가변비용을 빼주게 되면 나온다. 이 마진을 고정비용으로 나눠주게 되면 손익분기점이 나오는데 우리는 손익분기점을 넘기는 값을 구해야 하기 때문에 1을 더해주면 된다. 그리고 만약 손익분기점이 존재하지 않는다면 -1을 출력해준다
-
-
+---
+title: 백준 1712번 알고리즘 [node.js]
+tags: [알고리즘]
+date: "2022.12.01"
+---
+
+[https://www.acmicpc.net/problem/1712](https://www.acmicpc.net/problem/1712)
+
+## 문제
+
+첫 줄에 A, B, C 가 주어지는데 A는 고정비용 B는 가변비용 C는 판매가격이라고 할 때 최초로 총 수입이 총 비용보다 많아져 이익이 발생하는 손익분기점을 넘기는 값을 구하는 문제이다
+
+## 풀이
+
+간단하게 생각해서 마진은 판매가격에서 가변비용을 빼주게 되면 나온다. 이 마진을 고정비용으로 나눠주게 되면 손익분기점이 나오는데 우리는 손익분기점을 넘기는 값을 구해야 하기 때문에 1을 더해주면 된다. 그리고 만약 손익분기점이 존재하지 않는다면 -1을 출력해준다
+
+
diff --git a/src/content/posts/node/BJ2292.md b/src/content/posts/node/BJ2292.md
index 7c28adf..2cd5e94 100644
--- a/src/content/posts/node/BJ2292.md
+++ b/src/content/posts/node/BJ2292.md
@@ -1,18 +1,18 @@
----
-title: 백준 2292번 알고리즘 [node.js]
-tags: [알고리즘]
-date: "2022.12.01"
----
-
-
-[https://www.acmicpc.net/problem/2292](https://www.acmicpc.net/problem/2292)
-
-## 문제
-
-육각형으로 이루어진 벌집이 있다. 중앙에 방 1부터 시작해서 이웃하는 방에 돌아가면서 1찍 증가하는 번주를 매기는데 숫자 N이 주어졌을 떄, 벌집의 중앙 1에서 N번 방까지 최소 개수의 방을 지나서 갈때 몇개의 방을 지나가는지(시작과 끝을 포함)를 계산하는 문제이다. 예를 들어 13까지는 3개, 58까지는 5개를 지난다.
-
-## 풀이
-
-규칙없이 반복문을 돌렸더니 시간초과가 나서 무언가 규칙이 있다는걸 알게 됐다. 1번방을 시작으로 6, 12, 18, 24 6의 배수 였고 입력 받은 값을 6의 배수보다 작을때 까지 돌려주면 최소 개수의 방을 구할 수 있다.
-
+---
+title: 백준 2292번 알고리즘 [node.js]
+tags: [알고리즘]
+date: "2022.12.01"
+---
+
+
+[https://www.acmicpc.net/problem/2292](https://www.acmicpc.net/problem/2292)
+
+## 문제
+
+육각형으로 이루어진 벌집이 있다. 중앙에 방 1부터 시작해서 이웃하는 방에 돌아가면서 1찍 증가하는 번주를 매기는데 숫자 N이 주어졌을 떄, 벌집의 중앙 1에서 N번 방까지 최소 개수의 방을 지나서 갈때 몇개의 방을 지나가는지(시작과 끝을 포함)를 계산하는 문제이다. 예를 들어 13까지는 3개, 58까지는 5개를 지난다.
+
+## 풀이
+
+규칙없이 반복문을 돌렸더니 시간초과가 나서 무언가 규칙이 있다는걸 알게 됐다. 1번방을 시작으로 6, 12, 18, 24 6의 배수 였고 입력 받은 값을 6의 배수보다 작을때 까지 돌려주면 최소 개수의 방을 구할 수 있다.
+
\ No newline at end of file
diff --git a/src/content/posts/node/BJ25206.md b/src/content/posts/node/BJ25206.md
index 9d1b9c4..06a62bc 100644
--- a/src/content/posts/node/BJ25206.md
+++ b/src/content/posts/node/BJ25206.md
@@ -1,82 +1,82 @@
----
-title: 백준 25206번 알고리즘 [node.js]
-tags: [알고리즘]
-date: "2024.02.27"
----
-
-## 문제
-
-[https://www.acmicpc.net/problem/25206](https://www.acmicpc.net/problem/25206)
-
-인하대학교 컴퓨터공학과를 졸업하기 위해서는, 전공평점이 3.3 이상이거나 졸업고사를 통과해야 한다. 그런데 아뿔싸, 치훈이는 깜빡하고 졸업고사를 응시하지 않았다는 사실을 깨달았다! 치훈이의 전공평점을 계산해주는 프로그램을 작성해보자. 전공평점은 전공과목별 (학점 × 과목평점)의 합을 학점의 총합으로 나눈 값이다. 인하대학교 컴퓨터공학과의 등급에 따른 과목평점은 다음 표와 같다.
-
- P/F 과목의 경우 등급이 P또는 F로 표시되는데, 등급이 P인 과목은 계산에서 제외해야 한다. 과연 치훈이는 무사히 졸업할 수 있을까?
-
-## 풀이
-
-```javascript
-const readline = require("readline");
-
-const rl = readline.createInterface({
- input: process.stdin,
- output: process.stdout,
-});
-
-/* 예제 입력
- ObjectOrientedProgramming1 3.0 A+
- IntroductiontoComputerEngineering 3.0 A+
- ObjectOrientedProgramming2 3.0 A0
- CreativeComputerEngineeringDesign 3.0 A+
- AssemblyLanguage 3.0 A+
- InternetProgramming 3.0 B0
- ApplicationProgramminginJava 3.0 A0
- SystemProgramming 3.0 B0
- OperatingSystem 3.0 B0
- WirelessCommunicationsandNetworking 3.0 C+
- LogicCircuits 3.0 B0
- DataStructure 4.0 A+
- MicroprocessorApplication 3.0 B+
- EmbeddedSoftware 3.0 C0
- ComputerSecurity 3.0 D+
- Database 3.0 C+
- Algorithm 3.0 B0
- CapstoneDesigninCSE 3.0 B+
- CompilerDesign 3.0 D0
- ProblemSolving 4.0 P
- */
-
-let input = [];
-let aa = 0;
-let GPA = {
- "A+": 4.5,
- A0: 4.0,
- "B+": 3.5,
- B0: 3.0,
- "C+": 2.5,
- C0: 2.0,
- "D+": 1.5,
- D0: 1.0,
- F: 0.0,
- P: null,
-};
-
-rl.on("line", (line) => {
- const a = line.split(" ");
- // p인 과목은 계산에서 제외한다.
- if (GPA[a[2]] != null) {
- aa += +a[1]; // 학점을 더해준다
- input.push(a[1] * GPA[a[2]]); // 과목의 학점과 과목평점을 곱해준다.
- }
-}).on("close", () => {
- // 학점과 과목평점을 곱한 값을 전부 더해준다.
- let sum = input.reduce((acc, cur) => {
- return acc + cur;
- });
- // 학점 * 과목평점의 합을 학점의 총점으로 나눠준다.
- console.log((sum / aa).toFixed(6));
-});
-```
-
-## 여담
-
-최근 알고리즘 공부를 개을리 했었는데 최근 문자열 유사도 검사와 같이 복잡한 로직을 구현할 때 어려움을 겪어 다시 1일1문제풀이를 하려한다.
+---
+title: 백준 25206번 알고리즘 [node.js]
+tags: [알고리즘]
+date: "2024.02.27"
+---
+
+## 문제
+
+[https://www.acmicpc.net/problem/25206](https://www.acmicpc.net/problem/25206)
+
+인하대학교 컴퓨터공학과를 졸업하기 위해서는, 전공평점이 3.3 이상이거나 졸업고사를 통과해야 한다. 그런데 아뿔싸, 치훈이는 깜빡하고 졸업고사를 응시하지 않았다는 사실을 깨달았다! 치훈이의 전공평점을 계산해주는 프로그램을 작성해보자. 전공평점은 전공과목별 (학점 × 과목평점)의 합을 학점의 총합으로 나눈 값이다. 인하대학교 컴퓨터공학과의 등급에 따른 과목평점은 다음 표와 같다.
+
+ P/F 과목의 경우 등급이 P또는 F로 표시되는데, 등급이 P인 과목은 계산에서 제외해야 한다. 과연 치훈이는 무사히 졸업할 수 있을까?
+
+## 풀이
+
+```javascript
+const readline = require("readline");
+
+const rl = readline.createInterface({
+ input: process.stdin,
+ output: process.stdout,
+});
+
+/* 예제 입력
+ ObjectOrientedProgramming1 3.0 A+
+ IntroductiontoComputerEngineering 3.0 A+
+ ObjectOrientedProgramming2 3.0 A0
+ CreativeComputerEngineeringDesign 3.0 A+
+ AssemblyLanguage 3.0 A+
+ InternetProgramming 3.0 B0
+ ApplicationProgramminginJava 3.0 A0
+ SystemProgramming 3.0 B0
+ OperatingSystem 3.0 B0
+ WirelessCommunicationsandNetworking 3.0 C+
+ LogicCircuits 3.0 B0
+ DataStructure 4.0 A+
+ MicroprocessorApplication 3.0 B+
+ EmbeddedSoftware 3.0 C0
+ ComputerSecurity 3.0 D+
+ Database 3.0 C+
+ Algorithm 3.0 B0
+ CapstoneDesigninCSE 3.0 B+
+ CompilerDesign 3.0 D0
+ ProblemSolving 4.0 P
+ */
+
+let input = [];
+let aa = 0;
+let GPA = {
+ "A+": 4.5,
+ A0: 4.0,
+ "B+": 3.5,
+ B0: 3.0,
+ "C+": 2.5,
+ C0: 2.0,
+ "D+": 1.5,
+ D0: 1.0,
+ F: 0.0,
+ P: null,
+};
+
+rl.on("line", (line) => {
+ const a = line.split(" ");
+ // p인 과목은 계산에서 제외한다.
+ if (GPA[a[2]] != null) {
+ aa += +a[1]; // 학점을 더해준다
+ input.push(a[1] * GPA[a[2]]); // 과목의 학점과 과목평점을 곱해준다.
+ }
+}).on("close", () => {
+ // 학점과 과목평점을 곱한 값을 전부 더해준다.
+ let sum = input.reduce((acc, cur) => {
+ return acc + cur;
+ });
+ // 학점 * 과목평점의 합을 학점의 총점으로 나눠준다.
+ console.log((sum / aa).toFixed(6));
+});
+```
+
+## 여담
+
+최근 알고리즘 공부를 개을리 했었는데 최근 문자열 유사도 검사와 같이 복잡한 로직을 구현할 때 어려움을 겪어 다시 1일1문제풀이를 하려한다.
diff --git a/src/content/posts/node/BJ4344.md b/src/content/posts/node/BJ4344.md
index a71ca8a..bca85a4 100644
--- a/src/content/posts/node/BJ4344.md
+++ b/src/content/posts/node/BJ4344.md
@@ -1,18 +1,18 @@
----
-title: 백준 4344번 알고리즘 [node.js]
-tags: [알고리즘]
-date: "2022.12.01"
----
-
-
-[https://www.acmicpc.net/problem/4344](https://www.acmicpc.net/problem/4344)
-
-## 문제
-
-육각형으로 이루어진 벌집이 있다. 중앙에 방 1부터 시작해서 이웃하는 방에 돌아가면서 1찍 증가하는 번주를 매기는데 숫자 N이 주어졌을 떄, 벌집의 중앙 1에서 N번 방까지 최소 개수의 방을 지나서 갈때 몇개의 방을 지나가는지(시작과 끝을 포함)를 계산하는 문제이다. 예를 들어 13까지는 3개, 58까지는 5개를 지난다.
-
-## 풀이
-
-규칙없이 반복문을 돌렸더니 시간초과가 나서 무언가 규칙이 있다는걸 알게 됐다. 1번방을 시작으로 6, 12, 18, 24 6의 배수 였고 입력 받은 값을 6의 배수보다 작을때 까지 돌려주면 최소 개수의 방을 구할 수 있다.
-
+---
+title: 백준 4344번 알고리즘 [node.js]
+tags: [알고리즘]
+date: "2022.12.01"
+---
+
+
+[https://www.acmicpc.net/problem/4344](https://www.acmicpc.net/problem/4344)
+
+## 문제
+
+육각형으로 이루어진 벌집이 있다. 중앙에 방 1부터 시작해서 이웃하는 방에 돌아가면서 1찍 증가하는 번주를 매기는데 숫자 N이 주어졌을 떄, 벌집의 중앙 1에서 N번 방까지 최소 개수의 방을 지나서 갈때 몇개의 방을 지나가는지(시작과 끝을 포함)를 계산하는 문제이다. 예를 들어 13까지는 3개, 58까지는 5개를 지난다.
+
+## 풀이
+
+규칙없이 반복문을 돌렸더니 시간초과가 나서 무언가 규칙이 있다는걸 알게 됐다. 1번방을 시작으로 6, 12, 18, 24 6의 배수 였고 입력 받은 값을 6의 배수보다 작을때 까지 돌려주면 최소 개수의 방을 구할 수 있다.
+
\ No newline at end of file
diff --git a/src/content/posts/node/HowToUseNvm.md b/src/content/posts/node/HowToUseNvm.md
index 668ead4..cb2b7c8 100644
--- a/src/content/posts/node/HowToUseNvm.md
+++ b/src/content/posts/node/HowToUseNvm.md
@@ -1,37 +1,37 @@
----
-title: node 버전관리 nvm
-tags: [node.js]
-date: "2024.01.26"
----
-## NVM 모듈
-
-node를 사용하다보면 개발환경에 따라 버전을 변경해야하는 상황이 오게 된다. 이때 nvm을 사용한다면 편리하게 버전을 변경하며 사용할 수 있다.
-
-## NVM 설치
-
-여기에 있는 링크에 들어가서 nvm-setup.exe나 nvm-setup.zip 파일을 받아 설치를 해주면 된다.
-
-[https://github.com/coreybutler/nvm-windows/releases](https://github.com/coreybutler/nvm-windows/releases)
-
-## NVM 사용법
-
-설치를 해주었다면 사용법은 간단하다.
-
-```javascript
-
- nvm -v // nvm 버젼 확인
-
- nvm current // 현재 사용중인 노드버전 확인
-
- nvm ls // 설치된 노드버전 확인
-
- nvm ls-remote // 설치 가능한 모든 노드버전 조회
-
- nvm install xx.xx.x // 해당 노드버전 설치
-
- nvm uninstall xx.xx.x // 해당 노드버전 삭제
-
- nvm use xx.xx.x // 해당 노드버전으로 변경
-
-```
-[https://github.com/nvm-sh/nvm/blob/master/README.md](https://github.com/nvm-sh/nvm/blob/master/README.md)
+---
+title: node 버전관리 nvm
+tags: [node.js]
+date: "2024.01.26"
+---
+## NVM 모듈
+
+node를 사용하다보면 개발환경에 따라 버전을 변경해야하는 상황이 오게 된다. 이때 nvm을 사용한다면 편리하게 버전을 변경하며 사용할 수 있다.
+
+## NVM 설치
+
+여기에 있는 링크에 들어가서 nvm-setup.exe나 nvm-setup.zip 파일을 받아 설치를 해주면 된다.
+
+[https://github.com/coreybutler/nvm-windows/releases](https://github.com/coreybutler/nvm-windows/releases)
+
+## NVM 사용법
+
+설치를 해주었다면 사용법은 간단하다.
+
+```javascript
+
+ nvm -v // nvm 버젼 확인
+
+ nvm current // 현재 사용중인 노드버전 확인
+
+ nvm ls // 설치된 노드버전 확인
+
+ nvm ls-remote // 설치 가능한 모든 노드버전 조회
+
+ nvm install xx.xx.x // 해당 노드버전 설치
+
+ nvm uninstall xx.xx.x // 해당 노드버전 삭제
+
+ nvm use xx.xx.x // 해당 노드버전으로 변경
+
+```
+[https://github.com/nvm-sh/nvm/blob/master/README.md](https://github.com/nvm-sh/nvm/blob/master/README.md)
diff --git a/src/content/posts/react/CustomHook.md b/src/content/posts/react/CustomHook.md
index e0ed72b..02620fb 100644
--- a/src/content/posts/react/CustomHook.md
+++ b/src/content/posts/react/CustomHook.md
@@ -1,86 +1,86 @@
----
-title: React 커스텀 Hook 만들기
-tags: [react]
-date: "2023.04.20"
----
-리엑트를 다룰 때 useState나 useEffect같은 Hook을 많이 사용해 봤을거다. 근데 이 Hook을 개발자가 원하는대로 만드는게 가능하다. 커스텀 훅은 반복되는 로직을 관리하는데 매우 용이하다.
-
-## 사용방법
-
-커스텀 훅을 만드는 방법은 그렇게 어렵지 않다. 이전에 커스텀 훅을 만들때 지켜야 할 규직이 몇가지 있는데 다음과 같다.
-
-- 커스텀 훅의 이름은 use + 대문자로 시작하는 이름을 지정해야 한다
-- 커스텀 훅에는 react에서 제공하는 내장 훅을 사용해야한다.
-- 커스텀 훅은 jsx가 아닌 오브젝트나 배열을 return 해준다.
-다음과 같이 아이디와 비번의 값을 입력받는 컴포넌트가 있다.
-
-```javascript
-
- const Form = () => {
- const [id, setId] = useState("");
- const [password, setPassword] = useState("");
-
- const handleId = (e) => {
- setId(e.target.value);
- }
-
- const handlePassword = (e) => {
- setPassword(e.target.value);
- }
-
- return(
- <>
-
-
-
- )
- }
-
-
-```
-위에 있는 코드에서 중복되는 로직이 보일거다. 우리는 이제 이걸 커스텀 훅으로 만들어 재사용성을 높혀 보도록 하겠다.
-
-```javascript
-
- const app = () => {
- const idForm = useFormInput("");
- const passwordForm = useFormInput("");
-
- return(
- <>
-
-
-
- )
- }
-
- const useFormInput = (Value) => {
- const [value, setValue] = useState(Value);
-
- function handleChange(e) {
- setValue(e.target.value);
- }
-
- return {
- value: value,
- onChange: handleChange
- };
- }
-
-
-```
-물론 커스텀 훅이 없어도 개발하는데 지장을 주지는 않지만 잘만 사용하면 아주 편리한 기능이니 어렵더라도 잘 활용하도록 해야겠다는 생각이 들었다. 또한 커스텀 훅을 이용하면 재사용성도 올라가고 관리도 용이해져 마다할 이유가 없다고 생각한다.
-
-[https://react.dev/learn/reusing-logic-with-custom-hooks](https://react.dev/learn/reusing-logic-with-custom-hooks)
+---
+title: React 커스텀 Hook 만들기
+tags: [react]
+date: "2023.04.20"
+---
+리엑트를 다룰 때 useState나 useEffect같은 Hook을 많이 사용해 봤을거다. 근데 이 Hook을 개발자가 원하는대로 만드는게 가능하다. 커스텀 훅은 반복되는 로직을 관리하는데 매우 용이하다.
+
+## 사용방법
+
+커스텀 훅을 만드는 방법은 그렇게 어렵지 않다. 이전에 커스텀 훅을 만들때 지켜야 할 규직이 몇가지 있는데 다음과 같다.
+
+- 커스텀 훅의 이름은 use + 대문자로 시작하는 이름을 지정해야 한다
+- 커스텀 훅에는 react에서 제공하는 내장 훅을 사용해야한다.
+- 커스텀 훅은 jsx가 아닌 오브젝트나 배열을 return 해준다.
+다음과 같이 아이디와 비번의 값을 입력받는 컴포넌트가 있다.
+
+```javascript
+
+ const Form = () => {
+ const [id, setId] = useState("");
+ const [password, setPassword] = useState("");
+
+ const handleId = (e) => {
+ setId(e.target.value);
+ }
+
+ const handlePassword = (e) => {
+ setPassword(e.target.value);
+ }
+
+ return(
+ <>
+
+
+
+ )
+ }
+
+
+```
+위에 있는 코드에서 중복되는 로직이 보일거다. 우리는 이제 이걸 커스텀 훅으로 만들어 재사용성을 높혀 보도록 하겠다.
+
+```javascript
+
+ const app = () => {
+ const idForm = useFormInput("");
+ const passwordForm = useFormInput("");
+
+ return(
+ <>
+
+
+
+ )
+ }
+
+ const useFormInput = (Value) => {
+ const [value, setValue] = useState(Value);
+
+ function handleChange(e) {
+ setValue(e.target.value);
+ }
+
+ return {
+ value: value,
+ onChange: handleChange
+ };
+ }
+
+
+```
+물론 커스텀 훅이 없어도 개발하는데 지장을 주지는 않지만 잘만 사용하면 아주 편리한 기능이니 어렵더라도 잘 활용하도록 해야겠다는 생각이 들었다. 또한 커스텀 훅을 이용하면 재사용성도 올라가고 관리도 용이해져 마다할 이유가 없다고 생각한다.
+
+[https://react.dev/learn/reusing-logic-with-custom-hooks](https://react.dev/learn/reusing-logic-with-custom-hooks)
diff --git a/src/content/posts/react/EventListenerState.md b/src/content/posts/react/EventListenerState.md
index f4ada57..397e82c 100644
--- a/src/content/posts/react/EventListenerState.md
+++ b/src/content/posts/react/EventListenerState.md
@@ -1,65 +1,65 @@
----
-title: react에서 addEventListener와 state
-tags: [react]
-date: "2023.07.18"
----
-## 문제점
-
-최근 개발을 하다 window.addEventListener로 호출한 함수 내에서 state값이 초기 값 그대로 읽히는 경우가 있었다. 아래와 같이 코드를 작성 했을 떄 state값은 계속 변경 되지만 console.log()로 state값을 읽을땐 초기값만 출력이 된다.
-
-```javascript
-
- import { useState, useEffect } from 'react';
-
- function MyComponent() {
- const [state, setState] = useState(0);
-
- const eventHandler = () => {
- setState((pre)=> pre + 1);
- console.log(state) // state값은 계속 변경되지만 console.log() 찍어보면 초기값인 0만 찍힌다.
- };
-
- useEffect(() => {
- window.addEventListener('click', eventHandler);
- return () => {
- window.removeEventListener('click', eventHandler);
- };
- }, []);
-
- return {state}
;
- }
-
-
-```
-이렇게 동작하는 원인이 무엇일까? 이렇게 동작하는 이유는 이벤트 핸들러 함수는 비동기적으로 실행되기 때문에 함수가 호출될 떄의 상태를 유지하면서 실행되기 때문이다. 그래서 state값이 초기 값으로 고정되는 것 이다.
-
-## 해결방법
-
-이를 해결하는 방법은 useEffect deps에 state를 추가해주면 된다. 그럼 state값이 변경 될 때 마다 리랜더링 되면서 최근값을 반영 하는 함수가 새롭게 선언되면서 초기에 의도한 대로 동작한다.
-
-```javascript
-
- import { useState, useEffect } from 'react';
-
- function MyComponent() {
- const [state, setState] = useState(0);
-
- const eventHandler = () => {
- setState((pre)=> pre + 1);
- console.log(state) // state 값이 변경되는 걸 확인 할 수 있다.
- };
-
- useEffect(() => {
- window.addEventListener('click', eventHandler);
- return () => {
- window.removeEventListener('click', eventHandler);
- };
- }, [state]); // deps에 state를 추가
-
- return {state}
;
- }
-
-```
-[https://stackoverflow.com/questions/66213641/react-keypress-event-taking-only-initial-state-values-and-not-updated-values](https://stackoverflow.com/questions/66213641/react-keypress-event-taking-only-initial-state-values-and-not-updated-values)
-
-[https://medium.com/hcleedev/web-event%EC%99%80-addeventlistener-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0-%EA%B0%9C%EB%85%90-react%EC%97%90%EC%84%9C-%EC%A3%BC%EC%9D%98%ED%95%A0-%EC%A0%90-a581adc49aa4](https://medium.com/hcleedev/web-event%EC%99%80-addeventlistener-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0-%EA%B0%9C%EB%85%90-react%EC%97%90%EC%84%9C-%EC%A3%BC%EC%9D%98%ED%95%A0-%EC%A0%90-a581adc49aa4)
+---
+title: react에서 addEventListener와 state
+tags: [react]
+date: "2023.07.18"
+---
+## 문제점
+
+최근 개발을 하다 window.addEventListener로 호출한 함수 내에서 state값이 초기 값 그대로 읽히는 경우가 있었다. 아래와 같이 코드를 작성 했을 떄 state값은 계속 변경 되지만 console.log()로 state값을 읽을땐 초기값만 출력이 된다.
+
+```javascript
+
+ import { useState, useEffect } from 'react';
+
+ function MyComponent() {
+ const [state, setState] = useState(0);
+
+ const eventHandler = () => {
+ setState((pre)=> pre + 1);
+ console.log(state) // state값은 계속 변경되지만 console.log() 찍어보면 초기값인 0만 찍힌다.
+ };
+
+ useEffect(() => {
+ window.addEventListener('click', eventHandler);
+ return () => {
+ window.removeEventListener('click', eventHandler);
+ };
+ }, []);
+
+ return {state}
;
+ }
+
+
+```
+이렇게 동작하는 원인이 무엇일까? 이렇게 동작하는 이유는 이벤트 핸들러 함수는 비동기적으로 실행되기 때문에 함수가 호출될 떄의 상태를 유지하면서 실행되기 때문이다. 그래서 state값이 초기 값으로 고정되는 것 이다.
+
+## 해결방법
+
+이를 해결하는 방법은 useEffect deps에 state를 추가해주면 된다. 그럼 state값이 변경 될 때 마다 리랜더링 되면서 최근값을 반영 하는 함수가 새롭게 선언되면서 초기에 의도한 대로 동작한다.
+
+```javascript
+
+ import { useState, useEffect } from 'react';
+
+ function MyComponent() {
+ const [state, setState] = useState(0);
+
+ const eventHandler = () => {
+ setState((pre)=> pre + 1);
+ console.log(state) // state 값이 변경되는 걸 확인 할 수 있다.
+ };
+
+ useEffect(() => {
+ window.addEventListener('click', eventHandler);
+ return () => {
+ window.removeEventListener('click', eventHandler);
+ };
+ }, [state]); // deps에 state를 추가
+
+ return {state}
;
+ }
+
+```
+[https://stackoverflow.com/questions/66213641/react-keypress-event-taking-only-initial-state-values-and-not-updated-values](https://stackoverflow.com/questions/66213641/react-keypress-event-taking-only-initial-state-values-and-not-updated-values)
+
+[https://medium.com/hcleedev/web-event%EC%99%80-addeventlistener-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0-%EA%B0%9C%EB%85%90-react%EC%97%90%EC%84%9C-%EC%A3%BC%EC%9D%98%ED%95%A0-%EC%A0%90-a581adc49aa4](https://medium.com/hcleedev/web-event%EC%99%80-addeventlistener-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0-%EA%B0%9C%EB%85%90-react%EC%97%90%EC%84%9C-%EC%A3%BC%EC%9D%98%ED%95%A0-%EC%A0%90-a581adc49aa4)
diff --git a/src/content/posts/react/React-Fragment.md b/src/content/posts/react/React-Fragment.md
index c362541..7edec0d 100644
--- a/src/content/posts/react/React-Fragment.md
+++ b/src/content/posts/react/React-Fragment.md
@@ -1,96 +1,96 @@
----
-title: Fragment를 알아보자
-tags: [react]
-date: "2022.01.02"
----
-리엑트에서 컴포넌트 단위로 개발을 하면서 의미 없는 div태그로 감싸여진 코드들을 볼 수 있다. 이는 jsx를 사용하면서 return은 두개의 값을 반환 할 수 없어 하나의 최상위 태그를 사용해야 하기 때문이다. 이때 Fragment를 사용하면 의미 없는 태그 사용을 막을 수 있다.
-
-```javascript
-
- const Table = () => {
- return(
-
- )
- }
-
- const Colums = ()=> {
- return(
-
-
Hello |
- World |
-
- )
- }
-
-
-```
-일반적으로 div를 사용하면 이런식으로 보여지게 된다.
-
-```javascript
-
- const Table = () => {
- return(
-
-
-
-
Hello |
- World |
-
-
-
- )
- }
-
-
-```
-이때 Fragment 를 사용하게 되면
-
-```javascript
-
- const Colums = ()=> {
- return(
-
- Hello |
- World |
-
- )
- }
-
-
-```
-```javascript
-
- const Table = () => {
- return(
-
- )
- }
-
-
-```
-이렇게 깔끔하게 보여지게 된다. 이때 빈 태그를 사용하면 Fragment 선언을 생략하고 사용할 수 있다.
-
-```javascript
-
- const Colums = ()=> {
- return(
- <>
- Hello |
- World |
-
- )
- }
-
-```
-참고 문서 :
-
-[https://reactjs.org/docs/forwarding-refs.html](https://reactjs.org/docs/forwarding-refs.html)
+---
+title: Fragment를 알아보자
+tags: [react]
+date: "2022.01.02"
+---
+리엑트에서 컴포넌트 단위로 개발을 하면서 의미 없는 div태그로 감싸여진 코드들을 볼 수 있다. 이는 jsx를 사용하면서 return은 두개의 값을 반환 할 수 없어 하나의 최상위 태그를 사용해야 하기 때문이다. 이때 Fragment를 사용하면 의미 없는 태그 사용을 막을 수 있다.
+
+```javascript
+
+ const Table = () => {
+ return(
+
+ )
+ }
+
+ const Colums = ()=> {
+ return(
+
+
Hello |
+ World |
+
+ )
+ }
+
+
+```
+일반적으로 div를 사용하면 이런식으로 보여지게 된다.
+
+```javascript
+
+ const Table = () => {
+ return(
+
+
+
+
Hello |
+ World |
+
+
+
+ )
+ }
+
+
+```
+이때 Fragment 를 사용하게 되면
+
+```javascript
+
+ const Colums = ()=> {
+ return(
+
+ Hello |
+ World |
+
+ )
+ }
+
+
+```
+```javascript
+
+ const Table = () => {
+ return(
+
+ )
+ }
+
+
+```
+이렇게 깔끔하게 보여지게 된다. 이때 빈 태그를 사용하면 Fragment 선언을 생략하고 사용할 수 있다.
+
+```javascript
+
+ const Colums = ()=> {
+ return(
+ <>
+ Hello |
+ World |
+
+ )
+ }
+
+```
+참고 문서 :
+
+[https://reactjs.org/docs/forwarding-refs.html](https://reactjs.org/docs/forwarding-refs.html)
diff --git a/src/content/posts/server/EC2InstenceLiveChat.md b/src/content/posts/server/EC2InstenceLiveChat.md
index 2b156d1..57cba90 100644
--- a/src/content/posts/server/EC2InstenceLiveChat.md
+++ b/src/content/posts/server/EC2InstenceLiveChat.md
@@ -1,60 +1,60 @@
----
-title: EC2 인스턴스 서버 환경 구성하기 - 1
-tags: [Server]
-date: "2024.05.11"
----
-이번에 개발한 라이브쳇 서비스를 EC2 인스턴스를 이용해 배포를 했습니다. 이 글은 그 과정을 기록하기 위한 글 입니다.
-
-## 사용할 AWS 서비스
-
-### ACM
-
-AWS Certificate Manager로 SSL/TLS 인증서를 생성, 관리 및 배포하는 AWS 서비스 입니다.
-
-### EC2
-
-Elastic Compute Cloud로 AWS에서 제공하는 가상 서버 서비스 입니다.
-
-### Amazon Route 53
-
-AWS에서 제공하는 클라우드 기반의 DNS(Domain Name System) 서비스입니다. 웹 트래픽을 라우팅하고 도메인 등록과 같은 기능을 제공합니다.
-
-## 서비스 배포
-
-우선 EC2인스턴트 시작 버튼을 눌러 인스턴트를 하나 만들어 줍니다.
-
-
-이름 및 태그에 생성할 인스턴트의 이름을 적어준 다음 Ubuntu프리서버를 선택해 줍니다. 그리고 키 페어(로그인)에서 새 키 페어 생성을 눌러 .ppk 와 .pem키를 생성해주면 되는데 이 2개의 키는 잃어버리면 안 되니 꼭 보관해주면 됩니다.
-
-
-인스턴스를 생성했으면 연결 버튼을 누른 후 인스턴트에 접속할 수 있습니다. 이 방법 이외에도 putty를 이용해 접속할 수 있습니다. 혹은 SSH 클라이언트 연결을 이용해 개발 환경 플랫폼 터미널(저의 경우는 VScode)에서도 접속이 가능합니다. 인스턴트에 성공적으로 접속했다면 WinSCP를 이용해 인스턴트에 파일을 전송하던 git을 설치해 원격으로 git repository를 클론해주면 됩니다.
-
-
-생성한 우분터 서버에서는 아무것도 설치가 되어 있지 않기 때문에 서버 실행에 필요한 것들을 설치해야 합니다. npm node.js git (git을 통해 프로젝트를 가져온다면) git clone 프로젝트 (git을 통해 프로젝트를 가져온다면)
-
-```javascript
-
- // 업데이트
- sudo apt update
-
- // npm 설치를 위한 명령어
- sudo apt install npm
-
- // node.js 설치를 위한 명령어
- sudo apt install nodejs
-
- // git 설치를 위한 명령어
- sudo apt install git
-
- // github에 등록된 나의 프로젝트 가져오기
- git clone https://github.com/어쩌구/저쩌구.git
-
-```
-이렇게 기본적인 업데이트 및 설정이 끝났다면 npm install로 package.json의 내역을 설치해주면 됩니다. 이제 진짜 마지막으로 서버의 무중단 배포를 위해 forever라이브러리를 설치해 forever start명령어로 서버를 실행시키면 됩니다.
-
-이렇게 서버를 실행시켰다면 인스턴트 보안그룹에 인바운드 규칙을 추가해주면 되는데 서버를 연 포트를 입력해주면 됩니다.
-
-
-인스턴스의 퍼블릭 IPv4 DNS의 8080포트로 접속하면 성공적으로 배포가 되었음을 확인할 수 있습니다.
-
+---
+title: EC2 인스턴스 서버 환경 구성하기 - 1
+tags: [Server]
+date: "2024.05.11"
+---
+이번에 개발한 라이브쳇 서비스를 EC2 인스턴스를 이용해 배포를 했습니다. 이 글은 그 과정을 기록하기 위한 글 입니다.
+
+## 사용할 AWS 서비스
+
+### ACM
+
+AWS Certificate Manager로 SSL/TLS 인증서를 생성, 관리 및 배포하는 AWS 서비스 입니다.
+
+### EC2
+
+Elastic Compute Cloud로 AWS에서 제공하는 가상 서버 서비스 입니다.
+
+### Amazon Route 53
+
+AWS에서 제공하는 클라우드 기반의 DNS(Domain Name System) 서비스입니다. 웹 트래픽을 라우팅하고 도메인 등록과 같은 기능을 제공합니다.
+
+## 서비스 배포
+
+우선 EC2인스턴트 시작 버튼을 눌러 인스턴트를 하나 만들어 줍니다.
+
+
+이름 및 태그에 생성할 인스턴트의 이름을 적어준 다음 Ubuntu프리서버를 선택해 줍니다. 그리고 키 페어(로그인)에서 새 키 페어 생성을 눌러 .ppk 와 .pem키를 생성해주면 되는데 이 2개의 키는 잃어버리면 안 되니 꼭 보관해주면 됩니다.
+
+
+인스턴스를 생성했으면 연결 버튼을 누른 후 인스턴트에 접속할 수 있습니다. 이 방법 이외에도 putty를 이용해 접속할 수 있습니다. 혹은 SSH 클라이언트 연결을 이용해 개발 환경 플랫폼 터미널(저의 경우는 VScode)에서도 접속이 가능합니다. 인스턴트에 성공적으로 접속했다면 WinSCP를 이용해 인스턴트에 파일을 전송하던 git을 설치해 원격으로 git repository를 클론해주면 됩니다.
+
+
+생성한 우분터 서버에서는 아무것도 설치가 되어 있지 않기 때문에 서버 실행에 필요한 것들을 설치해야 합니다. npm node.js git (git을 통해 프로젝트를 가져온다면) git clone 프로젝트 (git을 통해 프로젝트를 가져온다면)
+
+```javascript
+
+ // 업데이트
+ sudo apt update
+
+ // npm 설치를 위한 명령어
+ sudo apt install npm
+
+ // node.js 설치를 위한 명령어
+ sudo apt install nodejs
+
+ // git 설치를 위한 명령어
+ sudo apt install git
+
+ // github에 등록된 나의 프로젝트 가져오기
+ git clone https://github.com/어쩌구/저쩌구.git
+
+```
+이렇게 기본적인 업데이트 및 설정이 끝났다면 npm install로 package.json의 내역을 설치해주면 됩니다. 이제 진짜 마지막으로 서버의 무중단 배포를 위해 forever라이브러리를 설치해 forever start명령어로 서버를 실행시키면 됩니다.
+
+이렇게 서버를 실행시켰다면 인스턴트 보안그룹에 인바운드 규칙을 추가해주면 되는데 서버를 연 포트를 입력해주면 됩니다.
+
+
+인스턴스의 퍼블릭 IPv4 DNS의 8080포트로 접속하면 성공적으로 배포가 되었음을 확인할 수 있습니다.
+
\ No newline at end of file
diff --git a/src/content/posts/server/EC2InstenceLiveChatTwo.md b/src/content/posts/server/EC2InstenceLiveChatTwo.md
index 80c6705..721c03b 100644
--- a/src/content/posts/server/EC2InstenceLiveChatTwo.md
+++ b/src/content/posts/server/EC2InstenceLiveChatTwo.md
@@ -1,66 +1,66 @@
----
-title: EC2 인스턴스 서버 환경 구성하기 - 2
-tags: [Server]
-date: "2024.05.18"
----
-이전 포스트에서 서버에 배포하고 실행까지 했지만 이번엔 도메인 연결과 HTTPS인증까지 다루려고 합니다.
-
-## 탄력적 IP 주소 할당
-
-EC2 인스턴트는 기본적으로 동적 IP를 할당받기 때문에 인스턴스를 재부팅하거나 종료할 경우 IP가 변경됩니다. HTTP 인증과 같은 작업에는 고정된 IP주소가 필요하기 때문에 탄력적 IP주소를 할당해 줍니다.
-
-
-## AWS Certificate Manager(ACM)인증서 발급
-
-SSL/TLS 인증을 위한 인증서를 발급 받아주면 됩니다. 이 과정은 5분에서 20분 정도 걸립니다. 만약 서브도메인을 사용할 생각이라면 example.com *.example.com 둘다 등록하시면 됩니다.
-
-## 보안그룹 인바운드 규칙
-
-그동안 HTTP와 HTTPS 인바운드 규칙을 추가해줍니다.
-
-
-## 대상그룹 생성
-
-다음으로 로드 밸런싱의 대상그룹을 생성한 다음 생성한 인스턴트에 사용중인 8080포트로 연결해줍니다.
-
-
-
-## 로드밸런서 생성
-
-로드 밸런스는 HTTP로 접속했을 떄 HTTPS로 리다이렉션 해주는 역할을 합니다. 리스너 및 라우팅에는 사전에 생성한 대상그룹을 설정해주고 보안그룹은 사전에 편집한 보안그룹을 할당해주면 됩니다.
-
-
-
-이렇게 생성을 해줬다면 로드밸런스 리스너 및 규칙 HTTP:80포트에 규칙을 추가해 HTTP로 접속하면 HTTPS로 리다이렉션 하도록 해줍니다.
-
-
-
-
-## Route 53 생성
-
-
-가비아에서 도메인을 구매했다면 http://live-support.shop/ 의 NS유형을 가비아 네임서버에 등록해 줍니다.
-
-
-아까 발급 받았던 AWS Certificate Manager인증서를 Router53에 등록해 줍니다.
-
-그 다음 생성한 로드밸런서를 이용해 EC2인스턴스 와 도메인을 연결시켜주면 됩니다.
-
-
-여기까지 작업을 잘 하셨다면 이제 등록한 도메인으로 접속을 했을때 서비스에 접속할 수 있게됩니다. 하지만 저는 vercel을 이용해 프론트 배포를 했기 때문에 vercel에도 도메인을 등록해야 합니다.
-
-## velcel 도메인 등록
-
-velcel 도메인 등록은 아주 간단한데 프로젝트 설정에 들어가 Domains에서 등록하고자 하는 도메인을 입력한 후 Route53에 돌아가 해당 레코드 생성을 해주면 된다.
-
-
-
-
-## 발생했던 문제
-
-모든 서버환경을 구성했음에도 불구하고 EC2 인스턴스 서버가 velcel에 도메인 등록만 하면 접속이 되지 않는 이슈가 있었습니다. 초기에 원인을 찾지 못해 헤매고 있던 중 api.live-support.shop에 접속하면 일반적인 에러 페이지 대신 Vercel 404 에러 페이지가 뜨는 점이 이상하다는 생각이 들었고 Vercel에 Domain 설정을 찾아보던 중 원인을 발견했습니다.
-
-velcel에 도메인을 등록하면 자동으로 DNS Records값이 설정되었고 DNS Records설정 값을 삭제해주니 정상적으로 동작했습니다.
-
-
+---
+title: EC2 인스턴스 서버 환경 구성하기 - 2
+tags: [Server]
+date: "2024.05.18"
+---
+이전 포스트에서 서버에 배포하고 실행까지 했지만 이번엔 도메인 연결과 HTTPS인증까지 다루려고 합니다.
+
+## 탄력적 IP 주소 할당
+
+EC2 인스턴트는 기본적으로 동적 IP를 할당받기 때문에 인스턴스를 재부팅하거나 종료할 경우 IP가 변경됩니다. HTTP 인증과 같은 작업에는 고정된 IP주소가 필요하기 때문에 탄력적 IP주소를 할당해 줍니다.
+
+
+## AWS Certificate Manager(ACM)인증서 발급
+
+SSL/TLS 인증을 위한 인증서를 발급 받아주면 됩니다. 이 과정은 5분에서 20분 정도 걸립니다. 만약 서브도메인을 사용할 생각이라면 example.com *.example.com 둘다 등록하시면 됩니다.
+
+## 보안그룹 인바운드 규칙
+
+그동안 HTTP와 HTTPS 인바운드 규칙을 추가해줍니다.
+
+
+## 대상그룹 생성
+
+다음으로 로드 밸런싱의 대상그룹을 생성한 다음 생성한 인스턴트에 사용중인 8080포트로 연결해줍니다.
+
+
+
+## 로드밸런서 생성
+
+로드 밸런스는 HTTP로 접속했을 떄 HTTPS로 리다이렉션 해주는 역할을 합니다. 리스너 및 라우팅에는 사전에 생성한 대상그룹을 설정해주고 보안그룹은 사전에 편집한 보안그룹을 할당해주면 됩니다.
+
+
+
+이렇게 생성을 해줬다면 로드밸런스 리스너 및 규칙 HTTP:80포트에 규칙을 추가해 HTTP로 접속하면 HTTPS로 리다이렉션 하도록 해줍니다.
+
+
+
+
+## Route 53 생성
+
+
+가비아에서 도메인을 구매했다면 http://live-support.shop/ 의 NS유형을 가비아 네임서버에 등록해 줍니다.
+
+
+아까 발급 받았던 AWS Certificate Manager인증서를 Router53에 등록해 줍니다.
+
+그 다음 생성한 로드밸런서를 이용해 EC2인스턴스 와 도메인을 연결시켜주면 됩니다.
+
+
+여기까지 작업을 잘 하셨다면 이제 등록한 도메인으로 접속을 했을때 서비스에 접속할 수 있게됩니다. 하지만 저는 vercel을 이용해 프론트 배포를 했기 때문에 vercel에도 도메인을 등록해야 합니다.
+
+## velcel 도메인 등록
+
+velcel 도메인 등록은 아주 간단한데 프로젝트 설정에 들어가 Domains에서 등록하고자 하는 도메인을 입력한 후 Route53에 돌아가 해당 레코드 생성을 해주면 된다.
+
+
+
+
+## 발생했던 문제
+
+모든 서버환경을 구성했음에도 불구하고 EC2 인스턴스 서버가 velcel에 도메인 등록만 하면 접속이 되지 않는 이슈가 있었습니다. 초기에 원인을 찾지 못해 헤매고 있던 중 api.live-support.shop에 접속하면 일반적인 에러 페이지 대신 Vercel 404 에러 페이지가 뜨는 점이 이상하다는 생각이 들었고 Vercel에 Domain 설정을 찾아보던 중 원인을 발견했습니다.
+
+velcel에 도메인을 등록하면 자동으로 DNS Records값이 설정되었고 DNS Records설정 값을 삭제해주니 정상적으로 동작했습니다.
+
+
\ No newline at end of file
diff --git a/src/content/posts/server/WhatServerless.md b/src/content/posts/server/WhatServerless.md
index a1a4977..2b53b61 100644
--- a/src/content/posts/server/WhatServerless.md
+++ b/src/content/posts/server/WhatServerless.md
@@ -1,75 +1,75 @@
----
-title: 서버리스 개념
-tags: [server]
-date: "2024.07.06"
----
-요즘 AWS에 배포한 서비스들의 서버 비용이 너무 많이 청구되어 비용문제를 해결하기 위해 알아보던 중
-서버리스에 대해 알게 되었고 이를 정리하기 위해 글을 작성합니다.
-
-## 서버리스 아키텍쳐 란?
-
-서버리스는 진짜로 서버가 없다는 의미가 아니라 서버를 직접 관리하지 않아도
-코드를 실행할 수 있는 환경 입니다.
->코드를 실행할 저장공간은 있어야합니다.
-
-### 서버리스의 특징
-서버리스의 특징으로는 사용자는 클라우드에서 코드만 업로드하면
-클라우드 제공자가 서버의 프로비저닝, 운영체제 관리, 패치 적용을 관리하며 자동으로 실행됩니다.
-서버리스 어플리케이션은 이벤트 요청시에만 실행되며 트래픽이 증가 했을때 자동으로 리소스를 확장하고
-트래픽 감소시 리소스를 축소되어 사용한 만큼의 비용을 지불해 비용 절감의 효과가 있습니다.
-
-이러한 이유로 기존 클라우드 컴퓨팅 모델에 비해 운영 부담이 줄고 경제적입니다.
-
-## 서버리스 모델
-
-### FaaS(Function as a Service)
-FaaS는 이름 그대로 이벤트를 기반으로 애플리케이션의 함수를 실행시켜 서비스를 제공합니다.
-
-HTTP 요청이나 파일 업로드 등의 이벤트가 발생하면 서버는 이벤트를 감지해 대기시켰던 함수를
-리소스를 할당해 함수를 실행시켜 결과를 반환한 후 리소스를 대기 상태로 유지합니다.
-
-FaaS를 제공하는 플랫폼으로는 AWS Lambda, Google Cloud Functions, Azure Functions 등이 있습니다.
-
-[참고자료](https://www.redhat.com/ko/topics/cloud-native-apps/what-is-faas?utm_source=chatgpt.com)
-
-### Backend-as-a-Service (BaaS)
-BaaS는 백엔드 개발에 필요한 기능을 API로 제공하는 서비스입니다.
-
-사용자 인증이나 권한관리, 테이터베이스 연동등 어플리케이션 개발에 필요한 여러 기능을 제공해
-서버 개발을 하지 않아도 빠르고 쉽게 구현 할 수 있게 됩니다.
-
-로그인이나 데이터쿼리등의 요청이 들어오면 BaaS가 제공하는 API를 호출해 해당 요청을 수행합니다.
-
-BaaS를 제공하는 대표적인 서비스는 Firebase가 있습니다.
-
-[참고자료](https://www.cloudflare.com/ko-kr/learning/serverless/glossary/backend-as-a-service-baas/?utm_source=chatgpt.com)
-
-## 서버리스의 장단점
-
-### 장점
-
-**비용**
-- 실제 사용량에 대해 비용이 청구되어 경제적입니다.
-
-**빠른 배포**
-- 서버 관리 없이 코드만 작성하면 즉시 배포할 수 있습니다.
-
-**유연한 확정성**
-- 트래픽에 따라 자동으로 확장하고 축소합니다.
-
-**서버 관리 불필요**
-- 서버에 대한 관리가 필요 없어 어플리케이션 개발에 집중할 수 있습니다.
-
-### 단점
-
-**Cold Start**
-- 요청할 때마다 서버가 실행되기 때문에 첫 요청에 대한 지연이 발생할 수 있습니다.
-
-**실행 시간 제한**
-- 서버리스는 함수가 1회 호출될 때 사용할 수 있기 때문에 긴 시간이 필요한 작업등에는 어려움이 있습니다.
-
-**종속성**
-- 클라우드 제공자에게 종속될 부감감이 큽니다.
-
-**디버깅 및 모니터링의 어려움**
+---
+title: 서버리스 개념
+tags: [server]
+date: "2024.07.06"
+---
+요즘 AWS에 배포한 서비스들의 서버 비용이 너무 많이 청구되어 비용문제를 해결하기 위해 알아보던 중
+서버리스에 대해 알게 되었고 이를 정리하기 위해 글을 작성합니다.
+
+## 서버리스 아키텍쳐 란?
+
+서버리스는 진짜로 서버가 없다는 의미가 아니라 서버를 직접 관리하지 않아도
+코드를 실행할 수 있는 환경 입니다.
+>코드를 실행할 저장공간은 있어야합니다.
+
+### 서버리스의 특징
+서버리스의 특징으로는 사용자는 클라우드에서 코드만 업로드하면
+클라우드 제공자가 서버의 프로비저닝, 운영체제 관리, 패치 적용을 관리하며 자동으로 실행됩니다.
+서버리스 어플리케이션은 이벤트 요청시에만 실행되며 트래픽이 증가 했을때 자동으로 리소스를 확장하고
+트래픽 감소시 리소스를 축소되어 사용한 만큼의 비용을 지불해 비용 절감의 효과가 있습니다.
+
+이러한 이유로 기존 클라우드 컴퓨팅 모델에 비해 운영 부담이 줄고 경제적입니다.
+
+## 서버리스 모델
+
+### FaaS(Function as a Service)
+FaaS는 이름 그대로 이벤트를 기반으로 애플리케이션의 함수를 실행시켜 서비스를 제공합니다.
+
+HTTP 요청이나 파일 업로드 등의 이벤트가 발생하면 서버는 이벤트를 감지해 대기시켰던 함수를
+리소스를 할당해 함수를 실행시켜 결과를 반환한 후 리소스를 대기 상태로 유지합니다.
+
+FaaS를 제공하는 플랫폼으로는 AWS Lambda, Google Cloud Functions, Azure Functions 등이 있습니다.
+
+[참고자료](https://www.redhat.com/ko/topics/cloud-native-apps/what-is-faas?utm_source=chatgpt.com)
+
+### Backend-as-a-Service (BaaS)
+BaaS는 백엔드 개발에 필요한 기능을 API로 제공하는 서비스입니다.
+
+사용자 인증이나 권한관리, 테이터베이스 연동등 어플리케이션 개발에 필요한 여러 기능을 제공해
+서버 개발을 하지 않아도 빠르고 쉽게 구현 할 수 있게 됩니다.
+
+로그인이나 데이터쿼리등의 요청이 들어오면 BaaS가 제공하는 API를 호출해 해당 요청을 수행합니다.
+
+BaaS를 제공하는 대표적인 서비스는 Firebase가 있습니다.
+
+[참고자료](https://www.cloudflare.com/ko-kr/learning/serverless/glossary/backend-as-a-service-baas/?utm_source=chatgpt.com)
+
+## 서버리스의 장단점
+
+### 장점
+
+**비용**
+- 실제 사용량에 대해 비용이 청구되어 경제적입니다.
+
+**빠른 배포**
+- 서버 관리 없이 코드만 작성하면 즉시 배포할 수 있습니다.
+
+**유연한 확정성**
+- 트래픽에 따라 자동으로 확장하고 축소합니다.
+
+**서버 관리 불필요**
+- 서버에 대한 관리가 필요 없어 어플리케이션 개발에 집중할 수 있습니다.
+
+### 단점
+
+**Cold Start**
+- 요청할 때마다 서버가 실행되기 때문에 첫 요청에 대한 지연이 발생할 수 있습니다.
+
+**실행 시간 제한**
+- 서버리스는 함수가 1회 호출될 때 사용할 수 있기 때문에 긴 시간이 필요한 작업등에는 어려움이 있습니다.
+
+**종속성**
+- 클라우드 제공자에게 종속될 부감감이 큽니다.
+
+**디버깅 및 모니터링의 어려움**
- 서버에 대한 접근이 불가능하기 때문에 디버깅이나 모니터링이 어렵습니다.
\ No newline at end of file
diff --git a/src/content/posts/typeScript/CustomType.md b/src/content/posts/typeScript/CustomType.md
index 6d29c3b..61763b1 100644
--- a/src/content/posts/typeScript/CustomType.md
+++ b/src/content/posts/typeScript/CustomType.md
@@ -1,43 +1,43 @@
----
-title: 타입스크립트 커스텀 타입
-tags: [typeScript]
-date: "2023.05.20"
----
-## 커스텀 타입이란?
-
-타입스크립트에는 커스텀 타입이라는게 있다. 커스텀 타입은 말 그대로 타입을 커스텀 하여 만들 수 있다는 말인데 기존 타입에 새로운 이름을 지정해준다거나 새로운 타입을 선언해주는 것 이 가능하다.
-
-```javascript
-
- type Name = string;
- type Age = number;
-
- type Preson = {
- name : Name;
- age : Age;
- };
-
- const person: Person = {
- name : Kim,
- age : 24
- };
-
-
-```
-커스텀 타입을 사용하면 보다 강력하게 타입을 지정할 수 있다.
-
-```javascript
-
- type Position = "fixed" | "absolute" ;
-
- const menu = (position:Position = "flex") => {
- // 어쩌구 저쩌구
- };
-
- menu("absolute") // 타입 Position과 맞지 않으면 에러가 발생한다.
-
-
-```
-위와 같이 사용하면 잘못된 함수의 사용을 막을 수 있다.
-
-[https://velog.io/@cjh951114/TypeScript-2.2-%EC%BB%A4%EC%8A%A4%ED%85%80-%ED%83%80%EC%9E%85-%EC%A0%95%EC%9D%98](https://velog.io/@cjh951114/TypeScript-2.2-%EC%BB%A4%EC%8A%A4%ED%85%80-%ED%83%80%EC%9E%85-%EC%A0%95%EC%9D%98)
+---
+title: 타입스크립트 커스텀 타입
+tags: [typeScript]
+date: "2023.05.20"
+---
+## 커스텀 타입이란?
+
+타입스크립트에는 커스텀 타입이라는게 있다. 커스텀 타입은 말 그대로 타입을 커스텀 하여 만들 수 있다는 말인데 기존 타입에 새로운 이름을 지정해준다거나 새로운 타입을 선언해주는 것 이 가능하다.
+
+```javascript
+
+ type Name = string;
+ type Age = number;
+
+ type Preson = {
+ name : Name;
+ age : Age;
+ };
+
+ const person: Person = {
+ name : Kim,
+ age : 24
+ };
+
+
+```
+커스텀 타입을 사용하면 보다 강력하게 타입을 지정할 수 있다.
+
+```javascript
+
+ type Position = "fixed" | "absolute" ;
+
+ const menu = (position:Position = "flex") => {
+ // 어쩌구 저쩌구
+ };
+
+ menu("absolute") // 타입 Position과 맞지 않으면 에러가 발생한다.
+
+
+```
+위와 같이 사용하면 잘못된 함수의 사용을 막을 수 있다.
+
+[https://velog.io/@cjh951114/TypeScript-2.2-%EC%BB%A4%EC%8A%A4%ED%85%80-%ED%83%80%EC%9E%85-%EC%A0%95%EC%9D%98](https://velog.io/@cjh951114/TypeScript-2.2-%EC%BB%A4%EC%8A%A4%ED%85%80-%ED%83%80%EC%9E%85-%EC%A0%95%EC%9D%98)
diff --git a/src/content/posts/typeScript/Generics.md b/src/content/posts/typeScript/Generics.md
index 46a90e5..4ecffaf 100644
--- a/src/content/posts/typeScript/Generics.md
+++ b/src/content/posts/typeScript/Generics.md
@@ -1,73 +1,73 @@
----
-title: 타입스크립트 제너릭
-tags: [typeScript]
-date: "2023.07.11"
----
-## 제너릭이란?
-
-제너릭이란 타입을 파라미터처럼 사용 할 수 있는걸 의미한다. 제너릭의 장점으로는 다양한 타입에 대한 재사용성이 올라간다는 점이 있다.
-
-```javascript
-
- const returnFunction = (arg: number): number => {
- return arg;
- };
-
-
-```
-위의 코드를 보면 받은 파라미터를 그대로 반환해 주는데 받은 파라미터 타입이 number가 아니라면? 타입별로 함수를 만들어주게 되면 코드의 재사용성도 떨어지고 유지보수도 힘들어진다. 이떄 사용하면 좋은게 제러릭이다.
-
-```javascript
-
- const returnFunction = (arg: T): T => {
- return arg;
- };
-
- returnFunction(10);
- returnFunction("10");
- returnFunction(true);
-
-
-```
-만약 파라미터로 받은 값의 length를 확인 하고싶어 아래와 같이 작성하면 에러를 반환하게 된다. (Property 'length' does not exist on type 'T') 이때 제너릭에 배열임을 명시해주면 된다.
-
-```javascript
-
- const returnFunction = (arg: T): T => {
- return arg.length;
- };
-
-
-```
-1번과 2번은 같은 의미이다.
-
-```javascript
-
- // 1
- const returnFunction = (arg: T[]): T[] => {
- return arg.length;
- };
- // 2
- const returnFunction = (arg: Array): Array => {
- return arg.length;
- };
-
- returnFunction(10);
-
-
-```
-ts파일에서의 화살표 함수를 사용할때는 이렇게 사용하면 되는데 tsx파일에서 제너릭을 사용하게 되면 (JSX element 'T' has no corresponding closing tag.) 같은 에러가 발생한다. 를 태그로 인식해 발생하는 문제인데 이때는 아래와 같이 사용하면 된다.
-
-```javascript
-
- const returnFunction = (arg: T): T => {
- return arg;
- };
-
-
-```
-[https://www.typescriptlang.org/docs/handbook/generics.html](https://www.typescriptlang.org/docs/handbook/generics.html)
-
-[https://joshua1988.github.io/ts/guide/generics.html#%EC%A0%9C%EB%84%A4%EB%A6%AD-%EC%A0%9C%EC%95%BD-%EC%A1%B0%EA%B1%B4](https://joshua1988.github.io/ts/guide/generics.html#%EC%A0%9C%EB%84%A4%EB%A6%AD-%EC%A0%9C%EC%95%BD-%EC%A1%B0%EA%B1%B4)
-
-[https://lakelouise.tistory.com/188#%F0%9F%93%9D-union-type](https://lakelouise.tistory.com/188#%F0%9F%93%9D-union-type)
+---
+title: 타입스크립트 제너릭
+tags: [typeScript]
+date: "2023.07.11"
+---
+## 제너릭이란?
+
+제너릭이란 타입을 파라미터처럼 사용 할 수 있는걸 의미한다. 제너릭의 장점으로는 다양한 타입에 대한 재사용성이 올라간다는 점이 있다.
+
+```javascript
+
+ const returnFunction = (arg: number): number => {
+ return arg;
+ };
+
+
+```
+위의 코드를 보면 받은 파라미터를 그대로 반환해 주는데 받은 파라미터 타입이 number가 아니라면? 타입별로 함수를 만들어주게 되면 코드의 재사용성도 떨어지고 유지보수도 힘들어진다. 이떄 사용하면 좋은게 제러릭이다.
+
+```javascript
+
+ const returnFunction = (arg: T): T => {
+ return arg;
+ };
+
+ returnFunction(10);
+ returnFunction("10");
+ returnFunction(true);
+
+
+```
+만약 파라미터로 받은 값의 length를 확인 하고싶어 아래와 같이 작성하면 에러를 반환하게 된다. (Property 'length' does not exist on type 'T') 이때 제너릭에 배열임을 명시해주면 된다.
+
+```javascript
+
+ const returnFunction = (arg: T): T => {
+ return arg.length;
+ };
+
+
+```
+1번과 2번은 같은 의미이다.
+
+```javascript
+
+ // 1
+ const returnFunction = (arg: T[]): T[] => {
+ return arg.length;
+ };
+ // 2
+ const returnFunction = (arg: Array): Array => {
+ return arg.length;
+ };
+
+ returnFunction(10);
+
+
+```
+ts파일에서의 화살표 함수를 사용할때는 이렇게 사용하면 되는데 tsx파일에서 제너릭을 사용하게 되면 (JSX element 'T' has no corresponding closing tag.) 같은 에러가 발생한다. 를 태그로 인식해 발생하는 문제인데 이때는 아래와 같이 사용하면 된다.
+
+```javascript
+
+ const returnFunction = (arg: T): T => {
+ return arg;
+ };
+
+
+```
+[https://www.typescriptlang.org/docs/handbook/generics.html](https://www.typescriptlang.org/docs/handbook/generics.html)
+
+[https://joshua1988.github.io/ts/guide/generics.html#%EC%A0%9C%EB%84%A4%EB%A6%AD-%EC%A0%9C%EC%95%BD-%EC%A1%B0%EA%B1%B4](https://joshua1988.github.io/ts/guide/generics.html#%EC%A0%9C%EB%84%A4%EB%A6%AD-%EC%A0%9C%EC%95%BD-%EC%A1%B0%EA%B1%B4)
+
+[https://lakelouise.tistory.com/188#%F0%9F%93%9D-union-type](https://lakelouise.tistory.com/188#%F0%9F%93%9D-union-type)
diff --git a/src/content/posts/typeScript/Interface.md b/src/content/posts/typeScript/Interface.md
index 1db80fa..2529ec6 100644
--- a/src/content/posts/typeScript/Interface.md
+++ b/src/content/posts/typeScript/Interface.md
@@ -1,178 +1,178 @@
----
-title: 타입스크립트 인터페이스
-tags: [typeScript]
-date: "2023.05.13"
----
-타입스크립트에서는 인터페이스를 활용해 변수의 타입으로 사용할 수 있다. 인터페이스는 클래스와 비슷한데 클래스와는 다르게 정의만 할 뿐 구현이 되지 않는다는 차이점이 있다. 타입스크립트에서 인터페이스는 상호 간에 정의한 약속 혹은 규칙을 의미한다. 인터페이스는 보통 다음과 같은 범주에 대해 정의할 수 있다.
-
-- 객체의 스펙(속성과 속성의 타입)
-- 함수의 파라미터
-- 함수의 스펙(파라미터, 반환 타입 등)
-- 배열과 객체를 접근하는 방식
-- 클래스
-## 인터페이스 알아보기
-
-인터페이스는 변수의 타입으로 사용할 수 있다.
-
-```javascript
-
- // 인터페이스의 정의
- interface Info {
- name: string;
- age: number;
- }
-
- // 변수 info의 타입으로 Info 인터페이스를 선언하였다.
- const info: Info = {
- name: "Kim",
- age: 22
- };
-
-
-```
-## 옵셔널 속성
-
-인터페이스에는 ? 를 사용해서 옵셔널한 속성을 부여할 수 있다. 옵셔널한 속성을 부여하면 모든 속성을 사용하지 않아도 된다.
-
-```javascript
-
- interface Info {
- name: string;
- age?: number; // 속성의 끝에 ?를 사용해준다
- }
-
- const info = {
- name: "Kim"
- };
-
- function person(info: Info) {
- console.log(info.name) // Kim
- }
- person(info)
-
-
-```
-## 읽기 전용 속성
-
-읽기 전용 속성은 객체를 생성할때 값을 할당하면 그 이후에는 바꿀 수 없는 속성을 의미한다 readonly 속성을 앞에 사용하면 된다. 또한 ReadonlyArray 를 사용하면 배열또한 읽기전용으로 지정 할 수 있습니다.
-
-```javascript
-
- interface Info {
- readonly name: string;
- age: number;
- }
-
- const info: Info = {
- name: "Kim",
- age: 22
- };
-
- info.name = Lee // Cannot assign to 'name' because it is a read-only property.
- info.age = 30
-
-
-```
-```javascript
-
- const arr: ReadonlyArray = [1,2,3];
- arr.splice(0,1); // error
- arr.push(4); // error
- arr[0] = 100; // error
-
-```
-## 객체 선언과 관련된 타입 체킹
-
-타입스크립트를 사용한다면 좀 더 엄밀한 속성 검사를 진행한다.
-
-```javascript
-
- interface Info {
- name: string;
- }
-
- function person(info: Info) {
- // 어쩌구 저쩌구 내부 동작
- }
- person({nameoas: "Lee"})
- // Argument of type '{ nameoas: string; }' is not assignable to parameter of type 'Info'.
- // Object literal may only specify known properties, and 'nameoas' does not exist in type 'Info'.
-
-
-```
-인터페이스에 선언되어 있는 속성과 다를경우 오탈자 점검을 요하는 오류가 난다. 만일 이런 타입 추론을 무시하고 싶다면 아래와 같이 선언한다.
-
-```javascript
-
- const info = { age: 'what' }';
- brewBeer(info as Info);
- // 만일 인터페이스에 정의하지 않은 속성들을 추가로 사용하고 싶을 때는 아래와 같은 방법을 사용하면 된다.
- interface Info {
- name?: string;
- [propName: string]: any;
- }
-
-
-```
-## 클래스 타입
-
-C#이나 자바처럼 타입스크립트에서도 클래스가 일정 조건을 만족하도록 타입 규칙을 정할 수 있다.
-
-```javascript
-
- interface Info {
- name: string;
- nameFun(name: string): void;
- }
-
- class person implements Info {
- name: string = 'Lee';
- nameBeer(b: string) {
- this.name = b;
- }
- constructor() {}
- }
-
-
-```
-## 인터페이스 확장
-
-클래스와 마찬가지로 인터페이스도 인터페이스 간 확장이 가능하다.
-
-```javascript
-
- interface Info {
- name: string;
- }
- interface Developer extends Info {
- skill: string;
- }
- let fe = {} as Developer;
- fe.name = 'Lee';
- fe.skill = 'TypeScript';
-
-
-```
-혹은 아래와 같이 여러 인터페이스를 상속받아 사용할 수 있다.
-
-```javascript
-
- interface Person {
- name: string;
- }
- interface Drinker {
- drink: string;
- }
- interface Developer extends Person {
- skill: string;
- }
- let fe = {} as Developer;
- fe.name = 'josh';
- fe.skill = 'TypeScript';
- fe.drink = 'Beer';
-
-
-```
-[https://poiemaweb.com/typescript-interface](https://poiemaweb.com/typescript-interface)
-
-[https://joshua1988.github.io/ts/guide/interfaces.html#%EC%9D%B8%ED%84%B0%ED%8E%98%EC%9D%B4%EC%8A%A4](https://joshua1988.github.io/ts/guide/interfaces.html#%EC%9D%B8%ED%84%B0%ED%8E%98%EC%9D%B4%EC%8A%A4)
+---
+title: 타입스크립트 인터페이스
+tags: [typeScript]
+date: "2023.05.13"
+---
+타입스크립트에서는 인터페이스를 활용해 변수의 타입으로 사용할 수 있다. 인터페이스는 클래스와 비슷한데 클래스와는 다르게 정의만 할 뿐 구현이 되지 않는다는 차이점이 있다. 타입스크립트에서 인터페이스는 상호 간에 정의한 약속 혹은 규칙을 의미한다. 인터페이스는 보통 다음과 같은 범주에 대해 정의할 수 있다.
+
+- 객체의 스펙(속성과 속성의 타입)
+- 함수의 파라미터
+- 함수의 스펙(파라미터, 반환 타입 등)
+- 배열과 객체를 접근하는 방식
+- 클래스
+## 인터페이스 알아보기
+
+인터페이스는 변수의 타입으로 사용할 수 있다.
+
+```javascript
+
+ // 인터페이스의 정의
+ interface Info {
+ name: string;
+ age: number;
+ }
+
+ // 변수 info의 타입으로 Info 인터페이스를 선언하였다.
+ const info: Info = {
+ name: "Kim",
+ age: 22
+ };
+
+
+```
+## 옵셔널 속성
+
+인터페이스에는 ? 를 사용해서 옵셔널한 속성을 부여할 수 있다. 옵셔널한 속성을 부여하면 모든 속성을 사용하지 않아도 된다.
+
+```javascript
+
+ interface Info {
+ name: string;
+ age?: number; // 속성의 끝에 ?를 사용해준다
+ }
+
+ const info = {
+ name: "Kim"
+ };
+
+ function person(info: Info) {
+ console.log(info.name) // Kim
+ }
+ person(info)
+
+
+```
+## 읽기 전용 속성
+
+읽기 전용 속성은 객체를 생성할때 값을 할당하면 그 이후에는 바꿀 수 없는 속성을 의미한다 readonly 속성을 앞에 사용하면 된다. 또한 ReadonlyArray 를 사용하면 배열또한 읽기전용으로 지정 할 수 있습니다.
+
+```javascript
+
+ interface Info {
+ readonly name: string;
+ age: number;
+ }
+
+ const info: Info = {
+ name: "Kim",
+ age: 22
+ };
+
+ info.name = Lee // Cannot assign to 'name' because it is a read-only property.
+ info.age = 30
+
+
+```
+```javascript
+
+ const arr: ReadonlyArray = [1,2,3];
+ arr.splice(0,1); // error
+ arr.push(4); // error
+ arr[0] = 100; // error
+
+```
+## 객체 선언과 관련된 타입 체킹
+
+타입스크립트를 사용한다면 좀 더 엄밀한 속성 검사를 진행한다.
+
+```javascript
+
+ interface Info {
+ name: string;
+ }
+
+ function person(info: Info) {
+ // 어쩌구 저쩌구 내부 동작
+ }
+ person({nameoas: "Lee"})
+ // Argument of type '{ nameoas: string; }' is not assignable to parameter of type 'Info'.
+ // Object literal may only specify known properties, and 'nameoas' does not exist in type 'Info'.
+
+
+```
+인터페이스에 선언되어 있는 속성과 다를경우 오탈자 점검을 요하는 오류가 난다. 만일 이런 타입 추론을 무시하고 싶다면 아래와 같이 선언한다.
+
+```javascript
+
+ const info = { age: 'what' }';
+ brewBeer(info as Info);
+ // 만일 인터페이스에 정의하지 않은 속성들을 추가로 사용하고 싶을 때는 아래와 같은 방법을 사용하면 된다.
+ interface Info {
+ name?: string;
+ [propName: string]: any;
+ }
+
+
+```
+## 클래스 타입
+
+C#이나 자바처럼 타입스크립트에서도 클래스가 일정 조건을 만족하도록 타입 규칙을 정할 수 있다.
+
+```javascript
+
+ interface Info {
+ name: string;
+ nameFun(name: string): void;
+ }
+
+ class person implements Info {
+ name: string = 'Lee';
+ nameBeer(b: string) {
+ this.name = b;
+ }
+ constructor() {}
+ }
+
+
+```
+## 인터페이스 확장
+
+클래스와 마찬가지로 인터페이스도 인터페이스 간 확장이 가능하다.
+
+```javascript
+
+ interface Info {
+ name: string;
+ }
+ interface Developer extends Info {
+ skill: string;
+ }
+ let fe = {} as Developer;
+ fe.name = 'Lee';
+ fe.skill = 'TypeScript';
+
+
+```
+혹은 아래와 같이 여러 인터페이스를 상속받아 사용할 수 있다.
+
+```javascript
+
+ interface Person {
+ name: string;
+ }
+ interface Drinker {
+ drink: string;
+ }
+ interface Developer extends Person {
+ skill: string;
+ }
+ let fe = {} as Developer;
+ fe.name = 'josh';
+ fe.skill = 'TypeScript';
+ fe.drink = 'Beer';
+
+
+```
+[https://poiemaweb.com/typescript-interface](https://poiemaweb.com/typescript-interface)
+
+[https://joshua1988.github.io/ts/guide/interfaces.html#%EC%9D%B8%ED%84%B0%ED%8E%98%EC%9D%B4%EC%8A%A4](https://joshua1988.github.io/ts/guide/interfaces.html#%EC%9D%B8%ED%84%B0%ED%8E%98%EC%9D%B4%EC%8A%A4)
diff --git a/src/content/posts/typeScript/TsTypeLearn.md b/src/content/posts/typeScript/TsTypeLearn.md
index 7261f93..0a1eeb4 100644
--- a/src/content/posts/typeScript/TsTypeLearn.md
+++ b/src/content/posts/typeScript/TsTypeLearn.md
@@ -1,159 +1,159 @@
----
-title: 타입스크립트 타입 종류
-tags: [typeScript]
-date: "2023.05.09"
----
-타입스크립트에 대한 수요가 늘어나 타입스크립트를 공부하면서 정리해보려 한다. 타입스크립트는 타입을 지정해 줌으로써 기존 자바스크립트에서 발생하는 에러를 미리 예방 할 수 있다는 장점이 있다.
-
-## 타입스크립트 기본타입
-
-- Boolean
-- Number
-- String
-- Array
-- Tuple
-- Enum
-- any
-- void
-- Object
-- never
-## Boolean
-
-참/거짓(true/false)에 대한 타입이다
-
-```javascript
-
- const isTrue: boolean = false;
-
-
-```
-## Number
-
-값이 숫자이면 다음과 같이 선언한다.
-
-```javascript
-
- const num: number = 6;
-
-
-```
-## String
-
-값이 문자열이면 다음과 같이 선언한다.
-
-```javascript
-
- const str: string = 'string';
-
-
-```
-## Array
-
-값이 배열일 경우 다음과 같이 선언한다.
-
-```javascript
-
- const arr: number[] = [1,2,3];
- const arr: Array = [1,2,3];
-
-
-```
-## Tuple
-
-Tuple은 배열의 길이가 고정되고 각 요소의 타입이 지정되어 있는 배열 형식을 의미합니다.
-
-```javascript
-
- let arr: [string, number] = ['hi', 10];
- // 정의 하지 않은 타입, 인덱스로 접근할 경우 오류가 난다.
- arr[1].concat('!'); // Error, 'number' does not have 'concat'
- arr[5] = 'hello'; // Error, Property '5' does not exist on type '[string, number]'.
-
-
-```
-## Enum
-
-Enum은 C, Java와 같은 다른 언어에서 흔하게 쓰이는 타입으로 특정 값(상수)들의 집합을 의미합니다.
-
-```javascript
-
- enum Avengers { Capt, IronMan, Thor }
- let hero: Avengers = Avengers.Capt;
- //
- enum Avengers { Capt, IronMan, Thor }
- let hero: Avengers = Avengers[0];
- //
- enum Avengers { Capt = 2, IronMan, Thor }
- let hero: Avengers = Avengers[2]; // Capt
- let hero: Avengers = Avengers[4]; // Thor
-
-
-```
-## any
-
-any는 모든 타입에 대해서 혀용한다는 의미를 가지고 있다 하지만 너무 남발하게 되면 TypeScript를 사용하는 의미를 잃어버리니 조심하도록 하자.
-
-```javascript
-
- const str: any = 'hi';
- const num: any = 10;
- const arr: any = ['a', 2, true];
-
-
-```
-## void
-
-void는 어떤 값도 존재 할 수 없을을 나타낸다.
-
-```javascript
-
- let unusable: void = undefined;
- unusable: void = null;
- // 함수일 경우 반환 하는 값이 없으면 void로 지정한다.
- function returnNothing(): void {
- return;
- }
-
-
-```
-## object
-
-object는 interface, class의 상위 타입이다. object로 정의하면 any타입처럼 모든 값을 할당 할 수 있다. 하지만 any와 같이 typeScript를 사용하는 의미가 없어지니 조심하자.
-
-```javascript
-
- let obj: object = { name: 'NAME', age: 29 };
-
- obj = { A: 'A', B: 'B' };
-
-
-```
-## Never
-
-Never타입은 절대 발생할 수 없는 타입을 나타낸다.
-
-```javascript
-
- // never를 반환하는 함수는 함수의 마지막에 도달할 수 없다.
- function error(message: string): never {
- throw new Error(message);
- }
-
- // 반환 타입이 never로 추론된다.
- function fail() {
- return error("Something failed");
- }
-
- // never를 반환하는 함수는 함수의 마지막에 도달할 수 없다.
- function infiniteLoop(): never {
- while (true) {
- }
- }
-
-
-```
-[https://joshua1988.github.io/ts/guide/basic-types.html](https://joshua1988.github.io/ts/guide/basic-types.html)
-
-[https://www.typescriptlang.org/docs/handbook/2/everyday-types.html](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html)
-
-[https://joshua1988.github.io/ts/guide/basic-types.html#%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B8%B0%EB%B3%B8-%ED%83%80%EC%9E%85](https://joshua1988.github.io/ts/guide/basic-types.html#%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B8%B0%EB%B3%B8-%ED%83%80%EC%9E%85)
+---
+title: 타입스크립트 타입 종류
+tags: [typeScript]
+date: "2023.05.09"
+---
+타입스크립트에 대한 수요가 늘어나 타입스크립트를 공부하면서 정리해보려 한다. 타입스크립트는 타입을 지정해 줌으로써 기존 자바스크립트에서 발생하는 에러를 미리 예방 할 수 있다는 장점이 있다.
+
+## 타입스크립트 기본타입
+
+- Boolean
+- Number
+- String
+- Array
+- Tuple
+- Enum
+- any
+- void
+- Object
+- never
+## Boolean
+
+참/거짓(true/false)에 대한 타입이다
+
+```javascript
+
+ const isTrue: boolean = false;
+
+
+```
+## Number
+
+값이 숫자이면 다음과 같이 선언한다.
+
+```javascript
+
+ const num: number = 6;
+
+
+```
+## String
+
+값이 문자열이면 다음과 같이 선언한다.
+
+```javascript
+
+ const str: string = 'string';
+
+
+```
+## Array
+
+값이 배열일 경우 다음과 같이 선언한다.
+
+```javascript
+
+ const arr: number[] = [1,2,3];
+ const arr: Array = [1,2,3];
+
+
+```
+## Tuple
+
+Tuple은 배열의 길이가 고정되고 각 요소의 타입이 지정되어 있는 배열 형식을 의미합니다.
+
+```javascript
+
+ let arr: [string, number] = ['hi', 10];
+ // 정의 하지 않은 타입, 인덱스로 접근할 경우 오류가 난다.
+ arr[1].concat('!'); // Error, 'number' does not have 'concat'
+ arr[5] = 'hello'; // Error, Property '5' does not exist on type '[string, number]'.
+
+
+```
+## Enum
+
+Enum은 C, Java와 같은 다른 언어에서 흔하게 쓰이는 타입으로 특정 값(상수)들의 집합을 의미합니다.
+
+```javascript
+
+ enum Avengers { Capt, IronMan, Thor }
+ let hero: Avengers = Avengers.Capt;
+ //
+ enum Avengers { Capt, IronMan, Thor }
+ let hero: Avengers = Avengers[0];
+ //
+ enum Avengers { Capt = 2, IronMan, Thor }
+ let hero: Avengers = Avengers[2]; // Capt
+ let hero: Avengers = Avengers[4]; // Thor
+
+
+```
+## any
+
+any는 모든 타입에 대해서 혀용한다는 의미를 가지고 있다 하지만 너무 남발하게 되면 TypeScript를 사용하는 의미를 잃어버리니 조심하도록 하자.
+
+```javascript
+
+ const str: any = 'hi';
+ const num: any = 10;
+ const arr: any = ['a', 2, true];
+
+
+```
+## void
+
+void는 어떤 값도 존재 할 수 없을을 나타낸다.
+
+```javascript
+
+ let unusable: void = undefined;
+ unusable: void = null;
+ // 함수일 경우 반환 하는 값이 없으면 void로 지정한다.
+ function returnNothing(): void {
+ return;
+ }
+
+
+```
+## object
+
+object는 interface, class의 상위 타입이다. object로 정의하면 any타입처럼 모든 값을 할당 할 수 있다. 하지만 any와 같이 typeScript를 사용하는 의미가 없어지니 조심하자.
+
+```javascript
+
+ let obj: object = { name: 'NAME', age: 29 };
+
+ obj = { A: 'A', B: 'B' };
+
+
+```
+## Never
+
+Never타입은 절대 발생할 수 없는 타입을 나타낸다.
+
+```javascript
+
+ // never를 반환하는 함수는 함수의 마지막에 도달할 수 없다.
+ function error(message: string): never {
+ throw new Error(message);
+ }
+
+ // 반환 타입이 never로 추론된다.
+ function fail() {
+ return error("Something failed");
+ }
+
+ // never를 반환하는 함수는 함수의 마지막에 도달할 수 없다.
+ function infiniteLoop(): never {
+ while (true) {
+ }
+ }
+
+
+```
+[https://joshua1988.github.io/ts/guide/basic-types.html](https://joshua1988.github.io/ts/guide/basic-types.html)
+
+[https://www.typescriptlang.org/docs/handbook/2/everyday-types.html](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html)
+
+[https://joshua1988.github.io/ts/guide/basic-types.html#%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B8%B0%EB%B3%B8-%ED%83%80%EC%9E%85](https://joshua1988.github.io/ts/guide/basic-types.html#%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B8%B0%EB%B3%B8-%ED%83%80%EC%9E%85)
diff --git a/src/content/posts/typeScript/TypeInference.md b/src/content/posts/typeScript/TypeInference.md
index 3009303..024454e 100644
--- a/src/content/posts/typeScript/TypeInference.md
+++ b/src/content/posts/typeScript/TypeInference.md
@@ -1,59 +1,59 @@
----
-title: 타입스크립트 타입 추론
-tags: [typeScript]
-date: "2023.08.15"
----
-## 타입추론
-
-타입스크립트에서는 명시적인 타입 표시가 없을때 타입에 대한 정보를 제공한다.
-
-```javascript
-
- // 일반적인 유형
- let x = 3; // x는 number로 추론된다.
-
- // 구조분해 코드
- let arr = [0, 1, null];
- let [a, b, c] = arr; // a, b, c는 number | null 타입으로 추론된다.
-
-
-```
-일반적인 뿐만이 아니라 구조분해 코드에서도 타입추론이 되어 유용하게 사용 할 수 있다.
-
-타입추론이 이렇게 유용하다면 타입을 적어주지 않아도 될까? 그렇다면 타입스크립트를 사용하는 의미가 없어진다고 생각한다. 그럼 타입추론을 사용할 때와 강력한 타입 규칙을 사용 예시를 들어보도록 하겠다.
-
-```javascript
-
- // string 으로 추론이 된다.
- const theme = {
- dark : "dark",
- light : "light",
- }
-
-
-```
-위와 같이 다크모드 인지 라이트모드인지 명시 되어 있는 문자열 리터럴 타입이 있다. 하지만 확인해 보면 value가 srting으로 되어 있는데 이럴 땐 직접 타입을 지정해 주어야 원치 않는 에러를 막을 수 있다.
-
-```javascript
-
- type ThemeObj = {
- dark: "dark";
- light: "light";
- };
-
- const theme: ThemeObj = {
- dark : "dark",
- light : "light",
- }
-
- // 혹은
- const theme = {
- dark : "dark",
- light : "light",
- } as const
-
-
-```
-[https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#type-assertions](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#type-assertions)
-
-[https://www.typescriptlang.org/docs/handbook/type-inference.html](https://www.typescriptlang.org/docs/handbook/type-inference.html)
+---
+title: 타입스크립트 타입 추론
+tags: [typeScript]
+date: "2023.08.15"
+---
+## 타입추론
+
+타입스크립트에서는 명시적인 타입 표시가 없을때 타입에 대한 정보를 제공한다.
+
+```javascript
+
+ // 일반적인 유형
+ let x = 3; // x는 number로 추론된다.
+
+ // 구조분해 코드
+ let arr = [0, 1, null];
+ let [a, b, c] = arr; // a, b, c는 number | null 타입으로 추론된다.
+
+
+```
+일반적인 뿐만이 아니라 구조분해 코드에서도 타입추론이 되어 유용하게 사용 할 수 있다.
+
+타입추론이 이렇게 유용하다면 타입을 적어주지 않아도 될까? 그렇다면 타입스크립트를 사용하는 의미가 없어진다고 생각한다. 그럼 타입추론을 사용할 때와 강력한 타입 규칙을 사용 예시를 들어보도록 하겠다.
+
+```javascript
+
+ // string 으로 추론이 된다.
+ const theme = {
+ dark : "dark",
+ light : "light",
+ }
+
+
+```
+위와 같이 다크모드 인지 라이트모드인지 명시 되어 있는 문자열 리터럴 타입이 있다. 하지만 확인해 보면 value가 srting으로 되어 있는데 이럴 땐 직접 타입을 지정해 주어야 원치 않는 에러를 막을 수 있다.
+
+```javascript
+
+ type ThemeObj = {
+ dark: "dark";
+ light: "light";
+ };
+
+ const theme: ThemeObj = {
+ dark : "dark",
+ light : "light",
+ }
+
+ // 혹은
+ const theme = {
+ dark : "dark",
+ light : "light",
+ } as const
+
+
+```
+[https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#type-assertions](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#type-assertions)
+
+[https://www.typescriptlang.org/docs/handbook/type-inference.html](https://www.typescriptlang.org/docs/handbook/type-inference.html)
diff --git a/src/content/posts/typeScript/Typescript-Overview-2.md b/src/content/posts/typeScript/Typescript-Overview-2.md
index a8d808f..ad58170 100644
--- a/src/content/posts/typeScript/Typescript-Overview-2.md
+++ b/src/content/posts/typeScript/Typescript-Overview-2.md
@@ -1,305 +1,305 @@
----
-title: 타입스크립트 정리 - 2
-tags: [typeScript]
-date: "2024.08.24"
----
-저번주에 타입스크립트의 기본 문법과 속성에 대해 정리했는데
-오늘은 타입스크립트에서 제공하는 유틸들에 대해 정리해보도록 하겠습니다.
-
-## 유틸리티 타입
-
-### `Partial`
-`Partial`는 객체의 타입을 `?` 옵셔널 프로퍼티로 만들어줍니다.
-```typescript
-interface Person {
- name: string;
- age: number;
-}
-
-const person: Partial = {
- name: 'John',
-};
-
-// 이렇게 바뀝니다.
-// interface Person {
-// name?: string;
-// age?: number;
-// }
-```
-
-### `Required`
-`Required`는 객체의 모든 속성을 필수로 만들어 줍니다.
-```typescript
-interface Person {
- name?: string;
- age?: number;
-}
-
-const person: Required = {
- name: 'John',
- age: 30,
-};
-
-// 이렇게 바뀝니다.
-// interface Person {
-// name: string;
-// age: number;
-// }
-```
-
-### `Readonly`
-`Readonly`는 속성을 읽기 전용으로 만들어주며 속성을 수정할 수 없게 만들 때 사용합니다.
-```typescript
-interface Person {
- name: string;
- age: number;
-}
-
-const person: Readonly = {
- name: 'John',
- age: 30,
-};
-
-person.name = 'Doe';
-// Cannot assign to 'name' because it is a read-only property.ts(2540)
-```
-
-### `Record`
-`Record`는 키 타입 `K` 와 값 타입 `T`를 가지는 객체 타입을 만듭니다.
-```typescript
-type Person = 'name' | 'age';
-type Info = string;
-
-const personInfo: Record = {
- name: 'John',
- age: '30',
-};
-
-// 이런 타입이 생성됩니다.
-// type personInfo {
-// name: string;
-// age: string;
-// }
-```
-
-### `Pick`
-`Pick`는 타입 `T`에서 일부 속성을 선택해 새로운 타입을 만듭니다.
-```typescript
-interface Person {
- name: string;
- age: number;
- address: string;
-}
-
-type PersonName = Pick; // name 속성만 선택
-
-// 이런 타입이 생성됩니다.
-// type personInfo = {
-// name: string;
-// }
-```
-
-### `Omit`
-`Omit`는 타입 `T`에서 특정 속성 `K`를 제외한 속성들을 가진 새로운 타입을 만듭니다.
-```typescript
-interface Person {
- name: string;
- age: number;
- address: string;
-}
-
-type PersonWithoutAddress = Omit; // address 속성 제외
-
-// 이런 타입이 생성됩니다.
-// type PersonWithoutAddress = {
-// name: string;
-// age: number;
-// }
-```
-
-### `Exclude`
-`Exclude`는 타입 `T`에서 타입 `U`에 포함된 타입을 제외한 새로운 타입을 만듭니다.
-```typescript
-type A = string | number | boolean;
-type B = number | boolean;
-
-type C = Exclude; // string만 남음
-
-// 이런 타입이 생성됩니다.
-// type C = string
-```
-### `Extract`
-`Extract`는 타입 `T`에서 타입`U`에 포함된 타입을 추출해 새로운 타입을 만듭니다.
-```typescript
-type A = string | number | boolean;
-type B = number | boolean;
-
-type C = Extract;
-
-// 이런 타입이 생성됩니다.
-// type C = number | boolean
-```
-
-### `NonNullable`
-`NonNullable`는 타입 `T`에서 `null`과 `undifined`를 제외한 새로운 타입을 만듭니다.
-```typescript
-type T = string | null | undefined;
-
-type NonNullT = NonNullable;
-
-// 이런 타입이 생성됩니다.
-// type NonNullT = string
-```
-### `Parameters`
-`Parameters`는 함수 타입 `T`에서 함수의 파라미터를 튜플 형식으로 추출합니다.
-```typescript
-type Func = (a: number, b: string) => void;
-type Params = Parameters;
-
-// 이런 타입이 생성됩니다.
-// type Params = [a: number, b: string]
-```
-
-### `ConstructorParameters`
-`ConstructorParameters`는 클래스 생성자 함수에 매개변수 타입을 튜플 형식으로 추출합니다.
-```typescript
-class Person {
- constructor(public name: string, public age: number) {}
-}
-
-type ConstructorParams = ConstructorParameters;
-
-// 이런 타입이 생성됩니다.
-// type ConstructorParams = [name: string, age: number]
-```
-
-### `ReturnType`
-`ReturnType`는 함수 타입 `T`에서 반환값의 타입을 추출합니다.
-```typescript
-type Func = (a: number, b: string) => boolean;
-type Return = ReturnType;
-
-// 이런 타입이 생성됩니다.
-// type Return = boolean
-```
-
-### `InstanceType`
-`InstanceType`는 생성자 함수 타입 `T`에서 해당 클래스의 인스턴트 타입을 추출합니다.
-```typescript
-class Person {
- name: string;
- constructor(name: string) {
- this.name = name;
- }
-}
-
-type PersonInstance = InstanceType;
-
-// 이런 타입이 생성됩니다.
-// type PersonInstance = Person
-```
-
-### `Awaited`
-`Awaited`는 프로미스에서 반환값의 타입을 추출합니다.
-```typescript
-type Response = Promise;
-
-type Resolved = Awaited;
-
-// 이런 타입이 생성됩니다.
-// type Resolved = number
-```
-
-### `ThisType`
-`ThisType`는 객체의 컨텍스트`this` 타입을 지정할 때 사용됩니다.
-```typescript
-type ObjectWithThis = {
- name: string;
- greet: () => void;
-} & ThisType<{ name: string }>;
-
-const obj: ObjectWithThis = {
- name: 'John',
- greet() {
- console.log(this.name);
- },
-};
-
-// this의 타입이 { name: string }으로 추론됩니다.
-```
-
-### `NoInfer`
-`NoInfer`는 타입 추론을 막고 명시적으로 타입을 선언하도록 합니다.
-```typescript
-function example(arg: NoInfer): T {
- return arg;
-}
-
-const result1 = example(42); // example(arg: number): number
-const result2 = example(42); // example(arg: unknown): unknown
-```
-
-### `ThisParameterType`
-`ThisParameterType`는 `this` 파라미터의 타입을 추출합니다.
-```typescript
-function toHex(this: Number) {
- return this.toString(16);
-}
-
-function numberToString(n: ThisParameterType) {
- return toHex.apply(n);
-}
-
-// 이런 타입이 생성됩니다.
-// numberToString(n: ThisParameterType<(this: Number) => string>): string
-```
-
-### `OmitThisParameter`
-`OmitThisParameter`는 함수 타입에서 `this` 파라미터 타입을 제거합니다.
-```typescript
-function toHex(this: Number) {
- return this.toString(16);
-}
-
-const fiveToHex: OmitThisParameter = toHex.bind(5);
-
-// 이런 타입이 생성됩니다.
-// fiveToHex: () => string
-```
-
-
-## 내장 문자열 조작 타입
-
-### `Uppercase`
-`Uppercase`는 문자열의 모든 문자를 대문자로 변환합니다.
-```typescript
-type UppercaseExample = Uppercase<'hello world'>;
-// 결과: 'HELLO WORLD'
-```
-
-### `Lowercase`
-`Lowercase`는 문자열의 모든 문자를 소문자로 변환합니다.
-```typescript
-type LowercaseExample = Lowercase<'HELLO WORLD'>;
-// 결과: 'hello world'
-```
-
-### `Capitalize`
-`Capitalize`는 문자열의 첫 번째 문자만 대문자로 변환합니다.
-```typescript
-type CapitalizeExample = Capitalize<'hello world'>;
-// 결과: 'Hello world'
-```
-
-### `Uncapitalize`
-`Uncapitalize`는 문자열의 첫 번째 문자만 소문자로 변환합니다.
-```typescript
-type UncapitalizeExample = Uncapitalize<'Hello World'>;
-// 결과: 'hello World'
-```
-
-## 마치며
-평소 타입스크립트를 사용하면서도 막연하게 사용하던 유틸리티 타입들에 대해 정리하고 넘어갈 수 있는 시간이 되어 너무 좋았고 이 시간 이후로는 유틸리티 타입과 다양한 타입 연산자를 활용해 더욱 효율적이고 간결하게 타입을 다루는 연습을 해야겠습니다.
-
-## 참고자료
+---
+title: 타입스크립트 정리 - 2
+tags: [typeScript]
+date: "2024.08.24"
+---
+저번주에 타입스크립트의 기본 문법과 속성에 대해 정리했는데
+오늘은 타입스크립트에서 제공하는 유틸들에 대해 정리해보도록 하겠습니다.
+
+## 유틸리티 타입
+
+### `Partial`
+`Partial`는 객체의 타입을 `?` 옵셔널 프로퍼티로 만들어줍니다.
+```typescript
+interface Person {
+ name: string;
+ age: number;
+}
+
+const person: Partial = {
+ name: 'John',
+};
+
+// 이렇게 바뀝니다.
+// interface Person {
+// name?: string;
+// age?: number;
+// }
+```
+
+### `Required`
+`Required`는 객체의 모든 속성을 필수로 만들어 줍니다.
+```typescript
+interface Person {
+ name?: string;
+ age?: number;
+}
+
+const person: Required = {
+ name: 'John',
+ age: 30,
+};
+
+// 이렇게 바뀝니다.
+// interface Person {
+// name: string;
+// age: number;
+// }
+```
+
+### `Readonly`
+`Readonly`는 속성을 읽기 전용으로 만들어주며 속성을 수정할 수 없게 만들 때 사용합니다.
+```typescript
+interface Person {
+ name: string;
+ age: number;
+}
+
+const person: Readonly = {
+ name: 'John',
+ age: 30,
+};
+
+person.name = 'Doe';
+// Cannot assign to 'name' because it is a read-only property.ts(2540)
+```
+
+### `Record`
+`Record`는 키 타입 `K` 와 값 타입 `T`를 가지는 객체 타입을 만듭니다.
+```typescript
+type Person = 'name' | 'age';
+type Info = string;
+
+const personInfo: Record = {
+ name: 'John',
+ age: '30',
+};
+
+// 이런 타입이 생성됩니다.
+// type personInfo {
+// name: string;
+// age: string;
+// }
+```
+
+### `Pick`
+`Pick`는 타입 `T`에서 일부 속성을 선택해 새로운 타입을 만듭니다.
+```typescript
+interface Person {
+ name: string;
+ age: number;
+ address: string;
+}
+
+type PersonName = Pick; // name 속성만 선택
+
+// 이런 타입이 생성됩니다.
+// type personInfo = {
+// name: string;
+// }
+```
+
+### `Omit`
+`Omit`는 타입 `T`에서 특정 속성 `K`를 제외한 속성들을 가진 새로운 타입을 만듭니다.
+```typescript
+interface Person {
+ name: string;
+ age: number;
+ address: string;
+}
+
+type PersonWithoutAddress = Omit; // address 속성 제외
+
+// 이런 타입이 생성됩니다.
+// type PersonWithoutAddress = {
+// name: string;
+// age: number;
+// }
+```
+
+### `Exclude`
+`Exclude`는 타입 `T`에서 타입 `U`에 포함된 타입을 제외한 새로운 타입을 만듭니다.
+```typescript
+type A = string | number | boolean;
+type B = number | boolean;
+
+type C = Exclude; // string만 남음
+
+// 이런 타입이 생성됩니다.
+// type C = string
+```
+### `Extract`
+`Extract`는 타입 `T`에서 타입`U`에 포함된 타입을 추출해 새로운 타입을 만듭니다.
+```typescript
+type A = string | number | boolean;
+type B = number | boolean;
+
+type C = Extract;
+
+// 이런 타입이 생성됩니다.
+// type C = number | boolean
+```
+
+### `NonNullable`
+`NonNullable`는 타입 `T`에서 `null`과 `undifined`를 제외한 새로운 타입을 만듭니다.
+```typescript
+type T = string | null | undefined;
+
+type NonNullT = NonNullable;
+
+// 이런 타입이 생성됩니다.
+// type NonNullT = string
+```
+### `Parameters`
+`Parameters`는 함수 타입 `T`에서 함수의 파라미터를 튜플 형식으로 추출합니다.
+```typescript
+type Func = (a: number, b: string) => void;
+type Params = Parameters;
+
+// 이런 타입이 생성됩니다.
+// type Params = [a: number, b: string]
+```
+
+### `ConstructorParameters`
+`ConstructorParameters`는 클래스 생성자 함수에 매개변수 타입을 튜플 형식으로 추출합니다.
+```typescript
+class Person {
+ constructor(public name: string, public age: number) {}
+}
+
+type ConstructorParams = ConstructorParameters;
+
+// 이런 타입이 생성됩니다.
+// type ConstructorParams = [name: string, age: number]
+```
+
+### `ReturnType`
+`ReturnType 
- spde3289
-