본문 바로가기
개발 공부

웹 지식 학습 - part 1

by 주녕킴 2022. 7. 29.

2021년 여름방학 개발몰입과정 당시 진행했던 개념 스터디 내용을 정리하고자한다.

node.js란 무엇인가

정의

 ⚙️ 크롬 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임입니다. 이벤트기반, 논블로킹 I/O모델을 사용해 가볍고 효율적입니다.

런타임이란 컴퓨터 언어로 만든 프로그램을 실행할 수 있게 만들어주는 환경을 말한다.

즉 node.js란 자바스크립트로 만든 프로그램을 실행할 수 있게 만들어주는 환경.

특징

⚙️ node.js의 가장 큰 특징은 Non-blocking I/O와 단일 스레드 이벤트 루프를 통한 높은 처리 성능을 가지고 있다는 점

단일스레드 이벤트 루프 기반 비동기방식( Non-Blocking I/O)

  • 하나의 스레드가 request를 받으면 바로 다음 처리에 요청을 보내놓고 다른 작업을 처리하다가 먼저 요청한 작업이 끝나면 이벤트를 받아서 응답을 보낸다.
  • 동시 request가 오더라도 처리가 완료될때까지 기다리지 않아도 되기 때문에 서버 부하가 적다.

npm(yarn)이란 무엇인가

정의 및 특징

  • npm(Node Packaged Manager)이란 node.js로 만들어진 패키지(모듈)을 관리해주는 툴이다.
  • npm을 이용하면 몇 줄의 명령어로 node.js로 만든 모듈을 웹에서 받아 설치하고 관리할 수 있다.
  • 이렇게 받은 모듈의 버전관리도 쉽게할 수 있다.

 

npm과 yarn

npm 저장소의 보안 이슈와 더불어 패키지가 많아짐에 따라 빌드 성능이 저하된다는 것이 문제였다.

이를 대체할 새로운 패키지 매니저가 yarn이다.

npm vs yarn

정적 타입 언어 vs 동적 타입 언어

정적타입(Static Typed) 언어와 동적타입 언어(Dynamic Typed)를 구분하는 기준은 코드의 상수, 변수, 함수 등에 대한 타입을 언제 확인하는지이다.

타입을 컴파일 타임에 확인하는 언어를 정적타입 언어라 하고

런타임에 확인하는 언어를 동적타입 언어라 한다.

 

동적타입언어의 예시

var x = [1, 2, 3] // Array
x = True      // Bool
x = "Hello"   // String
x = 100       // Int

변수 x의 타입은 런타임에 확인하기 때문에 최초 x에 배열을 넣은 후 Bool, String, Int등으로 변환해 사용해도 에러가 나지 않는다.

 

정적타입언어의 예시

// 1.컴파일 에러발생!
var x = [1, 2, 3] 
x = true 
x = "Hello" 
x = 100 

// 2.에러발생하지 않음
var x = [1, 2, 3]
var y: Bool = true
var z: String = "Hello" 
var a = 100

정적타입 언어는 타입이 한번 결정되면 변하지 않고, 컴파일시 타입을 확인한다.

동적타입언어의 장점

동적타입언어는 정적타입언어에 비해 사용하기 위해 지켜야할 규칙이 적기 때문에 상대적으로 코드가 짧고 학습효과가 좋다.

정적타입언어의 장점

  • 정적타입 언어는 컴파일시 타입에 대해 미리 확인하기 때문에 타입 관련한 런타임 오류를 방지할 수 있다. 특히 앱을 배포할 때 런타임 오류를 방지하는 것이 중요하다.
  • 정적타입 언어는 타입이 명시적으로 지정돼 있기 때문에 타입을 머리로 계산해 읽어야 하는 동적타입 언어에 비해 코드의 가독성이 좋다. 그래서 다수의 협업이나 프로젝트의 장기개발 및 유지보수에 유리하다.

라이브러리와 프레임워크의 차이

정의

라이브러리는 단순 활용가능한 도구들의 집합을 말한다.

즉, 개발자가 만든 클래스에서 호출하여 사용, 클래스들의 나열로 필요한 클래스를 불러서 사용하는 방식을 취하고 있다.

 

프레임워크는 뼈대, 기반구조를 뜻한다.

프로그래밍을 진행할 때 필수적인 코드, 알고리즘 등과 같이 어느 정도의 구조를 제공해주기 때문에

프로그래머는 이 프레임워크의 뼈대 위에서 코드를 작성하여 프로그램을 개발하면된다.

'소프트웨어의 특정 문제를 해결하기 위해서 상호 협력하는 클래스와 인터페이스의 집합' 이라 할 수 있으며,

완성된 어플리케이션이 아닌 프로그래머가 완성시키는 작업을 해야한다.

라이브러리와 프레임워크의 차이점

둘의 차이점은 흐름을 누가 지니고 있냐의 차이이다.

라이브러리는 프로그래머가 전체적인 흐름을 가지고 있어

라이브러리를 자신이 원하는 기능을 구현하고 싶을 때 가져다 사용할 수 있다.

반면에 프레임워크는 전체적인 흐름을 자체적으로 가지고 있어

프로그래머는 그 안에서 필요한 코드를 작성한다. 

 

라이브러리를 가구에 비유한다면, 프레임워크는 집(건물)에 비유할 수 있다.

'REST API'란 무엇인가

REST의 정의

“Representational State Transfer” 의 약자,

자원을 이름으로 구분하여 해당 자원의 상태(정보)를 주고 받는 모든 것을 의미한다.

 

월드 와이드 웹(www)과 같은 분산 하이퍼미디어 시스템을 위한 소프트웨어 개발 아키텍처의 한 형식이다.

REST는 기본적으로 웹의 기존 기술과 HTTP 프로토콜을 그대로 활용하기 때문에

웹의 장점을 최대한 활용할 수 있는 아키텍처 스타일이다.

 

REST API의 정의

REST 기반으로 서비스 API를 구현한 것이다.

최근 OpenAPI, 마이크로 서비스(하나의 큰 애플리케이션을 여러 개의 작은 애플리케이션으로 쪼개어 변경과 조합이 가능하도록 만든 아키텍처) 등을 제공하는 업체 대부분은 REST API를 제공한다.

REST API의 특징

  • REST 기반으로 시스템을 분산해 확장성과 재사용성을 높여 유지보수 및 운용을 편리하게 할 수 있다.
  • REST는 HTTP 표준을 기반으로 구현하므로, HTTP를 지원하는 프로그램 언어(델파이 클라이언트 뿐 아니라, 자바, C#, 웹 등)로 클라이언트, 서버를 구현할 수 있다.

REST API 설계 예시

Node.js의 BE 또는 FE Library / Framework 에 대해서 알아보고 비교해보기

Library

React

React는 페이스북에서 개발한 유저 인터페이스(User Interface, UI) 라이브러리이다.

페이스북에서 업데이트를 활발히 진행하고 지속적인 보완이 이뤄진다는 점 때문에 신뢰를 얻고 있다.

       특징

  • 컴포넌트
  • React로 구성된 웹 페이지는 복잡한 UI를 작은 섹션으로 쪼개어 구성하고, 각 섹션을 재사용할 수 있어 단순하고 유연하다.
  • 가상 DOM (Virtual DOM)
    • React는 Virtual DOM을 통해 빠르게 렌더링 한다. 웹 페이지를 웹 브라우저에 표현하기 위해 DOM(Document Object Model)을 업데이트하는 것은 중요하지만, 전체 문서를 업데이트 하는 데에는 많은 시간이 소요 된다. Virtual DOM은 Origin DOM을 추상화하여 객체화한 형태로, Origin DOM을 실제 조작하지 않아 브라우저 리플로우나 리페인트 횟수를 줄여 퍼포먼스를 높인다.
  • JSX(Java Script XML)
  • React는 일반 JavaScript 문법이 아닌 JSX(Java Script XML) 문법을 사용하여 UI를 템플릿화 한다. JSX는 HTML과 유사한 형태이기 때문에 구문 작성이 쉬워 간단하게 컴포넌트를 만들어 사용할 수 있다.

Framework

Express

Express는 node.js의 웹 개발 프레임워크이다. Node.js의 표준 프레임워크라고 볼 수 있다.

      특징

  • 미들웨어
    • 미들웨어는 Express가 요청(req)에 대한 응답(res)을 하기 전, 중간에서 특정 동작을 수행하는 프로그램을 의미한다. 미들웨어를 통해 서버 통신 과정에서 수행되어야 하는 작업을 간편하게 처리할 수 있다. 예를 들어, 사용자 인증을 먼저 거친 후, 웹 페이지를 렌더링 하고 싶다면 인증 미들웨어를 작성하여 먼저 삽입해 주는 방식이다.
  • 라우팅
    • Node.js에 내제된 라우팅 기능보다 발전된 라우팅 기능을 제공한다. Express는 REST API를 통해 라우팅 로직을 특정 디렉토리 아래에 모듈로 만들어 놓고 간편하게 불러와(require) 사용할 수 있다.
  • 디버깅
    • 응용 프로그램의 어느 부분에서 버그가 발생했는지 신속하게 찾아낼 수 있도록 쉬운 디버깅 매커니즘을 제공한다.

Socket.io

node.js를 이용한 실시간 채팅 개발을 수월하게 해주는 풀스택 패키지이다.

      특징

  • Socket.IO는 브라우저와 서버 간 실시간 양방향 및 이벤트 기반 통신을 가능하게 하는 라이브러리로서 기존에 있던 다양한 통신 기술을 통합하여 단일 API로 만든 기술이다.
  • 웹 소켓을 지원하지 않는 브라우저도 서버와 양방향 통신을 할 수 있어 브라우저에 관계없이 실시간 웹 채팅을 구현할 수 있다.

Nest.js

Nest.js는 효율적이고 안정적이며, 확장 가능한 서버 측 애플리케이션을 구축하기 위한

Node.js REST API 프레임워크이다.

      특징

  • NestJS는 최신 Javascript를 사용하며 Typescript로 빌드된다. 뿐만 아니라 OOP(Object Oriented Programming, 객체지향프로그래밍), FP(Functional Programming, 함수형 프로그래밍), FRP(Functional Reactive Programming, 함수형 반응형 프로그래밍) 의 요소를 결합하였다.
  • Nest.JS는 NodeJS 프레임워크인 Express나 Fastify 등의 API를 직접 사용할 수도 있으며 혹은 Nest.JS 에서 제공하는 추상화된 인터페이스를 이용할 수도 있다.
  • Frontend코드와 Backend코드를 하나의 언어로 작성할 수 있다.

 

참고한 사이트

https://medium.com/@seungh93/node-js-이해하기-기초-입문-b5af7aed374c

https://junspapa-itdev.tistory.com/3

https://m.blog.naver.com/magnking/220961896609

https://dongmin-jang.medium.com/npm-vs-yarn-7b699c5d6034

https://jusung.github.io/Static-and-Dynamic-Typed-Language/

https://juyeop.tistory.com/23

https://gmlwjd9405.github.io/2018/09/21/rest-and-restful.html

https://dora-guide.com/nodejs-net-framework/

https://library.gabia.com/contents/8206/

https://blog.martinwork.co.kr/nestjs/2020/03/22/what-is-nestjs.html

'개발 공부' 카테고리의 다른 글

웹 지식 학습 - part 3  (0) 2022.07.29
웹 지식 학습 - part 2  (0) 2022.07.29
HTML & CSS 실습1  (0) 2022.07.10
CSS  (0) 2022.07.10
HTML  (2) 2022.07.06

관련글

티스토리툴바