프론트엔드 부트캠프 9주차 후기 - 4차 과제 진행중(패캠)

패스트캠퍼스 부트캠프 9주차 4차 과제 진행중~

4차 과제를 시작하고 11일이 지났다. kream 사이트를 클론 코딩 하기로 정하고 그 주에는 먼가 빨리 진행 되는 듯 싶었는데 2주차가 되었을 때는 아무래도 kream을 다 따라 하려다보니 상품 목록 별로 보여주는 페이지가 많았다. 그러다 보니 실제 중요한 기능구현을 빨리 접하지 못하고 탭메뉴 마다 혹은 banner이미지마다 그리고 작은 이미지 마다 클릭 했을때 보여주는 상품 목록 페이지를 만드느라 정작 중요한 API를 활용하여 만드는 기능구현에는 뒷전으로 밀렸던 것이다. 다른 조와 이야기를 나누고 실제로 만들고 있는 서비스를 보았는데 기본적으로 상품목록을 보여주는 페이지를 1개 만들고 다른 것들을 이미 다 만들었었다. 우리도 빨리 회의를 해서 이제 진짜 중요한 기능을 구현 하도록 해야 겠다는 생각이 들었다.

지금 내가 구현한 기능들은 Swiper-banner, small-swiper-banner, banner, header, footerbanner가 있고 여기에서 banner클릭시 보여지는 페이지도 구현 완료 하였다.

1~2주차 회고록

banner img들을 처음에는 image폴더에 저장해서 import해와서 사용하는 방식을 쓰지 않았다. isuue에서 일일이 다 링크로 만들어서 배열에 넣어서 사용하는 방식을 써왔는데 이런 이유는 처음에는 import를 해오지 않고 src링크로만 폴더에 접근을 해서 이미지를 가져오려고 하니 되지 않았던 것이다.

banner img 리팩토링 전

const srcarray = ["https://user-images.githubusercontent.com/98297436/216630777-e6bf3f13-ec80-4596-b36f-c70ddee5085b.jpg",
"https://user-images.githubusercontent.com/98297436/216636101-7b2184a7-8d0f-4d76-8615-fbd8bae602c8.jpg",
"https://user-images.githubusercontent.com/98297436/216637176-e221ab1a-260e-4818-8b54-ed0c886b40c1.jpg",
"https://user-images.githubusercontent.com/98297436/216636101-7b2184a7-8d0f-4d76-8615-fbd8bae602c8.jpg",
"https://user-images.githubusercontent.com/98297436/216637186-76faf753-77a6-4e8a-839f-0cd8c54e41ef.jpg",
]

• 이미지가 많을수록 링크들을 일일이 만들어야 하고 다시 배열에 넣어서 사용 해야 했다. 지저분 하고 이미지 관리가 제대로 되지 않았다. 어떤 링크가 어떤 이미지 인지도 모르고 일일이 링크마다 사진을 다시 찾아보고 해야 했다. 그리고 사진마다 이름을 붙여주고 싶거나 색상을 지정해서 사용 하고 싶을 때 불편 했다.

banner img 리팩토링 후(import방식으로 변경)

import banner1 from '../image/banner1.jpg';
import banner2 from '../image/banner2.jpg';
import banner3 from '../image/banner3.jpg';

export const srcarray = [
    {   
        id: 1,
        name: ' 신발',
        bannercolor: '#F2F2F2',
        img: `${banner1}`,

    },
    {   
        id: 2,
        name: ' 의류',
        bannercolor: '#9094A5',
        img: `${banner2}`,

    },
    {   
        id: 3,
        name: ' 후드',
        bannercolor: '#99A6B6',
        img: `${banner3}`,

    },
   ]

• banner 이미지들을 image폴더에 저장후 import해와서 사용 하는 방식으로 바꿨다.
• 이미지에 맞는 이름과 색상 그리고 고유한 id값을 부여해서 간단하게 기능을 구현 할 수 있었다.

---

swiper-banner 리팩토링 하기전

const srcarray = [ swiper1,swiper2,swiper3,swiper4,swiper5]
const newcolor = ['#F5F3F3','#E7E3EF','#6A665E','#93586E','#F0EAE5']
const linkarray = ["/exhibitions/1","exhibitions/2","/exhibitions/3","/exhibitions/4",'/exhibitions/5']
for(let i = 0; i<=4; i++) {
    let sildeEl = document.createElement('div');
    sildeEl.className = 'swiper-slide';
    sildeEl.style.backgroundColor = `${newcolor[i]}`;
    const bannerimgEl = document.createElement('img')
    const linkEl = document.createElement('a')
    linkEl.href = linkarray[i]
    bannerimgEl.src = srcarray[i]
    bannerimgEl.alt = 'banner';
    wrapperHTML.append(sildeEl);
    sildeEl.append(linkEl);
    linkEl.append(bannerimgEl);

• 처음에는 이미지와 색상 링크들을 일일이 배열에 넣어주고 이것을 for문으로 돌려 사용 하였다.
• for문에는 srcarray.length길이만큼 반복해라가 아니라 숫자로 직접 써서 배열길이 바뀔 때마다 수정해야 하는 번거러움이 있었음. 먼가 잘못되었다고 생각 하였다. 이미지, 색상, 링크들을 지우고 map써서 리팩토링 해야겠다고 생각함.

swiper-banner 리팩토링 후

// main swiper-banner
import swiper1 from '../image/bannerswiper1.jpg';
import swiper2 from '../image/bannerswiper2.jpg';

export const srcarray = [
    {   
        id: 1,
        name: ' 스마트워치',
        newcolor: '#F5F3F3',
        img: `${swiper1}`,

    },
    {
        id: 2,
        name: 'Apple',
        newcolor: '#E7E3EF',
        img: `${swiper2}`,
    },

]

• bannerswiperitems라는 js파일을 따로 만들어서 이렇게 코드를 다시 짰다. 여기에 생상, 이미지, 이름등을 저장하고 다른 파일에서 불러와서 사용 할 수 있게 만들었다.

srcarray.map((banner) => {
  let sildeEl = document.createElement('div');
  sildeEl.className = 'swiper-slide';
  sildeEl.style.backgroundColor = `${banner.newcolor}`;
  const bannerimgEl = document.createElement('img')
  const linkEl = document.createElement('a')
  linkEl.href = `/exhibitions/${banner.name}`
  bannerimgEl.src = `${banner.img}`
  bannerimgEl.alt = 'banner';
  wrapperHTML.append(sildeEl);
  sildeEl.append(linkEl);
  linkEl.append(bannerimgEl);
})

• banner이미지 들과 색상들은 불러와서 for문이 아닌 map으로 변경 여기서 링크를 일일이 배열로 만들어서 붙여주는 방식이 아니라 /exhibitions/${banner.name}끝에 banner.name을 붙여줌으로서 banner img를 눌렀을 때 그 name이 주소에 들어가게 변경
• for문과 코드 길이 차이는 별로 없지만 이미지와 이름 색상등을 따로 파일로 관리를 해서 편하고 가독성이 더욱 좋아진 것 같다.

---

router 리팩토링 전

const router = new Navigo('/')
router
.on('/exhibitions/1', function () {
    document.body.innerHTML = ''
    appendHeadersub()
    appendProducts(' 신발', 12)
    footerbanner()
    appendFooter()
  })
  .on('/exhibitions/2', function () {
    document.body.innerHTML = ''
    appendHeadersub()
    appendProducts('Apple', 12)
    footerbanner()
    appendFooter()
  })
  .on('/exhibitions/3', function () {
    document.body.innerHTML = ''
    appendHeadersub()
    appendProducts(' 후드','8')
    footerbanner()
    appendFooter()
  })
  .on('/exhibitions/4', function () {
    document.body.innerHTML = ''
    appendHeadersub()
    appendProducts(' 셔츠', 20)
    footerbanner()
    appendFooter()
  })
  .on('/exhibitions/5', function () {
    document.body.innerHTML = ''
    appendHeadersub()
    appendProducts(' 셔츠', 20)
    footerbanner()
    appendFooter()
  })
  .on('/exhibitions/6', function () {
    document.body.innerHTML = ''
    appendHeadersub()
    appendProducts(' 스니커즈', 20)
    footerbanner()
    appendFooter()
  })
  .on('/exhibitions/7', function () {
    document.body.innerHTML = ''
    appendHeadersub()
    appendProducts(' 신발', 20)
    footerbanner()
    appendFooter()
  })
  .on('/exhibitions/8', function () {
    document.body.innerHTML = ''
    appendHeadersub()
    appendProducts(' 후드', 20)
    footerbanner()
    appendFooter()
  })
  .on('/exhibitions/9', function () {
    document.body.innerHTML = ''
    appendProducts('Chanel', 8)
    document.body.innerHTML = ''
    appendHeadersub()
    appendProducts('Miu Miu', 8)
    footerbanner()
    appendFooter()
  })
  .on('/exhibitions/10', function () {
    document.body.innerHTML = ''
    appendHeadersub()
    appendProducts(' 후드', 20)
    footerbanner()
    appendFooter()
  })
  .on('/exhibitions/11', function () {
    document.body.innerHTML = ''
    appendHeadersub()
    appendProducts(' 패딩', 20)
    footerbanner()
    appendFooter()
  }).resolve()

• banner 이미지를 클릭 했을 때 이미지의 주제와 맞게 상품 목록 페이지를 새롭게 보여줘야 한다. 그래서 처음에는 하나하나 router를 만들어서 주소를 정해 줬었는데 팀장이 쿼리스트링을 사용해서 router 하나로 사용해도 좋을 것 같다는 말에 Navigo문서를 공부 하고 고민을 하였다.
• 내가 봐도 router가 더 많고 혹시 여기서 더 추가 할 경우 너무 길어지고 보기도 안좋다. 리팩토링이 시급하다는 생각이 들었다.

router 리팩토링 후

const router = new Navigo('/')
router
.on('/exhibitions/:name', function ({ data }) {
    document.body.innerHTML = ''
    appendHeadersub()
    appendProducts(data.name, 12)
    footerbanner()
    appendFooter()
  }).resolve()

• 위에서 banner 이미지를 클릭하면 linkEl.href = /exhibitions/${banner.name} 여기로 배너 name이 들어가고 위주소 name을 data 가져와서 appendProducts(data.name, 12) 여기로 넣어주면 banner 이미지에 맞는 name이 appendProducts로 들어와 상품목록이 이에 맞게 보여준다.
• 처음에 router를 11개 사용 했었는데 이를 잘못된것음 감지하고 어떻게 리팩토링 할지 고민 한결과 주소에 name을 넣어서 이것을 다시 가져와서 사용 하는 방식으로 변경 하였더니 router 11개에서 1개로 코드를 확 줄일 수 있었다.