본 프로젝트는 기존 게시판 기능에 더불어 글 위에 그림을 작성하고 편집하여 다른 사람과 공유할 수 있는 새로운 개념의 게시판 기능이 탑재된 하이브리드 웹 애플리케이션입니다.
드로우마인드 프로젝트에서는 팀원 간의 협의를 통해 API와 화면을 설계하고, 요구사항을 정리한 뒤 문서로 만들어 그것을 기반으로 각자 서버와 클라이언트를 개발했습니다.
- CKEditor 5를 활용한 HTML 텍스트 에디터 화면
- HTML 텍스트 에디터에서 작성한 글을 미리보기하고 그 위에서 바로 그림 작업이 가능한 그림 에디터 화면
- 그림 에디터에서 본 그대로 출력되는 게시글 화면
- 텍스트와 그림 모두 수정 가능한 게시글 수정 화면
- 그 외 회원 가입 화면, 로그인 화면, 게시글 목록 조회 화면 등
- 클라이언트와 서버 간 통신을 가능하게 하는 axios 기반의 API
- 게시글 내용과 회원 정보를 담는 관계형 데이터베이스
-
문태민
먼저 웹 개발 팀 프로젝트가 진행되는 방식에 대해서 직접 경험하며 배울 수 있었습니다.
팀원과 필요한 기능에 대해 이야기하고, 그 기능을 구현하기 위한 API를 설계하며, 그 과정에서 API에 어떤 데이터가 들어가야 하는지, API 주소는 어떻게 설정할 것인지 의논했습니다.
화면을 구현하면서 React와 VS Code를 다루는 스킬이 늘었으며, 기능의 역할에 맞는 UI를 제작하고 보기 좋게 수정하면서 코딩하는 기술이 늘었습니다.
ChatGPT에게 질문할 때에도 단순히 어떠한 기능을 하는 코드를 만들어 달라고 요청하는 것이 아니라, 기능을 만들면서 내가 막힌 부분을 ChatGPT에게 설명하고 그 부분에 대한 해답을 얻으면서 제가 사용하는 코드에 대해 이해하려 노력했고, 그 과정에서 자바스크립트(리액트)와 CSS 개발에 대한 많은 것을 배웠습니다.
-
이은총
팀원간의 의견 차이가 발생하였을때, 대처 능력을 키울 수 있어서 좋았습니다.
Backend 구현을 할 때 유지보수가 좋고, 효과적인 코드 관리를 위한 디자인 패턴을 배울 수 있었습니다. Model, Controller, Domain, Exception관리, Service관리를 위해 필요한 Spring Boot의 문법과 lombok의 기술 등을 알 수 있었습니다.
chatGPT를 활용하더라도, 자신이 프롬프트에 따라 코드를 짤 수 있는 수준이어야 chatGPT에게 효과적인 코드 작업을 도움받을 수 있다는 점을 배울 수 있었습니다.
- 문태민
- 이은총
- 김동윤
- 최준혁
- 문태민
- 김동윤
- 최준혁
- 이은총
화면 기능 및 UI 구현: 리액트
빌드 도구: 비트
서버 구축: 스프링 부트
데이터베이스: 포스트그리 SQL
운영 체제: 윈도우 11
IDE: Visual Studio Code, Webstorm, InteliJ IDEA
실행 환경: Morpheus
