비즈니스 모델이 완성되었다면 아래와 같은 순서로 개발이 진행된다.

  1. UI 시나리오 작성 ( XD, 스케치, 제플린, figma)
  2. DB 설계
  3. REST api 개발
  4. SPA 프런트엔드 화면 개발

Fullstack 개발이란 백엔드와 프런트 양쪽을 개발한다는 의미보다 Full로 모든 스택을 다룰줄 안다는 의미이므로 위의 1-4 번을 모두 할 수 있어야 한다.

클라이언트 사이드 렌더링이 보편화 되면서 웹서버는 정적인 서버와 동적인 서버로 분리가 되었고 동적인 서버는 REST API 만 제공해주는 것으로 역할이 축소가 되고 있다. 프런트엔드는 리액트, 뷰, 앵규러와 같은 SPA 프레임웍으로 만들고 백엔드는 REST API를 통해서 데이터만 가져오는 방식이 요즘의 MSA 아키텍처에 맞는 구조로 진화하고 있다.

여기서 가정하는 UI 시나리오는 게시판과 댓글이다. 게시판과 댓글을 구현하기 위해서 DB 설계를 하고 REST api를 개발하고 리액트로 화면을 개발하게 된다.

그 후에 인증과 권한을 추가하고 백엔드에서는 REST api 를 추가하고 프런트는 로그인과 회원등록 화면을 추가한다.처음에는 사용자 정보가 매핑되지 않는 익명 게시판이였지만 사용자 정보가 추가된 게시판과 댓글로 확장한다.

Fullstack 개발환경 설정

프런트엔드 개발툴 - Webstorm 프런트엔드 개발환경 설정은 여기를 참고하자. 백엔드 개발툴 - IDEA 개발툴은 무료툴인 eclipse 보다 http://www.jetbrains.com 에 intelliJ IDEA를

Read more ...

Http와 REST의 이해

프로토콜이란 양자간에 미리 정한 약속, 규약이다. A 가 “아”라고 보내면 B 는 그것을 “아버지”로 이해하도록 약속을 정했다면 그것이 바로 프로토콜이다.

Read more ...

DB 구축 – DataGrip 사용법

먼저 docker에 mariadb를 구축하고 datagrip 툴을 사용해서 테이블 생성과 CRUD를 해보겠다. datagrip 툴을 사용해도 되고 idea ultimate 버전이 있다면 shift

Read more ...

Spring으로 REST API 만들기

Spring MVC 구조에서 REST 를 지원하기 위해서 기존 @Controller 어노테이션에 @RestController 이라는 어노테이션이 추가되었다. @Controller 어노테이션은 View를 리턴해야 했어나, @RestController

Read more ...

NodeJS 로 REST API 만들기

NodeJS로 REST API를 만드는건 좋은 선택이 아니였다. 왜냐하면 spring의 JPA 같은 ORM or MyBatis 같은 ORM이 없었기 때문에 객체를 쿼리문으로

Read more ...

화면 구현 1

앞에서 스프링과 노드로 REST API를 만들어보았아. 만들어진 REST api를 가지고 이제 화면을 만들어보자. 프로그램 완성도를 높이기 위한 에러처리라든가 예외처리 테스트

Read more ...

화면 구현 2

화면 구현 1에서는 bootstrap을 사용하였다. 화면 구현 1과 동일한데 CSS 프레임웍을 bootstrap 대신 Ant Design을 사용하였다. bootstrap은 CSS3 의 flex

Read more ...

Comments are closed.