๊ด€๋ฆฌ ๋ฉ”๋‰ด

๋ชฉ๋กStudy (91)

JiYoung Dev ๐Ÿ–ฅ

ํŒŒ์ด์ฌ ๋ฉ€ํ‹ฐํ”„๋กœ์„ธ์‹ฑ์„ ํ™œ์šฉํ•œ ๋ณ‘๋ ฌ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๋ฐฉ๋ฒ•

๐Ÿ“ ๋ณ‘๋ ฌ ํ”„๋กœ๊ทธ๋ž˜๋ฐ๋ณ‘๋ ฌ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์€ CPU๊ฐ€ ์‹ฑ๊ธ€ ์ฝ”์–ด๊ฐ€ ์•„๋‹Œ ๋ฉ€ํ‹ฐ ์ฝ”์–ด ์ปดํ“จํ„ฐ ํ™˜๊ฒฝ์—์„œ ์—ฌ๋Ÿฌ ๊ฐœ์˜ ์ž‘์—…์„ ๋ณด๋‹ค ๋นจ๋ฆฌ ์‹คํ–‰ํ•˜๊ธฐ ์œ„ํ•œ ๋ชฉ์ ์œผ๋กœ ๊ฐœ๋ฐœ๋˜๋Š” ํ”„๋กœ๊ทธ๋ž˜๋ฐ์ด๋‹ค.  ๐Ÿ’พ ๋ณ‘๋ ฌ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์„ ๊ตฌํ˜„ํ•˜๋Š” ๋ฐฉ๋ฒ•1๏ธโƒฃ ๋ฉ€ํ‹ฐํ”„๋กœ์„ธ์‹ฑ(Multiprocessing)์—ฌ๋Ÿฌ ๊ฐœ์˜ ํ”„๋กœ์„ธ์Šค๋ฅผ ๋™์‹œ์— ์‹คํ–‰ํ•˜์—ฌ ๋ณ‘๋ ฌ ์ฒ˜๋ฆฌ๋ฅผ ๊ตฌํ˜„ํ•œ๋‹ค. ๊ฐ ํ”„๋กœ์„ธ์Šค๋Š” ๋…๋ฆฝ์ ์œผ๋กœ ์‹คํ–‰๋˜๋ฉฐ, ์„œ๋กœ ๋ฉ”๋ชจ๋ฆฌ ๊ณต๊ฐ„์„ ๊ณต์œ ํ•˜์ง€ ์•Š์œผ๋ฏ€๋กœ ํ”„๋กœ์„ธ์Šค ๊ฐ„ ํ†ต์‹ (IPC)๊ฐ€ ํ•„์š”ํ•˜๋‹ค. ๋ฉ€ํ‹ฐ ํ”„๋กœ์„ธ์‹ฑ์€ CPU ์ฝ”์–ด๋ฅผ ์—ฌ๋Ÿฌ ๊ฐœ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ์–ด ๋ฉ€ํ‹ฐ์ฝ”์–ด ์‹œ์Šคํ…œ์—์„œ ์„ฑ๋Šฅ์„ ํฌ๊ฒŒ ํ–ฅ์ƒ์‹œํ‚ฌ ์ˆ˜ ์žˆ์œผ๋ฉฐ, ๊ฐ ํ”„๋กœ์„ธ์Šค๊ฐ€ ๋…๋ฆฝ์ ์œผ๋กœ ์‹คํ–‰๋˜๋ฏ€๋กœ ๋‹ค๋ฅธ ํ”„๋กœ์„ธ์Šค์™€ ์ถฉ๋Œ ์—†์ด ์•ˆ์ „ํ•˜๊ฒŒ ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ๋‹ค.  2๏ธโƒฃ ๋ฉ€ํ‹ฐ์Šค๋ ˆ๋”ฉ(Multithreading)ํ•˜๋‚˜์˜ ํ”„๋กœ์„ธ์Šค ๋‚ด์—์„œ ์—ฌ๋Ÿฌ ์Šค๋ ˆ๋“œ๋ฅผ ์ƒ..

Study/Back-End 2025. 3. 3. 17:09
Linux ํ”„๋กœ์„ธ์Šค๋ฅผ ์ƒ์„ฑํ•˜๋Š” 3๊ฐ€์ง€ ๋ฐฉ๋ฒ• (spawn, fork, exec)

ํŒŒ์ด์ฌ์€ GIL ํŠน์„ฑ ๋•Œ๋ฌธ์— ๋ฉ€ํ‹ฐ ์Šค๋ ˆ๋“œ๋ฅผ ์‚ฌ์šฉํ•œ ๋ณ‘๋ ฌ ์ฒ˜๋ฆฌ์—์„œ ์ œํ•œ์„ ๋ฐ›๋Š”๋‹ค. ๋”ฐ๋ผ์„œ ํŒŒ์ด์ฌ์€ ๋ฉ€ํ‹ฐ ํ”„๋กœ์„ธ์‹ฑ์„ ํ™œ์šฉํ•˜์—ฌ ๋ณ‘๋ น ์ฒ˜๋ฆฌ๋ฅผ ํ•˜๊ณ , ์ œ๋Œ€๋กœ ๋œ ๋ณ‘๋ ฌ ์ฒ˜๋ฆฌ๋ฅผ ๊ตฌํ˜„ํ•˜๊ธฐ ์œ„ํ•ด ํ”„๋กœ์„ธ์Šค๋ฅผ ์ƒ์„ฑํ•˜๋Š” 3๊ฐ€์ง€ ๋ฐฉ๋ฒ•์„ ์ดํ•ดํ•˜๋Š” ๊ณผ์ •์ด ํ•„์š”ํ•˜๋‹ค.  ** GIL(Global Interpreter Lock) : ํŒŒ์ด์ฌ ์ธํ„ฐํ”„๋ฆฌํ„ฐ๊ฐ€ ์Šค๋ ˆ๋“œ๋ฅผ ๊ด€๋ฆฌํ•˜๋Š” ๋ฐฉ์‹ ์ค‘ ํ•˜๋‚˜๋กœ, ํ•œ ๋ฒˆ์— ํ•˜๋‚˜์˜ ์Šค๋ ˆ๋“œ๋งŒ์ด ํŒŒ์ด์ฌ ๊ฐ์ฒด์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋„๋ก ์ œํ•œํ•œ๋‹ค. ์ด๋ฅผ ํ†ตํ•ด ๋ฉ€ํ‹ฐ์Šค๋ ˆ๋”ฉ ํ™˜๊ฒฝ์—์„œ ํŒŒ์ด์ฌ ํ”„๋กœ๊ทธ๋žจ์˜ ์‹คํ–‰์„ ์•ˆ์ „ํ•˜๊ฒŒ ๋งŒ๋“ค์–ด์ฃผ์ง€๋งŒ, ๋™์‹œ์— ์„ฑ๋Šฅ ์ €ํ•˜์˜ ์›์ธ์ด ๋˜๊ธฐ๋„ ํ•œ๋‹ค.  ๐Ÿ“ fork()fork()๋Š” ํ˜„์žฌ ์‹คํ–‰ ์ค‘์ธ ํ”„๋กœ์„ธ์Šค(๋ถ€๋ชจ ํ”„๋กœ์„ธ์Šค)๋ฅผ ๋ณต์ œํ•˜์—ฌ ์ƒˆ๋กœ์šด ํ”„๋กœ์„ธ์Šค๋ฅผ ์ƒ์„ฑํ•œ๋‹ค. ์ƒˆ๋กœ์šด ํ”„๋กœ์„ธ์Šค๋ฅผ ์ž์‹ ํ”„๋กœ์„ธ์Šค(child proce..

Study/Back-End 2025. 3. 3. 15:28
Galera Cluster๋ฅผ ํ†ตํ•œ MariaDB ํด๋Ÿฌ์Šคํ„ฐ๋ง ๊ตฌ์„ฑ (2) Galera Cluster ๋™์ž‘ ์›๋ฆฌ

์ง€๋‚œ ๊ธ€์—์„œ MariaDB ํด๋Ÿฌ์Šคํ„ฐ๋ง์„ ์œ„ํ•œ ๋‘๊ฐ€์ง€ ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์•Œ์•„๋ณด์•˜๋‹ค. Galera Cluster๋ฅผ ํ†ตํ•œ MariaDB ์ด์ค‘ํ™” ๊ตฌ์„ฑ (1) MariaDB ์ด์ค‘ํ™” ์ข…๋ฅ˜(Replication, Galera Cluster)DB ํ˜น์€ ์Šคํ”„๋ง ๋ถ€ํŠธ ์„œ๋ฒ„์™€ ๊ฐ™์€ ์‹œ์Šคํ…œ์„ ๊ตฌ์„ฑํ•  ๋•Œ, ๋‹จ ํ•˜๋‚˜์˜ ์„œ๋ฒ„๋ณด๋‹ค๋Š” ์ด์ค‘ํ™” ํ˜น์€ ๊ทธ ์ด์ƒ์œผ๋กœ ํ•˜์—ฌ ์•„ํ‚คํ…์ฒ˜๋ฅผ ์„ค๊ณ„ํ•˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋งŽ๋‹ค. ์ด์ค‘ํ™”์˜ ๋ชฉ์ ์€ ๊ณ ๊ฐ€์šฉ์„ฑ์ธ๋ฐ, ์žฌํ•ด ๋ฐœ์ƒ์ด๋‚˜ ์˜ˆdanyoujeong.tistory.com Replication์„ ํ†ตํ•ด Master-Slave ๋ฐฉ์‹์œผ๋กœ ๊ตฌ์„ฑํ•˜๋Š” ๋ฐฉ๋ฒ•๊ณผ Galera Cluster๋ฅผ ํ†ตํ•ด ๋ฉ€ํ‹ฐ ๋งˆ์Šคํ„ฐ ๋ฐฉ์‹์œผ๋กœ ํด๋Ÿฌ์Šคํ„ฐ๋ฅผ ๊ตฌ์„ฑํ•˜๋Š” ๋ฐฉ์‹์— ๋Œ€ํ•ด ๊ฐœ๋… ์ •๋„๋ฅผ ์•Œ์•„๋ณด์•˜๋Š”๋ฐ, ์ด๋ฒˆ ๊ธ€์—์„œ๋Š” ๊ทธ๋ž˜์„œ ์‹ค์ œ๋กœ Galera Cluster ์–ด๋–ค ๋™์ž‘ ..

Study/database 2025. 2. 20. 22:03
Galera Cluster๋ฅผ ํ†ตํ•œ MariaDB ์ด์ค‘ํ™” ๊ตฌ์„ฑ (1) MariaDB ์ด์ค‘ํ™” ์ข…๋ฅ˜(Replication, Galera Cluster)

DB ํ˜น์€ ์Šคํ”„๋ง ๋ถ€ํŠธ ์„œ๋ฒ„์™€ ๊ฐ™์€ ์‹œ์Šคํ…œ์„ ๊ตฌ์„ฑํ•  ๋•Œ, ๋‹จ ํ•˜๋‚˜์˜ ์„œ๋ฒ„๋ณด๋‹ค๋Š” ์ด์ค‘ํ™” ํ˜น์€ ๊ทธ ์ด์ƒ์œผ๋กœ ํ•˜์—ฌ ์•„ํ‚คํ…์ฒ˜๋ฅผ ์„ค๊ณ„ํ•˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋งŽ๋‹ค. ์ด์ค‘ํ™”์˜ ๋ชฉ์ ์€ ๊ณ ๊ฐ€์šฉ์„ฑ์ธ๋ฐ, ์žฌํ•ด ๋ฐœ์ƒ์ด๋‚˜ ์˜ˆ์ƒ์น˜ ๋ชปํ•œ ์žฅ์•  ์ƒํ™ฉ์—์„œ๋„ ์‹œ์Šคํ…œ์ด ๋ฉˆ์ถ”์ง€ ์•Š๊ณ  ์ •์ƒ์ ์œผ๋กœ ์šด์˜๋˜๋„๋ก ํ•˜๊ณ ์ž ํ•จ์ด๋‹ค.  ์˜ค๋Š˜์€ DB ์ค‘์—์„œ๋„ ๊ด€๊ณ„ํ˜• ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค์˜ ํ•œ ์ข…๋ฅ˜์ธ MariaDB๋ฅผ ์ด์ค‘ํ™”ํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ณ ์ž ํ•œ๋‹ค. ํ•„์ž๋Š” MariaDB์˜ ์—ฌ๋Ÿฌ ์ด์ค‘ํ™” ๋ฐฉ๋ฒ• ์ค‘์—์„œ Galera Cluster๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ด์ค‘ํ™”๋ฅผ ์‹œ๋„ํ–ˆ๊ณ , ๊ทธ ๊ณผ์ •๊ณผ ๊ด€๋ จ๋œ ์ด๋ก ์„ ์ •๋ฆฌํ•ด ๋ณด์•˜๋‹ค. โญMariaDB๋ฅผ ์ด์ค‘ํ™”ํ•˜๋Š” ์—ฌ๋Ÿฌ๊ฐ€์ง€ ๋ฐฉ๋ฒ•๋“ค๋ณธ๋ก ์— ๋“ค์–ด๊ฐ€๊ธฐ์— ์•ž์„œ MariaDB๋ฅผ ์ด์ค‘ํ™”ํ•˜๋Š” ์—ฌ๋Ÿฌ ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ๋จผ์ € ์•Œ์•„๋ณด์ž. Galera Cluster๋ฅผ ํ†ตํ•œ ๋ฐฉ๋ฒ•๋„ ์žˆ์ง€๋งŒ, ..

Study/database 2025. 2. 19. 22:24
React Typescript ํ”„๋กœ์ ํŠธ ์ƒ์„ฑ ๋ฐ tsconfig.js ์„ค์ •

React + Typescript ํ”„๋กœ์ ํŠธ ์‹œ์ž‘ํ•˜๊ธฐํ˜„์žฌ ๊ฒฝ๋กœ์— typescript React ์•ฑ ํ”„๋กœ์ ํŠธ ์ƒ์„ฑyarn create react-app . --template typescript  tsconfig.jsํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ๋ณ€ํ™˜ ์‹œํ‚ค๋Š” ์ปดํŒŒ์ผ ์„ค์ •์„ ํ•œ๊บผ๋ฒˆ์— ์ •์˜ ํ•ด๋†“๋Š” ํŒŒ์ผ๋ธŒ๋ผ์šฐ์ €์—์„œ๋Š” ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ฝ์ง€ ๋ชปํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ์ปดํŒŒ์ผ ํ•ด์•ผ ํ•œ๋‹ค. ํ”„๋กœ์ ํŠธ๋ฅผ ์ปดํŒŒ์ผ ํ•˜๋Š”๋ฐ ํ•„์š”ํ•œ ๋ฃจํŠธ ํŒŒ์ผ, ์ปดํŒŒ์ผ๋Ÿฌ ์˜ต์…˜ ๋“ฑ์„ ์ƒ์„ธํžˆ ์„ค์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.  { //์ปดํŒŒ์ผ ๋Œ€์ƒ์—์„œ ์ œ์™ธํ•  ํŒŒ์ผ๋“ค์„ ์ง€์ •ํ•˜๋Š” ์†์„ฑ "exclude": [], // ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ์ปดํŒŒ์ผ๋Ÿฌ์˜ ์˜ต์…˜๋“ค์„ ์ง€์ •ํ•˜๋Š” ์†์„ฑ "compilerOptions": { "target": "es5", ..

Study/React 2025. 2. 8. 15:18
Frontend Fundemental (ํ† ์Šค, ํ”„๋ก ํŠธ์—”๋“œ ์ข‹์€ ์ฝ”๋“œ ์ž‘์„ฑํ•˜๊ธฐ) ์ •๋ฆฌ

Props Drilling ์ง€์šฐ๊ธฐ Props Drilling ์ง€์šฐ๊ธฐGuidelines for easily modifiable frontend codefrontend-fundamentals.com  ๊ตฌ๋…์ค‘์ธ ์œ ํŠœ๋ฒ„๊ฐ€ ํ•˜๋‚˜์˜ ์˜์ƒ์„ ์ƒˆ๋กญ๊ฒŒ ์˜ฌ๋ ธ๋Š”๋ฐ, ํ† ์Šค์—์„œ ์ž‘์„ฑํ•œ Frontend Fundemental์„ ์†Œ๊ฐœํ•˜๋Š” ์˜์ƒ์ด์—ˆ๋‹ค. Frontend Fundemental์€ Toss ๊ฐœ๋ฐœ์ž๊ฐ€ ์ž‘์„ฑํ•œ ์ข‹์€ ํ”„๋ก ํŠธ์—”๋“œ ์ฝ”๋“œ์˜ ๊ธฐ์ค€์„ ์ž์‹ ๋“ค์˜ ๊ธฐ์ค€์— ๋งž์ถฐ ์ž‘์„ฑํ•œ ๋ฌธ์„œ์ด๋‹ค. ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์„ ํ•˜๋ฉด์„œ ๋‹ค์–‘ํ•œ ์†Œ์Šค๋ฅผ ๋ณด์ง€ ๋ชปํ•ด ์–ด๋–ค ์ฝ”๋“œ๊ฐ€ ์ข‹์€ ์ฝ”๋“œ์ธ์ง€ ๋ชจ๋ฅด๊ฒ ๋‹ค๋Š” ์ƒ๊ฐ์„ ํ–ˆ๋Š”๋ฐ ์ด ๋ฌธ์„œ๋ฅผ ์ •๋…ํ•˜์—ฌ ์ข‹์€ ์ฝ”๋“œ๋ž€ ๋ฌด์—‡์ธ์ง€ ์ฝ์–ด๋ณด๊ณ  ํ˜„์žฌ ๋‚˜์˜ ์ฝ”๋“œ๋Š” ์–ด๋–ค์ง€ ๋Œ์•„๋ณด๊ณ  ๋‚˜๋งŒ์˜ ์ข‹์€ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๊ธฐ ์œ„ํ•ด ์ƒ๊ฐ์„ ์ •๋ฆฌํ•ด๋ณด๋Š” ์‹œ๊ฐ„์„ ๊ฐ€์ง€๊ณ ์ž ..

Study/React 2025. 1. 16. 00:14
WebSocket๊ณผ WebRTC ๋น„๊ตํ•˜๋ฉฐ ์ดํ•ดํ•˜๊ธฐ

2025๋…„ ์ƒˆํ•ด ์ƒˆ๋กœ์šด ๋ชฉํ‘œ๋กœ ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•˜๊ธฐ๋กœ ํ–ˆ๋‹ค. ๋””์Šค์ฝ”๋“œ ํด๋ก ์ฝ”๋”ฉ์ธ๋ฐ ๊ธฐ๋Šฅ ๊ตฌํ˜„์„ ํ•˜๋ ค๋‹ค ๋ณด๋‹ˆ WebSocket๊ณผ WebRTC์— ๋Œ€ํ•ด์„œ ํ•„์ˆ˜๋กœ ์•Œ๊ณ  ์žˆ์–ด์•ผ ํ•ด์„œ ๋‚ด ๋‚˜๋ฆ„๋Œ€๋กœ ๋จธ๋ฆฌ์— ์ž˜ ๋“ค์–ด์˜ค๋Š” ์ˆœ์„œ๋Œ€๋กœ ์ •๋ฆฌํ•ด ๋ณด์•˜๋‹ค.  ์•„๋ž˜ ๋‚ด์šฉ์—์„œ ๊ตฌํ˜„ํ•˜๊ฑฐ๋‚˜ ์ž๋ฃŒ๋ฅผ ์ฐพ๋‹ค๊ฐ€ ํ‹€๋ฆฐ ๋ถ€๋ถ„์ด๋‚˜ ์ถ”๊ฐ€ํ•  ๋‚ด์šฉ์ด ์žˆ์œผ๋ฉด ๊ณ„์†ํ•ด์„œ ์ถ”๊ฐ€ํ•  ์˜ˆ์ •์ด๋‹ค. ์›น์˜ ํ†ต์‹  ๋ฐฉ์‹์—๋Š” ์—ฌ๋Ÿฌ ๊ฐ€์ง€๊ฐ€ ์žˆ๋‹ค.๋Œ€ํ‘œ์ ์œผ๋กœ HTTP, Websocket, Polling, gRPC, SSE, GraphQL ๋“ฑ์ด ์žˆ๋Š”๋ฐ, ๊ฐ๊ฐ์˜ ๋ฐฉ์‹๋งˆ๋‹ค ํŠน์ง•์ด ์žˆ์–ด ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ํŠน์„ฑ์— ๋”ฐ๋ผ ์•Œ๋งž์€ ๊ฒƒ์„ ์„ ํƒํ•˜์—ฌ ์‚ฌ์šฉํ•œ๋‹ค.HTTP๋Š” ์›น ํ†ต์‹ ์˜ ๊ธฐ๋ณธ ํ”„๋กœํ† ์ฝœ๋กœ ์š”์ฒญ-์‘๋‹ต ๋ฐฉ์‹ ๊ธฐ๋ฐ˜์œผ๋กœ ํ•œ ๋Œ€ํ‘œ์ ์ธ ํ†ต์‹  ํ”„๋กœํ† ์ฝœ์ด๋‹ค.WebSocket์€ ์‹ค์‹œ๊ฐ„ ์–‘๋ฐฉํ–ฅ ํ†ต์‹ ์„ ์ง€์›ํ•˜๋Š” ํ”„๋กœ..

Study/๊ธฐํƒ€ 2025. 1. 15. 00:45
Javascript Call Stack, Callback Queue, Event Loop

์ด๋ฒˆ์— 30์ดˆ ๋งˆ๋‹ค API๋ฅผ ํ˜ธ์ถœํ•˜๋Š” ์ฝ”๋“œ๋ฅผ ๊ตฌํ˜„ํ•˜๋ฉด์„œ setInterval ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜์˜€๋‹ค. ์‚ฌ์šฉ๋ฒ•์€ ์•Œ๊ณ  ์žˆ์—ˆ๋Š”๋ฐ setInterval์ด ์–ด๋–ค ๊ฑด์ง€ ์ฐพ์•„๋ณด๋‹ค๊ฐ€ ๋น„๋™๊ธฐ์™€ ๊ด€๋ จ๋œ ๊ฐœ๋…๋“ค์ด ๋‚˜์™€์„œ ์ •๋ฆฌ๋ฅผ ํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค. ๋”ฐ๋ผ์„œ ์˜ค๋Š˜์€ ๋น„๋™๊ธฐ ๊ฐœ๋…์— ๋“ฑ์žฅํ•˜๋Š” Call Stack, Callback Queue, Event Loop์— ๋Œ€ํ•ด ์•Œ์•„๋ณด์•˜๋‹ค.  ๋ณธ๋ก ์— ๋“ค์–ด๊ฐ€๊ธฐ ์ „์— ๋ธŒ๋ผ์šฐ์ €์—์„œ HTML ๋‚ด๋ถ€ Javascript๋กœ ์ž‘์„ฑ๋œ ์ฝ”๋“œ๊ฐ€ ์‹คํ–‰๋˜๋Š” ๊ณผ์ •์— ๋Œ€ํ•ด ์ž ์‹œ ์ •๋ฆฌํ•ด๋ณด์ž. ๐Ÿ”Ž Javascript ์‹คํ–‰์›๋ฆฌ์›น ๋ธŒ๋ผ์šฐ์ €๋Š” ์•„๋ž˜์™€ ๊ฐ™์€ ๊ตฌ์กฐ๋กœ ๊ตฌ์„ฑ๋œ๋‹ค. ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค: ๊ฒ€์ƒ‰์ฐฝ, ๋’ค๋กœ๊ฐ€๊ธฐ/์•ž์œผ๋กœ๊ฐ€๊ธฐ ๋ฒ„ํŠผ, ์ƒˆ๋กœ๊ณ ์นจ ๋“ฑ ๋ธŒ๋ผ์šฐ์ € ํ”„๋กœ๊ทธ๋žจ ์ž์ฒด GUI๋ธŒ๋ผ์šฐ์ € ์—”์ง„: ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค์™€ ๋ Œ๋”๋ง ์—”์ง„ ์‚ฌ์ด์˜ ๋™์ž‘ ์ œ์–ด๋ Œ๋”..

Study/React 2024. 11. 29. 23:45
Webpack: ๊ฐœ๋…๊ณผ ์„ค์ •

๋ถ€ํŠธ์บ ํ”„์—์„œ React๋ฅผ ์ฒ˜์Œ ์ ‘ํ–ˆ์„ ๋•Œ CRA(react-create-app)์„ ํ†ตํ•ด ์•ฑ์„ ๊ตฌ์„ฑํ•˜๊ณ  ์‹คํ–‰ํ•˜์˜€๋‹ค. ํšŒ์‚ฌ์— ์ž…์‚ฌํ•œ ํ›„ ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์„ ๋งก๊ฒŒ ๋˜๋ฉด์„œ ํ”„๋กœ์ ํŠธ๋ฅผ ๊ตฌ์„ฑํ•˜๊ฒŒ ๋˜์—ˆ๋Š”๋ฐ, CRA์˜ ๊ฒฝ์šฐ ๋‚ด์žฅ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ๋งŽ์•„์„œ ๊ทœ๋ชจ๊ฐ€ ์ปค์ง€๋ฉด ์„ฑ๋Šฅ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ธ€์„ ๋ณด๊ฒŒ ๋˜์—ˆ๋‹ค. ๋”ฐ๋ผ์„œ ์ด๋ฒˆ ํ”„๋กœ์ ํŠธ์—์„œ๋Š” CRA๊ฐ€ ์•„๋‹Œ ์ง์ ‘ Webpack์„ ์ ์šฉํ•˜์˜€๋Š”๋ฐ(CRA๊ฐ€ ์ž๋™์œผ๋กœ Webpack์„ ์ ์šฉ), ๊ทธ ๊ณผ์ •์—์„œ Webpack์ด ๋ฌด์—‡์ธ์ง€, ์–ด๋–ค ์—ญํ• ์„ ํ•˜๋Š”์ง€, ๊ฐ ์„ค์ •์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ณ ์ž ํ•œ๋‹ค. ๐Ÿ”Ž Webpack์ด๋ž€ Webpack์€ ๋ชจ๋˜ Javascript ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์œ„ํ•œ ์ •์  ๋ชจ๋“ˆ ๋ฒˆ๋“ค๋Ÿฌ์ด๋‹ค.Javascript๋ฅผ ์œ„ํ•œ ๋ชจ๋“ˆ ๋ฒˆ๋“ค๋Ÿฌ๊ฐ€ Webpack๋งŒ ์žˆ๋Š” ๊ฒƒ์€ ์•„๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์ด๋ฒˆ ํฌ์ŠคํŒ…์—..

Study/React 2024. 11. 27. 22:22