크래프톤정글10주차 - 기술 선택

김태성·2024년 4월 8일

크래프톤정글 4기 개발일지

목록 보기

42/43

나만의 무기 만들기 프로젝트에 앞서서, 자신이 공부하고 싶은 스택 중 하나를 선택해야 한다.
spring과 node.js는 다른 문서에서도 직접적으로 다루겠지만 이 글에서는 간단한 요약과 왜 사용하게 되었는지를 적는다.

사용 스택

front = react
back = spring
data = mariadb

사실상 프론트는 react 고정이고, back은 node.js와 spring 둘 중 하나 골라야 하며, data도 mysql과 nosql 둘 중 하나를 선택해야 한다.

Front

2023년 프론트앤드 사용순위 중 상위 5개 기술스택을 알아보고 간단한 정의와 장단점을 알아보자.

React
- 자바스크립트 라이브러리. 사용자 인터페이스를 만들기 위해서 사용됨.
- 페이스북과 여러 공동체에 의해 유지보수됨.
- 장점
  - 컴포넌트 구조를 사용하며 재사용성이 높음.
  - Virtual Dom으로 강력한 성능
  - Flux,Redux의 힘
  - React Native
  - 인구가 정말 많아서 커뮤니티 활성화가 잘됨
- 단점
  - 스타일링이 어려움. 정확하게 말하면 초보 개발자에게 진입장벽이 있음.
  - 기능이 부족함. 라우팅, 서버 통신, 상태관리 등은 외부 기능을 필요.
요약 : 초반 진입장벽만 넘으면 범용성이 좋은 라이브러리. 하지만 리액트만 가지고 서버를 운영하는건 쉽지 않다.

Angular (처음 들어봄)
- 타입스크립트 기반 오픈소스 프론트엔드 웹 에플리케이션 프레임워크
- 구글, 앵귤러 팀과 여러 개발자에 의해 관리
- 규모가 크고 다양한 기능을 가진 프로젝트에 적합
- 장점
  - 프레임워크라서 설계가 필요하지 않음.
  - 양방향 바인딩 개념을 사용해서 한쪽 데이터 값이 변하면 반대쪽도 변함.
  - 어려운데 기능이 많음(웹,모바일 프로젝트의 생성, 테스트, 빌드, 배포, 패키징, 라우팅 등등..)
  - 웹 개발 내용을 앱에도 사용할 수 있어서 범용성이 좋음.
  - spa 개발을 위한 프레임워크
- 단점
  - 기능이 너무 많아서 공부할 내용이 많음.
  - spa 특성상 로딩에 시간이 오래 걸림.
  - 크롤링이 어려움(javascript 실행이 되지 않은 내용을 긁어감)
요약 : spa기반의 대규모 프로젝트에 사용되는 프레임워크이며 숙련되면 좋지만 소규모 프로젝트는 좀 아쉽다.
Vue.js
- 오픈소스 프로그래시브 자바스크립트 프레임워크(근데 library인지 framework인지 서로 싸움. 위키는 라이브러리라고 적어놓음.)
- Evan You에 의해 개발됨
- 고성능 spa을 구축하는데 이용가능함
- 장점:
  - 직관적 api, 간결한 문법으로 배우기 쉬움
  - 가상돔 사용
  - 컴포넌트 기반 아키텍쳐
  - 양방향 데이터 바인딩
  - 유연성, 점진적 사용
- 단점:
  - Angular, React가 너무 커서 vue의 인구가 적음
  - javascript 번들의 크기가 큼
  - 상대적으로 새로 나온 기술이라 지원 기업이 적음.(그래도 네카라쿠베는 씀)
  - 테스트가 어렵고 재구조화가 쉽지않음.
요약 : 쉽게 접근할 수 있고 성능도 좋지만 새로나온거라 잘 모른다. 사람도 적다.

Svelte (이거도 처음 들어봄)
- 컴포넌트 기반 웹 프레임워크.
- Rich Harris가 만들었고, Svelte core 팀이 관리함.
- 장점
  - 코드가 정말 짧음
  - 가상돔 없이 돔을 가볍게 사용
  - 반응성이 좋음
- 단점
  - 빌드가 느림
요약 : Svelt도 Vue와 같이 생긴지 얼마 안되서 사람도 적은거 같음.

Next.js
- node.js 위에 빌드된 오픈소스 웹 개발 프레임워크
- 오픈소스 커뮤니티에서 만들었음.
- 장점
  - 서버 사이드 렌더링 지원(SSR)
  - 정적 사이트 생성(SSG) -> 정적 콘텐츠가 자주 변경되지 않으면 유용함
  - 파일 시스템 기반의 라우팅을 사용, 편리함
  - 데이터 가져오기 기능
  - 배포 옵션이 다양함
- 단점
  - 초기 학습 곡선
  - 규모가 커질수록 구성, 설정이 복잡해짐
  - SSR을 사용할때 서버 비용이 증가함
  - React에 의존함
  - 소켓 쓸려면 서버 하나 더 만들어야됨
요약 : React 사용할때 SSR과 라우팅을 사용하기 위해서 사용하는 프레임워크

위와 같이 5개의 프론트 엔드 기술을 알아봤다.
우리가 React를 사용해야 하는 이유를 간단히 생각해보면

어차피 spa는 생각도 안할꺼고(Angular, Vue x)
주류인 기술을 사용하고 싶고(Svelte, Next x)
컴포넌트, virtual dom의 기능을 학습하며
서버의 기능을 프론트에서 가져가지 않는(라우팅, 서버통신 등)

React를 사용한다고 본다.
물론 그냥 아무생각없이 React 쓰세요 라고 했을수 있긴한데
나머지 프레임워크/라이브러리를 살펴보니까 쓸만하다.

Back

크게 2가지, spring과 node.js를 비교해보자.

Spring
- 자바 플랫폼을 위한 오픈 소스 애플리케이션 프레임워크
- 동적 웹 사이트 개발을 위한 여러가지 서비스 제공
- 한국에서는 공공기관 웹 서비스 개발시 권장하고 있는 전자정부 표준프레임워크
- 특징
  - POJO 기반의 구성
  - IOC 지원
  - DI 지원
  - AOP 지원
  - 트랜잭션 지원
- 장점
  - 높은 확장성
  - 모듈을 조립하며 기능 구현이 쉬움
  - 유지보수가 편리하다
  - 기능 단위 테스트가 용이함
- 단점
  - 스프링이 구현해 놓은걸 사용하면 코딩실력이 떨어짐
  - 무거움
  - 배우는데 오래 걸림
요약 : 크고 무겁지만 체계적이며 유지보수가 편리함. 큰 프로젝트나 기업이 사용하기 좋음.

node.js
- javascript 런타임 환경(V8 엔진, 웹 브라우저 밖에서 javascript 실행가능)
- 특징
  - 이벤트 기반(클릭같은거)
  - 논블로킹 I/O 모델
  - 싱글 스레드
- 장점
  - 멀티 스레드에 비해서 자원을 적게 먹음
  - I/O 작업이 많은 서버로 적합
  - 웹 서버가 내장되어 있음
- 단점
  - cpu 작업이 많은 서버로는 적합하지 않음
  - 스레드가 하나라서 멈추면 서버도 멈춤
  - 서버가 커지면 관리하기 힘듬
요약 : 작은 서버를 빠르고 효율적으로 돌릴 수 있음.

결론
이번 프로젝트에서 나는 spring 를 사용할 것이다. 그이유는

많은 기업들이 spring을 사용하고 있다.
또한 체계적이고 확장성이 높은 프로그램 개발을 위해서는 spring이 필수적이다.
java 언어를 배우고 싶다.
유지보수가 편리하다.

Data

MySQL (RDBMS에 대한 설명을 적음)
- 특징 (이건 mysql 내용)
  - 멀티스레드, 다중사용자, 구조화질의어
  - 다양한 언어를 지원
- 장점
  - 정해진 스키마를 따라가기 때문에 명확한 구조를 보장함
  - 각 데이터를 중복없이 한번만 저장
- 단점
  - 시스템이 커지면 쿼리가 복잡해짐
  - 스키마로 인해 데이터가 유연하지 못함
  - 성능향상을 위해서 scale-up만을 지원. 비용이 커질 수 있음
요약 : 많은 규약과 정해진 스키마로 데이터를 보장 할 수는 있지만 유연성이 떨어짐

MongoDB(no sql에 대한 설명을 적음)
- 특징
  - BSON 형식을 사용
- 장점
  - 스키마가 없어서 데이터 구조가 자유로움
  - 성능 향상을 위해서 scale-up과 scald-out도 지원
  - 방대한 데이터를 빠르게 처리 가능
- 단점
  - 데이터 중복이 발생 할 수 있음
  - 스키마가 없어서 데이터를 보장받을 수 없음
요약 : 데이터를 엄격하게 관리하지 않아도 되면 빠른 속도를 보장