https://www.youtube.com/watch?v=5Nxqr1YlTI4
😁 자신의 감정을 쉽고 빠르게 기록하고 전에 주로 느꼈던 감정을 살펴 볼 수 있는 웹 사이트- 프로젝트 목표 : 웹 개발 종합 강의 내용 기반 감정 일기 사이트 구현 및 팀 프로젝트 경험
- 진행 기간 : 2023.06.07 ~ 2023.06.09
- 참여 인원 : 총 6명
- 사용 기술 : Python, Flask, MongoDB, HTML, CSS, JavaScript, Bootstrap,jinja2,JWT TOKEN
부족한 실력으로 팀장을 맡고 있으며 , 주특기는 리액트 지망입니다.
😀 감정 일기의 메인 페이지를 담당하게 된 항해 99 15기 SQL 12조 팀원 신성윤입니다.IT 세계가 동작하는 원리와 성장하는 환경에 관심이 많습니다.
이번 협업을 통해 팀워크 능력을 기르고 버전 관리 방법을 배우며
저의 부족한 부분을 발견하고 싶습니다. 주특기는 Node.js를 선택했습니다.
😀 안녕하세요! 저는 예비 개발자인 노지현입니다.현재는 항해99 15기를 수료 중이며, 비록 비전공자지만 코딩에 대한 열정과 탐구 정신으로
제 부족함을 극복하고 있습니다. 프로젝트를 하면서 코드의 검토를 철저히 하고,
항상 더 나은 방법을 탐구하고 있습니다. 팀원들과의 협력을 통해 상호간의 의사소통과
업무 분담을 원활히 진행하고, 지속적인 학습과 성장을 추구하여 사용자에게
가치 있는 솔루션을 제공하는 개발자로 성장하는 것이 제 목표입니다.
주특기는 스프링을 선택했습니다.
😀 안녕하세요! 풀스택 개발자를 꿈꾸는 15기 이예원입니다.비록 비전공자이지만 끊임없이 노력하고 열심히 공부하여 필요한 지식과 기술을 습득하고자 합니다.
함께 일하고 싶은 개발자로 성장하기 위해 노력하며, 팀원들과의 원활한 소통과 협업을 중요시합니다.
저의 열정과 결속력으로 비전공자 출신으로서의 가치를 발휘하고,
성공적인 프로젝트를 이끌어내는데 기여하고자 합니다.
주특기는 스프링을 선택했습니다.
😀 안녕하세요! 저는 15기 정소채라고 합니다.풀스택 개발기획자를 꿈꾸며 끊임없는 고민과 열정을 가지고 항상 전진하는 개발자입니다.
비록 비전공자이지만, 항상 새로운 도전에 열려있고 열심히 배움으로써
저의 성장을 이루어 나가고자 합니다. 프로젝트에 대한 강한 열정과 팀원들에 대한 믿음과 애정을 가지고 함께 협력하여 훌륭한 결과물을 만들어내는 것을 목표로 삼고 있습니다.
새로운 도전을 통해 함께 성장해 나갈 수 있는 기회를 기다리고 있습니다.
주특기는 Node.js 를 선택했습니다.
- 파트 소개 : 메인 페이지는 크게 3가지로 구성했습니다.
2.1 <차트 기능>
- 지난달, 이번 달 유저가 가장 많이 느꼈던 감정의 변화를 차트에 출력
- 유저가 일기를 쓰는 즉시 업데이트(실시간 반영)
2.2 <현황판 기능>
- 유저의 지난달 가장 높은 빈도수의 감정과 이번 달 가장 높은 빈도수의 감정을 출력.
2.3 <달력 기능>
- 유저가 자신의 일기 기록을 일별, 월별로 확인할 수 있음.
- 기록 클릭 시 해당 기록으로 페이지 이동.
<파트 별 소개>
- 이모티콘 버튼
- 감정일기의 핵심인 이모티콘 버튼 구현
- 매일 변하는 기분에 맞게 이모티콘 선택 가능
- 선택한 이모티콘에 따라 버튼 색상 동적 변경, 사용자에게 시각적 피드백 제공
- 한 줄 일기 작성 기능
- 이모티콘 버튼과 함께 최대 40자의 한 줄 일기 작성 가능
- 부가 기능으로 사용자가 원하는 폰트 스타일을 JS의 applyStyle 함수를 활용해 구현
- 저장 기능
- 이모티콘 버튼과 한 줄 일기 데이터 DB에 전송
- 작성 중인 내용을 취소하는 기능 추가
- 저장이 완료되면 "저장이 완료되었습니다!"라는 alert을 통해 사용자에게 저장 완료 알림
- 홈과 마이프로필 버튼
- 사용자 편의성을 위해 홈과 마이프로필로 연결하는 버튼 기능 추가
- 원하는 페이지로 쉽고 빠르게 이동 가능
<파트소개>
- 일기를 보여준다.
- 일기들을 날짜별 / 월별 로 구분하여 정렬하여 보여준다.
- 일기는 비공개로 된 것은 제외하고 가져온다.
- 일기들에는 댓글을 달 수 있다.
- 일기들을 클릭하면 onclick 메서드로 댓글들이 보인다.
- 댓글들의 컨테이너 가장 하단에는 댓글쓰기 버튼이 있다.
- 댓글쓰기 버튼을 클릭하면 해당 일기에 댓글을 작성할 수 있다.
- 일기에 리액션을 할 수있다.
- 각 일기 카드에는 리액션 할 수 있는 감정 이모지 버튼이 있다.
- 이모지 버튼은 우선 밝음 약간밝음 일반 약간나쁨 많이나쁨 다섯가지로 정한다.
- 각 버튼을 클릭하여 한유저당 한일기에 한번만 리액션 할 수있다.
- 같은 리액션을 두번 클릭하면 리액션이 취소된다.
- 이미 리액션 한 일기에 다른 리액션을 클릭하면 기존 리액션이 취소되고 다른 리액션이 적용된다.
- SSR기능을 통한 빠른 애플리케이션 진입
- 메인페이지로 선정될 경우 , 해당 페이지만 SSR을 통해 SEO최적화 및 빠른 사용자 경험을 제공하고,
- 나머지 페이지는 그대로 CSR로 렌더링 하여 적합한 방식의 최적화를함
<파트소개>
- 일기 작성페이지에 키워드 노출과 저장
- 데이터베이스에 저장된 키워드를 그룹으로 묶고 사용자가 선택한 키워드는 색상이 변경되도록 구현예정
- 게시글이 저장될때 함께 저장되도록 구현
- 회원가입 기능
- 사용자가 입력한 내용은 모두 NULL값이 아니어야 한다.
- 회원가입시 아이디는 중복이 불가하다
- 아이디 중복의 경우 알림창으로 "아이디 중복불가. 다시 입력하세요."를 띄운 후 회원가입 페이지로 돌아간다.
- 정상가입인 경우 알림창으로 "회원 가입이 완료되었습니다."를 띄운 후 홈페이지로 돌아간다.
- 로그인/ 로그아웃
- 로그인 기능
- 회원가입시 입력한 아이디, 패스워드와 로그인시 입력한 정보를 비교하여 정상인 경우 로그인 후 홈페이지로 돌아온다.
- 로그인이 잘못된 경우 알림창으로 "로그인 정보가 일치하지 않습니다"를 띄운 후 로그인 페이지로 돌아온다.
- 로그인시 session['id'] = user['id']을 사용하여 로그인 상태를 유지한다.
- 로그아웃 기능
- 로그아웃으르 선택한 경우 session의 id값을 None으로 변경한다.
<마이페이지>
- user의 정보를 데이터베이스에서 조회하여 이름, 닉네임, 아이디, 프로필사진을 가져와서 마이페이지에 동적으로 표시
- 사용자가 업로드한 프로필 사진을 서버에 저장하고, 해당 이미지를 로드하여 마이페이지에 표시
- 사용자가 업로드한 닉네임을 서버에 저장하고, 로드하여 마이페이지에 표시
- 마이페이지 하단에는 회원 탈퇴 기능을 구현하여 사용자가 클릭하면 데이터베이스에서 해당 회원 정보를 삭제하도록 설정
- 개요 : ~~~의 배경으로 만들었다. —
- 주요 기능 :
- 메인 페이지(’/’)
- 메인 기능 :
- 로그인 되었을때 / 안되었을때 페이지 구분
- 공개 / 비공개
- 보조 기능 :
- 유저의 일기 데이터 집계 후 화면에 배치
- 달력 기능
- 메인 기능 :
- 일기 페이지
- 메인 기능 :
- 일기 작성 시 감정 선택
- 일기 작성 시 키워드 선택
- 보조 기능 :
- 일기 작성(글자 수 제한)
- 일기 작성 시 유저가 키워드 직접 입력
- 메인 기능 :
- 다른 유저 일기 페이지
- 메인 기능 :
- 공개된 다른 유저 일기 보기
- 보조 기능 :
- 댓글 / 이모지로 리액션 기능
- 메인 기능 :
- 회원가입 및 로그인 페이지
- 메인 기능 :
- 회원가입 정보 저장
- 로그인 인증
- 보조 기능 :
- 유효성 검사
- 메인 기능 :
- 마이 페이지
- 메인 기능 :
- 이름
- 닉네임
- 프로필사진
- 회원탈퇴
- 메인 기능 :
- 메인 페이지(’/’)
- 화면 설계 : —
- DB 설계 : —
- 프로젝트 구조 :
- View :
- index.html
- join.html
- login.html
- layout.html
- mypage.html
- myview.html
- write.html
- Controller : —
- View :