웹 프론트엔드 개발 프레임워크, 플러그인, 툴 정리

웹 프론트엔드를 개발할 때 알아두면 좋을 라이브러리와 툴을 정리했습니다.

개인적으로 사용하려고 정리한 글입니다.

 

v1.0: 게시물 처음 작성

v1.1: Styled Components, CSS Module, Tailwind CSS, Next.js 추가

 

Languages, Scripts

HTML

문서의 구조를 설명하기 위한 마크업 언어

 

CSS

문서의 스타일을 작성할 수 있는 언어

예를 들면 글자의 크기, 모양, 색상 등과 같은 스타일을 설정할 수 있음

https://developer.mozilla.org/ko/docs/Web/CSS

CSS: Cascading Style Sheets | MDN

 

EcmaScript (구 JavaScript)

서버, 클라이언트 등 개발에서 많이 사용하는 스크립트형 언어

표현하자면 안드로이드 개발의 Java & Kotlin, 유니티 개발의 C#, iOS 개발의 Swift와 같은 느낌

 

JSX

EcmaScript를 확장하여 XML과 같은 형태로 사용할 수 있게 해주는 문법

https://ko.reactjs.org/docs/introducing-jsx.html

JSX 소개 – React

 

JSON

EcmaScript의 데이터를 표현하기 위한 포맷

주로 설정값, 데이터 덩어리 등에 쓰임

 

 

 

Frameworks

React.js

컴포넌트 조합으로 UI를 조립하듯이 만들 수 있게 해주는 Frameworks

ReactNative, ReactWeb 등을 통해 다양한 OS 환경에서 사용할 수 있어서 좋음

https://ko.reactjs.org/

React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

https://beta.reactjs.org/

React Docs Beta

 

Node.js

EcmaScript를 런타임 라이브러리

특히 서버에서 많이 쓰임

https://nodejs.org/ko/

Node.js

 

NPM

EcmaScript의 패키지를 관래히주는 라이브러리

리눅스로 치면 apt 명령어, 맥으로 치면 brew 명령어와 비슷한 느낌

https://www.npmjs.com/

npm

 

SASS

CSS를 쉽게 작성할 수 있도록 도와주는 전처리기

CSS를 프로그래밍하듯이 작성할 수 있음

예를 들면 CSS에서는 사용하기 어려운 반복문을 SASS에서는 가능함

https://sass-lang.com/

Sass: Syntactically Awesome Style Sheets

 

webpack

작성한 코드를 압축시켜서 간단한 코드로 만들어주는 라이브러리

예를 들면 최종 빌드할 때 여러개의 파일을 다 합쳐서 하나의 파일로 만듦

Live-Server처럼 간단한 프론트엔드 개발용 서버도 만들 수 있음

https://webpack.kr/

webpack

 

Babel

최신 EcmaScript 코드를 구버전 코드로 변환시켜주는 라이브러리

업데이트 하지 않아서 오래된 브라우저는 최신 EcmaScript를 인식할 수 없기 때문에 호환성 측면에서 변환이 필요하다.

 

Styled Components

EcmaScript 환경에서 바로 CSS를 작성할 수 있도록 도와주는 라이브러리

요즘 뜨고있는 "CSS in JS"의 방법 중 하나로 볼 수 있음

https://styled-components.com/

styled-components

 

CSS Module

EcmaScript에서 CSS 파일을 마치 하나의 Class처럼 import하여 사용할 수 있게 해주는 라이브러리

CSS 내부의 class 이름 충돌 방지에 좋다.

 

Next.js

React 개발 환경을 알아서 셋업해주는 라이브러리

이걸 쓰면 위에 webpack, TypoScript 등도 알아서 환경을 설정해 줌

https://nextjs.org/

Next.js by Vercel - The React Framework

 

 

 

Tools, Plugins

Visual Studio Code

다양한 플러그인을 통해 개발환경을 원하는대로 커스터마이징할 수 있는 좋은 IDE

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

 

Emmet

자동완성을 통해 HTML, JSX 등을 빠르게 작성할 수 있게 도와주는 플러그인

VSCode에서 플러그인으로 사용할 수 있음

https://emmet.io/

Emmet — the essential toolkit for web-developers

 

Git

아마도 세상에서 가장 많이 쓰일 것으로 보이는 버전 관리 툴

협업할 때 좋음

VSCode에서 플러그인으로 사용할 수 있음

https://git-scm.com/

Git

 

ESLint

문법의 오류나 잠재적인 문제를 체크해주는 플러그인

VSCode에서 플러그인으로 사용할 수 있음

https://eslint.org/

Find and fix problems in your JavaScript code - ESLint - Pluggable JavaScript Linter

 

Live-Server

디렉토리 기반으로 서버를 빠르게 만들어주는 툴

코드가 변하면 변경사항도 알아서 파악함

 

CRA

React 개발 환경을 쉽게 만들어 주는 툴체인

 

Prettier

코드를 아름답게 정렬해주는 플러그인

VSCode에서 플러그인으로 사용할 수 있음

 

Tailwind CSS

미리 예쁘게 만들어진 CSS를 갖다 쓸 수 있는 사이트

https://tailwindcss.com/

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

 

 

 

마무리

내용을 계속해서 보완하고 추가하도록 하겠습니다. :)