3주 - 객체 배열

최신 웹 기능은 주로 API(응용 프로그램 프로그래밍 인터페이스)를 사용합니다. 많은 API가 서로 개체 배열을 전달하여 데이터를 반환합니다.

이번 주의 학습 가치는 LearnJavaScript.online이 개체 배열 형식의 API 데이터 관리에 중점을 두는 것을 검토했습니다.

주요 자원 - LearnJavaScript.online

보충 자료 - MDN JavaScript

배운 것

이번 주 학습 가치는 이전 주에 배열 함수를 기반으로 하지만 선택적 연결과 결합된 개체 배열을 관리하는 복잡성이 추가되었습니다.

이번 주에 흥미로운 점은 Twitter API에 대해 시뮬레이션된 객체로 작업하는 것이었습니다. 예를 들면 다음과 같습니다.

const tweets = [
    {
        id: 1,
        message: "Week 2 - JavaScript and Beyond...",
        user: {
            handle: "jack_wj"
        },
        stats: {
            likes: 1,
            retweets: 1
        }
    },
    {
        id: 2,
        message: "Week 3 - Array of Objects",
        user: {
            handle: "jack_wj"
        },
        stats: {
            likes: 1,
            retweets: 1
        }
    }
];

const socialScore = tweets.reduce((total, tweet) => {
    return total + tweet.stats.likes + tweet.stats.retweets;
}, 0);
console.log(socialScore); // 4

const messages = tweets.map(tweet => tweet.message); // [ 'Week 2 - JavaScript and Beyond...', 'Week 3 - Array of Objects' ]
console.log(messages);

배열 내에서 관리되는 개체의 시각화를 개선하는 한 가지 방법은 reduce 함수 내에서 일반적으로 사용되는 "현재"변수 이름을 변경하는 것이지만 대신 단일 변수 이름으로 참조하는 것입니다. "트위터".

지금까지 이번 주에 Express 및 React와 같은 프레임워크에 구축하는 데 도움이 되는 API가 데이터를 관리하고 전송하는 방법을 소개하기 시작했습니다.

리소스 검토

이번 주에는 이전 주만큼 많은 진전이 없었지만 자료는 API가 이전 주에 구축된 간결한 방식으로 데이터를 관리하는 방법을 부드럽게 소개하기 시작했습니다.

또한 try...catch, optional chaining 및 nullish 병합과 같은 더 많은 중간 콘텐츠를 도입하기 시작했습니다.

LearnJavaScript.online 리소스는 분명히 복잡성이 증가했지만 사용 편의성과 학습에 대한 구조화된 접근 방식에서 안정성을 유지했습니다.

회고전

복잡성이 증가함에 따라 LearnJavaScript.online에서 배우고 있는 지식을 다른 콘텐츠에 연결하여 배우고 있는 교훈을 더욱 복합적으로 만드는 데 도움이 되는 React 또는 Express를 살펴보는 것이 좋습니다. 그러나 이것은 커밋하기 전에 생각해야합니다.

종료

다음주까지!

~ 잭/종료