3rd. 이제 본격적으로, 그리고 사람
안녕하세요 로고스토리 David 입니다. 오늘은 logostory세번째 모임을 가진 날이었습니다. 본격적인 스터디 1주를 보내고난 뒤 다시 모여 이야기 나눈 것들에 대한 이야기 입니다.
지난 1주일은 스터디는 안녕하셨나요?
2018년 11월 11일(일)에 본격적으로 이런거 개발 이렇게 해봅시다 이야기를 하고 일주일이 지난 오늘(11/18). 각 부분 별로 그리고 각자별로 한주간의 시간을 보내고 다시 모여 늘 그렇듯 서로 어색하게 인사를 나누면서 시작했습니다.
[backend] 기본 개발 템프릿 구성
기본 프로젝트 구성하는거 보다 더 많은 시간이 든건(개인적인거 같지만) IntelliJ에 적응하는 것이 었습니다. IntelliJ를 잘 아는 스터디 멤버들이 있어서 IntelliJ이용한 환경 구성을 빠르게 할수 있었습니다. (아마 혼자 했으면 몇일 했을듯..)
1. Spring Initializer로 프로젝트 구성
backend 파트는 Spring Initializer 사이트를 통해 Spring Boot 기반에 orderbook-backend서비스에 필요한 dependencies(Web, Security, JPA, Thymeleaf, DevTools, MySQL, Lombok) 들을 선택해 각자 다운로드 받아서 로컬환경에서 띄워보는 것까지를 테스트를 했습니다.
Thymeleaf는 이용해서 필요시에 backoffice기능을 구현할때 사용하기로 했습니다.
Tnhymeleaf
thymeleaf (server-side template engine) 사용법 정리 - 1
2. 기본적인 CRUD 샘플 등록
우리가 만들 상품은 고객이 테이블에서 주문하는 시스템이므로 관련해서 기본적으로 ‘자리’, ‘주문’, ‘고객’ 이 3가지의 Domain이 존재하고 간단하게 아래서 처럼 관계를 맺도록 구성했습니다. (이글을 쓰다보니 중요한 주문 할 ‘상품’이 빠졌군요. Order와 1:N 관계가 되겠군요. 이부분은 추후 업데이트 하도록 하겠습니다. Seat 보다는 Table이 맞는 Entity이름인거 같고..고칠게 한두게가 아니네요..)
3. 소스 파일 구조
orderbook-backend 프로젝트는 기 정의된 서버 어플리케이션 스펙에 따라서 구성을했고(현재 OAuth2 빠짐. 추후추가 예정) 아래와 같은 기본 폴더 구조를 가집니다. 해당 템플릿에 관한 설명은 향후 orderbook-backend 프로젝트의 wiki페이지를 통해서 업데이트 하도록 하겠습니다.
src/main/java
- api - api 클래스
- config - 프로젝트 설정에관한 클래스 DefaultConfig
- controller - backoffice의 화면과 연결할때 사용할 controller
- domain - JPA Entity. 테이블과 1:1 매칭
- domain/dto - DTO(Data Transfer Object)로 Domain의 입/출력시 필요 데이터만 입/출력하도록 filter
- repository - 데이터 접근을 위한 Repository
- service - 필요 로직 있을시 service부분에 구현
src/main/resources
- templates - backoffice 화면 템플릿 파일들
- application.properties - backoffice 설정
src/test
- 테스트 파일들
4. 최고의 api explorer Swagger
api를 frontend 개발시에 사용하기 위해서는 api document가 필요한데 api document인 동시에 api executer로서 역할을 할수 있는 Swagger를 사용해서 구성했습니다. Swagger로 접속하기 위해서는 orderbook-backend 런칭후 http://localhost:8080/swagger-ui.html 로 접속합니다.
[frontend] A/B 그룹으로 나누다
frontend 스터디 부분의 가장큰 변화는 ReactJS의 숙년도에 따라 A/B 그룹으로 나누고 Group별 목표를 정해서 진행하기로 했습니다. 개인적으로는 아주 환영하는 방향입니다. 저같이 ReactJS에 익숙하지 않는 사람들이 ReactJS가 뭔지 한번 해보는 것도 해볼수 있게 되었고 고수님들의 frontend TDD를 옆에서 같이 볼수 있게되어서 엄청 기대가 되네요. fontend는 회의록을 orderbook-frontend의 wiki에 잘 정리를 해주시고 있어서 보면서 frontend의 스터디 방향을 참고하면 되겠습니다.
# 참고 Link
Github Page로 SPA배포하는 방법
Nomad Coder의 영화리스테 페이지 튜토리얼
Material UI
[UX/UI & Design]
드디어 UX/UI & Design(이름을 이렇게 정하겠습니다.)팀은 각기 다른 분야의 디자인 경험을 가진 3분이 한팀으로 뭉처 위용을 갖추게 되었습니다. UX/UI & Design팀은 스터디 프로젝트 주제인 ‘모두의 주문’에 대한 아이디어를 내주셨던 팀 답게 서비스에 대한 고민부터 Tool에 대한 고민 그리고 최종적으로 개발팀과의 Cowork을 위한 준비에 대한 고민을 같이 하면서 스터디를 진행하고 있습니다. 자세한 진행 내용은 회의록을 참고 하시기 바랍니다. 그리고 우리 ‘logostory’에 대한 로고를 만들어 주셨으면 좋겠다는 부탁을 드렸는데 아주 잼있는 우리들의 얼굴이 나오지 않을까 기대가 됩니다.
[infra] AWS어디까지 써봤니?
인프라 스터디 진행방식은 AWS Free Tier를 이용해서 각자 AWS계정을 만들고 orderbook의 프로젝트들(orderbook-backend, orderbook-frontend)를 각자의 인프라에 배포 해보면서 AWS의 여러가지 기능들을 써보고 해댱 경험을 공유하는 방식으로 진행하기로 했습니다.
AWS로 CI/CD까지 다 되겠는데?
첫번째 이번 스터디에 주로 공유 했던 내용은 CI/CD에 관한 내용인데 전통적으로 Jenkins에 기반한 CI/CD방식에서 AWS에서 제공하고 있는 AWS CodeStar 를 이용해서 build/deploy를 할수 있더라라는 내용을 이야기 했습니다.
AWS CodeStar로 1인 DevOps 코스프레하기
AWS 6월 웨비나 | AWS CodeStar를 통한 DevOps 기반 프로젝트 운영 (윤석찬 테크에반젤리스트)
본 궤도에 오른 스터디 방향
이제 각 부분별로 본격적으로 스터디가 진행되기 시작을 했습니다. 이제 스터디 멤버 수가 평균 16~20분 사이정도 될거 같고 각 부분들이 Deep하게 스터디를 진행하고 있어서 늘 스터디 처음에 모여서 새로오신 분을 소개하고 우리 스터디 방향을 소개했던 일든은 이제 최소화 하고 각각의 파트의 스터디에 집중하는 방식으로 진행해도 될듯하네요 S
- 스터디 시작시간 10:00 -> 10:30
- 우리 스터디 장소인 투섬플레이스가 10:00에 오픈을 하는데 15명 정도의 사람이 오픈하자마자 주문을 쏟아내면서 결국은 주문한 음료가 다 나온 30분정도 후에 스터디를 시작할수 있는 상황이어서 스터디 시작시간을 30분 뒤로 미루도록 하겠습니다.
- 다 같이 모이는건 새로 오신 분이 계실때만
- 각 파트별로 스터디가 Deep하게 진행되고 있는 만큼 바로 각 파트별로 스터디를 진행하고 우리 logostory에 새로 오신분이 계실때만 전체가 모여서 소개도 듣고 환영하는 시간을 가지도록 하겠습니다.
- 향후 후반전 플젝시에는 Scum연습도 해볼겸 30초 Stand Meeting 해볼 생각입니다
- 주제를 세분화 해서 블로깅
- 이제 이야기할 내용들이 많아져서 UX/UI & Design, Frontend, Backend, Infra로 세분화 하고 글을 올리시고 싶으시분을 받거나 요청을 드리는 방식으로 바꾸도록 하겠습니다.
사람…
언제부터인가 나의 이름은 없고 기획1, 개발1, 디자이너1, MM(Man Month)로 불리우고 있는 현실에서 다들 어색하지만 영어 이름도 만들고 서로 부르며 세상에서 유일한 존재들과 한 자리에서 더 나은 나를 만들기 위해서 노력하고 있는 logostory 멤버들 화이팅입니다!