코드스테이츠 3주차 -[JS/Node] 배열, 객체 / [CSS] 레이아웃, Selector / [JS/Node] 핵심 개념과 주요 문법

엄혜진·2021년 7월 3일
0

CodeStates

목록 보기
3/15
post-thumbnail

점점 배우는 범위도 넓어지고 공부하는 시간도 늘어나는데 아직까지 너무 재밌다. 문제 풀고 해결하는 방향을 찾아가는데 안풀리면 되게 머리도 아프고 왜 안되는지 이해하는데 시간이 많이 소요되지만 너무 재밌다. 왜 재밌는지는 솔직히 잘 모르겠는데 오류가 발생하면 다시 시도해볼 수 있다는 부분에서 '틀리면 어떡하지?'라는 심리적 부담감이 없어서 너무 좋다.
어제보다 오늘의 내가 똑똑해지는 것 같고 알아가는 내용들이 얼마나 증가하고 있는지 체감상으로 파악할 수 있어서 더 배워보고 싶고 계속해서 동기부여가 되는 것 같다.
아직까지 모르는 부분도 많고 얼마나 더 어려워질지는 모르겠지만 끝까지 재미있었으면 좋겠다 :-)


3주차 배운 내용 중 정리하고 싶은 내용

[JS/Node] 배열, 객체


  • 배열 : 순서가 있는 값 [순서는 index로 0부터 번호를 매김]

    ex) let myNumber =[73, 98, 86, 61, 96]; 값을 변경하려면 myNuber[3] = 200;
          => muNumber = [73, 98, 86, 200, 96];


  • 배열의 기초
1. 배열로 길이를 알아낼 수 있음  => arr.length



2. 배열의 요소를 추가할 수 있음

	- arr.push() => 배열 맨 끝에 추가
    	- arr.unshift() => 배열 맨 앞에 추가 - push보다 처리 시간이 더 걸린다.
        
   배열의 요소를 삭제할 수 있음
   	- arr.pop() => 배열 맨 끝을 삭제
    	- arr.shift() => 배열 맨 앞을 삭제 



3. 배열인지 아닌지 확인  

     	- Array.isArray() => 배열이면 true, 아니면 false
    


4. 배열 요소 포함 여부 확인

	- arr.indexOf()
    
    	- arr.indexOf() !== -1 => true; 있는 단어
        - arr.indexOf() !== -1 => false; 없는 단어
    
     	- arr.includes()
        
        
        
5. 문자열에서 공백 부분을 나누어 배열로 리턴

	- return str.split(' ')
    
    
6. 배열 자르기

	- return arr.slice() => begin부터 end까지 (end 미포함)
    
7. 배열을 합치기

	- return arr1.concat(arr2);
    
    
8. 배열과 인덱스를 입력받아 해당 인덱스의 요소를 제외한 배열 리턴

	- arr.splice(index, 제외할 요소 갯수);
    	  return arr;
        

  • 문자열을 각 문자를 요소로 갖는 배열을 리턴

   ex) 'apple' -> ['a', 'p', 'p', 'l', 'e']

let result = [];

for (let i = 0; i < str.length; i++) {
  result.push(str[i]);
  }

  return result;
}

  • 배열 중 가장 큰 요소를 숫자로 리턴

   ex) [1, 4, 3] -> 4

let max = arr[0];

for (let el of arr) {
  if (el > max) {
    max = el;
  }
 }

  return max;
}

위에 함수는 아래 함수와 같은 결과값을 나타냄

return Math.max(...arr);

    for ... of : 배열에서만 사용



  • 문자열에서 가장 긴 단어 리턴

   ex) 'I love you' -> 'love'

let words = str.split(' ');
let max = words[0];

for (let arr of words) {
  
  if (arr.length > max.length) {
    arr = max;
  }
 }

  return max;
}

  • 객체 : 각기 다른 값을 가질 수 있지만, 입력해야하는 데이터의 종류가 동일한 경우 사용
      ex) let user = {firstName: 'Steve', lastName: 'Lee', age: 32, city: 'Seoul'}

  • 객체의 기초
1. 객체의 값 가져오는 방법  

	- Dot notation => user.firstName
    	  		  user.city
          
        - Bracket notation  => user['firstName']
         (key값이 변수일때 사용)   user['city']



2. Dot/Bracket notation을 이용해 값을 추가 가능

	- tweet['category'] = '잡담'
    	  tweet.isPublic = true
          tweet.tags = ['#코드스테이츠', '#프리코스']
        


3. delete를 통해 삭제 가능 

     	- delete tweet.createdAt
    


4. in 연산자를 이용해 해당키가 있는지 확인 가능

	- 'email' in user
   
   
   
5. 객체를 입력받아 속성의 갯수를 리턴

	- return Object.keys(obj).length;
    
        

  • 객체의 모든 key를 출력

function allKeys(obj) {
  
  for (let key in obj) {
    console.log(key);
  }
 }

    for ... in : 객체에서만 사용


  • 객체의 모든 value를 출력

function allKeys(obj) {
  
  for (let key in obj) {
    console.log(obj[key]);
  }
 }

  • 문자을 입력받아 문자열을 구성하는 각 문자를 키로 갖는 객체리턴

   ex) {'banana'} -> {b: 1, a: 3, n: 2}

let obj = {};

for (let i in str) {
  
  if (obj[str[i]] === undefined) {
    obj[str[i]] = 1;
  }
  else {
    obj[str[i]]++;
  }
 }

  return obj;
}


[CSS] Selector


  • 셀렉터 : h1{  }, div{  } => h1 전체 선택, div 전체 선택

  • 전체 셀렉터 : *{  } => 전체 선택

  • tag 셀렉터 : section, h1{  } => section과 h1을 다중 선택

  • ID 셀렉터 : #only{  } => ID only인 엘리먼트 선택

  • class 셀렉터 : .center{  } => class가 center인 엘리먼트 선택

  • 후손 셀렉터 : header h1{  }

  • 자식 셀렉터 : header > p{  } => 자식은 바로 밑, 후손은 아래에 포함되어 있는 모든 엘리먼트

  • 형제 셀렉터 : section ~ p{  }

  • atribute 셀렉터 : a[href]{  }, p[id = 'only']{  }

  • 가상클래스 : a: link{  }, a: visted{  }, a: hover{  }, a: active{  }

  • 요소 상태 셀렉터 : input: checked + span{  }, input: enabled + span{  }, input: disabled + span{  }

  • 부정 셀렉터 : input: not([type="password"]){  }, div: not(:nth-of-type(2)){  }

  • 정합성 확인 셀렉터 : input[type="text"]:valid{  }, input[type="text"]:invalid{  }



css연습하기 좋은 사이트 : flukeout.github.io

  • div p: first-child : div안에 p중에 가장 첫번째 선택
     ex) plate > :first-child

  • ul li: only-child : ul안에 li 하나만 존재하는 것 선택
     ex) plate > :only-child

  • ul li: last-child : ul안에 li중에 마지막 선택
     ex) .small: last-child

  • .example: nth-of-type(odd) : class가 example중 홀수번째 모두 선택
     ex) plate: nth-of-type(even)



[CSS] 레이아웃


  • display: flex : 부모 박스요소에 적용해 자식박스의 방향과 크기를 결정 [기본값으로는 왼쪽으로부터 배치]

  • Flexbox 정리

Flexbox 연습하기 좋은 사이트 : Flexbox froggy

1. 부모요소에 display: box 자식요소에 flex: 0 1 auto -> flex: <grow><shrink><basis>

	- <grow>: 길이의 비율을 의미하며 grow의 값이 동일한 경우 모든 자식 박스 길이가 같음

    	- <shrink>: 설정한 비율만큼 작아지며 grow와 함께 쓰지 않는 것을 권장 (grow로 변경시 shrink는 1로 두기)

        - <basis>: auto인 경우 grow속성에 영향을 받음. 크기 유지를 위한 경우 숫자를 넣지만 항상 유지가 되지는 않음 -> basis의 속성값을 유지를 원하는 경우 grow가 0이여야 함





2. Flexbox제어 축 [reverse를 이용해 반대로 바꿀 수 있음]

	- main axis: flex-direction 속성에 의해 결정 (기본값이 row이면 가로축) => main axis 기준으로 <justify-content> 속성 정렬

    	- cross axis: main axis와 수직을 이루는 방향 => cross axis기준으로 <align-items> 속성 정렬
        




3. 콘텐츠 수평 정렬 [justify-content 속성]  

     	- justify-content: flex-start => 요소들을 컨테이너 왼쪽 정렬

    	- justify-content: space-around => 요소들을 주위에 동일한 간격





4. 콘텐츠 수직 정렬 [align-items 속성]

	- align-items: flex-start => 요소들을 컨테이너 꼭대기 정렬
    
    	- align-items: baseline => 요소들을 컨테이너 시작위치 정렬

        - align-items: stretch => 요소들을 컨테이너에 맞도록 늘림
    
     	- align-self: _ => align-items와 같은 코드로 속성을 개별로 적용 가능 

        
        

        
5. 한줄에 너무 많은 요소 정렬시 넓히기

	- flex-wrap: wrap => 요소들을 여러 줄에 걸쳐 정렬 (wrap-reverse를 이용하면 요소들을 여러줄에 걸쳐 반대로 정렬)
    



    
* 참조 *

- width와 flex-basis를 동시에 적용하는 경우, flex-basis가 우선
    
- 콘텐츠가 많아 자식박스가 넘치는 경우, width가 정확한 크기를 보장하지 않음

- (flex-basis를 사용하지 않은 상태에서) 콘텐츠가 많아 자식박스가 넘치는 경우를 대비해, width 대신 max-width 사용 가능
    
    
        



[JS/Node] 핵심 개념과 주요 문법


  • 원시자료형 : Number, string, Boolean, Null, undefined와 같은 값으로 원시값을 복사하면 데이터 값을 복사하는 것 => 원시값의 기존데이터에 영항을 주지 않음
    => 원시자료형은 하나의 정보(데이터)를 담고있음 [값 자체 변경은 불가능하지만 다른 데이터 할당은 가능]

  • 참조자료형 : array, object, function와 같은 값으로 자료가 저장되어 있는 주소를 복사 즉, 참조자료형은 변수를 할당할 때 변수에 값이 아닌 주소를 저장 => 복사한 데이터에서 원소를 변경시 기존데이터 영항을 줌

    [얕은복사와 참조복사에서 1depth는 원소를 변경 시 지장을 주지 않음 but, 2depth이상 부터는 연결이 되어 있음]


  • 스코프 : 변수 접근 규칙에 따른 유효범위
    => 바깥쪽 스코프에서 선언한 변수는 안쪽스코프에서 사용 가능 (스코프 중첩가능)
    => But, 안쪽에서 선언한 변수는 바깥쪽 스코프에서 사용 불가능


  • 블록스코프 (중괄호로 둘러싼 범위)

if(true) {
  
  console.log ('I am in the block'); {
  }
  
  for (let i = 0; i < 10; i++) {
    console.log(i);
  }
  
  {
    console.log('It works');
  }
}

  • 함수스코프 (함수로 둘러싼 범위)

function getName(user) {
  return user.name;
}

let getAge = function(user) {
  return user.age;
}

  • 클로저 : 함수와 함수가 선언된 어휘적 환경의 조합
1. 함수를 리턴하는 함수  

	  const adder = x + y => x + y;
    	    adder (5)(7); //2
          
            typeof adder(5) // 'function'
            adder(5) // y => x + y



2. 리턴하는 함수에 의해 스코프(변수의 접근범위)가 구분됨

	  const adder = function(x) {
    	    return function(y) {
              return x + y;
            }
           }
           
           
   * 외부함수(adder)의 실행이 끝나더라도, 외부함수 내 변수(x)를 사용 *
          
    	  	const add5 = adder(5);
          	add5(7) // 12
          	add5(10) // 15
         

js파일 맨 상단에 'use strict'; 사용하여 에러를 방지하자

0개의 댓글