포트폴리오

JavaScript에서 지원하는 데이터 타입은 크게 두 가지로 나눌 수 있습니다:

**기본형 (Primitive Type)**과 참조형 (Reference Type).

이 두 가지 타입은 메모리 관리 방식과 값 저장 방식에서 차이가 있습니다.

1. 기본형 (Primitive Type)

기본형 데이터 타입은 값 자체가 변수에 저장되는 데이터 타입입니다. 이 값들은 불변(immutable)하며, 변수에 할당된 값을 변경할 수 없습니다. 또한, 기본형은 비교 시 값만을 비교합니다.

기본형 데이터 타입:

• string: 문자열을 나타냅니다.
  • 예시: 'Hello, world!', "JavaScript"
  • 특징: 문자들의 집합이며, 불변(immutable)입니다. 즉, 문자열을 수정할 수 없습니다.
• number: 숫자 값을 나타냅니다. 정수와 부동소수점을 모두 포함합니다.
  • 예시: 42, 3.14, -10
  • 특징: 숫자는 모두 IEEE 754 표준을 따르는 부동소수점 형식으로 저장됩니다.
  • 주의: NaN (Not a Number)과 Infinity, -Infinity 등의 특수한 숫자도 존재합니다.
• boolean: 참(true) 또는 거짓(false)을 나타냅니다.
  • 예시: true, false
  • 특징: 논리값을 나타내며, 조건문에서 주로 사용됩니다.
• undefined: 변수는 선언되었지만, 값이 할당되지 않은 상태를 나타냅니다.
  • 예시: let x; // x는 undefined
  • 특징: 변수는 선언되었지만 아직 값이 할당되지 않았을 때 자동으로 undefined 값이 됩니다.
• null: 의도적인 빈 값을 나타냅니다. null은 객체가 없음을 명시적으로 나타내는 값입니다.
  • 예시: let y = null;
  • 특징: null은 "없음" 또는 "빈 값"을 의도적으로 할당할 때 사용되며, 객체가 아닌 원시 값입니다.
• symbol: 고유하고 변경 불가능한 값을 생성하는 데이터 타입입니다. 주로 객체의 키로 사용됩니다.
  • 예시: let sym = Symbol('description');
  • 특징: 유일한 값을 생성하며, Symbol() 함수로 생성합니다. 다른 값들과 구별되는 고유한 값이기 때문에 주로 객체 프로퍼티의 고유 키를 만들 때 사용됩니다.
• bigint: 큰 정수를 표현하는 데이터 타입입니다. JavaScript의 number 타입은 안전하게 표현할 수 있는 정수 범위가 제한적이지만, bigint를 사용하면 아주 큰 정수를 처리할 수 있습니다.
  • 예시: let big = 1234567890123456789012345678901234567890n;
  • 특징: 크기가 매우 큰 정수를 나타내며, 뒤에 n을 붙여서 선언합니다.
• 2. 참조형 (Reference Type)참조형 데이터 타입:
  • object: 다양한 값을 속성으로 가질 수 있는 복합적인 데이터 타입입니다. 객체는 키-값 쌍으로 이루어집니다.
    • 예시:
      javascript

      코드 복사

      let person = { name: 'Alice', age: 30 };
    • 특징: 객체는 속성(property)을 가지며, 배열, 함수, 날짜 등 다양한 형태로 확장 가능합니다.
  • array: 배열은 객체의 한 종류로, 여러 값을 순서대로 저장할 수 있는 자료구조입니다.
    • 예시:
      javascript

      코드 복사

      let numbers = [1, 2, 3, 4];
    • 특징: 배열은 인덱스를 사용하여 값을 참조하며, 배열의 크기는 동적으로 변할 수 있습니다.
  • function: 함수도 객체로 취급됩니다. 함수는 일급 객체로, 변수에 할당하거나 다른 함수의 인자로 전달될 수 있습니다.
    • 예시:
      javascript

      코드 복사

      function greet(name) { return `Hello, ${name}!`; }
    • 특징: 함수는 호출 가능한 객체로, 인자를 받아서 결과를 반환할 수 있습니다.
• 참조형 데이터 타입은 메모리 주소를 변수에 저장하는 데이터 타입입니다. 이 값들은 변경 가능(mutable)하며, 객체를 복사하거나 할당할 때 주소를 공유합니다.

3. 기본형 vs 참조형 차이점

특징기본형 (Primitive)참조형 (Reference)

결론:

• 기본형 (Primitive Type): 값 자체가 저장되고, 변경할 수 없습니다. 비교 시 값만 비교합니다.
• 참조형 (Reference Type): 주소가 저장되고, 변경할 수 있습니다. 비교 시 주소를 비교합니다.

이러한 차이점을 이해하는 것은 JavaScript에서 변수와 객체를 다룰 때 매우 중요합니다.

• while (n > 0) 반복문을 사용하여 n이 0이 될 때까지 각 자릿수를 더합니다.
  • n % 10으로 n의 마지막 자릿수를 추출하여 sum에 더합니다.
  • n /= 10으로 n에서 마지막 자릿수를 제거합니다.
• 모든 자릿수를 더한 후, sum 값을 반환합니다.

• 입력: N = 123
  • 자릿수 합: 1 + 2 + 3 = 6
• 입력: N = 987
  • 자릿수 합: 9 + 8 + 7 = 24

위 코드가 각 자릿수의 합을 계산하여 반환하는 함수입니다.

예시로 n = 123을 생각해보자!

1. n % 10 (나머지)

• n % 10은 **"나누고 남은 것"**을 말해요.
• 우리가 123을 10으로 나누면, **"10이 몇 번 들어가나?"**를 먼저 생각해요.
  • 123 ÷ 10 = 12… 3 (3이 남아요)
  • 즉, n % 10은 3이 남는 거예요.

그래서, 123 % 10은 3!

2. n / 10 (몫)

• n / 10은 **"나눈 후에 남은 큰 수"**를 말해요.
• 123을 10으로 나누면, 123에서 10이 몇 번 들어가는지 보면,
  • 123 ÷ 10 = 12… 나머지 3은 버리고 12가 남아요.

그래서, 123 / 10은 12!

예시로 더 풀어보자!

n = 987일 때:

• 987 % 10은 987을 10으로 나누면 7이 남아요! (왜냐하면 987 ÷ 10 = 98… 나머지 7)
• 987 / 10은 987을 10으로 나누면 98이 남아요! (왜냐하면 987 ÷ 10 = 98, 나머지는 버리고 몫만 남아요)

핵심:

• % 10: 마지막 자리를 남기고 싶을 때 사용해요!
• / 10: 마지막 자리를 떼어내고 나머지만 남기고 싶을 때 사용해요!

<aside> 📖 JavaScript에서 조건문을 활용하는 방법을 배우는 것이 목표입니다.

</aside>

💪🏻과제를 수행하고나 나면 할 수 있어요!

• 반복문을 사용하는 방법을 이해할 수 있습니다.
• 반복문을 사용하여 배열이나 문자열을 처리할 수 있습니다.

<aside> ⚡ Notification: 과제 시작 전 확인할 내용!

</aside>

✅ 과제 시작 전 다음 내용을 셀프 체크해보세요.

• [ ] 변수를 선언할 수 있다.
• [ ] 반복문의 조건을 제시할 수 있다.
• [ ] console.log() 를 사용할 수 있다.
• 🥚개념 한 판 요약

  ---

  • 반복문이란 무엇인가요?
    • 반복문은 특정 조건이 참인 동안 같은 코드를 여러 번 실행하는 구문입니다.
  • for 반복문
    • 주어진 횟수만큼 코드를 반복 실행합니다.
    • for (let i = 0; i < 5; i++) { console.log("Hello, World!"); }
  • while 반복문
    • 조건이 참인 동안 코드를 반복 실행합니다.
    • let count = 0; while (count < 5) { console.log("Counting: " + count); count++; }
  • do...while 반복문
    • 코드 블록을 먼저 실행한 후 조건을 검사하여, 조건이 참이면 계속 반복합니다.
    • let number = 0; do { console.log("Number: " + number); number++; } while (number < 5);
  • 중첩 반복문
    • 반복문 안에 또 다른 반복문을 포함하여 다차원 구조를 처리할 수 있습니다.
    • for (let i = 1; i <= 3; i++) { for (let j = 1; j <= 3; j++) { console.log(`i: ${i}, j: ${j}`); } }
  </aside>
• <aside> 🐣 JavaScript 반복문 개념 한판 요약!

<aside> 🍀 본격적으로 시작해 볼까요?

1. 짝수만 출력하기

• for 반복문을 사용하여 1부터 20까지의 숫자 중 짝수만 출력하세요.

<aside> 🔥 완료하셨다면?

</aside>

• 전체코드를 복사하여 퀘스트로 제출해주세요
• 데일리 퀘스트 👉 [ 링크 ] 를 클릭 하여 제출해주세요

저는 프론트엔드 신청을했고,

11월 20일날 강소영 온보딩 매니저님의 연락을 받고, 내일배움카드 자격요건에 대해 저에게 간략하게 물어보셨습니다.

지금 국민취업제도를 3년이내에 한적이있냐 했었어서 3년은 넘었지만

저는 2021년 초에 국비수업을 들었던 이력이있던터라

강소영 온보딩 매니저는 저에게 대놓고 자격요건이 안되겠는데요. 라고하시며 갑자기

"될지 안될지 모르겠다. 라고 말하시며 확인을 해보고 다시 연락주겠다고 말했습니다."

사전캠프 수업을 듣는동안에 카드신청하면되니까 스텍가입방법 및 고용 회원가입만 인증하시고, 나중에 확인후에 가입여건이 되는지 확인해보겠다.

카드신청이 될지안될지 모르겠네. 라고 하는 소리까지 정확하게 기억이납니다.

그리고 저는 지금에서야 안것은 내일배움카드신청한지5년까지 유효하다는것을 강소영매니저가 저에게 모욕을 퍼붓던 그날 당일날에

사이트에서 확인해서 알았습니다. 12월 4일날에요,

강소영 온보딩 매니저는 제가 내일바움카드신청해서 국비수업을 들었다는것을 년도수도 정확하게 제가 알려드렸음에도

카드발급이 되었다는 사실조차도 모르면서 저에게 모욕적인 말을 서슴없이 퍼부었던것입니다.

저는 강소영 온보딩 매니저의 애매모호한 발언을 믿었고, 알아보신다니까 바로 연락주시겠거니 해서 기다렸고, 사전캠프는 한달동안 진행이되는데,

수업들어가기전에 기초를 다지는거라 꼭 들으셔야한다 라고 설명해주셨어서 저도 꼭 들어야겠다생각하고 카드발급은 알아서해주시겠거니

별다른 문제가 없겠구나

생각하고 따지진않았습니다.

연락을 바로주시겠다해서 사전캠프때 참여했을때 사전캠프에서 뵜던 사전캠프 매니저님께서 카드발급 신청했냐고 물어보시길래

제가 사전캠프 매니저님께 대놓고 제가 자격 여건이 되는지 안되는지 모르겠어서 사전캠프에만 미리 참여했습니다. 라는 소리를 하기에는

이상하게 들릴거같아서 하지못하다가

2주동안 그 기억을 아예잊고 2주뒤에 즉 12월 4일날 강소영 온보딩 매니저는 기억이 났는지 시간이 다 지나고서야 전화를했습니다.

2주뒤에 저에게 카드발급이 왜 안됬냐며, 그게 지금 정상이냐며 따지며 화를냈습니다.

저는 물어보살ot를 6시30분까지 그때 하던상황던중에 끝무렵에

강소영 매니저께 전화를받은 상황이였습니다.

저는 2주간 있던일들을 거의 기억이안나는상황이였었고, 아 제가 가입신청한 캡처본만있따고 하니까

강소영 온보딩 매니저님은 이게 왜 여기에 있냐며 저에게 캡처잘못한거 아니냐며 따지다가 자기도 왜 이걸 봤는지 기억이 안난다고 했습니다.

본인이 그렇게 화가 났으면서 기억도 제대로 못하는게 어이가없어서, 제가 저번에 자격요건이 안될수도있다고 확인해보신다고 하시지않았냐 하니까

그건 000님이 하셔야죠 제가 그걸 왜 확인하나요? 카드발급못하세요?

카드발급신청만하면되는데 무슨소리냐며 이상하게 말을 돌렸습니다.

자격요건이안되서 카드발급이 안될수도있다고 본인입으로 말한기억을 전혀 기억을 못하시고 고용사이트에서 회원가입 캡처본만 보내란것도 기억도 못하는게 너무 황당합니다.

그래놓고 자기도 캡처본이 왜 회원가입내역만 보고 내가 왜 넘겼지 하고 아 이건 저도 확인을 잘 못해서 미안하네요 라고 하며 이상한 소리를 했습니다.

그래놓고 저보고 카드발급은 위에제가 스텍창에 올렸는데 그걸왜 모르냐면서 도리어 저에게 계속화를내다가

모욕적인 말을 한것입니다.

1️⃣ 논리형

• 논리형(boolean)은 참(true)과 거짓(false)을 나타내는 자료형입니다.

• 비교 연산은 결과로 논리형을 반환합니다.

const a = 5;
const b = 2;
console.log(a > b);

// 결과
true

const a = 5;
const b = 2;
console.log(a < b);

// 결과
false

⚠️ 여기서 잠깐!

• 결과를 변수에 담아서 사용할 수도 있습니다.

const a = 10;
const b = 5;

// a가 b보다 큰지 비교
const isAGreaterThanB = a > b; // true
console.log(isAGreaterThanB);

// 결과
true

• 14강에서 배울 조건문에서 활용할 수 있습니다.

const a = 10;
const b = 5;

const isAGreaterThanB = a > b; // true

// 조건에 따라 다른 동작 수행
if (isAGreaterThanB) {
  console.log('a는 b보다 큽니다.');
} else {
  console.log('a는 b보다 크지 않습니다.');
}

// 결과
a는 b보다 큽니다.

2️⃣ typeof 연산자

typeof operand;

• typeof 연산자는 피연산자의 자료형(데이터 타입)을 문자열로 반환합니다.

const str = 'JavaScript';
console.log(typeof str);

// 결과
string

const num = 5;
console.log(typeof num);

// 결과
number

const bool = true;
console.log(typeof bool);

// 결과
boolean

let undef; // 초기화 안 함
console.log(typeof undef);

// 결과
undefined

3️⃣ undefined와 null

• undefined와 null 모두 값이 없음을 나타내지만 구체적인 의미가 다릅니다.

undefined

• undefined는 아직 값이 할당된 적이 없음을 나타냅니다.

• 변수 선언 후 초기화하기 전에 시스템이 자동으로 할당하는 변수의 기본값입니다.

let foo;
console.log(foo); 

// 결과
undefined

console.log(typeof undefined); 

// 결과
undefined

null

• null은 ‘값이 없음’을 나타내기 위해 개발자가 명시적으로 할당하는 값입니다.

• ‘빈 값’ 또는 ‘유효하지 않은 값’을 설정할 때 사용합니다.

let bar = null;
console.log(bar);

// 결과
null

console.log(typeof null); 

// 결과
object

• null의 타입이 object로 표시되는 것은 언어 설계 초기의 버그 때문입니다.

• 변수의 값이 null인지 확인할 때는 일치 연산자( === )로 null과 같은지 명시적으로 확인합니다.

 undefined  : 변수를 선언하고 값을 지정하지 않았을 때 자동으로 부여 되는값.

null : 값이 없다.

undefined 값이 할당된적이 없다. 자동으로 지정

null : 자동으로 지정하는게 아니고, 값을 지우고 싶을때 사용, 의도적으로 매기는 값임