[HTML/CSS/JS] $(document).ready ์‚ฌ์šฉ

$(document).ready ์‚ฌ์šฉ

์ œ์ด์ฟผ๋ฆฌ์—์„œ $(document).ready์„ ์‚ฌ์šฉํ•ด์„œ ๋กœ๊ทธ์ธ ์š”์ฒญ ์•Œ๋žŒ์„ ๋งŒ๋“ค์–ด๋ณด์ž.

๋กœ๊ทธ์ธ ํŽ˜์ด์ง€

๋กœ๊ทธ์ธ์ด ์•ˆ ๋œ ํด๋ผ์ด์–ธํŠธ๊ฐ€ ๋กœ๊ทธ์ธ์ด ํ•„์š”ํ•œ ํŽ˜์ด์ง€์— ๋“ค์–ด๊ฐ€๋ ค๊ณ  ํ•˜๋ฉด ์–ด๋–ป๊ฒŒ ํ•ด์•ผํ• ๊นŒ?
์„œ๋ฒ„ ์ž…์žฅ์—์„œ๋Š” ์ž๋™์œผ๋กœ ๋กœ๊ทธ์ธ์„ ํ•  ์ˆ˜ ์žˆ๋Š” ํŽ˜์ด์ง€๋กœ ์ด๋™์‹œ์ผœ์ค˜์„œ ํด๋ผ์ด์–ธํŠธ์—๊ฒŒ ๋กœ๊ทธ์ธ์„ ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋„์™€์ค˜์•ผํ•œ๋‹ค.
๊ทธ๋Ÿฐ๋ฐ ํด๋ผ์ด์–ธํŠธ์—๊ฒŒ ์•„๋ฌด๋Ÿฐ ๋ฉ”์„ธ์ง€ ์—†์ด ๋ฐ”๋กœ ๋กœ๊ทธ์ธ ํŽ˜์ด์ง€๋กœ ์ด๋™ํ•˜๋ฉด, ํด๋ผ์ด์–ธํŠธ ์ž…์žฅ์—์„  ์˜ค๋ฅ˜๋กœ ์ธ์‹ํ•  ์ˆ˜๋„ ์žˆ๊ณ  ์›ํ•˜๋Š” ํŽ˜์ด์ง€๊ฐ€ ๋กœ๊ทธ์ธ์„ ์š”๊ตฌํ•˜๋Š” ํŽ˜์ด์ง€์ธ๊ฑด์ง€ ์•Œ ์ˆ˜ ์—†๋‹ค.
๊ทธ๋Ÿฌ๋ฏ€๋กœ ๋กœ๊ทธ์ธ์ด ํ•„์š”ํ•˜๋‹ค๋Š” alert๋ฅผ ์ด์šฉํ•ด ํด๋ผ์ด์–ธํŠธ๊ฐ€ ์ด๋ฅผ ์ดํ•ดํ•˜๊ณ  ๋กœ๊ทธ์ธ ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋„์™€์ฃผ์ž.

$(document).ready

๋กœ๊ทธ์ธ์ด ํ•„์š”ํ•œ ํŽ˜์ด์ง€๋กœ ์ด๋™ํ•˜์ž๋งˆ์ž ๋ฐ”๋กœ alert๊ฐ€ ๋‚˜ํƒ€๋‚˜๊ฒŒ ํ•˜๋ ค๋ฉด ์–ด๋–ป๊ฒŒ ํ•ด์•ผํ• ๊นŒ?
์ œ์ด์ฟผ๋ฆฌ์—์„  ์ด๋ฅผ $(document).ready๋ฅผ ์ œ๊ณตํ•ด ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ค€๋‹ค.

   $(document).ready("๊ตฌํ˜„ํ•˜๊ณ ์ž ํ•˜๋Š” ํ•จ์ˆ˜");

$(document).ready์— ํŒŒ๋ผ๋ฏธํ„ฐ๋กœ ๋“ค์–ด๊ฐ„ ํ•จ์ˆ˜๋Š” ํด๋ผ์ด์–ธํŠธ๊ฐ€ ํ•ด๋‹น ํŽ˜์ด์ง€๋กœ ์ด๋™ ํ–ˆ์„ ๋•Œ ๋ฐ”๋กœ ์‹คํ–‰๋œ๋‹ค.
์ด๋ฅผ ์ด์šฉํ•ด์„œ ๊ตฌํ˜„ํ•ด๋ณด์ž.

์Šคํ”„๋ง ๋ถ€ํŠธ ์ปจํŠธ๋กค๋Ÿฌ

    @GetMapping("loginForm/{first}")
    public String loginForm(Model model, @PathVariable int first)
    {
        boolean chk;
        if(first==0){
            chk =false;
        }
        else chk = true;
        model.addAttribute("chk",chk);
        return "user/loginForm";
    }

์Šคํ”„๋ง ๋ถ€ํŠธ ์ปจํŠธ๋กค๋Ÿฌ์—์„œ ๋กœ๊ทธ์ธ ํŽ˜์ด์ง€๋ฅผ get ์š”์ฒญ์„ ํ–ˆ์„ ๋•Œ, ํ•ด๋‹น ํ•˜๋Š” ํŽ˜์ด์ง€๋ฅผ return ํ•˜๊ฒŒ ํ•ด์ฃผ์—ˆ๋‹ค.
์—ฌ๊ธฐ์„œ uri์˜ first๋Š” ํด๋ผ์ด์–ธํŠธ๊ฐ€ ์ง์ ‘ ๋กœ๊ทธ์ธ ํŽ˜์ด์ง€๋กœ ์ ‘์†ํ–ˆ์„ ๋•Œ์™€, ์Šคํ”„๋ง ๋ถ€ํŠธ๊ฐ€ ๋กœ๊ทธ์ธ ํŽ˜์ด์ง€๋กœ ์ž๋™์œผ๋กœ ์—ฐ๊ฒฐํ•ด ์คฌ์„ ๋•Œ์˜ ์ƒํƒœ๋ฅผ ๊ตฌ๋ณ„ํ•˜๋Š” ๋ณ€์ˆ˜๋กœ ์‚ฌ์šฉํ–ˆ๋‹ค.

mustache + jquery


  <script>
     $(document).ready(function(){
          alert("๋กœ๊ทธ์ธ์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.");
      });
  </script>
  

ํ”„๋ก ํŠธ๋Š” mustache๋ฅผ ์ด์šฉํ•ด ๊ตฌํ˜„ํ–ˆ๊ณ , jquery์— ๊ด€๋ จ๋œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ importํ•˜์—ฌ ์‚ฌ์šฉํ•˜์˜€๋‹ค.
์•ž์„œ ๋‚˜์™”๋˜ ์ปจํŠธ๋กค๋Ÿฌ์„œ์—์„œ chk๋ผ๋Š” ๋ณ€์ˆ˜๋ฅผ false๋กœ ์ฃผ๋ฉด ๋กœ๊ทธ์ธ alert๊ฐ€ ๋‚˜์˜ค๊ฒŒ ๊ตฌํ˜„ํ•˜์˜€๋‹ค.
chk==true๋ผ๋ฉด, ํด๋ผ์ด์–ธํŠธ๊ฐ€ ํ•ด๋‹น ํŽ˜์ด์ง€์— ์ ‘์†ํ–ˆ์„ ๋•Œ $(document).ready์— ์˜ํ•ด function(){alert("๋กœ๊ทธ์ธ์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.");} ํ•จ์ˆ˜๊ฐ€ ์ž๋™์œผ๋กœ ์‹คํ–‰๋œ๋‹ค.

ํ™•์ธ

1

๋กœ๊ทธ์ธ์ด ํ•„์š”ํ•œ ํŽ˜์ด์ง€๋ฅผ ์ ‘์†ํ•˜๋ฉด ๋ฐ”๋กœ ๋กœ๊ทธ์ธ ์š”์ฒญ alert๋ฅผ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.