술고 2차 프로젝트에서 utils.js로 관리했던 함수들을 기록하고 설명해보고자 한다.
설명 이전에 서버로 부터 들어오는 userData의 모습은 다음과 같다.

    "result": {
        "id": 21,
        "profile_image_url": "http://k.kakaocdn.net/dn/dpk9l1/btqmGhA2lKL/Oz0wDuJn1YV2DIn92f6DVK/img_640x640.jpg",
        "text_name": "길동화",
        "text_email": "donghwa8@naver.com",
        "text_gender": "남",
        "text_mbti_title": "INFJ",
        "text_mbti_description": "선의의 옹호자",
        "text_class_number": 5,
        "text_comment": "술은 모두 달다.21",
        "text_favorite_place": "유럽 지중해21",
        "text_favorite_food": "엽떡21",
        "text_favorite_hobby": "니트21",
        "text_stack": "프론트",
        "alcohol_limit": {
            "name": "반병",
            "is_matching": true
        },
        "alcohol_level": {
            "name": "0~10",
            "is_matching": true
        },
        "alcohol_drinking_methods": [
            {
                "name": "탄산수",
                "is_matching": true
            }
        ],
        "alcohol_categories": [
            {
                "name": "무알콜",
                "is_matching": true
            }
        ],
        "alcohol_flavors": [
            {
                "name": "싱그러운",
                "is_matching": true
            }
        ]
    }

1. filterUserInfoStartswith

function filterUserInfoStarsWith(data = {}, startsWith) {
  const userArray = Object.entries(data);
  const userFilteredArray = userArray.filter(el => el[0].includes(startsWith));

  return userFilteredArray;
}

위 함수는 함수명 그대로 object type의 userData를 argument로 받아서 1) userArray라는 배열로 변환하고 2) userArray의 요소마다 그 첫째 요소에 startsWith 라는 argument로 받은 문자열이 포함되어 있으면 이를 userFilteredArray에 할당하고 3) 이 userFilteredArray를 최종적으로 return함.

함수를 선언하면서 data에 빈 객체를 default로 지정해줬는데 이렇게 하지 않으면 이상하게 조건부 렌더링이 안 먹혔다. 래영 멘토님께서 도와주신 부분인데 왜 그런 지는 추후 공부하겠다.

2. filterMatchTagFromUserData

function filterMatchTagFromUserData(data) {
  const alcoholInfo = filterUserInfoStarsWith(data, 'alcohol').flat(Infinity);
  const filteredMatchTag = alcoholInfo
    .filter(el => typeof el === 'object')
    .map(el => el.name);

  return filteredMatchTag;
}

1번 함수 filterUserInfoStartsWith를 사용하여 "alcohol"을 포함하고 있는 userData를 1) alcoholInfo에 담고 2) 이를 Infinity depth까지 flat한다. 3) alcoholInfo 요소 하나하나 마다 filtering 하면서 data type이 obejct인 데이터를 가지고 4) 이들 중 요소의 name이라는 키 값들을 filteredMatchTag 안에 할당하고 5) 최종적으로 담긴 filteredMatchTag를 반환.

3. changeDataForm

function changeDateForm(date) {
  const dateForm =
    date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
  return dateForm;
}

3번 함수는 new Date()로 불러온 날짜 데이터를 가공하는 함수이다.
먼저

const date = new Date()

로 날짜 정보를 date라는 변수에 할당하고 그 date를 YYYY-MM-DD 같은 형식의 문자열로 변환하는 함수이다.