24.12.23_TIL

 

🗓️TODAY

• 새로운 팀
  어디서십이야_12조
  
  
• REACT
  JavaScript 문법 종합반 강의 1주차

• UXUI 집중반 1day
  나의 삶의 목표를 만다라트 혹은 비전보드로 나타내기

 

📌어디서십이야_12조

이번엔 12조

 

레퍼런스 찾는 거 좋아하는 걸 어찌 아시고....

 

 

📌UXUI 집중반

루돌프들 공연하는 거 구경하는 나 자신

 

첫 수업은 나의 삶의 목표를 만다라프 혹은 비전보드로 나타내기

짤의 광기가 느껴지는 나의 비전보드

 

아무래도 쿠팡 장기 근무자인지라 물류센터 쪽 프로세스를 알고 있는 것이

나의 강점이 될 것 같아서 (튜터님 면담 때 얻은 나의 목표 ㅎㅎ)

이커머스 쪽으로 취업하는게 나의 목표다.

 

할 수 있다, 라는 내 마음가짐을 나타내는 짤들로 둘러쌓인 내 목표를

비전보드로 나타내 보았다.

(이제보니 짤의 광기가 좀 부담스럽...)

 

📒[JS 문법 종합반] 1주차 : 자바스크립트 기본 문법

변수 (Variable)

• 변수 이름: 변수에 저장된 값을 나타내는 고유 이름.
• 변수 값: 변수에 저장된 데이터.
• 변수 할당: 값을 변수에 저장하는 과정.
• 변수 선언: 변수를 사용하기 위해 컴퓨터에 알리는 작업.
• 변수 참조: 변수의 값을 읽는 행위

 

 

데이터 타입

1. 숫자

1-1. 정수(Integer): 소수점이 없는 숫자.
let num1 = 10;
console.log(num1); // 10
console.log(typeof num1); // "number"

1-2. 실수(Float): 소수점이 있는 숫자.
let num2 = 3.14;
console.log(num2); // 3.14
console.log(typeof num2); // "number"

1-3. 지수형(Exponential): 큰 수 또는 작은 수를 표현할 때 사용.
let num3 = 2.5e5; // 2.5 x 10^5
console.log(num3); // 250000
console.log(typeof num3); // "number"

1-4. NaN (Not a Number): 숫자가 아닌 연산 결과.
let num4 = "Hello" / 2;
console.log(num4); // NaN
console.log(typeof num4); // "number"

1-5. Infinity: 0으로 나눌 때 발생.
let num5 = 1 / 0;
console.log(num5); // Infinity
console.log(typeof num5); // "number"

 

 

2. 문자열(String)

문자열은 문자의 나열입니다. 작은 따옴표(')나 큰 따옴표(")로 감싸서 표현합니다.
let str = "Hello, world!";
//console.log(str);
//console.log(typeof str);

2-1. 문자열 길이(length) 확인하기
console.log(str.length);

2-2. 문자열 결합(concatenation) concat=concatenation
let str1 = "Hello, ";
let str2 = "world!";
let result = str1.concat(str2);
//console.log(result);

2-3.문자열 자르기(substr, slice)
let str3 = "Hello, world!";
//console.log(str.substr(7, 5));     7,5 > (Hello, )일곱번째부터 5개까지만 > world
//console.log(str.slice(7, 12));     7,12> 일곱번째부터 12(d가 12)까지 > world

2-4. 문자열 검색(search)
let str4 = "Hello, world!";
//console.log(str4.search("world")); // 7 > world가 몇번째부터 시작되는가

2-5. 문자열 대체(replace)
let str5 = "Hello, world!";
let result01 = str5.replace("world", "JavaScript");
//console.log(result01); // "Hello, JavaScript!"

2-6. 문자열 분할(split)
let str6 = "apple, banana, kiwi";
let result02 = str.split(",");
console.log(result02); // ["apple", " banana", " kiwi"]

 

3. 불리언(Boolean)

불리언 데이터 타입은 참(true)과 거짓(false) 값을 표현합니다.

• 논리적인 조건을 판단할 때 사용됩니다.
• 데이터 타입 확인 시 "boolean"으로 반환됩니다.

 

let bool1 = true;
let bool2 = false;

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

 

논리 연산자와 조건문

불리언은 조건문과 함께 자주 사용됩니다.

 

논리 연산자

1. && (AND): 둘 다 참일 때 참.
2. || (OR): 둘 중 하나만 참이면 참.
3. ! (NOT): 현재 값을 반대로 변경.

4.undefined

• 값이 할당되지 않은 변수를 나타냅니다.
• 변수를 선언했지만 초기화하지 않으면 undefined가 기본값으로 설정됩니다.

//un : not, 
//define : 정의하다
let x;
// console.log(x);

 

 

5.null

• 값이 "없음"을 의도적으로 나타내는 값입니다.
• undefined와는 다릅니다.
  • undefined: 값이 아직 정의되지 않음.
  • null: 값이 의도적으로 비워짐.

//null : 값이 존재하지 않음을 '명시적'으로 나타내는 방법
//null = undefined
let y = null;
// console.log(y);

 

6.객체 (Object)

• **속성(property)**과 **메서드(method)**를 가지는 컨테이너.
• 중괄호 {}를 사용하여 생성됩니다.

//object(객체) : key-value pair
let person - {
     name : 'choi',
     age: 20,
     isMarried: true,
};
//console.log(typeof person);

 

 

7.배열 (Array)

• 여러 데이터를 순서대로 저장하는 데이터 타입.
• 대괄호 []를 사용하여 생성됩니다.

//array(배열)
//여러 개의 데이터를 순서대로 저장하는 데이터 타입
let numbers = [1, 2, 3, 4, 5];
let fruits = ['apple', 'banana', 'orange'];

 

 

형 변환

자바스크립트에서는 암시적 형 변환과 명시적 형 변환을 통해 데이터 타입을 변환할 수 있습니다.

암시적 형 변환 (Implicit Coercion)

자바스크립트가 자동으로 데이터 타입을 변환하는 경우입니다.

1. 문자열 변환

다른 자료형이 문자열과 함께 연산되면, 자동으로 문자열로 변환됩니다.

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

let result2 = "1" + true;
console.log(result2);
console.log(typeof result2);

//{ }, null, undefined + "1" =>문자열

 

 

2.숫자 변환

수학 연산이 필요할 경우, 문자열이 숫자로 변환됩니다.

빈 문자열의 숫자 변환

• "" 또는 " " → 0

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


let result4 = "2" * "3";
//console.log(result4);
//console.log(typeof result4);

 

 

3. 불리언 변환

불리언으로 변환될 때는 "Truthy"와 "Falsy" 값으로 구분됩니다.

Falsy 값

아래 값들은 모두 false로 변환됩니다.

• 0, "", null, undefined, NaN

Truthy 값

그 외의 값은 모두 true입니다.

 

console.log(Boolean(0));  //false
console.log(Boolean(""));  //false
console.log(Boolean(null));  //false
console.log(Boolean(undefined));  //false
console.log(Boolean(NaN));  //false
console.log(Boolean("--------------"));
console.log(Boolean("false")); //true
console.log(Boolean({}));  //true

 

 

명시적 형 변환(explicit coercion)

개발자가 직접 자료형을 변환하는 방식입니다

1. 문자열 변환

String() 함수나 toString() 메서드를 사용하여 문자열로 변환합니다.

 

let result5 = String(123);
console.log(typeof result5);
console.log(result5);

let result6 = String(true);
console.log(typeof result6);
console.log(result6);

let result7 = String(false);
console.log(typeof result7);
console.log(result7);

let result8 = String(null);
console.log(typeof result8);
console.log(result8);

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

 

2. 숫자 변환

Number() 함수를 사용하여 숫자로 변환합니다.

 

let result10 = Number("123");
console.log(result10);
console.log(typeof result10);

 

주의: 숫자로 변환되지 않는 경우

문자열에 숫자가 아닌 내용이 포함되어 있으면 NaN을 반환합니다.

console.log(Number("123abc"));  // NaN
console.log(Number(undefined)); // NaN

 

 

 

연산자 (Operators)

자바스크립트는 다양한 연산자를 제공하며, 이들로 변수와 상수를 여러 방식으로 조작할 수 있습니다.

 

산술 연산자(arithmetic operators)

1.더하기 연산자(+)

+ 연산자는 숫자의 합을 계산하거나, 문자열을 결합합니다.
console.log(1 + 1);     //2
console.log(1 + "1");   // 11

• 숫자와 문자열이 함께 사용되면, 숫자가 문자열로 변환된 후 결합됩니다.

 

2.빼기 연산자(-)

- 연산자는 숫자를 빼거나, 문자열을 숫자로 변환 후 연산합니다.

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

 

• 숫자와 문자열이 함께 사용되면, 문자열이 숫자로 변환됩니다.
• 숫자로 변환할 수 없는 문자열은 NaN을 반환합니다.

 

3.곱하기 연산자(*)

* 연산자는 숫자를 곱하거나, 문자열을 숫자로 변환 후 연산합니다.

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

 

• 숫자와 문자열이 함께 사용되면, 문자열이 숫자로 변환됩니다.
• 숫자로 변환할 수 없는 문자열은 NaN을 반환합니다.

 

4.나누기 연산자(/)

/ 연산자는 숫자를 나누거나, 문자열을 숫자로 변환 후 연산합니다.
console.log(4 / 2);     //2
console.log("4" / 2);   // 2

• 숫자와 문자열이 함께 사용되면, 문자열이 숫자로 변환됩니다.
• 숫자로 변환할 수 없는 문자열은 NaN을 반환합니다.

5. 나누기 연산자(/) vs 나머지 연산자(%)

% 연산자는 두 숫자의 나머지를 반환합니다.
console.log(5 / 2);     //2.5
console.log(5 % 2);   // 1

 

• 숫자와 문자열이 함께 사용되면, 문자열이 숫자로 변환됩니다.
• 숫자로 변환할 수 없는 문자열은 NaN을 반환합니다.

 

특징 요약

 

• 산술 연산자는 숫자를 다루는 기본적인 연산을 수행합니다.
• 문자열과 숫자가 함께 연산될 경우,
  • + 연산자는 문자열로 변환 후 결합.
  • -, *, /, % 연산자는 숫자로 변환 후 연산.
• 숫자로 변환할 수 없는 문자열은 NaN을 반환합니다.

 

할당 연산자 (Assignment Operators)

할당 연산자는 변수에 값을 할당하거나, 기존 값을 업데이트하는 데 사용됩니다.

 

1. 등호 연산자 (=)

= 연산자는 변수에 값을 할당합니다.

 

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

+= 연산자는 변수에 값을 더한 후, 그 결과를 변수에 다시 할당합니다.

 

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

-= 연산자는 변수에서 값을 뺀 후, 그 결과를 변수에 다시 할당합니다.

 

4. 곱하기 등호 연산자 (*=)

*= 연산자는 변수에 값을 곱한 후, 그 결과를 변수에 다시 할당합니다.

 

5. 나누기 등호 연산자 (/=)

/= 연산자는 변수를 값을 나눈 후, 그 결과를 변수에 다시 할당합니다.

 

6. 나머지 등호 연산자 (%=)

%= 연산자는 변수의 값을 나눈 나머지를 변수에 다시 할당합니다.

 

특징 요약

1. **기본 할당 연산자 (=)**는 변수를 초기화하거나 값을 재할당할 때 사용됩니다.
2. 복합 할당 연산자 (+=, -=, *=, /=, %= 등)는 계산 후의 결과를 다시 변수에 할당할 때 사용됩니다.
3. 복합 연산은 간결하게 코드를 작성할 수 있게 도와줍니다.

 

비교 연산자 (Comparison Operators)

비교 연산자는 두 값이나 표현식을 비교하여 true 또는 false를 반환합니다.

 

1. 일치 연산자 (===)

값과 자료형이 모두 같은 경우에만 true를 반환합니다.

 

2. 불일치 연산자 (!==)

값이나 자료형이 하나라도 다른 경우에 true를 반환합니다.

 

3. 작다 (<) 연산자

왼쪽 값이 오른쪽 값보다 작은 경우에 true를 반환합니다.

 

4. 크다 (>) 연산자

왼쪽 값이 오른쪽 값보다 큰 경우에 true를 반환합니다.

 

5. 작거나 같다 (<=) 연산자

왼쪽 값이 오른쪽 값보다 작거나 같은 경우에 true를 반환합니다.

 

6. 크거나 같다 (>=) 연산자

왼쪽 값이 오른쪽 값보다 크거나 같은 경우에 true를 반환합니다.

 

특징 요약

1. 자동 형변환: 문자열과 숫자를 비교할 경우, 자바스크립트는 문자열을 숫자로 변환합니다.
   예) "3" < 5는 true (문자열 "3"이 숫자 3으로 변환됨).
2. 엄격한 비교: ===와 !==는 값뿐 아니라 자료형까지 엄격하게 비교합니다.
   예) 2 === "2"는 false.
3. 일반 비교: <, >, <=, >=는 자동으로 형변환을 수행합니다.
   예) "2" > 1은 true.

 

논리 연산자 (Logical Operators)

1. 논리곱(&&) 연산자

논리곱 연산자는 **양쪽 값이 모두 true인 경우에만 true**를 반환합니다.

• 단락 평가(short-circuit evaluation): 왼쪽 값이 false일 경우, 오른쪽 값을 평가하지 않고 false를 반환합니다.
  예) false && someFunction() → someFunction()은 호출되지 않음.

 

2. 논리합(||) 연산자

논리합 연산자는 **양쪽 값 중 하나라도 true인 경우 true**를 반환합니다.

• 단락 평가(short-circuit evaluation): 왼쪽 값이 true일 경우, 오른쪽 값을 평가하지 않고 true를 반환합니다.
  예) true || someFunction() → someFunction()은 호출되지 않음.

 

3. 논리부정(!) 연산자

논리부정 연산자는 true를 false로, false를 true로 반전시킵니다.

• 단일 값에 대해 사용하며, 결과를 반대로 뒤집습니다.
  예) !true → false, !(5 < 3) → true.

 

특징 요약

1. && (AND): 둘 다 true일 때만 true.
2. || (OR): 둘 중 하나라도 true면 true.
3. ! (NOT): 값을 반전.

 

삼항 연산자 (Ternary Operator)

삼항 연산자는 조건식을 기반으로 값을 선택할 수 있는 간단한 방법입니다.

자바스크립트에서 삼항 연산자는 조건 ? true일때의 값 : false일때의 값 형태로 사용됩니다.

 

• (x > 5)가 **true**일 경우 "크다"가 반환됩니다.
• (x > 5)가 **false**일 경우 "작다"가 반환됩니다.

1. 삼항 연산자(?:)

let x = 10;

let result = (x > 5) ? "크다" : "작다";

console.log(result); // "크다"

 

타입 연산자 (Type Operators)

타입 연산자는 변수나 값의 자료형을 확인하는 데 사용됩니다. 자바스크립트에서 가장 자주 사용되는 타입 연산자는 **typeof**입니다.

 

 

typeof 연산자는 값의 자료형을 반환합니다.

• 원시 자료형 (number, string, boolean, undefined)에 대해서는 해당 자료형의 이름을 문자열로 반환합니다.
• 객체와 배열은 "object"로 반환됩니다. 배열도 객체의 일종이기 때문에 "object"가 출력됩니다.
• 함수는 "function"으로 반환됩니다.

주요 반환 값

1. 원시 자료형:
   • number : 숫자 타입 (예: 123)
   • string : 문자열 타입 (예: "hello")
   • boolean : 불리언 타입 (예: true, false)
   • undefined : 정의되지 않은 값 (예: 변수 선언 후 값이 할당되지 않은 경우)
2. 객체 및 배열:
   • object : 객체 타입 (예: {}, []는 객체로 처리됨)
3. 함수:
   • function : 함수 타입 (예: function() {})

주의사항

• null: typeof null의 결과는 **"object"**입니다. 이는 자바스크립트의 버그로 알려져 있습니다.

typeof 연산자 사용 시 유용한 팁

1. 객체와 배열 구분: typeof는 배열을 "object"로 반환하기 때문에, 배열인지 확인하려면
   **Array.isArray()**를 사용해야 합니다.
2. 함수 확인: typeof는 함수를 "function"으로 구별할 수 있으므로, 함수인지 확인할 때 유용합니다

 

 

 

🤔 오늘의 회고

 

머리가 아파온다.... 😵‍💫

첫날부터 고난이라니, 3주를 어떻게 인내하면서 공부해야하는가.

 

열심히 메모장에 적으면서 이해를 해보려고 하고 있지만

그게 그거 같아 보이기 시작했다.

 

1주차는 거뜬히 해낼 수 있을 거라 생각했는데

이 속도라면 이번주에 java 강의 다 못 들을지도 모르겠다.

(힘내자 ㅠㅠ)