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

월요일 동안은 발제를 듣고 팀원분들과 기능분담과 ERD , wire - frame , API 명세서를 작성하였다.

내가 우선 처음적으로 할 것은 가게 목록페이지 였다.

처음 파일구조를 만든 뒤 git 에 올려 clone 을 받고 npm 을 설치(install)를 하고 시작을 했다.

이렇게 준비를 하고 파일을 생성하였다.  가게목록 페이지의 서버쪽은 코드를 작성하는데 그렇게 큰 어려움이 있지 않았다.

몇십분도 안걸렸던것 같았는데 여기서 문제점들이 있었다.

첫번째로는 router에서 서버를 만든 코드들을 브라우저로 띄우는 문제

이전에는 ejs 를 사용해서 render 를 통해 브라우저로 연결을 했었는데 지금은 ejs 를 사용하지 않아 전에 했던것을 참고하면서 코드를 작성하지도 못했고 어떻게 해야 할 지 감이 안오던 와중에 잘하시는분에게 여쭤봐서 방법을 찾았다.

그 방법을 통해서 해결을 하였는데  해결방안은  

static으로 기준이 되는 폴더로 가서 그 폴더에서 html과 js 파일을 하나더 만들어서 

 

<script src="/storeRegister.js" type="module"></script>

 

이런식으로 script 태그를 통해 연결을 할 파일을 설정해주면 되는 것이였다. 생각보다는 간단했고 처음이라 방황을 했던것같다. 그리고 나서 js 파일에는 fetch문에 api를 날리고 forEach문을 통해 기능하고자 하는 것들을 작성하였다.

그렇게 테스트를 해보니 브라우저에 잘 띄워져 있었다.  모르는 것들이 많지만 프로젝트를 진행하면서 새로 알게된 것들을 정리하고 나중에 시간을 내서 다시 한번 연습을 하는 기회를 가져야할 것 같다. 밑에는 내가 만들었던 것을 보여주며 마무리 하겠다.

 

가게 목록 페이지

두번째로는 프론트와 css 쪽 (꾸미기) 문제 였다.

여기서는 html 에서 각 태그에 뭘 추가하고 꾸미면서 margin-top  / display / text-align 등을 사용하면서 했는데 ,

사실 여러번 해봐야 알것같고 지금 당장으로서는 기능구현을 우선으로 해야할것 같아서 css쪽과 프론트쪽은 나중에 여유가 있을때 따로 공부를해서 정리를 해야할것 같다. 지금은 node.js 라는 백엔드 쪽을 공부하러 왔기 때문에 프론트쪽을 크게 신경쓰지않고 서버기능구현에 집중을 하고 있다.