멋쟁이사자처럼 FE 6기 바닐라프로젝트 ( JS ) - 52는 10이조

목차

1. 프로젝트 설명
2. 오이플레이스 설명
3. 구현 기능
4. 프로젝트 소감

프로젝트 설명

프로젝트 환경설정

git clone https://github.com/KIMGEUNDU/52Place.git

저장소를 클론해줍니다.

Node 설치

Node.js를 설치해줍니다.

npm i

Node.js를 설치해주고 터미널창에 명령어를 입력해줍니다.

npm start

명령어로 서버를 구동해줍니다.

프로젝트 컨벤션

💚 Commit Convention
💙 Coding Convention

프로젝트명

🥒 오이플레이스 🔗Github 보러가기

프로젝트 조원

💛 오이플레이스 조원 소개

• 조장 : 이예나
• 조원 : 김건주, 윤진, 정지영

역할 분담

• 김건주 : 메인영역, 리뷰별 맵 페이지, 지도 페이지, 리뷰추가 페이지,
• 이예나 : 로고 페이지, 로그인 폼, 회원가입 폼, 공통 헤더, 공통 네브
• 윤진 : 스크럼마스터, 리뷰 테마 추가하기 페이지, 테마에 들어갈 리뷰 선택하는 페이지, 선택된 리뷰가 보여지는 페이지
• 정지영 : themeEnroll 수정하기 페이지, 임시 저장 페이지 마크업 및 css 스타일링

프로젝트 목표

1. 필수 요구사항 구현하기
2. 요구사항 외 다른 기능 JS 로 구현하기
3. 하나라도 잘하자🔥
4. Github 병합 충돌 해결하기
5. 아프지말기

프로젝트 코딩컨벤션 및 커밋컨벤션

📢 코딩컨벤션
📢 커밋컨벤션

사용기술 및 라이브러리

HTML TailwindCSS Javascript Swiper 카카오맵API

오이플레이스 설명

오이플레이스 특징

🥒 조이름 '52는 10이조'를 살려 오이플레이스 로 지었습니다.
🥒 오이플레이스의 대표키워드는 '오이오이 핫플은 여기라구' 입니다.
🥒 오이플레이스의 마스코트는 머리에 오이를 올리고있는 해달 '오이달' 입니다.

구현 기능

• 김건주 :

1. 현재 시간 랜더링 구현
2. data에 있는 리스트 나열해서 랜더링 구현
3. localStorage에 클릭한 회수 저장해서 조회수 구현
4. 카카오API 사용해서 data에 있는 좌표로 핀 꽂기
5. 작성가능한 리뷰 data에서 가져오기
6. 사진 업로드시 data에 저장되기
7. 이런점이좋아요부분 swiper 사용하기
8. 버튼 클릭 시 이미지와 대체텍스트 변경
9. 랜더링 된 리스트 개수 카운트 구현
10. 글자수 세기 구현
11. 등록버튼 클릭시 글자수 검사하고 data 추가하고 링크 이동
12. 중복된 리스트 검사 후 리스트 삭제 구현
13. 북마크, 하트 클릭 시 이미지 토글 구현

• 윤진 :

1. 테마 만들기 화면에서 커버 이미지 변경
2. 글자 수 세기 기능 구현
3. 데이터 저장 기능 구현
4. 저장된 리뷰 데이터 리스트로 나열하기 기능 구현
5. 리스트에서 리뷰를 하나 누르면 해당 리뷰가 리뷰 테마 수정 페이지에 전송되어 랜더링
6. 데이터가 중복되면 전송되지 않는 기능 구현
7. 리뷰가 추가되면 숫자 카운트 기능 구현

• 이예나 :

1. 로그인 유효성 검사 (아이디, 비밀번호 조건 설정)
2. 로그인 아이디, 비밀번호 조건 만족 시 제출 버튼 활성화
3. 회원 정보 data.json 저장
4. 회원 가입 구현 ( 아이디, 이메일, 비밀번호 등 모든 항목을 받았을 경우 로그인 버튼 활성화)
5. 회원가입 시 유니크 아이디 생성
6. 유니크 아이디 로컬 스토리지에 저장
7. json 활용한 로그아웃 구현

• 정지영 :

1. themeEnroll 페이지 마크업 및 css 스타일링 완료,
2. 리뷰 리스트 data.json 파일 적용 및 랜더링
3. heart 클릭 이벤트 구현
4. menu navigation bg-color 변경하는 animation 구현
5. 전체삭제 버튼 클릭시 리스트 삭제
6. 지도 API 적용 및 마커 이미지 커스텀

프로젝트 소감

• 김건주 : 프로젝트 시작전에는 JavaScript를 잘 못해서 걱정으로 시작하였습니다. 그런데 많이 해보지 않았던 Tailwind로 스타일링을 해보고 JavaScript로 기능을 만들어나가니까 욕심이 생겨서 많은 것들을 시도해보았습니다. 그런 시도를 해보면서 '왜 안될까'라며 좌절감도 느꼈지만 해내보자라는 생각으로 끝까지 붙잡고 시도해서 성공을 하였습니다. 그러면서 성취감도 들고 JavaScript를 왜 배워야하는가도 느꼈습니다. 좌절감과 성취감이 반복적으로 들며 멘탈이 많이 안좋아졌지만 그래도 병합을 하고 팀원들이 했던 페이지가 제대로 나오는걸 보며 프로젝트 기간동안 했던 것들이 헛된 것이 아니라고 생각했고 뿌듯함을 느꼈습니다. 그리고 Git 병합 충돌을 느끼며 Git 의 무서움도 느꼈고 저번 HTML 프로젝트에서는 해보지 못했던 충돌을 하나씩 잡아보기도했습니다. 이번 프로젝트에서 제가 구현해낸 것들이 100% 만족스럽지는 못하지만 이런식으로 하는 거구나를 정말 많이 느꼈습니다. 그리고 제 결과물에 만족하지 못하고있을때마다 팀원분들이 응원을 해주서 정말 감사했습니다. 4일이라는 짧은 프로젝트 기간동안 다들 잠도 못주무시고 같이 열심히 해주셔서 너무 좋았습니다. 다른 프로젝트에서도 이번 팀원분들 또 다시 만나고싶을 정도로 팀원을 잘 만났다고 생각했습니다. 다들 정말 수고많으셨습니다!

• 윤진 : 프로젝트 처음 시작할때는 자바 스크립트로 기능을 하나도 넣지 못할까봐 많은 걱정이 있었습니다. 그런데 제가 서버와 통신해서 데이터를 받아오는 걸 해봤다는 게 감개무량하네요. 시간이 부족했어서 고칠 부분도 많고, 넣지 못한 기능들도 많지만 그래도 일단은!! 자바스크립트로 코드를 짜봤다는 것에 만족합니다. 게다가 처음으로 스크럽마스터를 해봤는데 정말 만만치 않은 일임을 깨달았어요.. 부족한 저를 잘 이끌어주신 조원분들께 감사의 인사를 드립니다. 힘들었지만 팀원분들과 함께하니 재미도 있었고, 그만큼 성취감도 있는 프로젝트였습니다!!

• 이예나 : 자바스크립트 수업을 완전히 흡수하지도 못했는데 프로젝트를 해야한다는 점이 무척 걱정되었고 이 프로젝트를 내가 민폐끼치지 않고 할 수 있을까... 이런 저런 수많은 고민이 있었는데 미흡할지라도 제 역할을 할 수 있어서 프로젝트 하는 내내 행복했고 자신감이 없을 때마다 팀원분들이 응원해주셔서 감사했습니다. 모두 잠을 안 자서 걱정이 될 정도로 열심히 해주셔서 감사하고 멋있었습니다! 프로젝트를 통해 자바스크립트에 대해서도 마음가짐에 대해서도 배운 점이 많은 것 같습니다! 모두 너무너무 수고하셨습니다!!!

• 정지영 : 처음 바닐라 자바스크립트 프로젝트를 진행하려니 걱정이 많았습니다.항상 수업시간에 코드를 짜보라고 시간을 주시면 구현하지 못해서 프로젝트는 잘 끝낼 수 있을까 의문이 떠나질 않았는데, 막상 시작하고 팀원들과 다양한 에러와 부딪히고 해결하면서 성장한 것 같습니다.실제 웹 서비스와 비슷해진 구현 화면을 보니 뿌듯하고, 지도 API와 애니메이션 구현 등새로운 기능을 완성 해볼 수 있어서 프로젝트에 투자한 시간들이 의미있었습니다.