[웹 개발] 시작 전 간단한 리서치

(리서치한 내용 + 이미 알고 있던 내용) -> 제가 이해한대로 작성해서 틀린 부분이 있을 수도 있다는 점 유의해주세요..!

---

최근에는 웹 개발을 위한 다양한 프레임워크이 많아 복잡해보이지만, 결국 웹은 크게 3가지 부분으로 나눠진다.

HTML	웹 페이지의 뼈대(구조)를 구성
JavaScript	페이지의 동작을 담당
CSS	페이지를 더 보기 좋도록 스타일을 추가

 

오랜만에 웹 개발 다시 시작해서 너무 설렌다! 가보자고~~

---

Basic

라이브러리 설치

npm

js 라이브러리 관리를 도와주는 패키지 매니저로, 라이브러리의 설치나 수정, 삭제와 같은 관리가 쉬워진다.

node.js 설치 시 함께 설치된다.

// 패키지 설치
npm install 모시깽
// 패키지 수정
npm update 모시깽
// 패키지 삭제
npm uninstall 모시깽

 

자바스크립트 실행 엔진

node.js

open-source, cross-platform JavaScript runtime environment로

웹 브라우저 안에서만 동작하는 자바스크립트 코드를 브라우저 없이 바로 PC 아무데서나 실행할 수 있게 도와준다.

// js 파일 실행
node index.js

 

Web-Frontend

Build

npm run build

번들링툴 이용해서 js 파일 하나로 합치는 작업을 진행하고, assets 폴더 안에 있는 내용을 서버에 올리면 끝!

 

Bundling tool

npm으로 설치한 라이브러리는 node_modules라는 폴더에 추가가 되며, 아래처럼 코드를 작성하여 필요한 컴포넌트를 쓸 수 있다.

// 다른 자바스크립트 파일을 가져오는 문법
import * as 모시깽 from 모시깽이

 

다만 이렇게 다른 파일을 가져다가 쓰면 파일 구조가 복잡해질 수 있다.

이때 building tool을 사용하여 js 파일들을 하나로 합쳐주면 나중에 배포가 쉬워진다.

또한 js 라이브러리의 용량을 줄여주는 효과도 있다.

• 예시
  • 쉬움: turbopack, vite
  • 공부 필요: rollup.js, webpack, parcel
• 장점
  • 안 쓰는 함수 변수 제거 (용량 축소 가능)
  • .ts .vue .jsx 등으로 개발한 파일을 .js로 변환
  • 최신 문법을 호환성 좋게 변환

 

SPA (js 라이브러리)

웹 개발할 때 뭐 써야 하나요? 할 때 다루는 게 주로 이 부분이다. 리액트, 앵귤러, 뷰 등 여러 프레임워크가 있고, 각각의 장단점이 있어서 현재 프로젝트에 맞는 프레임워크를 신중하게 결정해야 한다.

SPA는 Single Page Application의 준말로, 주로 한 페이지 안에서 모든 작업이 이루어지기 때문에 새로고침 없이 부드러운 페이지를 만들 때 사용한다.

 

렌더링 방식에도 차이가 있는데, SPA는 client side rendering을 지원한다. 즉, client에서 html을 생성하므로 자바스크립트를 이용한 html 조작이 편리해지며, 구조 변경이 매우 쉬워진다는 장점이 있다.반대의 개념으로는 server side rendering이 있는데, 오래 전부터 쓰이던 방식이었지만 로드 및 처리 속도가 빨라 다시 주목되고 있다. html을 서버에서 만들어서 client에서는 그냥 띄워주기만 한다.

SPA 프레임워크는 단점 또한 존재하는데, 한 페이지에서 작업을 하는 만큼 첫 페이지의 로딩 시간이 길어지기도 한다. 그리고 내용을 동적으로 생성하기 때문에 metadata 등의 정보 접근이 어려워 구글 검색 결과에 페이지의 노출이 어렵다(SEO). 페이지에서 사용되는 수많은 변수 관리(state management) 또한 어려운데, 이는 이를 해결하는 외부 라이브러리를 이용해여 해결할 수 있다. 예시로는 redux, recoil, mobx, zustand, jotai 등이 있다.

 

React

One Job: Render & Update UI

• No Routing - client slide routing 라이브러리를 쓰거나 직접 구현해야 함
• Next.js 등…
• Syntax: js function, react hooks(data)
• 레퍼런스가 많고 연결할 모듈이 다양함

Angular

Batteries Included - many crucial features / solutions 포함

• Routing 있음 + 다른 패키지도 (by angular team)
• Analog.js 등…
• Syntax: class, decorator & extra template files

Vue

(React + Angular) / 2

• NuxtJS 등…
• Syntax: separate file (format) - components, style → function/class 작성 없이 파일로 구분
• 자유도가 떨어짐

Svelte, SolideJS

Smaller libraries

 

인기순(실제 사용자): React(압도적) > Angular > Vue > Svelte > SolidJS

Performance: 큰 차이 없이 다 잘 작동함

배우기 쉬운 정도: Vue(시작하기 쉬움) > Angular(시작하기 어려움) > React(시작하기는 쉽지만, ...)

 

Meta-framework

Next.js, NuxtJS, Remix, SvelteKit 등이 있으며, 자바스크립트 문법으로 풀스택 개발 및 server side rendering이 가능하여 최근 많은 관심이 쏠리고 있다.

 

Typescript

javaScript는 코드 작성 시 변수의 타입이 달라도 그냥 넘어가는데, 이렇게 넘어간 부분이 추후 큰 문제가 될 가능성이 크다.

typeScript는 타입 기능이 업그레이드 된 자바스크립트로, 이러한 부분을 잡아주는 역할을 한다.

typeScript로 작성한 파일은 .ts 확장자를 가지며, 나중에 bundling tool을 이용해 .js로 변환해야 하는 과정이 필요하다.

 

기타

Flutter

웹에 대한 지식이 별로 없는 경우에도 개발하기 편하므로, 복잡한 기능 없이 그냥 내용을 보여주는 용도라면 Flutter도 나쁘지 않다.

다만 metadata를 잘 만들지 않는 이상 SEO가 안되고, 페이지를 canvas로 그리는 방식이기 때문에 글자가 텍스트로 인식되지 않아 드래그가 불가능하다. 이를 가능하게 하는 위젯이 있긴 하지만, 디자인적으로 별로라고 한다.

 

워드프레스

사실 워드프레스로 만든 웹페이지가 있는데, 여기서 회원가입 및 결제 시스템을 넣으려니 복잡하기도 하고 다른 서버랑 연결하는 것도 어려워 아예 웹 페이지를 새로 개발하기로 했다. 여러 플러그인을 지원하기는 하는데, 플러그인의 사용료가 있기도 하고 플러그인마다 사용 방법도 달라 러닝커브가 웹 개발보다 오히려 높은 느낌...

 

Web-Backend

Server

Node.js (javaScript) - Express

가볍고 빠른 웹 서버 구축에 적합하다. 개발 자유도가 높고 라이브러리를 자유롭게 사용할 수 있다. 다만 해당 프로젝트에 호환되는 라이브러리 버전과 같은 스펙은 직접 매치해야 하며, 하나의 프로젝트를 여러 명이 개발하는 경우에는 유지보수에 어려움이 있을 수 있다.

일반적으로 많이 사용되는 언어라 자료가 많다.

 

NestJS (typeScript)

대규모 프로젝트에 적합하며, 많은 기능이 프레임워크 자체에 포함되어 있다. 다만, spring을 써보지 않았다면 러닝 커브가 높을 수 있다.

 

Spring (Java)

마찬가지로 기능 및 안정성이 높아 대규모 프로젝트에 적합하다. 다만, 구조가 무겁고 복잡하며 러닝 커브가 높다.

 

Flask (Python)

가볍고 유연하여 작은 규모의 프로젝트에 적합하다. 큰 규모의 프로젝트에는 제한이 있을 수 있어 프로토타입용으로 사용하기 좋다.

 

Django (Python)

기본적으로 지원되는 템플릿이 있어 import만 시켜주면 간단하게 화면을 구현할 수 있다. 다만 데이터베이스를 건드릴 때마다 마이그레이션을 해줘야 하며 디버깅이 어렵다.

 

Ruby On Rails (Ruby)

우...

 

DataBase

MySQL (SQL)

SQL 테이블 형태로 저장되며 SQL을 사용한다. 데이터의 무결성을 보장해준다는 장점이 있지만, 한번 DB를 구축하면 구조를 수정하기 힘들기 때문에 스키마를 사전에 제대로 기획하고 사용해야 한다. 데이터가 자주 수정되는 애플리케이션에 적합하다.

 

MongoDB (NoSQL)

Json 형태로 저장되며, javaScript를 사용한다. SQL보다 유연하다는 장점이 있으며, 데이터를 애플리케이션이 원하는 형식으로 저장하기 대문에 데이터의 읽기 및 쓰기 속도가 상대적으로 빠르다. 읽기 처리를 자주 하고 데이터를 자주 수정하지 않는 애플리케이션에 적합하다.

 

Secure Coding (Express 기준)

Validator

사용자 입력 검증 시 사용

 

Bcrypt

데이터 암호화 시 사용하며, DB에는 암호화된 비밀번호가 저장됨

 

Helmet

Express 보안 모듈

 

기타

• 사용자 정의 에러 페이지(4xx, 5xx): DBMS 쿼리 정보나 소스의 오류에 해당하는 코드가 노출될 가능성이 있음
• 쿠키 보안 설정
• 포트 숨기기 / 패킷 공격 막기
• 개인정보 보호 관련 정책
• 서버 과부화 테스트
• 테스트 코드 작성

 

결론

여러 옵션의 장단점을 비교한 결과, 우리는 React(Next.js) - Express(node.js) - MongoDB(AWS ORM)으로 개발을 하기로 결정했다.