자료구조 공부 시, 정렬을 제일 먼저 공부하는 이유?

정렬 알고리즘을 공부하는 것은 단순히 데이터를 정렬하는 방법을 배우는 것 이상의 의미가 있습니다. 다양한 알고리즘들의 특징을 이해하고, 어떤 상황에서 어떤 알고리즘이 가장 효율적인지 판단할 수 있는 능력이 중요합니다. 예를 들어 Big O 는 알고리즘의 효율성을 나타내는 지표인데, 이는 입력값의 크기에 따라 알고리즘이 얼마나 많은 시간이 걸리는지를 나타냅니다. 예를 들어 선택 정렬(Selection Sort), 삽입 정렬(Insertion Sort), 버블 정렬(Bubble Sort) 의 경우 시간 복잡도는 O(n^2) 입니다. 이는 입력 데이터의 크기가 n일 때, 최대 n^2 만큼의 시간이 소요됨을 의미합니다. 이들은 구현이 쉬워서 작은 데이터 집합에는 적합하지만, 큰 데이터에는 비효율적이다. 큰 데이터에 더 효율적인 알고리즘을 사용하고자 한다면, 병합 정렬이나 퀵 정렬 과 같은 것을 사용한다면 이는 O(n log n)의 시간 복잡도를 가지는데, 이는 동일한 크기를 입력하는데 있어 훨씬 더 빠른 속도로 실행될 수 있다는 것을 의미합니다.

교환(swap)

교환(swap)은 두 변수의 값을 교환하는 연산입니다.

라이브러리 함수인 std::swap을 사용

#include <algorithm>
int main() {
    int a = 10, b = 20;
    std::swap(a, b);
}

algorithm 헤더를 사용하여 swap 함수를 사용할 수 있습니다. 만약 헤더를 사용하지 못하는 상황일 경우, 값을 잠시 내려놓을(임시로 저장) 변수를 만들어 a와 b의 값을 교환합니다.

int main() {
    int a = 10, b = 20;
    int temp;

    temp = a;
    a = b;
    b = temp;
}

swap은 정렬에서 순서를 변경하여 데이터를 정렬할 때 필요합니다. 예를 들어, 배열의 두 요소를 교환해야할 때 주로 swap 연산이 사용됩니다.

선택 정렬(Selection Sort)

• 정렬 맨 앞에서 부터 정렬을 완성해 나가는 정렬 방식입니다. 배열에서 최솟값을 찾아 맨 앞부터 둔다.
• 일반적으로 데이터의 교환이 이동 작업보다 복잡하다.

void selectionSort(int* arr, int size) {
    int i, j, minIdx, temp;

    for (i = 0; i = size - 1; i++) // 정렬기준
        {
        minIdx = i;
        for(j = i + 1; j < size; j++) // 비교
            {
            if (arr[j] < arr[minIdx]) // 비교 값이 최소값보다 작다면
                {
                minIdx = j;
                }
            }
            swap(int

삽입 정렬(insertion sort)

• 자료 배열의 모든 요소를 앞에서부터 차례대로 이미 정렬된 배열 부분과 비교하여, 자신의 위치를 찾아 삽입하는 정렬
• 삽입을 위해 선택한 값을 임시변수에 저장한다.
• 내부 반복문은 삽입 위치를 찾을 때까지 임시 변수의 값과 비교한다.

void insertion(int* pArr, int size)
{
    int i, j, temp;

    for (i = 1; i < size; i++) // 인덱스 [1]번째부터 배열 끝까지 반복
    {
        temp = pArr[i]; // temp 변수 초기화
        for (j = i; j > 0 && (pArr[j-1] > temp); j--) // 정렬하고자 하는 index가 i이기 때문에 j = i, j가 0보다 크고, 임시변수에 넣은 인덱스가 j - 1보다 작을 때
        {
            pArr[j] = pArr[j - 1]; // 그 전값을 뒤로 미룬다.
        }
        pArr[j] = temp;
    }
}

버블 정렬(bubble sort)

• 서로 인접한 2개의 요소를 비교, 정렬하는 알고리즘
• 일반적으로 데이터의 교환이 이동 작업보다는 복잡하다.
• 공간 복잡도 : O(1) -> 한 개의 임시 변수가 필요하다.

void bubble(int* pArr, int size)
{
    int i, j;

    for (i = 0; i < size - 1; i++) //패스 횟수
    {
        for (j = 0; j < size - 1 - i; j++) //비교 횟수
        {
            if (pArr[j] > pArr[j + 1])
            {
                swap(int, pArr[j], pArr[j + 1]);
            }
        }
    }
}

다른 함수의 인자로 전달되는 함수

function main(callback) {
  callback();
}

main(function() { });

// 동기적 콜백함수 - 호이스팅 되어 맨 위로
function printImmediately(print) {
  print();
}

// 비동기적 콜백함수 - 호이스팅
function printWithDelay(print, timeout) {
  setTimeout(print, timeout); // 전달받은 print와 timeout 두 인자를 setTimeout에 요청
}

console.log('1'); //
setTimeout(() => console.log('2'), 1000); 
// 비동기적 함수, 비동기적으로 실행되기 때문에 타이머가 끝나기를 기다리지 않고
console.log('3');
printImmediately(() => console.log('hello'));
printWithDelay(() => console.log('async callback'), 2000); // 비동기
// 출력순서 : 1, 3, hello, 2, async callback

2. 비동기 콜백

정확히 언제 끝나는지 알기 어렵다. 코드의 실행 순서가 뒤죽박죽이 되기 쉽다.

function getData() {
  // 서버에서 데이터를 받아오는 작업
  setTimeout{() => {
    console.log('서버에서 데이터를 받아옴');
  }, 2000};
}

getData();
console.log('후처리'); 
// 출력순서 : 후처리 -> 서버에서 데이터를 받아왔어요

function getData(callback) { // 인자로 콜백함수를 받는다.
  // 서버에서 데이터를 받아오는 작업
  setTimeout{() => {
    console.log('서버에서 데이터를 받아옴');
    callback();
  }, 2000};
}

// getData 인자로 console.log를 전달
getData(() => {
  console.log('후처리');
});

// 출력순서 : 서버에서 데이터를 받아옴 -> 후처리

전달해 준 console.log 콜백함수가 getData의 인수 callback이라는 변수에 들어가서, '서버에서 데이터를 받아왔어요.' 후 '후처리'가 출력되게 된다.

function getData(callback) {
  // 서버에서 데이터를 받아오는 작업
  setTimeout{() => {
    console.log('서버에서 데이터를 받아옴');
    callback({name: "kim"}) // 콜백함수의 인자로 받아온 데이터를 넣을 수도 있다.
  }, 2000};
}

getData((data) => { // 매개변수를 받게끔 
  console.log(data.name);
});

// 출력순서 : 서버에서 데이터를 받아옴 -> kim

web api인 setTimeout은 비동기 콜백함수를 사용하는 함수이다. 비동기적으로 동작하는 타이머가 끝난 후, 콜백함수를 호출

동기적

*동기적 수행이란 한 번에 하나씩, 순서대로 수행한다는 뜻이다.

*동기 프로그래밍

코드를 동기적으로 수행한다는 뜻이다.* 코드가 작성된 순서대로 한 줄씩 실행된다.

console.log('1');
console.log('2');
console.log('3');

// 1, 2, 3

console.log('1');
print();
console.log('3');

function print() {
  console.log('2');
}

// 1, 2, 3

브라우저는 자바스크립트 코드를 실행하기 전에, 함수나 변수 같은 선언문들을 코드 최상단으로 올린다. 이를 호이스팅이라 하는데, 호이스팅이 된 후부터 코드가 작성된 순서에 맞춰서 하나씩 동기적으로 실행된다. (Execute the code block by order after hoisting)

// 호이스팅
function print() {
  console.log('2');
}

console.log('1');
print();
console.log('3');

동기 프로그래밍의 문제점

주문을 받으면 결과를 내어주기 전까지 다음 작업이 일어나지 않는다. 오래 걸리는 작업을 시작하면 다 끝마칠 때까지 뒤에 있는 작업들은 대기해야하는 Blocking 현상이 일어난다.

비동기적

특정 코드의 연산이 끝날 때까지 기다리지 않고 바로 다음 코드를 먼저 실행하는 방식이다. 응답 상태와 상관 없이 다음 동작을 수행할 수 있다. 주문을 받고 결과가 나오기 전에 다른 작업을 수행하는 것이다.

프로그램 안에서 각각의 작은 단위의 기능들을 실행되는데 이것들을 Function이라 한다.

• 프로그램속에 핵심적인 기능들이 쌓여있는 구조라고 생각하면 된다. fundamental building block in the program

• subprogram이라고도 불리며 여러 번 재사용이 가능하다. subprogram can be used multiple times

• 한 가지의 tesk나 값을 계산하기 위해 사용되고 있다.

1-1) 정의

function name(param1, param2) { body... return; }

• 하나의 function에는 한 가지의 일을 하도록
• 작명 시, doSomething처럼 command형태로 동사로 작명해야한다.
• function은 object로 간주된다.

function log(message) { //파라미터로 메세지를 전달하면
  console.log(message); // 전달된 메세지를 화면에 출력
}

// TypeScript
function log(message: string) : number { // 타입스크립트는 항상 파라미터나 리턴 타입의 타입을 명시하게 되어 있다.
  console.log(message);
  return 0;
}

전달되어야하는 파라미터와 그의 데이터 타입,그리고 어떤 값이 리턴되는지 확인하고 쓸 수 있다.

1-2) parameters

Javascript 자료형에 Primitive Type(원시 타입)과 Reference Type(주소 타입) 이 두 가지 타입으로 나누어져 있는데 이 둘은 '할당' 과정에서 차이가 존재한다. Primitive Type은 값(value)자체를 할당하지만, Reference Type은 값이 저장되어 있는 주소를 할당한다.

파라미터 역시 Primitive parameters와 object parameters가 존재하는데 이는 메모리에 value가 그대로 저장되어 있기 때문에 value가 전달되고, object는 메모리에 Reference가 저장된다.

function changeName(obj) {
  obj.name = 'coder';
}
const kim = { name : 'kim' };
changeName{kim};
console.log(kim);

1-3) Default parameters

function showMessage(message, from) {
  console.log(`${message} by ${from}`);
}
showMessage('hi!'); // from에는 값이 정의되지 않아 출력 시 undefined로 출력

// 파라미터에 값이 전달되지 않을 경우를 대비하여 사용하지만
  if(from === undefined) {
    from = 'unknown'
  }

// 대신 Default parameters를 사용하여 정의할 수 있다.
function showMessage(message, from ='unknown')

1-4) Rest parameters

function printAll(...args) { // 배열 형태로 전달
  for (let i = 0; i < args.length; i++) {
    console.log(args[i]);
  }

  // 더 간단하게 출력하기 위해서
  for(const arg of args) {
    console.log(arg);
  }
}
printAll('kim', 'park', 'lee');

2. Local scope

밖에서는 안이 보이지 않고, 안에서만 밖을 볼 수 있다.

let globalMessage = 'global'; // 글로벌 변수 선언 (global variable)
function printMessage() {
  let localMessage = 'local'; // 지역변수 선언 (local variable)
  console.log(localMessage); // local
  console.log(globalMessage); // global
  functon printAnother() {
    console.log(message); // 부모(printMessage)에게서 정의된 것은 자식인 printAnother에서 확인이 가능하다.
    let childMessage = 'child'; // 하위에서 정의된 childMessage는 상위에서 확인 불가능
}
printMessage();
console.log(localMessage); // ERROR

3. Else if와 Else를 피하고 Early Return

3-1) else if 피하기

else if 문이 앞에 if문과 연결되어 차례대로 실행된다고 생각하면 안된다. else if 문은 else문 처리가 한 번 되고 if문 동작이 되는 것과 같다.

const x = 1;

if (x >= 0) {
  console.log('x는 0과 같거나 크다');
} else if (x > 0) {
  console.log('x는 0보다 크다');
}
// 'x는 0과 같거나 크다'

if (x >= 0) {
  console.log('x는 0과 같거나 크다');
} else {
  if (x > 0) {
    console.log('x는 0보다 크다');
  }
}

// 위 코드와 아래의 코드는 논리적으로 같으며, 결과도 같다.

else if를 아예 쓰지 말고, 아래 코드처럼 새 if문을 써서 조건을 분리하는 편이 명확하다.

const x = 1;

if (x >= 0) {
  console.log('x는 0과 같거나 크다');
}
if (x > 0) {
  console.log('x는 0보다 크다');
}
// 'x는 0과 같거나 크다'
// 'x는 0보다 크다'

조건이 많아 else if가 늘어나야 할 경우 switch문으로 대체하는 것이 낫다.

3-2) else 피하기

else를 쓰지 않아도 조건이 논리적으로 분리된다.

function getActiveUserName(user) {
  if (user.name) {
    return user.name;
  } else {
    return '이름없음';
  }
}

function getActiveUserName(user) {
  if (user.name) {
    return user.name;
  }
  return '이름없음';
}

else를 쓰지 않아야 하는 이유는 스타일상의 이유도 있지만, 반전된 로직을 작성하게 되는 논리상의 위험성 때문이다.

// age가 20 미만일 시 (미성년자), report라는 특수 함수를 이용하며, 손님에게 인사를 하는 로직
function greetingsCustomer() {
  if (user.age < 20) {
    report(user);
  } else {
    return '안녕하세요';
  }
}

// else 때문에 20세 미만에게만 인사를 하지 않는 의도치 않은 결과가 발생

function greetingsCustomer() {
  if (user.age < 20) {
    report(user);
  }
  return '안녕하세요';
}

// else문을 없애면, 미성년자인지 확인하는 기능과 손님에게 인사하는 두 기능이 분리되어 손님의 나이에 관계없이 인사하는 기능이 실행된다.

3-3) Early Return

조건문에서 먼저 Return할 수 있는 부분은 분리하여 if문 내에서 return하여 함수를 미리 종료하는 것이다.

장점

• if-else문이 너무 많으면 읽기가 어렵고 조건에 대해 명시적이지 않을 수 있는데, Early Return을 활용하여 리팩토링할 수 있다.
• 코드를 분리하면 로직은 변함이 없으면서 가독성이 좋고 더 명시적인 코드로 리팩토링할 수 있다.

EX1)

function today(condition, weather, isJob) {
  if (condition === 'GOOD') {
    study();
      game();
      SNS();

      if (weather === 'GOOD') {
      workout();
      cleaning();
    }

    if (isJob === 'GOOD') {

function today(condition, weather, isJob) {
  if (condition !== 'GOOD') {
    return;
  }

  study();
  game();
  SNS();

  if (weather === 'GOOD') {
    workout();
    cleaning();
  }

    if (isJob === 'GOOD') {

4. Function Expression

변수와 마찬가지로, 값을 할당할 수 있고 functions are treated like any other variable, can be assigned as a value to variable 다른 함수로 파라미터를 전달할 수 있고 can be passed as an argument to other functions. 리턴값으로도 리턴이 가능 can be returned by another function.

할당이 된 다음부터 선언이 가능하다. function expression is created when the execution reaches it.

const print = function() {
  console.log('print');
};
print(); // print

4-2) Function declaration

함수가 선언되기 이전에 호출해도 호출이 가능하다.

print(); // print
const print = function() {
  console.log('print');
};

5. Callback Function

상황에 맞게 함수를 호출할 수 있도록 함수의 파라미터에 함수를 전달한 것

function randomQuiz(answer, printYes, printNo) {
  if (answer === 'love you') {
    printYes();
  } else {
    printNo();
  }
}
const printYes = function () { // anonymous function
  console.log('yes!');
};

const printNo = function print() { // named function
  console.log('no!');
};

ramdomQuiz('wrong', printYes, printNo); // no!
ramconQuiz('love you', printYes, printNo); // yes!

6. Arrow function

항상 anonymous를 유지한다.

//EX1
const simplePrint = function () {
  console.log('simplePrint');
};

const simplePrint = () => console.log('simplePrint!');

//EX2
const add = function (a, b) {
  return a + b; 
};

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

7. IIFE: Immediately Invoked Function Expression

함수는 선언을 하고 이름으로 호출을 해야하지만 따로 호출할 필요없이 괄호만 사용하면 호출이 가능하다.

````javascript (function hello() { console.log('hello!'); })();

console.log('my' + ' cat'); // my cat
console.log('1'+ 2); // 12 String + Number === String + String
console.log(`string literals:

''''
1 + 2 = ${1 + 2}`); // 줄바꿈이 가능하다.

문자열을 연결하고자 할 시에 +를 사용하고, \n(줄바꿈), \t(탭) 등등이 있다.

2. 숫자 연산자 (numeric operators)

3. increment, decrement operators

• preIncrements
• +가 변수 앞에 붙어있는 것을 preIncrements라고 한다.

1. +1을 한 후 변수 counter에 할당
2. 이 할당한 값을 preIncrement라는 변수에 대입

• postIncrements
• +가 변수 뒤에 붙어있는 것을 postIncrements라고 한다.

1. 값을 먼저 대입한 후
2. 그 값에 +1을 한다.

4. 할당 연산자 (Assignment operators)

let x = 3;
let y = 6;
x += y; // x = x + y
x -= y; // x = x - y
x *= y; // x = x * y
x /= y; // x = x / y

x와 y의 값 즉, 변수에 할당하는 것

5. 비교 연산자 (Comparison operators)

console.log( 10 < 6 ); // less than
console.log( 10 <= 6 ); // less than or equal
console.log( 10 > 6 ); // greater than
console.log( 10 >= 6 ); // greater than or equal

6. 논리 연산자 (logical operators: || (or), && (and), ! (not))

6-1) OR(||)

const value1 = false;
cosnt value2 = 4 < 2;

// ||(or), finds the first truthy value
// 값이 하나라도 true일 시, true를 반환하는데, 만약 맨 앞의 값의 true이면 이는 무조건 true이다.
console.log(`or: ${value1 || value2 || check()}`); 
// false || false || true
function check() {
  for (let i = 0; i < 10; i++) {
    // wasting time
    console.log('!');
  }
  return true;
}

❗ 효율적인 코드 작성을 위해선 연산을 많이 하는 함수를 호출하거나, expression은 맨 뒤에 배치해야한다.

6-2) and(&&)

// && (and), finds the first falsy value
// 
console.log(`and : ${value1 && value2 && check()}`);

7. 동등 연산자 (Equality)

const stringTwo = '2';
const numberTwo = 2;

// == 타입을 변경해서 검사를 진행한다. (타입 변환 비교, loose equality, with type conversion)
console.log(stringTwo == numberTwo); // true
console.log(stringTwo != numberTwo); // false

// === 타입이 다르면 같지 않다. (타입 변환이 없는 비교, strict equality, no type conversion)
console.log(stringTwo === numberTwo); // false
console.log(stringTwo !== numberTwo); // true

// 객체 비교 (object equality by reference)
// 객체(object)는 메모리에 탑재될 때, reference 형태로 탑재된다.
const ho1 = { name = 'ho' }; 
const ho2 = { name = 'ho' };
const ho3 = ho1;
// ho1과 ho2에는 같은 데이터가 들어있는 객체이지만 실제로는 각각 다른 reference가 들어있고, 이는 서로 다른 객체를 가리키고 있다. (쉽게 말해 ho1과 ho2는 가리키고 있는 주소가 다르다.)

console.log(ho1 == ho2); // 각각 다른 reference들이기 때문에 false
console.log(ho1 === ho2); // 타입과 상관없이 reference가 다르기 때문에 false
console.log(ho1 === ho3); // ho3의 값을 ho1에 할당했으므로, true

//연습
console.log(0 == false); // true
console.log(0 === false); // Boolean 타입이 아니기 때문에 false
console.log('' == false); // true
console.log('' === false); // false
console.log(null == undefined); // true
console.log(null === undefined); // false

8. 조건 연산자(conditional operators)

8-1) if

const name = 'kim';
if (name === 'kim') {
  console.log('Welcome, kim!');
} else if (name === 'park') {
  console.log('Welcome, park!');
} else {
  console.log('unknown');
}

9. 삼항 연산자(Ternary operator : ?)

// condition ? value1 : value2;
console.log(name === 'kim' ? 'yes' : 'no');

조건이 true이면 ? 다음이 출력 false이면 : 다음이 출력

10. Switch statement

반복적인 else if가 있다면 if문 대신 switch문을 쓰는 것이 가독성 측면에서 더 낫다(use for multiple if checks)

11. 반복문(Loops)

11-1) while

조건이 false가 나오기 전까지 무한 반복된다.

let i = 3;
while (i > 0) {
  console.log(`while: ${i}`);
  i--;
}
// i가 3일때 i가 0보다 크다면 i를-- 감소하면서 반복해라
// i가 3일때 0보다 크니까 true가 되고 --감소하여 i는 2가되고 i가 0보다 크지 않을때까지 반복됨

do-while loop

괄호 안을 실행한 다음, 조건이 맞는지 안맞는지 확인

do { 
  console.log(`do while: ${i}`);
  i--;
} while (i > 0);

11-2) for loop

// for(초기식(begin); 조건식(condition); 증감식(step)) {}
// 초기식을 처음에 한 번 호출하고, 블럭 안을 실행하기 전에 조건식에 부합하는지 확인한 후에 블럭이 실행이 되면 증감이 되는 구조

for (let i = 3; i > 0; i = i - 2) {
  console.log(`inline variable for: ${i}`);
}
// 블럭 안에 지역변수를 선언하는 것을 inline variable declaration

중첩 반복문(nested loops)

for (let i = 0; i < 10; i++) {
  for (let j = 0; i < 10; j++) { // i가 0일 때, j를 1부터 9까지 돌리고 ... 계속 반복하여 i가 9일때까지
    console.log(`i:${i}, j:${j}`);
  }
}

반복문 안에 반복문이 들어가 있는 형태이다. 이 반복문은 중첩이 가능한데 중첩의 횟수도 제한이 없다.

📌

예제1) 구구단 2단 ~ 9단 출력하기

for(int i = 2; i < 10; i++) {
  for(int j = 1; j < 10; j++) {
    console.log(`${i} + ${j} = ${i * j}`);

예제2) 1부터 10까지 센 후, 짝수만 콘솔에 출력하기

for(int i = 1; i < 11; i++) {
  if ( i % 2 === 0 ) {
    console.log(`Q2: {i}`);

예제3) 1부터 10까지 센 후, 8일 때 break

for(int i = 1; i < 11; i++) {
  if( i > 8 ) {
    break;
  }
  console.log(i);
}

(1) Variable (변수)

• var or let or const가 있다
• let은 ES6부터 추가되었다
• ES6 이후로는 var 대신 let이 사용되고 있다.

(2) let(mutable data type)

let name // name이란 이름으로 선언
let name = 'kim'; // 'kim'이란 값을 할당
console.log(name); // kim
name = 'lee'; // let은 값을 재할당 가능

어플리케이션을 실행하게 되면 어플리케이션마다 쓸 수 있는 메모리가 할당된다. 메모리는 비어져 있는 상자라고 생각하면 되는데, 어플리케이션마다 쓸 수 있는 상자는 한정적이다.

위 코드를 예를 들어 설명하자면, name이라는 이름으로 선언을 하면 하나의 박스를 가리키는 포인터가 생기게 되는 것이다. name이라는 변수가 가리키는 메모리 어딘가에 kim이라는 값을 저장할 수 있다.

2. Block scope

{
let name = 'kim';
console.log(name); // 'kim'
name = 'lee'
console.log(name); // 'lee'
}
console.log(name); // 블럭 밖에선 블럭 안에서 정의된 변수에 접근 불가

3. Global scope

let globalscope = 'global name'
{
let name = 'kim';
console.log(name); // 'kim'
name = 'lee'
console.log(name); // 'lee'
console.log(globalname); // 'global name'
}
console.log(name); // 블럭 밖에선 블럭 안에서 정의된 변수에 접근 불가
console.log(globalname); // 'global name'

global scope는 어디서나 접근 가능하다.

4.📌hoisting

console.log(age); // undefined 정의는 되어 있으나 값이 없다. 값을 할당하기 전에도 출력할 수 있다. 
age = 4;
var age;

호이스팅은 어디에 선언했는가 상관없이 항상 선언을 제일 위로 끌어올려주는

4-1) Hoisting has no block scope(블록 스코프가 존재하지 않는다)

{
age = 4;
var age
}
console.log(age); // 4

age를 블록 안에서 선언했음에도 불구하고 블록 밖에서 출력했을 시 출력이 된다.

5.Constants(immutable data type)

📌선언되고 값을 한 번 할당하면 절대 바뀌지 않는

메모리 어딘가에 할당된 박스를 가리키는 포인터를 이용해 값을 바꿔나갈 수 있는 let과 달리 Constants는 이 포인터가 잠겨있어 선언과 값을 할당하는데 있어 변경을 할 수가 없다 보안상의 이유 그리고 어플리케이션의 효율성으로 인해

6.Variable types

1) primitive type(더 이상 작은 단위로 나눠질 수 없는 아이템)

✔ number, string, boolean, null, undefined, symbal

값 자체가 메모리에 저장된다.

2) object type(위 primitive type의 아이템들을 묶어서 관리할 수 있게 하는)

function

크기가 크기 때문에 메모리에 그대로 저장될 수 없다. object를 할당하면 그 곳에는 reference가 존재하는데, 이 reference를 통해 object가 담겨있는 메모리를 가리키게 된다.

📌number 중 특별한 값

infinity negativeInfinity NaN 나누고자 하는 값이 0인지 숫자인지 확인하지 않고 나눔을 진행하게 된다면 에러가 발생한다.

7.String

• 글자의 갯수와 상관없이 모두 String 타입으로 할당된다
• String과 일반 변수를 합치는 것도 가능하다.
• template literals : 백틱기호와 달러와 중괄호를 이용하면 변수의 값을 붙혀서 넣을 수 있다. quote를 사용하는 것과는 다르게 spacing과 문자열들이 그대로 나오기 때문에 간편하게 출력할 수 있다는 장점이 있다.

8.Boolean

✔ 0, null, undefined, NaN, '' 값은 모두 false에 해당한다.

8-1) null vs undefined

null은 값이 없는 상태 undefined 선언은 되었지만 값이 지정되어있지 않은 상태

8-2) symbol

✔ 고유한 식별자를 만들 때 사용된다. (동일한 String을 사용했어도 symbol은 다르다) 만약 String이 똑같고 동일한 symbol을 만들고 싶다면 Symbol.for라는 키워드를 사용하면 된다.

const gSymbol1 = Symbol.for('id');
const gSymbol2 = Symbol.for('id');
console.log(gSymbol1 === gSymbol2); // true

9.동적 타이핑(Dynamic typing)

변수를 선언할 때 어떤 타입인지 선언하지 않고 프로그램이 동작할 때 할당된 값에 따라 타입이 변경될 수 있다. let은 재할당이 가능하기 때문에 text라는 변수를 숫자 1로 재할당이 가능하고 중요한 것은 String 7과 Number 5를 더하게 되면 문자로 인식하여 String 75를 반환하고 String 8 과 String 2를 나누면 숫자 나누기 숫자로 인식하여 Number 4를 반환하게 된다.

1-1 script 태그의 위치

💭script 태그를 head 태그 안에 포함시킬 경우?

☑️ 브라우저가 html을 parsing(한 줄씩 읽는)하는 도중에 script 태그를 만나면 필요한 Javascript 파일을 다운로드 하는데 이 파일의 크기가 클 경우, 사용자가 웹 사이트를 보는데까지 너무 오래걸릴 수 있다.

💭script 태그를 body 태그 안에 포함시킬 경우?

☑️ 장점 : 사용자가 html 컨텐츠를 빨리 볼 수 있다 단점 : 자바스크립트의 의존을 하는 웹사이트라면 사용자가 정상적인 페이지를 보기 전까지 서버에서 자바스크립트를 불러오는데까지 시간이 걸린다.

💭 head + async

☑️ 장점: fetching이 parsing(코드를 위에서 아래로 차례대로 읽어들임)이 진행되는 동안 병렬적으로 일어나기 때문에 다운로드 받는 시간을 절약할 수 있다.

단점: (1) 자바스크립트가 html이 parsing되기도 전에 다운로드가 완료되어 실행되기 때문에 DOM요소를 조작하려고 하면 html 요소가 아직 정의되어 있지 않을 경우가 있다.

(2) parsing이 진행되는 동안 자바스크립트를 실행하기 위해서 중간에 멈춰야하는 구간이 생긴다. -> 페이지를 보는데 시간이 소요된다.

(3) 만약 자바스크립트가 순서가 중요시 된다면 다운로드가 완료되는 대로 실행이 되는 async는 어울리지 않는다.

💭 head + defer

parsing이 진행되면서 defer가 발견되면 fetching(자바스크립트 파일 다운로드)이 병렬적으로 진행되면서 parsing이 완료되는 순간 자바스크립트가 실행된다. 그런 다음, 스크립트가 순서대로 실행된다. 정리한 순서대로 스크립트가 실행되기 때문에

✔️ 이벤트 기능 넣기

function App() {
  return (
    <div>
      <counter title="불면증 카운터" initValue={10}></Counter>
    </div>
  );
}

컴포넌트 밖(사용자가 주입한)에 값은 안에서나 어디든 임의로 바꾸지 못한다. 이는 컴포넌트는 외부에서 내부로 유입되는 것을 알 수 있다.

function Counter(props) {
  let count = props.initValue;
  function up() {
    count = count + 1; // '+'버튼을 눌러도 초기값 10에서 1씩 늘어나지 않는다.
  }
  return <div>
    <h1>{props.title}</h1>
      <button onclick={up}>+</button> {props.initValue}
  </div>
}

import {useState} from 'react';
function Counter(props) {
  let countState = useState{props.initValue};

초기값 10이라는 상태를 만들기 위해 useState를 import 받아야 한다.

✔️ state란?

1. 먼저 state란 컴포넌트가 가질 수 있는 상태를 말하는데, 예를 들어 시간이라는 컴포넌트가 있다면 state로 현재 시간을 가질 수 있다.
2. state는 배열이다. 첫 번째 원소는 상태의 값이고 읽기만 가능하고 수정은 불가하다. 두 번째 원소는 상태의 값을 바꿀 때 호출하는 함수

✔️ Import react Hooks의 useState는 컴포넌트의 state(상태)를 간편하게 생성하고 업데이트를 시킬 수 있게 해주는 도구를 제공해준다. useState를 사용하기 위해서는 react에서 useState를 import 받아야 한다.

function Counter(props){
  let countState = useState(props.initValue);
  let count = countState[0];
  let setCount = countState[1];
  function up() {
    setCount(count+1); // 11 setCount값이 이전과 다르다면 컴포넌트를 다시 실행시킨다.
  }

객체의 구조분해할당 객체의 프로퍼티 이름과 같은 이름의 지역변수로 만들어지고 배열의 구조분해할당 원소 각각의 위치에 이름과 같은 이름의 지역변수로 만들어진다.

✔️props 사용하기

React에서 속성은 Properties를 줄여 Props라고 한다. 이 Props는 입력값이다. 이 안에는 객체가 들어간다.

function Counter(props) { // 2. 파라미터 props 설정
  return <div>
    <h1>{props.title}</h1> // 3. 호출 
    <button>+</button> {props.initValue} // 3.1 호출 
  </div>
}

function App() {
  return (
    <div>
      <Counter title="불면증 카운터" initValue={10}></Counter> // 1. 속성 부여(title, initValue), 4. 호출
    </div>
  );
}

📝

1. Counter 태그에 title이라는 속성과 "불면증 카운터"라는 값을 부여했다.
2. 그리고 컴포넌트의 첫 번째 파라미터는 props라 명칭.
3. 일반 문자열이 아닌 변수로서 데이터를 평가하여 출력하게 하고 싶다면 함수의 리턴값에서 중괄호({})로 감싸주어야 한다.
4. 1 Counter 태그의 initValue 역시 원하는 JavaScript의 데이터 타입으로 출력하고 싶다면 중괄호({})로 감싸주어야 한다. 큰따옴표(")를 사용하면 문자열로 평가된다.

✔️JSX

JavaScript의 확장 문법으로 HTML 문법을 그대로 사용할 수는 없다. 대표적으로 class와 for가 있는데,

// CSS에 class를 적용하는 속성 
<p class="hello">안녕!</p> // <p className="hello">

//Javascript - 객체지향의 개념으로 class 키워드 사용
class Hello {
  console.log('Hello!');
}

JSX에서 class 속성을 사용하려면 className 으로 작성해야 합니다.

//HTML에서의 for
<form>
  <label for="name">이름</label> // label 태그에서
  <input id="name" type="text" /> // input 태그와 함께 사용
</form>

반면에 Javascript에서는 반복문에서 for를 사용 JSX 문법으로 HTML의 for 속성을 사용하기 위해선

<form>
  <label htmlFor="name">이름</label> // htmlFor 라고 작성
  <input id="name" type="text" /> 
</form>

✔️ 이벤트 핸들러 작성

소문자로 작성하던 이벤트 핸들러들은 JSX 문법으로 작성하면 두 번째 단어부터는 첫 글자를 대문자로 작성해야한다. 이를 카멜 표기법이라 한다.

✔️사용자 정의 태그 == 컴포넌트

//App.js
import './App.css';

function App() {
  return (
    <div>
      <h1>Counter</h1>
      <button>+</button> 0
    </div>
  );
}

export default App;

👉App.js 파일의 코드이다. 이 코드 return안에 코드가 1억줄이 있다면, 분명 코드를 읽기란 쉽지 않을 것이다. 물론 유지보수도 이에 따라 매우 힘들 것이다. 이 때문에 각 부분을 사용자 정의 태그로 만들면 좋을 것이다.

//<h1>과 <button>의 컴포넌트(Counter라는 이름의 사용자 정의 함수)
function Counter() {
  return <h1>Counter</h1>
  <button>+</button> 0
} // error

❗React에서 컴포넌트를 만드는 함수를 정의할 때, 단 하나의 태그를 리턴해야한다.

//<h1>과 <button>을 <div> 태그로 감싼다.
function Counter() {
  return <div>
    <h1>Counter</h1>
    <button>+</button> 0
  </div>
}
function App() {
  return (
    <div>
      <Counter></Counter>  // <Counter /> 도 가능
    </div>
  );
}

📝

1. React는 사용자 정의 태그를 만드는 기술이다. 사용자 정의 태그를 컴포넌트라고 하는데
2. 컴포넌트는 함수이다.
3. 이 컴포넌트를 만드는 함수를 정의할 때, 반드시 단 하나의 태그를 리턴해야한다. 이 리턴값이 컴포넌트의 UI가 된다.
4. 컴포넌트의 이름은 반드시 대문자로 시작해야한다.

NPM은 Node Package Manager의 약자로, Node.js 프로젝트를 관리하는 필수적인 도구이다.

사용방법

1. 프로젝트 생성 npm init package.json이라는 파일을 만들어 주고, 그 디렉토리를 Node.js 프로젝트로 만들어 준다.

2. 명령어 명령어들은 다음과 같은 것들이 있다.

3. npm script 명령어 package.json 파일에 scripts 태그 안에는 프로젝트를 유지보수할 때 사용하는 여러 기능을 갖고 있는 명령어들이 있다.

NPX

NPX는 npm 패키지를 설치하지 않고 사용할 수 있게 해주는 도구이다. 프로젝트에 따로 패키지를 추가하지 않고, npx를 이요하여 바로 실행할 수 있게 해준다. npm과의 차이점은, npx는 패키지를 실행시키는 데에 특화된 도구이고 npm은 패키지를 다운로드하고 관리하는 데에 특화된 도구라는 것이다.

if문

if(조건) { 동작부분 }
// 조건부분이 충족되면 동작부분을 실행해라

if(조건) { } else { }

if(조건) { } else if (조건2) { } else { }
// 두 가지 이상의 옵션이 필요한 경우 사용

if()안의 값이 true라면 'true'이 출력이 된다.

if (2 > 1) {
  console.log('true');
}

2️⃣삼항 연산자

삼항 조건 연산자 (Ternary Operator) 조건식 ? 참인 경우 : 거짓인 경우

let age = 20;
let beverage = (age >= 20) ? "Beer" : "Juice";
console.log(beverage); // "Beer"

// 20이상인 경우(참일 경우) 변수 beverage에 Beer가
// 20이하인 경우(거짓일 경우) 변수 beverage에 Juice가 

3️⃣switch문

정해진 범위안의 값에대해 특정한 일을 해야 하는 경우 조건값과 일치하는 경우를 찾은 다음에는 break문을 만나기 전까지 그 아래 모든 조건을 실행하게 된다.

switch (비교할값) {
  case 조건값1:
    동작부분;
    break; // switch문을 빠져나온다.
  case 조건값2:
    동작부분;
    break;
  default: // 조건값 1,2 둘 다 일치하지 않을 때 실행
    동작부분;
}

예제

let myChoice = 2; // 선택지를 담아둘 변수 선언

switch(myChoice) {
  case 1:
    console.log('월요일');
    break;
  case 2:
    console.log('화요일');
    break;
  case 3:
    console.log('수요일');
    break;
  case 4:
    console.log('목요일');
    break;
  case 5:
    console.log('금요일');
    break;
  default: // 일치하는 요일이 없을 때
    console.log('해당하는 요일이 없음!');
}

범위를 만족하는 조건식을 만들 때는 if문을 활용하는 것이 효과적이고 특정값을 만족하는 조건식을 만들 때는 switch문이 효과적

4️⃣반복문 (loop statement)

for문

for (초기화부분; 조건부분; 추가동작부분) {
  동작부분
}

실행순서

1. 초기화부분(딱 한 번만 실행됨)
2. 조건부분(코드를 boolean형태로 평가한 다음, true로 판단되면 동작부분을 실행)
3. 추가동작부분
4. 조건부분이 거짓이 될 때까지 반복

⭐tip

1. 추가 동작 부분을 꼭 채울 필요는 없다.

   for (let i = 0; i <= 10;) {
   console.log(`${i}번째`);
   i++; // 추가 동작 부분의 내용을 동작 부분에서 실행해도 된다.
   }

   그래도 동작 부분에서는 반복하고자 하는 내용만 작성하는 것이 좋다. 조건과 관련된 부분은 소괄호에

2. 초기화 부분에서 생성한 변수는 for문의 로컬 변수

   for (let i = 1; i <= 10; i++) {
   console.log(`${i}번째`);
   }
   

console.log(i); //에러

3. 초기화 부분도 반드시 채울 필요는 없다.
```javascript
let i = 1;
for (; i <= 10; i++) {
  console.log(`${i}번째`);
}

반복문 밖에 있는 글로벌 변수를 활용해도 된다. 단, for문의 소괄호 안쪽 가장 첫 번째 세미콜론은 생략할 수 없다. 중첩 for문

• 첫 번째 for문이 참이라면 두 번째 for문이 실행된다.

  for (let i = 0; i < 5; i++) {
  for (let j = 0; j < 5; j++) {
    console.log(i, j);
  }
  }

while문

while(조건) {}

조건이 false가 될 때까지 중괄호({})안의 코드를 반복 실행

let num = 5;
while (num >= 0) {
  console.log(num);
  num--;
}

do-while

• do 다음에 조건을 검사함.

  do {
  console.log('hello!');
  } while(greeting);

📌

조건이 맞을 때만 실행하고 싶다면 while

무조건 한 번은 실행해야 한다면 do-while

5️⃣제어문에서 자주 쓰이는 연산자

논리연산자

• && and
• || 또는
• ! 부정
• !! 불리언 값으로 변환

AND 예시

console.log(true && true); // 양쪽값이 모두 true일 때만 true 리턴
console.log(true && false);
console.log(false && true);
console.log(false && false);
console.log(null && undefined); // null이 falshy값이므로 왼쪽값(null)을 리턴
console.log('0' && NaN); // 문자열 0은 truthy 오른쪽 값(NaN) 출력

JavaScript에서 왼쪽값이 truthy할 경우 오른쪽 값을 리턴하고 왼쪽값이 falshy하면 왼쪽값을 그대로 리턴한다.

OR 예시

console.log(true || true);
console.log(true || false);
console.log(false || true); // 어느 한 쪽값이 true가 있으면 true 리턴
console.log(false || false); // 양쪽값이 모두 false일 때만 false를 리턴
console.log(0 || true); // 0은 falshy값이므로 오른쪽 값(true) 리턴
console.log({} || 123); // 빈 객체나 빈 배열 모두 truthy 

OR는 AND와 정반대로 왼쪽값이 truthy할 경우 왼쪽 값을 리턴하고 왼쪽값이 falsy하면 오른쪽 값을 리턴한다.

AND와 OR 연산자의 연산 우선순위

AND 연산자의 우선순위가 더 높다.

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

console.log('0' || NaN && false); // '0'
console.log(('0' || NaN) && false); // false

null 병합 연산자 - ??

물음표 두 개 (??)를 사용해서 null 혹은 undefined 값을 가려나는 연산자

const ex1 = null ?? 'i'; //'i'
const ex2 = null ?? 'you'; // 'you'

연산자 왼편의 값이 null 이나 undefined라면 연산자 오른편의 값이 리턴되고, null 이나 undefined가 아니라면 왼편의 값이 리턴

OR 연산자와의 비교

const example1 = null || 'i'; // 'i'
const example2 = null ?? 'i'; // 'i'

일부 상황에서 똑같이 동작하는 것처럼 보이지만 null 병합 연산자는 왼편의 값이 null이나 undefined인지 확인하고 OR 연산자는 왼편의 값이 falsy인지를 확인하기 때문에 null이나 undefined가 아닌 falsy값을 활용할 때 결과가 서로 다르다.

문자형(String)

let name = "Kim";
let name = 'Kim'; // 코드 내에서 문자를 구분하기 위한 따옴표

// 특수문자 출력하는 법
console.log("I'm a boy."); // 작은따옴표를 써야할 경우 큰 따옴표로 감싸주는 것이 편하다.
console.log("He said \"I'm a boy.\"");
console.log('He said "I\'m a boy."');
console.log("He said \"I\'m a boy.\"");
console.log('He said \"I\'m a boy.\"');
// 역슬래시(\) : 문자열 내의 기호
// 역슬래시는 가독성이 좋지 않아서 역슬래시 대신 백틱(`)을 사용
console.log(`He said "I'm a boy."`);

// 줄바꿈(\n) / 탭(\t)
console.log('안녕!\nKim\t\t 반가워');

// 템플릿 리터럴(문자열 내부에 변수를 표현할 때) 
let id = 'Kim';
let greetings = "'Hi!, " + id + "\n즐거운 하루!'";

greetings = `'Hi!, ${id}
즐거운 하루!'`;

let myNumber = 3;

function getTwice(x) { 
  return x * 2;
}

console.log(`${myNumber}의 두 배는 ${getTwice(myNumber)}입니다.`);

null과 undefined

null

• 확실하게 비어있는 것
• null이라는 메모리에 null이라는 object가 할당

undefined

• 정해지지 않은 상태
• undefined는 그냥 undefined로 출력

객체타입(Object)

🆎객체

1. 데이터 타입 중 복합 데이터인 객체는

• 연관있는 데이터 문자열을 묶어서 보관할 수 있는 큰 Object를 말한다
• 함수를 함께 묶어둘 수 있는 것을 객체라 함
• 여러가지의 데이터를 함께 묶어놓은 것을 객체
• {key:value} => value에는 원시(primitive), 객체(object) 둘 다 쓸 수 있다.

원시는 data, stack에 보관되지만 객체는 Heap이라는 곳에 보관되어진다. (하나의 메모리 안에 다 들어갈 수 없기 때문에)

• 객체는 셀 여러개에 걸쳐 들어가게 되는데
• 변수 이름은 메모리 셀을 가리키는데, 이 메모리셀 안에는 실제 object가 들어있는 메모리 주소를 가지고 있다.
• 변수는 객체가 할당된 곳의 주소를 가지고 있다.

값과 참조의 차이

원시타입

• 메모리 셀 안에 값이 바로 들어가있다.
• 변수가 그 메모리 자체를 가리키고 있다.

객체타입

• 참조값, 메모리 주소가 변수에 들어있다.

숫자형(Number)

계산은 기본적인 사칙연산을 따른다.

//거듭제곱
console.log(2 ** 3); // 8

//나머지
console.log(7 % 3); // 1

//덧셈
console.log(1 + 8) // 9

//뺄셈
console.log(7 - 6) // 1

//곱셈
console.log(2 * 2 * 2) // 8

//나눗셈
console.log(5 / 2); // 2.5

불 대수(Boolean)

일상적 논리를 수학적으로 표현한 것

let 참 = true;
let 거짓 = false;
console.log(참);
console.log(거짓);

AND 연산 x와 y가 모두 참일 때만 x AND y가 참 참고로 왼쪽이 false일 경우 오른쪽은 볼 필요 없이 false이다.

OR 연산 x와 y중 하나라도 참이면 x OR y는 참 AND 연산과 반대로 왼쪽이 true라면, 오른쪽은 볼 필요 없이 true가 됩니다.

NOT 연산 반대로 뒤집어주는 역할

ex) x가 참이면 NOT x는 거짓 NOT 2는 1보다 작다 -> 2는 1보다 작지 않다 = true

Falsy 거짓인 값 (느낌표 2개(!!)를 붙이면 값을 True나 False값으로 변환해준다.

console.log(!!0);
console.log(!!-0);
console.log(!!'');
console.log(!!null);
console.log(!!undefined);
console.log(!!NaN);

Truthy 참인 값

console.log(!!1);
console.log(!!-1);
console.log(!!'text');
console.log(!!{});
console.log(!!Infinity);

형 변환(Type Conversion)

//숫자에서 문자
let x = 12;
console.log(x); // 12
console.log(String(x)); // 문자열 12
console.log(typeof x); // number
console.log(typeof String(x)); // string

//불린에서 문자
let y = true;
console.log(y); // true
console.log(String(y)); // 문자열 true
console.log(typeof y); // boolean
console.log(typeof String(y)); // string

//문자에서 숫자
let a = '문자';
console.log(a); //문자
console.log(Number(a)); // NaN (숫자가 아니다)
console.log(typeof a); // string
console.log(typeof Number(a)); // number

//불린에서 숫자
let b = true;
console.log(b); // true
console.log(Number(b)); // 1
console.log(typeof b); // boolean
console.log(typeof Number(b)); // number

연산자

typeof 연산자

데이터 타입을 확인할 때 사용

let name = "kim";

console.log(typeof 1); //number
console.log(typeof name); //string
console.log(typeof true); //boolean
console.log(typeof "hi"); //string
console.log(typeof null); //object
console.log(typeof undefined); //undefined

산술 연산자

console.log(4 + '2'); // 42 문자를 연결하는 기능이 더 강하다
console.log(4 + 2); // 6 
console.log(4 - true); // 3
console.log(4 * false); // 4 * 0 
console.log(4 / '2'); // 2
console.log('4' ** true); // 4
console.log(4 % 'two'); // NaN

관계 비교 연산

console.log(2 < '3'); // true
console.log(2 > true); // 2 > 1 -> true
console.log('2' <= false); //  2 <= 0 -> false
console.log('two' >= 1); // NaN >= 1 비교불가 -> false

동등 비교 연산

console.log(1 === '1'); // === 일치, !== 불일치 false
console.log(1 === true); // false
console.log(1 == '1'); // 동등, 부등 true
console.log(1 == true); // true

단항 연산자(Unary Operators)

let a = 5;
a = -a; // -1 * 5

a = -a; // -5
a = +a; // +(-5)

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

할당 연산자

let a = 1;
a = a + 2; // a += 2;
a = a - 2; // a -= 2;
a = a * 2; // a *= 2;
a = a / 2; // a /= 2;
a = a % 2; // a %= 2;
a = a ** 2; // a **= 2;

증감 연산자

let a = 0;
console.log(a);
a++; // a = a + 1; // a++ 필요한 연산을 하고, 그 뒤 값을 증가시킴
a--; // a = a - 1;

⭐

• a++ 필요한 연산을 하고, 그 뒤 값을 증가시킴
• ++a 값을 먼저 증가시키고 필요한 연산을 한다.

값을 저장하는 공간이자 자료를 저장할 수 있는 이름이 있는 상자

var

• 함수 안,밖 어느 위치에서나 쓸 수 있는 변수 정의법
• 변수 중복 선언이 가능해 오류가 나올 가능성이 높다.
• 잘 사용하지 않는 것이 좋다.

  var number = 1;
  number = 2;
  var number = 3;
  console.log(number); // 3

let

• 한 번 정의된 변수는 중복 선언할 수 없지만, 재할당은 가능하다.

  let a = 1;
  a = 2;

const

• 한 번 정의된 변수는 재정의할 수 없고 재할당도 불가능하다.(원시값)
• 객체의 경우 재할당이 가능

변수 선언

let a; // 키워드 let 변수이름 a

1. 변수는 문자와 숫자, $와 _만 사용
2. 첫 글자는 숫자가 될 수 없다.
3. 예약어 사용 불가능
4. 가급적 상수는 대문자로
5. 변수명은 읽기 쉽고 이해할 수 있게 선언 (공통적인 내용을 먼저 적고 그 뒤에 구체적인 것 적으면 더 좋음)

값의 할당

let a = 0; // 키워드 let 변수이름 a 할당연산자 '=' 값 0

변수 a에 0을 할당하면, 메모리 어딘가에 0이 할당되고 0이 할당된 메모리 셀에는 주소가 존재합니다. 그 메모리 셀의 이름은 a인 것입니다.

값의 재할당

a = 1; // 변수 a에 할당했던 0의 값 대신 1을 재할당 할 수 있다.

자연수 n이 입력으로 주어졌을 때, 만약 n이 짝수면 "n is even"을, 홀수이면 "n is odd"를 출력하는 코드를 작성해 보세요.

❗ 제한사항

• 1 ≤ n ≤ 1000

입출력 예

입력 #1

100

출력 #1

100 is even

입력 #2

1

출력 #2

1 is odd

💭나의 생각

문제를 보고 조건식을 사용해 문제를 풀었다. 문제는 풀었지만 조건 연산자로 대체 가능하다는 생각은 못했다. 조금 더 간결한 코드를 위해서 조건 연산자로 대체 하는 것이 좋을 듯 하다.

조건 연산자

condition ? exprIfTrue : exprIfFalse
// 조건문 ? 조건문이 참일 때 : 조건문이 거짓일 때

✍️풀이

const readline = require('readline');
const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout
});

let input = [];

rl.on('line', function (line) {
  input = line.split(' ');
}).on('close', function () {
  n = Number(input[0]);
  if (n % 2 == 0) {
    console.log(`${n} is even`);
  } else {
    console.log(`${n} is odd`);
  }
});

let input = [];

rl.on('line', function (line) {
  input = line.split(' ');
}).on('close', function () {
  n = Number(input[0]);
  console.log( n % 2 === 0 ? `${n} is even` : `${n} is odd`)

C는 아주 오래되고 전통적인 순수 텍스트 기반의 언어이다. 앞서 배운 스크래치 블록과 결과적으로 정확히 일치한다고 볼 수 있다.

왼쪽에 Filetree, 오른쪽 상단의 코드 작성 부분, 하단의 터미널창 이렇게 3가지 화면으로 구성되어있다.

터미널 창에서 보이는 달러($)는 프롬프트(prompt)로 컴퓨터가 입력을 받아들일 준비가 되었다라는 것을 나타내 주기 위해 컴퓨터 단말기 화면에 나타나는 신호다. 프롬프트는 프로그램마다 사용되는 것이 다르다.

코드를 작성하기 위해선 작성 부분 상단의 (+)버튼을 눌러 새로운 파일을 만들어준다. 이 때는 제목 뒤에 .c라는 확장자를 반드시 붙여줘야 한다. 이는 'C언어로 작성된 코드'라는 것을 뜻하기 때문이다.

✔️ 스크래치와 C언어

그래픽 기반으로 블록을 사용하여 코딩을 하는 스크래치와 달리 C언어는 순수 텍스트를 기반으로 하는 언어다.

int main(void)는 스크래치의 when 🚩clicked 블록과 같은 역할을 합니다. 즉 '시작한다'의 의미다. C언어에서 스크래치의 say와 비슷한 함수는 printf()다.

• printf는 문자열을 출력하는 함수다.
• printf라는 함수를 사용하기 위해선 #include<stdio.h>라는 코드를 작성해서 미리 작성된 함수에 접근할 수 있도록 해야한다.
• int main(void)는 프로그램의 시작점을 의미한다.
• C언어에서 글자, 단어, 문장을 적을 때에는 명령어와 구분하기 위해 꼭 ("")로 감싸줘야 한다.
• 문장이 끝날 때 마침표를 찍는 것 처럼, 하나의 명령이 끝났을 때에는 세미콜론(;)을 붙여줘야 한다.

✔️ 소스코드와 머신코드

위에서 직접 작성한 코드는 '소스 코드(source code)'이고, 소스코드는 컴퓨터가 이해하지 못한다. 그러므로 컴퓨터가 이해할 수 있도록 이진수로 작성된 '머신 코드(machine code)'로 변환을 해야한다. 이 변환 작업은 '컴파일러(compiler)'로 실행된다.

즉, 소스코드는 C, 파이썬, 자바, C++와 같은 영어와 유사한 코드들이며 머신코드는 컴퓨터가 실제로 이해하는 0과 1의 조합이다. 참고로 머신코드는 '오브젝트 코드(Object code)'라고도 한다.

C언어에서는 clang이라는 명령어를 통해 코드를 컴파일 할 수 있다. 터미널에 clang hello.c를 입력 후 엔터를 치면, 머신코드로 번역하여 같은 폴더 내에 a.out이라는 이름의 파일을 생성한다.

머신코드로 컴파일된 a.out를 실행하면 비로소 원하는 결과물을 얻을 수 있다.

추가로 clang 명령어에서는 출력과 관련된 인자로 -o 를 사용할 수 있으며, 컴파일 되는 파일명을 지정할 수 있다.

📌본 글은 네이버 부스트코스 [CS50 - 모두를 위한 컴퓨터 과학]을 수강한 후 개인적으로 정리를 하기 위해 작성된 포스트입니다.

자세한 강의 내용은 www.boostcourse.org 사이트를 참고하시길 바랍니다.

2. 정보의 표현

✔️ 핵심 단어

• ASCII
• 유니코드
• RGB

문자의 표현 🔡

👉 아스키코드(ASCII) 인코딩 표준 컴퓨터가 스위치를 ON/OFF하면서 숫자를 표현한다면 문자는 어떻게 표현할까요? 바로 문자를 숫자로 표현할 수 있도록 정해진 약속이 있는데 그 중 하나는 설명미국정보교환표준부호 ASCII(아스키코드 / American Standard Code for Information Interchange)이다. 총 128개의 부호로 정의되어 있는데, 이 표준에서 숫자 65는 대문자 'A'와 대응된다. 따라서 컴퓨터가 대문자'A'를 저장하고 싶다면 숫자 65를 이진수로 저장할 것이다.(2진수는 2⁶x1 + 2⁵x0 + 2⁴x0 + 2³x0 + 2²x0 + 2x0 + 1x1 (64+1) = 1000001이다.) 소문자도 아스키코드에서 숫자로 나타낼 수 있다. 소문자'a'는 숫자 97로 나타내고 'b'는 98로 나타낸다. 컴퓨터가 소문자 'a'를 저장하려면 숫자 97을 2진수, 1100001로 저장해야한다. 이를 통해, 아스키코드에서 소문자는 같은 대문자 글자보다 항상 2^5만큼 크다는 사실을 알 수 있다.

👉 아스키코드의 한계, 유니코드의 등장 현재 전체 문자들은 8비트 아스키코드로는 나타내는 데에 한계가 존재하기 때문에, 유니코드가 등장하게 된다. 이러한 유니코드로 이모지까지 표현이 가능한데 예)😂 이모티콘은 10진법으로 128,514, 2진법으로는 11111011000000010

그림, 영상, 음악의 표현

스크린을 통해 보는 그림을 자세히 살펴 보면 수많은 작은 점들이 빨간색, 초록색, 파란색(RGB)를 띄고 있는데, 각각의 점을 픽셀이라고 부른다. 각각의 픽셀은 세 가지 색을 서로 다른 비율로 조합하여 특정한 색을 갖게 된다. 예를 들어 빨간색 72, 초록색 72, 파란색 33을 섞게 되면 노란색이 되는 것처럼 이러한 표현 방식을 RGB라고 한다.

영상은 무수히 많은 그림을 이어붙여 보여 주는 것이기 때문에 역시 숫자로 표현이 가능하다. 음악도 마찬가지..

3. 알고리즘

✔️ 핵심 단어

• 알고리즘
• 의사코드

앞선 이진법은 결국 컴퓨터가 이해할 수 있는 방법으로 정보를 변환하여 입력하는 방법으로, input에서 output의 과정 중 input에 해당된다. 그렇다면 output(출력)은 어떻게 가능할까 컴퓨팅은 입력을 받아야 출력이 가능하다. 알고리즘은 이 컴퓨팅 과정에서 입력에서 받은 자료를 출력 형태로 만드는 처리과정을 뜻한다. 즉, 입력값을 출력값의 형태로 바꾸기 위해 어떤 명령들이 수행되어야 하는지에 대한 규칙들의 순서적 나열이라고 할 수 있다.

*출처 : 한빛출판네트워크

같은 출력값이라도, 어떤 알고리즘으로 출력하느냐에 따라 시간이 크게 달라진다. 따라서 출력값을 나타내는 '정확한' 알고리즘도 중요하지만, '정확하고 효율적인' 알고리즘이 더 중요하다

🔍 의사코드

의사코드는 특정 프로그래밍 언어의 문법에 따라 쓰여진 것이 아니라, 일반적인 언어로 코드를 흉내내어 알고리즘을 써놓은 것이다. 의사코드는 말 그대로 흉내만 내는 코드이기 때문에, 실제적인 프로그래밍 언어로 작성된 코드처럼 컴퓨터에서 실행할 수 없으며, 특정 언어로 프로그램을 작성하기 전에 알고리즘의 모델을 대략적으로 모델링하는 데에 쓰인다.

함수 : 무엇을 할지 알려주는 '동사(Verb)'의 역할 ex) Pick up, Open to, Look at

조건 : 여러 선택지 중 하나를 고르는 것 ex) If, Else if, Else

불리언(Boolean) : 예 또는 아니오 혹은 참(True) 또는 거짓(False)으로 나오는 아니면 2진법에서 0 또는 1로 나오는 질문

루프(loop) : 계속해서 반복하는 순환

4. 스크래치

미국 메사추세츠공과대학(MIT) 미디어랩의 라이프롱킨더가든그룹이 만들어 무료로 제공하는 스크래치라는 그래픽 프로그래밍 언어를 사용하면 블록을 옮겨 붙여서 알고리즘을 만들어 볼 수 있다. 블록 모양의 다양한 코드들을 옮겨가며 만들어 볼 수 있기 때문에, 코딩에 대한 개념을 쉽게 배워볼 수 있다. 스크래치 블록의 종류에 따라서 프로그램이 수행하는 일의 종류가 달라진다.

📌본 글은 네이버 부스트코스 [CS50 - 모두를 위한 컴퓨터 과학]을 수강한 후 개인적으로 정리를 하기 위해 작성된 포스트입니다.

자세한 강의 내용은 www.boostcourse.org 사이트를 참고하시길 바랍니다.

👉 목표

컴퓨터 과학이 무엇인지 정의하고, 컴퓨터가 정보를 표현하는 방법에 대해 설명

핵심단어

1. 2진법
2. 정보의 표현
3. 알고리즘
4. 스크래치(Scratch)

☝️ 2진법

컴퓨터 과학이란? 🔈문제 해결에 대한 학문

문제 해결이란, 입력을 전달받아 출력을 만들어 내는 과정으로 그 중간에 있는 과정이 컴퓨터 과학이다. 이런 입력과 출력을 표현하기 위해 약속한 방법(표준)이 바로 2진법

우리가 일상에서 사용하는 수는 0에서 9까지의 10종류 숫자로 수를 나타내는 십진법이다. 이런 십진법은 자리수를 10의 거듭제곱으로 표현 비슷하게 2진법에서는 두 개의 숫자만 있으므로 각 자리수가 2의 거듭제곱을 의미한다.

예) 10진법의 3을 2진법으로 표현하면? 11 2¹x1 + 1x1 = 3

10진법의 4을 2진법으로 표현하면? 100 2²x1 + 2¹x0 + 1x0 = 4

✔️ 컴퓨터에서 이진법을 사용하는 이유 2진법은 전기를 켜고(1) 끄는(0) 방식으로 작동하는 컴퓨터에 적합하다. 컴퓨터에는 많은 스위치(트렌지스터)가 있고 on/off 상태를 통해 0과 1을 표현한다. 컴퓨터는 2진법에서 하나의 자릿수를 표현하는 단위를 비트(bit)라고 한다.

❗비트 정보를 저장하고 연산을 수행하기 위해 컴퓨터는 비트(bit)라는 측정 단위를 쓴다. 비트는 이진 숫자라는 뜻의 줄임말이며, 0과 1, 두 가지 값만 가질 수 있는 측정 단위이다.

❗비트열 하나의 비트는 0과 1, 이 두 가지 값만 저장할 수 있다. 컴퓨터 내부에서 물리적으로 표현될 때는, 켜고 끌 수 있는 스위치라 할 수 있다.

비트 한 개는 많은 양의 데이터를 나타내기엔 부족하여, 여러 숫자 조합을 컴퓨터에 나타내기 위해서는 비트열을 사용한다.

바이트(byte)는 여덟 개의 비트가 모여 만들어진 것으로, 하나의 바이트에 여덟 개의 비트가 있고, 비트 하나는 0과 1로 표현될 수 있기 때문에 2^8 = 256개의 서로 다른 바이트가 존재할 수 있다.

▶️ 다양한 데이터 표현

두 정수 a, b가 주어질 때 다음과 같은 형태의 계산식을 출력하는 코드를 작성해 보세요.

 a + b = c

❗ 제한사항

• 1 ≤ a, b ≤ 100

입출력 예

입력 #1

 4 5

출력 #1

 4 + 5 = 9

💭나의 생각

템플릿 리터럴을 사용하여(${}) 문자열 '4 + 5 = 9 '로 출력

• ${}의 결과는 문자열로 자동 변환됨

✍풀이

const readline = require('readline');
const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout
});

let input = [];

rl.on('line', function (line) {
    input = line.split(' ');
}).on('close', function () {
    console.log(`${Number(input[0])} + ${Number(input[1])} = ${Number(input[0])+ Number(input[1])}`);
});

다른 풀이 참고

const readline = require('readline')
const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout
}).on('line', function (line) {
    const [a, b] = line.split(' ')
    console.log(a, '+', b, '=', Number(a) + Number(b))
})

배열의 비구조화 할당을 사용한 것으로 보이는데..

출력 예 출력 #1

!@#$%^&*(\'"<>?:;

💭나의 생각 백슬래시와 작은따옴표를 붙여서 나란히 입력하면 백슬래시가 특수문자가 된다. 이를 직접 표시하기 위해선 백슬래시를 연속으로 두 번 사용하고 이를 백틱으로 감싸줘야한다.

✍️풀이

rl.on('close', function() {
      const answer = `!@#$%^&*(\\'"<>?:;`
    console.log(answer);
});