Hanghae99 4일차 (Project 완성 및 제출)

드디어 항해 99의 첫 시작인 1주차 미니 프로젝트를 완성했다!
제출 마감 4분전까지 모든 팀원분들이 마음모아 열심히 해주셨던 덕분에 
무사히 제출을 끝낼 수 있었다!

---

깃허브 주소

GitHub - Dplo1514/MiniPR_6: 항해 99 6기 2조의 1주차 미니프로젝트 입니다.!

 

---

 

내가 맡은 Community Page의 시연영상

---

-1- Community Page 구현 중 꼭 해보고 싶었던 것 

1 . Mobile 환경에서도 정상동작이 가능하도록 반응형으로 구현

1-1 : css를 활용해 두가지 조건으로 디자인해 구현 어느정도 구현 완료

/* 가로가 min-width 이상일 때의 조건 */
@media (min-width: 600px) {}

/* 가로가 max-width 아하일 때의 조건 */
@media (max-width: 1000px) {}

2-2 : 화면을 축소하면 공백이 보여지는 문제가 발생..  부족한 시간으로인해 완벽하게 해결하지 못한 후 배포

매니저님과의 기술 Q&A에서 질문

Q : 실무에서 front를 구성할 때에도 조건을 부여해 max-width가 일정 px 이하가되면 view가 달라지게 구현을하나요?

A1  : 다른 방법도 있지만 조건을 통해 Front에서 반응형을 구현 할 때 모바일 , 태블릿 , 데스크탑 3가지로 구현합니다.

A2 : 순서는 display의 크기가 작은 모바일 -> 태블릿 -> 데스크탑 순서로 구현합니다.

A3 : 이유는 작은화면을 늘리는게 큰 화면을 줄이는 것 보다 과정적으로 쉽기 때문

 

반응형 웹페이지를 구성할 일이 있을 때 어떤 순서로 작업해야할지

피드백을 통해 배웠으므로 똑같은 실수는 하지 않을 것 같다.

세세한 피드백을 주신 매니저님 감사합니다!!

 

-2- Community Page 구현 중 꼭 해보고 싶었던 것 

1. db collection에 요소로 새로운 collection 넣기

1-1 : insert_one옵션으로 조건을 넣어 해당 조건에 일치하는 collection에 새로운 collection을 넣으려다 실패!

1-2 : 팀장님의 update_one %pull 조건에서 힌트를 얻어 구글링 -> push발견 -> 아래 코드로 구현완료!!

db.cars.update_one({"carname" : index} , {'$push':{'comment' : doc}})

구현 성공한 데이터베이스의 모습!!

 

-3- Community Page 구현 중 꼭 해보고 싶었던 것 

1 : ajax를 사용하지 않고 Server에서 Client로 render_template할 때에 데이터를 보내줌

1-2 : car라는 객체에 db의 index만 다르게해 clinet로 보내준다.

@blueprint.route("/") #<- 데코레이터
def community_template():
    cars = list(db.cars.find({'name' : 'malbu'},{'_id':False}))

    return render_template("community.html" , car = cars)

1-3 :  프론트에서 받아온 data를 jinja를 통하여 바로 바꿔끼워줌

1-4 : 받아온 데이터가 달라짐에 따라 user에게 보여지는 내용이 달라지게 설계

                {% set test = car[0]['comment']%}
                {%for et in test%}
                    <article class="media">
                        <div class="media-content">
                            <div class="content">

                                <p>
                                    <strong id ="test"> {{et['user_name']}} </strong> <small>{{et['email']}}</small> <small>{{et['now']}}</small>
                                    <br>
                                    {{et['comment']}}
                                </p>
                            </div>
                        </div>
                        <div class="media-right">
                            <button on_click = "comment_delete()" id = delete class="delete"></button>
                        </div>
                    </article>
                {%endfor%}

2 : main에서 db index가 제대로 되지않는 문제가 발생 제출 기한내에 완성하지 못할 것 같아 각자 다른 template을 생성ㅠㅠ..

생성한 html들..

매니저님과의 기술 Q&A에서 질문

Q : 보내주는 data에 따라 다른 내용이 보여지게끔 설계를 해봤으나 실패했습니다ㅠㅠ..

A1  : db_index 과정에서 문제가 생겼을 것 많은 시도를 통해 해결할 수 있을 것 같은데 아쉽다..

A2 : jinja server sider rendering을 통하여 html을 동적으로 서버에서 늘어나게 할 수 있는 방식이 더 적합할 수 있음 

---

Project 중 문제 및 해결

 

1 : DB에 접근할 id와 password의 깃허브를 통한 유출

-T-

-blueprint 방식을 통한 레이아웃 배포 후 init.py에 들어있는 db의 key값이 깃허브에 그대로 push되는 문제가 생겼다.

 

-S-

- id와 비밀번호를 config.json의 json형태 데이터로 만들어 팀원들에게 배포 

- __init__.py에서 import {secret_ID}:{secret_key} 를 db주소에 fstring으로 입력

ca = certifi.where()
client = MongoClient(f'mongodb+srv://{secret_ID}:{secret_key}@cluster0.ypa9i.mongodb.net/myFirstDatabase?retryWrites=true&w=majority',tlsCAFile=ca)
db = client.MiniPR2

-.gitignore에 config.json파일을 추적하지 않게 작성 후 push 팀원들에게 재배포

-충돌이 일어나거나 각자 사용하는 IDE가 다른점을 고려해 pull이 필요없는 파일도 작성해줬다.

MiniPR/__pycache__
MiniPR/.idea
MiniPR/.vscode
MiniPR/main/__pycache__
MiniPR/main/.ipynb_checkpoints
MiniPR/main/config.json

---

 

Project 중 문제 및 해결2

 

1 : main에서 community로 넘어올 때 

-T-

-blueprint 방식을 통한 레이아웃 배포 후 init.py에 들어있는 db의 key값이 깃허브에 그대로 push되는 문제가 생겼다.

 

-S-

- id와 비밀번호를 config.json의 json형태 데이터로 만들어 팀원들에게 배포 

- __init__.py에서 import {secret_ID}:{secret_key} 를 db주소에 fstring으로 입력

ca = certifi.where()
client = MongoClient(f'mongodb+srv://{secret_ID}:{secret_key}@cluster0.ypa9i.mongodb.net/myFirstDatabase?retryWrites=true&w=majority',tlsCAFile=ca)
db = client.MiniPR2

-.gitignore에 config.json파일을 추적하지 않게 작성 후 push 팀원들에게 재배포

-충돌이 일어나거나 각자 사용하는 IDE가 다른점을 고려해 pull이 필요없는 파일도 작성해줬다.

MiniPR/__pycache__
MiniPR/.idea
MiniPR/.vscode
MiniPR/main/__pycache__
MiniPR/main/.ipynb_checkpoints
MiniPR/main/config.json

---

사전 스터디 프로젝트 이후 두번째로 진행한 협업 프로젝트

각자 작업 후 push 후 pull한 후에 충돌과 문제를 해결하는 과정,

혼자 해결하기 힘든 문제를 공유하고 다 같이 해결해보고

해결됐을 때에 다 같이 기뻐하는 과정을 절대 잊을 수 없을 것 같다.

함께한 6기 2조 팀원 여러분 너무 고생많으셨습니다!!