Day 11 - HTTP Method, Node.js 특징, 모듈, 콜백 함수, 라이브러리 vs 프레임워크, 프론트개발 3대장

이유승·2024년 11월 11일
타입스크립트로 함께하는 웹 풀 사이클 개발(React, Node.js) 5기
0

데브코스 웹 풀스택 개발 5기

목록 보기
11/36

* 프로그래머스, 타입스크립트로 함께하는 웹 풀 사이클 개발(React, Node.js) 5기 강의 수강 내용을 정리하는 포스팅.

* 원활한 내용 이해를 위해 수업에서 제시된 자료 이외에, 개인적으로 조사한 자료 등을 덧붙이고 있음.

1. HTTP Method

  • 자세한 내용은 이전 포스팅 참조.

  • 클라이언트와 서버 사이에 이루어지는 요청(Request)과 응답(Response)을 어떤 형식으로 실행해야하는지 정해둔 '규약'.

  • 사실 가장 많이 사용하는 것은 CRUD 용도의 GET / POST / PUT / DELETE 정도. 극단적으로는 GET / POST 정도만 써도 어지간한 기능은 다 구현이 가능하다.

  • PUT과 PATCH를 구분해서 사용할 것. PUT은 겹치는 부분이 있어도 그냥 덮어쓴다 / PATCH는 겹치지 않는 부분만 수정한다.

  • DELETE 사용시에는 물리적 삭제에 의한 위험성을 충분히 숙지하고 사용할 것.

  • DELETE로 아예 삭제해버리는 것보다, POST로 해당 데이터는 더 이상 사용하지 않는다 / 삭제된 데이터라는 꼬리표 정도를 붙여서 구분해두는게 더 안전한 방법이다.



2. Node.js

  • 브라우저 내부에서만 사용할 수 있는 Javascript를 브라우저 외부에서도 사용할 수 있도록, 개발 환경을 제공해주는 플랫폼.

  • Javascript를 사용하는 개발 환경이라면 어디든 필요하다. 프론트엔드 / 백엔드 모두 동일.

  • Node.js의 기본 개념 및 특징은 이전 포스팅 참조.



Node.js 특징 상세

싱글 스레드의 문제를 해결하기 위해 논 블로킹-비동기 방식을 적용해서, 단일 스레드에서 많은 요청을 효율적으로 처리할 수 있게 되었다.

  • Node.js 특징 간단요약

  • Node.js의 특징은 기본적으로 JavaScript의 특징을 그대로 따라간다. Node.js가 결국 JavaScript로 개발된 것이기 때문.

  • JavaScript가 최초 개발되었을 때는, 지금처럼 다양한 작업과 화려한 기능을 수행할 것을 전제하지 않았다. 웹 브라우저의 UI와 사용자 상호작용 정도만 처리할 용도.

  • 당시 웹 브라우저에서는 여러 스레드를 사용할 경우 버그가 발생하거나 시스템끼리 충돌을 일으키는 경우가 왕왕 있어서 싱글 스레드만 사용해서 한 번에 하나의 작업만 수행하도록 하는 것이 적합했다.

  • 어쨌든, JavaScript는 하나의 스레드만을 사용하도록 설계되었다.



싱글(단일) 스레드

  • 간단하게 이야기하자면, 기본적으로 한 번에 하나의 작업만 처리할 수 있다는 것.

  • 메모리 사용량은 적은데.. 복잡한 계산을 반복해서 처리하는 등의 작업을 처리하는게 부담스럽다.



논 블로킹

  • 다수의 작업 요청이 들어올 때, 요청이 완료될 때까지 기다리지 않고 다음 코드를 바로 실행할 수 있는 방식.

  • 싱글 스레드로 동작한다는 건 많은 작업량을 빠르게 처리할 수 없다는 뜻이다. 이 문제를 해결하기 위해서 하나의 작업이 완료되는걸 기다리지 않고 다음 작업을 실행해버리는 것.



비동기 방식

  • 논 블로킹 방식에 의해 다수의 작업이 동시에 실행될 때, 어느 작업이 완료되었다면 콜백 함수를 호출하거나 Promise를 반환하여 결과를 처리하게 된다.

  • 비동기와 논 블로킹 방식은 주로 I/O 작업에 사용된다. 파일을 읽거나, 데이터베이스에 접근하는 등 I/O 지연이 발생할 수 있는 작업을 대기하지 않고 넘겨 처리함으로써 성능을 유지할 수 있기 때문.



이벤트 루프

  • 싱글 스레드 환경에서도 다수의 작업을 효율적으로 처리할 수 있는 핵심 매커니즘.

  • 들어온 작업을 큐에 넣고, 작업이 완료되면 큐에서 꺼내와 콜백을 실행하는 역할을 수행한다.

  • 비동기 작업의 순서를 제어하면서도 빠른 처리가 가능하도록 하는 것.



백엔드는 어떤 언어로?

  • 전세계적으로는 Javascript 기반의 Node.js / Express.js가 압도적이다.

  • 다만 우리나라의 경우 국가/공공기관에서 채택한 전자정부프레임워크에서 JAVA 기반의 Spring 프레임워크를 사용하고 있기 때문에, 국내 백엔드 개발자라면 Spring를 사용하는 비중이 더 높다.
    - 국가/공공기관의 IT 인프라 제작-유지보수는 통상적으로 외부 업체에 하청을 주게되는데 이쪽 일감의 숫자가 무시하기 힘들기 때문. 이쪽 회사들에게 Javascript는 그저 프론트엔드 개발에나 사용하는 언어이다.

  • 네카라쿠배당토로 대표되는 IT 대기업들도 사정은 비슷하다. Node.js / Express.js / Django 등등.. 최신 기술을 많이 사용하지만, JAVA Spring의 비중도 높은 편.
    - 우리나라의 Spring 개발 인력층이 풍부하기도 하고, 여기도 정부쪽과 거래를 하는 일도 있기 때문.

  • 따라서 우리나라에서 백엔드 개발자가 되고싶다면, 1순위 JAVA Spring / 2순위 Python Django / 3순위 Javascript Node.js 정도로 후보를 좁히면 된다.



3. 모듈

  • 개발자에게 도움을 주는 코드 모음.

  • 외부에서 미리 만들어진 라이브러리를 가져다 사용하는 것도 모듈을 가져다가 사용하는 것. 그리고 자바스크립트에서 미리 제공하는 메소드를 사용하는 것도 모듈을 사용하는 행위에 속한다.

  • 외부에서 미리 만들어진 라이브러리를 가져다 사용하는 것. 이건 어떻게 해야할까?



NPM

  • Node Package Manager, npm/yarn에 대한 기본 개념은 이전 포스팅 참조.

  • Node Package Manager사전에 규정된 방법을 통해 외부에서 미리 제작된 라이브러리를 가져다가 사용할 수 있다.



Figlet

  • 텍스트를 아스키 아트(ASCII Art)로 변환하는 프로그램이자 라이브러리.

  • "Frank, Ian and Glenn's LETters"의 줄임말로, 1990년대에 이 이름을 딴 개발자들에 의해 만들어졌다.

  • 텍스트를 큰 아스키 아트로 변환하여 터미널, 웹 페이지 또는 애플리케이션에서 시각적 강조를 줄 때 유용하게 사용된다.

CLI 사용법

figlet 아스키아트텍스트로변환해출력하고싶은텍스트

figlet Hello, World!

Node.js 사용법

const figlet = require('figlet');

figlet('Hello, World!', function(err, data) {
  if (err) {
    console.log('Something went wrong...');
    console.dir(err);
    return;
  }
  console.log(data);
});
  • 서버나 애플리케이션 시작 시, 인상적인 배너를 표시하기 위해.
  • 스크립트나 CLI 프로그램에서 텍스트를 스타일링할 때.
  • 웹 페이지나 README 파일에 재미있고 큰 제목을 삽입할 때 등에서 사용하는 라이브러리.

Figlet 함수로 알아보는 함수의 동작 원리와 콜백 함수

  • Figlet 라이브러리의 figlet 함수는 두 개의 인자를 받아 동작한다.

  • 첫 번째 인자는 변환하고 싶은 텍스트. 두 번째 인자는 콜백 함수, 작업이 끝난 후 실행되는 함수이다.

  • figlet 함수는 첫 번째 인자를 받아 텍스트를 변환한다.

  • 작업이 완료되면, 콜백 함수가 실행된다.

  • 콜백 함수에서는 이전 작업에서 에러가 발생되었다면, figlet 함수에서 에러 내용을 받아 콘솔에 출력하고 코드를 종료한다.

  • 에러가 발생되지 않았다면, figlet 함수에서 변환된 텍스트 값을 data라는 인자로 받아 콘솔에 출력하고 코드를 종료한다.



4. 라이브러리 vs 프레임워크

라이브러리 vs 프레임워크

  • 라이브러리(Library) : 특정 기능을 쉽게 구현할 수 있도록 제공되는 함수와 클래스의 모음.

  • 프레임워크(Framework) : 애플리케이션의 구조와 아키텍처를 정의하는 큰 틀.

  • 프레임워크는 어떤 애플리케이션을 개발할 때, 개발 구조와 방향성까지 모두 제시되어 개발자가 이를 따라서 개발해야하는 큰 개념.

  • 라이브러리는 어떤 기능을 구현할 때, 이를 위해 미리 마련된 함수 등을 가져다가 사용하는 작은 개념. 개발자가 원하는 기능을 추가하기 위해 선택적으로 사용하는 것.

  • 수많은 라이브러리들이 모음이 곧 프레임워크가 된다고 이해하면 된다. 다만 하나의 App을 온전히 개발할 수 있느냐가 프레임워크의 기준.

  • 프레임워크 예시 : Vue.js / Angular / Svelte / Express.js 등등..

  • 라이브러리 예시 : jQuery / Three.js / Lodash / Chart.js / Axios 등등..



React.js는 라이브러리인가? 프레임워크인가?

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

  • 생각보다 혼동하는 경우가 많은데, React.js는 UI 구현을 위해 선택적으로 사용하는 라이브러리이다.

  • Javascript 기반의 React.js - Vue.js - Angular.js가 프론트엔드 개발의 3대장으로 묶여 다루어지기에 더 혼란이 발생하는데..

  • Vue.js - Angular.js는 프레임워크. React.js는 라이브러리에 속한다.



  • React는 기본적으로 UI 개발에 필요한 최소한의 기능을 제공해주기만 한다.
    - 다만 React이 프론트엔드 개발에서 대단히 많이 사용되면서, React를 기반으로 사용할 수 있는 대규모 애플리케이션 개발에 필요한 요소들이 추가 라이브러리로 개발되면서 React 생태계가 단단히 구축된 덕분에, 추가 기능들을 통해 하나의 프레임워크처럼 동작할 수도 있다.



  • Vue.js는 템플릿, 양방향 바인딩, 라우팅, 상태 관리 기능 등이 포함되어 있어 단독으로 완전한 프론트엔드 애플리케이션을 구축할 수 있다.
    - 다만 프레임워크로서의 완성도와 사용의 간편함을 모두 목표로 설계된 녀석이라, 필요에 따라 Vuex, Vue Router 등 추가 기능이 확장될 필요가 있다.



  • Angular는 대규모 애플리케이션 개발에 필요한 모든 요소를 제공한다. 라우팅, HTTP 요청 처리, 폼 관리, 유효성 검사, 상태 관리 등 대부분의 기능이 내장되어 있다.
    - 여기는 완전한 프레임워크. App 개발에 필요한 모든 것들이 다 포함되어있고, 개발자는 미리 정해진 길을 따라서 개발하기만 하면 된다.



React.js를 프레임워크로 만들어주는 라이브러리들

  • React.js에서 흔히 사용하는 라이브러리들 목록.

  • 거대한 React.js 생태계의 극히 일부, 실제로 존재하는 라이브러리들은 포스팅 하나에 목록화 하는것 자체가 불가능할 정도로 거대하다.

1. 라우팅

React Router: React 애플리케이션에 라우팅 기능을 추가하는 라이브러리로, 페이지 이동과 URL 매핑을 쉽게 관리할 수 있습니다. 클라이언트 사이드 라우팅을 통해 싱글 페이지 애플리케이션(SPA) 구조를 지원합니다.

2. 상태 관리

Redux: 전역 상태 관리를 위한 라이브러리로, 단방향 데이터 흐름과 불변성을 통해 애플리케이션의 상태를 일관성 있게 관리할 수 있습니다. 대규모 애플리케이션에서 상태 관리의 복잡성을 줄여줍니다.
Recoil: Facebook에서 개발한 상태 관리 라이브러리로, React의 기본 상태 관리 기능을 확장하여 더 정교한 상태 관리를 할 수 있게 합니다.
MobX: 상태 관리를 간편하게 해주는 라이브러리로, 옵저버 패턴을 통해 상태의 변화에 따라 UI를 자동으로 업데이트합니다.

3. API 요청 및 데이터 처리

Axios: HTTP 요청을 처리하는 라이브러리로, RESTful API와의 통신을 위한 Promise 기반 비동기 처리를 쉽게 구현할 수 있습니다. React 애플리케이션에서 API와 데이터를 통신하는 데 널리 사용됩니다.
React Query: 서버 상태 관리 라이브러리로, 데이터를 캐싱, 동기화, 갱신하는 기능을 제공하여 API 요청을 더 효과적으로 관리할 수 있습니다.

4. 폼 관리 및 유효성 검사

Formik: React에서 폼을 쉽게 관리하고 검증할 수 있는 라이브러리로, 폼 상태 및 유효성 검사를 간편하게 설정할 수 있습니다.
React Hook Form: 성능 최적화된 폼 관리 라이브러리로, 폼 상태를 효율적으로 관리하고 유효성 검사를 간단하게 구현할 수 있습니다.

5. 스타일링

Styled-Components: CSS-in-JS 방식의 스타일링을 제공하는 라이브러리로, 컴포넌트 기반으로 스타일을 적용할 수 있습니다. 스타일이 JavaScript 안에 포함되므로 모듈화가 쉬워집니다.
Emotion: CSS-in-JS 스타일링을 지원하는 라이브러리로, 성능이 뛰어나고 유연한 스타일링이 가능합니다.

6. 테스트

Jest: React 애플리케이션에서 단위 테스트와 통합 테스트를 쉽게 작성할 수 있게 해주는 테스트 라이브러리로, Facebook에서 개발했습니다.
React Testing Library: React 컴포넌트의 UI 테스트를 위한 도구로, 사용자 관점에서 컴포넌트를 테스트할 수 있도록 설계되었습니다.

7. 서버 사이드 렌더링(SSR) 및 정적 사이트 생성(SSG)

Next.js: React에 서버 사이드 렌더링과 정적 사이트 생성을 추가하여, React를 프레임워크처럼 사용할 수 있게 도와줍니다. SEO가 중요한 애플리케이션에 특히 적합하며, API 라우팅, 이미지 최적화, 폴더 구조 관리 등을 지원합니다.

8. 애니메이션

Framer Motion: React 애플리케이션에 애니메이션을 추가하는 라이브러리로, CSS만으로는 구현하기 어려운 애니메이션 효과를 쉽게 만들 수 있습니다.
React Spring: 자연스러운 애니메이션을 구현하기 위한 라이브러리로, 물리 기반 애니메이션을 지원합니다.



Vue와 Angular는?

1. Vue.js

라우팅: Vue는 공식 라우팅 라이브러리인 Vue Router를 통해 클라이언트 사이드 라우팅을 지원합니다.

상태 관리: Vuex라는 공식 상태 관리 라이브러리를 통해 전역 상태 관리를 쉽게 할 수 있습니다.

폼 관리 및 유효성 검사: Vue는 자체적으로 양방향 데이터 바인딩을 지원하기 때문에 폼의 상태를 간단하게 관리할 수 있으며, 유효성 검사도 쉽게 구현할 수 있습니다.

애니메이션: Vue는 트랜지션과 애니메이션을 기본으로 제공하여 DOM 요소에 애니메이션 효과를 쉽게 추가할 수 있습니다.

2. Angular

라우팅: Angular에는 내장된 라우팅 기능이 있으며, Angular Router를 통해 페이지 전환과 URL 매핑을 쉽게 관리할 수 있습니다.

상태 관리: Angular는 RxJS와 서비스를 활용해 상태를 관리할 수 있으며, 전역 상태 관리가 필요한 경우에도 내장된 서비스와 의존성 주입을 통해 구현할 수 있습니다.

폼 관리 및 유효성 검사: Angular에는 템플릿 기반 폼과 반응형 폼(Reactive Forms)이라는 두 가지 방식의 폼 관리 시스템이 내장되어 있어, 복잡한 폼 검증과 상태 관리가 용이합니다.

HTTP 요청 및 데이터 처리: Angular는 HttpClient 모듈을 통해 REST API와의 통신을 기본적으로 지원합니다.

애니메이션: Angular의 애니메이션 기능은 Angular Animation 모듈을 통해 기본 제공되며, 복잡한 애니메이션 효과도 쉽게 구현할 수 있습니다.

테스트 도구: Angular CLI와 함께 제공되는 Jasmine과 Karma를 통해 기본적인 유닛 테스트와 통합 테스트를 쉽게 작성할 수 있습니다.

profile
이유승
프론트엔드 개발자를 준비하고 있습니다.
이전 포스트

Day 10 - API, RESTful, HTTP, API 요청 예시

다음 포스트

Day 12 - Express.js vs http 모듈, Express 5.0, JSON vs XML

0개의 댓글