view구현 기술은 팀의 상황에 따라 결정하세요. 아래 활용된 tailwind-admin-templates은 예시이며, 여러 templates 중 선택해 사용해보세요 내용에서 Spring + vue3(tailwind-admin-templates) 로 개발된 간단한 프로젝트 repo 공유합니다.

• 버그가 있을 수 있으니, 잘 풀어나가시길.

백엔드 개발자의 View구현 필요성

• 백엔드 개발자 중 View화면 개발을 기피하는 경우가 많은데 이것은 잘못된 생각이다.

• 규모가 작은 회사의 경우 프론트엔드와 백엔드의 경계없이 풀스택 개발을 지향하고, 규모가 큰 회사일지라도 사내에서 운영되는 어드민은 백엔드 개발자가 구현하는 경우가 많다.

  

  모 개발회사의 ‘일 잘하는 방법’ 중

어떤 기술로 view를 개발할 것인가?

• 상황에 맞춰 적당한 기술을 사용하는 것이 중요하다. 닭잡는데 소잡는 칼을 쓰면 프로젝트는 망한다.
• 우리의 제약사항

러닝커브가 낮아야 함 짧은 프로젝트 기간(시간이 없다)

• thymeleaf vs react vs vue:: vue를 선택한 이유
  • 상황에 따라 다르지만, 보통 위 3가지 기술에서 결정하게 된다.
  • thymeleaf
    • 장점: 러닝커브가 낮다.
    • 단점: 동적 복잡한 화면을 만들기는 어렵다.
  • react
    • 장점
      • 확장성이 좋다. (현업에서 가장 많이 사용)
      • 규모가 큰 프로젝트에 용이하다
    • 단점: 러닝커브가 높다
  • vue
    • 장점
      • html 기반의 템플릿이 있어 진입장벽이 낮고 프로젝트를 빠르게 만들 수 있다
      • 소규모 프로젝트에 용이하다
    • 단점
      • 너무 유연해 오류와 불규칙성이 발전하기 시작하면서 상황이 더 복잡해질 수 있다

완성된 template으로 View 빠르게 구현하기

1. vue3 로 view개발 시작하기

• node, npm 설치
  • https://devmango.tistory.com/37
• vue3 문법
  • https://ko.vuejs.org/guide/introduction
  • 아래 template에 많이 구현되어 있기 때문에 모르는 부분만 찾아서 학습해보자.

2. 시간을 절약하기 위해, vue3기반 template을 활용

• vue3 template를 구글 검색해 적당한 template결정

  • 여러 Vue Component Framework가 있으며, 이 FrameWork 활용한 다양한 template가 있음
    • Component Framework는 디자인된 화면을 빠르게 적용할 수 있도록 돕는다.
      • Vuetify, BootstrapVue, Tailwind 등
    • 다양한 FrameWork이 있으니 잘 검색해볼 것. 적당한 가격의 유료버전을 사용하는 것도 방법임.
  • Tailwind로 개발된 tailwind-admin-templates를 사용하기로 함
    • 아래같은 화면이 이미 완성되어있다.

  

3. 개발환경 구성 & 완성본