Tech Stack

✨ Visualization

[기술스택 시각화 이미지]

✨ Backend Tech Stack

OpenJdk 11

• Java 애플리케이션 구축을 위해서 JDK(Java Development Kit)가 필수적인데 JDK에는 Oracle JDK와 OpenJDK가 있다.
• 오라클의 라이선스 체계가 변경되면서 2019년 1월 이후로는 Oracle JDK를 무료로 사용할 수 없고, OpenJDK만 무료로 사용 가능하다.
  • 참고
    • LINE의 OpenJDK 적용기: 호환성 확인부터 주의 사항까지
    • OpenJDK 적용하고 벌써 1년, 뭐가 달라졌을까? | 라인개발실록
    • Java 11의 특징

Gradle

• Gradle은 빌드를 xml로 정의하는 Maven과 달리 Groovy 언어로 정의하여 문서의 양이 줄어들게 되고 빌드 속도도 Maven보다 Gradle이 더 빠르다. 자바 빌드도구로 Gradle보다 Maven에 더 익숙하지만 점점 Gradle도 많이 사용하는 추세이므로 배우면서 적용해보려고 한다.

Spring Boot 2.5.3

• 스프링 프레임워크는 객체 지향 프로그래밍 언어인 자바의 특성을 잘 살려주는 프레임워크이다. 스프링부트는 기본적으로 tomcat이 내장되어 있고 스프링과 외부 라이브러리를 자동적으로 구성해주므로 보다 빠른 개발을 가능하게 한다.

Spring Rest Docs

• Swagger는 간편하게 적용할 수 있고 API를 테스트할 수 있지만, 서비스 코드에 Swagger 관련 어노테이션을 추가해줘야 하고 문서만으로 연동 시스템을 만들기 어렵다.
• 이에 반해 Spring Rest Docs는 처음에는 적용하기 어렵고 테스트 코드를 반드시 작성해야 하지만, 서비스 코드에 영향을 주지 않고 API를 자동으로 문서화할 수 있다.
• TDD를 공부하며 테스트 코드를 작성할 계획이며 자동화를 지향하므로 Spring Rest Docs를 사용하기로 결정했다.

MariaDB 10.4.13

• 우리 프로젝트의 특징상 프로젝트 구텐베르크에 새로운 책이 업로드될 때마다 우리 쪽 DB에도 데이터가 저장이 되어야 한다. 프로젝트 구텐베르크로부터 가져올 데이터 구조가 명확하므로 데이터 무결성을 보장하고 데이터를 중복없이 한번만 저장할 수 있는 RDBMS를 선택했다.
• NoSQL은 대용량 데이터의 읽기에 유리하지만, 우리 프로젝트에서 특히 책 번역문 테이블은 수정이 자주 일어나고 회원 테이블, 책 정보 테이블, 책 원문 테이블, 책 번역문 테이블 등 관계를 맺고 있는 부분이 많아서 조인 연산이 가능한 RDBMS가 더 적합하다.
• PostgreSQL은 UPDATE를 할 때 과거 행을 삭제하고 INSERT처럼 변경된 데이터를 가진 새로운 행을 추가하는 형태라서 UPDATE문이 느리다.
• 오픈소스 RDBMS 중에서 단순 쿼리 처리 성능은 MySQL이 뛰어나며, MariaDB은 MySQL에서 파생된 데이터베이스이므로 전반적으로 MySQL과 유사하다. 또 동일한 하드웨어 사양으로 MySQL보다 향상된 성능, 좀 더 활성화된 커뮤니티, 다양한 기능, 다양한 스토리지 엔진 측면에서 장점을 가진다
  • 참고 : MySQL에서 MariaDB로 마이그레이션 해야 할 10가지 이유

Spring Data JPA

• SQL Mapper는 자바 코드로부터 SQL을 xml로 분리해준다. SQL문을 그대로 사용하여 복잡한 쿼리를 작성할 때는 편리하지만, RDBMS에 종속적이며 자바 클래스와 DB 테이블이 강하게 연결되어 있어서 유지보수성이 떨어진다. 대표적인 SQL Mapper로 MyBatis가 있다.
• ORM은 SQL문을 작성하지 않고 RDBMS를 조작하게 해준다. 복잡한 SQL문을 처리할 때는 상대적으로 어려움이 있지만, 객체 지향적인 특성을 보다 더 살려서 SQL에 의존적인 개발을 극복하게 해주고 RDBMS로부터 독립적이며 유지보수시 보다 용이하다.
• 간단한 CRUD에는 SQL Mapper보다 ORM이 유리하며 우리 프로젝트에서 대부분의 쿼리문은 ORM으로 다룰 수 있을 것으로 생각되므로 ORM을 사용하고자 한다.
  • 따라서 자바 진영의 ORM 기술 표준인 JPA를 사용할 것이며, 스프링에서 제공하는 모듈 중 하나인 Spring Data JPA를 사용할 것이다.

AWS (Dev Server)

• 대표적인 클라우드 서비스 제공사로 AWS, Microsoft Azure, GCP가 있는데, 업계에서는 AWS가 가장 점유율이 높다.
• AWS는 신규 고객에게 1년 동안 무료로 프리티어를 제공하고 현재 재직 중인 회사에서도 AWS를 사용하고 있으며 스스로 AWS 서버를 구축하고 실습해보고 싶어서 선택했다.

Nginx (Dev Server)

• 웹 서버, 리버스 프록시, 캐싱, 로드 밸런싱, 미디어 스트리밍 등을 위한 오픈소스 소프트웨어
  • 리버스 프록시 : 요청을 전달하고 실제 요청에 대한 처리는 뒷단의 웹 애플리케이션 서버들이 처리함
• 고성능 웹서버로, 예전에는 Apache가 대세였으나 현재는 대부분 서비스들이 Enginx를 사용한다.

Travis CI (Dev Server)

• 오픈소스 CI/CD 솔루션으로 Jenkins와 Travis CI 중에서 고민하다가 Travis CI를 사용하기로 했다.
  • Jenkins는 플러그인의 종류가 다양하고 모든 부분을 직접 관리할 수 있지만 서버 운영 비용이 따로 발생한다.
  • 우리 프로젝트는 규모가 작은 프로젝트에 해당되므로 Jenkins에 비해 플러그인 종류는 적지만 직접 서버를 운영할 필요가 없는 Travis CI를 사용해보려고 한다.

Heroku / Netlify (Prod Server)

• Heroku
  • AWS 프리티어는 1년까지만 무료지만, Heroku는 한 계정당 5개의 앱을 무료로 호스팅할 수 있다. 따라서 호스팅을 오래 두고 가져가는 것을 감안하여 AWS는 개발 서버로 사용하고 Heroku는 실제 운영 서버로 사용하려고 한다.
  • AWS EC2는 IaaS이지만 Heroku는 PaaS라서 배포가 더 간편하다.
• Netlify
  • Heroku와 마찬가지로 배포 자동화 기능을 갖춘 호스팅 서비스
  • Heroku가 주로 서버측 애플리케이션을 호스팅한다면, Netlify는 프론트엔드 쪽 정적 웹사이트를 호스팅한다.
  • 몇 시간 동안 요청이 없으면 수면 상태로 전환되어 초기 접속이 느려지는 Heroku와 달리 바로 접속이 잘 된다.

✨ Frontend Tech Stack

React.js 17.0.2

Node.js 14.17.1

• Node.js는 확장성 있는 네트워크 애플리케이션 개발에 사용되는 소프트웨어 플랫폼으로, 작성 언어로 자바스크립트를 활용하며 논블로킹(Non-blocking) I/O와 단일 스레드 이벤트 루프를 통한 높은 처리 성능을 가지고 있다.
• 내장 HTTP 서버 라이브러리를 포함하고 있어 웹 서버에서 아파치 등의 별도의 소프트웨어 없이 동작하는 것이 가능하며 이를 통해 웹 서버의 동작에 있어 더 많은 통제를 가능케 한다. 파이썬으로 만든 트위스티드, 펄로 만든 펄 객체 환경, 루비로 만든 이벤트 머신과 그 용도가 비슷하다.
• 대부분의 자바스크립트가 웹 브라우저에서 실행되는 것과는 달리 서버 측에서 실행된다.

npm 6.14.13

• npm (노드 패키지 매니저/Node Package Manager)은 자바스크립트 프로그래밍 언어를 위한 패키지 관리자이며, 자바스크립트 런타임 환경 Node.js의 기본 패키지 관리자이다.
• 이 레지스트리는 클라이언트를 통해 접근되며 사용 가능한 패키지들은 npm 웹사이트를 통해 찾아보고 검색할 수 있다.
  • 참고: npm 웹사이트
  • 패키지 관리자와 레지스트리는 npm사에 의해 관리된다.

yarn

• 이번 프로젝트에는 사용하지 않았지만 npm대신 사용할 수 있는 또 다른 패키지 관리자이다. yarn은 npm을 대체할 수 있는 도구로 npm보다 더 빠르며 효율적인 캐시 시스템과 기타 부가 기능을 제공한다.

create-react-app 4.0.3

• 리액트 프로젝트를 생성할 때 필요한 Webpack, Babel 설치 및 설정 과정을 생략하고 바로 간편하게 프로젝트 작업 환경을 구축해 주는 도구로, 추후 커스터마이징으로 설정을 자유롭게 변경할 수도 있다.

Next.js

• Next.js 프레임워크는 프론트엔드와 백엔드를 구분하고 백엔드 API와 독립적인 효율적인 프론트엔드 개발을 허용하는 JAMstack아키텍처를 활용한다.
  • JAMstack : 클라이언트 측 JavaScript 코드, 재사용 가능한 API 및 마크업 콘텐츠를 기반으로 하는 클라우드 네이티브 웹개발 아키텍처
• 공통 CSS와 사전 컴파일된 Scss 및 Sass, CSS-in-JS 및 스타일이 지정된 JSX를 지원하며, TypeScript 지원 및 스마트 번들링으로 빌드된다.
  • 스마트 번들링 : 레거시 브라우저에만 레거시 코드를 제공하는 방법
• Next.js의 주요 기능은 서버 측 렌더링을 사용하여 웹 브라우저의 부담을 줄이고 향상된 보안을 제공하는 것인데, 이는 응용 프로그램의 모든 부분 또는 전체 프로젝트에 대해 수행할 수 있으므로 콘텐츠가 풍부한 페이지를 서버 측 렌더링을 위해 선별할 수 있다.
  • 개발자 편의를 위해 페이지 기반 라우팅을 사용하며 동적 라우팅 지원을 포함한다.
    • 참고 : Next.js 제대로 알고 쓰자

Webpack

• 의존 관계에 있는 모듈들을 하나의 자바스크립트 파일로 번들링하는 모듈 번들러이다. Webpack을 사용하면 의존 모듈이 하나의 파일로 번들링되므로 별도의 모듈 로더가 필요없다. 그리고 다수의 자바스크립트 파일을 하나의 파일로 번들링하므로 html 파일에서 script 태그로 다수의 자바스크립트 파일을 로드해야 하는 번거로움도 사라진다.

Babel

• 최신 사양의 자바스크립트 코드를 IE나 구형 브라우저에서도 동작하는 ES5 이하의 코드로 변환(트랜스파일링)할 수 있다.
  • 참고 : Babel과 Webpack을 이용한 ES6 환경 구축

ESLint

• 자바스크립트 문법 및 코드 스타일을 검사해 주는 도구이다.
• 코드를 작성할 때 실수를 하면 에러 혹은 경고 메시지를 VS Code 에디터에서 바로 확인할 수 있게 해준다.

Reactjs Code Snippets

• 리액트 컴포넌트 및 라이프사이클 함수를 작성할 때 단축 단어를 사용하여 간편하게 코드를 자동으로 생성해 낼 수 있는 코드 스니펫 모음이다.

Prettier-Code formatter

• 코드 스타일을 자동으로 정리해 주는 도구이다.
• 코딩 관습의 차이로 발생하는 각자의 다양한 스타일을 쉽게 커스터마이징할 수 있다는 장점이 있다.
  • 참고 : Prettier Options 페이지

Redux

• 추후^^

TypeScript

• 정적 타입 언어(자바, C, 타입스크립트) vs 동적 타입 언어(자바스크립트, 파이썬)