p-lani 님의 블로그

어제 하지 못했던 JQuery 부분부터 시작해야겠다.

• JQuery란?
  자바 스크립트를 더욱 쉽게 사용하기 위해 만들어진 것으로, 보조 프로그램이 아닌
  미리 작성된 Javascript 코드 패키지 라고 할 수 있다.
  길고 복잡하게 쓸 수 밖에 없었던 코드들도 Jquery를 통해 줄여서 쓰는게 가능하다는것 !

이를테면

document.getElementById('hello').innerHTML = '안녕';

이런 코드를 Jquery를 이용하면

$('#hello').html('안녕');

이렇게 간단하게 쓸 수 있다.

사용법 또한 간단한데, 헤드 사이에

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

를 넣어주면 바로 사용 준비가 완료된다.

<script>
    function checkResult() {
            let people = [
                { 'name': '서영', 'height': 165 },
                { 'name': '현아', 'height': 170 },
                { 'name': '영환', 'height': 175 },
                { 'name': '서연', 'height': 162 },
                { 'name': '지용', 'height': 190 },
                { 'name': '예지', 'height': 168 }
            ]
    

        $('#q2').empty();

        people.forEach(a => {
            let name = a['name'];
            let height = a['height'];
            let temp_html = `<p>${name}의 키는 ${height}cm 입니다.</p>`;
            $('#q2').append(temp_html);
        });
    }
</script>

오늘 학습하면서 만든 코드이다.

하나씩 살펴보면, 위쪽 let people은 그냥 리스트 지정하는 구문이고

아래$('#q2').empty();  부분이 jquery가 사용된 부분으로, 

id 가 q2 로 지정해놓은 대상을 empty 처리해달라는 구문이다.

people의 요소를 하나씩 배열해라

temp_html 은,   people 안에있는 name 과 height 를 각각 넣어서 문장으로  이뤄진다. (`` 사용)

(let name height 지정 없이 바로 ${a['name']} 로 작성해도 동일하게 작동하지만, 써먹기 좋지 않을거란 예감이 든다)

마지막으로 q2에  해당 내용을 추가하는 구문으로 마무리된다. 

간단히 정리하면,
 

q2 부분을 empty 해버리고  temp_html 내용을 추가한다 라고 보면 된다.

결과는

이름과 나이가 적혀있던 q2에 해당하는 부분이

checkresult 트리거가 적용되면

이전 내용은 empty 처리가 되고

키와 나이 temp_html의 내용이 추가되는것을 확인 할 수 있다.  

TIL을 정리하면서 보니

복잡한거 같으면서도 간단한듯 하고... 계속 하다보면 익숙해질 것 같은 느낌은 든다.

꼭,

강의 영상을 보면서...  '복잡하다.. 어떻게..?  어....?'  라고 생각 될 때 쯤

강사님이 어김없이

' 복잡하게 생각 안하셔도 돼요. 지금 전부 이해하고 암기할 필요 없어요' 

라는 말을 귀신같이 하시는데,  정말 괜찮을걸까 하다가도

 TIL 에 학습내용을 정리하는것 만으로

'이해한걸까?' 라고 의심되던 부분이 

'어느정도 이해가 되었다' 로 바뀌게 된다.

(의심).empty

(의심).append(안심)  라고 할 수 있겠다 !!

학습 목표
- Javascript의 사용 방식에 대해 이해하고, 문법에 익숙해진다.
- JQuery를 활용하여 HTML을 조작할 수 있다.

오늘의 목표는 익숙해지기

시작은 저번에 배운것을 복습하는 것 부터

주요 복습 내용은

• Bootstrap 활용
• Google-font 활용
• <style> 에서 본문내용의 위치와 크기, 모양을 조정

복습 강의를 바탕으로 만든 스크립트

복잡하고 길어 보이지만, bootstrap 에서 코드 뭉치를 복붙 하는것이 90% 이고 

나머지는 원하는 내용으로 수정하면 된다. 

중요한 것은 내가 원하는 것을 bootstrap 에서 찾아 오는것과

어느 부분에 붙여 넣어야 하는지만 잘 기억하면 된다.

다음 내용으로 Javascript 에 대해

• 프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어이다.

라고 소개가 되어있는데,

이전에 7일차에 미리 배웠던 Javascript 톺아보기 와 거의 동일한 설명이었다.

당장은 html과 css로 만들어 놓은 내용에 '작동, 움직임' 을 더해주는 언어 라고 이해를 하면 될 듯 하다.

가장 처음 배운 것은 펑션과 콘솔

<script>

   function hey() { console.log('안녕하세요') }

</script>

그리고 웹 페이지에는 이러한 script 구문이 연산되는 console 부분이 존재하고

이 부분은 개발자가 확인하기 위해 있다는것을 알았다.

다음으로

let a = 2
let b = 3

console.log(a+b) // 5

let c = '대한'
let d = '민국'

console.log(c+d) // 대한민국

변수의 선언과 console.log 로 확인하는 내용이다. 기본적인 사칙연산과 문자열 더하기 또한 가능

let a_list = []  // 리스트를 선언. 변수 이름은 역시 아무렇게나 가능!

// 또는,

let a = ['사과','수박','딸기','감'] // 로 선언 가능

console.log(a[1]) // 수박
console.log(a[0]) // 사과

//리스트 길이 구하기
console.log(a.length) //4

리스트는 순서를 갖는다는게 중요하다 !  (0 부터 시작)

• 딕셔너리: 키(Key)-밸류(Value) 값의 묶음

let a_dict = {}  // 딕셔너리 선언. 변수 이름은 역시 아무렇게나 가능!

// 또는,

let a = {'name':'영수','age':27} // 로 선언 가능

console.log(a)
console.log(a['name']) // 영수
console.log(a_dict['age']) // 27

활용 부분은 내용이 약간 복잡해 보이기 때문에 다음 시간에 학습 하도록 해야겠다 !

복습 부분에서 시간을 너무 쓰기도 했고 ,

오늘 사전캠프 면담도 진행하느라 시간이 부족했다.