18일차 JSONPlaceholder 연습문제

워니·2024년 11월 6일

[Devcourse] 연습 문제 풀이

목록 보기

4/5

< 문제 풀면서 공부한 것 >

json 데이터를 활용하여 코드를 작성하는 것이 아직 익숙치 않다 (연습 많이 필요)
forEach와 map의 차이

 - forEach()
   - 배열의 각 요소에 대해 주어진 콜백 함수를 한 번씩 실행
   - 반환값이 없다.
   - 배열을 순회할 때 값을 변환하거나 새로운 배열을 만들지 않는다
   - 아래 코드에서 forEach는 각 숫자에 대해 console.log를 호출하지만,
     배열의 값을 변경하거나 새로운 배열을 반환하지 않는다.
     ex)
     const numbers = [1, 2, 3, 4];
     numbers.forEach((num) => {
     console.log(num * 2); // 각 요소를 2배한 값을 출력
     });
     // 출력: 2, 4, 6, 8

 - map()
   - 배열의 각 요소를 변환하여 새로운 배열을 반환
   - 원본 배열을 변경하지 않ㅇ으며, 변환된 결과로 이루어진 새로운 배열 반환
   - 배열을 순회하면서 각 요소를 변환하고 그 결과를 새로운 반환할 때 사용
   ex)
   const numbers = [1, 2, 3, 4];
   const doubled = numbers.map((num) => num * 2);
   console.log(doubled); // 새로운 배열 [2, 4, 6, 8] 출력

sort() 정렬 기준

기본적으로 숫자는 오름차순 , 문자열은 알파벳순
문자열 내림차순 정렬할 때 localeCompare() 사용

   1. 오름차순 정렬(기본 동작)
   let numbers = [10, 5, 100, 1];
   numbers.sort();  // 기본적으로 문자열 기준으로 정렬
   console.log(numbers);  // [1, 10, 100, 5]

   2. 내림차순 정렬
   let numbers = [10, 5, 100, 1];
   numbers.sort((a, b) => b - a);  // 내림차순 정렬
   console.log(numbers);  // [100, 10, 5, 1]

   3. 문자열을 내림차순으로 정렬
   let words = ['banana', 'apple', 'cherry', 'date'];
   words.sort((a, b) => b.localeCompare(a));  // 내림차순 정렬
   console.log(words);  // ['date', 'banana', 'cherry', 'apple']

문제 1

설명: 랜덤한 게시물의 제목을 가져와 출력하는 getRandomPostTitle 함수를 작성하세요.

API: https://jsonplaceholder.typicode.com/posts

function getRandomPostTitle() {
    // 여기에 코드를 작성하세요
}

getRandomPostTitle(); // Random Post Title: nostrum quis quasi placeat

< 나의 문제 풀이 >
function getRandomPostTitle() {
  fetch(`https://jsonplaceholder.typicode.com/posts`)
    .then((response) => {
      if (!response.ok) {
        throw new Error("Error"); // error 메세지 표시
      }
      return response.json(); // json 데이터로 파싱
    })
    .then((posts) => {
      // (posts 객체수 * (0~1 난수)) => 소수점 제거 = 랜덤 인덱스 생성
      const randomIndex = Math.floor(Math.random() * posts.length);
      // 랜덤 객체의 타이틀 출력
      console.log(`Random Post Title: ${posts[randomIndex].title}`);
    })
    .catch(console.error);
}
getRandomPostTitle();

문제 2

설명: 사용자 ID를 입력받아 해당 사용자의 정보를 가져와 출력하는 getUserInfo 함수를 작성하세요.

API: https://jsonplaceholder.typicode.com/users/${userId}

function getUserInfo(userId) {
    // 여기에 코드를 작성하세요
}
getUserInfo(1); // Name: Leanne Graham, Email: Sincere@april.biz

< 나의 문제 풀이 >
function getUserInfo(userId) {
  fetch(`https://jsonplaceholder.typicode.com/users/${userId}`) //
    .then((response) => {
      if (!response.ok) throw new Error("Error"); // error 메세지 표시
      return response.json(); // json 데이터로 파싱
    })
    .then((user) => {
      // 주어진 id값을 가지는 객체의 이름과 이메일 출력
      console.log(`Name: ${user.name}, Email: ${user.email}`);
    })
    .catch(console.error);
}
getUserInfo(1);

문제 3

설명: 게시물의 ID를 입력받아 해당 게시물의 내용을 가져와 출력하는 getPostDetails 함수를 작성하세요.

API: https://jsonplaceholder.typicode.com/posts/${postId}

function getPostDetails(postId) {
    // 여기에 코드를 작성하세요
}

getPostDetails(1); // 출력 예상 결과는 아래에

Post Title: sunt aut facere repella...생략..., Body: quia et suscipit ...생략...

< 나의 문제 풀이 >
function getPostDetails(postId) {
  fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`) //
    .then((response) => {
      if (!response.ok) throw new Error("Error");
      return response.json();
    })
    .then((post) =>
      console.log(`Post Title: ${post.title}, Body: ${post.body}`)
    )
    .catch(console.error);
}
getPostDetails(1);

문제 4

설명: 모든 사용자의 이름과 이메일을 출력하는 getAllUsers 함수를 작성하세요.

API: https://jsonplaceholder.typicode.com/users

function getAllUsers() {
    // 여기에 코드를 작성하세요
}

getAllUsers();

ame: Leanne Graham, Email: Sincere@april.biz
Name: Ervin Howell, Email: Shanna@melissa.tv
Name: Clementine Bauch, Email: Nathan@yesenia.net
Name: Patricia Lebsack, Email: Julianne.OConner@kory.org
Name: Chelsey Dietrich, Email: Lucio_Hettinger@annie.ca
Name: Mrs. Dennis Schulist, Email: Karley_Dach@jasper.info
Name: Kurtis Weissnat, Email: Telly.Hoeger@billy.biz
Name: Nicholas Runolfsdottir V, Email: Sherwood@rosamond.me
Name: Glenna Reichert, Email: Chaim_McDermott@dana.io
Name: Clementina DuBuque, Email: Rey.Padberg@karina.biz

< 나의 문제 풀이 >
function getAllUsers() {
  fetch(`https://jsonplaceholder.typicode.com/users`) //
    .then((response) => {
      if (!response.ok) throw new Error("error");
      return response.json();
    })
    .then((users) => {
      users.forEach((user) => {
        console.log(`Name: ${user.name}, Email: ${user.email}`);
      });
    })
    .catch(console.error);
}
getAllUsers();

문제 5

설명: 특정 게시물의 ID를 입력받아 해당 게시물의 댓글을 가져와 출력하는 getPostComments 함수를 작성하세요.

API: https://jsonplaceholder.typicode.com/comments?postId=${postId}

function getPostComments(postId) {
    // 여기에 코드를 작성하세요
}

getPostComments(1);

Comment by id labore ex et quam laborum: laudantium enim quasi est quidem magnam voluptate ipsam eos
tempora quo necessitatibus
dolor quam autem quasi
reiciendis et nam sapiente accusantium
Comment by quo vero reiciendis velit similique earum: est natus enim nihil est dolore omnis voluptatem numquam
et omnis occaecati quod ullam at
voluptatem error expedita pariatur
nihil sint nostrum voluptatem reiciendis et
Comment by odio adipisci rerum aut animi: quia molestiae reprehenderit quasi aspernatur
aut expedita occaecati aliquam eveniet laudantium
omnis quibusdam delectus saepe quia accusamus maiores nam est
cum et ducimus et vero voluptates excepturi deleniti ratione
Comment by alias odio sit: non et atque
occaecati deserunt quas accusantium unde odit nobis qui voluptatem
quia voluptas consequuntur itaque dolor
et qui rerum deleniti ut occaecati
Comment by vero eaque aliquid doloribus et culpa: harum non quasi et ratione
tempore iure ex voluptates in ratione
harum architecto fugit inventore cupiditate
voluptates magni quo et

< 나의 문제 풀이 >
function getPostComments(postId) {
  fetch(`https://jsonplaceholder.typicode.com/comments?postId=${postId}`)
    .then((response) => {
      if (!response.ok) throw new Error("error");
      return response.json();
    })
    .then((post) => {
      post.forEach((user) =>
        console.log(`Comment by ${user.name}: ${user.body}`)
      );
    })
    .catch(console.error);
}
getPostComments(1);

문제 6

설명: 모든 댓글의 내용을 가져와 출력하는 getAllCommentBodies 함수를 작성하세요.

API: https://jsonplaceholder.typicode.com/comments

function getAllCommentBodies() {
    // 여기에 코드를 작성하세요
}

getAllCommentBodies();

Comment: laudantium enim quasi est quidem magnam voluptate ipsam eos
tempora quo necessitatibus
dolor quam autem quasi
reiciendis et nam sapiente accusantium
Comment: est natus enim nihil est dolore omnis voluptatem numquam
et omnis occaecati quod ullam at
voluptatem error expedita pariatur
nihil sint nostrum voluptatem reiciendis et
Comment: quia molestiae reprehenderit quasi aspernatur
...생략...

< 나의 문제 풀이 >
function getAllCommentBodies() {
  fetch(`https://jsonplaceholder.typicode.com/comments`)
    .then((response) => {
      if (!response.ok) throw new Error("error");
      return response.json();
    })
    .then((post) => {
      post.forEach((user) => console.log(`Comment: ${user.body}`));
    })
    .catch(console.error);
}
getAllCommentBodies();

문제 7

설명: 모든 게시물의 제목을 정렬하여 출력하는 getSortedPostTitles 함수를 작성하세요.

API: https://jsonplaceholder.typicode.com/posts

function getSortedPostTitles() {
    // 여기에 코드를 작성하세요
}

getSortedPostTitles();

a quo magni similique perferendis
ad iusto omnis odit dolor voluptatibus
adipisci placeat illum aut reiciendis qui
aliquid eos sed fuga est maxime repellendus
asperiores ea ipsam voluptatibus modi minima quia sint
at nam consequatur ea labore ea harum
aut amet sed
...생략...

< 나의 문제 풀이 >
function getSortedPostTitles() {
  fetch(`https://jsonplaceholder.typicode.com/posts`)
    .then((response) => {
      if (!response.ok) throw new Error("error");
      return response.json();
    })
    .then((posts) => {
      const postSort = posts.map((post) => post.title).sort();
      console.log(postSort);
    });
}
getSortedPostTitles();

문제 8

설명: 모든 사용자의 주소 정보를 가져와 출력하는 getAllUserAddresses 함수를 작성하세요.

API: https://jsonplaceholder.typicode.com/users

function getAllUserAddresses() {
    // 여기에 코드를 작성하세요
}

getAllUserAddresses();

Address of Leanne Graham: Apt. 556 Kulas Light, Gwenborough, 92998-3874
Address of Ervin Howell: Suite 879 Victor Plains, Wisokyburgh, 90566-7771
Address of Clementine Bauch: Suite 847 Douglas Extension, McKenziehaven, 59590-4157
Address of Patricia Lebsack: Apt. 692 Hoeger Mall, South Elvis, 53919-4257
Address of Chelsey Dietrich: Suite 351 Skiles Walks, Roscoeview, 33263
Address of Mrs. Dennis Schulist: Apt. 950 Norberto Crossing, South Christy, 23505-1337
Address of Kurtis Weissnat: Suite 280 Rex Trail, Howemouth, 58804-1099
Address of Nicholas Runolfsdottir V: Suite 729 Ellsworth Summit, Aliyaview, 45169
Address of Glenna Reichert: Suite 449 Dayna Park, Bartholomebury, 76495-3109
Address of Clementina DuBuque: Suite 198 Kattie Turnpike, Lebsackbury, 31428-2261

< 나의 문제 풀이 >
function getAllUserAddresses() {
  fetch(`https://jsonplaceholder.typicode.com/users`)
    .then((response) => {
      if (!response.ok) throw new Error("error");
      return response.json();
    })
    .then((users) =>
      users.forEach((user) =>
        console.log(
          `Address of ${user.name}, ${user.address.street}, ${user.address.suite}, ${user.address.city}, ${user.address.zipcode}`
        )
      )
    );
}
getAllUserAddresses();

문제 9

설명: 특정 사용자가 작성한 모든 게시물의 제목을 출력하는 getUserPostTitles 함수를 작성하세요.

API: https://jsonplaceholder.typicode.com/posts?userId=${userId}

function getUserPostTitles(userId) {
    // 여기에 코드를 작성하세요
}

getUserPostTitles(1);

Post Title: sunt aut facere repellat provident occaecati excepturi optio reprehenderit
Post Title: qui est esse
Post Title: ea molestias quasi exercitationem repellat qui ipsa sit aut
Post Title: eum et est occaecati
Post Title: nesciunt quas odio
Post Title: dolorem eum magni eos aperiam quia
Post Title: magnam facilis autem
Post Title: dolorem dolore est ipsam
Post Title: nesciunt iure omnis dolorem tempora et accusantium
Post Title: optio molestias id quia eum

< 나의 문제 풀이 >
function getUserPostTitles(userId) {
  fetch(`https://jsonplaceholder.typicode.com/posts?userId=${userId}`) //
    .then((response) => {
      if (!response.ok) throw new Error("error");
      return response.json();
    })
    .then((users) =>
      users.forEach((user) => console.log(`Post Title: ${user.title}`))
    );
}
getUserPostTitles(1);