4조 미니 프로젝트 - 팀 소개 웹 페이지

팀 소개

1. 팀 정보
   • 팀이름 : 불4조
   • 팀장 : 김명섭
   • 팀원 : 시병택, 김진현, 천민규
   • 팀의 특징 : 각 지역 최강의 알파메일
   • 궁극적 목표 : 주니어 개발자를 위한 산뜻한 출발, 감탄할만한 결과물 만들기
   • 팀에 대한 설명 : 90년대 전반에 걸친 MZ세대, 다들 술을 잘 마신다, 축구를 좋아한다
   • 팀에 약속 :
     • 잠수 금지
     • 코드 리뷰 준비하기
     • 코드 주석 잘 달기
     • 상호 존중하기
   • 팀 계획
     • 오후 3시 00분 : 출석체크 후 하루 계획 회의
     • 개발 기한 : 10월 6일
     • 추석 연휴 계획 : 10월 3일 13시
2. 팀원 별 자기 소개
   • 시병택

     • 이름 : 시병택

     • 거주지 :경남 진주

     • MBTI : ISTP

     • 직무 턴 계기 : 코로나 간 7급 공무원시험을 준비 했으나
       지루하고 재미없는 길이라는 생각과 더불어
       생산적인 일이 뭐가 있을까라는 생각에 할 수 있는 길을 알아 보다
       개발자라는 직군을 알게 되어 도전하게 되었다

     • 취업 목표 :

       1차 부트 캠프시 JS를 기반으로 react를 학습 + JS를 기반으로 백엔드 학습
       2차 배운 지식 기반으로 포폴 쌓기
       3차 수도권으로 취업하는 것

     • 첫 월급 받으면 하고 싶은 것 : 부모님 용돈 드리기

     • 객관적으로 살펴본 자신의 장점 : 먼저 해보고 나서 플랜을 짜고 상황에 따라 유동적 변경.

     • 자신의 스타일 협업 스타일 소개 : 주로 경청 하나 필요시 의견 제시

     • 블로그 주소 : https://utd20230926.tistory.com/

     • 깃 허브 주소 : https://github.com/byeongtaek2023

   • 김진현
     • 이름 : 김진현
     • 거주지 : 서울 서대문구
     • MBTI : ESTP 입니다.
     • 직무 턴 계기 : 제가 작성한 코드를 통해 사람들이 서비스를 이용할 수 있다는 것에 매력을 느껴 개발 직무에 도전하게되었습니다.
     • 취업 목표 : React를 사용하는 곳이면 어디든 입사해 주니어 개발자로서의 커리어를 시작하고싶습니다.
     • 첫 월급 받으면 하고 싶은 것 : 버티컬 마우스 구매
     • 객관적으로 살펴본 자신의 장점 : 도전하는 것을 좋아합니다.
     • 자신의 스타일 협업 스타일 소개 : 소통을 많이 하는 것을 좋아합니다.
     • 블로그 주소 : https://blog.naver.com/growingdeveloper
     • 깃 허브 주소 : https://github.com/jinhyeon0810
   • 천민규
     • 이름 : 천민규
     • 거주지 : 경기 군포시
     • MBTI : ISFJ
     • 직무 턴 계기 : 기존에 유튜브를 하고 있었는데 수익이 잘 나지 않아 직장생활을 하며 생계유지를 하고 싶었고, 아무나 할 수 있는 그런 직업이 아닌 무언가를 배워서 전문적인 직업을 가지고 싶었다 국비 전액지원교육만 찾아보던 중 인테리어 디자이너 과정을 선택하였으나 주변 실무 종사자들의 조언을 듣고 저 정도의 마인드로는 버티지 못할 것 같아 포기하고 주변 웹개발자 혹은 공부하는 친구가 잇어 조언을 구했을때 아예모르고 처음이고 적은 개월수에 오래 공부해야하는데 백엔드는 조금 더 심층적으로 공부해야하는 영역이고 더 지치기 쉬울거같다고 프론트엔드 과정을 추천하여서 이 과정을 택하게 되었다
     • 취업 목표 : 수료 후 취업시장에 대해 정확한 파악은 하지 못하였으나 어디든 일할 수 있는 실력을 갖춤과 동시에 3월 안에는 직장을 다니고 싶다
     • 첫 월급 받으면 하고 싶은 것 : 우리집 티비를 사주고 싶다 몇년간 유튜브 한다고 제대로 된 직장생활없이 집에 빌붙어있었는데 최근 티비 부팅이 잘안되고 있다 그래서 죄송스러운 마음과 크게 쓴소리 없이 기다려주신 고마운 마음을 티비로 먼저 표현하고 싶다
     • 객관적으로 살펴본 자신의 장점 : 독단적이지 않고 최대한 소통 및 이야기를 잘 들어주는 편이다
     • 자신의 스타일 협업 스타일 소개 : 공통의 목표가 있다면 최대한 다같이 으쌰으쌰해서 최선의 결과를 내기 위해 노력하는 편입니다
     • 블로그 주소 : https://velog.io/@gyu4016
     • 깃 허브 주소 : https://github.com/gyugod93
   • 김명섭
     • 이름 : 김명섭
     • 거주지 : 경기도 화성시
     • MBTI : INTP-T (내성적/직관적/사고적/즉흥적)
     • 직무 턴 계기 : 올해 6월 말 전역을 하였으며, 전공을 살려서 개발자 취업을 목표로 가지게 되었습니다. 그 중에서도 가장 접근성이 좋은 웹 프론트엔드 개발 공부를 시작하였습니다.
     • 취업 목표 : 당장은 아니지만 경력을 쌓고 최종 목표는 메이저 기업에 취업하고 싶으며, 현실적인 목표는 스타트업 기업, SI 기업 FE 개발자 입니다.
     • 첫 월급 받으면 하고 싶은 것 : 헬스장 등록
     • 객관적으로 살펴본 자신의 장점 : 끈기입니다. 아무리 힘들어도 목표를 이루고 얻는 성취감이 중요하다고 생각하기 때문에 중간에 포기하지 않습니다.
     • 자신의 스타일 협업 스타일 소개 : 협업을 통해 내가 알고 있는 지식을 공유하고 다른 팀원의 지식을 배우는 과정이 중요하다고 생각합니다.
     • 블로그 주소 : https://audtjqxx.tistory.com/
     • 깃 허브 주소 : https://github.com/kms99

팀 프로젝트 소개

• 데모사이트 및 시연 영상 링크
  • 데모사이트 : introduce-team.vercel.app
  • 시연 영상 : https://youtu.be/iDYu2VrCZTU

1. 사용하는 기술

   • Figma (와이어프레임 제작)
   • HTML & CSS
   • JavaScript
   • Jquery
   • BootStrap (CDN)
   • Firebase (Firestore, Storage)

2. 팀원 별 맡은 역할

   • 시병택 : main페이지 posting-box 구현 및 firebase 연동
   • 김진현 : main페이지 헤더 구현 (미세먼지 API, 구글로그인), detail 페이지 firebase 연동, github repository Readme 작성
   • 천민규 : main페이지 팀소개 부분 및 다크모드 구현, 시연 영상 제작, 사진 편집
   • 김명섭 : figma 와이어 프레임 제작, main페이지 멤버카드 구현 (뒤집기 이벤트), detail 페이지 firebase 연동

3. 페이지 구성

   • 와이어 프레임

     

   • API 명세

     

   • 시스템 아키텍쳐

     

4. 주요 기능

   • GoogleAuth을 이용한 구글 소셜 로그인, 유지기능
   • 다크모드 기능
   • 멤버카드 작성 및 생성
   • 방명록 CRUD 기능
   • 반응형 디자인

5. 발생한 문제와 해결

   • 미세먼지 API 호출 (웹 종합 강의 A-Z에서 사용한 API)
     • 발생 문제 : 로컬에서 테스트 시 정상적으로 호출되던 미세먼지 API가 배포 시 호출이 안되는 문제 발생
     • 문제 원인 : vercel로 배포한 사이트의 url은 https로 보안이 강화된 프로토콜이 적용되었으며, 호출하려는 api의 url은 secure가 적용되지 않은 http 프로토콜을 사용하였기에 호환성 문제 발생
     • 해결을 위한 노력 : https와 http 동기화를 위한 메타 태그를 header에 추가 <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" /> 해당 태그는 http를 https로 자동으로 변경하여 요청을 할 때 사용. 사용하는 API가 https를 지원하지 않기 때문에 해당 방법 사용 불가.
       
   • Git 충돌
     • 발생 문제 : Git hub에 commit&push 된 내용을 pull 하는 과정에서 충돌 발생
     • 문제 원인 : 하나의 페이지를 하나의 브랜치에서 여러 단위로 나누어 개발하였기 때문에 코드 충돌이 자주 발생하였고, git에 대한 숙련도 부족으로 대처가 미숙하였다.
     • 해결을 위한 노력 :
       • 다수의 인원이 비슷한 부분을 commit&push 할 때 최대한 코드를 합쳐서 한번에 commit.
       • 수시로 push와 pull 진행

6. 프로젝트 회고

   • 김명섭 : 혼자 프로젝트 할 때 보다 좋은 팀원분들과 함께 프로젝트를 진행하여 더욱 책임감 있게 진행할 수 있었습니다. 그리고 이번 프로젝트를 진행하기 위해 figma, css를 좀 더 공부해보는 좋은 계기가 된 것 같습니다.
   • 김진현 : 구글로그인 기능을 구현하였지만, 로그인 유저들만 가질 수 있는 기능들을 따로 설정하지 않았던 점이 조금 아쉬웠습니다. 앞으로도 불4조 화이팅입니다!!
   • 천민규 : 첫 프로젝트라 말만 많고 의욕만 앞선거에 비해 할줄 아는게 많이 없어서 팀원들에게 죄송했고, 개인적으로 많이 부족하다는걸 깨달아서 한편으로는 자극받고 좋았습니다.
   • 시병택 : 비전공자 + 제로베이스라 시작부터 막막했는데 좋은 팀원 분들을 만나서 어려움 없이 즐겁게 프로젝트를 끝낼 수 있었습니다.

“5개월 동안 지치지 않고 누구보다 열심히 하는 불4조가 되겠습니다.”

감사합니다