[포스코x코딩온] 웹 풀스택 과정 3주차 회고 | 프로젝트#1

 

웹 프론트엔드를 어느정도 배운 상태에서, 첫번째 팀프로젝트가 시작되었다.
백지상태에서 하나의 웹페이지를 만든다는 것은 생각보다 복잡한 것 같다.
새롭게 찾아봐야 할 내용도 있고, 배운 내용들을 어떻게 응용할지 등등 생각해봐야 할 부분이 많다.
팀프로젝트를 시작하면서 하루하루가 굉장히 빠른 속도로 지나가는 중...

1일차 2023.07.18

프로젝트 경험이 없고 아직 프론트엔드 일부만 배운 상태이기 때문에, 생각보다 주제를 생각해내기 쉽지 않았다. 구현하고 싶은 부분이 있어도, 그게 백엔드 없이 오직 프론트엔드 기능만으로 구현이 가능한지 감을 잡기 어려웠기 때문이다. 그래도 프로젝트 경험이 있었던 다른 조원분들 덕분에 주제를 잡아나갈 수 있었다.
우리 조의 주제는 '2시에 수업이 끝난 후, 수강생들에게 대흥역 근처에 갈만한 장소들을 추천하는 웹페이지'로 결정되었다. 웹페이지 제목은 '2시에 뭐해?'로 결정..! 해맑다!

2일차 2023.07.19

좀더 본격적으로 구성을 시각화해서 팀원들 간의 소통을 높이고자, 전 날 회의한 내용을 토대로 웹페이지의 기본적인 구성을 그림으로 그려왔다. 실제로 구성을 눈으로 보이게 그려보면서 서로 의견을 말하다보니, 확실히 소통이 더 잘되고 하나하나 결정해갈 수 있었다.
오늘 결정된 부분은 아래와 같다.

 

1) 첫번째 페이지

• 모달창을 이용하여, 사용자가 얻고 싶은 정보를 선택하도록 한다.

2) 두번째 페이지 - main!

• 사용자가 선택한 조건에 해당하는 장소 목록들을 보여준다.
• 해당 페이지에서 다른 조건을 선택할 수 있다.

3) 세번째 페이지

• 선택한 장소에 대한 자세한 정보를 기재한다.
• 리뷰창, 예약창 등을 추가한다.

나는 다른 팀원분과 둘이 함께 main페이지인 두번째 페이지를 담당하기로 했다. (최종적으론 3페이지까지 담당했다!)
문제는.. 데이터베이스 없이 조건에 따라 정보를 불러오기 위해서는 우리가 하나하나 장소들을 저장해놔야 했다. 우리 둘다 비전공자였기에.. 아직 어떻게 저장해야할지도 모르는 백지 상태에서 일단은 수집해야 하는 정보들을 열심히 찾아서 아카이브 해두었다.

3일차 2023.07.20

단순 자료 수집을 벗어나, 코드를 짜는 경험을 시작해봐야 할 것 같아서, 두번째 페이지를 구성하는 코드를 짜기 시작했다. 전체적인 구성을 잡아놓고 테이블을 만드는 것까진 완료했지만, 그 테이블에 사용자의 선택에 따라 목록을 어떻게 특정해서 불러와야 할지 구현하는 게 쉽지 않았다.
주제에 따라 객체 파일은 각각 생성해놨는데, 이걸 어떻게 필요한 순간에, 적절한 위치로 가져오지..?

이것저것 구글링 해보다가, 내가 찾아낸 방식은 '동일한 이름의 객체' 배열에 업체의 정보를 담은 배열이 저장되도록 한 뒤 (.push()를 이용), index로 객체 안의 배열을 꺼내어 key로 불러내는 것이다.

// 예시: daeheung_cafe.js 파일 일부
arr.push({
  img: './source/daeheung/cafe/person/퍼머넌트.jpeg',
  name: '퍼머넌트해비텟',
  grade: 4.67,
  tag: ['#대화하기 좋은<br>', '#디저트가 맛있는'],
})

arr.push({
  img: './source/daeheung/cafe/person/누아네.jpeg',
  name: '누아네',
  grade: 4.46,
  tag: ['#디저트가 맛있는<br>', '#아늑한'],
})

arr.push({
  img: './source/daeheung/cafe/person/콜로라도.jpeg',
  name: '콜로라도 프로젝트',
  grade: 4.89,
  tag: ['#대화하기 좋은<br>', '#이색적인'],
})

html에서 arr=[] 이라는 변수를 선언해두고, 사용자 선택에 따라 특정 js파일(예: daeheung_cafe.js)만 링크되도록 하면, arr 배열에는 해당 js파일의 장소 정보들이 저장된다.
그럼 이제 for문을 돌리면서, arr[i] 인덱스로 순차적으로 장소를 하나씩 불러올 수 있다!

4일차 2023.07.21

전 날 밤까지 계속 고민한 덕분에.. 두번째 페이지를 어느정도 마무리 할 수 있었다.
하다보니 자꾸 더 기능을 넣고 싶어서, 찜 기능도 넣어봤다.

두번째 페이지를 같이 맡았던 팀원분과 함께 세번째 페이지도 담당하게 되었다.
정보는 직접 입력해두고, 예약창을 생성하는 것에 집중하였다.
hidden 클래스를 이용하여, 날짜-시간-인원 예약창이 순차적으로 등장하도록 구성하였다.

hidden 클래스를 추가하는 게 처음엔 어색했는데, 이제 완전히 이해가 된다.
selected 클래스도 추가하고.. 점점 클래스를 추가/삭제하면서 디자인을 조절하는 것에 익숙해지고 있는 것 같다.

5일차 2023.07.22

리뷰창도 hidden 클래스를 이용하여 방문자리뷰 or 블로그리뷰를 볼 수 있도록 하였다.
이제 넣고자 했던 기능은 모두 구현이 완료되어, css를 좀더 만지고, 미디어쿼리를 이용하여 반응형을 구현하였다.

이번주까지 완성을 해놓자는 목표를 가지고 있었는데, 시간 내에 잘 마무리 할 수 있었던 것 같아 기쁘다.

6일차 2023.07.24

세번째 페이지의 블로그리뷰 창을 좀더 수정하고, 지도도 넣어주었다.
지도 넣는 건 어렵지 않을까 하고 넘어가려다가 검색해봤는데, 생각보다 엄청 단순하다.
구글지도의 경우, html 코드를 제공해주기 때문에 그냥 긁어오면 된다.
역시... 생각만 하지 말고 구글링해보면 배우는게 훨씬 많을 것 같다.

오늘은 배포까지 완료되었다.
자잘한 수정사항들을 처리하고, 남는 시간에 예약창의 캘린더 코드를 리뷰하였다.

7일차 2023.07.25

각자 맡은 페이지에 대해 PPT를 제작하고, 대본을 작성했다.
첫번째 프로젝트는 이제 끝! 정말 내 생에 완전 첫번째 프로젝트이다보니, 결과물이 100% 만족스러운 것은 아니지만, 그래도 나름대로 고군분투하면서 최선을 다했던 것 같다.

앞으로 더 많은 내용을 배울 것이고, 그걸 활용하면 더 많은 기능들을 구현할 수 있을 것 같다는 생각에 조금 신나기도 한다! 구글링한 내용들도 점점 더 많이 알아들을 수 있길 바라며..!

끝!!

🎈 첫번째 프로젝트 '2시에 뭐해?'

https://after2pm.netlify.app/

github: https://github.com/HeeSung98/after2pm/tree/develop