@winuss
Hello :) Developer notes!

๐Ÿคœ Next.js 14 Conf

December 21, 2023

Next.js์˜ ์ตœ์‹  ๋ฒ„์ „, Next.js 14์˜ ์ถœ์‹œ๋Š” ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์˜ ์„ธ๊ณ„์— ์ƒˆ๋กœ์šด ๋ณ€ํ™”์˜ ๋ฐ”๋žŒ์„ ๋ถˆ๋Ÿฌ์ผ์œผํ‚ค๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ์—…๋ฐ์ดํŠธ๋Š” ๊ฐœ๋ฐœ ์†๋„์™€ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ๊ทน์ ์œผ๋กœ ๊ฐœ์„ ํ•˜๋Š” ๋ช‡ ๊ฐ€์ง€ ์ค‘์š”ํ•œ ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ์ด ๊ธ€์—์„œ๋Š” Next.js 14์˜ ํ•ต์‹ฌ ๊ธฐ๋Šฅ๊ณผ ๊ทธ๊ฒƒ๋“ค์ด ์›น ์•ฑ ๊ฐœ๋ฐœ์— ์–ด๋–ค ์˜ํ–ฅ์„ ๋ฏธ์น ์ง€์— ๋Œ€ํ•ด ์ด์•ผ๊ธฐ ํ•ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. Next.js 1โ€ฆ


WebPush ์ ์šฉํ•˜๊ธฐ

December 02, 2023

์›น ํ‘ธ์‹œ ๊ธฐ์ˆ ๊ณผ PWA(Progressive Web Apps)์˜ ์กฐํ•ฉ์€ ๋ชจ๋ฐ”์ผ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ํ˜์‹ ์ ์œผ๋กœ ๊ฐœ์„ ํ•˜๋Š” ๋ฐฉ๋ฒ• ์ค‘ ํ•˜๋‚˜์ž…๋‹ˆ๋‹ค. ํŠนํžˆ iOS 16.4 ์—…๋ฐ์ดํŠธ ์ดํ›„ iOS์—์„œ ์›น ํ‘ธ์‹œ๋ฅผ ์ง€์›ํ•˜๊ธฐ ์‹œ์ž‘ํ•˜๋ฉด์„œ ์ด ๊ธฐ์ˆ ์ด ๋”์šฑ ์ฃผ๋ชฉ๋ฐ›๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์—๋Š” PWA์˜ ์ค‘์š”ํ•œ ์—ญํ• ๊ณผ FCM(Firebase Cloud Messaging)์„ ํ™œ์šฉํ•œ ๊ตฌํ˜„ ๋ฐฉ๋ฒ•์— ๋Œ€โ€ฆ


PWA ์ ์šฉํ•˜๊ธฐ

December 01, 2023

(์ด๋ฏธ์ง€ ์ถœ์ฒ˜ : https://www.mitrais.com/news-updates/pwa-the-advantages-and-basic-guide-to-apply/) PWA(Progressive Web Apps, ์ง„๋ณด์  ์›น ์•ฑ)๋Š” ์›น๊ณผ ๋ชจ๋ฐ”์ผ ์•ฑ์˜ ์žฅ์ ์„ ๊ฒฐํ•ฉํ•œ ์ƒˆ๋กœ์šด ์ ‘๊ทผ ๋ฐฉ์‹์œผ๋กœ, ์ตœ๊ทผ iOS 16.4 ์—…๋ฐ์ดํŠธ๋ฅผ ํ†ตํ•ด iOS ์žฅ์น˜์—์„œ๋„ ์›น ํ‘ธ์‹œ ์•Œ๋ฆผ์„โ€ฆ


Emotion VS Styled-Component

December 22, 2022

๋ฆฌ์—‘ํŠธ์—์„œ ๋งŽ์ด ์‚ฌ์šฉํ•˜๋Š” CSS-in-JS์˜ ์ข…๋ฅ˜์ค‘ ํ•˜๋‚˜์ธ Emotion๊ณผ Styled-Component์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ํŠธ๋ Œ๋“œ https://npmtrends.com/@emotion/core-vs-@emotion/react-vs-styled-components emorion์ด v10์—์„œ v11์ด ๋˜๋ฉด์„œ ์—์„œ ๋กœ ํŒจํ‚ค์ง€๋ช…์ด ๋ณ€๊ฒฝ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ํŠธ๋ Œ๋“œโ€ฆ


๐ŸŒ React Best Practice

November 24, 2022

๋Œ€์„ธ ํ”„๋ก ํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ธ ๋ฆฌ์—‘ํŠธ๋กœ ๊ฐœ๋ฐœ์„ ํ•˜๊ธฐ์— ์•ž์„œ ๊ฐ€๊ธ‰์ ์ด๋ฉด ๊ผญ ์ง€์ผœ์•ผํ•  ๋ถ€๋ถ„์„๋“ค ์ •๋ฆฌํ•˜์˜€์Šต๋‹ˆ๋‹ค. ์Šต๊ด€์ ์œผ๋กœ ์•„๋ž˜ ๋‚ด์šฉ๋“ค์€ ๋ฐ˜๋“œ์‹œ ์ˆ™์ง€ํ•ฉ์‹œ๋‹ค! ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ์™€ ํ›…์„ ์‚ฌ์šฉ React ํ•จ์ˆ˜ ์ปดํฌ๋„ŒํŠธ์™€ ํ›…์€ ํด๋ž˜์Šค์— ๋น„ํ•ด ๋” ๊ฐ„๊ฒฐํ•˜๊ณ  ์ฝ๊ธฐ ์‰ฌ์šด ์ฝ”๋“œ๋ฅผ ์ƒ์„ฑํ•˜๋ฏ€๋กœ ๋” ์ž์ฃผ ์‚ฌ์šฉํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ƒํƒœ์‚ฌ์šฉ ํ”ผํ•˜๊ธฐ React ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋นŒ๋“œํ•  ๋•Œ ์ƒํƒœ๋ฅผ ๋งŽ์ด ์‚ฌโ€ฆ


๐Ÿ„ Angular Hybrid Rendering

October 27, 2022

์ด์ „ ๊ธ€์—์„œ CSR, SSR, SSG์— ๋Œ€ํ•ด ๊ฐ๊ฐ์˜ ์ฐจ์ด์ ์— ๋Œ€ํ•ด์„œ ๋‹ค๋ค„ ๋ณด์•˜์Šต๋‹ˆ๋‹ค. Angular, React, Vue์—์„œ ๊ฐ๊ฐ์˜ ๋ฐฉ์‹์œผ๋กœ ์ด๋Ÿฌํ•œ ๋ Œ๋”๋ง ๋ฐฉ์‹์œผ๋กœ ๊ตฌํ˜„์„ ํ•  ์ˆ˜๊ฐ€ ์žˆ๋Š”๋ฐ์š”. ๋Œ€ํ‘œ์ ์œผ๋กœ Angular๋Š” Universal, React๋Š” NextJs, Vue๋Š” Nuxt ๋“ฑ์„ ๋งŽ์ด ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ ๊ฐ™๋„ค์š”. Angular๋Š” ๊ตญ๋‚ด์—์„œ ์ธ๊ธฐ๊ฐ€ ๋งŽ์ด ์—†์–ดโ€ฆ


๐ŸŽจ ๊ฐœ๋ฐœ์ž๊ฐ€ ์ž˜ ๋ชจ๋ฅด๋Š” HTML ํƒœ๊ทธ

January 16, 2022

์›น์„ ๊ฐœ๋ฐœํ•˜๋‹ค๋ณด๋ฉด ์ต์ˆ™ํ•œ HTML ํƒœ๊ทธ๋“ค๋งŒ ์‚ฌ์šฉํ•˜๊ฒŒ ๋˜๊ณ  ๊ทธ์™ธ ๊ธฐ๋Šฅ์ ์ธ ๋ถ€๋ถ„๋“ค์€ javascript๋‚˜ css๋กœ ๊ตฌํ˜„์„ ํ•˜๊ฒŒ ๋˜๋Š”๋ฐ (div, span anchor, header, list.. ๋“ฑ) ์•„์ฃผ ์œ ์šฉํ•˜๋ฉด์„œ ๊ฐœ๋ฐœ์ž๋“ค์ด ์ž˜ ๋ชจ๋ฅด๋Š” ํƒœ๊ทธ๋“ค์„ ํ•œ๋ฒˆ ์‚ดํŽด๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. CSS ,JS๋กœ๋งŒ ๊ฐ€๋Šฅํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ•œ ๊ฒƒ์„ ์ด์ œ HTML๋กœ ์‹ฌํ”Œํ•˜๊ฒŒ ๊ฐœ๋ฐœํ•ด ๋ณด์„ธ์š”. โ€ฆ


๐Ÿ”ฎ Server/Client Side Rendering

January 08, 2022

์›น ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ๋ Œ๋”๋ง ๋ฐฉ์‹์€ ํฌ๊ฒŒ ์„œ๋ฒ„์™€ ํด๋ผ์ด์–ธํŠธ ๋ Œ๋”๋ง ๋ฐฉ์‹์ด ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ๋ฐฉ์‹์„ ์‚ดํŽด๋ณด๊ธฐ์— ์•ž์„œ ๊ณผ๊ฑฐ ์›น ์‚ฌ์ดํŠธ์˜ ์—ญ์‚ฌ์— ๋Œ€ํ•ด ๊ฐ„๋‹จํ•˜๊ฒŒ ์‚ดํŽด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. Static Site 1990๋…„ ์ค‘๋ฐ˜๊นŒ์ง€๋Š” ๋Œ€๋ถ€๋ถ„์˜ ์‚ฌ์ดํŠธ๊ฐ€ static ์‚ฌ์ดํŠธ ์˜€์Šต๋‹ˆ๋‹ค. ์„œ๋ฒ„์— ์ด๋ฏธ ์ž˜ ๋งŒ๋“ค์–ด์ง„ html๋ฌธ์„œ๋“ค์ด ์žˆ๊ณ  ์‚ฌ์šฉ์ž๊ฐ€ ๋ถ€๋ผ์šฐ์ €์—์„œ ์ฃผ์†Œ์— ์ ‘์†ํ•˜๋ฉด ์„œ๋ฒ„์— ์ด๋ฏธ ๋ฐฐํฌ๋˜โ€ฆ


๐Ÿ“— Angular Google Analytics Traking

January 02, 2022

๊ตฌ๊ธ€ ๋ถ„์„์„ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ์ถ”์ฒ™์•„์ด๋””๊ฐ€ ํฌํ•จ๋œ ์Šคํฌ๋ฆฝํŠธ๋ฅผ index.html ํŽ˜์ด์ง€์— ์‚ฝ์ž…๋งŒ ํ•˜๋ฉด ๋˜๊ธฐ ๋•Œ๋ฌธ์— ์•„์ฃผ ๊ฐ„๋‹จํ•˜๊ฒŒ ์—ฐ๋™์„ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ Angular์™€ ๊ฐ™์€ SPA๋ฐฉ์‹์€ ๋‹จ์ผํŽ˜์ด์ง€๋กœ ๋˜์–ด ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ๋‹จ์ˆœํžˆ ์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋ณต์‚ฌ ๋ถ™์—ฌ๋„ฃ๊ธฐ ๋ฐฉ์‹์œผ๋กœ ๋งŒ์œผ๋กœ ์šฐ๋ฆฌ๊ฐ€ ์›ํ•˜๋Š” ๋ถ„์„๋ฐ์ดํ„ฐ๋ฅผ ์ˆ˜์ง‘ํ•˜๊ธฐ์—๋Š” ์•„์‰ฌ์›€์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿผ ์–ด๋–ป๊ฒŒ? Angulโ€ฆ


๐Ÿค  Web Storage

April 11, 2021

Web Storage Web Storage๋Š” HTML5์—์„œ ์ถ”๊ฐ€๋œ ๊ฐ„๋‹จํ•œ ํ‚ค์™€ ๊ฐ’์„ ์ €์žฅ(key-value storage) ํ•  ์ˆ˜ ์žˆ๋Š” ์ €์žฅ์†Œ์ด๋‹ค. ๋ฐ์ดํ„ฐ์˜ ์ง€์†์„ฑ์— ๋”ฐ๋ผ ์˜๊ตฌ์ €์žฅ์†Œ(LocalStorage)์™€ ์ž„์‹œ์ €์žฅ์†Œ(SessionStorage) ๋‘๊ฐ€์ง€๋ฅผ ์ง€์›ํ•œ๋‹ค. ๊ทธ ๋™์•ˆ ๋งŽ์ด ์‚ฌ์šฉํ•ด ์™”๋˜ ์ฟ ํ‚ค์™€ ๊ฑฐ์˜ ์ฐจ์ด๊ฐ€ ์—†์–ด ๋ณด์ด์ง€๋งŒ ๋ช‡ ๊ฐ€์ง€ ์ฟ ํ‚ค์˜ ๋‹จ์ ์„ โ€ฆ