[2주차] JavaScript

 

웹 개발 종합반 (왕초보)...

실제 진도는 이제 1주차지만, 필자는 열심히 들어서 2주차까지 다 땡겼다.

강의 하나 당 길이가 길어야 10분을 넘지 않는데, 하루 들을 수 있는 분량은 8개로 정해져있다?

이건 못참지.. ㅋㅋㅋㅋㅋㅋㅋ

 

어쨌든 총 2주차에 걸쳐 프론트엔드의 대략적인 내용을 살펴보았다.

클라이언트를 만드는 데 있어 자바랑 별 차이는 안나더라.

그럴 수 밖에..

백 엔드 서버를 어떤 언어로 구성하느냐에서 차이가 도드라지는 법이니까.

 

그래서 열심히 진도를 뺐다.

자바와 뭐가 다른지 너무 궁금해서 지루한 프론트 단은 슉. 슈슉. 슈슈슉. 씨.. 하면서 넘어가고 싶었다.

사실 왕초보와 비개발자들을 상대로 종합 코스는 다룰 수 있는 내용이 한정 되어있다.

주차로는 2주차, 영상 길이로는 2시간 정도를 할애해서 커리큘럼을 짰지만..

프론트 하나만으로도 그 내용이 너무나 방대하다.

 

필자는 HTML과 CSS는 손도 대고 싶지 않지만..

요즘 취업 시장은 React나 Vue, Angular 부터를 프론트엔드 개발자라고 한다니까?

본인이 백엔드에 치중되어 있더라도 과거에 프론트가 맡았던 스코프도

어느 정도는 다룰 줄 알아야 한다.

그만큼 프론트 개발자가 할 일이 무지막지하게 많아졌다는 뜻이겠지?

 

아니 근데 프론트에서 할 일이 많아지면, 서버는 더 많아지잖아?

생각할수록 킹받네.. ㅡㅡ

풀 스텍이 뉘 집 개 이름인줄 아쇼?

 

이번에도 서론이 지나치게 길었다.

뭐 어쩌겠는가?

필자는 논문을 쓰는게 아니라 포스팅을 하는건데..

 

---

1. JavaScript: 기본

비록 웹 개발 '종합반' 수업이라 할지라도..

이제 막 코딩을 시작한 뉴비들에게는 프론트 / 서버 모두 깊게 들어가기가 어렵다.

서버는 뭐.. 말 할 것도 없고..

프론트 역시 만만하게 볼 영역이 아니다.

HTML과 CSS는 어느 정도까지는 커버가 가능하다손 쳐도..

필자도 솔직히 리엑트나 뷰는 건드릴 엄두도 나지 않는다.

 

그렇기 때문에!

우리가 건드려 볼 만한 부분은 JavaScript 밖에 없다.

JS는 그럼 만만함?

뎃츠 노노

언어 하나 더 배우는 거나 마찬가지인데..

우리는 필요한 JS문법만 쏙! 쏙! 가져다가 쓸 것이다.

그리고 그것들을 라이브러리처럼 모아놓은 기법이 바로 jQuey이다.

 

어렵지 않다.

알아두면 매우매우 유용하다.

이번 시간에는 예제 몇 개를 같이 살펴보면서 jQuery를 손에 익히도록 하자.

머리로 익히는 게 아니라, 손에 익히자고 했다.

코딩은 손으로 먼저 기억하고 넘어가는 거읾..

 

1-1) 예제 01

 

 

예제 자체는 별 거 없지?

Question-Box에 특정한 값을 입력하면 그대로 alert()로 출력해줄 것이고

아무런 값도 입력하지 않았다면 "값을 입력해라, 아쎄이!" 라는 문구가 뜰 것이다.

소스코드를 살펴보도록 하자.

 

<div class="question-box">
    <h2>1. 빈칸 체크 함수 만들기</h2>
    <h5>1-1. 버튼을 눌렀을 때 입력한 글자로 얼럿 띄우기</h5>
    <h5>[완성본]1-2. 버튼을 눌렀을 때 칸에 아무것도 없으면 "입력하세요!" 얼럿 띄우기</h5>
    <input id="input-q1" type="text" /> <button onclick="q1()">클릭</button>
</div>

 

Division 태그로 묶은 부분은 다른 거 볼 거 없다.

class의 이름이 "qustion-box"인 것과..

input 태그의 Id 값이 "input-q1"인 것

이 둘을 염두해두고 다음 소스코드로 넘어가도록 하자.

 

<script>
        function q1() {
            // 1. input-q1의 입력값을 가져온다. $('# .... ').val() 이렇게!
            // 2. 만약 입력값이 빈칸이면 if(입력값=='')
            // 3. alert('입력하세요!') 띄우기
            // 4. alert(입력값) 띄우기

            let q1_val = $('#input-q1').val();

            if(q1_val == ''){
                alert('값을 입력해라, 아쎄이!')
            }else{
                alert(q1_val);
            }
        }
        
        (생략...)
        
</script>

사실상 요 놈이 사천왕 중 본체이다.

<script></script> 태그 안에서 해당 기능을 수행하기 위한 모든 연산이 이루어지는 것이다.

주석처리 한 부분을 유의깊게 살펴보길 바란다.

그 흐름에 따라 코드를 작성한 것이니 말이다.

 

참고로 JS에서 변수를 선언할 때는 자바보다 제약이 덜 한 편이다.

그냥 let으로 퉁치면 된다.

임의로 명명한 q1_val 변수에 특정 값을 대입해주고 있다.

 

그 특정 값이 바로 jQuery로 선언한 부분이다.

형식을 잘 기억해두길 바란다.

$('#...').val()

이것이 더도 말고, 덜도 말고 딱 스탠다드다.

input-q1의 값 (val)을 q1_val 변수에 저장해주겠다는 것이다.

기본 구조는 자바와 크게 다를 거 없다.

 

그리고 만약 q1_val가 tab과 같다면?

동작 그만..

 

null이 아니라 비어있는 홑따음표로 감싼 tab이다.

클라이언트 화면에서는 사용자가 아무 것도 입력하지 않는 셈이 되지만..

사실은 공백을 입력한 것이다.

 

null로 처리하면 아무런 값도 뜨지 않을테니 주의 바란다.

필자도 처음에는 그 차이를 몰라서 한참이나 고민했다.

 

다시.. q1_val가 tab과 같다면?

alert 함수를 써서 사용자에게 아무 것도 입력하지 않았음을 알려준다.

 

만약 q1_val이 뭐시기랑 같다면?

마찬가지로 alert 함수를 써서 그 머시기를 화면 상에 출력하란 뜻이다.

 

하나씩 뜯어보니까 별로 어렵지 않지?

필자만 그렇게 느끼는거야?

 

1-2) 예제 02

 

 

이번에는 이런 화면을 만들어 볼 것이다.

아니 이미 만들었다. 숙제로..

HTML과 CSS는 차치하고, jQuery만 살펴보도록 하자.

 

필자가 빨간 펜으로 표시해놓은 부분이 보이는가?

현재 온도랍시고 둥둥 띄워져있는 곳 말이다.

참고로 저 온도는 100% 데이터에 기반한 실제 존재하는 값이다.

필자가 서식하고 있는 마계인천의 현재 온도를 리얼타임으로 받아온 값이라는 거다.

 

믿기지 않으면 소스코드를 뜯어보도록 하자.

 

<div class="myTitle">
    <h1>이브 (E.V.E) 팬명록</h1>
    <p>현재 온도: <span id="temp">00℃</span></p>
</div>

 

우선은 필자가 원하는 위치에 저 온도라는 놈을 노출시키기 위해 <p> 태그와 <span> 태그로 감싸줬다.

그리고 span 태그의 id 값은 "temp"라고 지정해줬다.

 

<script>
    $(document).ready(function () {
        $.ajax({
            type: "GET",
            url: "http://spartacodingclub.shop/sparta_api/weather/incheon",
            data: {},
            success: function (response) {
                $('#temp').text(response['temp']);
            }
        })
    });
</script>

 

마계인천의 현재 온도를 받아오기 위해 필요한 <script></script> 태그이다.

$(document).ready(function(){...} 는 우선 차치하자.

페이지를 로딩하기 위한 함수인데 아직 거기까지 갈 단계는 아니다.

 

그 밑에 $.ajax({}); 라는 녀석에 주목해라.

AJAX라는 jQuery의 핵심 문법이다.

저것이 무엇에 쓰는 물건인고?

그냥 API 서버에서 통신을 날려주면.. 그것을 읽어오는 중이라고 이해해라.

실제로 ajax는 그러한 용도로 쓰는 것이다.

 

고 다음은

값이 성공적으로 넘어왔다면 응답 함수를 실행하겠다는 뜻이다.

요청, 응답, 요청, 응답, 요청, 응답..

그것이 API 간에 이루어지는 통신 규약이다.

 

어떠한 방식으로 응답하겠다?

날씨 API에서 temp 값을 jQuery 형식으로 받아와서 응답하겠다..

 

필자가 소개한 것에서 크게 벗어나지 않는다.

조금만 공부해놓으면 아주 유용하게 쓸 수 있다.

근본없이 자바의 EL을 배껴와서 그렇지.. ㅡㅡ

 

---

 

이번 주차는 이 정도에서 마무리 짓도록 하자.

별도의 코드리뷰는 올리지 않을 것이다.

왜냐면 아직 서버 쪽으로 넘어가지 않았으니까.. ㅡㅡ

 

다음 주차, 그러니까 3주차에 해당하는 내용부터는 본격적으로 백엔드를 다뤄볼 것이다.

참고로 필자가 서버단이랑 백엔드를 구분하지 않고 써왔는데..

그냥 둘이 같은 말이다.

이 정도는 따지지 말고 그런게 있구나 하고 찰떡같이 알아들어라.

 

아! 참고로 백엔드 서버 구현은 필자가 좋아하는 Java..!

로 구현하지 않을 것이다.

나라에서 공짜로 듣게 해주는 강의인만큼 그 내용을 따라갈 수밖에 없다.

바로 요즘 제일루다가 핫한 Python 언어를 다뤄볼 것이다.

 

그럼 빠잉~!