프로젝트/Eivom6 [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] 2. 초기 디자인 기획 우리 팀의 경우에는 프로젝트 시작 전에, 내가 혼자 만들어 보고 있던 디자인이 있었고, 팀원과 협의 후에 초기의 내 디자인을 가져가기로 정했다. 따라서 초기 디자인의 틀이 먼저 구성되어 있었기 때문에 이를 이용하여 사이트의 전체적인 틀을 먼저 짜고 들어갔고, 이후에 백엔드를 짜는 과정을 거치게 되었다. 1. 전체적인 디자인 틀 잡기 앞서 말했듯이 우리 팀의 경우에는 기본적인 디자인 틀이 잡혀있었기 때문에 이를 이용하여 확장을 해주기만 되는 상황이었다. 하지만 이 디자인의 내용이 나만 알 수 있는 데이터로 존재했기 때문에, 팀 프로젝트 과정에서 소통을 더욱 원활히 하기 위해, 프로토타이핑 툴인 카카오 오븐 (https://ovenapp.io/) 을 이용하여 이를 시각적으로 먼저 구현해주는 작업을 진행했다... 2022. 6. 7. 이전 1 2 다음
