florent의 개발 적응기
이 글의 주요 내용
[프론트엔드(Frontend)와 백엔드(Backend)]
[프레임워크(Framework)와 라이브러리(Library)]
[유닉스 커맨드 라인(Unix Command Line)]
[Node.js]
[Node REPL]
[에러 우선 콜백 함수(Error-first Callback)]
[네이티브 노드 모듈 (Native Node Modules)]
[노드 패키지 매니저(NPM)]
[CommonJS(CJS) vs ECMAScript(ESM)]
[프론트엔드(frontend)란?]
프론트엔드는 사용자가 직접 상호작용하는 웹사이트나 애플리케이션의 클라이언트 측 부분
주로 HTML, CSS, JavaScript를 사용하며, React, Angular, Vue.js 같은 프레임워크나 라이브러리를 활용하여 더 복잡한 사용자 인터페이스를 구현
[프론트엔드 개발 도구]
[백엔드(backend)란?]
백엔드는 서버 측에서 작동하는 부분으로, 주로 세 가지 주요 구성 요소인 서버, 애플리케이션, 데이터베이스로 이루어짐
(1) 서버(Server): 클라이언트의 요청을 받아 처리하고 응답을 보내는 컴퓨터 또는 프로그램
(2) 애플리케이션(Application): 서버에서 실행되는 프로그램으로, 비즈니스 로직을 처리하고 클라이언트 요청에 대한 응답을 생성
(3) 데이터베이스(Database): 애플리케이션에서 사용되는 데이터를 영구적으로 저장하고 관리하는 시스템
웹 애플리케이션의 동적 특성: 정적 웹 페이지와 달리, 웹 애플리케이션은 사용자 상호작용에 따라 동적으로 콘텐츠를 생성하고 표시 → 이를 위해 서버와 데이터베이스가 협력하여 사용자별 맞춤 정보를 제공
[백엔드 개발 도구]
[프레임워크(framework)란?]
프레임워크(Framework)는 소프트웨어 개발을 위한 구조와 규칙을 제공하는 기본 골격
프레임워크의 주요 특징
(1) 제어의 역전(Inversion of Control): 프레임워크가 전체 프로그램의 흐름을 제어
(2) 확장성(Extensibility): 개발자가 커스텀 코드를 추가하여 기능을 확장
(3) 특정 문제 도메인 해결: 웹 개발, 모바일 앱 개발 등 특정 유형의 문제 해결에 특화
(4) 재사용성(Reusability): 공통 기능을 제공하여 코드 재사용성을 높임
(5) 표준화된 구조: 일관된 코드 구조를 제공하여 협업과 유지보수를 용이하게 함
[프레임워크를 사용하는 이유]
프레임워크는 개발자에게 미리 정의된 구조와 도구를 제공하여 개발 과정을 간소화하고 표준화함
코드 재사용: 공통 기능을 위한 컴포넌트를 제공
개발 시간 단축: 기본 구조와 기능이 이미 구현되어 있어 개발 속도가 빨라짐
보안: 많은 프레임워크가 기본적인 보안 기능을 제공
커뮤니티 지원: 대부분의 프레임워크는 활발한 개발자 커뮤니티를 가지고 있어 문제 해결이 쉬움
[라이브러리(Libaray)란?]
라이브러리는 특정 기능을 수행하기 위해 미리 작성된 코드의 모음
라이브러리의 주요 특징
(1) 재사용성: 공통적으로 사용되는 기능을 제공하여 코드 재사용성을 높임
(2) 모듈화: 특정 기능을 독립적인 모듈로 제공
(3) 선택적 사용: 개발자가 필요한 기능만 선택적으로 사용 가능
(4) 제어권: 프로그램의 흐름을 개발자가 제어
[프레임워크와 라이브러리 비교]
[커널(Kernel)]
커널(Kernel): 운영 체제의 핵심 부분으로, 하드웨어와 직접 상호작용하며 시스템 자원을 관리
커널은 사용자나 응용 프로그램이 직접 접근할 수 없는 보호된 메모리 영역에서 실행되며, 이를 ‘커널 공간(kernel space)’이라고 함
커널의 주요 기능
(1) 하드웨어 관리: CPU, 메모리, 저장 장치, 입출력 장치 등을 직접 제어
(2) 프로세스 관리: 프로그램의 실행, 종료, 스케줄링을 담당
(3) 메모리 관리: 물리적 메모리와 가상 메모리를 할당하고 관리
(4) 파일 시스템 관리: 파일의 저장, 검색, 수정을 처리
(5) 네트워크 관리: 네트워크 통신을 제어
(6) 보안: 시스템과 사용자 데이터를 보호
[셸(Shell)]
셸(Shell): 사용자와 커널 사이의 인터페이스 역할을 하는 프로그램으로, 사용자의 명령을 해석하여 커널에 전달하고 결과를 사용자에게 보여줌
셸의 두 가지 유형
(1) 그래픽 사용자 인터페이스 셸(GUI): 그래픽 요소를 통해 시스템과 상호작용함
(2) 명령줄 인터페이스 셸(CLI): 텍스트 명령을 통해 시스템과 상호작용함
BASH(Bourne Again Shell): 가장 널리 사용되는 유닉스 CLI 셸 중 하나로, 다양한 기능과 스크립팅 능력을 제공
[유닉스 커맨드 라인(Unix Command Line)이란?]
유닉스 커맨드 라인은 텍스트 기반 인터페이스를 통해 운영 체제와 상호작용하는 방법 ⇒ 셸(Shell)과 상호작용하는 것
사용자와 셸의 상호작용 과정
(1) 사용자가 커맨드 라인에 명령어를 입력
(2) 셸은 이 입력을 받아 해석
(2) 셸은 해석된 명령에 따라 적절한 프로그램을 실행하거나, 내장 명령어를 처리
(3) 셸과 커널의 상호작용
(4) 셸이 프로그램을 실행해야 할 경우, 커널에 시스템 호출을 보냄
(5) 커널은 요청받은 작업을 수행하고 결과를 셸에 반환
(6) 셸은 이 결과를 사용자에게 표시
커맨드 라인 사용 이유: 더 세밀한 제어와 자동화 가능성, 시스템 리소스의 효율적 사용 등의 이점
[유닉스 커맨드 라인 주요 명령어]
[Node.js란]
Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript ‘런타임 환경(runtime environment)’ ⇒ 프레임워크가 아님
[Node.js의 특징]
실행 환경 제공: Node.js는 JavaScript를 서버 사이드에서 실행할 수 있게 해주는 환경
라이브러리 집합: 기본적인 모듈과 API를 제공하지만, 애플리케이션의 구조를 강제하지 않음
유연성: 개발자가 애플리케이션의 구조와 아키텍처를 자유롭게 설계 가능
제어의 주체: 프로그램의 흐름을 개발자가 직접 제어
[“비동기 이벤트 기반(asynchronous event-driven) 자바스크립트 런타임(JavaScript runtime)인 Node.js는 확장 가능한 네트워크 애플리케이션(scalable network applications)을 구축하도록 설계되었습니다.”]
(1) Asynchronous (비동기적)
Node.js는 비동기 프로그래밍 모델 ⇒ 이는 작업이 완료될 때까지 기다리지 않고 다음 작업을 수행할 수 있다는 의미 → 파일을 읽거나 네트워크 요청을 보낼 때 응답을 기다리는 동안 다른 작업을 수행 가능
이로 인해 I/O 작업이 많은 애플리케이션에서 높은 효율성을 얻음
(2) Event-driven (이벤트 기반)
Node.js는 이벤트 루프를 사용하여 작업을 처리 ⇒ 이벤트가 발생하면 (예: 클라이언트 연결, 파일 읽기 완료 등) 해당 이벤트에 대한 콜백 함수가 실행 → 리소스를 효율적으로 사용하며, 동시에 많은 연결을 처리
(3) JavaScript runtime (자바스크립트 런타임)
Node.js는 브라우저 외부에서 JavaScript를 실행할 수 있게 해주는 환경
Google Chrome의 V8 JavaScript 엔진을 기반으로 만들어짐
이로 인해 개발자들은 서버 사이드 애플리케이션을 JavaScript로 작성할 수 있게 됨
(4) Scalable (확장 가능한)
Node.js의 비동기, 이벤트 기반 특성은 애플리케이션의 확장성을 높여줌 → 많은 동시 연결을 효율적으로 처리할 수 있어, 대규모 네트워크 애플리케이션에 적합
클러스터 모듈을 사용하면 멀티 코어 시스템에서 쉽게 수평적 확장이 가능
(5) Network applications (네트워크 애플리케이션)
Node.js는 네트워크 프로토콜 처리에 특화 → 웹 서버, API 서버, 실시간 통신 애플리케이션 (채팅, 게임 등) 개발에 적합
내장된 http/https 모듈로 웹 서버를 쉽게 구현할 수 있습니다.
[Node.js 위에서 동작하는 프레임워크]
[Node REPL이란?]
Node REPL(Node Read-Eval-Print Loop)이란, 사용자의 JavaScript 입력을 읽고 평가한 후 결과를 반환하는 컴퓨터 환경
Read (읽기): 사용자의 입력을 읽음
Eval (평가): 입력된 코드를 평가하고 실행
Print (출력): 실행 결과를 출력
Loop (반복): 위 과정을 반복
[Node REPL 특징]
작은 코드 조각들을 빠르게 테스트할 수 있어, 새로운 JavaScript 기능이나 Node.js API를 실험할 수 있음
자동 완성: Tab 키를 사용하여 명령어나 변수명을 자동 완성할 수 있음
명령어 기록: 위/아래 화살표 키를 사용하여 이전 명령어를 탐색
멀티라인 지원: 여러 줄의 코드를 입력 가능
[Node REPL 사용법]
시작: 터미널에서 'node' 명령어를 입력
종료: '.exit' 명령어를 입력하거나 Ctrl + C를 두 번 누름
JavaScript 파일 실행: 'node 파일명.js' 명령어를 사용
에러 우선 콜백 함수는 Node.js에서 비동기 작업을 처리할 때 널리 사용되는 패턴
에러 우선 콜백 함수의 구조와 활용 (사용자 정의 함수의 경우) ⇒ 자신만의 에러 우선 콜백 함수를 만들 때는 먼저 함수를 정의한 후 사용해야 함
에러 우선 콜백 함수의 사용 예시 (내장 함수 활용의 경우)
[네이티브 노드 모듈이란?]
네이티브 노드 모듈은 Node.js에 기본적으로 내장된 모듈로, 추가 설치 없이 사용할 수 있는 핵심 기능들
주요 특징
(1) 코어 기능 제공: 파일 시스템 조작, 네트워크 통신, 암호화 등 기본적인 서버 기능을 제공
(2) 크로스 플랫폼: 다양한 운영 체제에서 일관된 방식으로 작동
(3) 성능 최적화: C++로 작성되어 높은 성능을 제공
사용하려면 require 함수를 사용(ex. const fs = require('fs');)하거나, ES6 모듈 문법인 경우 import 구문(ex. import fs from 'fs';) 사용 가능
[주요 네이티브 노드 모듈]
[네이티브 노드 모듈 예시]
[노드 패키지 매니저란?]
NPM은 JavaScript 프로그래밍 언어를 위한 패키지 관리자
패키지 설치 및 관리, 버전 관리, 의존성 관리, 스크립트 실행의 역할을 수행
[노드 패키지 매니저 주요 명령어]
[CommonJS(CJS)란?]
Node.js의 기본 모듈 시스템으로, 동기적으로 모듈을 불러옴
require() 함수를 사용하여 모듈을 가져옴
module.exports 또는 exports를 사용하여 모듈을 내보냄
런타임에 모듈 의존성 해석
[ECMAScript Modules(ESM)란?]
JavaScript의 표준 모듈 시스템으로, 비동기적으로 모듈을 불러올 수 있음
import 문을 사용하여 모듈을 가져옴
export 문을 사용하여 모듈을 내보냄
정적 분석이 가능하여 빌드 시 최적화에 유리
Node.js에서 사용하려면 package.json에 "type": "module" 설정 필요
[모듈 가져오기(import)와 내보내기(export) - CJS vs ESM]