[Eivom] 5. 프론트엔드 구조 및 정리

 

 

 

 

 

프론트엔드를 어떠한 식으로 구성했는지에 대해서 
하나하나 적으려고 보니, 
너무나 방대한 양의 작성 글이 생길 것 같아, 
프론트엔드의 구조를 어떠한 식으로 구성했는지 정도만 짚고 넘어가려고 한다.

우리 팀이 어떠한 식으로 코드를 구성해 화면을 표현하고
구성했는지는 github를 통해 직접 코드를 보면 더 좋을 것이라 생각한다.

 

 

view와 component들

---

가장 외적인 틀인 app.vue에 각종 라우터들을 끼워 넣은 뒤

차례대로 view, component들을 배치하여 화면을 구성해주었다.

 

 

 

 

메인페이지

---

 가장 힘을 많이 주었던 부분이다.

실제로 영화가 나오는 부분에는 영상을 넣어주어, 생동감과 색감을 돋보이게 해주었다.

 

 

 

 

 

 

 

 

 

로그인 페이지

---

로그인 뷰를 상황에 맞추어 활용해

회원 가입이나 로그인일 때 같은 view를 사용하도록 했다.

 

 

 

 

 

 

 

회원가입 페이지

---

 

 

 

 

 

 

 

 

 

프로필 페이지

---

 

 

 

 

 

 

 

 

 

 

영화 상세 페이지

---

들어가는 정보의 양이 많은 만큼, 들어가는 component의 수도 많아졌다.

그나마 들어가는 컴포넌트의 수가 적을 수도 있는게,

우리는 영화의 정보를 axios로 바로 TMDB에서 가져와서 보여주었으므로 

만약 우리 데이터베이스에서 가져왔다면 조금 더 많았을 수도 있었을 것 같다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

영화 추천 페이지

---

제일 처음 계획과 모양새가 제일 많이 달라진게 이 페이지가 아닐까 싶다.

처음 페이지를 넘기는 방식의 계획에서 시간적인 제약으로 인해 스크롤 형식의 스탭퍼로 바꾸었으며,

실시간으로 질문을 주는 느낌을 주기 위해 애니메이션을 추가해주었다.

css 기술이 많이 추가되었고, 오히려 원래 사용하기로 했던 component는 사용하지 않고,

view에서 모든걸 해결했다.

 

 

 

 

 

 

 

 

 

 

 

 

 

커뮤니티 페이지

---

좀 더 시간을 투자했으면 더 이쁘게 나오지 않았을까 하는 아쉬움이 많은 페이지이다.

해당 view의 프레임은 다음 그림과 같고, 

해당 게시글에 대한 간략한 정보도 표에 같이 나오도록 했다.

또한 추천할 영화가 없을 경우에는 communitycard.vue가 사라지고,

커뮤니티 vue가 중앙으로 올 수 있도록 반응형 웹페이지로 구성했다.

 

 

 

 

 

 

 

 

 

 

커뮤니티 게시글 페이지

---

 

 

 

 

 

 

 

 

---

느낀 점

확실히 눈에 보이는 것 때문인지는 몰라도, 프론트가 꾸미는 맛이 확실히 있다고 느꼈다.

언제나 프로젝트가 끝나고 느끼는 건.. 막상 할 때는 너무 힘들고 어렵더라도, 일이 끝나고 나면 

크게 어려운건 없었는데 왜 이렇게 고민을 많이 했을까 라는 생각이 많이 들었다.

그리고 고칠 게 정말 끝 없다는 생각도 같이 들고, 개선할 점이 많이 보였다.

 

 

 

+ 나중에 프로젝트를 할 때 개선하면 좋을 점.

• 어려운 문제를 해결했을 때 어떠한 식으로 해결했는지 따로 작성해두기.
• 모든 웹페이지에서 사용하면 좋을 테크닉들 따로 정리해두기

 

 

---

 

자세한 코드나 움직이는 움짤을 보고 싶다면  아래 링크로 와주시면 감사하겠습니다.!

언제나 코드 수정과 질문은 환영하니 자유롭게 댓글달아주세요!

 

https://github.com/DasisCore/Eivom

GitHub - DasisCore/Eivom