Overview
🌱 새싹인들을 위한 지식 공유 커뮤니티입니다.
- 목적 : 새싹 사람들과 아닌 사람들 또한 자유롭게 접근하여 개발과 관련된 궁금한 점들을 물어보고 답할 수 있는 소통 커뮤니티 형성
- 성과 : 정해진 기간 내에 성공적으로 원하는 기능들을 구현
제작 기간: September 6, 2023 ~ September 22, 2023
Functions
✅ 회원 가입 / 로그인
✅ 자유 게시판 CRUD
✅ Q&A 게시판 CRUD
✅ 게시 글 조회수 / 좋아요 / 댓글
✅ 마이 페이지
✅ 개인 프로필 수정
✅ 아이디 찾기 / 비밀번호 재 설정
✅ 비속어 필터
✅ 반응형 웹사이트
Tech
HTML, CSS, Javascript,
BootStrap, EJS,
Node.js, Express, Mysql, Sequelize,
aws, git/github, Figma
관련 기록들
1st-team-c
트러블 슈팅
GitHub - SesacProjectTeamC/SesacIn: 새싹 프로젝트 팀프로젝트 TeamC
웹사이트 모아보기
메인 페이지:
메인 페이지에서 보여지는 화면
Notes
- 메인 페이지에서는 각 게시판 별 최근 20개의 글이 카드 형식으로 보여지도록 구현
- 각 게시 글 별 조회수, 좋아요 수, 댓글 수를 확인할 수 있도록 함
- 각 캐러셀 클릭 시 연결된 링크로 이동
- 화면 크기 별 보여지는 카드의 수 조절 (반응형)
Features
- Swiper 라이브러리를 사용하여 가로 축 슬라이드 구현
- 카드 hover시 확대되는 애니메이션 구현
- 로그인 상태와 비 로그인 상태에 따라 헤더에 보여지는 정보가 달리 보여지도록 구현
<aside>
📌 SUMMARY: 한 눈에 자유 게시 글과 Q&A 게시 글 확인 가능
</aside>
로그인 페이지
회원이 로그인 하는 페이지
Recall
API 받아올 때 지원하는 내용 확인하기
Notes
- 회원 가입을 한 회원에 대해 로그인을 진행할 수 있도록 함
- 에러 발생 시 해당 에러 코드에 대한 모달창을 띄워 사용자에게 알림
- 회원 정보가 없을 경우
- 아이디가 일치하나 비밀번호가 틀린 경우
Features
- 반응형 적용
- DB 값 검증
- ID 찾기
- 비밀번호 재 설정
- 세션( Session ) 인증 방식으로 구현
<aside>
📌 SUMMARY: 로그인이 되지 않는 경우 사용자에게 문제를 알려 로그인을 성공적으로 할 수 있도록 함
</aside>
회원 가입 페이지
회원으로 가입할 수 있는 페이지
Notes
- 사용자가 회원 가입을 할 수 있는 창
- 필수 입력 값인 아이디, 비밀번호, 비밀번호 확인, 닉네임을 작성 해야만 가입 버튼이 활성화 되도록 함
Features
- 반응형 적용
- ID 및 닉네임 중복 체크
- 닉네임 비속어 필터
- 시퀄라이저 훅을 통해 사용자의 닉네임이 데이터베이스에 CREATE 되기 전 비속어 검사 처리 구현
- 유효성 검사
<aside>
📌 SUMMARY: 회원 가입 시 유효성 결과의 검사를 바로 띄워줌으로써 불필요한 작업 최소화
</aside>
아이디 /비밀번호 찾기 페이지
회원의 아이디, 비밀번호 찾는 페이지
Notes
- 사용자가 아이디를 잊었을 시 가입한 닉네임과 이메일을 통해 아이디를 찾을 수 있도록 함
- 비밀번호를 잊은 경우 아이디를 입력한 뒤, 해당 아이디의 이메일 인증 여부에 따라 비밀번호 재 설정 진행
- 이메일 미 인증 상태 - 이메일 인증을 진행한 뒤 비밀번호를 재 설정 할 수 있도록 함
- 이메일 인증 상태 - 이메일 인증이 이미 되어있기 때문에 바로 비밀번호를 재 설정 할 수 있도록 함
Features
- 반응형 적용
- 아이디 찾기 : 아이디에 대한 닉네임 및 이메일 DB 검증
- 비밀번호 재 설정 :
- 아이디에 대한 이메일 인증 여부 DB 검증
- nodemailer를 통한 이메일 인증 기능
- 비밀번호와 이메일 유효성 검사
<aside>
📌 SUMMARY: nodemailer 미들웨어 사용하여 이메일 인증을 통해 비밀번호 재 설정
</aside>
회원 정보 수정 페이지
개인 프로필 수정도 가능합니다.
Notes
- 회원 정보를 수정할 수 있는 페이지
- 세션에 저장되어있는 회원의 아이디를 자동으로 띄움
- 닉네임과 이메일은 변경을 원하지 않는 경우 건너뛸 수 있음 → 기존 데이터 유지
Features
- 반응형 적용
- 세션에서 로그인 된 사용자의 id 가져와 아이디 값 띄움
- 유효성 검사
- 비속어 필터