beyond-sw-camp/be04-3rd-ThisDotE-InnerJoin-Us

2조 - 🤡이준형 🐳소우주 🦧신대영 🦈신동호 🐣이드보라

✨ This.e 2조 ✨

👾 Members 👾

🤡 이준형

🐳 소우주

🦧 신대영

🦈 신동호

🐣 이드보라

📚 Tools 📚

🔅BackEnd🔅

🔅FrontEnd🔅

1. 프로젝트 소개

InnerJoin Us

저희 커뮤니티는 개발을 꿈꾸는 신입 개발자나 현 개발자를 위해 스터디 및 단위 프로젝트, 소모임을 쉽고 자율적으로 모일 수 있도록 스터디 플랫폼을 제공해주는 커뮤니티 입니다. 개발 주제뿐만이 아니라 각자 부족한 부분들을 채워갈 수 있는 스터디 주제를 선정하여 팀을 꾸릴 수 있습니다. 더불어 개발과 관련된 유용한 정보나 채용공고를 쉽게 볼 수 있는 정보 공유 게시판을 운영하고 있어 따로 찾아보지 않아도 한 곳에서 모아볼 수 있는 장점을 가지고 있습니다.

2. I.A 구조도 및 스토리 보드(Story Board)

📍 I.A(inpormation Architecture) 구조도

📍 스토리 보드(Story Board)

Main Page

Main Page LogIn

View User Profile

View All StudyGroup Article

Write StudyGroup Article

View StudyGroup Article

3. 기능명세서(Functional Specification)

4. Figma Front 설계

Whole Windows

5. Wire Frame 와이어 프레임

6. Test

테스트 케이스 정의서

Login / LogOut

Write StudyGroup Article

Write StudyGroup Article Reply

View User Profile

7. 회고

• 이준형 : HTML, CSS, Javascript 그리고 Vue를 사용한 프론트 과정을 마치고 세 번째 단위 프로젝트를 진행하였다. 이번 프로젝트에서는 지난 백엔드 프로젝트에 이어 프론트 화면을 적용시켜보았다. Figma를 사용하여 화면 설계 및 디자인을 적용하였고, Vue를 사용하여 기능적인 부분을 작업하였다. 백엔드 고도화와 화면 구현을 같이 진행하니 시간이 빠듯하여 처음 생각했던 목표치 보다 구현을 못한 부분이 아쉬움으로 남아 추후 고도화를 통해 진행하지 못한 부분도 작업해야겠다.

• 신대영 : 조원분들과 같이 이전 Backend 프로젝트를 활용해 Frontend 구현을 진행했습니다. 처음 Vue를 이용해 프론트엔드를 개발해보니 화면에 보이고, 직접 바꾸는것이 바로바로 확인 가능한게 신기했습니다. 하지만 배운지 얼마 안되어 익숙하지 않아 하고싶은 방향으로 개발을 진행하지 못하였습니다. 서버서 전달받은 json 형식 파일을 가공하고, 배열을 적용하는 등의 일이 쉽지 않았습니다. 한번 성공한 후 적용 하는 것은 빠르게 진행이 가능했습니다. 다른 조원 분들도 각자의 역할을 맡아 해결해 나가니 원하는 부분까지 개발을 진행하여 좋았습니다. 앞으로 고도화를 진행하며 부족한 UI 부분을 수정하고, 기능들을 더 추가할 계획입니다.

• 소우주 : 짧은 기간 스프린트였지만 백엔드와 프런트엔드 연동 시 하나하나 꼼꼼하게 따져보며 데이터를 주고받아야 한다는 것을 괜찮겠지 하며 넘어간 부분에서 에러를 마주하며 절실히 알게 되었습니다. 개발을 진행하며 중간중간 데이터베이스 SQL을 건드려야 하는 상황을 마주할 때마다 프로젝트 기획 시점부터 모든 부분을 재차 검토하는 것이 중요하다는 것을 다시 한번 알게 되었습니다. MSA 방식을 적용하며 많은 로컬 클라이언트, 서버를 실행시킨 채로 개발하다보니 꼼꼼함을 꾸준히 유지하는 것이 어려웠지만 그래도 각자 맡은 부분에서 함께해준 조원들과 소통하면서 문제들을 하나하나 해결해나갈 수 있었습니다.

• 신동호 : Figma로 프론트단을 설계하며 흥미를 느껴 즐기며 작업했던 것 같습니다.틀을 잡고 저희 프로젝트가 어떻게 태어날지 상상하고 기대하며 꼼꼼히 작업했습니다.npm과 유레카 서버를 활용해 5173포트에 저희가 만든 창을 띄우고 프론트단에서도 유레카 서버를 활용해 프론트 콘솔창에서 DB에 저장된 데이터값을 가져오며 프론트 창에 그 DB에 저장되어있는 값을 가져와 창으로 Get했습니다.되게 흥미로웠습니다. Get 메소드와 관련해서는 어려움이 없었으나 Post 에 관련해서는 어려움을 느끼며 고통받았던 것 같습니다..좀 더 복습하고 공부해야 하고 더욱 더 경험해봐야겠다 라는 생각이 들었습니다.InnerJoinUs 프로젝트를 더 고도화해서완성시키고 싶다는 생각을 했습니다.또한 프론트단에 있어서 자바스크립트 및 Vue 공부를 더 해야겠다는 생각을 했습니다.

• 이드보라 : 이번 프로젝트에서는 이전에 Backend(java)로 뼈대를 갖추었던 ‘InnerJoin Us’ 개발자 커뮤니티를 주제로 피그마를 사용해 주제에 맞게 꾸려질 웹페이지의 디자인을 스토리보드로 작성해보고 Frontend(vue.js, html5, react)를 구현해보았습니다. 피그마로 사전에 작성해놓았던 웹페이지를 직관적으로 보여지는 Vue로 Frontend를 구현하면서 생동감있고 코드의 이해가 백보다 비교적 쉬웠던 부분이 있었지만 그만큼 신경써서 코드를 짜야하는 부분이 많았고 오히려 백보다 직관적으로 보여지다보니 어떤 부분에서 에러가 나는지도 일일이 찾아야했었습니다. 이를 통해 프론트에 시간도 많이 필요하다는 것도 알 수 있었고 저에게 부족했던 부분에 대해서도 알수 있었던 시간이었습니다. 더 나아가 프론트와 백 서버 연결 또한 쉽진 않은 부분이 있었지만 팀원들의 영혼을 갈아넣은 정신으로 서버연동을 할 수 있어 발표 시에 청중들에게 저희가 설계한 웹페이지에 대한 기능이나 제공하고자 하는 서비스에 대한 부분을 좀 더 정확하게 보여줄 수 있었으며, 다만 아쉬운 점이 있다면 프로젝트기간이 비교적 짧아 생각한 것 만큼 많은 기능을 넣을 수 없어던 점이 있었습니다. 이것을 보완하고자 앞으로 함께 했던 팀원들과 점차 고도화를 시키며 지금까지 웹 구현을 하면서 부족했던 부분이나 추가적으로 넣고 싶었던 부분을 생각하면서 ‘InnerJoin Us’ 프로젝트를 마무리 지을 예정이고, 프로젝트 기간 동안 백과 프론트에서 각자의 역량을 뽑아 합을 이뤄 잘 마무리 할 수 있었고 어려운 점은 서로 도와가며 즐겁게 프로젝트를 끝낼 수 있었던 것 같습니다.