[velog 2022-06-09] 내가 쓰는 javascript 문법 꿀팁! (사용사례 포함)

안녕하세요.
간단하지만 굉장히 많이 쓰이는 자바스크립트 문법을 저희 회사 웹,앱에서 실제 사용사례와 함께 기록 및 공유 드릴려고 합니다.

1. DB에서 데이터를 뽑았는데 카테고리별로 데이터를 나누고 싶을 때!

보통 DB에서 쿼리문을 실행후 데이터를 뽑을 때 이런식으로 데이터를 뽑는 경우가 많을 겁니다.

const data = [
    {
        category:"스냅+영상",
        name:"뭐 그냥 제목!11111",
        prise: 120000,
        count : 4032,
    },
    {
        category:"스냅+영상",
        name:"뭐 그냥 제목!22222",
        prise: 550000,
        count : 85,
    },
    {
        category:"스냅+영상",
        name:"뭐 그냥 제목!3333",
        prise: 760000,
        count : 111,
    },
            {
        category:"스드메+스냅+영상",
        name:"스드메+스냅+영상11111",
        prise: 760000,
        count : 111,
    },
    {
        category:"스드메+스냅+영상",
        name:"스드메+스냅+영상2222",
        prise: 760000,
        count : 111,
    },
    {
        category:"스드메+스냅+영상",
        name:"스드메+스냅+영상3333",
        prise: 760000,
        count : 111,
    }
]

기획 및 디자인을 맞추기 위해서는 카테고리별로 묶고 같은 카테고리별로 또 다른 배열을 만들어야 하는 경우가 생겼습니다.

첫번째

첫번째로 저는 카테고리별로 묶고 카테고리별로 또다른 배열을 만드는걸 생각하였습니다.

console.log(
    data.reduce(
          (acc, cur) => ({
            ...acc,
            [cur.category]: acc[cur.category] ? acc[cur.category]?.concat(cur) : [cur],
          }),
          {},
        )
)

결과

벌써 원하는 형태가 완성 되어가고 있는데요. 하지만 이대로 사용하기에는 부족합니다.
왜냐하면 아직 객체 형식이기 때문에 배열 함수를 사용하여 UI를 꾸밀 수 없으니까요!
사진과 같은 형식을 유지하되 배열로 만들 필요가 있습니다.

두번째

console.log(
    Object.entries(
        data.reduce(
          (acc, cur) => ({
            ...acc,
            [cur.category]: acc[cur.category] ? acc[cur.category]?.concat(cur) : [cur],
          }),
          {},
        )
    )
)

결과

첫번째 로직을 통해 2개의 객체를 만들었고 key,value별로 하나의 배열을 만들 필요가 있었습니다.
자바스크립트 Object.entries를 사용하여 쉽게 만들 수 있습니다.

세번째

두번째 로직까지 완료하면 어떻게든 UI를 꾸밀 때 사용을 할 수 있습니다.
하지만 이 로직은 NodeJS에서 많이 사용하여 클라이언트에게 최대한 이쁜 데이터를 보내주기 위해 하나의 로직을 더 추가했습니다.

console.log(
    Object.entries(
        data.reduce(
          (acc, cur) => ({
            ...acc,
            [cur.category]: acc[cur.category] ? acc[cur.category]?.concat(cur) : [cur],
          }),
          {},
        )
    ).map(([category,data])=>({category,data}))
)

결과

최종코드 입니다. 이런식으로 클라이언트로 이쁜 데이터를 보내주게 됩니다.

실제 사용사례

이런식으로 프론트에서는 그냥 category 사용관리와 filter 함수를 통해 간단히 구현할 수 있게 됩니다.

2. Swiper 사용을 위해 2차원 배열 만들기

실제 사용사례를 먼저 보겠습니다.

하나의 스와이퍼 슬라이드안에 4개의 아이템이 필요한 상황입니다.

const data = [[item(4)],[item(4)],[item(4)]]

이런 형태의 데이터가 있다면

data.map((slide)=> slide.map((item)=> <div>{item}<div/>))

map함수를 두번을 돌려 쉽게 사용이 가능합니다.

2차원 배열을 만드는 방법은 간단합니다.

코드

const data = [
     {name:'나는1번',value:1},
     {name:'나는2번',value:2}, 
     {name:'나는3번',value:3}, 
     {name:'나는4번',value:4}, 
     {name:'나는5번',value:5}, 
     {name:'나는6번',value:6}, 
     {name:'나는7번',value:7}, 
     {name:'나는8번',value:8}, 
];

const divided = [];
for (let i = 0; i < data.length; i += 4) {
   divided.push(data.slice(i, i + 4));
}

결과
console.log(divided)

3. 형태가 확실한 문자열 값 추출하기

음...마땅한 문자열이 생각나지 않아 지금 작성하고 있는 사이트 링크를 가져와봤습니다.

const string = "https://velog.io/write?id=e0423454-d65a-44ca-9c22-bb5bb0358f44&test=12131231"

해당 문자열에서 id= 뒤에 있는 값을 따로 정규식을 이용해 추출할때 쓰는 방법입니다.

console.log(string.match(/id=([A-Za-z0-9-.]*)/))

배열의 1번째에 저희가 원하는값이 들어있습니다. 그래서 편하게 바로 배열까지 들어가서 변수 선언해주겠습니다.

console.log(string.match(/id=([A-Za-z0-9-.]*)/)?.[1])

이쁘게 원하는 값만 뽑아왔죠??
주의사항!!
만약 해당 정규식의 원하는 값이 없다면 undefined 에러를 발생시켜 사이트가 멈춥니다.
은근히 모르는 사람이 많은 이문법은 배열로 들어가기전에도 사용이 가능합니다 ?. 꼭 붙여주세요