[React] Day_16 데일리 정리

ㅊ..칫 강하다..

 

나 림졍. 강의정리 TIL 작성 웅덩이에 허우적된지.. 어느덧 12일차..

이 강의를 조금 더 일찍 배웠다면.. 조금 더 잘할 수 있었지 않았을까..?😞

(떠오르는 과거의 헤딩했던 나으ㅣ 모습...🤦🏻‍♂️)

여튼 과거의 나는 세상 친절하게 이것저것 끄적여 주었기에.. 🤷🏻‍♂️

오늘도 정리를 시작해보도록 하죠. 레츠고.

 

JavaScript (자바스크립트) 강의 정리

 

JS의 역사

• 1995년에 탄생한 브라우저 동작 스크립트 언어
• 프론트엔드 및 백엔드 개발 분야에서 널리 사용되며, Node.js를 이용한 서버 개발 활성화 ↑↑

JavaScript 문법 정리 (1) - 변수와 상수

• 변수의 개념 (5)

1. 변수의 이름 : 저장된 값의 고유 이름. 
2. 변수값 : 변수에 저장된 값
3. 변수 할당 : 변수에 값을 저장하는 행위
4. 변수 선언 : 변수를 사용하기 위해 컴퓨터에 알리는 행위
5. 번수 참조 : 변수에 할당된 값을 읽어오는 것 

• 변수 선언 메서드 (3) - var, let, const
  * 차이점 = 동일 이름으로 변수 덮어쓰기 가능 (var) , 할당된 값에 재할당 가능 (var, let)
  +) 이해를 돕기 위해 아래의 예시를 데려와봤다,, 참고하자.

// var로 변수 덮어쓰기
var myVar = "Hello";
var myVar = "World";
console.log(myVar); // "World"

// let으로 변수 덮어쓰기
let myLet = "Hello";
myLet = "World"; // 기존 값을 덮어쓰기
console.log(myLet); // "World"

// const로 상수 선언 후 값 변경하기
const myConst = "Hello";
myConst = "World"; // 오류 발생
console.log(myConst);

 

JavaScript 문법 정리 (2) - 데이터 타입과 형 변환

 

[데이터 타입]

• 런타임에 의해 결정 → 실제 터미널에서 코드가 실행될 때 결정
•  typeof : 데이터 타입을 확인할 수 있는 타입 연산자
  (원시 자료형의 경우, 자료형의 이름 출력 / 객체나 함수의 경우, "object" 또는 "function" 출력)
  +) typeof null의 경우 "object"를 반환하는 버그 존재

1) 숫자 타입 - Typeof 가 'number' 로 출력되는 타입

 

- 정수형

let num1 = 10;
console.log(typeof num1); // number

 

- 실수형

let num2 = 3.14;
console.log(num2);
console.log(typeof num2); // number

 

- 지수형 타입

let num3 = 2.5e5;
console.log(num3);
console.log(typeof num3); // 2.5 x 10^5, number

 

+) NaN(Not a Number) : 숫자가 아님을 나타내는 값

let num4 = "hello" / 2;
console.log(num4) // NaN

 

 

+) Infinity / -Infinity : 결과값이 무한이면 출력됨

let num5 = 1/0;
console.log(num5);
console.log(typeof num5); // Infinity

let num6 = -1/0;
console.log(num6);
console.log(typeof num6); // -Infinity

 

2) 문자 타입 - Typeof 가 'string' 으로 출력되는 타입

• 문자열 = "(내용)" or '(내용)' 을 넣으면 완성!

 

- length : 문자열 길이 출력

let str = "나는 림졍";

console.log(str.length); // 5

 

- concat(concatenation) : 문자열 결합

let str1 = '나는';
let str2 = '림졍';
let result = str1.concat(str2);
console.log(result); // 나는림졍

 

- substr / slice : 문자열 자르기 (but, substr는 이제 작대기가 그어진 친구니 쓰지말자.)

let str3 = "나는 얼렁뚱땅 림졍";
console.log(str3.length); //10
console.log(str3.substr(0,7)); // 0번째부터 7번째 문자까지 잘라! = 나는 얼렁뚱땅
console.log(str3.slice(8,10)); // 8번째부터 10번째 문자까지 잘라! = 림졍

 

- search : 문자열 찾기 

let str4 = "나는 얼렁뚱땅 림졍";
console.log(str4.search("림졍")); // 8 = 찾고자 하는 문자열은 8번째부터임

 

- replace : 특정 문자열 대체

let str5 = "나는 얼렁뚱땅 림졍";
let result1 = str5.replace("얼렁뚱땅", "얼레벌레"); 
console.log(result1); // 나는 얼레벌레 림졍

 

- split : 문자열 분할

let str6 = "사과, 딸기, 바나나";
let result2 = str6.split(",");
console.log(result2); // [ '사과', ' 딸기', ' 바나나' ]

 

3) 기타.. (겟..게겟.. 겟어깉...ㅇr)

 

- bool (불리언, Boolean) : 참(true)과 거짓(false)을 출력, if / for문 & 논리 연산자와 함께 사용

let bool1 = true;
let bool2 = false;

console.log(bool1); // true
console.log(typeof bool1); // boolean
console.log(bool2); // false
console.log(typeof bool2); // boolean

 

- undefined : 할당된 변수가 없어요. 아니 그냥 '없다'구요.

let x;
console.log(x); // undefined

 

- null : 값이 없어요. 아예 '존재'하지 않아요!

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

 

- array : 여러 데이터를 순서대로 저장, [ ]를 사용, 배열의 시작은 0부터 ~.~ (컴퓨터는 0이 제일 앞임)

let number = [1, 2, 3, 4, 5];
let fruits = ['apple', 'banana' , 'orange'];

 

 

[형변환 (= 대충 형태를 바꾼다는 뜻)]

 

1) 암시적 형 변환(implicit coercion) : 일반적으로 연산자를 사용할 때 발생

 

- 문자열

let result1= 1+"2";
console.log(result1); // 12
console.log(typeof result1); // string

let result2 = "1" + true;
console.log(result2); // 1true
console.log(typeof result2); // string (연산자 사용 시, 문자열 -> 숫자로 변환)

// {}, null, undefined랑 합치면 문자열이 된다.

 

- 숫자

let result3 = 1 - "2";
console.log(result3); // -1
console.log(typeof result3); // number

result4 = "2" * "3";
console.log(result4); // 6
console.log(typeof result4); // 넘버 사칙 연산 시에는 숫자가 우선시가 된다.

result5 = 4 + +"5";
console.log(result5); // 9, 비거나 공백 문자열 = 0 으로 변환

 

- 불리언

// All false 인 경우
console.log(Boolean(0));
console.log(Boolean("")); // 빈 문자열
console.log(Boolean(null));
console.log(Boolean(undefined));
console.log(Boolean(NaN));

// 안에 문자가 있거나, 객체 존재 시, true
console.log(Boolean("false"));
console.log(Boolean({}));

 

 

2) 명시적 형 변환(explicit coercion) : 개발자가 직접 자료형을 변환

 

- 문자열 변환 (모든 변수를 문자열로 바꿔봐요!)

let result6 = String(123);
console.log(result6); // 123
console.log(typeof result6);// string

let result7 = String(true);
console.log(result7); // true
console.log(typeof result7); // string

let result8 = String(false);
console.log(result8); // false
console.log(typeof result8); // string

let result9 = String(undefined);
console.log(result9); // undefined
console.log(typeof result9); // string

let result10 = String(null);
console.log(result10); // null
console.log(typeof result10); // string

 

- 숫자 변환 (문자열을 숫자로 바꿔봐요!)

let result11 = Number("123");
console.log(result11); // 123
console.log(typeof result11); // number

 

JavaScript 문법 정리 (3) - 연산자

 

[산술 연산자]

• "+" 를 제외한 모든 연산자는 숫자 먼저임.

- 더하기 연산자 ( + )

console.log(1+1); // 2
console.log(1+"1"); // 11

 

- 빼기 연산자 ( - )

console.log(1-2); // 0
console.log(1-"2"); // -1

 

- 곱하기 연산자 ( * )

console.log(2*3); // 6
console.log("2" * 3); // 6

 

- 나누기 연산자 ( / ) 

console.log(4/2); // 2
console.log("4"/2); // 2

 

- 나머지(= in 나눗셈) 연산자 ( % )

console.log(5%2); // 1

 

 

[할당 연산자]

 

- 등호 연산자 ( = )

let x = 10;
console.log(x); // 10

 

- 더하기 등호 연산자 ( += )

let x = 10;
x += 5; // x값에 +5
console.log(x); // 15

 

- 빼기 등호 연산자 ( -= )

let x = 10;
x -= 5; // x 값에 -5
console.log(x); // 5

 

- 그 외

// 곱하기 연산자 ( *= )
let x = 10;
x *= 5;
console.log(x);   // 50

// 나누기 등호 연산자 ( /= )
let x = 10;
x /= 5;
console.log(x);   // 2

// 나머지 등호 연산자 ( %= )
let x = 10;
x %= 3;
console.log(x);   // 1

 

 

[비교 연산자 (매우 중요!)]

• true / false 등을 반환

- 일치 연산자 ( === )  →  자료형까지 완전히 일치해야 true (매우 깐깐한 친구 1)

console.log(2===2); // true
console.log(2==="2"); // false

 

- 불일치 연산자 ( !== ) →  자료형까지 완전히 일치해야 false (매우 깐깐한 친구 2)

console.log(2!==2); // 둘이 다름? ㄴ! false
console.log("2"!==2); // true

 

- 작다 연산자 ( < ) →  두 값 비교 가능 (숫자와 문자열 혼용 시, 문자열 = 숫자 변환)

console.log(2 < 3);   // true
console.log(2 < "3");   // true
console.log("2" < 3);   // true

 

- 크다 연산자 ( > ) = 작다 연산자와 같다.

console.log(2 > 3);   // false
console.log(2 > "3");   // false
console.log("2" > 3);   // false

 

- 그 외

// 작거나 같다 연산자 ( <= )
console.log(2 <= 3);   // true
console.log(2 <= "3");   // true
console.log("2" <= 3);   // true
console.log(2 <= 2);   // true

// 크거나 같다 연산자 ( >= )
console.log(2 >= 3);   // false
console.log(2 >= "3");   // false
console.log("2" >= 3);   // false
console.log(2 >= 2);   // true

 

 

[논리 연산자]

 

- 논리곱 연산자 ( && ) →  앞과 뒤 all true 여야 true. (깐깐)

console.log(true && true);   // true
console.log(true && false);   // false
console.log(false && true);   // false
console.log(false && false);   // false

 

- 논리합 연산자 ( || ) →둘 중 하나라도 true 여야 true. (널널)

console.log(true || true);   // true
console.log(true || false);   // true
console.log(false || true);   // true
console.log(false || false);   // false

 

- 논리부정 연산자 ( ! ) → 값을 리버스함.. 앞에 '!' 붙여주면 끝.

console.log(!true);
let l = true;
console.log(!l); // false

 

 

[삼항 연산자 (활용 빈도 겁나 많음... 살려줘..)]

• 조건에 따라 값 선택 가능, 항이 3개.
• true의 경우 앞에 false를,  false인 경우 뒤에 false 쓴다. 

let x = 10;
let result = (x > 5) ? "크다" : "작다";
console.log(result);   // "크다"

let y = 20;
let result2 = (y<10) ? "작다" : "크다";
console.log(result2); // 크다

 

 

마무리 (림졍의 TIL 비하인드 이야기..)

여러분.. 미...ㅁ...미리 사과드립니당...

 

할일은 다 했지만.. 막상 리마인드 하면서 정리하려니 함수 못했죠? 🥲

그리고 여러분 TIL이 최근 짧아졌지 않나요..? 정답입니둥...

놀랍게도 매일매일 작성하려다 보니 열정이 간소화된것도 있고..

이런말 하기 조금 그렇지만.. 점점 갈수록 기운이 빠져버린것도 있습니다..😞

(초심을 잃은건 아닌데, 이곳저곳 기가 빨려서 그런가.. 쉽지않은 나날이 지속되는중.. ㅠㅡㅠ)

ㄴ...내일까진 장담할 수 없지만 다음주가 되기 전까지는 기운을 차릴 수 있지 않을까..?

멀쩡해져서 돌아오도록.. 건강관리 잘해야지 끄응...

그럼 20000. ⭐️

 

 

 

 

 

아 1주차 내일까지 적고.. 2주차 주말에 적어야겄다.. 🤦🏻‍♂️