240510 TIL_개인 프로젝트2 (To Do List 제작), React 강의 (JS 문법 복습 > 변수 선언 | 객체 | 배열 | template literals | Destructuring | Spread Operator | 연산자 | chaining | module| 비동기 함수), 스탠다드 과제 (JS 자가 진단 > 비동기 함수)

미밍·2024년 5월 10일

TIL

우당탕탕 개발 일기

목록 보기

32/108

리액트 입문 | 1주차

변수 선언

var, let, const
let 과 const

객체와 배열

객체 접근 방법

점 표기법

object.key
e.g.

const user = {
	name : "르탄이".
    age : 30,
}

console.log(uwer.name);
출력 값 : 르탄이

괄호 표기법

e.g.

const user = {
	name : "르탄이".
    age : 30,
}

const attribute = "name"
console.log(user[attribute]);
출력 값 : 르탄이

객체 추가, 수정 및 삭제 방법

점 표기법 = (추가할 것)
접 표기법 = (수정할 것)
delete 점 표기법

단, 리액트에서는 이런 식으로 하지 않음

객체

object.keys(객체이름)
object.values(객체이름)
object.entries(객체이름) 객체를 쪼개서 키-밸류를 한 쌍의 배열로 반환
object.assign(객체 이름, 객체이름2) 객체2를 객체1에 추가

배열 접근법

array[i]

배열

array.push("추가할거")
array.pop 배열 마지막 요소 제거 및 반환
array.map(function() {}) 원본 배열에서 각 요소를 함수를 통해 가공하여 모든 요소를 새로운 배열로 리턴(반환)
array.filter(function() {}) 원본 배열에서 각 요소를 함수를 통해 가공하여 해당되는 요소를 새로운 배열로 리턴(반환)
array.reduce(function(누적된값, 일반값) {}) 인자가 무려 2개 결과물을 하나로 누적하여 반환
array.sort() 원본 배열 자체를 변경 (가변하는 함수) 문자열로 인식하기 때문에 숫자 타입이라면 다른 식으로 접근해야 함

template literals

문자열 표기 : ${}
줄바꿈 "\n"

Destructuring

객체 구조 분해

키-밸류가 쌍으로 키로 분해
const {키1, 키2} = 객체명

e.g. 응용

const person = {
	name : "미믹",
    age : 79,
};

fuction greet({ name, age }) {
	console.log(`안녕 내 이름은 ${name}, 나이는 {age}살이다.`);
    
greet(person);

e.g. 응용2 중첩 객체

const movie = {
	title : hi,
  	release : {
    	year : 2000,
        month : "Jun",
    },
};

const {title, release: {year},} = movie;

키 이름을 변경하고 싶을 때는 const { 본래 키 이름 : 바꿀 키 이름} = 객체명

배열 구조 분해

const [] = 배열명
배열에는 키가 없으므로, 위치(인덱스)가 중요하다!

세 번째만 뽑고 싶으면 const [,,변수명] = 배열명
하면 이제 변수명으로 부르면 된다.

Spread Operator

객체, 배열 복사

const A = {...객체명}
const B = [...배열명]

병합

const 가나 = {...ㄱ, ...ㄴ}
const 다라 = [...ㄷ, ...ㄹ]
ㄱ과 ㄴ 중 같은 요소가 있다면, ㄴ이 덮어씌워짐.
=> 다시 한 번 말하지만 문자열은 안 되고, 원본 배열과 영향이 없음!

Rest Operator

함수의 매개변수

...에 의해서 배열이 되는 형태

객체 분해 할당 시 여러 값을 그룹핑

객체 분해할 때 키가 102301201개일 경우에도 쓴다...
const {키1, ...rest} = 객체명
rest에는 키1 제외하고 전부 나온다!

삼항 연산자

조건 ? 참 : 거짓

연산자

truthy
falsy : false, 0, "", null, undefined, NaN

논리합연산자 ||

or
좌측이 falsy 하면 우측으로 평가
e.g.
(0인 변수) || 50 이면 50으로 출력

논리곱연산자 &&

and
(조건이 참)&&(실행문) : && 으로 가능!

null 병합 연산자 ??

조건과 참이 null로 같을 때 사용
조건 ? 조건(이자 참) : 거짓

조건(이자 참) ?? 거짓 으로 가능!

좌변이 언디파인드일 경우에만 우변으로 평가 (거짓을 보여줌)

optional chaining

중첩객체의 경우 타고 타고 타고 들어감 object.key1.key2.key3 ...
key의 이름을 잘못 썼을 때 보통 오류가 나는데,
혹시 key1이 수상하다 싶으면 object.key1?.key2.key3
물음표 점을 붙여주기~!=> undefined 출력
키 뿐만 아니라 함수에도 붙여줘도 된다. e.g. 함수명?.(); 으로 호출

Modules

사용해야 하는 이유? 종속성 관리
로딩 순서가 동기적으로 흐르기 때문에(순서대로) 수동으로 관리해야 하지만, 모듈을 쓰면 모두 괜찮다.

import, export

import { 함수명 as 바꿀 함수명 } from './가져올 파일.js';

export default 함수
default로 가져오는 건 오직 한 개만... 얘는 가져올 때 {} 없어도 됨

전체 내용 가져오기
import * as 어쩌고 from '경로';

promise, async, await

promise

? 비동기 작업에 최종 완료 또는 실패를 나타내는 객체
3가지 상태를 가짐
pending, fulfilled, rejected

new promise()

생성자 함수로 함수를 인자를 넣어야 하며, 안에 resolve와 reject가 필요

then(), catch()

안에 함수 필요 => 둘 다 promise 반환

async, await

async 함수는 항상 promise 반환

await

? 프로미스의 완료(성공, 실패)를 기다려야 하므로 순서대로 처리를 해야하다면 무조건 필요하다. 아니면 pending의 상태가 반환될 것이다.

JS 자가진단_강의 전에 진행

조금 높은 목표를 가지고 스탠다드로 두둥!

JS 자가 진단 테스트를 하는데 기억이 새록새록하는 것도 있고, 아예 저기... 저기... 저리로 가주시면 안 될라나용... 싶은 친구도 있었다... 약간 헷갈리는 것부터, 못 푼 것까지 총 정리하기로!

// [요구사항]
// 다음 문자열 배열에서 'stop' 문자를 만났을 때 반복을 중지하고, 'skip' 문자를 만났을 때 해당 반복을 건너뛰고 나머지 문자열들을 출력하세요.

// [코드]
let words = ['apple', 'banana', 'skip', 'cherry', 'stop', 'date', 'elephant'];
// 여기에 코드를 작성하세요.

// [테스트]
// 출력: apple, banana, cherry

이 녀석 오랜만이다... 싶어서 순간 버벅였다!

let words = ['apple', 'banana', 'skip', 'cherry', 'stop', 'date', 'elephant'];

for (let word of words) {
    if (word === 'stop') {
        break;
    } else if (word === 'skip') {
        continue;
    }
    console.log(word);
}

배열이라 for of로 돌렸고, break랑 continue 정말 잊을 뻔 했다~

// [요구사항]
// 아래의 변수들을 사용하여 단축 속성명을 이용한 객체를 생성하세요.

// [코드]
let a = "hello";
let b = "world";
// 여기에 코드를 작성하세요.
const obj = { ... ?????? }

// [테스트]
// 생성된 객체의 a 속성의 값이 "hello"이고, b 속성의 값이 "world"인지 확인하세요.

변수를 사용하여 객체 생성

let a = "hello";
let b = "world";

const obj = { a, b };

🔻얘는 못 풀었다!!! 이유는 전개구문이 뭐더라 싶어서...

// [요구사항]
// 아래의 배열을 전개구문을 사용하여 새로운 배열에 복사하세요.

// [코드]
let fruits = ["apple", "banana", "cherry"];
let newFruits;
// 여기에 코드를 작성하세요.

// [테스트]
// newFruits 배열이 ["apple", "banana", "cherry"]인지 확인하고, 원본 fruits 배열과는 다른 참조를 가지고 있는지 확인하세요.

전개... 구문...? 🤨🧐? 원본 배열과 다른 참조...? 어디서 들어봤는데... 했다.
spread였다. 아하! 💡💡 앞으로는 한국어 영어 다 알아놓기로!!
-> 스프레드(*문자열은 안 된다)는 복사의 개념이라 원본 배열과는 다른 참조를 가지고 있다.

let fruits = ["apple", "banana", "cherry"];
let newFruits = [...fruits];

그럼 쉽지...

그런데 대망의 '[4] 자바스크립트 비동기 처리 이해도 평가 항목'이 나타나는데...

문제1
// [요구사항]
// 아래의 함수를 async/await를 사용하여 비동기로 작동하게 만드세요.

// [코드]
function fetchData() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve("Data fetched!");
        }, 1000);
    });
}

// 여기에 코드를 작성하세요.

// [테스트]
// fetchData 함수를 호출하여 "Data fetched!" 문자열이 정상적으로 반환되는지 확인하세요.

음🤨 resolve 음

문제2
// [요구사항]
// 아래의 함수에서 then, catch, finally를 사용하여 비동기 처리를 하고,
// 성공적으로 데이터를 가져오면 "Data: [데이터]", 에러가 발생하면 "Error: [에러 메시지]",
// 그리고 작업이 끝났을 때 "Process completed"를 출력하세요.

// [코드]
function fetchDataWithError() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            reject("Network Error");
        }, 1000);
    });
}

// 여기에 코드를 작성하세요.

// [테스트]
// fetchDataWithError 함수를 호출하여 적절한 메시지들이 출력되는지 확인하세요.

으음🧐 음 .then .catch .error 음음...

문제3
// [요구사항]
// 아래의 async/await 함수를 then ~ catch로 변환하세요.

// [코드]
async function getData() {
    let response = await fetch('https://api.example.com/data');
    let data = await response.json();
    return data;
}

// 여기에 코드를 작성하세요.

// [테스트]
// 변환된 함수를 호출하여 동일하게 데이터를 반환하는지 확인하세요.

... 🙃
오케이 여기까지~

한 줄 요약 : ES6가 이렇게 중요할 줄 알았으면 더 열심히 공부를 했을 텐데 하지만 후회해도 이미 늦었으니 지금이라도 열심히 하자... 프로미스 용법을 다시 한 번 꼭 살펴보자...