Cache-control ์ด์ฉํ๋ ๋ฉ์์ง : ์์ฒญ, ์๋ต ํด๋ผ์ด์ธํธ์ ์๋ฒ๊ฐ ๋ฐ๋ผ์ผ ํ๋ ์บ์๋ฐฉ๋ฒ์ ๋ํ๋ธ๋ค. ๋๋ ํฐ๋ธ๋ก ๋ถ๋ฆฌ๋ ๋ช ๋ น์ ์ฌ์ฉํ์ฌ ์บ์ฑ ๋์์ ์ง์ ํ๋ค. ์ง์ ํ ๋๋ ํฐ๋ธ์๋ ํ๋ผ๋ฏธํฐ๊ฐ ์๋ ๊ฒ๊ณผ ์๋ ๊ฒ๋ ์์ผ๋ฉฐ ์ฌ๋ฌ ๊ฐ์ ๋๋ ํฐ๋ธ๋ฅผ ์ง์ ํ๋ ๊ฒฝ์ฐ์๋ ์ฝค
๋ผ์ฐํ ์ด๋? ์ด๋ค ๋คํธ์ํฌ ์์์ ํต์ ๋ฐ์ดํฐ๋ฅผ ๋ณด๋ผ ๋ ์ต์ ์ ๊ฒฝ๋ก๋ฅผ ์ ํํ๋ ๊ณผ์ ์ต์ ์ ๊ฒฝ๋ก : ์ฃผ์ด์ง ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ฅ ์งง์ ๊ฑฐ๋ฆฌ๋ก ๋๋ ๊ฐ์ฅ ์ ์ ์๊ฐ ์์ ์ ์กํ ์ ์๋ ๊ฒฝ๋ก โก๏ธ ๊ฒฝ๋ก์ ๋ฐ๋ผ์ ์ด๋ค ์ปจํ ์ธ ๋ฅผ ์ด๋ค ๋ฐฉ์์ผ๋ก ๋ณด์ฌ์ค ๊ฒ์ธ์ง๋ฅผ ๊ฒฐ์ ํ๋
๐ HTTP/0.9 GET ๋ฉ์๋๋ง ์ง์ HTTP ํค๋๊ฐ ์์ด์ HTML ํ์ผ๋ง ์ ์ก ๊ฐ๋ฅ / HTML ํ์ผ ์์ฒด๋ฅผ ์๋ต์ผ๋ก ๋ณด๋ด์ค. ์ํ์ฝ๋๋ ์์์. ์ด์ฐฝ๊ธฐ์ HTTP. HTTP/0.9 ๋ฒ์ ์์๋ GET ๋ฉ์๋๋ง ์ง์ํ๊ณ HTTP ํค๋๊ฐ ์์ด์ HTML ํ์ผ
CSS ์ ์์๊ฐ ์ ์ํ๋ ๊ฐ์ฒด๋ก, ๋ฌธ์ ์ ๋ฐ์ ์ผ๋ก ์ฌ์ฌ์ฉํ ์์์ ๊ฐ์ ๋ด๋๋ค. ์ ์ฉ ํ๊ธฐ๋ฒ์ ์ฌ์ฉํด ์ ์ํ๋ค. (--main-color: black;)var() ํจ์๋ฅผ ์ฌ์ฉํด ์ ๊ทผํ ์ ์๋ค. (color: var(--main-color);)์ฒซ๋ฒ์งธ ์ด์ . ๋ณต์กํ ์น
๐๏ธ Datepicker๋? ์ฌ์ฉ์๊ฐ ์บ๋ฆฐ๋์์ ๋ ์ง๋ฅผ ์ ํํ ์ ์๋ jQuery ๊ธฐ๋ฐ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๐๏ธ Datepicker ์์ ฏ ์ ์ฉํ๊ธฐ 1. jQuery, jQuery UI ํ์ผ์ ๋ค์ด๋ฐ์ ์น ํ์ด์ง์ ๋ก๋ jQuery๋ ์๋ฐ์คํฌ๋ฆฝํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ด๋ฏ๋ก, jQ
์์ ์ฌ์ง์ฒ๋ผ column์ width๊ฐ ๊นจ์ง๋ ๋ฌธ์ ๊ฐ ๋ฐ์ํ๋ค. ์ด ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด์๋ ์๋์ css ์ฝ๋๋ฅผ ์ถ๊ฐํด์ฃผ์ด์ผ ํ๋ค.mdn ํ ์คํ์ผ๋ง
์น ๊ฐ๋ฐ์์ hydration ๋๋ rehydration์ ํด๋ผ์ด์ธํธ ์ธก JavaScript๊ฐ ์ ์ ํธ์คํ ๋๋ server-side rendering์ ํตํด ์ ๋ฌ๋ ์ ์ HTML ์น ํ์ด์ง๋ฅผ ์ด๋ฒคํธ ํธ๋ค๋ฌ๋ฅผ HTML ์์์ ์ฒจ๋ถํ์ฌ ๋์ ์น ํ์ด์ง๋ก ๋ณํํ๋ ๊ธฐ๋ฒ์ด๋ค
Static Assets Next.js๋ ์ด๋ฏธ์ง์ ๊ฐ์ ์ ์ ํ์ผ์ ๋ฃจํธ ๋๋ ํฐ๋ฆฌ์ public ์ด๋ผ๋ ํด๋ ์๋์ ์ ๊ณตํ ์ ์๋ค. ๊ทธ๋ฌ๋ฉด ๊ธฐ๋ณธ URL(/)์์ ์์ํ๋ ์ฝ๋์์ public ๋ด๋ถ์ ํ์ผ์ ์ฐธ์กฐํ ์ ์๋ค. ์๋ฅผ ๋ค์ด, public/avatars/m
๐งญ ์ ๋ URL vs ์๋ URL URL์ ๋งฅ๋ฝ์์ ์ ๋์ ์๋์ ์ฐจ์ด๊ฐ ๋ฌด์์ ์๋ฏธํ๋์ง ์ดํด๋ณด์. URL์ ํ์ ๋ถ๋ถ์ URL์ด ์ฌ์ฉ๋๋ context์ ๋ฐ๋ผ ํฌ๊ฒ ๋ฌ๋ผ์ง๋ค. ๋ธ๋ผ์ฐ์ ์ ์ฃผ์ ํ์์ค์์ URL์ ์๋ฌด ๋งฅ๋ฝ์ด ์์ผ๋ฏ๋ก ์ ์ฒด(๋๋ ์ ๋) URL์ ์
ํ๋ก์ ํธ๋ฅผ ์งํํ๋ ์ค ๊ฑด๊ฐ๋ณดํ์ฌ์ฌํ๊ฐ์์์ ๊ด๋ฆฌํ๋ ๋ณ์ ์ ๋ณด ๋ฐ์ดํฐ๋ฅผ ํ์ฉํ ์ผ์ด ์๊ฒผ๋ค. ์์ ํ์ผ๋ก ๋ฐ์ดํฐ๋ฅผ ๋ค์ด๋ก๋ ๋ฐ์๋๋ฐ ์ด ์ค์์ ํ์ํ ๋ฐ์ดํฐ๋ค์ json ํ์์ผ๋ก ๋ณํํด์ ๊ฐ์ ธ๋ค ์ฐ๊ณ ์ถ์๋ค. ์์ ํ์ผ์ ๋ฐ์ดํฐ๋ฅผ ๊ณจ๋ผ๋ด์ด json ํ์์ผ๋ก ๋ณํํ๊ธฐ
๊ฐ๋ฐ์๊ฐ ์ปจํ ์ด๋๋ฅผ ๋น๋, ๋ฐฐํฌ, ์คํ, ์ ๋ฐ์ดํธ, ๊ด๋ฆฌํ ์ ์๋ ์คํ ์์ค ํ๋ซํผ์ด๋ค.Docker ์ด๋ฏธ์ง์๋ ์คํ ๊ฐ๋ฅํ ์ ํ๋ฆฌ์ผ์ด์ ์์ค ์ฝ๋๋ ๋ฌผ๋ก , ์ด ์ ํ๋ฆฌ์ผ์ด์ ์ฝ๋๊ฐ ์ปจํ ์ด๋ ํํ๋ก ์คํ๋๋ ๋ฐ ํ์ํ ๋ชจ๋ ํด, ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋ฐ ์ข ์ ํญ๋ชฉ์ด ํฌํจ๋์ด ์๋ค.
docker run: ์๋ก์ด ์ปจํ ์ด๋๋ฅผ ์์ฑํ๊ณ ์คํํฉ๋๋ค.\-p 3306:3306: ๋ก์ปฌ ํธ์คํธ์ ํฌํธ 3306์ ์ปจํ ์ด๋์ ํฌํธ 3306์ ๋งคํํฉ๋๋ค. (mariaDB์ ๊ธฐ๋ณธ ํฌํธ ๋ฒํธ๊ฐ 3306์ด์ด์ ์ด๋ฅผ ์ฌ์ฉํจ.)\--name daisy-mariadb: ์ปจํ ์ด๋
์ ๋ฒ ํฌ์คํธ์์๋ Docker๋ก MariaDB์ ์ ์ํ๋ ๋ฒ์ ๋ค๋ค์ต๋๋ค. ์ด๋ฒ ํฌ์คํธ์์๋ Docker๋ก ์ ์ํ MariaDB๋ฅผ ์ฝ๊ฒ ๋ค๋ฃจ๊ธฐ ์ํด Sequel Pro๋ผ๋ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ๋ ๋ฒ์ ๊ธฐ๋กํฉ๋๋ค. ์ง๊ด์ ์ธ UI: Sequel Pro๋ ์ง๊ด์ ์ด๊ณ ์ฌ์ฉํ๊ธฐ ์ฌ์ด
Storybook์ UI ์ปดํฌ๋ํธ ๊ฐ๋ฐ ๋๊ตฌ์ ๋๋ค. UI ์ปดํฌ๋ํธ๋ฅผ ๊ฒฉ๋ฆฌ๋ ํ๊ฒฝ์์ ๊ฐ๋ฐํ ์ ์๋๋ก ํ์ฌ, ์ปดํฌ๋ํธ์ ๋์์ ๊ฐ๋ณ์ ์ผ๋ก ํ์ธํ๊ณ ํ ์คํธํ๋ ๋ฐ ๋์์ ์ค๋๋ค.์ปดํฌ๋ํธ ๊ฐ๋ฐStorybook์ ์ฌ์ฉํ๋ฉด UI ์ปดํฌ๋ํธ๋ฅผ ๋ ๋ฆฝ์ ์ผ๋ก ๊ฐ๋ฐํ ์ ์์ด, ์ ํ๋ฆฌ์ผ