삐뚤빼뚤 프론트 개발

Array(5) : 함수로 빈배열 생성

위코드를 치면 length가 5인 빈 배열이 생성됨. 아무런 값도 없고, 5개가 들어갈 수 있는 공간이 생김. 없는값 = undefined

array.map 함수 : array에 있는 모든 요소에 대해서 각각 함수를 수행해서 새로운 함수를 반환함

• for문 : 정확하게 몇번 반복문을 돌아야 될지 알때
• while문 :  정확하게 몇번을 반복문을 돌아야하는지 모를때, 혹은 기준값이 계속 바뀔때
• slice :  배열을 자르는 메서드 예) 배열.slice(몇번째자리부터, 몇번째자리전까지)

getElementByClassName('클래스명')[인덱스]; //해당 클래스를 가진 요소가 여러개일수있으니까!

• for문에 비동기함수가 들어가는건 피해야함. 클로저 문제가 생김
• js로 css 조작 예) 대상.style.border = '1px solid red' ; 대상.style.borderRadius = '50px' //대시로붙은 속성은 카멜로표현
• 함수를 만들때 달라지는 부분은 매개변수로, 고정된 부분은 함수로 만들기
• html 요소에 js로 css 클래스를 붙이는 법 : 요소.className = "kgh" //js에서 class는 중요한 단어이기에, html의 클래스는 className로 부여함
• querySelectAll -> 여러 태그 동시 선택
• querySelector(.'클래스명') 으로 해당 요소를 찾을 수 있음
• NaN : 숫자가 아님. 숫자가 아닌 하나의 값
• document.body.clientHeight , document.body.clientWidth: 윈도우의 타이틀, 툴바, 스크롤바를 제외한 브라우저 윈도으의 내부 공간 넓이와 높이

• js로 html 만드는 법

  • const  폼 = document.createElement('form');
    document.body.append(폼) //Html에 위에서 만든 valHtml을 붙이는 구문
    폼.append(입력창)
    폼.append(버튼)
    
    폼.addEventㅣistener['submit', function(이벤트){
    이벤트.preventDefault(); //기본동작을 못하게함
    }]

• 배열과 관련한 함수

  • push: 마지막에 추가
    pop: 마지막것 뽑기
    unshift: 처음에 추가
    shift: 처음것 뽑기
    // pop, shift, splice로 뽑은것들은 기존 배열에서 사라진다.

• 배열을 문자열로 한방에 합치는 메서드 : join

  • var 배열 = [2,4,6,7]
    숫자배열.join(''); // -> "2467"
    
    문자.split(구분자) ->  배열로 바뀜
    배열.join(구분자) -> 문자로 바뀜

• 배열.indexOf(값) : 값의 위치를 알 수 있음. 없으면 -1을 반환
•  i++ , ++i 는 다름. i +=1 을 쓰는게 좋음
• 배열 안에 넣을 수 있는 것들
  •  var 배열 = [[],()<-객체,  function(){} <-함수, null, undefined]
• target 메서드 : 만약 click 이벤트에  .target을 붙이면 클릭한 요소의 정보를 가져옴
  • e.target <- 클릭된 애
  • e.target.parentNode <- 클릭된 애 부모 태그
  • e.target.parentNode.parentNode <- 클릭된 애 부모의 부모
  • e.target.children <- 자식
• input의 값 : .value
• 태그 안 글자 : .textContent

1. console.dir(document) 로 document를 객체 형식으로 볼 수 있음. Dom 객체(Document Object Model)

2. DOM : html과 js의 통역사 역할

3. js로 HTML 태그 만들기

var 바디 = document.body;
var 단어 = document.createElement('div'); //createElement 이 함수가 HTML태그를 만들어줌
단어.textContent = '넣을 글자'; //이 구문으로는 브라우저에 등록만 하고 화면에 표시되는 것은 아님
document.body.append(단어); //바디 안에 단어 추가. 표시됨

var 버튼 = document.createElement('button');
버튼.textContent = '입력';
document.body.append(결과창);

버튼.addEventListener('click', function(){
 //이거시 콜백함수
 if(단어.textContent[단어.textContent.length] - 1 === 입력창.value[0]) {
 결과창.textContent = '딩동댕';
 단어.textContent = 입력창.value;
 } else {
	결과창.textContent = '땡!'	
 }
})
//인풋 박스에 저절로 커서가 찍히게 하려면 입력창.focus(); 구문 사용

1. 평범한 문자열에 .을 붙이면 그 문자열은 객체(문자객체)가 된다.

2. 객체.속셩명, 객체['속성명']

    둘 다 속성(프로퍼티)에 접근 가능. 차이점은 대괄호 안에는 변수를 쓸 수 있지만 점 뒤에는 안됨.

 ex) var 값 = '이름'
     객체.값 -> 안됨
     객체[값]-> 됨

3. 원래 있는 속성 지우고 싶을땐 null 대입(undefined 는 안됨)

4. 배열 같은 객체 만들기

var 배열같은 객체 = {
	0: '코끼리',
    1: '고양이',
    2: '강아지',
    length: 3
    }

이렇게 만든 객체에 접근하면 자칫 배열처럼 보이지만, 배열은 아님

5. Array.isArray(변수명) : 변수가 배열인지 아닌지 True / False로 판단해줌.

6. 브러우저 제공 객체 중 첫글자가 대문자로 시작하는 애들은 '생성자' , 첫글자가 소문자로 시작하는 애들은 window.document 입

7. Math.random()은 엄밀하게는 랜덤이 아니다.

//1부터 9까지 나오게 하려면 구구단 이용
Math.floor(Math.random()*9) + 1
Math.ceil(Math.random()*9)

8. Window 객체

• 브라우저 전체를 담당하는 객체(Object)
• window['document'] : document객체(페이지(탭))는 window 객체 안에 들어 있음
• window는 생략가능, 메서드만 써도 실행됨.
  • window.alert('hi') 와  alert('hi') 는 같음
• 윈도는 모든 것에서 접근 가능한 객체임(전역 객체)
• 전역 변수는 전역 객체의 속성이 된다.

  • var a = 'b';
    window.a; //'b'

9. 전역 변수와 함수 안의 변수가 다른 이유는 함수의 특수성(함수스코프) 때문(es5 문법에서)

10. 자바스크립트를 실행시켜주는 2가지 : 브라우저, node

20210418토 , 20210501토

회사의 야근 시즌이 한텀 지나고, 이주정도 다시 여유로운 주간이되니 슬슬 다시 공부를 하고있다.

오늘 공부한 것 - 콜백함수

js에서 함수는 object이다.

그래서 함수가 함수내에서 인자로 쓰이기도 하고, 리턴값으로 쓰이기도 한다.

함수를 인자 또는 리턴값으로 가지고 있는 함수를 고차함수(한국어이름이 좀 구림  영어로는 higher order function) 라고 하고,

인자 또는 리턴값으로 쓰이는 함수를 콜백(callback function)라고 한다.

항상 콜백함수라는 개념이 api call 하는 promise, async await과 함께 나오는 개념이라서  세뚜세뚜 개념인줄 알았는데, 꼭 그런건 아니고,

생각보다 콜백의 개념은 좀 더 포괄적인 개념인거 같다. 다만 api call 하고 리턴값을 받아와서 처리하는 경우에 대다수 콜백의 개념을 쓰고 있었기 때문에 위에서 말한 promise, async await과 늘 같이 설명되는것 같다. 😁😁😁😁😁😁😁😁😁

오늘 나에 대해서 느낀점 나는 집에서 보다 카페나 바깥 세상에 나와야 공부를 열심히 한다. (허세끼가 좀 있는겅가)

아래 글에 잘 설명되이 있당!! 😍

이제 콜백함수는 정보옥!!! 잘해써 궁디팡팡!! 나도 이러케 설명을 쉽게 잘하는 살암이 되어야징 😻

아참참!!! 비동기 처리와 관련해서 어제 하나 더 알게 된것. Promise 의 경우 예제들을 보면 항상 resolve, reject(?) 요런것들로 return을 받아서 처리하는 데, 실무 코드에서는 도무지 저딴 텍스트를 볼 수 가 없고 바로 .then()으로 처리를 한다. 그게 왜 그런고 하니..보통 실무에서 axios라는 api를 처리하는 라이브러리를 쓰는데, 그 라이브러리 내부에 resolve, reject를 이미 처리해서 주기 때문에 그걸 가져다 쓰는 입장에서는 그 코드가 안보인다고 한당 🤠👻🤠👻🤠👻 그렇구먼?! 늘 궁금했는데 이제 알아씀!!! 

medium.com/@oasis9217/%EB%B2%88%EC%97%AD-javascript-%EB%8F%84%EB%8C%80%EC%B2%B4-%EC%BD%9C%EB%B0%B1%EC%9D%B4-%EB%AD%94%EB%8D%B0-65bb82556c56

다음주에는 이거 보쟈아: programmingsummaries.tistory.com/325

동료가 이벤트 루프 강의 링크를 공유해줬다.
https://youtu.be/8aGhZQkoFbQ

자막과 코드를 동시에 보려니 매우 헷갈림.

일단 이해한거 까지는...
스택, 큐, 웹api(뭔가스토리지 같음)라는게 있고.
js가 싱글레드이지만 웹api라는스토리지라는게 있어서 이걸 멀티쓰레드 처럼 쓰니까 비동기처리가 가능하다.

그렇다면 이벤트루프란... 스택과 웹api같은데서 서로 핑퐁하면서 이벤트을 반복해서 실행하는거아닐까?

더 찾아봐야징 (ღ◕ܫ◕ღ)

promise 란 자바스크립트에서 비동기처리에 사용되는 객체.

인자로는 resolve, reject 가 있다.

상태로는 pending,fullfilled,rejected 가 있다.

then(),catch()로 정상동작시, 에러발생시 처리를 할 수 있다.

1. 함수나 변수의 선언식은 해당 scope내에서 최상위로 끌어올려지는것.
const kgh = 1
이 구문은
자바그크립트 내부에서
const kgh
kgh = 1
이렇게 두개의 구문으로 나눠지는데, const kgh 이 구문이 해당 scope의 최상위로 끌어올려지는 것을 말한다.

2. kgh = 1 <--- 이런식의 할당문은 끌어올려지지 않는다.

3. 선언없이(var const let같은거 없이) 그냥 kgh =1 이라고 써버리면 이 선언문이 자동으로 해당 scope를 무시하고 전역에서 선언, 할당되어 버림에 주의해야한다.