내일배움단 프로젝트 챌린지 최종 점검

해시태그 : #내일배움단 #코딩프로젝트 #국비지원 #내일배움카드 #스파르타코딩클럽

내용 목차

#팀장의 한마디

주간 팀워크 tmi 를 자유롭게 작성해 주세요!

아니 벌써 마지막 날이라뇨..?

중간 점검 때는 아직 반이나 남았네~ 했더니

역시 1주차는 서로 친해지고, 기획하느라 시간을 써서

상대적으로 2주차가 바쁘게 느껴지나봐요 😂

내일이면 드디어 고대하던 발표회인데, 아직 마무리가 되지 않은 부분들이 있어

직장인들로 구성된 저희 4조는 오늘도 밤샘작업이랍니다 😢 (매일 밤샘했는...데....)

그래도 구현하려 했던 주기능과 부기능을 90%까지는 구현한 상태라 아주 행복합니다!

---

# 프로젝트 진행 현황

현재까지 진행된 프로젝트 진행 현황을 자유롭지만 최대한 구체적으로 작성해 주세요!

😺유기묘 소개 사이트 [데려갈꼬냥?]

• 지역별 유기묘 찾아보기, 나의 고양이 취향 찾아보기 테스트
• https://bit.ly/데려갈꼬냥

데려갈꼬냥? | 지역별 유기묘 찾아보기

<목차>

1. 고양이 테스트 기능 구현
2. 시도별 유기묘 모아보기
3. 분류된 고양이 클릭 시 고양이 정보 모달창 기능
4. 로그인, 로그아웃 구현
5. 사이트, 만든 사람들 소개 페이지 제작

 

1. 고양이 테스트 기능 구현

• 5가지의 문항으로 자신과 맞는 고양이 알아보기 기능 (like mbti test)
• 자바스크립트 이용, 문항별 점수 합연산으로 점수에 따라 결과 페이지로 이동할 수 있도록 구현
• 자바스크립트 이용 버튼을 넣어 페이지 이동 없이 문항을 선택할 수 있도록 함.
• 자바스크립트 이용, 문항을 선택하지 않으면 문항이 선택되지 않았다는 alert이 나오도록 함.
• 결과 페이지에서 버튼을 클릭 시, 데려갈꼬냥? 메인페이지로 이동 가능 → 테스트 공유로 페이지 유입, 홍보 효과 up

 

2. 시도별 유기묘 모아보기

• 광역시, 도별 유기묘 고양이 정보 모아보기 가능.
• 각 지역별 버튼을 클릭시 페이지로 이동
• ajax를 사용해 시도별 고양이 정보 호출, 데이터를 동적으로 호출할 수 있도록 제작.

 

3. 분류된 고양이 클릭 시 고양이 정보 모달창 기능

• 시도별 고양이 페이지에서, 각 고양이 카드를 클릭할 시 해당 고양이에 맞는 모달창 뜸.
• 고양이 카드가 가진 고유 id를 ajax로 전송, 해당 데이터를 받아와 모달창에 뜰 수 있도록 구현

 

4. 로그인, 로그아웃 기능 구현

• 누구나 쉽게 만들고 따라할 수 있도록 간단한 세션 방식으로 만들었음
• 로그인 상태시 네비바에서 로그아웃버튼으로 바뀌고, 로그아웃 상태시 로그인 버튼으로 바뀌도록 만듦
• 파이어베이스와 연동하여 회원가입할 시 회원정보가 데이터베이스로 이동함.
• 이미 있는 정보일 시 회원가입 불가능

 

5. 사이트, 만든 사람들 소개 페이지 제작

• 사이트에 대한 설명
• 만든 사람들 소개, 이름 클릭하면 각 개인의 개발일지 블로그가 새 창으로 뜸.

 

 

<요약>

1. 시도별 유기묘 모아보기 (입양 가능한 유기묘 현황) - 공공데이터 포털 내 동물보호관리시스템 OpenAPI 활용

2. 시도별로 분류된 유기묘 이미지 클릭 시 유기묘 정보 모달창 기능 (api 연동)

3. 로그인, 로그아웃 구현 - 세션 상태에 따라 네비게이션 바 텍스트 변경, 파이어베이스 DB 활용하여 데이터 관리

4. 사이트, 만든 사람들 소개 페이지 (about us) 제작 - 각 이름을 클릭하면 새 창으로 개인 개발일지 url로 이동

5. 나와 맞는 고양이(고양이 테스트) 기능 구현 - 정규식 활용, 각 문항 당 매겨진 점수를 합산하여 결과를 도출, 그에 맞는 고양이 이미지 출력

6. 파비콘 제작, 로고 이미지 제작, 대문 움직이는 배경

---

index

about

regions1

regions2

cat_list

modal

join

login

cat_test

cat_test1

result

 

# 지난 주 회고와 마지막 마무리 한마디

중간 점검 개발일지 작성 이후 업무진행에 있어서 좋았던 점, 아쉬웠던 점 등을 자유롭게 공유해 주세요!

우리가 어디쯤 왔는지, 앞으로 어떤 작업이 남았고,

구체적으로 언제까지 어떤 작업을 완수해야 하는지!

중간 점검은 여러모로 필수적인 분기점이었어요.

또한 우리 사이가 얼마나 가까워졌는지도 확인하는 귀중한 시간이었죠 😌

 

그 이전엔 매번 약속시간을 정하고, 회의 후 개인작업을 하고, 튜터님을 모셨었지만

중간점검 이후로는 서로의 신뢰도 단단해지고 개인마다 사정이 종종 생기면서

자유롭게 언제든 게더로 모이는 형식으로 되었답니다!

그렇다고 그 누구도 단 한 분도 게으름 피우시거나

팀플의 가장 큰 위험성인 무임승차를 하시려는 분도 없었답니다!! (4조 최고!!!👍👏)

 

안되는 게 있을 땐 혼자 독방에서 수련을 하기도 하고

모두 머리를 맞대고 함께 고민하여 해결하는 기쁨을 누리기도 했어요

튜터님께서도 많이 도와주셔서 (정말 감사합니다!!)

단 보름만에 코딩 실력도 많이 자랐답니다 😉

 

단순히 11일, 혹은 5주간 강의를 들으며 따라 쓰는 것에 그치지 않고

백지부터 시작해서 진정한 나만의 웹사이트를 만들어 낸다는 것은

굉장히 기쁘고 또 보람차고 뿌듯한 일이었어요 😊

 

또 너무 좋은 코딩 메이트들도 많이 만날 수 있었어요 😌

저는 정말 운 좋은 팀장이었어요.. 다들 천사에요 우리 조..😇🥺💖

모두들 다음엔 더 성장해서 만나요 또 같이 코딩해요! 😍❤