[엘리스 AI 트랙 4기] // 2주차 - 자바스크립트 I

0. 2주차

 

이번 주는 자바스크립트 기초 문법과 활용에 대해서 배웠다.

그리고 이번 주는 스터디를 모집했다. 나는 총 두 가지의 스터디에 들어갔다. 

 

• 데이터 분석과 머신러닝 스터디
• 코딩 테스트 스터디

 

혼자 준비해서 막막했던 것들을 스터디를 통해 풀어나가려고 한다. 

 

---

1. 배운 내용 

 

<변수정의>

 

-var : 전역변수를 설정하는 것이다. / 중복 선언 가능

-let : 영역이 scope, 상황에 따라 지역변수로 설정할 수 있다. 

-const : 영역이 scope, 상황에 따라 지역변수로 설정할 수 있다. /  변수 선언한 기점으로 딱 한번만 초기화 할 수 있다. 따라서 상수값, 변하면 안되는 값을 설정할 때 사용한다.

 

 

* 최대한 for문을 사용하지 말자 *

<문법>

- typeof <변수> : type 확인

 

1) *spread(스프레드) 연산자 

A = [1,2,3,4,5]

console.log(...A)

 

ex) 배열을 합칠 때 , 객체를 합칠 때 객체 안에서만 펼칠 수 있다.

let A = [1,2,3,4,5];

let B = [6,7];

let C = [...A, ...B]

 

- A.concat(B) : A와 B를 합침

 

2) 깊은 복사 vs 얕은 복사

: 배열과 객체만 고려하면 된다.

 

> 얕은 복사 (주소만 복사되는 것)

그냥 B=A; 라고 복사해오면 나중에 B를 수정했는데 A도 적용된다. 

> 깊은 복사 (값만 복사되는 것, 주소는 새로 가지게 된다)

ex)

C = A; // 얕은 복사

C = [...B] // 깊은 복사

C = A.slice() // 깊은 복사

 

> 복잡해지면 clonedeep 사용 https://lodash.com/docs/4.17.15#cloneDeep

lodash 모듈의 cloneDeep() 메소드를 이용하여 객체의 깊은 복사가 가능하다.

 

3) 화살표 함수

let sum = (a, b) => a + b;

/* 위 화살표 함수는 아래 함수의 축약 버전입니다.

let sum = function(a, b) {
  return a + b;
};
*/

alert( sum(1, 2) ); // 3

const add2 = (a,b) => a + b;

const func = (a,b) => {

         console.log(a,b);

         return a-b; 

       };

"{}"를 사용하면 값을 반환할 때 return을 사용해야합니다.
"{}"를 사용하지 않으면 undefied를 반환합니다.
"{}"을 사용할 때는 여러줄을 썼을 때 사용합니다.

https://kim-solshar.tistory.com/57

[자바스크립트] arrow function과 this

 

4) setInterval(); 함수   // 시간마다 반복되는 함수

setInterval(() => console.log("Hi !!"),1000);

setInterval(function(){scrollTo(0, 10000)}, 1000);

1초마다 스크롤을 내리는 함수를 사용하는 것이다.

setInterval(function(){ console.log("Hi !!"); }, 1000);

setInterval(function() {

                 console.log("HI !!"); }

setInterval(()=>console.log("HI !!"), 1000);

 

5) for 문

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

let sum = 0;

for (const n of num) {

      sum += n;

 }

console.log(sum)

-> 반복을 돌 때마다 n을 재선언

 

6) 어레이 메소드(map,filter,forEach)

 

( map 함수 )

: 새로운 배열을 반환한다. 깊은 복사를 한다

- 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환하는 메서드이다.

A = [1,2,3,4,5,6,7,8,9,10];

A.map(function(v) {
   return v * 2;
})

//화살표 함수로 적으면) 

A.map(v=>v*2)

const numbers = [1]; 
numbers.map((number, index, source) => { 
// number: 요소값 
// index: source에서 요소의 index 
// source: 순회하는 대상 
console.log(number);   // 1 
console.log(index);    // 0 
console.log(source);   // [1] 

return number * number; });

map의 두번째 변수에는 인덱스가 출력된다.

const numbers = [1, 2, 3, 4, 5]; 
// 제곱근 구하기 

const squares = numbers.map(Math.sqrt);

// 곱 구하기 
const double = value => value * 2; 
const doubles = numbers.map(double);

> 2차원 배열의 깊은 복사

A = [[0,1,2],[3,4,5],[6,7,8]]

B = A.map(v => v.map(w => w))

map을 이용해서 일대일 대응해주면 완전한 깊은 복사가 된다. 그래서 B를 수정해도 A는 수정되지 않는다.

 

( forEach함수 )

: 단순한 반복이 필요할 때, 반환은 필요없을 때, 반환값이 없다.

- map() 메서드와 거의 비슷하지만 차이점은 따로 return 하는 값이 없다는 점

- forEach 메서드는 변수에 할당하기 보다는 반복문이나 조건문과 같이 그냥 바로 호출되는 것이 일반적이다.

let B = [];

A.forEach(v => {
	B.push(v*2);
});

Object.keys(obj).forEach( key => {console.log(obj[key]); });

 

( filter )

: 배열에서 원하는 값만 추출하고 싶을 때

- 새로운 배열을 반환한다.

A.filter(v => v%2 == 0)

// 조건을 걸 수 있다.

A.filter(v => v !== 'A')

 

7) 형변환

 

- 문자 -> 숫자 : A.parseInt()

- 숫자 -> 문자 :  A.toString()

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

A.map(el => parseInt(el))

A.map((v,i) => {

     return {
           name: v,
           index: i,
         }
});

--> 첫 번째는 요소가 들어오고 두번 째 인자는 인덱스가 들어온다.

 

- map은 원래 있는 배열에서 창조할 때는 사용하면 편하다

 

- for문은 무에서 유의 배열을 찾을 때 사용하면 편하고, break문이나 continue문 필요할 때 사용

 

 

8) 스트링 메소드 (split,join)

A.split(",").map(v=>v+"!!!")

split() [문자열 → 배열] 

join() [배열 → 문자열] 

 

 

9) reduce

: 한번에 연산을 해야할 때 / 배열의 전체 합을 구하기 편한 함수 (누적값)

- 인자 반드시 두개

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

A.reduce((a,b) => a+b);   //55

A.reduce((a,b) => a+b, 10);   //65

 

10) Object.entries(객체)

: object를 배열로 바꾸기

- 배열로 바꾸면 map, forEach, filter를 쓸 수 있다.

var scores = {
    "kor": 55,
    "mat": 75,
    "eng": 50
}

Object.entries(scores)

Object.keys(scores).map(key => scores[key])   // 객체에 있는 value 추출

 

11) indexOf

: 문자열에 존재하는지 확인함

 

str = 'Hello ! World";

str.indexOf('!') != -1  -> 문자열에 !가 존재한다.

 

str.includes('!')  -> str문자열에 !가 있냐?

 

---

 

2. 다시 기억하자! (HTML/CSS)

 

자기소개 페이지 제작하면서 헷갈렸던 점은 다시 기억하고 가자!

 

- flex

https://studiomeal.com/archives/197

이번에야말로 CSS Flex를 익혀보자

- grid

https://studiomeal.com/archives/533

이번에야말로 CSS Grid를 익혀보자

 

- Block 요소와 Inline 요소

 

1) Block 요소 

• <p>태그, 줄바꿈 현상, width와 Height 설정 가능! 즉, 공간 만들기 가능
• margin과 padding 값 사용해서 상하 배치 작업 가능
• 한 영역을 다 차지하는 박스 형태 

 

2) Inline 요소 

• <a>태그, <span>태그, 줄 바꿈 X, width와 Height 설정 불가능!
• 상하 배치 불가능, margin-left와 margin-rigth 좌우 배치는 가능
• 자기 자리만 차지

 

3) Inline-block 

• x축 배치되면서 상하 배치도 가능하다. 주로 내비게이션 버튼 만들 때 활용한다!
• 줄 바꿈 X, width와 Height 설정 가능
• 자기 자리만 차지

 

- 부모 자식 간의 마진 병합

자식에 margin-top을 했는데 부모도 영향을 받는다.

이때 극복하기 위해서 position: absolute; 넣어주자!

 

 

- 화면 가운데 배치

 

body { display: flex; justify-content: center; align-items: center; height: 100vh; } /* 화면 가운데 배치 */

 

- 기타

• vertical-align: middle; : 이미지의 수직 정렬을 중앙으로 맞추는 디폴트 값
• text-decoration: none; : <a>태그의 디폴트 값인 밑줄 제거
• list-style: none; : <ul><ol> 기호 제거