10. 04. 04일차 TIL - 팀프로젝트_02 중간과정

팀원들의 적극적인 협조에 꽤나 그럴싸한 웹사이트가 만들어지고 있다. 각각 파트를 나누어 제작할 부분을 코딩하였고 04일인 오늘은 zep에 모여 그동안 작업한 코드 merge 작업을 진행하였다. 코드 공유는 깃허브를 이용하여 진행하였으며 html을 다듬는 작업과 더불어 각각의 링크파일의 경로 재설정, 동일하게 설정된 class값, id값의 수정, 등 생각보다 꽤나 많은 시간이 소요되었다.

---

1. 중간 과정

제작 중간 과정의 웹사이트 모습은 이렇다. 뭔가 아기자기하면서도 퀄리티가 나쁘지 않아 팀원 모두가 만족하고 있다.

top_nav 배경에 opacity를 살짝 추가하여 조금더 자연스러운 느낌이 연출되었다.우측하단에 보이는 스파르타 녀석은 up_btn이다.

- main 페이지에서 보완할 점 : 실시간 기상정보에 따른 이모지 변경 기능 추가

  날씨의 정보까지 제공되는 API를 찾아 fetch기능으로 연결하고 싶은데 api를 찾기 어려운 모양이다.

점보트론의 배경이미지를 수정하여 조금 더 밝고 해맑아 보이는 거인 스파르타가 눈에 띈다 ㅋㅋ

- sub_01 페이지 보완할 점 : content_box와 btn 디자인의 수정, 여백조절

  구체적인 디자인이 정해지지 않아 허전했던 페이지를 회의를 틈틈히 하여 조금씩 꾸며나가고 있다.

담당한 팀원님 분이 정말 깔끔하고 완성도 높게 잘 만들어주셔서 수정할 부분이 거의 없었다!!

- sub_02 페이지 보완할 점 :위아래 여백조절

캐릭터 카드를 click하면 full_back과 함께 modal창이 생성되고 상세정보를 볼 수 있다. ( 상세정보는 민망해서 가리겠습니다;; )

초기와 다른 디자인의 모습이다. 방명록은 주말에 추가적으로 보수할 예정이다.

 

내가 담당한 페이지의 모습이다.. 왜 이렇게 진행이 안되어 있을까 생각이 드는 초라한 모습이다. ㅠㅠ

또한 욕심이 많아 가장 문제가 많은 페이지이다. (그래도 생각대로 다 구현되면 기분이 너무 좋을 것 같다ㅎㅎ)

 

- sub_03 페이지 보완 점 

1) input창 클릭(focus) 상태일 때 placeholder 메시지 안보이게 하기

2) btn 디자인 (sun_01 페이지와 동일한 느낌으로 변경 예정)

3) input창의 layout, 디자인 변경 (조금 더 자연스러운 형태가 있지 않을까 꾸준히 벤치마킹 후 적용 예정)

4) 방문록 작성 시 최신 순으로 배열되도록 설정 ( DB에서 데이터를 가져 올 때 최근 시간 순으로 정렬 )

5) 방명록에는 이름값, 방문록내용, 방문록 작성 시간(실시간 데이터값 필요)

6) 마무리 여백조절

---

2. 제작 중 발생한 문제와 해결방법 🐛

제작과정에서는 정말 많고 다양한 문제가 발생하였다. 그 중에서 쉽게 해결되지 않아 팀원들과 오래 고민했던 몇가지의 문제들과 해결 방법을 기록해놓고자 한다.

1) a태그 클릭 시 스무스한 페이지이동 효과

top_nav에 있는 a태그는 각 section의 ID값과 연결하여 클릭 시 대응되는 section 파트로 스크롤 바가 이동하도록 설정하였다. 이 때, 우리는 section의 전환이 스무스하게 이동되길 원하였다. 하지만 아무런 효과를 주지 않아도 적용이 되고 있었다!! (물론.. 우리가 원하긴 했었지만..) 왜 이런 상황이 발생했을까? 이유는 생각보다 간단했다;;

바로 Crome의  Experimental Features 때문이었다. Crome의 Experimental 중 smooth-scrolling 옵션을 활성화하였더니 웹사이트 css 또는 script에 아무런 효과를 주지 않아도 우리가 원하는대로 적용되었다.

정확한 원인은 알지 못한다. 추후에 공부하여 정리노트를 작성해야겠다.

2) 방문록 display:flex로 정렬하기

강의에서 나온 예제를 풀 때에는 발생하지 않았던 문제가 발생하였다.

바로 아래와 같이 신규로 생성된 카드가 container의 width값을 초과하더라도 줄바꿈이 되지 않는 것이었다.

이 문제를 통해 displat:flex의 속성에 대해 다시 공부하였다. display:flex를 사용할 때는 습관적으로 사용하는 것이 flex-direction, justify-content와 align-items이었다. 하지만 한가지의 속성이 더 있었다는 것을 잊고 있었다. 바로 flex-wrap 속성이다. 이 속성은 wrap, no-wrap 두 가지의 속성값을 가지고 있으며 default 값은 no-wrap이다. 이것을 wrap으로 변경하면 아래와 같이 자동으로 줄바꿈이 되는 모습을 볼 수 있다.

3) 새로 생성되는 카드에 해당 카드 작성시간의 정보를 가져와 작성일시 나타내기

아래와 같이 작성일 : ( 카드 생성 시간 : 댓글을 입력할 때의 시간 )을 가져오고 싶다.

하지만 내가 다시 만든 카드는 DB 데이터 값을 불러온 뒤 카드를 생성하는 방식이다. 때문에 새로고침을 할 때마다 모든 카드에 새로고침하여 카드가 새로 생성되는 시간이 표시되고 있다. 시간의 data값을 얻기 위해 timestamp를 new Date 객체를 통해서 채워보았는데 원하는 대로 구현되지 않았다.

그렇다면 Date 객체의 값 중 내가 원하는 값을 string data값으로 가지고 온다면 해결되지 않을까? Date 객체는 get으로 시작되는 몇가지의 메서드를 가지고 있는데 이를 활용하면 내가 원하는 부분의 값만 string데이터로 가져올 수 있을 것이다. (그래 좋아 당장 해보자!! 🔥)

 

먼저 윗부분에 timestamp를 조금 더 세세하게 나누어 firestore DB에 저장하였다.

이후 DB 필드에 맞는 데이터값을 각각 웹사이트로 불러와 양식에 맞게 작성되도록 하였다.

그 결과 이제는 새로고침을 하더라도 카드가 생성되는 시간이 아닌 방문록을 입력할 당시의 시간값을 업데이트할 수 있게 되었다.

 

이제 방문록 기록 파트에는 최신순으로 정렬하는 기능만 추가하면 될 것 같다!!