Laravel-log-viewer: ๊ฑฐ์˜ ๋ณต์‚ฌํ•  ์ˆ˜ ์—†๋Š” ๋กœ๊ทธ ์ฝ˜ํ…์ธ 

์— ๋งŒ๋“  2020๋…„ 06์›” 24์ผ  ยท  2์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: rap2hpoutre/laravel-log-viewer

๋จผ์ € ํ›Œ๋ฅญํ•œ ํŒจํ‚ค์ง€์— ๊ฐ์‚ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค.

๋‘ ๋ฒˆ์งธ๋กœ ํด๋ฆญํ•  ๋•Œ ํŠน์ • ๋กœ๊ทธ ํ–‰์ด ๋‹ซํžˆ์ง€ ์•Š๋„๋ก ํ•˜๋Š” ๊ฒƒ์ด ํฌ๊ฒŒ ๊ฐœ์„ ๋  ๊ฒƒ์ด๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

ํ–‰์„ ๋‹ซ์œผ๋ ค๋ฉด ๋‹๋ณด๊ธฐ ๋ชจ์–‘์˜ ์•„์ด์ฝ˜ ๋ฒ„ํŠผ์„ ํด๋ฆญํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

๊ทธ ์ด์œ ๋Š” ํ–‰์—์„œ ์ผ๋ถ€ ๋‚ด์šฉ์„ ๋ณต์‚ฌํ•˜๋Š” ๊ฒƒ์ด ํŽธ๋ฆฌํ•œ ๊ฒฝ์šฐ๊ฐ€ ๋งŽ๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ๊ทธ๋ ‡๊ฒŒ ํ•˜๋ ค๋ฉด ๋ถ„๋ช…ํžˆ ํ…์ŠคํŠธ๋ฅผ ํด๋ฆญํ•˜์—ฌ ๊ฐ•์กฐ ํ‘œ์‹œํ•ด์•ผ ํ•˜์ง€๋งŒ ์ด๋Š” ๋ถˆํŽธํ•˜๊ฒŒ๋„ ํ–‰์„ ๋‹ซ์„ ๋ฟ์ž…๋‹ˆ๋‹ค.

ํฐ ๋…ธ๋ ฅ์„ ํ•ด์•ผ๋งŒ ํ…์ŠคํŠธ๋ฅผ ์„ ํƒํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ฒ˜์Œ์— ๊ฐ•์กฐ ํ‘œ์‹œํ•˜๊ณ  ํ–‰์ด ๋‹ซํž ๋•Œ๊นŒ์ง€ ๊ธฐ๋‹ค๋ ธ๋‹ค๊ฐ€ ๋‹๋ณด๊ธฐ๋กœ ๋‹ค์‹œ ์—ฝ๋‹ˆ๋‹ค.

๋‚˜๋Š” ๋ฐ˜์‘์— ๊ฒฝํ—˜์ด ์žˆ์ง€๋งŒ jquery๊ฐ€ ์•„๋‹ˆ๊ธฐ ๋•Œ๋ฌธ์— ์•„์ง ํ”„๋ก ํŠธ ์—”๋“œ์— ๋Œ€ํ•œ ์ฝ”๋“œ๋ฅผ ๋ณด์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค.

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

ํ–‰ ์ž์ฒด ๋Œ€์‹  ๋ฒ„ํŠผ์„ ์‚ฌ์šฉํ•˜๋„๋ก ํ† ๊ธ€์„ ๋ณ€๊ฒฝํ•˜๋Š” ๊ฒƒ์€ ๊ทธ๋ฆฌ ์–ด๋ ต์ง€ ์•Š์€ ๊ฒƒ์œผ๋กœ ๋‚˜ํƒ€๋‚ฌ์Šต๋‹ˆ๋‹ค.

์›๋ž˜์˜

$('.table-container tr').on('click', function () {
      $('#' + $(this).data('display')).toggle();
    });

์ƒˆ๋กœ์šด

$('.table-container tr button').on('click', function () {
      $('#' + $(this).data('display')).toggle();
    });

๋‹ค๋ฅธ ์‚ฌ๋žŒ๋“ค์ด ์ด๊ฒƒ์ด ํŒจํ‚ค์ง€ ๊ธฐ๋ณธ ๋™์ž‘์ด ๋  ๊ฐ€์น˜๊ฐ€ ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•œ๋‹ค๋ฉด ๋‚˜๋Š” PR์„ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋ชจ๋“  2 ๋Œ“๊ธ€

ํ–‰ ์ž์ฒด ๋Œ€์‹  ๋ฒ„ํŠผ์„ ์‚ฌ์šฉํ•˜๋„๋ก ํ† ๊ธ€์„ ๋ณ€๊ฒฝํ•˜๋Š” ๊ฒƒ์€ ๊ทธ๋ฆฌ ์–ด๋ ต์ง€ ์•Š์€ ๊ฒƒ์œผ๋กœ ๋‚˜ํƒ€๋‚ฌ์Šต๋‹ˆ๋‹ค.

์›๋ž˜์˜

$('.table-container tr').on('click', function () {
      $('#' + $(this).data('display')).toggle();
    });

์ƒˆ๋กœ์šด

$('.table-container tr button').on('click', function () {
      $('#' + $(this).data('display')).toggle();
    });

๋‹ค๋ฅธ ์‚ฌ๋žŒ๋“ค์ด ์ด๊ฒƒ์ด ํŒจํ‚ค์ง€ ๊ธฐ๋ณธ ๋™์ž‘์ด ๋  ๊ฐ€์น˜๊ฐ€ ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•œ๋‹ค๋ฉด ๋‚˜๋Š” PR์„ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์˜ค, ๋‚ด๊ฐ€ ์ด "์™„๋ฒฝํ•˜๊ฒŒ ์„ค๊ณ„๋œ" UX๋กœ ์ธํ•ด ์–ผ๋งˆ๋‚˜ ๊ณ ํ†ต๋ฐ›๋Š”์ง€ ๋งํ•  ์ˆ˜์กฐ์ฐจ ์—†์Šต๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰