🎙️openSquare

Front-end 소개

• 개인적인 고민과 개발을 주제로 서로 소통하는 커뮤니티 프로젝트입니다.
• React 라이브러리를 사용하여 구현했습니다.
• 개발은 초기 프로젝트 화면부터, 기능, 백엔드 연결까지 직접 구현했습니다.

개발 인원 및 기간

• 개발기간 : 2024-05-03 ~ 2024-05-29
• 개발 인원 : 프론트엔드/백엔드 1명 (본인)

사용 기술 및 tools

• React

Back-end

• Back-end Github

서비스 시연 영상

• 구글 드라이브

폴더 구조

폴더 구조 보기/숨기기

  ├── README.md
  ├── .gitignore
  ├── package-lock.json
  ├── package.json
  ├── public
  │    ├── index.html
  │    ├── manifest.json
  │    └── robots.txt
  └── src
       ├── App.js
       ├── App.test.js
       ├── App.module.css
       ├── App.test.js
       ├── index.css
       ├── index.js
       ├── logo.svg
       ├── reportWebVitals.js
       ├── setupTests.js
       ├── static.js
       ├── components
       │     ├── button
       │     │     ├── LogOutButton.js
       │     │     └── PostButton.js
       │     ├── comments
       │     │     ├── AddComment.js
       │     │     ├── Comment.js
       │     │     └── Comments.js
       │     ├── input
       │     │     ├── EmailInput.js
       │     │     ├── NicknameInput.js
       │     │     └── PasswordInput.js
       │     ├── modals
       │     │     ├── DeleteCommentModal.js
       │     │     ├── DeletePostModal.js
       │     │     └── Modals.js
       │     ├── posts
       │     │     ├── AddPostContainer.js
       │     │     ├── MiniPost.js
       │     │     ├── PostAction.js
       │     │     ├── PostDetail.js
       │     │     ├── PostSkeleton.js
       │     │     ├── PostsSkeleton.js
       │     │     └── UpdatePostContainer.js
       │     ├── users
       │     │     ├── UpdatePasswordContainer.js
       │     │     ├── UpdateProfileContainer.js
       │     │     ├── UserProfile.js
       │     │     └── UserProfileImage.js
       │     ├── BackButton.js
       │     ├── Layout.jsx
       │     └── Navbar.js
       ├── hoc
       │     ├── withLoading.js
       │     └── withLogIn.js
       ├── pages
       │     ├── AddPostPage.jsx
       │     ├── Home.jsx
       │     ├── LogInPage.jsx
       │     ├── PostDetailPage.jsx
       │     ├── PostPage.jsx
       │     ├── SignUpPage.jsx
       │     ├── UpdatePasswordPage.jsx
       │     ├── UpdatePostPage.jsx
       │     └── UpdateProfilePage.jsx
       ├── imaegs
       │     ├── back.png
       │     ├── logo.png
       │     ├── side_banner.png
       │     ├── welcome.gif
       │     └── profile_img.webp
       ├── reducer
       │     ├── emailReducer.js
       │     ├── nicknameReducer.js
       │     ├── passwordCheckReducer.js
       │     └── passwordReducer.js
       ├── hooks
       │     ├── useFetch.js
       │     ├── UseFetchEvent.js
       │     ├── usePasswordValidation.js
       │     ├── usePosition.js
       │     ├── useShowProfile.js
       │     └── useSignUpValidation.js
       ├── utils
       │     ├── checkOwner.js
       │     ├── constant.js
       │     ├── errorMessage.js
       │     ├── fetchData.js
       │     ├── navigate.js
       │     ├── numberToK.js
       │     ├── scroll.js
       │     └── status.js
       └── styles
             ├── button
             ├── comment
             ├── input
             ├── post
             ├── skeleton
             ├── user
             ├── Home.module.css
             ├── Layot.module.css
             ├── LogIn.module.css
             ├── Navbar.module.css
             ├── PostModal.module.css
             └── SignUp.module.css

서비스 화면

홈

인트로	로그인 모달	회원가입 모달

게시글 목록

전체 게시물	개발 게시물	고민 게시글	내 게시글

게시물 작성 / 상세 / 수정 / 삭제

게시물 작성	게시물 상세	게시글 수정	게시글 삭제

댓글 목록 / 등록 / 수정 /삭제

댓글 목록	댓글 등록	댓글 수정	댓글 삭제

프로필 수정 / 비밀번호 수정 / 회원 탈퇴 / 로그아웃

프로필 수정	비밀번호 수정	회원 탈퇴	로그아웃

트러블 슈팅

📎스크롤 안되는 이슈 및 해결
📎helper text 상태값 관리 이슈 및 해결

프로젝트 후기

온전히 제 힘으로 구현하는 프로젝트는 처음이었기에, 두려움이 있었습니다. 경험해보지 못했던 에러나 어떻게 구현해야 할 지 감이 안오던 코드들을 마주했을 때 머리가 하얘지기도 했었습니다. 이를 해결하기 위해 책도 찾아보고 구글링도 하면서 여러 구현 방법들을 알게 되면서 점차 코딩하는게 재밌어졌습니다 :) 여러모로 많은 것들을 배웠던 것 같습니다. 아쉬운 점은 맞닥뜨렸던 에러를 해결한 것에 대해 기록을 제대로 하지 못한 점입니다.. 다음 프로젝트부터는 꼬박꼬박 기록하여 같은 실수를 반복하지 않도록 하겠습니다 !!