๋ฐ˜์‘ํ˜•

์ „์ฒด ๊ธ€ 289

[The Web Developer Bootcamp 2024] section 3: HTML ๊ธฐ์ดˆ

์ด ๊ธ€์€ udemy์˜ The Web Developer Bootcamp 2024 ๊ฐ•์ขŒ๋ฅผ ๋ฐ”ํƒ•์œผ๋กœ ์ •๋ฆฌํ•œ ๋‚ด์šฉ์ž…๋‹ˆ๋‹ค. 19. ์„น์…˜์ฃผ์ œskip 20. HTML ๊ฐœ์š”HTML์€ ์›น ํŽ˜์ด์ง€์˜ ๋ช…์‚ฌ ๊ฐ™์€ ๊ฒƒ์œผ๋กœ ์ฝ˜ํ…์ธ ์˜ ๊ตฌ์กฐ๋ฅผ ๊ทœ์ •ํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.It’s just about marking up a documentHTML์€ ์›น ํŽญ์ด์ง€๋ผ๋Š” ๋ฌธ์„œ์— ๋งˆํฌ์—…์„ ํ•˜๊ธฐ ์œ„ํ•œ ์–ธ์–ด ๋˜๋Š” ๊ตฌ๋ฌธ์ž…๋‹ˆ๋‹ค.  21. ์šฐ๋ฆฌ์˜ ์ฒซ HTML Pageskip 22. Tip ๋ชจ์งˆ๋ผ ๊ฐœ๋ฐœ์ž ๋„คํŠธ์›Œํฌ https://developer.mozilla.org/ko/docs/Web/HTMLMDN Web Docs(Mozilla Developer Network Web Docs)๋Š” ์›น ๊ฐœ๋ฐœ์ž๋“ค์ด HTML, CSS, JavaScript ๋ฐ ์›น ๊ธฐ์ˆ ๊ณผ ๊ด€๋ จ๋œ ์ •๋ณด๋ฅผ ์–ป..

[Intellij] ์ธํ…”๋ฆฌ์ œ์ด ์ด์ „ ํ™”๋ฉด, ์ด์ „ ์ปค์„œ ์ด๋™ ๋ฐฉ๋ฒ• ๋‹จ์ถ•ํ‚ค

Intro์•ˆ๋…•ํ•˜์„ธ์š”. ์ด๋ฒˆ ์‹œ๊ฐ„์—๋Š” ์ธํ…”๋ฆฌ์ œ์ด์—์„œ ์ด์ „ ํ™”๋ฉด, ์ด์ „ ์ปค์„œ๋กœ ์ด๋™ํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ์ฝ”๋”ฉ์„ ํ•˜๋‹ค๋ณด๋ฉด ์ด์ „ ๋ถ€๋ถ„์œผ๋กœ ๋˜๋Œ์•„ ๊ฐ€๊ณ  ์‹ถ๊ฑฐ๋‚˜, ๋‹ค์Œ์œผ๋กœ ๋˜๋Œ์•„๊ฐ€๊ณ  ์‹ถ์€ ๊ฒฝ์šฐ๊ฐ€ ์ƒ๊ธธ ์ˆ˜ ์žˆ๋Š”๋ฐ์š”, ์ด๋Ÿด ๋•Œ ์œ ์šฉํ•˜๊ฒŒ ์“ฐ์ผ ์ˆ˜ ์žˆ๋Š” ๋‹จ์ถ•ํ‚ค๋ฅผ ์†Œ๊ฐœํ•ด๋“œ๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค. How to docommand + ] // ์ด์ „ ์ปค์„œ ์œ„์น˜๋กœ ๋Œ์•„๊ฐ€๊ธฐ command + [ // ๋‹ค์Œ ์ปค์„œ ์œ„์น˜๋กœ ๋Œ์•„๊ฐ€๊ธฐAlt + command + // ๋‹ค์Œ ์ปค์„œ ์œ„์น˜๋กœ ๋Œ์•„๊ฐ€๊ธฐ mac์—์„œ๋Š” ์œ„์˜ ๋‹จ์ถ•ํ‚ค ์‚ฌ์šฉ์„ ํ†ตํ•ด ์ด์ „/๋‹ค์Œ ์ปค์„œ๋กœ ์ด๋™์ด ๊ฐ€๋Šฅํ•˜๋ฏ€๋กœ ํŽธํ•œ ๋ฐฉ๋ฒ•์„ ์„ ํƒํ•˜์—ฌ ์‚ฌ์šฉํ•˜์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค :)

[The Web Developer Bootcamp 2024] section 2: ์›น ๊ฐœ๋ฐœ์ด๋ž€?

์ด ๊ธ€์€ udemy์˜ The Web Developer Bootcamp 2024 ๊ฐ•์ขŒ๋ฅผ ๋ฐ”ํƒ•์œผ๋กœ ์ •๋ฆฌํ•œ ๋‚ด์šฉ์ž…๋‹ˆ๋‹ค.11. ์„น์…˜ ์ฃผ์ œskip 12. 5๋ถ„ ๋’ค์˜ ์ธํ„ฐ๋„ท์ธํ„ฐ๋„ท์€ ๋„คํŠธ์›Œํฌ์˜ ๋„คํŠธ์›Œํฌ์ž…๋‹ˆ๋‹ค. ์„œ๋กœ ํ†ต์‹ ํ•  ์ˆ˜ ์žˆ๋Š” ์ˆ˜๋งŽ์€ ๊ธฐ๊ธฐ๋“ค์ด๋ฉฐ, ์ธํ„ฐ๋„ท์€ ๋ชจ๋“  ๊ฒƒ์„ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•˜๋Š” ์ธํ”„๋ผ์ž…๋‹ˆ๋‹ค. ์ธํ„ฐ๋„ท์ด ์—ฐ๊ฒฐ๋œ ์ปดํ“จํ„ฐ๋“ค์˜ ๋ฌถ์Œ 13.์›น์ด๋ž€? ์›น์€ ์ธํ„ฐ๋„ท์„ ํ†ตํ•ด ๋ฆฌ์†Œ์Šค๋ฅผ ๊ณต์œ ํ•˜๊ฒŒ ํ•˜๋Š” ์ •๋ณด ์‹œ์Šคํ…œ์ž…๋‹ˆ๋‹ค. ์›น์˜ ์‹ค์ œ ์ž‘๋™ ๋ฐฉ์‹์œผ๋กœ ์ •๋ณด ์ „์†ก ๋ฐฉ์‹์—๋Š” HTTP (Hypertext Transfer Protocol)์ด ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. ์›น์ด ์ž‘๋™ํ•˜๋Š” ๋ฐฉ์‹ ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜ ๋ฐฉ์‹ ๋ฆฌ์†Œ์Šค๋‚˜ ์›น ํŽ˜์ด์ง€๋ฅผ ์š”์ฒญํ•˜๊ณ  ๊ณต์œ ํ•˜๋Š” ๋ฐฉ์‹์˜ ๊ธฐ๋ฐ˜์ž…๋‹ˆ๋‹ค. TCP, IP ๋“ฑ ๋‹ค๋ฅธ ํ”„๋กœํ† ์ฝœ๋„ ์žˆ์Šต๋‹ˆ๋‹ค. 14.์š”์ฒญ/์‘๋‹ต ์ฃผ๊ธฐskip 15. ํ”„๋ŸฐํŠธ ์—”๋“œ(Fro..

[The Web Developer Bootcamp 2024] section 1: ์ฝ”์Šค ์†Œ๊ฐœ

์ด ๊ธ€์€ udemy์˜ The Web Developer Bootcamp 2024 ๊ฐ•์ขŒ๋ฅผ ๋ฐ”ํƒ•์œผ๋กœ ์ •๋ฆฌํ•œ ๋‚ด์šฉ์ž…๋‹ˆ๋‹ค 1. ํ™˜์˜ ์ธ์‚ฌskip 2. ์ปค๋ฎค๋‹ˆํ‹ฐ ์ฑ„ํŒ… ๋ฐ ๊ทธ๋ฃน ์ฐธ์—ฌ ๋ฐฉ๋ฒ•skip 3. ์ปค๋ฆฌํ˜๋Ÿผ ์†Œ๊ฐœskip 4. ์ตœ์ข… ์—…๋ฐ์ดํŠธ ์ผ์ž์— ๊ด€ํ•˜์—ฌ skip 5. ์ฝ”์Šค ์—…๋ฐ์ดํŠธ ๋‚ด์—ญhttps://plum-poppy-0ea.notion.site/Web-Developer-Bootcamp-ChangeLog-45e3eab6be724c5f9a4b83c01044e126 6. ์ œ๊ฐ€ ๊ฐœ๋ฐœ์ž๊ฐ€ ๋  ์ˆ˜ ์žˆ์„๊นŒ์š”? skip 7. ์ฝ”๋“œ์™€ ์Šฌ๋ผ์ด๋“œskip 8. ๋Œ€ํ™”์˜ ์ฝ”๋”ฉ ์—ฐ์Šต ๋ฐ ๊ด€๋ จํŒskip 9. ์ฝ”๋“œ์Šค ์ฝ”๋”ฉ ์‹ค์Šต ์†”๋ฃจ์…˜skip 10. ๊ตฌ๋ฒ„์ „ ๊ฐ•์˜ ๊ตฌ๋…์ž๋“ค์ด ์ƒˆ ๊ฐ•์˜๋ฅผ ๋ณด๋Š” ๋ฒ•skip

[Next.js + React] yarn berry ์ œ๊ฑฐ ๋ฐฉ๋ฒ•

Intro์•ˆ๋…•ํ•˜์„ธ์š”. ์ด๋ฒˆ ์‹œ๊ฐ„์—๋Š” yarn berry ์ œ๊ฑฐ ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์€ Next.js + React ๊ตฌ์„ฑ์„ ์ „์ œ๋กœ ์ง„ํ–‰ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.ํ˜น์‹œ yarn berry๊ฐ€ ๋ฌด์—‡์ธ์ง€ ๊ถ๊ธˆํ•˜์‹  ๋ถ„๋“ค์€ ๋งํฌ์— ๊ฑธ๋ ค์žˆ๋Š” ํฌ์ŠคํŒ… ์ฐธ๊ณ  ๋ถ€ํƒ๋“œ๋ฆฝ๋‹ˆ๋‹ค . How to remove yarn berryYarn Berry (Yarn 2+)๋ฅผ ์ œ๊ฑฐํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค:1. Yarn Berry ์„ค์ • ํŒŒ์ผ ์‚ญ์ œํ”„๋กœ์ ํŠธ์˜ ๋ฃจํŠธ ๋””๋ ‰ํ† ๋ฆฌ์—์„œ .yarnrc.yml ํŒŒ์ผ์„ ์‚ญ์ œํ•ฉ๋‹ˆ๋‹ค.#.yarnrc.yml filenodeLinker: node-modulesyarnPath: .yarn/releases/yarn-3.6.0.cjs 2. ํŒจํ‚ค์ง€ ๋งค๋‹ˆ์ € ๋ณ€๊ฒฝYarn 1.x๋กœ ๋Œ์•„๊ฐ€๋ ค๋ฉด, yarn์„ ๋‹ค์‹œ ์„ค์น˜ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๋‹ค..

Framework/Next.js 2024.09.22

[React] MUI Popover, Menu ์†์„ฑ 'anchorEl' ๋ž€ ๋ฌด์—‡์ด๋ฉฐ ์‚ฌ์šฉ ์ด์œ 

Intro์•ˆ๋…•ํ•˜์„ธ์š”. ์ด๋ฒˆ์‹œ๊ฐ„์—๋Š” React MUI์—์„œ anchorEl ๋ž€ ๋ฌด์—‡์ด๋ฉฐ ์‚ฌ์šฉ ์ด์œ ์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.  anchorEl ?Material-UI (MUI)์—์„œ ํŒ์˜ค๋ฒ„(Popover)๋‚˜ ๋ฉ”๋‰ด(Menu)์™€ ๊ฐ™์€ ์ปดํฌ๋„ŒํŠธ์—์„œ ์‚ฌ์šฉ๋˜๋Š” ์†์„ฑ์œผ๋กœ, ํŒ์—…์˜ ์œ„์น˜๋ฅผ ์ง€์ •ํ•˜๋Š” ์—ญํ• ์„ ํ•ฉ๋‹ˆ๋‹ค. ์ด ์†์„ฑ์€ ํŒ์—…์ด ์—ด๋ฆด ์œ„์น˜์˜ ๊ธฐ์ค€์ด ๋˜๋Š” ์š”์†Œ(Element)๋ฅผ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค. ์ฃผ์š” ์ปดํฌ๋„ŒํŠธ์—์„œ์˜ anchorEl ์‚ฌ์šฉ1. PopoverPopover ์ปดํฌ๋„ŒํŠธ๋Š” ๊ธฐ์ค€ ์š”์†Œ์ธ anchorEl์˜ ์œ„์น˜๋ฅผ ๊ธฐ์ค€์œผ๋กœ ํ™”๋ฉด์— ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค. The content of the Popover. 2. MenuMenu ์ปดํฌ๋„ŒํŠธ๋Š” ์ฃผ๋กœ ๋„ค๋น„๊ฒŒ์ด์…˜ ๋˜๋Š” ๋“œ๋กญ๋‹ค์šด ๋ฉ”๋‰ด๋ฅผ ๋งŒ๋“ค ๋•Œ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. anchorEl์„ ํ†ตํ•ด ๋ฉ”๋‰ด๊ฐ€ ๋‚˜ํƒ€๋‚  ์œ„์น˜๋ฅผ ์ง€์ •..

Framework/React 2024.09.04

[React] react-virtuoso TableVirtuoso ๋นˆ๋ฐฐ์—ด์ผ ๋•Œ EmptyPlaceholder ์†์„ฑ ํ™œ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•

Intro์•ˆ๋…•ํ•˜์„ธ์š”. ์ด๋ฒˆ ์‹œ๊ฐ„์—๋Š” TableVirtuoso ์‚ฌ์šฉ ์ค‘ ๋ฐ์ดํ„ฐ๊ฐ€ ๋นˆ ๋ฐฐ์—ด์ผ ๋•Œ EmptyPlaceholder ์†์„ฑ์„ ํ™œ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.  Exampleํ˜„์žฌ ์ฝ”๋“œ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค๊ณ  ๊ฐ€์ •ํ•ด๋ด…์‹œ๋‹ค. ์ด ์ƒํƒœ์—์„œ dataList๊ฐ€ null์ด๊ฑฐ๋‚˜ ๋นˆ๋ฐฐ์—ด์ผ ๋•Œ ํŠน์ • ๋ฐ์ดํ„ฐ๊ฐ€ ๋น„์–ด์žˆ๋‹ค๋Š” ํŠน์ • ํ…์ŠคํŠธ๋ฅผ ํ‘œ์‹œํ•ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. const VirtuosoTableComponents = (totalColSpan: number): TableComponents => ({ Scroller: React.forwardRef((props, ref) => ( )), Table: (props) => ( ), TableHead: React.forwardRef((props, ref) => ( ..

Framework/React 2024.09.03

[React] react-virtuoso dynamic height ๋™์  ๋†’์ด ์„ค์ •ํ•˜๋Š” ๋ฐฉ๋ฒ• (+ mui)

Intro์•ˆ๋…•ํ•˜์„ธ์š”. ์ด๋ฒˆ ์‹œ๊ฐ„์—๋Š” react-virtuoso ์—์„œ ๋™์  ๋†’์ด๋ฅผ ์„ค์ •ํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ์ฐธ๊ณ ๋กœ ์ €๋Š” third-party mui tabler๊ณผ ๊ฒฐํ•ฉํ•˜์—ฌ ์‚ฌ์šฉํ•˜์˜€์Šต๋‹ˆ๋‹ค.  My casereact-virtuoso mui table ์‚ฌ์šฉ๋ฒ•์€ ์•„๋ž˜์™€ ๊ฐ™์Šต๋‹ˆ๋‹ค. height ๋ฅผ ์„ค์ •ํ•ด์ค„ ๋•Œ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๊ณ ์ •๊ฐ’์ด ๋“ค์–ด๊ฐ€๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. export default function ReactVirtualizedTable() { return ( );} ์ œ ์ผ€์ด์Šค์˜ ๊ฒฝ์šฐ ์—ฌ๋Ÿฌ rows ๋ฐ์ดํ„ฐ๊ฐ€ ์žˆ๊ณ , ๊ทธ ๋ฐ์ดํ„ฐ๋“ค์€ ๊ฐ๊ฐ ๋†’์ด๊ฐ€ ๋‹ฌ๋ผ์„œ height๋ฅผ ๋™์ ์œผ๋กœ ์„ค์ •ํ•ด์ค˜์•ผ ํ–ˆ์Šต๋‹ˆ๋‹ค. ์–ด๋–ค ๋ฐฉ๋ฒ•์„ ์‚ฌ์šฉํ•ด์•ผ ํ• ๊นŒ์š”?  How to solve the problemimport Re..

Framework/React 2024.09.02

[React] react-virtuoso๋ฅผ ์‚ฌ์šฉํ•œ mui react Table ๋ Œ๋”๋ง ์ตœ์ ํ™” ์„ฑ๋Šฅ๊ฐœ์„  ๋ฐฉ๋ฒ•

Intro์•ˆ๋…•ํ•˜์„ธ์š”. ์ด๋ฒˆ ์‹œ๊ฐ„์—๋Š” react-virtuoso ๊ฐ€ ๋ฌด์—‡์ด๋ฉฐ, react virtuoso ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ react table ๋ Œ๋”๋ง ์ตœ์ ํ™”ํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. Issuemui react table์„ ์‚ฌ์šฉํ•˜๋˜ ๋„์ค‘ ๋ฐ์ดํ„ฐ ์–‘์ด ๋งŽ์•„์ง€๋ฉด์„œ ํ…Œ์ด๋ธ”์ด ๊ทธ๋ ค์ง€๋Š” ์†๋„๊ฐ€ ๋Š๋ ค์ ธ ์„œ๋น„์Šค ์ด์šฉ์— ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•˜์˜€์Šต๋‹ˆ๋‹ค.  ๋”ฐ๋ผ์„œ react table์˜ ์„ฑ๋Šฅ์„ ๊ฐœ์„ ํ•˜๊ธฐ ์œ„ํ•ด ๊ฐœ์„  ๋ฐฉ์•ˆ์„ ์ฐพ์•„์•ผ ํ–ˆ์Šต๋‹ˆ๋‹ค.  ๊ด€๋ จ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์„œ์น˜ํ•˜๋˜ ๋„์ค‘ TanStack ์™€, mui ๊ณต์‹ ํ™ˆํŽ˜์ด์ง€์— Virtualized table ๋ถ€๋ถ„์— ์†Œ๊ฐœ๋˜์–ด ์žˆ๋Š” react-virtuoso ๋‘๊ฐœ์˜ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๋ฐœ๊ฒฌํ•˜์˜€์Šต๋‹ˆ๋‹ค. star์˜ ์ˆ˜ ์ž์ฒด๋Š” TanStack์ด ๋” ๋†’์•˜์ง€๋งŒ ์‚ฌ์šฉ๋ฐฉ๋ฒ•์ด ๋” ์‰ฝ๊ณ , ๊ธฐ์กด ํ”„๋กœ์ ํŠธ์— ์šฉ์ดํ•˜..

Framework/React 2024.09.01

[AWS] RDS ๋ž€?

Intro์•ˆ๋…•ํ•˜์„ธ์š”. AWS ๊ด€๋ จ ์šฉ์–ด ์ •๋ฆฌ๋ฅผ ํ•ด๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ์ด ๊ธ€์€ ์ƒํ™œ์ฝ”๋”ฉ์˜ AWS ์•„๋งˆ์กด ์›น ์„œ๋น„์Šค(Amazon Web Services) ์ฑ…์„ ๋ฐ”ํƒ•์œผ๋กœ ์ •๋ฆฌํ•œ ๋‚ด์šฉ์ž…๋‹ˆ๋‹ค.  RDS-1์•„๋งˆ์กด RDS๋Š” Amazon Relational Database Service์˜ ์ค„์ž„๋ง์ž…๋‹ˆ๋‹ค. ์ฆ‰ ์ปดํ“จํ„ฐ์— DB๋ฅผ ์„ค์น˜ํ•˜๊ณ  ๋Œ€์‹  ์šด์˜ํ•ด์ฃผ๋Š” ์„œ๋น„์Šค์ž…๋‹ˆ๋‹ค.

Devops/AWS 2024.08.06
๋ฐ˜์‘ํ˜•