[내배캠 TIL ] 10주차 수요일 :: Team Project

팀프로젝트를 시작한지 벌써 중간은 온것같다. 시간이 엄청 빨리 지나가는것 같은데 빨리 지나가는 것 만큼 프로젝트 속도는 나오지 않는 것 같다. 근데 어찌보면 당연한? 것일지도 모른다는 생각이 들긴 하다..

어제 가게 목록페이지를 구성한 다음 오늘 할 일은 관리자 가게 등록 페이지다.

 

이것도 사실 가게 목록페이지와 크게 다를건 없는것 같아서 서버쪽 로직을 짜는것은 그리 오래 걸리지 않았다.일단 구현한 브라우저를 먼저 보여주면은,

관리자 가게 등록페이지 구현

위 사진처럼 구현을 하였는데 화요일 TIL에서 말한것 처럼 프론트쪽은 아직 모르는 것들이 많아서 설명을 잘 못하겠다.

그리고 꾸미는것은 부트스트랩 홈페이지를 이용해 라이브러리를 가져다 썼다. 그리고 각 코드에 손가락 이모티콘을 넣어서 나름 귀엽게?? 꾸미려고 했던것 같다.  밑에 보면 가게 등록하기 버튼과 취소하기 버튼을 만들었는데 취소 버튼을 누르면 메인페이지로 갈 수 있게 하였다. 코드는 이렇게 작성하였다.

<button

            type="button"

            class="btn btn-secondary"

            onclick="location.href='http://localhost:3000/'"

          >

            <!-- 위에 href= 뒤부터는 취소버튼 후 돌아갈 페이지 주소 넣으면 됨-->

            취소하기

          </button>

임의적으로 지금은 배포를 하지 않은 상태고 개인 로컬에서 돌리고 있는 와중이기에 주소를 localhost:3000으로 설정을 하여 취소버튼에 클릭이벤트를 넣어서 메인으로 갈수 있게 만들었다.

그리고 서버쪽에서는 같은 이름의 가게가 들어갈수도 있기에 

 const existingStore = await Stores.findOne({ where: { storeName } });

이렇게 existingStore 라는 변수를 만들어서 where절에 맡는 storeName을 findOne을 통해 찾게 된다.

그리고 유효성 검사를 하는데 코드를 보면 이렇다.

// 유효성 검사

    if (existingStore) {

      return res.status(409).json({

        errorMessage: '이미 등록된 가게입니다!!!',

      });

    }

이렇게 existingStore 변수에 담긴 값이 중복이 되면 이미 등록된 가게입니다 라고 메세지를 띄우고 

 브라우저 쪽에서도 alert 를 이용해 등록된 가게 라고 메세지를 띄우게 만들었다.

else if (response.status === 409) {

      alert('등록된 가게입니다.');

    }

그리고 나서 DB의 create method를 통해 속성들을 추가한뒤 DB에 저장할수 있게 로직을 구성하였다.

 이렇게 내가 맡은 기능들은 다 하게 되었는데 사실 정말 밀도있게 집중을 하면 하루만에 다 할수도 있을것 같은 느낌인데 이 느낌이 다하고나서 이렇게 생각하는것일지도 모른다. 이제는 다른분들에게 힘드신 부분이 있냐고 물어보고 

아직 구현을 하지않으신 기능들을 물어보면서 그쪽으로 붙어 기능구현을 하는데 도움을 드리며 공부를 해야겠다.