스타일링 라이브러리

Emotion

Emotion은 JavaScript를 사용하여 CSS 스타일을 관리하는 라이브러리로, React와 다른 프레임워크에서 사용할 수 있습니다. Emotion은 CSS-in-JS 스타일링 방식을 채택하여, 컴포넌트와 함께 스타일을 선언하고 적용할 수 있습니다. CSS-in-JS 방식 중 하나인 "Styled Components"와 유사한 기능을 제공합니다.

1. CSS-in-JS: Emotion은 JavaScript 코드 안에서 CSS 스타일을 작성할 수 있도록 해주는 방식으로, 스타일과 컴포넌트를 함께 관리할 수 있습니다.
2. 퍼포먼스: Emotion은 빠른 런타임 성능을 제공하며, 스타일을 최적화하여 불필요한 렌더링을 방지합니다.
3. 스타일 재사용: Emotion은 스타일을 JavaScript 객체로 추상화하여 재사용성을 높여줍니다.

Framer-motion

Framer Motion은 모션 그래픽 및 애니메이션을 구현하기 위한 모션 라이브러리입니다. React와 함께 사용되며, 간단하고 직관적인 API를 제공하여 다양한 모션 및 애니메이션 효과를 구현할 수 있습니다.

1. 직관적인 API: Framer Motion은 사용하기 쉬운 API를 제공하여 모션과 애니메이션을 구현하는 것이 간단하고 편리합니다.
2. 애니메이션 제어: 시간, 이징(Easing), 지연, 반복 등 애니메이션을 제어하는 기능을 제공하여 다양한 모션 효과를 세밀하게 조정할 수 있습니다.
3. 여러 요소 지원: Framer Motion은 DOM 요소뿐만 아니라 SVG, 캔버스 등 다양한 요소를 지원합니다.
4. 퍼포먼스: Framer Motion은 빠른 런타임 성능을 지향하며, 스크롤, 제스처 등 다양한 상황에서도 부드러운 애니메이션을 제공합니다.

패키지 매니저(package manager)

자바스크립트 패키지 매니저는 자바스크립트 애플리케이션에서 사용되는 외부 라이브러리, 모듈, 플러그인 등을 관리하는 도구입니다. 패키지 매니저를 사용하면 프로젝트에 필요한 의존성을 쉽게 관리하고 설치할 수 있으며, 프로젝트를 더 쉽고 효율적으로 개발할 수 있습니다.

npm (Node Package Manager)

npm은 Node.js를 위한 기본 패키지 매니저로 가장 널리 사용되는 패키지 매니저입니다. npm은 Node.js 생태계의 모듈을 설치, 관리, 배포할 수 있도록 해주며, 개발자들이 작성한 모듈을 공유하고 다른 사람들이 사용할 수 있도록 합니다. 프로젝트의 의존성을 package.json 파일에 기록하여 프로젝트를 쉽게 공유하고 재현 가능하게 만들 수 있습니다.

npm의 동작

npm은 node_modules 디렉토리 안에 프로젝트에 필요한 패키지들을 설치하여 의존성을 관리하고, JavaScript 코드에서 패키지를 불러올 때(ex. import문) 해당 디렉토리를 검색하여 필요한 패키지를 찾습니다. 만약 node_modules에 패키지가 없으면 상위 디렉토리로 올라가면서 패키지를 찾으며, 전역 설치된 패키지는 프로젝트의 모든 디렉토리에서 사용 가능합니다.

1. 프로젝트이 루트 디렉토리에 저장된 package.json 파일이 있습니다. 여기에는 프로젝트의 메타 정보와 의존성 정보가 들어있습니다. 예를 들어 패키지 이름, 저작권, 스크립트 등이 기록되어 있습니다.
2. npm install 명령어를 통해, npm은 package.js 파일에 명시된 의존성을 검사하고 이를 기반으로 필요한 패키지들을 인터넷에서 다운로드하여 프로젝트 폴더에 node_modules 디렉토리에 설치합니다.
3. JavaScript 프로젝트에서 코드를 작성할 때, 코드 내에서 require() 함수나 import 문을 사용하여 필요한 패키지를 불러올 수 있습니다. 이 때, npm은 먼저 현재 프로젝트의 node_modules 디렉토리에서 해당 패키지를 검색합니다. 만약 현재 프로젝트의 node_modules에 패키지가 없는 경우, npm은 상위 디렉토리로 올라가면서 해당 패키지를 찾습니다. 이 과정은 프로젝트 디렉토리의 루트까지 올라가거나 패키지를 찾을 때까지 계속됩니다.

npm의 비효율성

npm은 파일 시스템을 통해, node_modules 폴더를 이용해서 의존성을 관리 및 검색합니다. 하지만 이 방식에서 npm은 원하는 의존성을 찾기 위해, 상위 디렉토리의 node_modules 폴더를 계속 탐색하게 되고, 이 과정에서 여러 비효율이 발생합니다.

1. 해당 패키지의 상위 디렉토리 환경에 따라 의존성 탐색 여부와 의존성의 버전이 달라질 수 있습니다.
2. node_modules 디렉토리 구조는 일반적으로 수백 메가바이트 이상의 용량이 필요하며, 이를 탐색하기 위해 많은 I/O 작업이 필요합니다.

I/O 작업 (입출력 작업) : 데이터의 입력과 출력을 통해 프로그램이 외부 환경과 상호작업하는 작업을 의미합니다. 시스템 리소스에 접근해야 하기 때문에 상대적으로 느린 작업입니다.

3. npm 및 Yarn v1에서는 중복되서 설치되는 node_modules를 아끼기 위해서 Hoisting(끌어올리기) 기법을 사용합니다. 따라서 의존성의 중복을 피할 수 있었지만 직접 의존하지 않는 라이브러리 등을 직접 불러오게 되면서, '유령 의존성'이 생기게 되었습니다. 즉, package.json에 명시되어 있지 않으나 조용히 사용하고 있을 수 있는 것이죠. 따라서 다른 의존성에 변경이 발생할 때, 예측하지 못한 사이드 이펙트가 발생할 수 있었습니다.

Yarn

Yarn v1

Yarn은 페이스북에서 개발한 자바스크립트 패키지 매니저로, npm의 대안으로 사용됩니다. Yarn은 npm 저장소에서 패키지를 설치하는 데 사용되며, npm과 호환되기 때문에 기존 npm으로 설치된 패키지들을 그대로 사용할 수 있습니다. Yarn은 더 빠르고 안정적인 의존성 해결과 캐시 기능을 갖추고 있으며, lock 파일을 통해 패키지 버전을 고정하여 동일한 환경에서 일관성을 유지할 수 있도록 합니다.

Yarn v1은 package.json 기반으로 의존성 트리를 생성하고, node_modules 디렉토리 구조를 만듭니다. 이를 통해 의존성 충돌을 피하고 관리를 도와줍니다.

Yarn Berry

Yarn Berry는 Yarn의 최신 버전 중 하나로, Plug'n'Play 즉 pnp 개념을 적용합니다. node_modules 폴더를 생성하지 않고, cache 폴더에 의존성 정보를 저장하며 cjs 파일에 의존성을 찾을 수 있는 정보가 기록됩니다.

cache 폴더 안에 있는 파일들은 Zip FileSystem을 따르기 떄문에 다음과 같은 장점이 있었습니다.
1. node_modules 디렉토리 구조가 필요없기 때문에, 설치가 빠릅니다.
2. 각 패키지는 버전마다 하나의 zip 아카이브를 가지고 있기 때문에 중복 설치가 되지 않습니다. 또한 압축되어 있어 용량을 아낄 수 있습니다.
3. 의존성 파일을 효율적이고 엄격하게 관리할 수 있습니다.
4. cjs에 의존성 위치가 명시되어 있기 때문에, node_modules를 순회할 필요가 없습니다.
5. 설치 시간을 단축시키거나 zero-intall을 통해서 설치 없이 사용할 수 있습니다. 의존성의 용량이 매우 낮아졌기 때문에 git과 같은 버전 관리에 포함시켜 관리할 수 있는 것을 zero-install이라고 합니다.

PNPM

PNPM은 Yarn과 npm과 같은 자바스크립트 패키지 매니저의 대안으로 개발된 패키지 매니저입니다. PNPM은 중복되는 의존성을 공유하여 설치 디스크 공간을 절약하고, 더 빠른 설치 속도를 제공하는 특징을 갖고 있습니다. PNPM은 기존 npm 저장소와 호환되며, 패키지를 설치할 때에도 캐시 기능을 사용하여 중복 다운로드를 최소화합니다.

빌드 도구

빌드(Build) 도구들인 Webpack, ESBuild, SWC, Babel에 대해 간단히 설명드리겠습니다.

1. Webpack:
   Webpack은 웹 애플리케이션의 정적 자원(JavaScript, CSS, 이미지 등)을 번들링하기 위한 모듈 번들러입니다. 웹팩은 애플리케이션의 의존성 그래프를 분석하여 모든 자원을 하나 또는 여러 개의 번들 파일로 묶어주며, 최적화와 소스 맵 생성 등 다양한 기능을 제공합니다. 또한, 로더(loader)와 플러그인(plugin)을 사용하여 자바스크립트 파일 이외의 다른 자원을 처리하거나 추가 기능을 확장할 수 있습니다.

2. ESBuild:
   ESBuild는 빠른 빌드 속도를 강조하는 자바스크립트 번들러 및 컴파일러입니다. 기존 번들러에 비해 높은 속도를 자랑하며, Go 언어로 개발되었습니다. ESBuild는 주로 최신 자바스크립트 문법 (ES6+), JSX, TypeScript 등을 컴파일하여 빠르게 번들링하는 데에 사용됩니다.

3. SWC:
   SWC는 빠른 속도와 효율성을 강조하는 Rust로 작성된 자바스크립트/타입스크립트 컴파일러입니다. Babel과 비슷한 역할을 수행하지만, 빌드 속도와 효율성에서 우수한 성능을 보여줍니다. SWC는 최신 자바스크립트 문법과 타입스크립트를 ES5로 변환하여 브라우저 호환성을 강화하고 최적화된 코드를 생성합니다.

4. Babel:
   Babel은 주로 구형 브라우저에서도 동작하는 현대 자바스크립트 문법을 사용하여 개발하기 위해 사용되는 컴파일러입니다. Babel은 최신 자바스크립트 문법을 이전 버전으로 변환하는 트랜스파일러로, 주로 ES6+ 문법을 ES5 이하로 변환하여 구형 브라우저와의 호환성을 확보합니다.

요약하자면, Webpack은 웹 애플리케이션의 정적 자원을 번들링하고 최적화하는 모듈 번들러, ESBuild는 빠른 빌드 속도를 강조하는 번들러/컴파일러, SWC는 높은 효율성과 속도를 갖는 Rust 기반의 컴파일러, Babel은 구형 브라우저와의 호환성을 위해 최신 자바스크립트 문법을 이전 버전으로 변환하는 컴파일러입니다. 이들 빌드 도구는 각자의 강점과 특징을 가지고 있으며, 프로젝트의 요구사항과 성능을 고려하여 선택하여 사용할 수 있습니다.

CI/CD

CI/CD(Continuous Integration/Continuous Deployment)는 소프트웨어 개발에서 자동화된 빌드, 테스트, 배포 과정을 의미합니다. CI/CD를 적용하면 개발자들이 코드를 버전 관리 시스템에 푸시할 때마다 자동으로 빌드와 테스트가 실행되어 품질이 높은 소프트웨어를 지속적으로 배포할 수 있습니다.

GitHub Actions와 CircleCI는 둘 다 CI/CD를 구현하기 위한 서비스입니다. 각각에 대해 간단히 설명드리겠습니다:

1. GitHub Actions:
   GitHub Actions는 GitHub에서 제공하는 CI/CD 서비스로, GitHub 저장소와 완전히 통합되어 있습니다. GitHub Actions를 사용하면 소스 코드의 변경 사항을 기반으로 자동 빌드, 테스트, 배포 등의 작업을 수행할 수 있습니다. YAML 파일을 사용하여 작업 흐름(Workflows)을 정의하며, 이를 기반으로 CI/CD 파이프라인을 구축할 수 있습니다. GitHub Actions는 무료 플랜과 유료 플랜을 제공하며, 통합이 용이하고 간편한 사용법으로 인기가 있습니다.

2. CircleCI:
   CircleCI는 클라우드 기반의 CI/CD 플랫폼으로, GitHub, Bitbucket, GitLab 등 다양한 버전 관리 시스템과 연동하여 사용할 수 있습니다. CircleCI를 사용하여 소스 코드의 변경 사항을 자동으로 감지하고 테스트 및 빌드를 실행할 수 있습니다. CircleCI는 환경 설정이 유연하고 커스터마이징이 용이한 장점을 갖고 있으며, 복잡한 빌드 및 배포 프로세스를 구축하는 데에 유용합니다.

둘 다 CI/CD를 구현하는데 사용되는 서비스이며, 각각의 특징과 기능을 고려하여 프로젝트에 맞는 적절한 서비스를 선택하여 사용할 수 있습니다. CI/CD를 적용하면 소프트웨어 개발과 배포 과정이 자동화되어 개발 생산성과 품질을 향상시킬 수 있습니다.

3D 그래픽

Three.js

hree.js는 3D 그래픽을 웹 브라우저에서 쉽게 구현할 수 있도록 도와주는 자바스크립트 3D 라이브러리입니다. WebGL을 기반으로 동작하며, WebGL을 직접 다루는 복잡한 코드 없이도 3D 객체, 조명, 카메라, 애니메이션 등을 생성하고 조작할 수 있도록 인터페이스를 제공합니다.

Three.js는 3D 모델링과 시뮬레이션, 게임 개발, 시각화, 웹 상에서의 3D 그래픽 구현 등 다양한 분야에서 사용됩니다. 주요 특징과 기능은 다음과 같습니다:

1. 3D 객체 생성: Three.js를 사용하여 기하학적 도형 (상자, 구, 원통 등)뿐만 아니라 사용자 정의 3D 모델을 생성할 수 있습니다.

2. 카메라와 뷰포트: Three.js에서는 카메라를 통해 3D 공간을 관찰하며, 원하는 시점으로 이동할 수 있습니다.

3. 조명: Three.js에서는 광원을 생성하여 3D 객체에 조명을 줄 수 있으며, 조명에 따른 빛의 반사, 그림자 등을 설정할 수 있습니다.

4. 재질(Material)과 텍스처(Texture): Three.js에서는 재질을 설정하여 3D 객체의 외관을 결정하며, 이미지나 동영상 등의 텍스처를 적용할 수 있습니다.

5. 애니메이션: Three.js를 사용하여 객체의 위치, 회전, 크기 등을 애니메이션화할 수 있으며, 더 복잡한 애니메이션도 제작할 수 있습니다.

6. 물리 엔진 연동: Three.js는 물리 엔진 라이브러리인 Ammo.js 등과 연동하여 물리 기반 시뮬레이션을 구현할 수 있습니다.

오늘의 CS지식

GNB : Global Navigation Bar, 웹 사이트에서 전역으로 제공하는 공통 네이게이션 바 또는 레이어를 의미합니다. 다양한 메뉴 및 기능 페이지로 빠르게 전환할 수 있도록 링크를 포함해줍니다.

LNB : Local Navigation Bar, GNB의 하위 네이비게이션 바입니다. 특정 카테고리 내부에 있는 메뉴들의 링크를 포함하고 있습니다. 서브 메뉴라고도 할 수 있습니다.

FNB : Foot Navigation Bar, 웹 사이트 가장 하단에 위치한 네비게이션 바로 기업 및 웹 사이트의 정보들을 기재합니다.

Next.js의 _app 과 _document 파일 비교

Next.js 애플리케이션의 모든 페이지는 _app.js 파일을 통해 렌더링되며, _app.js의 MyApp 컴포넌트 내에서는 모든 페이지에 공통적으로 적용되어야 할 레이아웃이나 글로벌 스타일 등을 설정할 수 있습니다.

Document 컴포넌트는 HTML, Head, Body 요소를 커스터마이징할 수 있는 파일로, 페이지에 대한 커스텀 메타데이터, 스타일 시트 등을 설정하는 데에 사용됩니다. _document.js파일 내부의 MyDocument 클래스는 Document 클래스를 상속받아야 합니다. render 메서드를 통해 HTML, Head, Body 요소를 커스터마이징할 수 있으며, Head 컴포넌트 내에서 페이지에 대한 커스텀 메타데이터(예: title, meta 태그 등)를 설정할 수 있습니다.

참조링크

node_modules로부터 우리를 구원해 줄 Yarn Berry
인텐트 마케팅GNB, LNB? 웹사이트 용어 알아보기