JavaScript, Node.js, Next.js, React 개념 정리

JavaScript

• 프로그래밍 언어로, 웹 브라우저에서 실행되는 스크립트 언어이며, 클라이언트 사이드 개발의 핵심 기술 중 하나
• 인터프리터 언어로, 코드를 실행할 때 한 줄씩 해석하여 실행
• 비동기 처리를 지원하며, 이벤트 루프를 이용하여 논블로킹 방식으로 동작함
• 다양한 라이브러리와 프레임워크(React, Vue, Angular 등)를 활용하여 효율적인 개발이 가능
• ES6(ECMAScript 2015) 이후 다양한 문법이 도입되었으며, 주요 기능은 다음과 같음:
  • let과 const: 블록 스코프 변수를 선언하는 방식
  • 화살표 함수 (=>): 간결한 함수 표현 방식으로 this 바인딩이 자동으로 이루어짐
  • 템플릿 리터럴: 백틱(`)을 사용하여 문자열을 동적으로 생성할 수 있음
  • 모듈 시스템 (import/export): 파일 간의 코드 재사용을 쉽게 할 수 있도록 지원
  • 비구조화 할당: 객체 또는 배열에서 특정 값만 추출할 수 있음

Node.js

• Chrome V8 JavaScript 엔진을 기반으로 서버 사이드에서 JavaScript를 실행할 수 있도록 개발된 런타임 환경
• 싱글 스레드 기반이지만, 논블로킹 I/O와 이벤트 루프를 활용하여 높은 처리량을 자랑함
• Express.js:
  • 가볍고 유연한 Node.js 웹 프레임워크로, RESTful API 및 웹 애플리케이션 개발을 간편하게 할 수 있음
  • 미들웨어 시스템을 지원하여 요청과 응답을 효과적으로 관리 가능
  • 라우팅 기능을 제공하여 다양한 URL 경로를 처리할 수 있음
• npm(Node Package Manager):
  • Node.js의 기본 패키지 관리자
  • 오픈소스 라이브러리를 쉽게 설치하고 관리할 수 있도록 지원
  • package.json 파일을 통해 프로젝트 의존성을 관리

React

• Facebook(현재 Meta)에서 개발한 UI 라이브러리로, 컴포넌트 기반의 구조를 가짐
• Virtual DOM을 활용하여 DOM 조작을 최소화하고 성능을 최적화
• 단방향 데이터 바인딩을 통해 예측 가능한 상태 관리를 지원함
• 주요 개념:
  • JSX: JavaScript에서 HTML과 유사한 구문을 사용하여 UI를 정의하는 방식
  • 컴포넌트 기반 개발:
    • UI를 독립적인 재사용 가능한 컴포넌트로 분리하여 유지보수성을 향상
    • props를 활용하여 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달
  • Hooks:
    • useState: 함수형 컴포넌트에서 상태를 관리할 수 있도록 지원
    • useEffect: 컴포넌트가 마운트/업데이트/언마운트될 때 특정 로직을 실행할 수 있도록 지원
    • useContext: 전역 상태를 쉽게 공유할 수 있도록 지원

Next.js

• React 기반의 프레임워크로, 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원하여 성능을 향상시킴
• 파일 기반 라우팅 시스템을 제공하여 직관적인 라우팅이 가능
• API Routes:
  • /pages/api/ 디렉터리 내에서 API 엔드포인트를 생성할 수 있음
  • 서버리스 함수 형태로 동작하며, 별도의 백엔드 서버 없이도 간단한 API를 구현 가능
  • 예를 들어 /pages/api/hello.js 파일을 생성하면 /api/hello 경로에서 API 요청을 처리할 수 있음
• 데이터 패칭 방법:
  • SSR (getServerSideProps): 요청이 있을 때마다 서버에서 데이터를 가져와 페이지를 렌더링
  • SSG (getStaticProps): 빌드 시 데이터를 미리 가져와 정적 페이지로 생성하여 빠른 로딩 속도 제공
  • CSR (useEffect + fetch): 클라이언트 측에서 데이터를 요청하여 렌더링 후 동적으로 반영