[쇼핑몰 웹 만들기] 프로젝트 1주차

기록의 중요성을 앎에도 꾸준히 적지 못했다.

하루하루 따라가기에 바빠서,, 는 핑계라고 할 수 밖에 없으려나.

그래도 프로젝트에 대한 기록은 짧게라도 해야겠다.

 

엘리스의 커리큘럼 상 8~9주차는 프로젝트 기간이다. 레이서들 4명, 5명이 짝을 짓고 한 팀이 되어 제시하는 프로젝트를 하는 주이다. 프로젝트 해! 하고 던져주는 게아닌, 7주동안 배웠던 HTML, CSS, JS 및 Node, Express, Mongoose 등을 이해하고 활용하는 기간이라고 보는 게 좋다.

 

이미 기본 틀을 갖춰두고 시작을 하는데, 그 안에서 각자 스스로 구성을 하는 것이다.

우리 팀은 전공자 2 , 복수전공 1, 비전공 2명으로, 그 중 2명은 백엔드, 3명은 프론트엔드로 구성됐다. 

 

월요일

처음 뼈대 코드(스켈레톤 코드)를 받고, 깃랩을 통해 레포지토리를 생성했다.

이 날에서야 처음 제대로 깃을 활용해보는 시간이 왔다.

 

화요일

오프라인으로 처음 만나는 날. 각자 어떤 부분을 맡아 할 지 얘기를 나눴다.

백엔드 분들은 두 분이서 각자 얘기해보고 나눈다고 하였고,

프론트인 나는 두 분과 대화를 통해 나는 홈 화면, 한 분은 장바구니, 한 분은 로그인, 회원가입 쪽을 맡기로 결정했다.

 

그리고 이 날 깃랩을 쓰다 뭔지 몰라 다 지워버렸는데 내가 전체 레포를 실제로 다 지워버리는 일이...발생했다 

식은땀났다..다행히 거의 시작단계이기도 했고 해서 .. 생각했던것보다는 크지않게 해결했다..휴

 

수요일

그 쉬운 이름 바꾸는 게 이렇게 어려운 일인가..?

로그인이 되면 로그인이라 적힌 nav bar의 텍스트를 로그아웃으로 바꾸는걸 하루종일 했다.

프론트의 한 분이 지난 스터디에도 미니 프로젝트를 구현하는 걸 하셨고, 깃 활용도 하셨으며 전공자이고 훨씬 많이 알아서 도움을 많이 받았다(이때부터 지금까지 계속 받는중)

 

처음에 로그인, 로그아웃을 하나의 함수로 구현했다.

export const loginLogout = () => {
  // 세션스토리지에 로그인 정보를 확인해서, 로그인 돼 있는 사람이면 로그인 - 로그아웃
  // 상태가 로그아웃이라면 클릭 시 로그아웃 되고 , 로그인으로 변경
  const data = sessionStorage.getItem('token');
  const login = document.getElementById('login_id');
  if (data) {
    login.innerText = '로그아웃';
  }
  if (login.innerText === '로그아웃') {
    login.addEventListener('click', (logout) => {
      logout.preventDefault();
      login.innerText = '로그인';
      sessionStorage.clear();
      location.reload();
    });
  }
};

그리고 프론트엔드 오피스아워 시간에 코치님께 질문했더니 하나의 함수는 하나의 기능을 하는 것이 좋다!

라고 하여 수정하였다.

//로그인 시 로그인 글씨 로그아웃으로 변경
//세션 스토리지 내 토큰 활용
export const loginUser = () => {
  const data = sessionStorage.getItem('token');
  const login = document.getElementById('loginId');
  if (data) {
    login.innerText = '로그아웃';
  }
};

//로그아웃 클릭 시 로그인으로 변경
export const logoutUser = () => {
  const data = sessionStorage.getItem('token');
  const login = document.getElementById('loginId');
  if (data) {
    login.addEventListener('click', (logout) => {
      logout.preventDefault();
      login.innerText = '로그인';
      sessionStorage.clear();
      location.reload();
    });
  }
};

nav bar의 텍스트 변경은 Session Storage를 활용하였다. (나는 처음에 백엔드의 Session과 헷갈렸다.)

로그인 했을 때 세션 스토리지를 보면 토큰이 넘어오는데, 그 값을 활용하여 값이 있다면 로그인 텍스트를 로그아웃으로 변경할 수 있게,

그리고 로그아웃을 다시 클릭하면 1. 로그인으로 텍스트를 바꾸고 2. 세션 스토리지의 토큰값을 지우고 3. 리로드를 시켜주었다 !

 

고작 ? 글씨 바꾸는 20줄이 안되는 코드에도 내가 작성 했다는 것에 혼자 뿌듯했다.

 

목요일

그리고 미리 예시로 보여줬었던 쇼핑몰 데모 페이지의 홈 화면 속 슬라이드.. 

나도 괜히 새로운 거 더 만드려 하지 않고 최대한 데모페이지를 따라 비슷한 기능을 구현할 수 있도록 해보기로 했었다.

그래서 슬라이드를 다시 공부..!

2주차? 3주차에 배웠던 웹사이트의 슬라이드가 기억나 엘리스 수업을 다시 정독하고 적용해보려 했는데 무언가 맞지 않았고..

어떻게 하면 적용할 수 있을까 찾아보다 w3school에서 찾을 수 있었다.

https://www.w3schools.com/howto/howto_js_slideshow.asp

How To Create a Slideshow

 

해당 코드를 참고하였고 기본적인 틀을 갖출 수 있었다.

맨 처음에는 백엔드 api 받는것보다 작동이 되나를 우선적으로 했어서 임시 이미지 파일과 글을 작성하여 코드 실행하였고,

다행히 원하는 형태로 잘 작동되었다!

 

그다음 바로 상품 정보의 페이지를 html,css,js를 활용하여 똑같이 임시로 만들어두고 있었다.

데모 페이지 처럼 원하는 카테고리에 해당 카테고리에 해당되는 정보만 보여지도록 해야했다.

그러기 위해서는 일단 api로 db의 상품정보를 가져와야 하는데, db가 아직 미완성이었어서 홈의 슬라이더 화면처럼 임시로 사진을 넣고 형태만 구현해 두었다. 그리고 아 이정도면 많이 했지~! 하며 기쁜맘으로 잠 들었던 것 같다.

 

금요일

그러나 기쁨은 길지 않았다.

해당 이미지를 클릭했을 때 이미지의 카테고리 페이지로 이동해야 했는데, 이런 임시의 이미지로는 해당 페이지로 이동하기 위해서는 일일이 html 파일을 작성해야 했던것 ..ㅠㅠㅠ 그렇게 하는 것이 아님을 알기에 백엔드 분들에게 부탁하여 먼저 카테고리 리스트에 해당하는 db를 다시 작성해달라고 부탁했다. 나는 기존 임의의 사진으로 돌아가던 슬라이더 (카로셀)의 코드를 api를 받게 되었을 때 작동 될 수 있도록 코드를 수정했다. 

 <div class="slideBox">
        <a href="/products" class="slidesAtag">
          <img src="image1.jpg" style="width: 50rem; height: 30rem;">
        </a>
        <p class="brandName">19Team</p>
        <h3 class="categoryName">Mens</h3>
        <p class="categoryDescription">남성용 의류</p>
  </div>

기존 html에 작성해 둔 위 코드를,

js 파일에 다시 작성하는데 템플릿 리터럴을 사용하여 같은 형태로 보이도록 가져왔다.

async function categoryList() {
  const slideContainer = document.getElementById('slideContainer');
  const data = await Api.get('/api/categorylist');
  for (let i = 0; i < data.length; i++) {
    const categoryId = data[i].categoryId;
    const description = data[i].description;
    const imageUrl = data[i].imageURL;
    const categoryName = data[i].categoryName;
    slideContainer.insertAdjacentHTML(
      'beforeend',
      `
      <div class="slideBox">
      <a href="/products/${categoryId}" class="slidesAtag">
        <img src="${imageUrl}" style="width: 50rem; height: 30rem";>
      </a>
      <p class="brandName">Camping</p>
      <h3 class="categoryName">${categoryName}</h3>
      <p class="categoryDescription">${description}</p>
      </div>
      `
    );
  }

이렇게 수정 변경하여 작성하고 나니 새벽3시,, 마지막 머지 리퀘스트를 날렸다.

 

토요일

토요일은 코치님께 코드리뷰를 받는 날이라, dev에 MR(Merge Request) 했던 파일을 Master 브런치로 보내놓고, 해당 코드를 리뷰해주는 것이다.

이렇게 수정하면 좋을 부분을 적어주셨다..! 주말이 정해진 시간이긴 했지만 주말에도 고생해서 코드리뷰를 해줘서 너무 좋았다.

그러면 ~ 이제 for 문을 forEach로 해봐야지 .

 

---

첫 프로젝트, 첫 1주차가 지나갔다.

여전히 7주간 배운 개념들이 익숙치않음에 이게 왜 이렇게 작동하지를 고민하는 일이 많다.

팀원들이 너무 잘 도와주고, 모르는 부분을 물어보면 아이디어나 같이 찾아봐주는 등 큰 도움이 되고있다.

코치님들한테도 물어보면 똑같이 아이디러나 방법을 이렇게 해보시는 게 어떨까요? 하며 도움을 주니 , 그러한 방법들을 어떻게 사용할 지 고민해보는 일의 연속이다.

 

사실 이번주에 이미 상품정보페이지와 상품상세페이지까지 구현해야했는데 그 두 개 모두 못했다.. 

다음주 수요일 전까지는 꼭 구현하고 그 이후에는 나머지 추가 구현을 할 수 있으면 좋겠다. 해야지.