Hello DEV! ๐Ÿ‘‹ ๋งˆ์ผ€ํ„ฐ์˜ Web Tools ๊ตฌ์ถ• ์—ฌ์ •

๋ฐœํ–‰: (2026๋…„ 3์›” 5์ผ ์˜คํ›„ 06:11 GMT+9)
4 ๋ถ„ ์†Œ์š”
์›๋ฌธ: Dev.to

Source: Dev.to

Cover image for Hello DEV! ๐Ÿ‘‹ A Marketerโ€™s Journey into Building Web Tools

์•ˆ๋…•ํ•˜์„ธ์š”, ์ €๋Š” ๋ฆฌ์‚ฌ์ž…๋‹ˆ๋‹ค.

DEV์—์„œ ๋ฉ‹์ง„ ๊ธฐ์ˆ  ๊ธ€๋“ค์„ ํ•œ๋™์•ˆ ์ฝ์–ด์™”๊ณ , ์ด์ œ๋Š” ๊ทธ๋ฆผ์ž์—์„œ ๋‚˜์™€ ์ œ ์ž์‹ ์„ ์†Œ๊ฐœํ•  ๋•Œ๊ฐ€ ์™”๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ์–ด์š”.

์†”์งํžˆ ๋งํ•˜์ž๋ฉด, ์ €๋Š” ์ผ๋ถ€ ๊ฐœ๋ฐœ์ž๋“ค์ด ๋†๋‹ด์ฒ˜๋Ÿผ ๋ถ€๋ฅด๋Š” ๋””์ง€ํ„ธ ๋งˆ์ผ€ํŒ…์ด๋ผ๋Š” โ€œ๋‹คํฌ ์‚ฌ์ด๋“œโ€์—์„œ ์™”์Šต๋‹ˆ๋‹ค. ๐Ÿ˜…

์ง€๋‚œ 10๋…„ ๋„˜๊ฒŒ ์ œ ์„ธ๊ณ„๋Š” SEO, ์‚ฌ์šฉ์ž ํš๋“, ์ฝ˜ํ…์ธ  ์ „๋žต, ์•Œ๊ณ ๋ฆฌ์ฆ˜ ๋ถ„์„์œผ๋กœ ๊ฐ€๋“ํ–ˆ์–ด์š”. ํ•˜์ง€๋งŒ ์ง€๋‚œ 1๋…„ ๋™์•ˆ ์ œ ์ปค๋ฆฌ์–ด๊ฐ€ ์•ฝ๊ฐ„ ์ „ํ™˜๋˜๋ฉด์„œ ์—ฌ๊ธฐ๊นŒ์ง€ ์˜ค๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

Why Iโ€™m Here

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

๋ˆ„๊ตฐ๊ฐ€๊ฐ€ ์™„๋ฒฝํ•œ ๋„๊ตฌ๋ฅผ ๋งŒ๋“ค๊ธฐ๋ฅผ ๊ธฐ๋‹ค๋ฆฌ๊ธฐ๋ณด๋‹ค, ์ €๋Š” ์ง์ ‘ ์ œํ’ˆ ์ชฝ์œผ๋กœ ๋›ฐ์–ด๋“ค๊ธฐ๋กœ ํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ ์—ฌ์ •์—์„œ ์ €๋Š” ์ œ ํ”„๋กœ์ ํŠธ SaveFBS(๋น ๋ฅธ ๋ธŒ๋ผ์šฐ์ € ๊ธฐ๋ฐ˜ ๋ฏธ๋””์–ด ์ถ”์ถœ ์œ ํ‹ธ๋ฆฌํ‹ฐ)๋ฅผ ๋งŒ๋“ค๊ฒŒ ๋˜์—ˆ์–ด์š”.

์ฒ˜์Œ๋ถ€ํ„ฐ ์ œํ’ˆ์„ ๋งŒ๋“ค๋ฉด์„œ ์„œ๋ฒ„ ๋ถ€ํ•˜ ๊ด€๋ฆฌ, DOM ์ตœ์ ํ™”, ํด๋ผ์ด์–ธํŠธโ€‘์‚ฌ์ด๋“œ API ์ฒ˜๋ฆฌ ๋“ฑ ์›น ๊ฐœ๋ฐœ์˜ ๋†€๋ผ์šด ๋ณต์žก์„ฑ์„ ๋ชธ์†Œ ์ฒดํ—˜ํ–ˆ์Šต๋‹ˆ๋‹ค. ์›น์„ ๊ตฌ๋™ํ•˜๋Š” ๊ธฐ์ˆ ์— ๋Œ€ํ•ด ๋‚ด๊ฐ€ ์–ผ๋งˆ๋‚˜ ๋ชจ๋ฅด๋Š” ๊ฒƒ์ด ๋งŽ์€์ง€ ์‹ค๊ฐํ–ˆ์ฃ .

What I Hope to Share & Learn

์ €๋Š” **๋งˆ์ผ€ํŒ…(MarTech)**๊ณผ ์›น ๊ฐœ๋ฐœ ์‚ฌ์ด์˜ ๊ฐ„๊ทน์„ ๋ฉ”์šฐ๊ธฐ ์œ„ํ•ด ์ด ์ปค๋ฎค๋‹ˆํ‹ฐ์— ํ•ฉ๋ฅ˜ํ–ˆ์Šต๋‹ˆ๋‹ค.

What I want to learn from you

  • ์›น ์„ฑ๋Šฅ ๋ฐ ๊ฐ€๋ฒผ์šด UI/UX์— ๋Œ€ํ•œ ๋ชจ๋ฒ” ์‚ฌ๋ก€.
  • ์ตœ์‹  ๋ธŒ๋ผ์šฐ์ € API๊ฐ€ ๋ฌด๊ฑฐ์šด ์ž‘์—…(์ŠคํŠธ๋ฆฌ๋ฐ, ๋ธ”๋กญ ๋“ฑ)์„ ์–ด๋–ป๊ฒŒ ์ฒ˜๋ฆฌํ•˜๋Š”์ง€.
  • ๋น ๋ฅด๊ณ  ํ™•์žฅ ๊ฐ€๋Šฅํ•œ ์›น ์•ฑ์˜ ์•„ํ‚คํ…์ฒ˜.

What Iโ€™d love to share with you

  • ์ฝ”๋“œ๋ฅผ ํ•œ ์ค„ ์“ฐ๊ธฐ ์ „์— SEO๋ฅผ ์–ด๋–ป๊ฒŒ ์ƒ๊ฐํ•ด์•ผ ํ•˜๋Š”์ง€.
  • ์‚ฌ์šฉ์ž๊ฐ€ ์‹ค์ œ๋กœ ํด๋ฆญํ•˜๋Š” ์ด์œ (๊ทธ๋ฆฌ๊ณ  ํ›Œ๋ฅญํ•œ ๋„๊ตฌ๋ฅผ ํฌ๊ธฐํ•˜๊ฒŒ ๋˜๋Š” ์ด์œ ).
  • ๋ฉ‹์ง„ ์‚ฌ์ด๋“œ ํ”„๋กœ์ ํŠธ๋ฅผ ๋งŒ๋“ค์—ˆ์ง€๋งŒ ์ฒซ 1,000๋ช…์˜ ์‚ฌ์šฉ์ž๋ฅผ ํ™•๋ณดํ•˜์ง€ ๋ชปํ•œ ๊ฐœ๋ฐœ์ž๋ฅผ ์œ„ํ•œ ์„ฑ์žฅ ํ•ดํ‚น ํŒ.

์ €๋Š” ๊ฐœ๋ฐœ์ž์™€ ๋งˆ์ผ€ํ„ฐ๊ฐ€ ์„œ๋กœ์˜ ์–ธ์–ด๋ฅผ ์ดํ•ดํ•  ๋•Œ ์ตœ๊ณ ์˜ ์ œํ’ˆ์ด ํƒ„์ƒํ•œ๋‹ค๋Š” ๊ฒƒ์„ ๊ตณ๊ฒŒ ๋ฏฟ์Šต๋‹ˆ๋‹ค.

์ด ์ปค๋ฎค๋‹ˆํ‹ฐ์˜ ์ผ์›์ด ๋˜์–ด ๋งค์šฐ ๊ธฐ์ฉ๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์„œ๋„ ํ•˜์ด๋ธŒ๋ฆฌ๋“œ ๋งˆ์ผ€ํ„ฐ/๋นŒ๋”๊ฐ€ ์žˆ๋‚˜์š”? ํ˜น์€ ์‚ฌ์ด๋“œ ํ”„๋กœ์ ํŠธ๋ฅผ ๋งˆ์ผ€ํŒ…ํ•˜๋ ค๊ณ  ๋ฐฐ์šฐ๊ณ  ์žˆ๋Š” ๊ฐœ๋ฐœ์ž๊ฐ€ ์žˆ๋‚˜์š”? ๋Œ“๊ธ€๋กœ ์—ฐ๊ฒฐํ•ด์š”!

๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค,

๋ฆฌ์‚ฌ ์„ 

0 ์กฐํšŒ
Back to Blog

๊ด€๋ จ ๊ธ€

๋” ๋ณด๊ธฐ ยป

REST vs GraphQL: ๊ธฐ์—…์šฉ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์— ๋” ์ ํ•ฉํ•œ ๊ฒƒ์€?

REST API ์ดํ•ดํ•˜๊ธฐ REST Representational State Transfer๋Š” ๋„คํŠธ์›Œํฌ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์„ค๊ณ„ํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ๋˜๋Š” ์•„ํ‚คํ…์ฒ˜ ์Šคํƒ€์ผ์ž…๋‹ˆ๋‹ค. ํ‘œ์ค€ HTTP ๋ฉ”์„œ๋“œ์— ์˜์กดํ•ฉ๋‹ˆ๋‹ค.

JavaScript ๋ฐฐ์—ด ๋ฉ”์„œ๋“œ ๊ฐ„๋‹จํžˆ ์„ค๋ช… (์˜ˆ์‹œ ํฌํ•จ)

JavaScript์—์„œ ๋ฐฐ์—ด ๋‹ค๋ฃจ๊ธฐ ๋ฐฐ์—ด์€ ํ•˜๋‚˜์˜ ๋ณ€์ˆ˜์— ์—ฌ๋Ÿฌ ๊ฐ’์„ ์ €์žฅํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. js const fruits = 'Apple', 'Banana', 'Mango'; ํ•˜์ง€๋งŒ ์šฐ๋ฆฌ๋Š” ์–ด๋–ป๊ฒŒ ์ถ”๊ฐ€ํ•˜๊ณ , โ€ฆ