๐จ๐ป web.dev/fe25 TRIPLE ์น ์ผ์ ํ ํธ๋ฌ๋ธ ์ํ ํ๊ณ ๋ก ์๋ ์ ์น ์ผ์ ํ ์๋น์ค๋ฅผ ๊ตฌํํ๋ฉด์ ๋ฐ์ํ UI์ ์คํฌ๋กค UX์ ๊ด๋ จ๋ ๋ช ๊ฐ์ง ์ด์๋ค์ด ์์๋๋ฐ, ๊ทธ๋ ๋น์๋ฅผ ํ๊ณ ํด๋ณด๋ฉด์ ๊ฐ๊ฐ์ ๋ฌธ์ ์ํฉ๊ณผ ์ด๋ฅผ ํด๊ฒฐํ ๋ฐฉ๋ฒ๋ค์ ์ ๋ฆฌํด๋ณด๋ ค๊ณ ํฉ๋๋ค. ๐ ์น ์ผ์ ํ ๊ธฐ๋ฅ๊ณผ ์ง์ ๋ฒ์ ํธ๋ฆฌํ ์น ์ผ์ ํ์ PC์ ๋ชจ๋ฐ์ผ(ํ๋ธ๋ฆฟ ํฌํจ) ํ๊ฒฝ์ ํ๊น์ผ๋ก ํ ์น ์๋น์ค์ ๋๋ค. ํธ๋ฆฌํ ์ฑ์์ ์์ฑํ ์ผ์ ์ ํธ๋ฆฌํ ์ ์ ๊ฐ ์๋ ์ฌ๋๋ค๋ ์ ๊ทผํ ์ ์๋ ๋งํฌ๋ฅผ ์์ฑํด ์ค๋๋ค. ํธ๋ฆฌํ ์ฑ์์ ์ผ์ ํ ๋งํฌ๋ ์ด 3๊ฐ์ง ๋ฐฉ๋ฒ์ผ๋ก ๊ณต์ ๊ฐ ๊ฐ๋ฅํฉ๋๋ค. ์ผ์ ๋งํฌ ๋ณต์ฌํ๊ธฐ ์นด์นด์คํก์ผ๋ก ๊ณต์ ํ๊ธฐ ๊ทธ ์ธ ๋ฉ์ ์ ๋ฑ์ ๋ฐฉ๋ฒ์ผ๋ก ๊ณต์ ํ๊ธฐ ๋งํฌ๋ฅผ ๋ณดํต ์นด์นด์คํก์ผ๋ก ๊ณต์ ํ๊ธฐ ๋๋ฌธ์ ์นด์นด์คํก ์ธ์ฑ ๋ธ๋ผ์ฐ์ ๋ฅผ ๋น๋กฏํ์ฌ ์ ๋ฌ๋ฐ์ ๋งํฌ๋ฅผ ์คํํ ์ ์๋ ์ฃผ์ ๋ธ๋ผ์ฐ์ (safari, chrome, whale,.. 2024. 3. 11. Server Sent Events ์ ์ฉํด๋ณด๊ธฐ ๐ SSE vs Web Socket ์๋ ์ ์์ธ์ฝ ํ์ฌ๋ฅผ ์ํ ์ฑ๋ด ์๋น์ค ๋ง๋ค๋ฉด์ Server Sent Events ๋ฅผ ์ฌ์ฉํด ๋ณผ ๊ธฐํ๊ฐ ์๊ฒผ์ต๋๋ค. ๊ฐ๋ ์ ๋ํด์๋ง ์๊ณ ์์์ง ์ง์ ์ ์ฉํด ๋ณธ ์ ์ ์์๋๋ฐ, ๊ฐ๋จํ ์ด๋ค ํ๋กํ ์ฝ์ธ์ง ์ดํด๋ณด๋๋ก ํ๊ฒ ์ต๋๋ค. ์ฐ์ Server Sent Events ์ Web Socket๊ณผ ์ด๋ค ์ฐจ์ด์ ์ด ์กด์ฌํ๋์ง ๊ฐ๋จํ๊ฒ ์ดํด๋ณด๊ฒ ์ต๋๋ค. ์ฑ๋ด ์๋น์ค๋ ํน์ฑ์ ์ค์๊ฐ์ผ๋ก ์๋ฐฉํฅ ํต์ ์ด ํ์ํ์ง ์์๊ณ UTF-8 ํ ์คํธ ๋ฐ์ดํฐ๋ง ๋ค๋ฃจ๊ธฐ ๋๋ฌธ์ Server Sent Events ๋ก ์ถฉ๋ถํ ๊ตฌํ์ด ๊ฐ๋ฅํ์ต๋๋ค. EventSource ์ธํฐํ์ด์ค ์ฌ์ฉ ๋ฐฉ๋ฒ๊ณผ ๊ด๋ จ ๋ด์ฉ์ ๊ณต์๋ฌธ์๋ฅผ ์ฐธ๊ณ ํด ๋ณด์๋ฉด ์ข์ ๊ฒ ๊ฐ์ต๋๋ค. ๐ ๊ธฐ์กด EventSource์ ํ๊ณ์ 1๏ธโฃ ์๋ฌ ์ฒ๋ฆฌ์ ์ด๋ ค์.. 2024. 3. 10. ์ ๊ทํํ์๊ณผ ํจ๊ป URL ๋ฏ์ด๋ณด๊ธฐ โ๏ธ ๋ค์์์ ์ ์ํ๋ ์ ๊ท์์ด ๋ชจ๋ URL ํ์์ ๋์๋์ง๋ ์๋ ๊ฒ์ ์ ์ํด์ฃผ์ธ์. โ๏ธ ipv4, ipv6 ํ์์ ip address ํ์์ ์ง์ํ์ง ์์ต๋๋ค. URL(Uniform Resource Locator) ์ ์น ์์ ๋ฆฌ์์ค๋ฅผ ๊ฐ๋ฆฌํค๋ ๊ณ ์ ํ ์ฃผ์์ ๋๋ค. HTML ํ์ด์ง, CSS ๋ฐ ์ด๋ฏธ์ง ๋ฆฌ์์ค ๋ฑ ๊ทธ ์ด๋ค ๊ฒ์ ๊ฐ๋ฆฌํฌ ์ ์์ต๋๋ค. ์ด์ ์ ํ ์คํธ ๋ด์์ URL ํ์์ ๋ฌธ์์ด ํ์ฑ์ด ํ์ํด์ URL ๊ท๊ฒฉ์ ๋ํด ์ฐพ์๋ณธ ๋ด์ฉ์ ์ ๋ฆฌํ๊ฒ ์ต๋๋ค. ๐ RFC ๋ฌธ์ ์ฐธ์กฐ ์ด๋ฒ ํฌ์คํธ์์ ์ฐธ๊ณ ํ RFC ๋ฌธ์๋ค์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค. RFC 952 - https://datatracker.ietf.org/doc/html/rfc952 RFC 1034 - https://datatracker.ietf.org/d.. 2024. 3. 1. Chrome ๊ฐ๋ฐ์๋๊ตฌ๋ฅผ ์ด์ฉํด์ ์์น์ ๋ณด ์ค์ ํ๊ธฐ geolocation ๊ด๋ จ๋ ๊ธฐ๋ฅ์ ๊ฐ๋ฐํ ๋ ์ฌ์ฉ์ ์์น์ ๋ณด๋ฅผ ๋ชจํน ํ ์ ์๋ ๋ฐฉ๋ฒ์ด ํ์ํ ๊ฒฝ์ฐ๊ฐ ์์ต๋๋ค. chrome devtool ์์๋ ์ด๋ฅผ ์ํ ํ ์คํธ ๋ฐฉ๋ฒ์ ์ ๊ณตํด์ฃผ๊ณ ์๋๋ฐ, ๋ค์ 2 ๋จ๊ณ๋ก ๋๋ ์ ์งํํด๋ณด๊ฒ ์ต๋๋ค. Google Map ์๋น์ค์์ ํน์ ์์น์ ์๊ฒฝ๋๊ฐ ์กฐํํ๋ ๋ฐฉ๋ฒ Chrome devtool์์ ์๊ฒฝ๋๊ฐ ์ง์ ํด์ ํ ์คํธํ๋ ๋ฐฉ๋ฒ 1๏ธโฃ Google Map ์๋น์ค๋ฅผ ํตํด ํน์ ์ขํ์ ์๊ฒฝ๋๊ฐ ์กฐํํ๊ธฐ Google Map ์๋น์ค์ ์ ์ํด์ ์ํ๋ ์ขํ๋ฅผ ํด๋ฆญํ๋ฉด ํ์ ๋ง์ปค๋ก ํฌ์ปค์ฑ ๋ฉ๋๋ค. ์ดํ ํ์ ๋ง์ปค๋ฅผ ๋ค์ ํด๋ฆญํ๋ฉด ์๊ฒฝ๋ ๊ฐ์ด ๋ํ๋ฉ๋๋ค. 2๏ธโฃ Chrome devtool Sensor ์ฌ์ฉํ๊ธฐ custom location ์ถ๊ฐํ๊ธฐ ๋จผ์ ์ฌ์ฉ์ ์ ์ ์์น์ ๋ณด๋ฅผ ์ถ๊ฐํ๋.. 2024. 3. 1. storybook middleware proxy ๋ก CORS ์ฐํํ๊ธฐ fetch ๋ฅผ ์ฌ์ฉํ๊ณ ์๋ ์ปดํฌ๋ํธ ์คํ ๋ฆฌ๋ฅผ ์์ฑํ ๋ CORS ์ด์ ํด๊ฒฐ์ด ํ์ํ์ต๋๋ค. ์คํ ๋ฆฌ๋ถ์ ๋น๋ ์ webpack ์ ์ฌ์ฉํ๊ณ ์๊ณ , dev server ์คํ ์ middleware ์คํ์ ์ถ๊ฐํ ์ ์์ต๋๋ค. ๐ storybook middleware ์ถ๊ฐํ๊ธฐ ์๋ฅผ ๋ค์ด ๋ค์๊ณผ ๊ฐ์ fetch ์์ฒญ์ด ์๊ณ , /api ์ ๋ํ ํ๋ฝ์๋ฅผ ๊ตฌ์ฑํ๊ณ ์ถ๋ค๊ณ ํ๊ฒ ์ต๋๋ค. fetch('/api/blahblah') ํจํค์ง๋ฅผ ์ถ๊ฐํด์ค๋๋ค. $ npm i -D http-proxy-middleware middleware.js ํ์ผ์ ์์ฑํด ์ค๋๋ค. target๊ณผ origin์ ์ค์ ํด์ ์์ฒญ์ ํ๋ก์ฑํ๋ ๊ท์น์ ์ถ๊ฐํฉ๋๋ค. // .storybook/middleware.js const { createProxyMi.. 2024. 3. 1. ์ ๊ท์์ผ๋ก camel-case ํ์ฑํ๊ธฐ ๐ camelCase๋ฅผ ๋จ์ด ๋จ์๋ก ํ์ฑ ํ๊ธฐ ์ถ์ฝ ํํ(ex. CSS )๋ ์ง์ํ๋ฉด์ ๋ค์๊ณผ ๊ฐ์ด camelCase ํค์๋๋ฅผ ๋จ์ด ๋จ์๋ก ํ์ฑ ํ๋ ค๊ณ ํฉ๋๋ค. searchSeoulPOIItems → search seoul poi items searchSeoulPoiItems → search seoul poi items CSSProperties → css properties searchNIMBUS2000BroomStick → search nimbus2000 broom stick ์ ๊ท์์ lookbehind ๋ฅผ ์ฌ์ฉํ๋ฉด ์ฝ๊ฒ ํด๊ฒฐ์ด ๊ฐ๋ฅํ๋ฐ, safari๋ 16.4๋ถํฐ ์ง์ํด์ ํฌ๋ก์ค๋ธ๋ผ์ฐ์ง ์ด์๊ฐ ์์ต๋๋ค. ๊ทธ๋์ ๋ค๋ฅธ ๋ฐฉ์์ผ๋ก ๋ฌธ์ ๋ฅผ ํด๊ฒฐํด๋ณด๋ ค๊ณ ํฉ๋๋ค. ๐ lookbehind๋ฅผ ์ฌ์ฉํ์ง ์๊ณ ํด๊ฒฐํด .. 2024. 2. 24. ์ด์ 1 2 3 4 5 ๋ค์