[TIL] 24.12.30(월)

React 입문 1주차

 

1-1

let, const, var

 

변수의 필요성 1: 데이터 저장 및 관리의 필요성

변수는 프로그래밍에서 데이터를 저장하고, 그 값을 쉽게 관리하고 재사용할 수 있도록 해줌.  예를 들어, 사용자로부터 받은 입력을 처리하거나 계산 결과를 다시 사용해야 할 때 변수 없이는 각 단계마다 데이터를 반복으로 처리해야 함. 효율적인 데이터 관리를 위해서는 변수 선언 매커니즘은 필수라고 할 수 있음.

 

변수의 필요성 2: 프로그램 복잡성 관리

변수가 없다면 직접 값을 기입해야 하므로, 코드의 복잡성이 증가하고, 오류 가능성이 높아짐. 또한, 프로그램의 확장성과 유지보수성이 떨어질 수 있음. 변수를 사용하면 코드의 가독성이 높아지고, 수정이 필요할 때 적은 변경으로 원하는 결과를 얻을 수 있음.

 

변수의 필요성3 : 재사용성 및 유지보수 향상

변수를 통해 정의된 데이터 값을 여러 위치에서 재사용함으로써, 코드의 재사용성을 높일 수 있음. 예를 들어, 한 함수에서 계산된 결과를 다른 여러 함수에서도 활용할 수 있음. 특히, 큰 프로그램이나 복잡한 시스템에서 큰 이점이 될 수 있음

 

* 글로벌 변수는 전체 코드에서 접근할 수 있으며, 블록 스코프 변수(let, const)는 선언된 블록 내에서만 접근할 수 있고, 함수 스코프 변수(var)는 선언된 함수 내에서 유효함. (var는 최대한 사용 안하는 것이 좋음)

* const: 재할당 불가 / let, var: 재할당 가능

* const를 사용하여 상수를 선언하면, 프로그램 내에서 값이 변경되지 않는 변수를 명확하게 표현할 수 있음. 코드의 안정성을 높이고, 의도치 않은 값 변경으로 인한 버그를 예방할 수 있기 때문에 올바른 상수를 사용하는 것은 매우 중요함

* let을 사용하면 변수의 값을 필요에 따라 유연하게 변경할 수 있음

* 변수 선언은 가장 먼저 const를 떠올리고, 재할당이 필요할 경우만 let을 떠올리면 좋음!

 

* var를 지양해야 하는 이유:  var 선언된 변수는 선언 전에도 참조할 수 있는 '호이스팅 현상' 때문에 코드를 혼란스럽게 만들 수 있음. 이는 변수를 사용하기 전에 선언해야 하는 좋은 프로그래밍 관행과 대치됨. (논리적인 흐름에서 자꾸 벗어남)

 

* const와 let도 호이스팅이 됨: 하지만, var처럼 초기값을 undefined로 미리 할당하지 않는다는 점에서 가독성과 유지보수 측면에서 훨씬 도움이 됨. 논리적인 흐름에서 벗어나지 않는 것! > 최대힌 var 사용을 지양하고 대신 const/let을 사용해야 함

let blockScopeVariable = "Availabled only in this block" // 전역 스코프
if (true) {
    var blockedScope = "Visible inside this block"
    // let과 const는 블록 스코프이기 때문에 해당 블록 내에서만 작용하지만,
    // var는 블록 범위 밖에서도 사용 가능(최대한 사용 안하는 것이 좋음)
    console.log(blockedScope);
}
console.log(blockScopeVariable);


for (let i = 0; i < 3; i++) {
    console.log(i);
}

// console.log(i); > 블록 외부에서 출력하면 오류 발생

 

 

 

1-2

객체와 배열 - 1

// 객체 : key - value
// JSON(Javascript Object Notation)

const user = {
    name: "르탄이",
    age: 30,
    isAdmin: true,
    printHello: () => console.log("hello"),
};

// 객체 접근 : 괄호 표기법 []
const attribute = "name";
console.log(user[attribute]);

// 객체 접근 : 점 표기법(.)
console.log(user.name);
console.log(user.age);
user.printHello();

user.email = "jay@gmail.com"; // 추가
user.age = 31; // 수정
delete user.isAdmin; // 삭제

console.log(user);

// 배열(순차 / 문자의 배열 / 숫자의 배열 등)
const numbers = [1, 2, 3];
console.log(numbers);

//
console.log(numbers[1]); // 접근
numbers[1] = 10; // 변경
console.log(numbers[1]); // 변경 후 접근

//객체
// (1) Object.keys()
const user = {
    name: "르탄이",
    age: 30,
    isAdmin: true,
};
const keys = Object.keys(user);
console.log(keys);

// (2) Object.values()
const values = Object.values(user);
console.log(values);

// (3) entries
const entries = Object.entries(user);
console.log(entries);

// (4) assign 출처 객체로부터 대상 객체로 값(속성)을 복사함
const userDetails = {
    occupation: "개발자",
};
Object.assign(user, userDetails);
console.log(user);

 

 

 

1-3

객체와 배열 - 2

// 배열
// push, pop
const fruits = ["Apple", "Banana"];
console.log(fruits);

// "Orange"를 추가
fruits.push("Orange")
console.log(fruits);

const lastFruit = fruits.pop(); // 배열의 끝에 위치한 요소가 따로 튀어나옴
console.log("----");
console.log(lastFruit);
console.log(fruits);

// map : 원본 배열에서 각 요소를 가공한 '새로운 배열'을 리턴하는 함수

// 1) 배열 내의 모든 요소 각각에 대해
// 2) 주어진 함수를 호출한 결과를 모아
// 3) 새로운 배열을 반환

const numbers = [1, 2, 3, 4, 5];
const squared = numbers.map(function(num) {
    return num * num;
});

// [1, 4, 9, 16, 25]; (squared=제곱)
// map은 요소의 갯수만큼 한 바퀴를 돈다. return을 작성하지 않으면 undefined로 요소 갯수만큼 출력됨
console.log(squared);

// filter : 주어진 함수의 테스트를 통과하는 모든 요소를 새로운 배열로 만듦

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(function(num){
    return num % 2 === 0; //짝수라는 뜻
});
// [2, 4];
console.log(evenNumbers);


const 동영상리스트 = [
    {
        아이디: 1,
        제목: "동영상01",
        썸네일이미지: "image01.jpg"
    },
    {
        아이디: 2,
        제목: "동영상02",
        썸네일이미지: "image02.jpg"
    },
    {
        아이디: 3,
        제목: "동영상03",
        썸네일이미지: "image03.jpg"
    },
    {
        아이디: 4,
        제목: "동영상02",
        썸네일이미지: "image04.jpg"
    },
];

const 필터링된동영상리스트 = 동영상리스트.filter(function(영상){
    return 영상.제목 === "동영상02";
});
console.log(필터링된동영상리스트);

// reduce
// 배열의 각 요소에 대해 주어진 함수를 실행하고 결과물을 누적해서 반환(=누적기)

const numbers = [1, 2, 3, 4, 5];

const result = numbers.reduce(function(누적된값, 일반값){
    console.log("------");
    console.log(누적된값);
    console.log(일반값);

    return 누적된값 + 일반값;
});

console.log('result =>', result);

// sort : 새로운 값을 반환하지 않고 원본 내에서 원본의 배열을 바꿈
const fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits);
fruits.sort();
console.log(fruits);

const numbers = [40, 100, 1, 5, 25];
numbers.sort(function (a, b){
    return a - b; //오름차순 정렬, 내림차순은 b -a;
});
// sort안에 기본 옵션을 넣지 않으면 요소들을 문자로 가정하고 계산하여 정렬/출력(유니코드 상에서는 100이 25보다 앞서기 때문에 먼저 나옴)
console.log(numbers);

 

 

 

1-6

화살표 함수, 조건 연산자, 단축 평가

// // 기존 함수식 처리 방법

const add1 = function (a, b){
    return a + b;
};

const result = add1(3, 5);
console.log(result);


// 화살표 함수 사용: function 키워드 대신 화살표 기호 => 사용
const add2 = (a, b) => {
    return a + b;
};

console.log(add2(1, 3));


// 리턴이 한 줄인 경우 중괄호와 리턴 키워드 필요 없음
const add3 = (a, b) => a + b;
console.log(add3(1, 3));

// 조건 연산자 = 삼항 연산자

const score = 85;
let grade = "";

if (score >= 80) {
    grade = "A";
} else {
    grade = "B";
};

// 위의 식은 너무 줄이 길어지기 때문에 아래와 같이 씀

const score = 85;
const grade = score >= 80 ? "A" : "B"; // 삼항 연산자
// 처음 값을 할당할 때 부터 A나 B를 할당하기 때문에 변수(let)일 필요도 없이 상수(const) 사용

console.log(grade);

// 단축 평가
// 논리 연산자를 활용(||, &&, ?., ??)

// (1) 논리합 연산자(||)
// truthy, falsy
// falsy : false, 0, "", null, undefined, NaN
const getUserName = (user) => {
    if (!user.name) { // (!user.name) = truthy한 값이 들어오지 않은 경우 = falsy한 값인 경우
        return "신원미상";
    }

    return user.name;
};
// 위의 식도 귀찮게 느껴져서 아래와 같이 쓸 수 있음

const getUserName = (user) => {
        return user.name || "신원미상"; //앞의 값이 falsy한 값이면 신원 미상으로 표시해줘!
};

// 리턴이 한 줄이기 때문에 중괄호와 리턴도 뺄 수 있음
const getUserName = (user) => user.name || "신원미상";

const person = {
    age: 30,
    name: "르순이",
};
console.log(getUserName(person));


// (2) 논리곱 연산자 (&&) 좌변이 truthy한 값일 때만 우변을 실행or값들을 출력한다.

const loggedIn = true;
const userName = "르탄이";

loggedIn && console.log(`환영합니다 ${userName}님!`); //옵션 + ₩  = `

// optional chaining
const user = {
    profile2: {
        name: "르탄이",
        details: {
            age: 30,
            location: "서울시 강남구",
        },
    },
};

console.log(user.profile?.details.age);


// Null 병합 연산자 (??)
let userLocation = null;
console.log(userLocation ?? "없는위치");
// userLocation이 존재하면 그냥 보여주고, 만약에 존재하지 않으면 우측을 보여줘(평가해줘)
// Null 병합 연산자(??)는 좌변이 null 또는 undefined 인 경우에만 우변을 평가함

// Null 병합 연산자 (??)
// 논리합 연산자 (||)

const displayPreferences = (preference) => {
    const textLength = preference.textLength || 50;
    // 인풋으로 받은 preference의 textLength가 truthy한 값이 아니라면, 우측을 평가한다 = 논리합 연산자(||)
    console.log("1 =>", textLength);

    const itemsPerPage = preference.itemsPerPage ?? 10;
    console.log("2 =>", itemsPerPage);
    // 인풋으로 받은 preference의 itemsPerPage가 만약에 undefined 또는 null인 경우에 우측을 평가한다 = Null 병합 연산자(??)
}

const userPreference = {
    textLength: 0,
    itemsPerPage: null,
};

displayPreferences(userPreference);