# 프로젝트 소개
- 개발 기간, 프로젝트 명&소개&목표
# 프로젝트 팀 "E115"소개
- 팀원소개
# 시작가이드
- Installation
# 와이어프레임
-
프로젝트 화면 구성 및 기능
-
필수 사항(Creat, Read 포함)
-
선택 사항(Update, Delete 포함)
=> 선택사항 기능까지 완성하면서 필수 기능 CRUD완성!
-
화면구성
-
기능담당
-
기능소개
-
# 트러블슈팅
😺우리 팀을 소개해요😺 클릭하면 이동해요!
팀원 소개
| 남해리 | 곽인해 | 서지원 | 강지수 | 김지민 |
|---|---|---|---|---|
| Enfp, Infp | isfp, infp | isfp | isfp | istj |
| @r03181231 | @innes-k | @seopport | @jigico | @gggimmmin |
| E1I5 팀장 | E1I5 팀원 | E1I5 팀원 | E1I5 팀원 | E1I5 팀원 |
| FrontEnd | FrontEnd | FrontEnd | FrontEnd | FrontEnd |
팀 목표
- 포기하지 말자 !
- 피할 수 없으면 돌아가자 !
- 끝까지 완성하자 !
프로젝트 명 : 우리 팀을 소개해요.
개발 기간 : 2023.12.21 ~ 2023.12.27 (7일)
프로젝트 소개 : 팀원을 소개하는 웹사이트입니다.
프로젝트 목표 : 프로젝트를 함께 만드는 팀원에 대해 소개합니다.
- environment : Visual Studio Code, git, github
- development : HTML5, CSS3, Javascript, jQuery3.3.1, bootstrap5.0.2
- DB : Firebase10.7.1
- communication : figma, slack, notion, zep, google docs
- class 사용시 대쉬( - ) 사용 (언더바( _ ) X)
- commit message
- 구현한 상태를 상세하게 기록해보기 (ex.어떤 기능을 어떻게 했다)
$ git clone https://github.com/team1-mini-project/introduceTeam1-project.git
$ cd introduceTeam1-project
-
메인 틀, 헤더 - 각 메뉴 클릭 시 매끄럽게 이동할 수 있는 메뉴바입니다.
-
팀 E1I5 소개 - 어떤 팀이고 어떤 목표를 가졌는 지 그리고 팀 행동지침은 무엇인지 소개합니다.
-
팀원 프로필 카드 - 팀원들의 이름과 소개를 보여줍니다.
-
팀원 상세 설명 모달 - 팀원들의 장점, 협업 스타일, TMI를 보여줍니다.
-
방명록 조회&쓰기 - 방문자들의 응원과 관심을 적고 볼 수 있는 방명록입니다.
-
방명록 삭제 - 사용자가 남긴 글을 삭제합니다. (구현)
-
방명록 수정 - 사용자가 남긴 글을 수정하게 하게 해줍니다. (구현)
-
프로필 카드 이미지 업로드 (미구현)
(선택사항이었지만 삭제, 수정 기능까지 완성해서 CRUD필수 기능을 완성)
| 메인 틀 | 헤더 |
|---|---|
| 팀 소개 카드 | 팀원 프로필 카드 |
 |
커서를 올렸을 때(hover) 안 쓰는 블로그의 버튼 클릭 시(사용하는 블로그 링크는 페이지 이동으로 이어짐) |
| 모달 - 팀원 상세설명 | 방명록 조회 & 쓰기 |
| 방명록 입력칸 닉네임 미입력 시 닉네임을 입력했으나 비밀번호를 입력하지 않았을 때 남기기 버튼 누르면 alert 표시, 방명록 저장됨 |
|
| 방명록 조회 | |
| 작성한 내용이 입력칸 아래 추가된 모습을 볼 수 있고 방명록 작성 시간을 보여준다. |
| 방명록 삭제 | 방명록 수정 |
|---|---|
| 기능 | 담당자 |
|---|---|
| 메인 큰 틀, 헤더 메뉴, 방명록 수정 | 강지수 |
| 팀 소개란, 방명록 삭제 | 김지민 |
| 팀원 프로필 카드, 헤더 상단 고정 | 곽인해 |
| 모달창 | 남해리 |
| 방명록 쓰기, 조회 | 서지원 |
-
헤더
-
상단 고정, 아래 요소와 겹치지 않음
-
메뉴 누르면 해당 영역으로 부드럽게 스크롤 이동
-
-
프로필카드
-
커서 올리면 색, 그림자 변하는 기능(hover)
-
본인이 사용하는 블로그가 아닌 블로그의 버튼을 클릭하면 alert 팝업창 실행
-
본인이 사용하는 블로그 버튼을 클릭하면 새창에서 해당 url 연결
-
-
모달창
- 더보기 클릭 -> 팀원의 상세 설명을 보여주는 모달창 실행
- 반응형 ㅡ min-width, max-width로 웹 크기에 따라 모달 크기가 늘어났다 줄어듦
- 스크롤기능 ㅡ overflow로 스크롤 속성을 줘서 일부 내용 외에 다른 내용도 볼 수 있게 함
- 창 닫는 방법 두가지 ㅡ 닫기 버튼과 모달 배경에 클릭 시 style.display = "none"으로 변경하도록 해서 화면을 닫을 수 있도록 함
-
방명록
-
방명록 쓰기
- 일반 작성 : 닉네임과 비밀번호를 입력하고 방명록을 작성한 뒤 남기기를 누르면 아래에 추가됨.
- 유효성 검사 : 닉네임과 비밀번호 입력 유효성을 체크해서 입력하지 않은 값을 확인하도록 alert창을 띄움 → 닉네임과 비밀번호 두 값 모두 입력해야 저장 가능
-
방명록 조회
- 일반 조회 : 파이어스토어에 저장된 방명록을 불러와서 추가하여 자기가 작성한 방명록을 볼 수 있음
- 입력 시간 등록, 최신순 정렬 : 입력 당시 날짜와 시간을 저장해서 남긴 방명록에 작성 시간을 표시하고 최신순으로 정렬함
-
방명록 수정
-
수정 버튼 : 수정 버튼을 눌렀을 때, 입력칸이 활성화되면서 수정 완료 버튼 및 취소 버튼이 활성화됩니다.
-
수정 완료 버튼
-
수정 전과 후의 내용이 변동되지 않고 같을 경우 : "변경 사항이 없습니다. 수정 후 완료를 눌러주세요."라는 alert 이 뜨면서 입력칸으로 커서가 이동합니다.
-
비밀번호를 입력하지 않은 경우 : "비밀번호를 입력해 주세요" 라는 alert 이 뜨면서 비밀번호 입력칸으로 커서가 이동합니다.
-
입력한 비밀번호가 틀렸을 경우 : "비밀번호가 다릅니다. 비밀번호 확인 후 다시 입력해주세요." 라는 alert 이 뜨면서 비밀번호 입력칸으로 커서가 이동합니다.
-
-
수정 취소 버튼 : 작성했던 내용에서 수정 전 내용으로 변경됩니다. 또한, 비밀번호를 입력했을 경우 비밀번호 입력칸도 빈칸으로 변경됩니다.
-
-
방명록 삭제
-
비밀번호 공백 확인 alert : 삭제 버튼을 눌렀을 때, 비밀번호 입력 유무를 체크해 비밀번호가 비어 있다면 “비밀번호를 입력해주세요” alert 창이 뜬다.
-
비밀번호 유효성 검사 alert : 비밀번호를 입력하고 삭제 버튼을 눌렀을 때, 비밀번호 검증을 통해 만약 일치한다면 댓글 삭제 후 페이지 새로 고침을, 일치하지 않는다면 “비밀번호가 다릅니다.” alert 창이 뜬다.
-
-
-
프로젝트에 쓰인 내용 :
-
우리 팀만의 특징과 추구하는 궁극적인 목표
-
우리 팀의 약속
-
[팀]과 [자신]에 대한 설명
-
-
- 팀원들의 블로그 주소
- 객관적으로 살펴본 자신의 장점
- 자신의 스타일 협업 스타일 소개
- TMI
- 좋아하는 동물, 취미, 음악 등등
- 강지수님
문제1 - [setAttribute로 ui 상에서 업데이트 되지 않는 textarea readonly] *setAttribute() : 속성이 이미 있을 경우 값이 업데이트 된다. 없다면 새 속성이 추가된다.
| 문제 | setAttribute('readonly', false) 로 textarea readonly 속성을 false로 변경하여 작성할 수 있게 활성화하려 했으나 변화가 없었다. 개발자 도구로 확인해보니 속성은 false로 변경되어 있었고 ui 상에서는 그대로 비활성화 상태였다. |
|---|---|
| 시도 | setAttribute('readonly', false); |
| 해결방안 | 1. removeAttribute('readonly') 로 해결. 2. parent.querySelector('.comments-area').readOnly = false; readonly 속성으로 제어하여 해결. |
| 선택한 방법 |
해결 방안은 2가지가 있다. |
문제2
| 문제 | 수정버튼을 눌렀을 때, 바로 input창이 뜨게 해서 수정하는 방법과 방명록 등록(쓰기) input에서 input창에 수정할 내용을 DB에서 받아와 수정하고 확인 버튼을 눌러서 다시 저장하는 것 중에 어느 위치에서 구현을 해야 수정기능을 사용했을 때 더 편리한 가입니다. |
|---|---|
| 시도 | textarea의 readonly로 방명록 조회의 조회창을 구성하여 수정버튼을 눌렀을 때 활성화 해보는 것을 알아봄. |
| 해결 방안 | -> 기준 : 개발자와 소비자 입장 고려 |
| 1. 개발자 입장인 경우, 개발자가 개발하기 편한 방법의 위치인 방명록 쓰기input에서 수정 기능 넣는 게 편함 2. 사용자 입장인 경우, 방명록 조회에서 바로 본인 글 위치에서 수정 버튼을 눌렀을 때 해당 글에서 input이 활성화되어 글을 수정하는 게 편함 3. 방명록 조회 input을 textarea로 만들어 textarea의 속성 중 하나인 readonly의 불리언 속성을 사용해서 쓰면 개발하기에도 좋고 사용자 입장도 고려할 수 있어서 좋음. *textarea - textarea는 불리언 속성은 해당 속성을 명시하지 않으면 속성값이 자동으로 false 값을 가지게 되며, 명시하면 자동으로 true 값을 가지게 됩니다. *참고 사이트 : https://www.tcpschool.com/html-tag-attrs/textarea-readonly |
|
| 선택한 방법 | 3번째 방안 |
| 선택한 이유 | 3번 방안이 개발하기에 괜찮고 사용자 입장도 고려할 수 있어서 선택 |
- 곽인해님
문제1
| 문제 | 다른 팀원분께서 본인 branch에는 push를 하셨는데 막상 내 컴퓨터에서 해당 branch로 checkout 하여 열면 코드 최신화가 안됨 |
|---|---|
| 시도 | - git remote update : 오류없이 실행은 됐지만 최신화는 안됨 - git pull : 오류 - git pull 브랜치이름 : conflict 발생 |
| 해결 | - 보고 싶은 코드의 branch로 checkout (git checkout 브랜치이름) -> 그 branch 안에서 pull 해오기 (git pull origin 브랜치이름) |
문제2 - <a태그 내 alert 실행시 자동 새로고침 이슈>
| 문제 | -a태그에 onclick으로 alert창을 띄웠는데, alert창을 닫으면 다시 원래 페이지가 새로고침돼서 페이지 맨 상단으로 돌아감 (새로고침을 없애고 싶음) |
|---|---|
| 원인 | a 태그 속 href 속성이 비어 있으면 자기페이지로 계속 이동시키기 때문에 onclick 함수를 탄 후 계속 새로 고침이 됨 |
| 해결방안 | - href 속성에 이렇게 명시를 해주면 새로고침되지 않고 클릭 이벤트만 발생됨 |
| 선택한 방법 | |
| 선택한 이유 | 모두 같은 기능을 하는데 해당 방법이 가장 코드 길이가 가장 짧아 효율적이라서 작성 |
- 서지원님
| 문제 | 사용자에게 값을 받아서 넣었을 때 파이어베이스에 순서대로 저장되지 않고 무작위로 저장됨. 그렇기 때문에 파이어베이스를 조회하여 페이지에 데이터를 추가하였을 때도 순서대로 기록되지 않음. |
|---|---|
| 시도 | new Date()로 작성시간을 같이 저장하고 그것을 기준으로 정렬해보기 |
| 해결방안 | 데이터를 넘길 때 작성 시간도 같이 저장하여 시간을 기준으로 orderBy 메소드를 사용함. 그러나 데이터가 오래된 순으로 정렬되어서 desc를 추가로 작성하여 댓글을 최신순으로 볼 수 있게 함 |
- 김지민님
문제 - <방명록 삭제 버튼 클릭시 삭제되지 않는 오류>
| 문제 | 알맞게 비밀번호를 입력하고, 방명록 삭제 버튼을 클릭했을 때 삭제가 안됨. 콘솔 창에 'deleteDoc is not defined' error 발생. |
|---|---|
| 시도 | 정의되지 않은 deleteDoc의 생성을 위해 Firebase 에서 새로운 컬렉션 항목 생성 : 여전히 'not defined' error 발생. |
| 해결 | 코드 내에서 Firebase SDK 라이브러리 가져오기 항목 중 import { } 안에 deleteDoc이 존재하지 않는 것을 발견. import { deleteDoc } 생성을 통해 삭제가 정상적으로 이루어지게 해결. |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent