3 week homework

Delog Community

사용자는 회원가입 후, 게시물을 작성할 수 있다. 서로의 게시물을 볼 수 있는 community이다.

Front-end 소개

• 개인적인 고민과 개발을 주제로 서로 소통하는 커뮤니티 프로젝트입니다.
• 기초를 잘 쌓기 위해 `Vanila JS'를 사용하여 구현했습니다.
• 개발은 초기 프로젝트 화면부터, 백엔드 연결, 베포까지 직접 구현했습니다.

개발 인원 및 기간

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

🧩 FE 기술 스택

영역	사용 기술
프론트엔드	HTML, CSS, JavaScript (Vanilla JS)

Back-end

• Back-end Github

폴더 구조

폴더 구조 보기/숨기기

├── README.md
├── .gitignore
├── public
│    ├── index.html
│    ├── manifest.json
│    └── robots.txt
└── src
     ├── App.js
     ├── App.test.js
     ├── index.css
     ├── index.js
     ├── logo.svg
     ├── reportWebVitals.js
     ├── setupTests.js
     ├── static.js
     ├── components
     │     ├── comments
     │     │     ├── AddComment.js
     │     │     ├── Comment.js
     │     │     └── Comments.js
     │     ├── modals
     │     │     ├── DeleteCommentModal.js
     │     │     ├── DeletePostModal.js
     │     │     └── Modals.js
     │     ├── posts
     │     │     └── MiniPost.js
     │     ├── users
     │     │     └── UpdateProfileImage.js
     │     ├── BackButton.js
     │     └── Navbar.js
     ├── pages
     │     ├── AddPostPage.jsx
     │     ├── LogInPage.jsx
     │     ├── PostDetailPage.jsx
     │     ├── PostPage.jsx
     │     ├── SignUpPage.jsx
     │     ├── UpdatePasswordPage.jsx
     │     ├── UpdatePostPage.jsx
     │     └── UpdateProfilePage.jsx
     ├── images
     │     ├── back.png
     │     └── profile_img.webp
     ├── hooks
     │     └── useFetch.js
     ├── utils
     │     ├── numberToK.js
     │     └── scroll.js
     └── styles
           ├── AddComment.module.css
           ├── AddPost.module.css
           ├── Comment.module.css
           ├── Comments.module.css
           ├── LogIn.module.css
           ├── MiniPost.module.css
           ├── Navbar.module.css
           ├── PostDetail.module.css
           ├── PostModal.module.css
           ├── Posts.module.css
           ├── SignUp.module.css
           ├── UpdatePassword.module.css
           ├── UpdatePost.module.css
           ├── UpdateProfile.module.css
           └── UserImage.module.css
</div>

/Users/kimdaehun/Desktop/image-1.png ## 서비스 화면

로그인 & 회원가입

🔐 로그인	🧾 회원가입

홈

🏠 전체 게시글	프로필

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

✍️ 게시물 작성	게시물 상세	🛠 게시글 수정 & 삭제

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

댓글 화면	💬 댓글 등록	🛠 댓글 수정	댓글 삭제

좋아요 / 조회수

❤️ 좋아요	👀 조회수

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

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

트러블 슈팅

추후 작성 ...

프로젝트 후기

이번 프로젝트를 통해 JavaScript의 동작 방식에 대한 이해가 한층 깊어진 것 같습니다. 그동안 async/await, 비동기 처리, Axios 같은 개념들은 강의나 문서를 통해 '이론적으로'만 접했을 뿐 실제로 직접 써보며 체감한 적은 거의 없었습니다. 그런데 이번에 직접 기능을 구현하면서, 아 이게 그런 의미였구나 하고 자연스럽게 이해되는 순간들이 많았습니다. 마치 머릿속에만 맴돌던 개념들이 실전 경험을 통해 하나씩 정리되어 가는 느낌이었습니다.

비록 아이디어 부족으로 인해 더 많은 기능을 추가하지 못한 점은 아쉬움으로 남지만, 이번 경험을 통해 단순히 지식을 쌓기 위한 학습에서 벗어나, 이제는 '실제로 적용해보기 위한 학습'을 하고 있다는 점에서 큰 성장을 느낄 수 있었습니다. 다음 프로젝트에서는 이번에 익힌 기술들을 바탕으로 더 다양한 기능을 시도해보고, 완성도 높은 결과물을 만들어보고자 합니다.

🔄 향후 개선 사항 (To-do)

• 정적 html이 아닌 동적으로 만들기
• SPA로 개발해보기