2021.01.25 ~ 2021. 01. 29

Week 2-1: JS로 많은 데이터 다루기 / Week 2-2: JS 깊게 알기 / Week 2-3: 웹 앱 모양 만들기

Week 2-1: JS로 많은 데이터 다루기

1) 배열

정의 : 순서(index)가 있는 값
대괄호[]를 이용해 배열을 만들고 각각의 element(요소)는 comma로 구분
index는 1이 아닌 0부터 번호를 매김

1-2) 배열 기초 매서드

arr.length : 배열의 길이
arr.push() : 배열 끝에 element 추가
arr.pop() : 배열 끝에 element 삭제
arr.shift() : 0번째 element 제거
arr.unshift() : 0번째 element 추가
Array.isArray() : 배열인지 아닌지 확인
table(arr) : 배열을 테이블로 보여줌
arr.indexOf(element) : index의 순서를 알려줌 / 없을 경우 -1 / 대소문자 구분
arr.includes(element) : index의 순서를 알려줌 / 브라우저 호완성이 낮기 때문에 indexOf 사용 추천

2) 객체

중괄호로 객체를 만들고 키와 값 쌍으로 이루어짐 (Key: value) 쉼표로 구분, value는 어떠한 형태도 입력 가능
객체의 값을 사용하는 방법

방법1: Dot notation
방법2: Bracket notation [‘’] , Key 값이 동적인 상황에서 사용(Key 값이 변수일 때)

Week 2-2: JS 깊게 알기

1) Primitive & Reference

1-1) Primitive data types(원시 자료형)

string, numer, bigint, boolean, undefined, symbol, (null)
"하나"의 정보만을 가지고 있는 데이터 타입
데이터의 크기와 관계 없이 하나의 데이터만 담음
값 자체에 대한 변경은 불가능하지만(immutable), 변수에 다른 데이터를 할당 가능

1-2) Reference data types(참조 자료형)

배열([]), 객체({}), 함수(function() {})
변수에 특정한 데이터 보관함을 찾아가는 주소를 할당, 그 주소 안에 데이터가 존재
데이터 보관함의 크기는 유동적으로 변경(효율성, 동적)

2) Scope

변수의 값(변수에 담긴 값)을 찾을 때 확인하는 범위
종류
- 전역스코프(Global Scope) : 전역에 선언되어 어느 곳에서든 해당 변수에 접근 가능
- 지역스코프(Local Scope) : 지역에 선언되어 지역 안에서만 해당 변수에 접근 가능
  - 블록스코프(Block Scope) : {} 로 둘러싸인 지역 안에서 해당 변수에 접근
  - 함수스코프(Function Scope) : 함수로 지정된 지역 안에서 해당 변수에 접근

3) Closure

외부 함수의 변수에 접근할 수 있는 내부함수
지역변수, 외부 함수의 변수, 전역변수 의 접근이 모두 가능
커링 : 함수 하나가 n개의 인자를 받는 대신, n개의 함수를 만들어 각각 인자를 받게 하는 방법
클로저 모듈 패턴 : 변수를 스코프 안쪽에 가두어 함수 밖으로 노출시키지 않는 방법

Week 2-3: 웹 앱 모양 만들기

1) CSS Selector

Selector (셀렉터)
```
  `h1 { }
  div { }`
```

Universal Selector (전체 셀렉터)

  HTML 문서 내의 모든 요소를 선택, html 요소를 포함한 모든 요소가 선택 (head 요소도 포함)<br>
  `* { }`

Tag Selector

  지정된 태그명을 가지는 요소를 선택

  `section, h1 { }`

ID Selector

  id 값을 선택하는 셀렉터

  `#only { }`

class Selector

  class 값을 선택하는 셀렉터

  `.widget { }
  .center { }`

descendant selector (후손 셀렉터)

  문서 구조에서 특정 구조의 요소의 자손을 선택하는 선택자 (자손 : 자식, 손자 그 이후에 후손을 모두 포함)

  `header h1 { }`

child selector (자식 셀렉터)

  특정 요소의 직계 자식만 선택하는 선택자 (자식 이후 손자, 후손은 포함하지 않음)

  `header > p { }`

adjacent sibling selector (인접 형제 셀렉터)

  같은 부모를 가지고 section 바로 뒤에 오는 p 에만 적용

  `section + p { }`

general sibling selector (형제 셀렉터)

  같은 부모를 가지고 section 뒤에 오는 p 에 적용(바로 올 필요 없음)

  `section ~ p { }`

pseudo-class selector (가상 클래스)

  원래 클래스가 존재하지 않지만 임의로 지정하여 선택하는 방법, 마우스가 들어왔을때 등의 특정 상태에만 적용되는 가상의 클래스를 지정해주는 것

  `a:link { }      // 사용자가 방문하지 않은 링크일 경우
  a:visited { }    // 사용자가 해당 링크를 방문하고 돌아왔을 경우
  a:hover { }      // 링크 문자에 마우스가 닿았을 때
  a:active { }     // 링크 문자가 클릭된 상태일 경우(활성화)
  a:focus { }      // 링크에 걸린 문자에 포커스가 생길 경우`

UI element status pseudo-classes (UI 요소 상태 셀렉터)

  `input : checked + span { }   // 셀렉터가 체크된 상태 일 때
  input : enabled + span { }    // 셀렉터가 사용 가능한 상태일 때
  input : disabled + span { }   // 셀렉터가 사용 불가능한 상태일 때`

부정 셀렉터 (Negation pseudo-class)

  셀렉터에 해당하지 않는 모든 요소를 선택
  `input:not([type="password"]) { }
  div:not(:nth-of-type(2)) { }`

정합성 확인 셀렉터

  유효하거나 / 유효하지 않은 값을 가진 모든 input 요소들을 선택
  `input[type="text"]:valid { }
  input[type="text"]:invalid { }`

코드 스테이츠 2주차에는 자바스크립트에 대해 조금 더 배우는 시간이였다. 1주차보다 더 많은 시간을 할애해서 공부를 했지만 여전히 부족하다.... 다른사람들과 비슷해지려면 더더욱 많은 시간을 효율적으로 보내야 하는데 조급해서 그런지 잘 활용하지 못하는 것 같다. 그래도 그냥 비교만 하는 것 보다 일단 공부하면서 따라가기라도 해야겠다. 나중에 나보다 늦게 코딩 시작하는 분이 있다면 그 분 보다는 내가 더 잘 할테니까!

Author And Source

이 문제에 관하여(코드스테이츠 2주차), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@shallwedance/코드스테이츠-2주차

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)