React
vs Vanilla JavaScript
vs Angular
vs Vue
vs Svelte
CSS-in-JS
vs CSS module
CRA
vs Gatsby
vs Next.js
vs Remix
npm
vs Yarn
vs Yarn berry
React Testing Library
, Jest
GitHub Pages
vs Vercel
vs Netlify
vs Firebase
vs Heroku
vs Cloudflare
vs AWS
react-query
vs swr
Redux
vs Mobx
vs Recoil
가장 많이 사용되는 프론트엔드 라이브러리이다. 커뮤니티가 크기 때문에 에러에 대처하기가 비교적 쉽고, 사용할 수 있는 라이브러리가 많아 개발에 용이할 것이라 생각한다.
React는 Virtual DOM을 이용해 브라우저 렌더링 횟수를 줄여준다. 바닐라 자바스크립트와 달리 Virtual DOM 코드가 React에 이미 구현되어있기 때문에, 해당 코드에 신경쓰지 않아도 되는 장점도 있다. 컴포넌트 단위로 코드를 나누어 재사용할 수 있기 때문에, 유지보수를 하기에도 좋다.
Next.js, Gatsby, Remix와 같이 안정적이고 좋은 리액트 프레임워크가 있다는 점도 마음에 들었고, 최종적으로 React를 사용하기로 했다.
Angular
: 가장 먼저 나온 프론트엔드 프레임워크이다. 라우팅, 컴포넌트 라이브러리 등 대부분의 기능이 내부적으로 포함돼있다. 모든 게 구비되어 있다는 것이 장점이기도 하지만, 이는 그만큼 무겁고 커스터마이징하기 어렵다는 단점이 되기도 한다. 구글에서 개발한 프레임워크답게 스타일가이드도 제공한다. 잘만 익히면 좋은 점이 많을 것 같다고도 생각되나 React에는 없고 Angular에만 있는 기능이 있다던지 하는 특별한 장점들을 아직 찾지 못해서 지금으로썬 더 가벼운 React를 사용하는 게 좋을 것이라 판단했다.
Vue
: React에 비해 문법이 간단하고, 코드 양이 적다. 또한 통일된 방식을 사용함으로써 협업 시 불필요한 논쟁을 줄이고, 일관된 컨벤션을 지킬 수 있다. (e.g. 반복되는 HTML을 만들 때 React는 map, forEach, for문 등 다양한 방식으로 만들 수 있으나, Vue는 v-for라는 한 가지 방법만 사용할 수 있다.)
별도로 CSS-in-JS 라이브러리를 사용하지 않고도 .vue
파일에 자바스크립트와 CSS를 통합할 수 있다는 점도 깔끔하지만, 팀원 모두가 React에 익숙하기 때문에 React 대신 Vue를 사용할 큰 이유는 없다고 판단했다.
Svelte
: 가볍다. 라이브러리보다는 컴파일러에 가깝다. React는 브라우저에서 React 코드를 실행하지만, Svelte는 컴파일된 JS 파일만 실행하면 되기 때문에 바닐라 자바스크립트만큼 빠르다. 아직은 React의 Next.js 같은 안정적인 프레임워크가 없기도 하고, 순수 JavsScript가 아닌 자체적인 문법을 많이 사용하는 점은 JavaScript를 배우는 입장에서 도입하기에는 아쉬운 부분이라고 판단했다.
CSS Module 방식은 CSS를 .module.css
라는 확장자를 가진 파일에 작성하고, 이를 JavaScript 파일에서 import해 사용하는 방식이다.
그냥 CSS를 작성하는 방식과 달리 전역으로 클래스 이름이 중복될지 걱정할 필요 없이 각 파일 단위로 스타일을 관리할 수 있는 장점이 있다. VSCode 에디터를 사용한다면, CSS Modules 익스텐션을 설치하여 자동 완성 기능을 사용할 수 있다.
Build time에서 스타일을 CSS 파일로 컴파일해주기 때문에 런타임에서 동적으로 스타일을 생성하는 styled-components, emotion 같은 CSS-in-JS 라이브러리에 비해 성능적으로 좋다. zero-runtime으로 동작하는 linaria라는 CSS-in-JS 라이브러리도 있지만, 설정이 번거롭다는 단점이 있어 당장에 도입할 필요성을 느끼진 못했다.
성능적으로도 좋고, 당장에 CSS-in-JS를 도입해야 할 필요성을 느끼지 못했기 때문에 CSS Module 방식을 사용하는 것으로 결정했다.
반응형 디자인을 위한 Breakpoint 변수를 지정하고, 반복되는 스타일을 믹스인으로 작성해 중복을 제거하기 위해 모듈 방식에 Sass(SCSS)를 추가하여 사용 중이다.
그냥 CSS
: 가장 간단한 방식으로, 클래스 이름에 따라 스타일을 다르게 지정해주는 방식이다. 클래스명이 전역으로 적용되기 때문에 중복되는 클래스명을 생성하지 않아야 한다는 단점이 있다.