์ž๋™ ํ•ด๊ฒฐ ๊ธฐ๋Šฅ์—์„œ ์„ ํƒ์ง€ ํŒ์—…์„ ํŽธ์ง‘ํ• ์ˆ˜ ์žˆ๋‚˜์š”? | Community
Skip to main content

์ž๋™ ํ•ด๊ฒฐ ๊ธฐ๋Šฅ์—์„œ ์„ ํƒ์ง€ ํŒ์—…์„ ํŽธ์ง‘ํ• ์ˆ˜ ์žˆ๋‚˜์š”?

  • December 3, 2024
  • 3 replies
  • 0 views

์ง€๊ธˆ ๊ต‰์žฅํžˆ ์ž์ฃผ ๋“ค์–ด์˜ค๋Š” ๋ฌธ์˜๋“ค ์ค‘, ์ ˆ์ฐจ๋‚˜ ์กฐ๊ฑด์ด ๋˜์ง€ ์•Š๋Š” ์ด์šฉ์ž์˜ ๋ฌธ์˜๊ฐ€ ์ž์ฃผ ์˜ค๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

๊ด€๋ จ ๋ ˆ์ด๋ธ”์ด๋‚˜, ํ‚ค์›Œ๋“œ ์ด๋Ÿฐ๊ฑด ๊ธˆ๋ฐฉ ์ถฉ์กฑ์ด๋˜์„œ ์ œ๊ฐ€ ์›ํ•˜๋Š” ๊ฐ€์ด๋“œ๋ฌธ์„œ๊ฐ€ ๋ณด์—ฌ์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๋‹ค๋งŒ, ํ•ด๋‹น ๋ฌธ์„œ๋Š” ๊ฐ€์ด๋“œ๋ผ์ธ์ด์ง€, ์ด๊ฑธ ๋ณด๊ณ  ๋ฌธ์˜๊ฐ€ ํ•ด๊ฒฐ ๋˜๋Š”๊ฑด ์•„๋‹ˆ๋ผ์„œ ์ž๋™ํ•ด๊ฒฐ ๋˜์—ˆ๋Š”์ง€ ๋‚˜์˜ค๋Š” ํŒ์—… ๋‚ด์šฉ์„ ๋ณ€๊ฒฝํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค. 

1 ๋ฒˆ ๊ณผ 2๋ฒˆ์ด ์‚ด์ง  ๊ฐ™์•„ ๋ณด์ผ์ˆ˜ ์žˆ์ง€๋งŒ, ์‹ค์ œ๋กœ ์ €๋Š” 

1๋ฒˆ = ์—ฌ์ „ํžˆ ๋„์›€์ด ํ•„์š”ํ•œ ๊ฑด 
2๋ฒˆ = ๋ฌธ์„œ ์ถ”์ฒœ์ด ์ž˜๋ชป๋˜์—ˆ์œผ๋ฉฐ, ์—ฌ์ „ํžˆ ๋„์›€์ด ํ•„์š”ํ•œ๊ฑด 
3๋ฒˆ = ๋ฌธ์„œ ์ถ”์ฒœ์ด ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ๋˜์—ˆ์œผ๋ฉฐ, ํ•ด๊ฒฐ ์™„๋ฃŒ

์ด๋ ‡๊ฒŒ ํŒ์—… ๋‚ด์šฉ ๋ฐ UI ๊ฐ€ ๋ณ€๊ฒฝ๋˜์—ˆ์œผ๋ฉด ํ•ฉ๋‹ˆ๋‹ค. 


1,2,3 ๋ฒ„ํŠผ์ด ๋‚˜๋ž€ํžˆ ์œ„์น˜ ํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์ด ์—†์„๊นŒ์š”?


 



 

3 replies

Jihoon11
  • December 4, 2024

์ด๋Ÿฐ ์‹์œผ๋กœ ๋ง์”€์ด์‹ ๊ฐ€์š”?

 

article.hbs์— ์•„๋ž˜ ์ฝ”๋“œ๋ฅผ ๋„ฃ์œผ๋ฉด ๋  ๊ฒƒ ๊ฐ™๋„ค์š”.

<script>
// ์ถ”์ฒœ, ๋น„์ถ”์ฒœ ๋ฒ„ํŠผ ์‹๋ณ„ ๋ฐ ํ…์ŠคํŠธ ๋ณ€๊ฒฝ
const upVoteButton = document.querySelector('.article-vote-up');
const downVoteButton = document.querySelector('.article-vote-down');

  upVoteButton.textContent = '์—ฌ์ „ํžˆ ๋„์›€์ด ํ•„์š”ํ•œ ๊ฑด'; // 1 ๋ฒ„ํŠผ ํ…์ŠคํŠธ
downVoteButton.textContent = '๋ฌธ์„œ ์ถ”์ฒœ์ด ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ๋˜์—ˆ์œผ๋ฉฐ, ํ•ด๊ฒฐ ์™„๋ฃŒ'; // 3 ๋ฒ„ํŠผ ํ…์ŠคํŠธ
  
// ์ƒˆ ๋ฒ„ํŠผ ๋งŒ๋“ค๊ธฐ
const newButton = document.createElement('button');
newButton.textContent = '๋ฌธ์„œ ์ถ”์ฒœ์ด ์ž˜๋ชป๋˜์—ˆ์œผ๋ฉฐ, ์—ฌ์ „ํžˆ ๋„์›€์ด ํ•„์š”ํ•œ๊ฑด '; // 2 ๋ฒ„ํŠผ ํ…์ŠคํŠธ
newButton.className = 'article-vote-new'; // ๋ฒ„ํŠผ ํด๋ž˜์Šค -> CSS์—์„œ ๋ณ„๋„ ์ •์˜ํ•˜์„ธ์š”.

// ์‚ฌ์ด์— ๋ผ์›Œ๋„ฃ๊ธฐ
if (upVoteButton && downVoteButton) {
  upVoteButton.parentNode.insertBefore(newButton, downVoteButton);
}
  </script>

 

 

 

 


  • Author
  • June 2, 2025

article_page.hbs ์—์„œ ์ถ”๊ฐ€ํ•˜๋ฉด ๋ ๊นŒ์š”?

์ž๋™ ํ•ด๊ฒฐ ๊ธฐ๋Šฅ์„ ํ™œ์„ฑํ™”๋ฅผ ํ•ด๋‘์–ด๋„, hbs ์–ด๋””์—์„œ๋„ ํ•ด๋‹น ๊ธฐ๋Šฅ ์†Œ์Šค์ฝ”๋“œ๊ฐ€ ํ™•์ธ๋˜์ง€ ์•Š์•„์„œ์š”. 


  • Author
  • June 2, 2025

๊ฐ ๊ฒŒ์‹œ๊ธ€ ํ•˜๋‹จ์— ์žˆ๋Š” ํˆฌํ‘œ ๋ฒ„ํŠผ์ด ์•„๋‹ˆ๋ผ, webํผ์œผ๋กœ ๋ฌธ์˜ ์ œ์ถœํ•˜๊ณ  ๋‚˜์„œ ๋ฐ”๋กœ ๋‚˜์˜ค๋Š” ์ž๋™ ๊ฒŒ์‹œ๊ธ€ ์ถ”์ฒœ ํŒ์—… ๊ด€๋ จํ•ด์„œ ๋ฌธ์˜๋“œ๋ ธ๋˜๊ฑฐ๋ผ ์ถ”๊ฐ€ ์งˆ๋ฌธ ์žˆ์Šต๋‹ˆ๋‹ค.

์  ๋ฐ์Šคํฌ ๊ธฐ์ˆ ์ง€์›์ธก์œผ๋กœ ๋ฌธ์˜ํ•˜๋ฉด ํ˜„์žฌ ์ž๋™ ๊ฒŒ์‹œ๊ธ€ ์ถ”์ฒœ ํŒ์—…์˜ ๋‚ด์šฉ์€ ๋ณ„๋„ ๋ณ€๊ฒฝ ๊ฐ€๋Šฅํ•œ ์ฝ”๋“œ๊ฐ€ ์—†๋‹ค๊ณ  ํ•˜๋„ค์š”.
์ž๋™ ๊ฒŒ์‹œ๊ธ€ ํŒ์—… ๋‚ด์šฉ์„ ๋ฐ”๊พธ๊ณ  ์‹ถ์€๋ฐ, ์–ด๋–ค ๋ฐฉ๋ฒ•์ด ์—†์„๊นŒ์š”?