Q. ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž ํฌ๋กฌ ํ™•์žฅํ”„๋กœ๊ทธ๋žจ ์ถ”์ฒœ

2025. 1. 22. 15:27ยทw. GPTs
ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋ฅผ ์œ„ํ•œ ํฌ๋กฌ ํ™•์žฅ ํ”„๋กœ๊ทธ๋žจ์„ ์†Œ๊ฐœํ•ฉ๋‹ˆ๋‹ค. ์ด ๋„๊ตฌ๋“ค์€ ๋””๋ฒ„๊น…, UI ์„ค๊ณ„, ์„ฑ๋Šฅ ์ตœ์ ํ™”, ๊ทธ๋ฆฌ๊ณ  ์ƒ์‚ฐ์„ฑ์„ ๋†’์ด๋Š” ๋ฐ ๋„์›€์„ ์ค„ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

1. ๋””๋ฒ„๊น… ๋ฐ ๊ฐœ๋ฐœ ๋„๊ตฌ

1.1 React Developer Tools

  • ์„ค๋ช…: React๋กœ ์ž‘์„ฑ๋œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ์ปดํฌ๋„ŒํŠธ ๊ตฌ์กฐ์™€ ์ƒํƒœ๋ฅผ ๋””๋ฒ„๊น…ํ•  ์ˆ˜ ์žˆ๋Š” ๋„๊ตฌ.
  • ์‚ฌ์šฉ ๋ชฉ์ : React ์•ฑ์˜ ์ƒํƒœ์™€ Props ๋””๋ฒ„๊น….
  • Chrome Web Store ๋งํฌ

1.2 Redux DevTools

  • ์„ค๋ช…: Redux ์ƒํƒœ๋ฅผ ์ถ”์ ํ•˜๊ณ  ๋””๋ฒ„๊น…ํ•  ์ˆ˜ ์žˆ๋Š” ๋„๊ตฌ.
  • ์‚ฌ์šฉ ๋ชฉ์ : Redux ์Šคํ† ์–ด์˜ ์ƒํƒœ์™€ ์•ก์…˜ ํ๋ฆ„ ์ถ”์ .
  • Chrome Web Store ๋งํฌ

1.3 Vue.js Devtools

  • ์„ค๋ช…: Vue.js ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ์ƒํƒœ ๋ฐ ๊ตฌ์กฐ๋ฅผ ๋””๋ฒ„๊น….
  • ์‚ฌ์šฉ ๋ชฉ์ : Vue ์•ฑ์˜ ์ปดํฌ๋„ŒํŠธ์™€ Vuex ์ƒํƒœ ๊ด€๋ฆฌ.
  • Chrome Web Store ๋งํฌ

1.4 Postman

  • ์„ค๋ช…: API ์š”์ฒญ์„ ์ƒ์„ฑํ•˜๊ณ  ํ…Œ์ŠคํŠธํ•  ์ˆ˜ ์žˆ๋Š” ๋„๊ตฌ.
  • ์‚ฌ์šฉ ๋ชฉ์ : REST API์™€ GraphQL API ํ…Œ์ŠคํŠธ ๋ฐ ๋””๋ฒ„๊น….
  • Chrome Web Store ๋งํฌ

2. UI ๋ฐ ์Šคํƒ€์ผ๋ง

2.1 CSS Peeper

  • ์„ค๋ช…: CSS ์Šคํƒ€์ผ๊ณผ ๋””์ž์ธ ์†์„ฑ์„ ๋น ๋ฅด๊ฒŒ ๋ถ„์„.
  • ์‚ฌ์šฉ ๋ชฉ์ : UI ์š”์†Œ์˜ ๋””์ž์ธ ์ •๋ณด๋ฅผ ์‰ฝ๊ฒŒ ํ™•์ธ.
  • Chrome Web Store ๋งํฌ

2.2 WhatFont

  • ์„ค๋ช…: ์›น ํŽ˜์ด์ง€์—์„œ ์‚ฌ์šฉ๋œ ํฐํŠธ๋ฅผ ์‹๋ณ„.
  • ์‚ฌ์šฉ ๋ชฉ์ : ๋””์ž์ธ ์žฌํ˜„์„ ์œ„ํ•ด ํฐํŠธ ์ •๋ณด๋ฅผ ํ™•์ธ.
  • Chrome Web Store ๋งํฌ

2.3 ColorZilla

  • ์„ค๋ช…: ์ƒ‰์ƒ ์ฝ”๋“œ ์ถ”์ถœ ๋ฐ ์ƒ‰์ƒ ํŒ”๋ ˆํŠธ ์ƒ์„ฑ.
  • ์‚ฌ์šฉ ๋ชฉ์ : ์ƒ‰์ƒ ์ฝ”๋“œ ์ถ”์ถœ ๋ฐ ์ •ํ™•ํ•œ ์ปฌ๋Ÿฌ ์žฌํ˜„.
  • Chrome Web Store ๋งํฌ

3. ์„ฑ๋Šฅ ๋ฐ SEO

3.1 Lighthouse

  • ์„ค๋ช…: ์›น ํŽ˜์ด์ง€์˜ ์„ฑ๋Šฅ, ์ ‘๊ทผ์„ฑ, SEO ๋“ฑ์„ ๋ถ„์„.
  • ์‚ฌ์šฉ ๋ชฉ์ : ์›น์‚ฌ์ดํŠธ ์ตœ์ ํ™” ๋ฐ ์„ฑ๋Šฅ ๊ฐœ์„ .
  • Chrome Web Store ๋งํฌ

3.2 Pagespeed Insights

  • ์„ค๋ช…: Google์˜ ํŽ˜์ด์ง€ ๋กœ๋”ฉ ์†๋„ ์ ๊ฒ€ ๋„๊ตฌ.
  • ์‚ฌ์šฉ ๋ชฉ์ : ํŽ˜์ด์ง€ ์†๋„ ๋ฌธ์ œ์  ๋ถ„์„ ๋ฐ ๊ฐœ์„ .
  • Chrome Web Store ๋งํฌ

4. ํ˜‘์—… ๋ฐ ์ƒ์‚ฐ์„ฑ ๋„๊ตฌ

4.1 GitHub + GitLab Enhancer

  • ์„ค๋ช…: GitHub/GitLab์˜ UI๋ฅผ ๊ฐœ์„ ํ•˜๊ณ  ์ถ”๊ฐ€ ๊ธฐ๋Šฅ ์ œ๊ณต.
  • ์‚ฌ์šฉ ๋ชฉ์ : ์ฝ”๋“œ ๋ฆฌ๋ทฐ ๋ฐ ํ˜‘์—… ํšจ์œจ์„ฑ ํ–ฅ์ƒ.
  • Chrome Web Store ๋งํฌ

4.2 Daily.dev

  • ์„ค๋ช…: ์ตœ์‹  ๊ฐœ๋ฐœ ๊ด€๋ จ ๋‰ด์Šค์™€ ๋ธ”๋กœ๊ทธ๋ฅผ ์ œ๊ณต.
  • ์‚ฌ์šฉ ๋ชฉ์ : ์ตœ์‹  ํ”„๋ก ํŠธ์—”๋“œ ๊ธฐ์ˆ  ํŠธ๋ Œ๋“œ ํŒŒ์•….
  • Chrome Web Store ๋งํฌ

4.3 Tab Manager Plus

  • ์„ค๋ช…: ๋‹ค์ค‘ ํƒญ์„ ํšจ์œจ์ ์œผ๋กœ ๊ด€๋ฆฌ.
  • ์‚ฌ์šฉ ๋ชฉ์ : ์ž‘์—… ์ค‘ ์—ด๋ ค ์žˆ๋Š” ํƒญ๋“ค์„ ์ฒด๊ณ„์ ์œผ๋กœ ์ •๋ฆฌ.
  • Chrome Web Store ๋งํฌ

5. ๊ธฐํƒ€ ์œ ์šฉํ•œ ๋„๊ตฌ

5.1 Wappalyzer

  • ์„ค๋ช…: ์›น์‚ฌ์ดํŠธ์˜ ๊ธฐ์ˆ  ์Šคํƒ ๋ถ„์„.
  • ์‚ฌ์šฉ ๋ชฉ์ : ๊ธฐ์ˆ  ์กฐ์‚ฌ ๋ฐ ๊ฒฝ์Ÿ์‚ฌ ๋ถ„์„.
  • Chrome Web Store ๋งํฌ

5.2 JSON Viewer

  • ์„ค๋ช…: JSON ๋ฐ์ดํ„ฐ๋ฅผ ๋ณด๊ธฐ ์‰ฝ๊ฒŒ ํฌ๋งทํŒ….
  • ์‚ฌ์šฉ ๋ชฉ์ : API ์‘๋‹ต ๋ฐ์ดํ„ฐ ์‹œ๊ฐํ™”.
  • Chrome Web Store ๋งํฌ

 

์ €์ž‘์žํ‘œ์‹œ ๋น„์˜๋ฆฌ ๋™์ผ์กฐ๊ฑด (์ƒˆ์ฐฝ์—ด๋ฆผ)

'w. GPTs' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

Q. SEO ์ตœ์ ํ™” ์ฒดํฌ ํ•˜๋Š” ๋ฐฉ๋ฒ•  (0) 2025.02.06
Q. ๊ฒ€์ƒ‰์—”์ง„ ์ตœ์„ํ™”์‹œ ์‚ฌ์ดํŠธ๋งต ๊ผญ ๋งŒ๋“ค์–ด์•ผ ํ• ๊นŒ?  (0) 2025.02.06
Q. ๋„ค์ด๋ฒ„ ์„œ์น˜์–ด๋“œ๋ฐ”์ด์ €์— ๋“ฑ๋กํ•ด๋„ ์•ˆ๋‚˜์˜ค๋Š” ๊ฒฝ์šฐ  (0) 2024.12.13
Q. 2024 ์ตœ์‹  ์›น ๊ฐœ๋ฐœ ๊ธฐ์ˆ   (0) 2024.12.02
2023 ์ตœ์‹  ์›น ๊ฐœ๋ฐœ ๊ธฐ์ˆ  8๊ฐ€์ง€  (0) 2024.03.06
'w. GPTs' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€
  • Q. SEO ์ตœ์ ํ™” ์ฒดํฌ ํ•˜๋Š” ๋ฐฉ๋ฒ•
  • Q. ๊ฒ€์ƒ‰์—”์ง„ ์ตœ์„ํ™”์‹œ ์‚ฌ์ดํŠธ๋งต ๊ผญ ๋งŒ๋“ค์–ด์•ผ ํ• ๊นŒ?
  • Q. ๋„ค์ด๋ฒ„ ์„œ์น˜์–ด๋“œ๋ฐ”์ด์ €์— ๋“ฑ๋กํ•ด๋„ ์•ˆ๋‚˜์˜ค๋Š” ๊ฒฝ์šฐ
  • Q. 2024 ์ตœ์‹  ์›น ๊ฐœ๋ฐœ ๊ธฐ์ˆ 
๋น™๊ณ ๊ตฌ๋ง›ํƒ•
๋น™๊ณ ๊ตฌ๋ง›ํƒ•
  • ๋น™๊ณ ๊ตฌ๋ง›ํƒ•
    ๐•Ž๐”ผ๐”น ๐”ธ๐•ƒ๐•ƒ ๐•ƒ๐•†๐”พ
    ๋น™๊ณ ๊ตฌ๋ง›ํƒ•
  • ๋ธ”๋กœ๊ทธ ๋ฉ”๋‰ด

    • ๋ฐฉ๋ช…๋ก
    • ๊ธ€์“ฐ๊ธฐ
    • ๊ด€๋ฆฌ์ž
    • ์ „์ฒด๋ณด๊ธฐ N
      • w. Gemini
      • w. GPTs
      • After. 2025 N
      • Before. 2021
  • ์ธ๊ธฐ ๊ธ€

  • ํƒœ๊ทธ

    footer ํ•˜๋‹จ์— ๊ณ ์ •
    min-height:100%
    footer ๊ณ ์ •
    border-collapse ์˜ค๋ฅ˜
    ie9 ์„  ๋ฒ„๊ทธ
    input fileํƒœ๊ทธ ๋ฐ”๊พธ๊ธฐ
    box-shadow
    css3
    ie collapse ๋ฒ„๊ทธ
  • hELLOยท Designed By์ •์ƒ์šฐ.v4.10.5
๋น™๊ณ ๊ตฌ๋ง›ํƒ•
Q. ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž ํฌ๋กฌ ํ™•์žฅํ”„๋กœ๊ทธ๋žจ ์ถ”์ฒœ
์ƒ๋‹จ์œผ๋กœ

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”