FrontEnd 개발 환경 개념
개요
최근 프로젝트를 진행하며 React와 Typescript를 사용하였다. 나의 개발 환경에 대해 프레임워크와 라이브러리, 런서버 환경 등에 대해 개념이 모호하여 이번 기회에 정리하기로 마음먹었다.
사실 Node.js와 Next.js가 비슷한 개념인줄 알아서 글을 쓰게 됨
프로그래밍 언어
: 컴퓨터 프로그램을 작성하기 위해 사용하는 언어
JavaScript
- 웹 개발에서 널리 사용되는 스크립트 언어
- 주로 클라이언트 사이드에서 동작함
TypeScript
- JavaScript의 슈퍼셋 언어
- 정적 타임 시스템을 추가하여 JavaScript 코드의 오류를 방지함
Python
- 읽고 쓰기 쉬운 문법을 가진 프로그래밍 언어.
- 웹 개발, 데이터 분석, 인공지능 등 다양한 분야에서 사용됨
런타임 환경
: 특정 프로그래밍 언어로 작성된 코드를 실행할 수 있는 환경
node.js
- JavaScript를 브라우저 외부에서 실행할 수 있게 해주는 런타임 환경.
- 주로 서버 사이드 애플리케이션 개발에 사용됨
라이브러리
: 특정 기능을 쉽게 구현할 수 있도록 미리 작성된 코드의 집합
React
- 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리
- 컴포넌트 기반 UI 설계가 가능함
ESLint
- TypeScript 코드를 검사해주는 라이브러리
- 코드 품질을 유지하기 위해 사용하는 정적 코드 분석 도구
프레임워크
: 특정 애플리케이션이나 서비스 개발을 위한 뼈대 구조를 제공하는 소프트웨어
Next.js
- React 기반의 프레임워크
- 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원하여 검색 엔진 최적화(SEO)에 최적화
Django
- Python 기반의 웹 프레임워크
- 강력한 ORM, 관리자 페이지, 인증 시스템을 기본으로 제공하여 빠르고 효율적인 개발 지원
Vue.js
- JavaScript 프레임워크
- HTML, JavaScript, CSS를 한 파일에 통합하여 단일 파일 컴포넌트를 지원
이렇게 런타임 환경, 프로그래밍 언어, 라이브러리, 프레임워크에 대해 정리해보았다.
최근 프로젝트의 개발 환경
저번 프로젝트 에서는 Vue+JavaScript & Django+Python를 사용하였고,
이번 프로젝트 에서는 React+TypeScript+Tailwind CSS & Spring+Java+JPA를 사용하였다.
특히 최근 프로젝트에서는 frontend로 참여하며 여러 항목을 사용했는데, 이것들을 나열하며 글을 끝내겠다.
React, TypeScript, Tailwind CSS(CSS 프레임워크), Storybook(UI 컴포넌트 개발을 위한 도구), Recoil(상태 관리 라이브러리), React Query(서버 상태 관리 라이브러리), axios(HTTP 클라이언트 라이브러리), yarn(패키지 매니저), Vite(빌드 도구 및 개발 서버), Node.js를 사용하여 개발에 참여하였다!