팀소개 페이지 작업 과정 - ggLand :

20230516 09:23 am - 

https://github.com/uiseongsang/ggLand

 

S.A 링크: https://velog.io/@uiseongsang/내일배움캠프-A-6조개새기조-개발자-새내기조

팀 프로젝트 주제 : 팀원 소개 페이지
서비스 이름	개새랜드 - 개발자 새내기 아일랜드 (GG Land)
서비스 소개	우리만의 이야기를 담을 수 있는 ”팀 소개 웹페이지”

역할분담

상의성	상세페이지	UPDATE	방명록 수정하기
조혜연	-	-	-
임채영	상세페이지	GET	방명록 불러오기
이수연	상세페이지	DELETE	방명록 삭제하기
이상인	상세페이지	POST	방명록 저장하기

 

작업 순서

1. 와이어프레임 작성

2. github clone 해오기

3. DB 구축

4. html 뼈대 완성

5. 기능 구현

6. 취합 및 디자인 수정

 

와이어 프레임

상의성 팀장님이 Draw

https://app.eraser.io/workspace/gather:EkzDbR5vfq93mGEbtable5?origin=share 

 

 

 

 

github clone

    git bash 에서 다음과 같이 실행

1. 디렉터리 생성 -- mkdir (디렉터리 이름)    -> 작업할 공간을 의미
2. 해당 디렉터리로 이동 -- cd (디렉터리 절대 경로)
3. git init
4. git clone (url)

4번의 url은 github에 다음과 같은 코드를 가져오면 된다.

 

위와 같은 순서로 하면 해당 디렉터리에 clone 가능함.

** 만약 unsafe repository 오류가 뜨면 해당 오류 밑에 코드를 복사해서 붙여넣으면 된다. 해당 코드는 아래와 같다.

git config --global --add safe.directory {YOUR_DERECTORY_HERE}

 

소스트리로 하는 방법은 인프런 강의를 참고하였습니다.

 

DataBase

• 방명록 table
  DataBase : dbsparta
  Table : cy_post , us_post , sy_post , si_post , hy_post
  • 'commentName' -- 방명록 작성자
  • 'commentContent' -- 방명록 내용
  • 'commentPassword' -- 비밀번호
  • 'commentDate' -- 작성일자
• 좋아요 table
  DataBase : dbsparta
  Table : island
  
  • 'islandId' -- 각 개인 이름 이니셜 두글자
  • 'islandLikeCnt' -- 좋아요 갯수

 

4. html 뼈대 완성

 

주요 색상 https://colorhunt.co/palette/f1f6f9394867212a3e9ba4b5
#F9F7F7	#DBE2EF	#3F72AF	#112D4E

나는 정말 디자인에 소질이 없는것 같다... html css 프론트는 아무리 해도 재밌지 않다...........

 

 

5. 더미데이터 mongoDB에 추가

{
"_id":{"$oid":"6466e57fe787aa1595576801"},
"commentName":"nobody",
"commentContent":"말이 너무 많아요~",
"commentPassword":"1234",
"commentDate":"05/18 10:01:52"
}

 

 

6. 기능 구현

 

[기능 명세]

1. 글쓰기 기능: 익명의 방문자는 방명록을 등록 할 수 있습니다.
2. 읽기 기능: 각 팀원의 페이지에 방명록을 볼 수 있습니다.
3. 수정 기능: 유저가 등록한 각 팀원의 페이지에 방명록을 수정 할 수 있습니다.
4. 삭제 기능: 유저가 등록한 각 팀원의 페이지에 방명록을 삭제 할 수 있습니다.

Options
1. 좋아요 기능
2. 이전 소개글 다음 소개글로 넘어가기
3. 비밀번호 확인 기능
4. 페이지네이션(슬라이딩 또는 더 불러오기 클릭
5. 작은 게임

 

 

 

계획 수립 및 이행

 

 

서비스가 달성하고자 하는 목표
팀명 & 사이트명 소개 및 의미 설명 + 사이트 간략 소개
각 팀원들의 아일랜드를 개성있게 표현하기

핵심 기능 소개 
main에서 각 개인 페이지로 넘어가서 방명록 작성(CRUD) & 좋아요 누르기
(+수정 삭제 시 비밀번호 확인, 비밀번호 오류시 수정,삭제 불가)

기술적으로 새롭게 배운 것에 대한 설명 
- 첫 미팅을 통해 각종의 코드컨벤션(HTML,CSS,JS,REST API) 수립


소감 
6조의 팀워크를 발휘할 수 있는 좋은 기회이고, 해당 프로젝트를 함으로써 협업의 중요성을 깨달았다.