[개강전] 미니 프로젝트 정리

지인·2023년 5월 12일

프로젝트

목록 보기

4/17

🐰1팀 비전5 팀과제 정리

🥕 팀과제 중요사항

협업하는 능력 >>>>> 개인 실력
웹 개발의 전반의 흐름을 익혀보는 과정

[내일배움캠프] 사전캠프 팀과제 발제

https://teamsparta.notion.site/teamsparta/5579c90a3b9e407ea53cecd48a38f03b

에러를 발견한다면?

https://teamsparta.notion.site/916f465b27de4f9698dbf916b2d424ce

모르는 건 어떻게 찾아볼까요?

https://teamsparta.notion.site/b33117aae81c4839bc786b205ea1e844

🥕 일자별 진행상황

5월 8일(월) : 팀과제 시작 및 의견 공유, 각자 역할 분담
5월 9일(화) :
1. 오후 6시 : 중간 점검(기능 구현 점검)을 위한 코드 공유
2. 오후 8시 : 코드 정리 및 전체적인 틀 작동 확인
  1. 상세 페이지 출력 부분 문제점 발생 : 다음 날 오후 3시까지 각자 정보 조사 후 상의
5월 10일(수) :
1. 15:00 ~ 15:20 : 기술적 불가능 인정 후 대안 도출
2. ~오후 9시 : 전체 코드를 보면서, 각자 코드에 세부적 내용 보안
5월 11일(목)
1. ~ 09:00 : 팀장이 정리한 최종 코드 카카오톡 공유
2. 15 ~ 18시 : 각자 코드 확인 및 최종점검 후 개발 완료
3. 18 ~ 21시 : 개발완료 후 결과 나눔
5월 12일(금) 3시 이후 일정 ~ : 각자 최종코드를 가지고 마음껏 공부해보기

🐾 팀 소개

팀이름 : 비전5(vision5)
1. 5명의 비전공자가 모였다라는 뜻에서 비전5(vision5)로 정했습니다.
2. 팀장 : 김장원
3. 팀원 : 서지인, 한지훈, 김근호, 강정훈
스터디 계획
1. 3:00 출석체크, 오늘 공부 계획 공유
2. 5:30 중간정리
3. 8:30 오늘 공부한 내용 공유
  1. 개발일지 작성
4. 코딩테스트
  1. https://school.programmers.co.kr/learn/challenges?order=acceptance_desc&page=1&languages=java&levels=0
스터디 규칙
1. 캠 켜기
2. 마이크 음소거

🐾 팀 과제 소개

주제 : 영화
서비스 이름 : 비전5 영화
전체 정보 목사용자 직접 등록
1. url(url)
  1. url 입력시 자동 등록(웹스크롤링)
    1. 영화이름(title)
    2. 영화 설명(decs)
    3. 영화 이미지(image)
    4. 제작자 : 감독(director)
    5. 등장인물1(character1)
    6. 등장인물2(character2)
    7. 등장인물3(character3)
2. 별점(star)
3. 사용자 코멘트(comment)
서비스 : 개인 사용자들이 영화를 소개 및 추천하고, 각자 영화를 관람한 정보를 공유하는 사이트입니다.
1. 메인 : 개인 사용자들이 영화를 등록, 소개한 전체적인 목록을 보여주는 부분입니다.
  1. 별점, 영화이름, 영화설명(마우스 오버시), 영화이미지만 출력
2. 등록 페이지 : 자신이 추천하고 싶은 영화를 등록하는 곳입니다.
3. 상세 페이지(영화 목록 클릭 시 출력)
  1. 상세 영화 소개(모든 내용 출력)
기능과 역할
1. 디자인 그림 : 한지훈 (with 그림판)
2. HTML, CSS(기본틀 만들기)
  1. 담당 : 서지인, 김근호
  2. 역할
    1. 메인 페이지 : 서지인
      1. 기능 : 마우스 오버시 영화정보 표현
    2. 영화 등록 페이지 : 강정훈 - 팝업기능
    3. 영화 상세 페이지 : 김근호
3. JAVASCRIPT
  1. 담당 : 강정훈
4. python
  1. 담당 : 한지훈, 김장원
  2. 기능
    1. 웹스크롤링 데이터를 등록 페이지에서 영화 등록 → 메인, 상세 표시 : 한지훈
    2. 상세 페이지 관람후기 작성 후 출력 및 삭제 : 김장원
5. 최종 정리
  1. 김장원
팀 과제에 대한 컨셉
1. 레이아웃 및 기능
  1. 메인페이지 : 영화 소개
    1. 세부 그림
    2. 기능1 : 영화 등록
      1. 자동 등록(url입력시 아래 내용)
        
        영화이름, 영화 설명, 영화 이미지, 제작자 : 감독, 등장인물
      2. 사용자 입력
        
        url(CGV에서만 가능함), 별점, 코멘트
      3. 디자인
  2. 상세페이지(영화 클릭시)
    1. 기능
    2. 전체디자인
개발 및 결합 과정에 대한 방법 논의 :
1. 방법2: 각자가 작성한 코드를 공유하며 팀 내부에서 논의한 형식으로 각자가 코드 를 결합하여 하나의 결과물을 만듭니다.
2. 공유방법
  1. 개발일지 블로그(맨 하단 작성)
  2. 전체 파일은 카카오톡 공유
워크 플로우
중간 점검 논의 사항, 보완점
1. 프론트 엔드
  1. 보완사항
    1. (완료)폰트 통일
    2. (완료)상단 배너 스타일 통일
    3. (완료)전체적인 배경 통일
    4. (완료)버튼 효과 메인페이지와 같게 만들기
  2. 도전 과제
    1. (완료)등록 페이지는 팝업으로 만들기
2. 백엔드
  1. 보완사항
    1. (완료)로고/배너 클릭시 메인페이지로 넘어가는 기능 만들기
  2. 도전과제
    1. (대안)url에서 데이터값 위치를 못 찾으면 저장되지 않고 오류 발생 : 문제 해결해보기
      1. 예) CGV에서 문재인입니다 url 입력시 오류 발생 → 기술적인 문제로 현재 배움 단계에서는 배운 기술 위주로 구현 진행함. (매니저님 의견)
    2. 영화 배너 클릭시 영화 내용 개별 출력
      1. (대안)영화 배너 클릭시 특정 영화 정보 출력 → 표현 방식을 바꾸어서, 해결함
        
        문제점 : 현재는 모든 영화를 한 곳에서 확인하고 있음
      2. (완료) 상세페이지 영화마다, 등록평 따로 만들기
        
        문제점 : 현재는 맨위에서만 등록 및 출력됨
    3. (완료) 삭제 기능
      1. sum을 만드는 방법으로 개별값을 구해서 삭제, 최종적으로는 헤시태그로 삭제 데이터를 정할 수 있음을 알게됨
3. 공통
  1. 코드 정리(주석 작성)
최종 정리
1. 코드 정리 및 마무리 담당 : 김장원
  1. 정리하면서 발생한 문제 및 해결 과정
    1. 메인 로고가 일치하지 않음 → 통일했음
    2. 영화 등록에서 중복으로 url입력시 ‘비전5가 추천하는 영화 Best4’ 상세 페이지”에서 여러개가 출력되는 의도하지 않은 오류 발생 → ‘비전5가 추천하는 영화 Best4’에 DB를 따로 작성하여 해결함 DB이름 : recommend_movies
    3. 유저 코멘트 출력을 어디에 할 지 정해야 함(현재 임의 지정), 글씨 크기 등
2. 최종 점검 (2023년 5월 11일 목 오전 9시 ~ 오후 3시
  1. 본인 맡은 부분 코드 이상 없는지 점검(미구현, 미실행)
    1. 프론트엔드
      1. 예시) 글자 크기, 텍스트에 효과 적용 안됨 등..
    2. 백엔드
      1. 예시) 기능이 동작하지 않음. 등...
  2. 전체적으로 일정을 돌아보면서, 협업했을 때 좋았던 점, 개선사항 생각해보기
    1. 개인 실력보다는 협업에 관점에서 생각해보기
    2. 협업시 좋았던 점, 개선사항
      1. 예시) 좋았던 점 : 각자 역할 분담과 책임이 분명해서 좋았다.
      2. 예시) 개선사항 : 각자 역할이 끝난 후 할 일이 없음 - 팀코드라 내 역할 외에 다른 부분 관심이나, 공유가 부족하고 직접 하려고 해도, 오류 발생 위험이나 협업 문제로 못하게 됨.
    3. 기타 등등 (위 내용 말고도 주도적으로 생각주세요.ㅎㅎ)
🐾 마무리 : 코드 리뷰 및 팀원 의견 나눔 시간
1. 각자 아래 사항 중 더 나누고 싶은 의견 수렴 후 작성 (10분)
2. 각자 코드 리뷰 진행 (2023년 5월 11일 목요일 오후 7~ 8시)
  1. 본인 맡은 코드 부분 구체적인 설명과 함께 팀원들에게 활용 방법 및 참고 자료url 공유 (기술 전수)
    1. 주요 기능은 상세히 설명하여 팀원들이 할 수 있도록 할 것
    2. 진행 순서 및 특별히 깊게 나눌 코드 내용
      1. 김장원 : 게시글 작성 및 삭제(특히 삭제 설명), 흐름도 참고
      2. 김근호 : 상세 페이지
      3. 서지인 : 메인 페이지 - 마우스 오버 기능
      4. 강정훈 : 등록 페이지 - 팝업 기능
      5. 한지훈 : 웹스크롤링 - 작동원리 및 구조, 흐름도 참고
  2. 최종 점검 후 각자의 자리에서 하고 싶거나 보완하고 싶은 사항(공부하면서 구현해보기)
    1. 김장원 :
      1. 해시데이터로 삭제 데이터 해보기.
      2. 팝업기능 구현
      3. 개인적으로 홈페이지 배포해보기.
    2. 김근호 : 3번 g의견참고
    3. 서지인 : 3번 g의견참고
    4. 강정훈 : 3번 g의견참고
    5. 한지훈 : 3번 g의견참고
3. 팀원 의견 나눔 시간(위에 단계가 다 끝난 후 진행했음 11일 오후 8시~9시)
  1. 전체 일정을 돌아보면서 좋았던 점, 개선하면 좋을 점
    1. 좋았던 부분
      1. 김장원 : 말을 잘 못하는 편인데, 그래도 열심히 들어주시고, 끝까지 기능 구현해주시는 팀원 분들이 너무 좋았습니다.(참 쉽지 않은 과정인데, 너무 고맙습니다. )
      2. 김근호 : 팀원분들과 함께 배운 것들을 가지고 적용해보기도 하고 새로운 것들을 시도해볼 수 있어서 좋았다.
      3. 서지인 : 다른 팀원들의 코드를 볼 수 있었다는 점과 헙업에 대해 조금이나마 경험해 볼 수 있었다는게 좋았다.
      4. 강정훈 : 친해지고 가까워지면 프로젝트 때 더 많은 질문을 하거나 도움을 줄 수 있을것 같은데 일주일만에 바뀌는게 아쉽다.
      5. 한지훈 : 다같이 개발하는 경험을 해본다는게 너무 좋았다.
    2. 이런게 별로 였다 지양 ▷ 개선사항 함께 말하기(이런 부분에서는 이렇게 하면 더 좋을 것 같아요.)
      1. 김장원 : 제가 약간 멈추는 때가 있는데, 그래서 최대한 미리 정리해서 말하려고, 노력을 하고, 중요한 내용은 적어서 전달을 했습니다.
      2. 김근호 :
      3. 서지인 :
      4. 강정훈 : 가능한건 아니지만.. 서버랑 프론트를 모두 경험하고 싶었지만 서버를 많이 못 건드려본게 아쉬웠다.
      5. 한지훈 :
  2. 개강 전 첫 협업을 해봤는데, 어떤 느낌이었는지??
    1. 김장원 : 많이 배웠습니다. 이런 자리에서 팀장도 처음인데, 이렇게 완성한게 정말 너무 감사합니다.
    2. 김근호 : 개발에서의 협업을 느껴볼 수 있어서 좋았다.
    3. 서지인 : 협업에서 가장 중요한건 소통이라고 많이 들었지만 와닿지 않았는데 소통의 중요성을 많이 느꼈다.
    4. 강정훈 : 협업의 어려움과 장점을 동시에 느낀 시간이었다. 혼자 공부하는것보다 훨씬 효율적인 시간이었다. 그리고 생각보다 역할분담이 많이 어렵다… 코드 관리도…
    5. 한지훈 : 처음이라 뭘해야 할지도 몰라 손 놓고 있던 시간이 많았던것 같아 아쉽다. 그래도 각자 파트를 하면서도 서로 도움을 주고 받을 땐 협업다운 협업을 하는 기분이 들어 좋았다.
  3. (김장원 의견) 협업하면서 성장한 부분 : 1기술적인 부분, 2기술 외 부분
    1. 김장원 :
      1. 3,4,5주차에 배웠던 부분 잘 알고 있다고 생각했는데, 실제로 다시 해보면서 더 깊이 있는 내용을 배웠습니다.
      2. 기술 외 부분 : 소통!!!, 안되도 포기 하지 않고, 대안을 찾는 부분
    2. 김근호 : HTMS/CSS에 대해서 배운 것을 토대로 새롭게 만드는 과정에서 복습도 하고 새로운 것들도 알아보면서 좀 더 구체적으로 공부할 수 있었다.
    3. 서지인 : 마우스 오버 시 어떤 CSS 속성을 써야하는 지 배웠고, 첫 코드 리뷰는 많이 못했지만 그래도 이제는 내 코드를 이해한 상태에서 어떤식으로 리뷰를 해야할지 감이 조금 생긴 것 같다.
    4. 강정훈 : 기술적으론 레이아웃 개념을 조금이라도 알게됐다, 기술 외는 확실히 실력이 느는걸 느껴서 조금 재미를 느꼈다.
    5. 한지훈 : 서로 의견을 주고받으면서 더 나은 방향으로 코드를 수정해나가는 경험을 쌓은 것 같다.
  4. (김장원 의견)협업하면서 가장 도움을 많이 받은 팀원 딱 1명, 이유도 나눠주세요.
    1. 김장원 :
      1. 한지훈님 : 백엔드 부분에서 많은 기술을 도와주셔서, 기타 코드 합치는 부분과 팀원들과 소통하고, 이끌어나가는 부분을 더 잘 할 수 있었습니다.
      2. 김근호님 : 상세페이지를 요청드렸었는데, 어려운 요청인데도 쉽게 잘 해결해주셨습니다.
    2. 김근호 : 김장원님께서 팀장으로서 팀을 정말 잘 이끌어주셨다.
    3. 서지인 : 강정훈님 덕분에 코드를 그나마 짧게 만들 수 있었다.
    4. 강정훈 : 지훈님, 이유는 제가 새로고침 문제때문에 골머리 썩힐 때 도와주심
    5. 한지훈 : 장원님 백엔드도 백엔드지만 코드를 합치고 정리하고 수정까지… 장원님 파트만으로도 바쁘셨을 것 같은데 정말 든든했어요
  5. (김장원 의견) 야근한 적이 있다 없다? ㅎㅎ 몇시 까지 못잤다. 찐개발자 경험 했는지?
    1. 김장원 : 1시 정도까지는 개발하면서 못 잤습니다. 그래도 설레는 마음으로 즐겁게 작업할 수 있었습니다.
    2. 김근호 : 상세페이지를 빨리 만들어야 팀원분들께서 작업하시기 수월하실 것 같아서 첫 날에 2시에 잤다.
    3. 서지인 : 첫 날만 빨리 만들어야 한다는 생각에 2시에 잤지만 찐 개발자 경험이라기에는 아직 먼 이야기 같다.ㅎㅎ
    4. 강정훈 : 아직은 없는데 본 캠프 들어가면 비일비재 할듯 합니다…
    5. 한지훈 : 야근한 적은 없는데…ㅎ 찐개발자 경험은 어느샌가 등과 목이 앞으로 굽혀나가고 있는 걸 발견했을 때?
  6. (서지인 의견) 자기가 부족했다고 생각한 점 - 이유를 알아야 본프로젝트에서 도움이 될 것 같다.
    1. 김장원 : 프론트엔드 부분은 어렵다. 소통도 적극적으로 하기가 어렵다고 느낍니다. 배포에서 한계를 느꼈는데, 자바랑 스프링을 배우면 이부분 해결할 수 있다고 믿습니다.
    2. 김근호 : 백엔드 부분에 대한 정리가 좀 더 필요한 것 같다.
    3. 서지인 : 이해가 부족했다. 웹개발 강의를 정확히 이해하지 못한 상태로 프로젝트를 시작해서 백엔드 부분은 손도 못댔다.
    4. 강정훈 : 생각보다 서버에대한 지식이 없었고 서버를 이해하지 못 했던것 같다. html도 생각처럼 잘 만들어지지 않는다…
    5. 한지훈 : 상세페이지를 하나하나 따로 만들어야만 했던 때 자신의 한계를 느꼈다…
  7. (강정훈 의견) 본인이 맡은 부분 외에 더 해보고 싶은 부분이 있었는지? -다른 프로젝트 가서 해보고 싶었던 부분 지원해서 해볼 수 있으니까 생각해보면 좋겠다.
    1. 김장원 : 일단은 저는 제가 많은 부분에 대해서 더 깊이 있게 배우고 싶어요. 그래도 나중에는 프론트엔드도 어느정도는 이해하는 개발자가 되고 싶습니다.
    2. 김근호 : 자바스크립트나 백엔드 부분을 맡아보고 싶다.
    3. 서지인 : 백엔드 부분을 해보고 싶다.
    4. 강정훈 : 위 내용처럼 서버 쪽 백엔드를 더 다뤄보고싶다.
    5. 한지훈 : 기존에 만들어뒀던 틀을 배껴오는게 아닌 처음부터 끝까지 페이지의 html+css+javascript를 만들어 보고 싶다.
  8. (한지훈 의견) 특별히 더 다른 부분 중에서 어떻게 만들었는지 궁금한 부분?
    1. 김장원 : 강정훈님이 만드신 팝업페이지 기술 꼭 해보고 싶습니다.
    2. 김근호 :
    3. 서지인 : 코멘트 삭제기능
    4. 강정훈 : 상세보기에 레이아웃…
    5. 한지훈 : 정훈님이 만드신 팝업페이지! 부트스트랩같은 툴도 없이 한땀한땀 만드신 걸 알았을 때 더 궁금했어요
  9. (김근호 의견) 남은 시간동안 부족한 부분을 어떻게 보완할지 구체적으로 어떤 공부를 할지 나눠주세요.
    1. 김장원 : 삭제 기능 구현(또 다른 해결책 받은 것으로 해보기)
    2. 김근호 : 웹개발 종합반 4, 5주차를 중점적으로 여러 번 복습해 볼 예정이다.
    3. 서지인 : 앱개발 4,5주차를 이해하고 팀 프로젝트 코드를 보고 공부할 예정
    4. 강정훈 : 웹종반 뒤에 할 수 있는 해적단 수업을 조금 들어볼 계획…
    5. 한지훈 : 사놓고 어려워서 묵혀뒀던 책의 진도를 더 나갈려고 한다
  10. 마지막으로 팀원들께 한마디씩하고 마무리
    1. 김장원 : 함께해서 너무 행복했습니다. 많이 설레이고, 행복한 과정이었습니다. 여기서 못한 우리의 어려움, 4개월 후에는 해결하고, 진짜 개발자가 되면 너무 좋겠습니다. 자바 스프링 화이팅 해요!!!!
    2. 김근호 : 팀원분들과 함께할 수 있어서 행복했습니다. 앞으로도 열심히 공부해서 다 같이 훌륭한 개발자가 됐으면 좋겠습니다. 다들 정말 고생 많으셨습니다!
    3. 서지인 : 팀원분들이 맡은 일을 너무 잘하셔서 저도 덕분에 으쌰으쌰 할 수 있었습니다. 특히 팀장님의 코드, 문서 정리 실력 정말 최고에요ㅎㅎ 모두 너무 수고하셨습니다!!
    4. 강정훈 : 5개월동안 같은 공간에서 공부하니까 팀이 달라져도 모르는거 뛰어와서 물어봐주세요!!
    5. 한지훈 : 팀은 나눠지더라도 나중에 모르는 내용 스스럼없이 물어보고 답해줬으면해요. 그리고 건강이 우선입니다!!

🐾 테스트시 주의사항

url은 cgv 페이지만 가능 https://www.cgv.co.kr/
영화 url 따라 안되는 경우 존재(데이터값이 없을 경우 오류 발생)

🐾 참고 자료

VSCODE 단축키
👉🏻 파일
1. Ctrl + N : 새 텍스트 파일
  
  👉🏻 선택 관련
2. 선택
  1. 모두 선택 : Ctrl + A :
  2. 선택 확장 : Shfit + Alt + 왼쪽방향키
  3. 선택 축소 : Shfit + Alt + 오른쪽방향키
  4. 반복되는 단어 한번에 수정 : Ctrl + D
3. 클릭하는 곳마다 커서 만들기 : Alt + 커서
4. 마우스 드래그해서 커서 만들기 : Shift + Alt + 커서
5. 선택한 영역에 커서 만들기 : Shift + Alt + 커서
6. 라인 복사
  1. Shfit + Alt + 위방향키 : 위로 라인 복사
  2. Shfit + Alt + 아래방향키 : 아래로 라인 복사
7. 라인 이동
  1. Alt + 위방향키 : 현재 라인을 위로 이동
  2. Alt + 위방향키 : 현재 라인 아래로 이동
8. 코드 정렬
  1. shift + alt + F
  
  👉🏻 설명, 주석
9. Ctrl + / :
  1. 커서가 위한 라인을 주석으로 설정하고, 설명을 작성할 수 있습니다.
  2. 선택한 영역을 주석으로 설정하고, 설명을 작성할 수 있습니다.
  3. 한 번 더 누르면 취소
```
 **예> HTML :     CSS : /* border: 1px solid black; */**
```
10. Shift + Alt + A : 선택한 영역을 주석을 설정하고, 설명을 작성할 수 있습니다. 한 번 더 누르면 취소
  
  예> HTML : CSS :/* */
pymongo 명령어 모음 from pymongo import MongoClient
client = MongoClient('mongodb+srv://sparta:test@cluster0.rsr8xyc.mongodb.net/?retryWrites=true&w=majority')
db = client.dbsparta 저장 - 예시 doc = {'name':'bobby','age':21}
db.users.insert_one(doc) 한 개 찾기 - 예시 user = db.users.find_one({'name':'bobby'}) 여러개 찾기 - 예시 ( _id 값은 제외하고 출력) all_users = list(db.users.find({},{'_id':False})) 바꾸기 - 예시 db.users.update_one({'name':'bobby'},{'$set':{'age':19}}) 지우기 - 예시 db.users.delete_one({'name':'bobby'}) 실행 python app.py
flask 기본 setting
1. 파일 이름 : app.py 로 생성
2. 가상 환경 만들기 시작
  1. 터미널 켜기
  2. python -m venv venv
  3. 오른쪽 아래 3.8.6 누르기
  4. venv 로 잡기
  5. 터미널 끄고, 다시 켜기
3. 폴더 생성
  1. templates 안에 index.html 생성
4. 프레임 워크 설치
  1. pip install flask pymongo dnspython requests bs4
    1. flask : 서버
    2. pymongo, dnspython : 데이터베이스
    3. request, bs4 : 웹스크롤링
flask 시작 코드 주의 : 기본 파일이름은 기본적으로 app.py from flask import Flask
app = Flask(name)
변경하는 곳
@app.route('/')
def home():
return 'This is Home!' if **name == '** **main** ':
app.run('0.0.0.0',port=5000,debug=True)
index.html 렌더링 코드 from flask import Flask, render_template
app = Flask(name) @app.route('/mypage')
def mypage():
return render_template('index.html') if name == 'main':
app.run('0.0.0.0',port=5000,debug=True)