[본캠프 6일차] javascript 문법 종합반 수강 1주차

지난 주 미니 팀 프로젝트가 끝난 후, 이번 주 부터는 새로운 팀원분들과 팀 프로젝트가 아닌 개인 학습 및 과제를 진행해야 하는데, 어떻게 공부해야 하는지 소통하며 코드 공유도 하고 화면공유도 하며 서로에게 도움이 되는 주간이 될 것 같습니다.

 

강의는 JavaScript 문법 종합반 1주차부터 5주차까지 진행되며, 개인적으로 강의를 들으며 공부하고 영화 검색 사이트를 만드는게 최종 개인과제 입니다.

 

JavaScript 문법 종합반 1주차

 

1. JS(자바스크립트) 언어의 특징 그리고 역사

 

 (1) 자바스크립트의 역사

• 1995년 자바스크립트 탄생 (LiveScript > Javascript)
• 브라우저 동작 스크립트 언어 
  - Chrome
• 폭발적인 UX 향상
  - User Experience = 사용자 경험
• 2009년 Node.js 등장, 서버 개발 활성화
  - FrontEnd + BackEnd + DB(MongoDB) = FullStack
• 2015년 ES6 (ECMAScript 6) 버전 출시
• 2016년 프론트엔드 프레임워크(React, Vue, Angular) 대중화
• 현재 시점에서 JavaScript 언어를 따라올 수 있는 언어는 없다.

 (2) 자바스크립트 언어의 특징

1. 객체 지향 프로그래밍 지원
   ● 절차 지향
      - 첫 번째 일을 처리한 다음 두 번째 일을 처리하는 것
   
   ● 객체 지향
      - 어떠한 역할이 있는 객체라는 그룹으로 묶어서 수행하는 것 (자바스크립트는 객체 지향 언어)
   
   
2. 동적 타이핑
   ● 다른 언어에서는 변수를 지정할 때  Script a = "abc" 이런식으로 타입을 지정해야 하는데,
      자바스크립트는 var a = "abc" 이런식으로 변수의 타입을 따로 지정하지 않는다. 
   ● 타입이 결정되는 시점은 "런타임"( 프로그램이 실행되는 동안의 시점을 의미) 때 결정된다. 

let myVariable = "Hello, world!"; // 변수 선언 및 문자열 데이터 타입으로 할당
console.log(typeof myVariable); // "string" 출력

myVariable = 123; // 숫자 데이터 타입으로 할당
console.log(typeof myVariable); // "number" 출력

myVariable = true; // 불리언 데이터 타입으로 할당
console.log(typeof myVariable); // "boolean" 출력

   

  3. 함수형 프로그래밍 지원

  4. 비동기 처리

  5. 클라이언트 측 및 서버 측 모두에서 사용 가능 (Node.js)

 

변수와 상수

• 변수란?
  - 기억하고 싶은 값을 메모리에 저장하고. 저장된 값을 읽어 들여 재사용 하기 위해 변수라는 매커니즘을 이용한다.
• 변수의 5가지 주요 개념
  - 변수 이름 : 저장된 값의 고유 이름
  - 변수 값 : 변수에 저장된 값
  - 변수 할당 : 변수에 값을 저장하는 행위
  - 변수 선언 : 변수를 사용하기 위해 컴퓨터에 알리는 행위
  - 변수 참조 : 변수에 할당된 값을 읽어오는 것
• 자바스크립트에서 변수는 var, let, const 세 가지 방법으로 선언할 수 있다.

데이터 타입

 - typeof : 데이터 타입을 알 수 있는 연산자(키워드)

1. 숫자 (number)

 * 숫자는 " 따옴표 " 가 안들어간다.

• 정수
  ex) let num1 = 10; 
• 실수형 (float)
  ex) let num2 = 3.14;
• 지수형 (Exp)
  ex) let num3 = 2.5e5; // 2.5 x 10^5
• NaN (Not a Number)
  ex) let num4 = "Hello" / 2;
• 무한대 (Infinity)
  ex) let num5 = 1 / 0;
• 마이너스 무한대 (-Infinity)
  ex) let num6 = -1 / 0;

2. 문자 (string)

 - 문자는 '작은따옴표' = "큰 따옴표" 를 사용한다.

문자열의 기능

• length() : 문자열 길이
  ex) let str = "Hello world!"
       console.log(str.length);
       12
• concat() : 문자열 결합
  ex) let str1 = "Hello, ";
        let str2 = "world!";
        let result = str1.concat(str2);
        console.log(result);
        Hello, world! // str1 에 str2 를 결합한다.
• substr() : 문자열 자르기 (시작위치부터 몇개까지 자를건지)
• slice() : 문자열 자르기 (시작위치부터 끝 위치까지)
  ex) let str3 = "Hello, world)";
        console.log(str3.substr(7, 5));
        console.log(str3.slice(7, 12));
        wolrd  // 7번째부터 5개까지만 출력
        world // 7번째부터 12번 위치까지 출력
• search() : 문자열 검색
  ex) let str4 = "Hello, world!";
        console.log(str4.search("world"));
        7 // 몇번째부터 시작되는지 찾는 기능
• replace() : 문자열 대체
  ex) let str5 = "Hello, world!";
        let result = str5.replace("world", "Javascript");
        console.log(result);
        Hello, Javascript! // world 를 javascript 로 대체한다.
• split() : 문자열 분할
  ex) let str6 = "apple, banana, kiwi";
        let result = str6.split(",")
        cosole.log(result);
        [ 'apple', 'banana', 'kiwi' ] // 합쳐져 있던 문자열이 배열이라는 형태로 각각 분할된다.

3. 불리언  (Boolean) 

 - True (참) 와 False (거짓)를 나타내는 값

• if 문
• for 문

4. undefined

- 정의되지 않은 값이 할당되지 않은 변수
ex) let x;
      console.log(x);
      undefined

 

5. null 

- 값이 존재하지 않음을 '명시적'으로 나타내는 방법

ex) let y = null;
      console.log(y);
      null

 

6. object (객체) { }

- Key-value pair 

ex) let person = {

           name = 'choi',

           age = 20
           isMarried: true

      }
     console.log(typeof person);

     object 

 

7. array (배열) [ ]

- 여러 개의 데이터를 순서대로 저장하는 데이터 타입

- 거의 대부분의 index 에서는 0부터 시작한다

ex) let number = [1, 2, 3, 4, 5];

      let fruits = ['apple', 'banana', 'orange'];

 

형 변환

- 형태를 바꾸는 것

• 암시적 형 변환
  - 의도하지 않았지만 자동으로 바뀌어진 것
  
  문자열
  ex) let result = 1 + "2";
        console.log(result);
        console.log(typeof result);
        12
        string // 숫자와 문자를 더하니 문자열로 자동으로 바뀐 것을 암시적 형 변환
  ex) let result = "1" + true;
        console.log(result);
        console.log(typeof result);
        1true 
        string 
  * 불리언이 안나오는 걸 보니, 문자열과 다른 데이터 타입이 더하기 연산자와 만나면 문자열이 우선시 된다는 걸 알 수가 있다. 
  * {} , null, undefined + "1" => 문자열
  
  숫자
  ex) let result = 1 - "2";
        console.log(result);
        console.log(typeof result);
        -1
        number
  
  ex) let result = "2" * "3";
        console.log(result);
        console.log(typeof result);
        6
        number
  * 빼기, 곱하기, 나누기 등 다른 연산자가 나올 때는 숫자가 우선시 된다. 
  
  
• 명시적 형 변환
  - 일부러 개발자가 의도적으로 바꾼 것
  
  불리언(Boolean)
  ex) console.log(Boolean(0));
        console.log(Boolean(""));
        console.log(Boolean(null));
        console.log(Boolean(undefined));
        console.log(Boolean(NaN));
        전부 false
       
        console.log(Boolean("false"));
        console.log(Boolean({}));
        전부 true
  * 문자열은 안에 값이 있을 시에는 무조건 true 가 나온다.
  * 객체는 값이 비어있다 할지라도 true 가 나온다.
        
  문자열
  ex) let result = string(123);
        console.log(typeof result);
        console.log(result);
  
        let result = string(true);
        console.log(typeof result);
        console.log(result);
  
        let result = string(false);
        console.log(typeof result);
        console.log(result);
  
        let result = string(null);
        console.log(typeof result);
        console.log(result);
  
        let result = string(undefined);
        console.log(typeof result);
        console.log(result);
        
        전부 string 값은 아니지만 다 string 문자열로 변환
  
  숫자
  ex) let result = Number("123");
        console.log(result);
        console.log(typeof result);
        123
        number
  * 문자열을 넣었음에도 숫자가 나온다.

연산자

1. 더하기 연산자 (+)
   - 문자열과 같이 들어가면 우선 순위는 문자열에 있다. (위에 참고)
2. 빼기 연산자 (-)
   - 빼기, 곱하기, 나누기 연산자들 우선 순위는 숫자에 있다.
3. 곱하기 연산자 (*)
4. 나누기 연산자 (/)
   ex) console.log(5 / 2);  // 2.5
5. 나머지 연산자(%)
   ex) console.log(5 % 2);  // 1

할당 연산자 (assignment)

• 등호 연산자(=)
  ex) let x = 10;  // x 라는 변수에 식(=)을 할당했으므로 할당연산자는 = 다.
• 더하기 등호 연산자 (+=)
  ex) x += 5;  // x 에다가 5를 더해라.
        console.log(x);
        15
• 빼기 등호 연산자 (-=)
  ex) x -= 5;
        console.log(x);
        10
• 곱하기 등호 연산자(*=)
  ex) let a = 10;
        a *= 2;
        console.log(a);
        20

비교 연산자

- true 또는 false 를 반환하는 연산자

• 일치 연산자 (===)
  * 타입까지 일치해야 true를 반환하는 연산자
• 불일치 연산자 (!==)
  * 타입까지 일치해야 false를 반환하는 연산자
  ex) console.log(2 !== 2); // false
        console.log("2" !== 2); // true
        console.log(2 !== "2"); // true
• 작다 연산자 (<)
  ex) console.log(2 < 3); // true
• 크다 연산자(>)
• 작거나 같다 연산자(<=)
  ex) console.log(2 <= 3); 

논리 연산자

• 논리곱 연산자 (&&)
  - 모두 true 일 때 true 반환
  ex) console.log(true && true); // true
        console.log(true && false); // false
        console.log(false && true); // false
        console.log(false && false); // false
  
  
• 논리합 연산자 (||) 
  - 두 값 중 하나라도 true 인 경우 true 반환
  ex) console.log(true || true); // true
        console.log(true || false); // true
        console.log(false || true); // true
        console.log(false || false); // false
  
  
• 논리부정 연산자 (!)
  - 값을 반대로 바꿈
  ex) console.log(!true); // false
        let a = true;
        console.log(!a); // false 
  *  true 로 값을 지정했지만 논리부정 연산자(!) 를 사용했으므로 false 를 출력
  
  
• 삼항 연산자 (중요)
  - 조건에 따라 값을 선택한다
  ex) let x = 10;
        let result = x > 5 ? "크다" : "작다";  // 3개의 구역? 항이 3개라서 삼항 연산자
        console.log(result);
  * x > 5 는 조건, x 는 5보다 큼으로, true 면 앞에 "크다"가 나온다.
  * x 는 5보다 작으면 false, 뒤에 "작다"가 나온다.
   ex) y가 10보다 작은 경우 작다를, 10보다 크면 크다를 출력하기
         let y = 20;
         let flag = y < 10 ? "크다":"작다";
         console.log(flag);
         크다
  
  
• 타입 연산자 (typeof)
  ex) console.log(typeof "5");
        string
  * 위에 했던 내용들

함수 = function (기능)

- input, output 을 가지고 있는 기능의 단위

- 함수 (function)는 (소괄호) 와 {중괄호} 를 이용해서 함수를 만든다.
- 이 두 개의 함수는 동일한 역할을 하는 함수지만, 선언하는 방법은 다르다.

• 함수 선언문 // 호이스팅 가능 
  - 두 개의 숫자(x, y)를 입력 받아서 덧셈을 한 후 내보내는 함수
        function add (x, y) {
            return x + y;
        }
  
  ex) console.log(typeof add) 
        function add (x, y) {
             return x + y
        } 
        undefined 
  * console 을 위에다 선언해도 함수 function 은 호이스팅 가능
• 함수 표현식 // 호이스팅 불가능
  ex) let add = function (x, y) {
            return x + y
        };
  
        console.log(add(1, 2))
        3
  * 여기서 console.log(add(1, 2)) 가 let add 위로 가면 에러남.
  
  input → 매개변수(매개체가 되는 변수)  // add(매개변수)
  output → return 문 뒤에 오는 값 : 반환값  // return (반환값)
  
  * 함수 선언문과 함수 표현식의 다른 점이 궁금해서 튜터님께 여쭤보니 호이스팅 차이 라고 하셨다.
    여러가지 예를 들으며 vs code 를 활용해서 시도를 해봐서 좀 이해가 갔다.

스코프(범위), 전역변수, 지역변수, 화살표함수

let x = 10;  // ← 이 변수의 영향 범위를 '스코프' 라고 한다.

funtion printX() {

   console.log(x);
}

 

console.log(x);
printX();

* '스코프'가 전체 영역에서 영향을 끼칠 수 있으면 '전역변수'

 

function printX() {
   let x = 10;
   console.log(x);
}

console.log(x);
printX();
* function 함수 부분에서만 {중괄호 내부} 영향을 끼칠 수 있을 것 같으면 '지역변수'

 

화살표 함수 (ES6 신 문법)
 - 원래 함수를 선언하는 방법은 function add () {} 키워드였다. 소괄호 앞에 함수명을 입력하는 방식

• 기본적인 화살표 함수
  let arrowFunc = (x, y) => {
         return x + y
  }
  
  
• 한줄로 화살표 함수
  let arrowFunc = (x, y) => x + y;
  * 중간에 다른 로직(console.log();) 이 들어있으면 중괄호 생략 불가능
• 매개변수가 하나일 때
  ex) function testFunc(x) {
           return x;
        }
  
        let arrowFunc = x => x   // (x) => {x};
  *  매개변수가 하나일 때 하나로 한줄로 표시하고 싶으면 소괄호, 중괄호를 다 뺄 수 있다.

조건문

• if 문
  - if (true 또는 false 가 나올 수 있는 조건) {}
  let x = 10;
     if (x > 0) {
     console.log("x 는 양수입니다.");
  }
  * true 면 실행이 되고, false 면 실행이 안된다.
  
  // y의 길이가 5보다 크거나 같으면 길이를 console.log 로 출력하기
  let y = 10;
  if (y.length >= 5) {
     console.log(y.length)
  }
  11 
• if - else 문
  let x = -3;
  if (x > 0) {
      // main logic #1
      console.log("x는 양수입니다.");
  } else {
      // main logic #2
      console.log("x는 음수입니다.");
  }
  x 는 음수입니다.
  
  
• if - else if - else 문
  let x = 10;
  if (x < 0) {
       // main logic #1
       console.log("1");
  } else if (x >= 0 && x < 10) {   // 2개의 조건을 다 만족시켜야 된다. true && true
       // main logic #2
      console.log("2");
  } else {
      // main logic #3
     console.log("3");
  }
  
  
• switch 문
  - 변수의 값에 따라, 여러 개의 경우(case) 중 하나를 선택하는 것
  - default & 변수가 나온다.
  - break; 값을 넣어줘야 한가지 값을 내고 빠져나온다.
  
  let fruit = "바나나2";
  
  switch (fruit) {
      case "사과":
             console.log('사과입니다');
             break;  
      case "바나나":
             console.log('바나나입니다.');
             break;
      case "키위":
             console.log('키위입니다.');
             break;
      default:
             console.log('아무것도 아닙니다.')
             break;
  }
  아무것도 아닙니다.

조건문의 중첩

let age = 20;
let gender = "여성";

// 미성년자 구분
if (age >= 18) {
   // console.log("성인입니다.");
   if (gender === "여성") {
     console.log("성인 여성입니다.")
   } else {  
     console.log("성인 남성입니다.")
   }
} else {
     if (gender === "여성") {
        console.log("미성년 여성입니다.");
     } else {
        console.log("미성년 남성입니다.");
     }
     //console.log("미성년입니다.");
}

* 중첩문을 많이 쓰는 건 코드의 가독성이 떨어지고 유지보수가 어려워서 좋지 않다.

 

조건부 실행

- && : and조건으로 이러한 패턴은 요즘 상당히 많이 쓰인다.
let x = 10;

if (x > 0) {
   console.log("x는 양수입니다.");
}

// (x > 0) && console.log("x는 양수입니다.")   
* 위에것과 같음

 

삼항 연산자와 단축평가

 - or조건 (||) 

let y; // 값을 할당하지 않아서 undefined

let z = y || 20; // y가 undefined(||)면 20으로 세팅해라

console.log(z); // z는 20

 

falsy한 값, truthy한 값

if (조건) {
    // main logic
}

 

* 전부 falsy 한 값으로 실행되지 않는다.

 

if (true) {
  console.log("hello");
}

* truthy 한 값으로 실행된다.

 

객체 

• 기본적인 객체 생성 방법
  * key - value pair
  * 하나의 변수에 여러개의 값을 넣을 수 있다.
  
  const person = {
      name : "홍길동",
      age : 30,
      gender: "남자",
      key : 모든 값이 다 올 수 있다.
  };
  
  
• 생성자 함수를 이용한 객체 생성 방법
  function person(name, age, gender) {
          this.name = name;
          this.age = age;
          this.gender = gender;
  }
  
  let person1 = new person("홍길동", 30, "남자");
  let person2 = new person("홍길순", 20, "여자");
                          ~~
  * 이런식으로 많은 객체를 한꺼번에 여러 개 생성할 수 있다.

접근하는 방법

* person 이라는 객체에서 name 이라는 속성에 접근하는 방법

console.log(person.name);  // 홍길동

console.log(person.age);  // 30
console.log(person.gender);  // 남자

 

객체 메소드 (객체가 가진 여러가지 기능 : object. ~~)
let person = {
   name: "홍길동",
   age : 30,
   gender: "남자",
};

• object.key() : key 를 가져오는 메서드 // name, age, gender
  let keys = object.keys(person);
  console.log('keys' => ", keys);
  keys => ['name', 'age', 'gender']
  
  
• values() : value 를 가져오는 메서드 // 홍길동, 30, 남자
  let  values = object.valuse(person);
  console.log("values => ", values);
  values => ['홍길동', 30, '남자']
  
  
• netries() : key와 value를 묶어서 배열로 만든 배열 (2차원 배열)
  let entries = object.entries(person);
  console.log("entries => ", entries);
  entries => [ ['name', '홍길동'], ['age', 30], ['gender', '남자'] ] 
  
  
• assign() : 객체를 복사한다.
  let newPerson = {};
  object.assign(newPerson, person) // 어디에다 복살할건지, 뭘 복사할건지
  console.log("newPerson => ", newPerson);
  newPerson => { name: '홍길동', age: 30, gender: '남자' }
  
  * 중간 값을 변경 하고 싶을 땐 중괄호를 추가하면 그것만 바뀐다.
  object.assign(newPerson, person, { age: 35 });
  newPerson => { name: '홍길동', age: 35, gender: '남자' }
    
• 객체 비교 
  - 메모리에 저장할 때 별도의 공간에 저장
  - 별도 공간에 대한 주소 (person1 과 person2 의 주소는 다르다)
  
  let person1 = {
      name: "홍길동",
      age : 30,
      gender: "남자",
  };
  
  let person2 = {
     name: "홍길동",
     age : 30,
     gender: "남자",
  };
  
  console.log( "answer1 => ", person1 === person2);
  false
  * 객체라서 각각 다른 주소에 있으므로 false
  
  let str1 = "aaa";
  let str2 = "aaa";
  
  console.log("answer2 =>, str1 === str2);
  true
  * 문자열 직접 저장하기 때문에 true 
  
  * 내용적으로 어떻게 비교하면 같을까?
   위 객체{} 를 문자열화[] 시키는 방법
  console.log(JSON.stringify(person1) === JSON.stringify(person2)) 
  
  
• 객체 병합
  - 아래 객체들을 합치는 방법
  let person1 = {
      name: "홍길동",
      age : 30,
  };
  
  let person2 = {
     gender: "남자",
  };
  
  // ... : spread operator 
  let perfectMan = {...person1, ...person2};  // 중괄호를 다 없애고 다 풀어헤쳐버리는 명령어
  console.log(perfectMan);
  { name: '홍길동', age: 30, gender: '남자' }

 

오늘 다 들으려고 했는데 너무 많고, 이해는 많이 했지만 너무 힘들어서 못 듣겠다.
오전 9시부터 팀 빌딩해서 노션 작성하고, 평가도 하고, 특강도 듣고, OT도 듣고, 강의 듣는 지금 시간이 11시가 넘었는데 개인과제는 또 언제하라는건지 모르겠다.

지금 다 들었다고 하는 사람들 물어보니까 배속 걸어서 대충 넘겨봤다더라. 전공했거나 이미 해 봤어서 이해했겠지만..

순서도 강의 먼저 듣고 팀 프로젝트를 해야 했어야 하는게 아닌가 생각이 들었다.
강의를 듣고 이런 걸 사용해서 팀 프로젝트에 접목 시켜야겠다가 아닌,

아무것도 모르는상태에서 프로젝트를 하고 '아 이걸 그때 썼었나?' 이런 생각이 드는게 아이러니 하다.

난 아직도 코드 뜯어보면 이해를 못한다. 뭐 경험삼아 해보라고 노린거면 인정

내가 느린 이유는 이렇게 작성을 안하면 이해하기 힘들고 절대 안외워지기 때문에 이렇게 강의 내용을 따라서 작성하며 해봐야 이해가 가기 때문에 내 TIL 은 이런식으로 해야한다.