영화추천5 [Eivom] 5. 프론트엔드 구조 및 정리 프론트엔드를 어떠한 식으로 구성했는지에 대해서 하나하나 적으려고 보니, 너무나 방대한 양의 작성 글이 생길 것 같아, 프론트엔드의 구조를 어떠한 식으로 구성했는지 정도만 짚고 넘어가려고 한다. 우리 팀이 어떠한 식으로 코드를 구성해 화면을 표현하고 구성했는지는 github를 통해 직접 코드를 보면 더 좋을 것이라 생각한다. view와 component들 가장 외적인 틀인 app.vue에 각종 라우터들을 끼워 넣은 뒤 차례대로 view, component들을 배치하여 화면을 구성해주었다. 메인페이지 가장 힘을 많이 주었던 부분이다. 실제로 영화가 나오는 부분에는 영상을 넣어주어, 생동감과 색감을 돋보이게 해주었다. 로그인 페이지 로그인 뷰를 상황에 맞추어 활용해 회원 가입이나 로그인일 때 같은 view를 .. 2022. 6. 9. [Eivom] 4. DRF를 이용한 백엔드 구성 DRF(Django rest framework)을 기반으로 사용했고, 회원가입, 로그인은 관련 라이브러리를 이용하여 좀 더 편하게 작업을 했다. backend 백엔드를 구성하기 위해 설치한 앱들은 다음과 같다. (settings.py에 설정 추가) 데이터를 관리하기 위한 앱은 3개를 만들어서 관리를 했는데, 계정 관련 데이터를 만들기 위한 `accounts` 커뮤니티 관련 'articles 영화 관련 'movies'. 총 3개를 만들어서 관리했다. 모든 코드를 리뷰하기는 어려우므로, 백엔드에서 가장 중요하다고 판단되었던 것들을 위주로 적어보도록 하겠다. URL 실제 코드를 보면 알겠지만 우리 사이트는 다음과 같은 URL로 이루어져 있다. 같은 url로 들어가더라도 해당 요청이 GET인지 POST인지 DE.. 2022. 6. 8. [Eivom] 3. ERD 구성 앞선 포스팅에서 말했듯이 우리 조는 디자인이나 넣을 데이터들이 모두 정해진 상태에서 백엔드 구성에 들어갔기 때문에, ERD를 구성하기에도 생각보다 편하게 작업에 들어갔다. ERD ERD 작성 툴은 가장 깔끔하다고 판단한 ERD Cloud를 사용했고, 팀원과 같이 ERD를 구성했기 때문에 Team ERD를 사용하여 같은 시간에 함께 작성을 했다. ERDCloud Draw ERD with your team members. All states are shared in real time. And it's FREE. Database modeling tool. www.erdcloud.com 우리 팀의 전체적인 ERD 구성은 다음과 같다. (실제 백엔드 구성과는 일부 차이가 있을 수 있다.) 이제 ERD를 하나하나 .. 2022. 6. 7. [Eivom] 0. 영화 추천 + 커뮤니티 사이트 Project Eivom 영화에 젖다. 프로젝트 소개 몇가지 질문만으로 당신이 원하는 영화를 찾아드립니다. 깔끔한 디자인 속에 다른 사람과 소통을 나눠보세요! 프로젝트 기간 2022.05.19 ~ 2022.05.26 (총 8일) 기술 스택 Backend Frontend 그외 팀원 구성 및 역할 분담. hanggeee DasisCore 프로젝트 매니징 - 일정 관리 - 프로젝트 일정 조율 - 리스크 관리 프로젝트 매니징 - 협업 도구 및 컨벤션 관리 - git 전략 수집 - 일정 관리 백엔드 -백엔드 총괄 - ERD 설계 - account, 게시판 관련 BE 구현 백엔드 - 기본 백엔드 베이스 구성 - movie data 관련 BE 구현 - REST API 프론트 엔드 - 프로필 관련 FE 구현 - 기능 .. 2022. 6. 7. 이전 1 2 다음
