jQuery + Javascript(풀이)

 

해답 영상 확인하고 1차 멘붕..

 

난 왜 이렇게 쉽게 코딩할 수 없는거지에 2차 멘붕..

 

하지만 굴하지 않지..

 

코딩 입문기는 계속된다!!

 

---

 

1_실습)

        function q1() {          
            let answer1 = $('#input-q1').val();
            {
                if (answer1 == '') {
                    alert('입력하세요!')
                } else {
                    alert($('#input-q1').val())
                }
            }

 

1_풀이)

        function q1() {
            let txt = $('#input-q1').val();
            if (txt == '') {
                alert('입력하세요!')
            } else {
                alert(txt)
            }

 

허허허허허허허허허허허허허허허!!! (실성)

 

이렇게 봐도 저렇게 봐도 참으로 복잡하게 생긴 내 코드..

 

물론 코딩에 정답은 없고, 얼마나 효율적이고 실용적으로 짜는가인데..

 

나는 갈 길이 멀었다..

 

[변수 지정 했으면 제발 활용 좀 하자..]

 

---

 

2_실습)

        function q2() {
            let answer2 = $('#input-q2').val();
            {
                if (answer2.includes('@')) {
                    alert(answer2.split('@')[1])
                } else {
                    alert('이메일이 아닙니다')
                }
            }

 

2_풀이)

        function q2() {
            let txt = $('#input-q2').val();

            if (txt.includes('@')) {
                let domain = txt.split('@')[1].split('.')[0]
                alert(domain)
            } else {
                alert('이메일이 아닙니다.')
            }

 

분명.. 테스트까지 확인하고 이렇게 봐도 저렇게 봐도 같은 조건이 활성화가 되었는데

 

왜 이렇게까지 이질적으로 느껴지고 같은 값인데도 내껀 볼품 없어 보이는걸까.. (시무룩)

 

많이 짜보고 이게 좀 더 괜찮겠다 하는 방향을 제시하는 그날까지..

(그만큼 연습량이 많이 필요하단건데.. 하기도 전에 겁먹을지도..?)

 

+ 글 쓰다가 발견한 사실..

실습 코드는 100% 조건을 따라가지 못했다는 사실.. (두둥)

 

조건에는 도메인만 표기할 수 있도록 해야하는데

 

.split 를 빼먹었네.. ㅠㅠ

 

---

3_풀이)

        function q3() {
            let txt = $('#input-q3').val();
            let temp_html = `<li>${txt}</li>`

            $('#names-q3').append(temp_html)
            
// 1. input-q3 값을 가져온다. let txt = ... q1, q2에서 했던 걸 참고!
// 2. 가져온 값을 이용해 names-q3에 붙일 태그를 만든다. (let temp_html = `<li>${txt}</li>`) 요렇게!
// 3. 만들어둔 temp_html을 names-q3에 붙인다.(jQuery의 $('...').append(temp_html)을 이용하면 굿!)

 

못 풀었던 문제를 선생님과 함께 따라해봤는데..

 

머리론 이해해도 따라가질 못하는 내 논리가 너무 분하다.. (쾅쾅)

 

분명 '아아~ 이렇게 하면 되겠지?' 하면서도

 

몇타만 쳐도 뇌정지 왔다..

 

let temp_html 이거.. 좀 더 이해할 수 있도록 복습 별표..

 

---

4_풀이)

        function q3_remove() {
            $('#names-q3').empty();
            
// 1. names-q3의 내부 태그를 모두 비운다.(jQuery의 $('....').empty()를 이용하면 굿!)

클립보드 기록을 지우는 개념인 것 같은데

 

.empty 싸그리 지워버리는 기능.. 메모...

 

---

 

계속 쫒고 있지만 놓치 않게만.. 내가 따라갈 수 있기를..!!

 

마저 잡고 있는 옷자락만큼은 절때 놓치지 말자!!!