221202 TIL - 보충 강의

원장님과 함께하는 보충강의

 

 

배열(array)

배열  ☞ let arr = [];

배열 = 객체, 인덱스가 자동으로 부여된 객체라고 볼 수 있다.

배열에는 '.'과 '[]'를 이용해 접근, 제어를 할 수 있다. 제어에는 []를 쓴다.

 

객체에는 속성과 메서드가 항상 존재한다!

메소드와 함수는 비교가 되어야 함.

메서드 : 호출의 주체가 명확함. ex) people.test() 

함수 : 호출의 주체가 없다. ex) test()

 

배열에는 length라는 속성이 있다.

length라는 속성은 배열의 최대 인덱스 +1을 의미할 뿐이다.

 

Queue (큐) : FIFO (First In, First Out)

Stack (스택) : LIFO (Last In, First Out)

 

스택에는 값을 추가하는 push와 삭제하는 pop이 있다.

pop은 제일 나중에 들어온 값을 뺀다 = 스택

큐에도 같은 개념인 shift, unshift가 있다.

shift : 맨 앞에 있는 요소가 빠지고 나머지 인덱스가 하나씩 앞으로 당겨짐

unshift : 배열의 맨 앞에 들어오고 앞으로 밀려온 인덱스를 뒤로 밀어줌

push, pop과 개념은 같지만 shift, unshift는 전체를 건드리기 때문에 비효율적이라 우리는 push, pop을 잘 사용할 것!

 

배열은 반복문에 최적화되어있다! 왜냐? 유일하게 가진 속성 length가 있기 때문!

 

일반적인 for문

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

for(let i = 0; i < arr.length; i++) {
    if(arr[i] % 2 === 0) {
        console.log(arr[i]);
    }
}

for ~ in : index가 나옴

for (key in arr) {
    console.log(arr[key]); // []로 값을 빼옴
}

for ~ of : 배열의 값 자체가 나옴 -> value

for (value of arr) {    
    console.log(value);
}

배열에선 for ~ of 쓰는 게 훨씬 유용하다.

 

example)

// li태그를 3개 만들어서 ul 태그 밑으로 넣어주기!

// 1. li태그를 3개 만들기
// 1-1. li태그에 이름을 넣어요
// 2. li태그를 ul 태그에 넣어요


// 1. li태그를 3개 만들기
let liTag1 = document.createElement('li');
liTag1.textContent = '귤';
document.querySelector('ul').appendChild(liTag1);

let liTag2 = document.createElement('li');
liTag2.textContent = '바나나';
document.querySelector('ul').appendChild(liTag2);

let liTag3 = document.createElement('li');
liTag3.textContent = '딸기';
document.querySelector('ul').appendChild(liTag3);

// 위에 코드를 for문으로 활용
let fruits = ["귤", "바나나", "딸기", "키위", "수박"];

let liTag; // undefined

// for of를 써서 value에 직접 접근
for(f of fruits) {
    liTag = document.createElement('li'); // li 생성
    liTag.textContent = f; // li태그에 텍스트 생성
    document.querySelector('ul').appendChild(liTag); // ul태그에 붙임

}

for (let i = 0; i < fruits.length; i++) {
    liTag = document.createElement("li");
    liTag.textContent = fruits[i];
    document.querySelector('ul').append(liTag);
}

 

함수 만드는 방식 2가지

// 1. 
function testFunc () {

}
// 2.
let testFunc2 = function () { // 변수에 바로 할당하기 때문에 1번보다 명시적.

}

함수를 만들고 있는 것

let testFunc = function (a, b) {
     console.log(a + b);
}
testFunc(1, 2);

 

 

 

오늘부터 기초 보충 강의가 시작됐다.
기초가 너무 부족한 상태에서 어려운 프로젝트를 겪고 프로젝트 끝나고 나니 심화 강의를 들어야 했고
곧 있으면 주특기까지 시작되는데 지금 내 상황에서 이 모든 걸 받아내려니 너무너무 버겁고 힘들었었다..
기초 공부를 계속 하기는 했었지만 완벽하게 이해한 부분이 없었고 공부를 어떻게 해야 하나 방향성도 못 잡아서
마음이 많이 불안했었는데 이런 강의 시간을 만들어 주셔서 원장님께 너무너무 감사하다..
이렇게 이해가 쏙쏙 되는 강의를 해주셔서 코딩에 대한 죽어가는 흥미도 다시 살아나고 
이제 뭔가 제대로 하는 거 같다는 느낌을 받았다.

하지만 내 수준보다는 높은 사람들이 꽤 있어서 강의를 따라가는 데 있어서 조금은 버거웠던 건 사실이다..😢

그래도 직접 코드 치는 시간과 과제가 있어서  혼자 공부할 때보다는 실력이 많이 늘 거 같다!

미래의 나는 어떤 모습일지 , 지금 이 시간이 나의 성장에 있어서 얼마나 큰 밑거름이 될지 설레기도 한다.