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>

아이디 /비밀번호 찾기 페이지

회원의 아이디, 비밀번호 찾는 페이지