Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/beyond-sw-camp/be10-3rd-daechamsa-withthedeveloper

💚권형미 💛김영기 🩵안세령 ❤️임채륜 💜정의진
https://github.com/beyond-sw-camp/be10-3rd-daechamsa-withthedeveloper

css3 figma html5 javascript swiper vuex

Last synced: about 2 months ago
JSON representation

💚권형미 💛김영기 🩵안세령 ❤️임채륜 💜정의진

Host: GitHub
URL: https://github.com/beyond-sw-camp/be10-3rd-daechamsa-withthedeveloper
Owner: beyond-sw-camp
Created: 2024-10-27T15:47:32.000Z (3 months ago)
Default Branch: develop
Last Pushed: 2024-10-27T15:49:17.000Z (3 months ago)
Last Synced: 2024-10-27T17:33:39.166Z (3 months ago)
Topics: css3, figma, html5, javascript, swiper, vuex
Language: Java
Homepage:
Size: 2.3 MB
Stars: 0
Watchers: 0
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# with-the-developer

------------

🧑‍💻Team-Developer🧑‍💻

| 권형미 | 김영기 | 안세령 | 임채륜 | 정의진 |
|---------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------|
| | | | | |
| 작업반장 | 군기반장 | 그룹회장 | 뺑끼대장 | 으라차차 |

## 🔆 프로젝트 개요

---
대한민국 개발자 50만 시대,

➰ 개발성향 테스트

➰ 팀모집

➰ 채용공고 확인

➰ 프로젝트 자랑

➰ 커뮤니티

➰ 개발자들의 개성을 드러낼 수 있는 굿즈 구매까지!

개발자랑은 개발자 준비생/개발자들이 필요로 하는 기능들이 통합되어 있는 서비스이자 놀이터입니다.
팀모집 게시판을 통해 함께 마음을 맞출 팀원들을 모집할 수 있으며,
채용공고 게시판을 통해서는 본인이 찾는 직무 공고를 확인할 수 있고,
프로젝트 자랑 게시판에서는 본인의 프로젝트를 자랑할 수 있습니다.
게시물에는 직무태그가 있어 관련 정보를 빠르게 찾아볼 수 있습니다.

개발자 커뮤니티라면 있을 것 같은 위의 기능들은 물론,
개발자랑에서는 성향테스트를 통해 얻은 dbti(developer-mbti)와 희망직무를 합쳐 얻은 수식어로 나만의 존재감을 드러낼 수 있습니다.

## ⚒️ 기술 스택

---

### Backend

### Frontend

### DataBase

### Tool

## 📄 산출물

---

### 1. 화면설계서 (Figma)

화면설계서

### 2. 프론트 기능 명세서

프론트 기능 명세서 바로가기

### 3. Vue.js 기반 테스트결과 보고서

약관동의 및 회원가입 유효성 검사

![약관동의 및 회원가입 유효성 검사](https://github.com/user-attachments/assets/47831a76-5340-4e4f-ae6c-f5f42806daff)

중복 확인 등, 메일 인증, 회원가입

![중복 확인 등, 메일 인증, 회원가입](https://github.com/user-attachments/assets/26aabc36-1cbd-4861-a56c-8fef35f19c40)

카카오로그인, 성향테스트, 알림

![카카오로그인, 성향테스트, 알림](https://github.com/user-attachments/assets/48d6017f-3a14-4bcb-8b06-c457240b10bd)

카카오로그인

![카카오로그인](https://github.com/user-attachments/assets/99180666-3033-440f-993f-961a7cea1292)

에러페이지

![에러페이지](https://github.com/user-attachments/assets/9a57ae13-0b4e-474a-9ddc-7cfba122f26d)

굿즈 담기, 장바구니 기능, 주문하기

![형미-1](https://github.com/user-attachments/assets/37fbba2f-18e0-4f33-a360-04c27f820dea)

결제하기

![형미-2](https://github.com/user-attachments/assets/9a62a115-d4a9-4203-a565-f7520e21a9de)

주문내역 확인, 결제 취소

![형미-3](https://github.com/user-attachments/assets/dbbdc077-b0ac-45f6-9ec5-2c35a2b18bf3)

팀모집 게시글 등록 및 조회

![01_01_팀모집 게시글 등록 및 조회](https://github.com/user-attachments/assets/c4c23d36-fc5e-4da3-84c5-54e982bc4d89)

팀모집 댓글 등록 및 삭제

![01_02_팀모집 댓글 등록 및 삭제](https://github.com/user-attachments/assets/11e9948b-0613-497f-a5ec-d38c23d2ca19)

팀모집 게시글 수정

![01_03_팀모집 게시글 수정](https://github.com/user-attachments/assets/6c2a34aa-339c-4113-ac75-3a7a76412b2a)

팀모집 쪽지 및 신고

![01_04_팀모집 쪽지 및 신고](https://github.com/user-attachments/assets/d6c8dd48-1c11-43de-8b15-21658da0ea48)

팀모집 북마크

![01_05_팀모집 북마크](https://github.com/user-attachments/assets/fffc15cd-0f97-4e41-bc89-3d34d7738cf3)

팀모집 게시글 삭제

![01_06_팀모집 게시글 삭제](https://github.com/user-attachments/assets/8e65957b-3d2e-43ff-9050-65ef2c5dca5f)

프로젝트 게시글 등록 및 조회

![02_01_프로젝트 게시글 등록 및 조회](https://github.com/user-attachments/assets/1c39f3ad-cdcd-4e0a-b1a9-c427c0554d27)

프로젝트 게시글 URL 및 댓글 등록, 삭제

![02_02_프로젝트 게시글 URL 및 댓글 등록, 삭제](https://github.com/user-attachments/assets/34e3136e-3f08-4755-8385-ac9d6e1256bb)

프로젝트 게시글 수정

![02_03_프로젝트 게시글 수정](https://github.com/user-attachments/assets/b51d4e05-dbe4-4f08-a480-157b881d54e1)

프로젝트 쪽지 및 신고

![02_04_프로젝트 쪽지 및 신고](https://github.com/user-attachments/assets/e756c4f0-aef4-421b-ae49-44fa5eb5d418)

프로젝트 북마크

![02_05_프로젝트 북마크](https://github.com/user-attachments/assets/81558639-a9e6-42b6-9711-56fc4b82e580)

프로젝트 게시글 삭제

![02_06_프로젝트 게시글 삭제](https://github.com/user-attachments/assets/88ffb2e3-0962-4d73-a740-493e42ef07c9)

커뮤니티 게시글 등록 및 조회

![03_01_커뮤니티 게시글 등록 및 조회](https://github.com/user-attachments/assets/bf535e1d-8199-49a4-867e-62541b86bed3)

커뮤니티 댓글 등록 및 삭제

![03_02_커뮤니티 댓글 등록 및 삭제](https://github.com/user-attachments/assets/b8e7cd98-d579-4e35-8fbe-ec53d4dc7a03)

커뮤니티 게시글 수정

![03_03_커뮤니티 게시글 수정](https://github.com/user-attachments/assets/d10633aa-3fe3-4c06-8355-61e5eedc4830)

커뮤니티 쪽지 및 신고

![03_04_커뮤니티 쪽지 및 신고](https://github.com/user-attachments/assets/65ef4b9c-8ae0-468f-b253-f5409735c033)

커뮤니티 북마크

![03_05_커뮤니티 북마크](https://github.com/user-attachments/assets/344d749c-a271-4c9d-a2f6-8a49f966cb20)

커뮤니티 게시글 삭제

![03_06_커뮤니티 게시글 삭제](https://github.com/user-attachments/assets/a556f8f2-bb53-4a3c-8356-787a38198c01)

채용 공고 게시글 등록

![04_01_채용 공고 게시글 등록](https://github.com/user-attachments/assets/64e4d4e5-b7b4-43b9-8e59-a25f79c91cc4)

채용 공고 게시글 조회

![04_02_채용 공고 게시글 조회](https://github.com/user-attachments/assets/506b5c8a-1b84-4578-90b6-07dcfadff395)

채용 공고 북마크

![04_03_채용 공고 북마크](https://github.com/user-attachments/assets/9ca3804a-5257-41eb-9f0a-ff14695f2684)

채용 공고 게시글 삭제

![04_04_채용 공고 게시글 삭제](https://github.com/user-attachments/assets/7d36c86a-1806-4392-9685-6b8fecf68cdb)

검색

![05_검색](https://github.com/user-attachments/assets/cb11c7db-0ee2-4b09-88ec-c70cce0b81e5)

관리자 목록(카테고리) 조회

![관리자목록클릭](https://github.com/user-attachments/assets/113ebc37-ffc2-409e-8db5-afcf94cfbc11)

관리자 굿즈 조회, 추가

![굿즈추가](https://github.com/user-attachments/assets/cecf01ac-7cb9-4643-9ba5-a26516c5e055)

관리자 굿즈 삭제

![굿즈삭제](https://github.com/user-attachments/assets/55aff8a2-3ec2-4f66-a17d-3c030a8815f7)

관리자 굿즈 수정

![굿즈수정](https://github.com/user-attachments/assets/8a8da366-4dcd-4001-8204-ba23c7223c75)

관리자 태그 관리

![태그관리](https://github.com/user-attachments/assets/875d4c2c-dcc3-454f-9a24-4d1dc0646d52)

메인페이지

![메인페이지 기능](https://github.com/user-attachments/assets/166ae7bc-7bcd-4e3e-a34a-32b3c6047ebc)

마이페이지-내 프로필

![마이페이지-내프로필](https://github.com/user-attachments/assets/c788e9c4-c8c0-41ad-bd7e-2106715f8c03)

마이페이지-내 게시글

![마이페이지-내게시글](https://github.com/user-attachments/assets/97e15a83-12fc-422d-85e0-778745bdbc85)

마이페이지-북마크

![마이페이지-북마크](https://github.com/user-attachments/assets/79d79867-2690-4d36-9db6-928a34cc78fd)

마이페이지-쪽지 조회,답장, 유저차단

![마이페이지-쪽지,차단](https://github.com/user-attachments/assets/24b4e47b-146c-4642-a6cb-411cd47dbdd2)

어드민-게시글 조회,삭제

![어드민-게시글 조회,삭제](https://github.com/user-attachments/assets/3e960cc9-35ea-4393-997c-05bf0e9a6b43)

## 🍀 회고

---

| 팀원| 한마디 |
| --- |-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 권형미 | html, css, js로 간단한 프론트엔드 작업을 해본 적은 있었으나, 프레임워크를 사용, 그리고 제대로된 프로젝트를 해본 것은 처음이었습니다. 제가 느낀 바로는 자바스크립트와 프레임워크를 잘 다루려면 본질을 통찰하고 있어야겠다는 깨달음을 얻었습니다. 이번에는 배우고 단기간 내에 프로젝트를 완성하다 보니 사실 본질을 꿰뚫지 못해 아쉬웠는데, 다음 프로젝트에는 동작 원리, vue.js의 생명주기 등도 공부하며 vue.js에 대한 이해도를 더욱 높이고 싶습니다. 또 백엔드를 먼저 구축하고 프론트엔드 작업을 했는데, 초반 기획을 할 때 필요한 기능들을 사소한 것이라도 정리하고 백엔드를 구현하는 것이 필수적이라고 느꼈습니다. 서버를 구축할 때는 미처 생각하지 못한 것들이 프론트엔드 작업을 하며 떠오르는 것을 보며, 백엔드와 프론트엔드 어느 하나만 학습하는 것이 아니라 두 파트 모두 가져가야겠다고 다짐했습니다. |
| 김영기 | 저는 프론트 프로젝트를 처음 진행해보았습니다. 기존에 html과 css의 기본을 알고 있는 상황이었지만 javascript와 Vue.js는 거의 모르고 있었기에 javascript와 Vue.js를 중점으로 공부하며 프로젝트를 진행했습니다. Vue.js 프레임워크를 사용해보면서 component를 활용하여 하나의 페이지를 구성하는 과정을 익히고 SPA의 구조를 공부할 수 있는 시간이었습니다. 또한 라우팅을 통해 페이지를 전환하고 axios를 이용해 기존에 개발했던 백엔드 서버와 통신을 해보고 vuex를 이용한 상태관리를 진행하여 프론트엔드와 백엔드의 통신 과정을 배울 수 있었습니다. 이번 프로젝트를 진행하면서 이렇게 배운 프론트엔드 기술을 다른 프로젝트에서 더 발전시켜 적용해보아야겠다고 다짐했습니다. |
| 안세령 | 백엔드 프로젝트에서 했던 것을 기반으로 하는 프론트 프로젝트를 진행하면서 HTML, CSS로 웹에 대한 기본적인 이해를 배울 수 있었고 Javascript 언어를 활용한 Vue.js에 대한 학습을 할 수 있었습니다. Router을 이용하여 SPA를 기반으로 한 컴포넌트 전환을 하며 백엔드와 프론트에 대한 양방향 연동을 직접 실행하여 전체적인 프로세스의 흐름을 알 수 있었습니다. 또한 사이트 개발에 대한 전반적인 틀과 구조를 알 수 있어서 좋았습니다. 프론트를 개발하면서 지난 백엔드 프로젝트에서 놓쳤던 부분도 알 수 있어서 좋았습니다. 시간이 부족해서 완성도가 높지 않았던 것 같아 아쉬움이 많이 남습니다. 백엔드에서 넘어오는 권한에 대한 에러 해결을 할때 많이 어려웠는데 이번 기회에 많은 것을 알 수 있어서 좋았습니다. |
| 임채륜 | 프론트엔드를 작업하면서 백엔드의 데이터의 반환값들이 엄청 중요한것임을 다시금 느꼈고, 처음 배우는 기술이다 보니 어려웠던 점이 많았습니다. 생각보다 신경쓸게 많았는데 버튼을 누르면, 어디로 이동되고, 권한에 따라 이동되지 못하게 이벤트를 막고, 유효성 검사 같은 복잡한 프로세스들도 다양했어서 곤란한 점이 많았습니다. 앞으로의 Rest하게 짜는 방법도 얼마나 중요한지 깨달았습니다. 백엔드 개발자도 프론트엔드를 잘 알아야 하는 점이 크게 와닿은 프로젝트였습니다. |
| 정의진 | 저는 평소 프론트엔드 기술에 자신이 없었습니다. 기본적인 html/css 기술을 제외하면 경험도 부족했기에 제대로 된 프로젝트를 하려고 할 때 마다 부담이 있었습니다. 이번 프론트엔드 프로젝트를 통해 javascript에 대한 역량을 높일 수 있었으며 vue.js 프레임워크를 경험해보며 SPA형식의 프론트엔드 프로젝트에 대한 이해도를 높일 수 있었습니다. component를 활용하며 routing을 통한 페이지 전환. axios를 사용한 백엔드 통신, vuex를 활용한 상태관리 등을 경험하며 익힐 수 있었습니다. 앞으로 이러한 기술을 활용하여 다양한 프로젝트를 진행하며 더욱 앞으로 나아가야겠다고 다짐할 수 있었습니다. |