개인카드 설명/대본

개인카드의 레이아웃은 2파트로 나누어 주기 위해 표를 설정하고 왼쪽에는 질문과 답변을, 오른쪽에는 카드 제목과 사진이 들어간 슬라이드를 넣어주었습니다.
디자인과 동시에 질문과 답변의 칸을 구분 할 수 있도록 부트스트랩에서 셀렉트(select), 체크박스(checks)의 코드를 활용했습니다.
자동 이미지 슬라이드는 사이트에서 코드를 데려와서 크기를 조정하고 적용 할 사진을 넣고 경로를 지정해줬습니다.

웹개발 종합 강의 마저 듣기...

댓글 삭제해보기

• mongoDB AJAX로 삭제 요청하기
• 참고 사이트
  • https://velog.io/@yuns8708/삭제-버튼-만들기
• ooposting은 oointro로 보내(fetch)(post) / oolisting은 oointro로 가져와(fetch)(get)

  GET과 POST는 이해했지만 경로를 이해 못해서 버튼도 만들기 어려운 상태

새로운 코드로 해보기

html 이펙트 요소

- [http://rwdb.kr/interestedeffects/](http://rwdb.kr/interestedeffects/)html은 건드리지 말고, CSS 복붙하기이때 .test 위까지만 복사, 붙여넣기 하고, .test 내에서
    
    ```
     display: inline-block;
      padding: 1em;
    ```
    
- 부분만 본인 카드 (.aycard{} 내에 붙여넣기).test before 부분에서 test를 본인카드로 수정하고 모두 붙여넣기 이때 예시 문서의 .test 내에 있는
    
    ```
     position: relative;
    ```
    
    - 는 이 태그와 겹치게 다른 태그를 표시할지 체크하는 부분인데,(여기선 버튼 밑에 레인보우 들어감) 우리는 이미 카드를 겹치게 하기 위해 다른 속성을 넣었으므로 건드리면 안 됨대신 before에서 width, height 값을 조금씩 (1~2프로씩 올리고, letf, top 값을 약 8px씩 내려서 효과가 잘 보이게 하기
    

DB 각각 카드 댓글과 관련

    저희 db의 경우는 이런식으로 하나의 comment에 각자의 comment값으로 저장이 되어서 들어갑니다.예) AY님 코멘트는 aycomment로 저장이 됩니다. 이것을 겟에서 불러올 때
    
    ```
    all_aycomments = list(db.comment.find({"aycomment": {"$exists": True}}))
    ```
    
    라는 코드로 aycomment만 가져와줘! 합니다.그런데 그러면 id값과 aycomment 부분이 같이 나오게 됩니다. 그런데 id값은 json 시켜줄 수 없어서 웹으로 넘길 수가 없습니다. 그래서 id값을 bson화 시키면 json 시킬수 있기 때문에
    
    ```
    result=dumps(all_aycomments)
    ```
    
    이 코드를 이용하여 all_aycomment를 bson을 이용하여 json화 시켜줍니다.
    
    json화 시켜준 것을 웹으로 넘겨줍니다.이 데이터는 근데 console.log로 찍었을 때 array 형태로 나오지만 타입은 array가 아닙니다.
    
    따라서 for문을 돌리기 전에 이 리스트를 array로 바꿔주는 작업이 필요합니다. array 타입이 아니라면 for이 돌아가지 않아 오류가 나기 때문입니다.
    
    ```
    let rows = JSON.parse(data['result']);
    ```
    
    이 코드로 data['result']값을 array화 시켜준 뒤, 그 다음부터는 웹개발 종합반 강의에서 들으셨다싶이 forEach로 돌려서 각자의 댓글을 html로 붙여주면 되겠습니다. (편집됨)
    
    

프로젝트 과제 완성

디비는 뒤늦게 조금이라도 해보고, 팀원분이 배포까지 완료...
+홈페이지 구동 영상 편집..약간..
다들 응원해주시고 각자 열심히 하고 또 모여서도 열심히하고...
너무 감사합니다

• 프로젝트 사이트
  
  
  
  
  
  
  

약간의 문제라면 master을 배포하고 싶었는데 파일 망칠까봐 다른 브랜치에서 배포해서값 수정하실 때

1. totheworld 브랜치로 머지
2. 수정 파일을 depoly 밖에서 수정해보고, app.py와 localhost로 테스트 해보신 뒤 잘 돌아가면
3. deploy 내에 있는 같은 이름의 파일에 똑같이 수정 (그냥 파일 통째로 복붙하시거나, 파일 자체를 덮어쓰기 하시거나 자유!)
4. 터미널에 `eb deploy intro 3`

• comment 아 deploy라는 폴더가 있어요 이 폴더 안에 있는 내용만 배포가 되기 때문에, 모든 수정 사항은 이 폴더 내의 파일에 반영이 되어야 해요!

종합정리/느낀점

웹개발 종합반 강의 보면 다 구현 할 수 있을 것 같은 난이도였지만
강의 미완강, 실력 부족, 이해력 부족(ㅠㅠ)으로 많이 따라가지 못했다.
그리고 작업 중 새롭거나 응용된 문법, 함수 등이 나오면 멘탈이 나갔다...
기초지식, 흐름 해석 등이 부족해서 완성 돼 있는 코드를 보고 해설을 보면서 공부하고 싶다. (막막...)
프로젝트 기간 안에 강의도 같이 보느라고 원래 공부하던데로 못해서 다시 제대로 노션에다 적고 공부할 예정