2022-08-29 국비지원 웹개발 15일차

<강사님>

돈이 다가 아니에요.

초반에는 적더라도 자기가 레벨 업할 수 있는 곳이면 충분히 다닐 가치가 있어요.

---

배열 관련 method들과 알림 창, 이벤트에 등에 대해 배웠다.

---

미션. phone="010-1111-2222"와 같은 연락처가 저장되어 있을 때 split 함수를 사용하여 사업자 번호, 국번, 전화번호를 분리하여 각각 출력.

 

미션. str="1,2,3,4,5"와 같이 숫자가 하나의 문자열로 입력되어 있다.

이를 split으로 분리한 후 합계와 평균을 구하여 출력.

 

미션. score=[60,70,50,70,30] 배열 값을 some()을 사용하여 과락(40점 미만)이 있는지 판단하고, reduce()를 사용하여 합계를 구하여 합계, 평균을 출력.

과락이 없고, 평균이 60 이상이면 "pass", 아니면 "fail"을 출력.

 

미션. su=[1,2,3,4,3,4,5,1]의 배열에서 각 번호의 발생 빈도를 계산하여 숫자와 함께 출력.

---

1. forEach

 

배열. forEach ( function (값, 인덱스, 배열 자신 ) { }

배열의 요소를 순차적으로 한 번씩 실행한다.

for in과 for of의 장점을 각각 가지고 있다.

 

2. 배열 관련 method

 

(1) map: 배열의 요소들을 함수 안의 처리 내용으로 처리하고 반환하여 새로운 배열로 만든다.

애로우 펑션은 기본적으로 리턴한다.

 

배열명. map ( function(v) {

  return v;

}

또는

배열명. map ( 요소 => {처리 내용} )

(2) some: 배열의 값 중 하나라도 주어진 조건에 만족하면 참을 리턴.

비어 있는 배열을 지정하면 false 리턴.

안에 if문 사용하면 원하는 결과를 출력하기 쉽다.

 

배열. some(콜백)

(3) filter: 배열의 요소중 조건에 만족하는 요소들만 모아 새로운 배열을 만들어 반환.

 

배열. filter(콜백(value, index, array))

 

(4) reduce: 일종의 누산기 기능 수행.

 

배열. reduce(콜백, 초기값, 현재 값)

3. 알림 창

 

여러 가지 알림방 법이 있지만 UX를 고려해서 선택하는 게 좋다.

 

4. 이벤트

 

이벤트를 추가하는 방법과 이벤트의 여러가지 속성들이다.

인터넷에서 참고자료를 구하기 어려운것도 속성보기를 통해 참고가 가능하다.

 

5. 기타

 

(1) 배열을 sort하면 문자형으로 반환된다.

 

(2) ``백틱과 $기능은 +연산자로 이어 붙이기보다 편리하지만 버전이 낮으면 사용을 못한다.

 

(3) 데이터를 출력할 수 있다면 그 데이터는 제어가 가능하다.

 

(4) 사용자가 익숙해져있는 UI를 바꾸면 스트레스가 높아진다.

예를들어 링크에는 밑줄이 없는게 일반적인데 밑줄을 치면 불편함을 느낄 수 있다.

 

(5) CRUD: 

Create: 생성, 추가

Read: 조회, 읽기

Update: 수정

Delete: 삭제