📚 STACKS

목차

1. Intro
2. 기능
3. Wireframe
4. 구현
5. Test
   • Unit Test / Integration Test
6. AWS Architecture
7. Commit Convention

Intro

• 반응형 웹앱이며, break point는 아래와 같습니다.

  • 폰 ~767px
  • 태블릿 768px~1023px
  • 모니터 1024px~

• UI가 비슷한 페이지는 코드 재사용성을 높이고자 했습니다.

• 배포 Link: https:petple.store

  • 현재 AWS 비용 문제로 인해 배포를 중지하였습니다. 필요하시면 소프트웨어를 다운로드하신 후 확인해주시기 바랍니다.

  설치

  yarn install 또는 npm install
  

  실행

  yarn dev 또는 npm run dev
  

  테스트

  yarn test 또는 npm run test
  

기능

• 자유게시판 생성/수정/읽기 기능
  • 이미지 등록이 가능합니다. 여러 이미지를 등록한 경우 carousel을 통해 보여줍니다.
• 댓글 생성/수정/읽기/삭제 기능
• 회원가입 기능
• 로그인 기능
• 비밀번호 수정 기능
• 검색 기능
  • 검색 버튼없는 검색 기능입니다. debounce를 사용했습니다.
• Modal 기능

Wireframe

→ 개발을 시작하기 이전에 데스크탑에서 필요한 웹 페이지의 레이아웃과 구성 요소가 무엇인지 대략적으로 알아보기위해 작성하게 되었습니다. → 사용한 툴은 Figma(피그마) 입니다.

구현

Landing Page

• 모바일 환경에서 접근할 때는 햄버거 메뉴를 제공합니다. 데스크탑이나 테블릿과는 다르게 화면이 제한적이기에 UI를 단순화한 햄버거 메뉴는 공간을 절약하는 데 도움이 됩니다.

자유게시판 목록

• 페이지 이동시 현재 페이지 위치를 알 수 있도록 색깔을 입혀 보여줍니다. 현재 페이지를 구분하여 사용자의 이해를 돕는 효과를 얻고자 했습니다.
• 모바일 환경에서 접근할 때는 페이지 이동 버튼의 갯수가 줄어듭니다. 화면이 제한적이기에 공간을 절약하는 데 도움이 됩니다.

자유게시판 검색

• 검색어 입력후 보여지는 목록에서는 검색어에 색깔을 입혀 보여줍니다. 검색 결과를 시각적으로 구분하여 사용자의 이해를 돕는 효과를 얻고자 했습니다.

자유게시판 등록

• 사용자가 필수 입력 정보를 입력하지 않았다면, 다시 입력하라는 모달창을 제공합니다. 사용자가 누락된 필드를 인지하고, 필요한 정보를 입력하도록 안내해주는 역할을 합니다.

자유게시판 수정

자유게시판 댓글 등록

자유게시판 댓글 수정

자유게시판 댓글 삭제

회원가입

• 사용자가 필수 입력 정보를 입력하지 않았다면, 다시 입력하라는 모달창을 제공합니다. 사용자가 누락된 필드를 인지하고, 필요한 정보를 입력하도록 안내해주는 역할을 합니다.
• 입력이 되지 않은 곳에 입력을 하라는 빨간색 글을 보여줍니다. 사용자가 누락된 필드를 인지하고, 필요한 정보를 입력하도록 안내해주는 역할을 합니다.
• 회원가입을 완료하면 로그인이 자동으로 진행됩니다. 사용자가 편리하게 이용할 수 있도록 만들었습니다.

로그인

• 사용자가 필수 입력 정보를 입력하지 않았다면, 다시 입력하라는 모달창을 제공합니다. 사용자가 누락된 필드를 인지하고, 필요한 정보를 입력하도록 안내해주는 역할을 합니다.
• 입력이 되지 않은 곳에 입력을 하라는 빨간색 글을 보여줍니다. 사용자가 누락된 필드를 인지하고, 필요한 정보를 입력하도록 안내해주는 역할을 합니다.

로그아웃

• 로그아웃을 할 때 로그아웃 여부를 묻는 모달창을 제공합니다. 사용자가 의도하지 않은 로그아웃을 방지하여, 불필요한 시간과 노력을 절약하는 데 도움이 됩니다.

비밀번호 수정

Test

목록 페이지

등록 페이지

수정 페이지

상세 페이지

마이페이지

회원가입

로그인

AWS Architecture

→ Front-End AWS 구성도 입니다.

Commit Convention

• init : 초기화
• feat : 새로운 기능 추가
• update: 기능 수정
• fix : 버그 수정
• docs : 문서 수정
• style : 코드 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우, linting
• design: 레이아웃 수정
• refactor : 코드 리팩터링
• test : 테스트 코드, 리팩터링 테스트 코드 추가
• chore : 빌드 업무 수정, 패키지 매니저 수정, 그 외 자잘한 수정에 대한 커밋