[항해99] 온보딩 스터디 - 6일차 TIL

🦄 온보딩 스터디 6일차 TIL

✨03/12 : 목표 : JS 기초 객체 실습 및 알고리즘

---

📒강의 노트 정리

01. 실습 예제 - 쇼핑몰 회원들의 정보를 관리하기 위해 데이터화 하기 

 

function sendMessage(userName) {
  console.log(`[메시지 발송] ${userName}님 에게 메시지를 발송했습니다.`);
}

// ---------------- 시 작 ------------------- //

/*1. 쇼핑몰을 운영하고 있습니다. 각 회원들의 정보를 관리하기 위해 데이터화하세요.
    
    회원정보는 
    아이디, 이름, 나이, 이메일, 레벨, 보유 포인트, 마케팅 수신동의여부 
    정보를 포함하고 있습니다.

    (레벨은 1~3까지) */

// users, members, userList
const users = [
  {
    id: "junyoung12",
    name: "junyoung",
    age: 27,
    email: "junyoung12@gmail.com",
    level: 1,
    point: 3000,
    marketingAgree: true,
  },
  {
    id: "jimin34",
    name: "jimin",
    age: 30,
    email: "jimin34@gmail.com",
    level: 1,
    point: 1000,
    marketingAgree: false,
  },
  {
    id: "hanbit56",
    name: "hanbit",
    age: 28,
    email: "hanbit56@gmail.com",
    level: 2,
    point: 4000,
    marketingAgree: true,
  },
  {
    id: "hanghae99",
    name: "hanghae",
    age: 28,
    email: "hanghae99@gmail.com",
    level: 2,
    point: 500,
    marketingAgree: true,
  },
];


/*2.마케팅 수신이 가능한 회원분들에게
    SendMessage 함수를 사용해 메시지를 발송하세요.*/

userList.forEach((user) => user.marketingAgree && sendMessage(user.name));


/*3.이벤트를 진행하기로 했습니다. 레벨 2이상 회원에게 5000포인트를 지급하세요. */

userList.forEach((user) => user.level >= 2 && (user.point += 5000));

// 매니저님 풀이
// 비파괴적 방식
const eventedUsers = userList.map((user) => {
  if (user.level >= 2) {
    return {
      ...user,
      point: user.point + 5000, // 덮어씌우기
    };
  //새로 데이터를 재가공하기 때문에 if문에서 일치하지 않을 경우
  //예외 처리(return)를 해주지 않으면 return 값이 없어 undefined가 된다.
  } else { 
    return user;
  }
});


/*4.고객중 hanghae99 아이디를 사용하고있는 유저가 회원탈퇴 했습니다.
    회원정보에서 제외하세요.*/

const list = userList.filter(({ id }) => id !== "hanghae99");



/*5.새로운 회원이 가입했어요.
    회원의 정보는 아래와 같습니다.
    회원정보를 추가하세요.

    아이디: sparta
    나이: 20
    이름: 파르타
    이메일: sparta@coding.com
    레벨: 3
    수신여부: 동의
    보유포인트: 0 */

{
  const object = {
    id: "sparta",
    name: "파르타",
    age: 20,
    email: "sparta@coding.com",
    level: 3,
    point: 0,
    marketingAgree: true,
  };

  const newList1 = [...userList, object];

  //매니저님 풀이
  const newList2 = [
    ...userList,
    {
      id: "sparta",
      name: "파르타",
      age: 20,
      email: "sparta@coding.com",
      level: 3,
      point: 0,
      marketingAgree: true,
    },
  ];
}


/*6.운영정책이 변경되어 생년월일 정보를 추가하기로 하였습니다. 
    이전 회원의 경우 생년월일을 할 수 없으니 null 값으로 채워넣고 
    앞으로 가입하는 회원의 경우 생년월일을 입력받도록 하려고 합니다.

    이때 기존회원정보에 생년월일 정보를 추가하세요.*/
{
  const updateList = updateList.map((user) => {
    return {
      ...user,
      birth: null,
    };
  });

  // 매니저님 풀이
  const updateList2 = updateList.map((user) => {
    user.birth = null;
    return { ...user };
  });

}

 1. .map() 또는 forEach() 등 반복할 때 => return값이 없다면 undefined로 리턴된다. 새로 데이터를 재가공하기 때문에 if문에서 일치하지 않을 경우 예외 처리(return)를 해주지 않으면 return 값이 없어 undefined가 된다.

2. 리액트에서는 대부분 비파괴적으로 데이터를 관리하기 때문에, 깊은 복사(...스프레드 연산자)로 복사하여 값을 업데이트 한다.

3. 객체 구조분해 할당

const list = userList.filter(({ id }) => id !== "hanghae99");

// 매개변수로 user의 id에 바로 접근하여 사용 가능하다.
{ id } = user

 

 

02. 확인 문제 알고리즘 풀기 

1번 문제) 최소 직사각형

명함 지갑을 만드는 회사에서 지갑의 크기를 정하려고 합니다. 다양한 모양과 크기의 명함들을 모두 수납할 수 있으면서, 작아서 들고 다니기 편한 지갑을 만들어야 합니다. 이러한 요건을 만족하는 지갑을 만들기 위해 디자인팀은 모든 명함의 가로 길이와 세로 길이를 조사했습니다.

프로그래머스

문제 접근) 

1. 배열의 두개 요소를 비교하여 큰값 / 작은값으로 나눠 각각의 배열에 재 할당 한다.

2. 각각 큰값 배열과 작은값 배열에서 최대 값을 뽑아 곱해 준다.

function solution(sizes) {
    const wArray = [];
    const hArray = [];

//1. 배열의 두개 요소를 비교하여 큰값 / 작은값으로 나눠 각각의 배열에 재 할당 한다.
    for (const array of sizes) {
      if (array[0] < array[1]) {
        wArray.push(array[1]);
        hArray.push(array[0]);
      } else {
        wArray.push(array[0]);
        hArray.push(array[1]);
      }
    }
    
//2. 각각 큰값 배열과 작은값 배열에서 최대 값을 뽑아 곱해 준다.
    const width = Math.max(...wArray);
    const height = Math.max(...hArray);
    
    return (width*height)
}

 

 

2번 문제) 문자열 내 마음대로 정렬하기

문자열로 구성된 리스트 strings와, 정수 n이 주어졌을 때, 각 문자열의 인덱스 n번째 글자를 기준으로 오름차순 정렬하려 합니다. 예를 들어 strings가 ["sun", "bed", "car"]이고 n이 1이면 각 단어의 인덱스 1의 문자 "u", "e", "a"로 strings를 정렬합니다.

프로그래머스

 

1. sort를 사용해 숫자나 문자 정렬하기(오름차순, 내림차순)

1) 숫자 정렬방법(오름차순)

array.sort((a, b) => b[1] - a[1]

2) 문자 정렬방법(오름차순)

array.sort((a, b) => a > b ? 1 : -1);

3) sort를 이용해 세부적으로 조정하여 문자열 정렬시키기

=> string1.localCompare(string2) 메소드 

string1.localCompare(string2) 
string1이 string2보다 전에 위치할 경우 음수(-1), 후에 위치할 경우 양수(1) 반환, 동일 시 0반환

// "a"는 "c" 전에 위치하므로 음수 값을 반환 
'a'.localeCompare('c'); // -2 혹은 -1 (또는 다른 음수 값) 

// 알파벳 순으로 단어 "check"는 "against"보다 뒤에 위치하므로 양수 값을 반환 
'check'.localeCompare('against'); // 2 혹은 1 (또는 다른 양수 값) 

// "a"와 "a"는 서로 동등하므로 중립 값 0을 반환 
'a'.localeCompare('a'); // 0

 

2. 문자열에 접근하는 방법 

- String.CharAt()

- String[ ]

const string = "hello";
console.log(string.charAt(2));
console.log(string[2]);

 

문제접근 )

sort()메소드를 사용해 세부 조정하여 문자열 정렬시키기 

1. 문자열[n] 중 동일한 문자열이 있는지 확인 

2. 있을 경우 s1.localeCompare(s2) => 1 또는 -1 반환

3. 없을 경우 s1[n].localeCompare(s2[n]) => 1 또는 -1반환

function solution(strings, n) {
    return strings.sort((s1, s2) => s1[n] === s2[n] ? s1.localeCompare(s2) : s1[n].localeCompare(s2[n]));
}