[React] Day_17 데일리 정리 (부제 : 끝나지 않은 1주차.)

 

림졍림졍아.. 쓰러지지 마라!! 너에겐 친구들이 있잔니(?)

 

'어라라 냅다 거-대한 이미지가 있는거지?' 라고 생각하신다면...

네.. 도란스뽀머 좋아해서 냅다 만든 짤방입니둥 (그렇다고 기계덕후는 아님)

오늘은 어제 작성 못했던 부분부터 이어서 작성해 보자구요?

도란스뽀머 칭구들과 함께.. 가보자고~🦾🤖

 

JavaScript (자바스크립트) 강의 정리 - 이어서

 

함수 (function) 

• 잘 쓰면 효율적인 코드제작 가능
• 함수에 대해서는 Day_3 에 적어놨으나..
  '링크 걸어놓으면 도대체 어디있는데?' 라고 하실까봐 내용을 발췌해 보았다. (자세한 내용은 링크(click!) 를 참고하세요)

대충 생각하면 어떤 값을 넣으면 새로운 값이 나오는, 우리나라 동화로 따지면 금도끼 은도끼 같은 거라고 할까..
은도끼를 던졌는데 냅다 금도끼를 줘버리시는 산신령님이 계시는 연못을 코딩적 시각으로 바라보면
'은도끼 = 입력값, 금도끼 = 결과값, 산신령 = 입력된 명령들 , 연못 = 함수' 로 볼 수 있을 것이다.

 

- 함수의 기본 형태

// 만들기
function 함수이름(필요한 변수들) {
	내릴 명령, 순차적 작성;
}
// 사용하기
함수이름(필요한 변수들);

 

- 예시

// 예제) 두 개의 숫자를 입력받아 덧셈을 한 후 내보내는 함수.
function add(x, y) {
    return x + y;
}

 

- 함수 표현식 / 함수 호출 (= 사용)

• 함수명() → add(입력값) [함수명 다르게 작성 시, 그 부분만 변경하자.]
• 함수의 input → 매개변수(매개체가 되는 변수!)
• retrun 문 뒤에 오는 값 : 반환값

function add(x, y) {
  return x + y;
}

console.log(add(3, 4));   // 7

 

 

 

 

함수 스코프

• 스코프(Scope) : 변수가 '선언된 함수 내에서만 접근할 수 있다.' 라는 것을 의미

- 전역 스코프 : 함수 밖에서 선언된 변수, 어디든지 참조가능

let x = 10;

function printX() {
  console.log(x);
}

printX(); // 10

 

- 지역변수 : 함수 내부에서 선언된 변수, 해당 함수 내에서만 참조가능

function printX() {
  let x = 10;
  console.log(x);
}

printX(); // 안뜬다!

 

- 블록 변수 : 선언된 변수, 해당 블록 내에서만 참조가능 (아래 예시에서의 블록 : if (true) )

if (true) {
  let x = 10;
  console.log(x);
}

console.log(x);   // ReferenceError: x is not defined

 

 

화살표 함수 ( => )

• ES6(ECMAScript 6)에 도입된 새로운 문법
• 함수 선언을 보다 간결하게 작성할 수 있음 (함수 이름 필요 없음!)

- 예시

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

// 화살표 함수로 변환한 방식
const add = (a, b) => a + b;

 

 

JavaScript 문법 정리 (3) - 문

 

[조건문]

 

if 문

- 가장 기본적인 'if' 문 (조건이 참인 경우에만 코드 실행)

// x가 10보다 크면, 'x는 양수입니다.' 표시
let x = 10;
if (x > 0) {
    console.log("x는 양수입니다.");
} 
// x는 양수입니다.

// 1-2 y의 길이가 5이상이면, 길이 표시
let y = "나는 얼렁뚱땅 림졍";

if (y.length >= 5) {
    console.log(y.length);
}
//10

 

- 'if-else' 문 (조건이 참인 경우, 거짓인 경우 각각 다른 코드 실행)

let x = -10;

if (x > 0) {
  console.log("x는 양수입니다.");
} else {
  console.log("x는 음수입니다.");
}
// x는 음수입니다.

 

- 'if-else if-else' 문 (조건 여러개일 때 사용. 순서대로 비교하여 해당 조건에 맞는 코드 실행)

let fruit = "딸기";

if (fruit === "딸기") {
  console.log("딸기 맛있졍");
} else if (fruit === "사과") {
  console.log("사과 맛있졍");
} else if (fruit === "자몽") {
  console.log("자몽 사랑해");
} else {
  console.log("아무것도 없다..");
}

 

- 'switch' 문 (조건 여러개일 때 사용. 조건이 많아질수록 'if-else' 문보다 간결하고 가독성 좋음)

let fruit = "딸기";

switch (fruit) {
  case "딸기":
    console.log("딸기 맛있졍");
    break; // 반드시 들어가야함.. (궁서체)
  case "사과":
    console.log("사과 맛있졍");
    break;
  case "자몽":
    console.log("자몽 사랑해");
    break;
  default:
    console.log("아무것도 없다..");
    break;
}

 

- 조건문 중첩 및 실행 

 

1) 중첩 : 마트료시카마냥 조건문 안에 조건문을 넣는다! → 복잡한 조건 판별 가능, 근데 너무 많이 사용되면 가독성 ↓↓

let age = 27;
let gender = "여성";

if (age >= 18) {
  if (gender === "남성") {
    console.log("성인 남성입니다.");
  } else {
    console.log("성인 여성입니다.");
  }
} else {
  console.log("미성년자입니다.");
}

// 결과 : 성인 여성입니다.

 

2) 실행 : '&&' 연산자를 활용하여 조건부 실행 가능. (두 조건이 모두 참일 때 출력)

let x = 10;

(x > 0) && console.log("x는 양수입니다."); // 둘 다 true, 출력 결과 : x는 양수입니다.

 

 

[반복문]

• 코드가 여러 번 반복 실행되도록 만들어주는 명령어 중 하나
• 주로 배열이나 객체 같은 자료 구조에서 효율적인 데이터 처리가 가능하도록 만들어줌

for 문

- 기본적인 'for' 문 (초기값, 조건식, 증감식을 사용하여 반복 횟수 제어)

// for 뒤의 괄호 부분은 순서대로 "초기값 / 조건식 / 증감식" 을 의미한다
for (let i = 0; i < 10; i++) {
  console.log(i);
}

 

- 배열과 함께 사용되는 'for' 문 (배열의 요소 개수만큼 반복하여 실행)

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

for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}

 

- 'for...in' 문 (객체의 프로퍼티 순으로 접근하여 출력) 

// * 프로퍼티 : 객체의 속성 or 특성 나타내는 값을 의미
const person = { name: "Alice", age: 25, city: "Seoul"
};

// console.log()의 경우 둘 중 하나를 사용하면 된다!근데 템플릿 리터럴(${}) 방식이 더 자주 사용됨. 
for (let key in person) {
  console.log(`${key}: ${person[key]}`);
  or
  console.log(key + ":"+ person[key]);
}

 

 

while 문

- 조건식이 참인 경우에만 코드 반복실행

let i = 0;

while (i < 10) {
    console.log(i);
    i++;
}

// 0부터 9까지 하나하나씩 출력 (아래는 예시임)
// 0
// 1
// ...

 

 

do...while 문

- 먼저 코드 1번 실행, 이후 조건식 체킹하여 반복 여부 결정

let i = 0;

do {
    console.log(i);
    i++;
} while (i < 10);

// 결과 = while의 예시와 동일

 

 

break / continue 문

• 반복문 흐름 제어에 적합

- 'break' 문 (반복문 즉시 종료, 더 이상 반복 없이 반복문 바깥 코드로 넘어가게 함)

for (let i = 0; i < 10; i++) {
    if (i === 5) {
    break;
    }
    console.log(i);
}

// 결과 : 0부터 4까지 출력 (아래는 예시)
// 0
// 1
// ...

 

- 'continue' 문 (현재 조건에서 남은 코드 실행X, 반복문의 처음으로 돌아감)

for (let i = 0; i < 10; i++) {
    if (i === 5) {
    continue;
    }
    console.log(i);
}

// 결과 : 5를 제외한 0부터 9까지 출력 (Break 문 예시처럼 출력됨)

 

더 작성은 가능한데.. 관련 메서드는 저번에 진득하게 적어놓은 것 같아서 생략하고싶다..

(...는 무슨 뒤에 배열 메서드 정리들 다 있잖아 지영아;;)

그래서 기존에 작성했던 배열 메서드 정리에 추가적으로 작성해봤습니다. 이렇게요.

 

약간 이 친구 같아 보이는건 기분탓이겠지..?

 

 

- 배열 메서드 정리 ( push / pop / shift / unshift / splice / slice )

// push(): 배열 끝에 요소를 추가
let fruits = ["사과", "바나나"];
fruits.push("딸기");
console.log(fruits); // ["사과", "바나나", "딸기"]

// pop(): 배열의 끝 요소 제거 후, 그 값을 반환
let fruits = ["사과", "바나나", "딸기"];
let lastFruit = fruits.pop();
console.log(lastFruit);  // "딸기"
console.log(fruits);     // ["사과", "바나나"]

// shift(): 배열의 첫 번째 요소 제거 후, 그 값을 반환
let fruits = ["사과", "바나나"];
let firstFruit = fruits.shift();
console.log(firstFruit);  // "사과"
console.log(fruits);      // ["바나나"]

// unshift(): 배열 앞쪽에 요소를 추가
let fruits = ["바나나"];
fruits.unshift("사과");
console.log(fruits);  // ["사과", "바나나"]

//splice(): 배열 요소 추가, 삭제 또는 교체하여 원본 배열을 변경
let fruits = ["사과", "바나나", "딸기"];
fruits.splice(1, 1, "포도");
console.log(fruits);  // ["사과", "포도", "딸기"]

// slice(): 배열의 일부를 추출 후 새로운 배열을 반환 (원본 배열은 변경 X)
let fruits = ["사과", "바나나", "딸기"];
let sliced = fruits.slice(0, 2);
console.log(sliced);  // ["사과", "바나나"]

 

- 메서드 정리 2 ( forEach / map / filter / reduce / find ) [Day_7 발췌]

// forEach() : 주어진 배열의 요소 출력, 반환값이 없어 주로 단순작업 수행 시 사용
const fruits = ['사과', '바나나', '딸기'];
fruits.forEach(fruit => {
    console.log(fruit);
	});  // 사과, 바나나, 딸기
    
// map() : 주어진 함수의 결과를 새로운 배열로 반환 (원본 배열은 변경 X)
const numbers = [1, 2, 3, 4];
const squared = numbers.map(num => num + num);
console.log(squared); // [2, 4, 6, 8]

// filter() : 조건을 만족하는 요소만을 모아 새로운 배열로 반환
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0); // [2, 4]

// reduce() : 배열의 모든 요소를 하나의 값으로 축약, 합산 or 누적에 사용
const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 10

// find(): 배열에서 조건을 만족하는 첫 번째 요소를 반환
let numbers = [1, 2, 3, 4, 5];
let firstEven = numbers.find(num => num % 2 === 0);
console.log(firstEven);  // 2

 

- 메서드 정리 3 ( some / every / sort / reverse )

// some(): 배열에서 하나라도 조건을 만족하면 true, 없으면 false
let numbers = [1, 2, 3, 4, 5];

let hasEven = numbers.some(num => num % 2 === 0); // 짝수 확인
console.log(hasEven);  // true (짝수 2, 4가 있어서 true)

// every(): 배열의 모든 요소가 조건을 만족하면 true, 하나라도 만족하지 않으면 false
let numbers = [1, 2, 3, 4, 5];

let allLessThan10 = numbers.every(num => num < 10); // all 10보다 작은지 확인
console.log(allLessThan10);  // true (모든 요소가 10보다 작음)

let allEven = numbers.every(num => num % 2 === 0); // all 짝수인지 확인
console.log(allEven);  // false (모든 요소가 짝수가 아님)

// sort(): 배열을 정렬, 문자열이 스탠다드. If 숫자 정렬 시, 비교 함수 사용해야 함
let fruits = ["사과", "바나나", "딸기", "포도"];
fruits.sort();
console.log(fruits);  // ["바나나", "딸기", "사과", "포도"] (알파벳 순으로 정렬)

// 숫자 정렬 예시 
let numbers = [20, 240, 10, 1, 48, 77];

numbers.sort((a, b) => a - b);// 1) 오름차순 정렬
console.log(numbers);  // [1, 10, 20, 48, 77, 240]

numbers.sort((a, b) => b - a);// 2) 내림차순 정렬
console.log(numbers);  // [240, 77, 48, 20, 10, 1]

// reverse(): 배열의 순서를 엎어버림
let fruits = ["사과", "바나나", "딸기"];
fruits.reverse();
console.log(fruits);  // ["딸기", "바나나", "사과"]

 

ㅂ... 별로였다면 지송..

 

 

마무리 - ㄴ...내용이 ㄲ...끝나지 않아

 

ㄷ... 두고보자.. TIL...

 

짜잘한 자료까지 정리하다 보니 오늘로 1주차 강의 못끝냈죠?

남은게 배열 추가 내용이랑 객체 및 객체 메서드 부분인데...

더 길게 적었다간 '하암-🥱 귀찮아서 안읽고 싶음..(쿨쿨)' 하고 냅다 안읽을게 뻔해서...😞

잠깐 멈추고 나머지 이어서 적어서 업로드 해보도록 하겄습니다...

 

+) 아, 그리고 TIL 마지막에 간소하게나마 KPT 회고처럼 적으면 좋을 거 같아서

오늘 부터 해보렵니다 ^-^ 여러분 많관부!

 

그래서 오늘의 (자체적) KPT 회고는요?

• Keep :  두통과 싸워서 이긴 나. 매우 칭찬해.
• Problem : 만성두통 또 너냐...🤦🏻‍♂️
• Try : 영양제 챙겨먹고 다니자 림졍림졍아...🤒

 

 

 

끝!