<1107 내용 정리> Vue - 4

백지윤·2023년 11월 7일
vue
0

Vue

목록 보기
4/6

Single-File Components

Component

  • 재사용 가능한 코드 블록

특징

  • UI를 독립적이고 재사용 가능한 일부분으로 분할하고 각 부분을 개별적으로 다룰 수 있다.

  • 그러면 자연스럽게 앱은 중첩된 Component의 트리로 구성이 됨

  • Single-File Components(SFC)

    • 컴포넌트의 템플릿, 로직 및 스타일을 하나의 파일로 묶어낸 특수한 파일 형식(*.vue 스타일)
<template>
	<div class='greeting'>{{ msg }}</div>
</template>

<srcipt setup>
import { ref } from 'vue'

const msg = ref('Hello World!')
</script>

<style scoped>
.greeting {
	color: red;
}
</style>

  • SFC 문법 개요
    • 언어블록 - /template/
      • 각 *.vue 파일은 최상위 /template/블록을 하나만 포함할 수 있다.
    • 언어블록 - /script setup/
      • 각 *.vue 파일은 하나의 /script setup/블록만 포함할 수 있다.
      • 컴포넌트의 setup() 함수로 사용되며 컴포넌트의 각 인스턴스에 대해 실행
    • 언어블록 - /style scope/
      • *.vue 파일에는 여러 /style/태그가 포함될 수 있다
      • scoped가 지정되면 CSS는 현재 컴포넌트에만 적용
  • 컴포넌트 사용하기
    • Vue SFC는 컴파일러를 통해 컴파일 된 후 빌드 돼야한다.

Vite

  • 프론트엔드 개발 도구
    • 빠른 개발 환경을 위한 빌드 도구와 개발 서버를 제공
  • vite 프로젝트 생성

    npm create vue@latest

  • 프로젝트 설정 관련 절차 진행
  • 프로젝트 폴더 이동 및 패키지 설치
  • Vue 프로젝트 서버 실행

    npm run dev

NPM(Node Package Manager)

  • Node.js의 기본 패키지 관리자
  • Chrome의 V8 JavaScript 엔진을 기반으로 하는 Server-Side 실행 환경
  • pip랑 동일한 역할 (자바스크립트 패키지 관리자)
    • ex) loadash, axios -> cdn 으로 가져왔었음
    • 전역적으로 설치된 패키지를 관리
    • 현재 프로젝트만 패키지 관리 (nvm: 가상환경)
  • Node.js의 영향
    • 기존에 브라우저 안에서만 동작할 수 있었던 JavaScript를 브라우저가 아닌 서버측에서도 실행 할 수 있게 함
      • 프론트엔드와 백엔드에서 동일한 언어로 개발 할 수 있게 됨
    • NPM을 활용해 수많은 오픈 소스 패키지와 라이브러리를 제공하여 개발자들이 손쉽게 코드를 공유하고 재사용 할 수 있게 함

npm 명령어

  • npm init: Node.js 패키지 관리하겠다고 초기화하는 도구
    • package.json 파일이 생성됨
  • npm install : 패키지를 설치하는 도구
    • package.json, package-lock.json 파일을 확인하여 필요한 패키지를 설치
    • npm install <패키지명>: 현재 프로젝트에 특정 패키지 추가
    • npm install -g <패키지명>: 전역 영역에 패키지 추가
    • npm root: 현재 패키지가 참조하고 있는 패키지 목록(node_module) 확인

      node_modules:
      - Node.js 프로젝트에서 사용되는 외부 패키지들이 저장되는 디렉토리
      - 프로젝트의 의존성 모듈을 저장하고 관리하는 공간
      - 프로젝트가 실행 될 때 필요한 라이브러리와 패키지들을 포함
      - .gitignore에 작성됨

    • npm audit:
      • 보안 및 의존성 취약점을 해결하기 위해 도와주는 도구
        			> 보안취약점 ? -> 개발자가 악성 코드를 넣어놓으면, 그대로 노출됨
			-> 최소한의 보안 취약점을 검사해주기 위해서 npm에서 제공하는 명령어
      • 의존성 문제
        • 현재 프로젝트에서 구성된 종속성에 대한 설명과 취약성에 대한 보고
        • 취약한 종속성에 대해 호환 가능한 업데이트를 자동으로 설치
        • [ 주의사항 ] audit 명령어는 최소한의 해결법
          • 반드시 개발자가 추가로 확인 해줘야함

Vue 프로젝트 생성

  • TypeScript

    • 자바스크립트의 가장 큰 단점인 타입으로 인한 에러를 많이 없앤 버전

  • JSX

    • React 진영에서 만듬
    • HTML 요소를 변수로 담을 수 있음 -> 화면 구성이 매우 편리해짐

  • ESLint

    • 코드를 분석하여 문법적인 오류, 안티패턴

  • vite

    • 우리가 개발을 할 수 있도록 세팅하는데 도움을 주는 도구
    • [참고] vue-cli -> vue2 버전임

  • package.json
    -name : 프로젝트의 이름
    -version: 프로젝트의 버전

    • "1.2.3" - [Major].[Minor].[Patch]
      • Major : 기존 버전과 호환되지 않는 새로운 기능이 추가될 때 버전 업
      • Minor : 기존 버전과 호환되는 새로운 기능이 추가될 때 버전 업
        • 호환되는 새로운 기능 추가 시 버전 업
      • Patch : 기존 버전과 호환되는 버그 수정 및 기능 개선 시 버전 업
    • 공식 문서 : release note에 각 버전마다의 변경사항이 작성되어있다.

  • private: true로 설정하면, npm 레지스트리에 해당 프로젝트를 배포할 수 없음

  • scripts: 프로젝트에서 실행 할 수 있는 실행 스크립트들을 정의하는 부분

    • vue에서는 3가지 스크립트를 지원
    • dev : 개발 서버 실행
    • build : 배포 할 수 있는 형태로 만들어줌
      • 코드 압축 등
    • preview: 배포 했을 때 미리보기

  • dependencies: 필요한 패키지를 정의

    • 버전 표기법
      • 틸드(~): 작성된 버전보다 높거나 같고, 다음 마이너 버전보다 낮은 버전 내에서 자동으로 업데이트
        • ex) ~3.3.4 => >=3.3.4 and <3.4.0
      • 캐럿(^): 작성된 버전보다 높거나 같고, 다음 메이저 버전보다 낮은 버전 내에서 자동으로 업데이트
        • ex) ^3.3.4 => >=3.3.4 and 4.0.0

  • package-lock.json

    • $ npm install : 실행시 자동으로 생성되는 파일
    • 현재 프로젝트에서 사용중인 패키지들과 버전 정보를 모두 포함
      • 패키지 간 의존성 관리를 자동으로 처리해줌
      • pip의 requirements.txt 역할
    • 다른 환경에서 동일한 환경을 구성하기 위해서
      • 공유시 두 파일을 모두 줘야한다.
      • 공유 받은 파일들의 name,version은 상황에 맞게 수정

  • npm install의 동작 과정
    1.package.json파일 검사

    • 설치가 필요한 패키지 목록 확인
  1. package-lock.json 파일 검사

  • 의존성 패키지 목록 확인 후 설치

  • resolved : 해당 패키지의 다운로드 경로

  • integrity: 다운로드 받은 패키지의 무결성을 체크하는 해시값

    • 정확한 패키지를 다운로드 받았는지 확인
    • 무결성 체크 실패 시 다운로드를 중지
    • 보안, 일관성 등 관리하기 위해 매우 중요한 옵션

  • dev: 개발 버전의 의존성으로 설치되었는지 여부(true/false)

  • bin: 전역적으로 실행 가능한 설치 경로

  • engines: 해당 패키지를 사용하기 위해 필요한 Node.js, npm 버전을 명시

  • optionalDependencies: 선택적인 의존성을 가진 패키지

package-lock.json

  • 패키지들의 실제 설치버전, 의존성 관계, 하위 패키지등을 포함하여 패키지 설치에 필요한 모든 정보를 포함
  • 패키지들의 정확한 버전을 보장하여, 여러 개발자가 협업하거나 서버 환경에서 일관성 있는 의존성을 유지하는데 도움을 줌
  • npm install 명령을 통해 패키지를 설치할 때 명시된 버전과 의존성을 기반으로 설치

package.json

  • 프로젝트의 메타 정보와 의존성 패키지 목록을 포함
    • 프로젝트의 이름, 버전, 작성자, 라이선스 등과 같은 메타정보를 정의
      • package-lock.json과 함께 프로젝트의 의존성을 관리하고, 버전 충돌 및 일관성을 유지하는 역할

public 디렉토리

  • 주로 다음 정적 파일을 위치시킴
    • 소스코드에서 참조되지 않는
    • 항상 같은 이름을 갖는
    • import 할 필요 없는
  • 항상 root 절대 경로를 사용하여 참조
    • public/icon.png -> /icon.png로 참조가능

src 디렉토리

  • 프로젝트의 주요 소스 코드를 포함하는 곳
    • 컴포넌트, 스타일, 라우팅 등 프로젝트의 핵심 코드를 관리

src/assets

  • 프로젝트 내에서 사용되는 자원(이미지, 폰트, 스타일 시트 등)을 관리
  • 컴포넌트 자체에서 참조하는 내부 파일을 저장하는데 사용
  • 컴포넌트가 아닌 곳에서는 public 디렉토리에 위치한 파일을 사용

src/components

  • Vue 컴포넌트들을 작성하는 곳

src/App.vue

  • Vue 앱의 최상위 Root 컴포넌트
  • 다른 하위 컴포넌트들을 포함
  • 애플리케이션 전체의 레이아웃과 공통적인 요소를 정의

src/main.js

  • Vue 인스턴스를 생성하고, 애플리케이션을 초기화 하는 역할
  • 필요한 라이브러리를 import 하고 전역설정을 수행

index.html

  • Vue 앱의 기본 HTML 파일
  • 앱의 진입점
  • Root 컴포넌트인 App.vue가 해당 페이지에 마운트 됨

Module

  • 모듈의 수가 많아지고 라이브러리 혹은 모듈간의 의존성이 깊어지면서 특정한 곳에서 발생한 문제가 어떤 모듈간의 문제인지 파악하기 어려워짐

  • 복잡하고 깊은 모듈의 의존성 문제를 해결하기 위한 도구 필요

    • BUNDLER

Bundler

  • 여러 모듈과 파일을 하나의 번들로 묶어 최적화 하여 애플리케이션에서 사용할 수 있게 만들어주는 도구

역할

  • 의존성 관리, 코드 최적화, 리소스 관리 등
  • Bundler가 하는 작업을 Bundling이라 함
  • Vite는 Rollup 이라는 Bundelr를 사용하며 개발자가 별도로 기타 환경 설정에 신경 쓰지 않도록 모두 설정해두고 있음

Virtual DOM

  • 가상의 DOM을 메모리에 저장하고 실제 DOM과 동기화 하는 프로그래밍 개념
  • 실제 DOM과의 변경 사항 비교를 통해 변경된 부분만 실제 DOM에 적용하는 방식
  • 웹 애플리케이션의 성능을 향상시키기 위한 Vue 내부 렌더링 기술

장점

  • 효율성
    • 실제 DOM 조작을 최소화 하고, 변경된 부분만 업데이트하여 성능을 향상
  • 반응성
    • 데이터의 변경을 감지하고, Virtual DOM을 효율적으로 갱신하여 UI를 자동으로 업데이트
  • 추상화
    • 개발자는 실제 DOM 조작을 Vue에게 맡기고 컴포넌트와 템플릿을 활용하는 추상화된 프로그래밍 방식으로 원하는 UI 구조를 구성하고 관리 할 수 있음
profile
백지윤
새싹 BJY
이전 포스트

<1106 내용 정리> Vue - 3

다음 포스트

<1108 내용 정리> Vue - 5

0개의 댓글